From 697fa16010174cf94cbd060ee27b1dc8afcce113 Mon Sep 17 00:00:00 2001
From: hay-kot <hay-kot@pm.me>
Date: Wed, 5 May 2021 10:42:11 -0800
Subject: [PATCH] add toolbars tools to recipe sections

---
 frontend/src/api/api-utils.js                 |  2 +-
 .../components/MealPlan/MealPlanEditor.vue    |  2 +-
 .../src/components/MealPlan/MealPlanNew.vue   |  2 +-
 .../components/Recipe/Parts/Ingredients.vue   |  2 +-
 .../components/Recipe/Parts/Instructions.vue  |  2 +-
 .../src/components/Recipe/Parts/Notes.vue     |  2 +-
 .../src/components/Recipe/RecipePrint.vue     |  2 +-
 .../components/Recipe/RecipeViewer/index.vue  |  2 +-
 frontend/src/components/UI/CardSection.vue    | 61 ++++++++++++++++---
 frontend/src/locales/messages/en-US.json      |  3 +
 frontend/src/pages/MealPlan/Planner.vue       |  2 +-
 frontend/src/pages/MealPlan/ThisWeek.vue      |  2 +-
 frontend/src/pages/Recipes/AllRecipes.vue     | 20 +++---
 frontend/src/pages/SearchPage/index.vue       | 37 ++++++-----
 frontend/src/routes/meal.js                   |  2 +-
 frontend/src/utils/index.js                   |  4 +-
 frontend/src/utils/recipe.js                  | 31 ++++++++++
 17 files changed, 132 insertions(+), 46 deletions(-)
 create mode 100644 frontend/src/utils/recipe.js

diff --git a/frontend/src/api/api-utils.js b/frontend/src/api/api-utils.js
index a143f8452..597423f2e 100644
--- a/frontend/src/api/api-utils.js
+++ b/frontend/src/api/api-utils.js
@@ -1,7 +1,7 @@
 const baseURL = "/api/";
 import axios from "axios";
 import { store } from "../store";
-import utils from "@/utils";
+import { utils } from "@/utils";
 
 axios.defaults.headers.common["Authorization"] = `Bearer ${store.getters.getToken}`;
 
diff --git a/frontend/src/components/MealPlan/MealPlanEditor.vue b/frontend/src/components/MealPlan/MealPlanEditor.vue
index 76d489aca..f38cdedd9 100644
--- a/frontend/src/components/MealPlan/MealPlanEditor.vue
+++ b/frontend/src/components/MealPlan/MealPlanEditor.vue
@@ -21,7 +21,7 @@
 
 <script>
 import { api } from "@/api";
-import utils from "@/utils";
+import { utils } from "@/utils";
 import MealPlanCard from "./MealPlanCard";
 export default {
   components: {
diff --git a/frontend/src/components/MealPlan/MealPlanNew.vue b/frontend/src/components/MealPlan/MealPlanNew.vue
index fc43cd2d8..d0f264e68 100644
--- a/frontend/src/components/MealPlan/MealPlanNew.vue
+++ b/frontend/src/components/MealPlan/MealPlanNew.vue
@@ -82,7 +82,7 @@
 const CREATE_EVENT = "created";
 import DatePicker from "@/components/FormHelpers/DatePicker";
 import { api } from "@/api";
-import utils from "@/utils";
+import { utils } from "@/utils";
 import MealPlanCard from "./MealPlanCard";
 export default {
   components: {
diff --git a/frontend/src/components/Recipe/Parts/Ingredients.vue b/frontend/src/components/Recipe/Parts/Ingredients.vue
index 93d7e1a06..463450242 100644
--- a/frontend/src/components/Recipe/Parts/Ingredients.vue
+++ b/frontend/src/components/Recipe/Parts/Ingredients.vue
@@ -56,7 +56,7 @@
 import BulkAdd from "@/components/Recipe/Parts/Helpers/BulkAdd";
 import VueMarkdown from "@adapttive/vue-markdown";
 import draggable from "vuedraggable";
-import utils from "@/utils";
+import { utils } from "@/utils";
 export default {
   components: {
     BulkAdd,
diff --git a/frontend/src/components/Recipe/Parts/Instructions.vue b/frontend/src/components/Recipe/Parts/Instructions.vue
index b80fe0fc3..ae6319617 100644
--- a/frontend/src/components/Recipe/Parts/Instructions.vue
+++ b/frontend/src/components/Recipe/Parts/Instructions.vue
@@ -66,7 +66,7 @@
 
 <script>
 import VueMarkdown from "@adapttive/vue-markdown";
-import utils from "@/utils";
+import { utils } from "@/utils";
 export default {
   components: {
     VueMarkdown,
diff --git a/frontend/src/components/Recipe/Parts/Notes.vue b/frontend/src/components/Recipe/Parts/Notes.vue
index cc38d8b8d..02be7ce3e 100644
--- a/frontend/src/components/Recipe/Parts/Notes.vue
+++ b/frontend/src/components/Recipe/Parts/Notes.vue
@@ -35,7 +35,7 @@
 
 <script>
 import VueMarkdown from "@adapttive/vue-markdown";
-import utils from "@/utils";
+import { utils } from "@/utils";
 export default {
   components: {
     VueMarkdown,
diff --git a/frontend/src/components/Recipe/RecipePrint.vue b/frontend/src/components/Recipe/RecipePrint.vue
index 5fc68d7cb..0744ea533 100644
--- a/frontend/src/components/Recipe/RecipePrint.vue
+++ b/frontend/src/components/Recipe/RecipePrint.vue
@@ -124,7 +124,7 @@
 </template>
 
 <script>
-import utils from "@/utils";
+import { utils } from "@/utils";
 import { api } from "@/api";
 
 export default {
diff --git a/frontend/src/components/Recipe/RecipeViewer/index.vue b/frontend/src/components/Recipe/RecipeViewer/index.vue
index 74498da71..ea44bf2a5 100644
--- a/frontend/src/components/Recipe/RecipeViewer/index.vue
+++ b/frontend/src/components/Recipe/RecipeViewer/index.vue
@@ -88,7 +88,7 @@
 <script>
 import Nutrition from "@/components/Recipe/Parts/Nutrition";
 import VueMarkdown from "@adapttive/vue-markdown";
-import utils from "@/utils";
+import { utils } from "@/utils";
 import RecipeChips from "./RecipeChips";
 import Rating from "@/components/Recipe/Parts/Rating";
 import Notes from "@/components/Recipe/Parts/Notes";
diff --git a/frontend/src/components/UI/CardSection.vue b/frontend/src/components/UI/CardSection.vue
index 6bb57e4d2..c9e712739 100644
--- a/frontend/src/components/UI/CardSection.vue
+++ b/frontend/src/components/UI/CardSection.vue
@@ -6,21 +6,28 @@
       </v-icon>
       <v-toolbar-title class="headline"> {{ title }} </v-toolbar-title>
       <v-spacer></v-spacer>
-      <v-menu offset-y v-if="$listeners.sortRecent || $listeners.sort">
+      <v-btn text @click="navigateRandom">
+        Random
+      </v-btn>
+      <v-menu offset-y v-if="$listeners.sort">
         <template v-slot:activator="{ on, attrs }">
-          <v-btn-toggle group>
-            <v-btn text v-bind="attrs" v-on="on">
-              {{ $t("general.sort") }}
-            </v-btn>
-          </v-btn-toggle>
+          <v-btn text v-bind="attrs" v-on="on">
+            {{ $t("general.sort") }}
+          </v-btn>
         </template>
         <v-list>
-          <v-list-item @click="$emit('sortRecent')">
-            <v-list-item-title>{{ $t("general.recent") }}</v-list-item-title>
-          </v-list-item>
-          <v-list-item @click="$emit('sort')">
+          <v-list-item @click="sortRecipes(EVENTS.az)">
             <v-list-item-title>{{ $t("general.sort-alphabetically") }}</v-list-item-title>
           </v-list-item>
+          <v-list-item @click="sortRecipes(EVENTS.rating)">
+            <v-list-item-title>{{ $t("general.rating") }}</v-list-item-title>
+          </v-list-item>
+          <v-list-item @click="sortRecipes(EVENTS.updated)">
+            <v-list-item-title>{{ $t("general.updated") }}</v-list-item-title>
+          </v-list-item>
+          <v-list-item @click="sortRecipes(EVENTS.created)">
+            <v-list-item-title>{{ $t("general.created") }}</v-list-item-title>
+          </v-list-item>
         </v-list>
       </v-menu>
     </v-app-bar>
@@ -76,6 +83,9 @@
 <script>
 import RecipeCard from "../Recipe/RecipeCard";
 import MobileRecipeCard from "@/components/Recipe/MobileRecipeCard";
+import { utils } from "@/utils";
+const SORT_EVENT = "sort";
+
 export default {
   components: {
     RecipeCard,
@@ -106,6 +116,12 @@ export default {
     return {
       cardLimit: 30,
       loading: false,
+      EVENTS: {
+        az: "az",
+        rating: "rating",
+        created: "created",
+        updated: "updated",
+      },
     };
   },
   watch: {
@@ -144,6 +160,31 @@ export default {
       await new Promise(r => setTimeout(r, 1000));
       this.loading = false;
     },
+    navigateRandom() {
+      const recipe = utils.recipe.randomRecipe(this.recipes);
+      this.$router.push(`/recipe/${recipe.slug}`);
+    },
+    sortRecipes(sortType) {
+      let sortTarget = [...this.recipes];
+      switch (sortType) {
+        case this.EVENTS.az:
+          utils.recipe.sortAToZ(sortTarget);
+          break;
+        case this.EVENTS.rating:
+          utils.recipe.sortByRating(sortTarget);
+          break;
+        case this.EVENTS.created:
+          utils.recipe.sortByCreated(sortTarget);
+          break;
+        case this.EVENTS.updated:
+          utils.recipe.sortByUpdated(sortTarget);
+          break;
+        default:
+          console.log("Unknown Event", sortType);
+          return;
+      }
+      this.$emit(SORT_EVENT, sortTarget);
+    },
   },
 };
 </script>
diff --git a/frontend/src/locales/messages/en-US.json b/frontend/src/locales/messages/en-US.json
index 5aab6900f..0122916c1 100644
--- a/frontend/src/locales/messages/en-US.json
+++ b/frontend/src/locales/messages/en-US.json
@@ -36,6 +36,7 @@
     "close": "Close",
     "confirm": "Confirm",
     "create": "Create",
+    "created": "Created",
     "current-parenthesis": "(Current)",
     "dashboard": "Dashboard",
     "delete": "Delete",
@@ -63,6 +64,7 @@
     "no": "No",
     "ok": "OK",
     "options": "Options:",
+    "rating": "Rating",
     "random": "Random",
     "recent": "Recent",
     "recipes": "Recipes",
@@ -83,6 +85,7 @@
     "token": "Token",
     "tuesday": "Tuesday",
     "update": "Update",
+    "updated": "Updated",
     "upload": "Upload",
     "url": "URL",
     "users": "Users",
diff --git a/frontend/src/pages/MealPlan/Planner.vue b/frontend/src/pages/MealPlan/Planner.vue
index 3c9903939..648c26361 100644
--- a/frontend/src/pages/MealPlan/Planner.vue
+++ b/frontend/src/pages/MealPlan/Planner.vue
@@ -54,7 +54,7 @@
 
 <script>
 import { api } from "@/api";
-import utils from "@/utils";
+import { utils } from "@/utils";
 import NewMeal from "@/components/MealPlan/MealPlanNew";
 import EditPlan from "@/components/MealPlan/MealPlanEditor";
 import ShoppingListDialog from "@/components/MealPlan/ShoppingListDialog";
diff --git a/frontend/src/pages/MealPlan/ThisWeek.vue b/frontend/src/pages/MealPlan/ThisWeek.vue
index 2b49fc8ec..db0e41ca8 100644
--- a/frontend/src/pages/MealPlan/ThisWeek.vue
+++ b/frontend/src/pages/MealPlan/ThisWeek.vue
@@ -36,7 +36,7 @@
 
 <script>
 import { api } from "@/api";
-import utils from "@/utils";
+import { utils } from "@/utils";
 export default {
   data() {
     return {
diff --git a/frontend/src/pages/Recipes/AllRecipes.vue b/frontend/src/pages/Recipes/AllRecipes.vue
index 7f258763b..aa0fe6ea1 100644
--- a/frontend/src/pages/Recipes/AllRecipes.vue
+++ b/frontend/src/pages/Recipes/AllRecipes.vue
@@ -5,9 +5,8 @@
       title-icon=""
       :sortable="true"
       :title="$t('page.all-recipes')"
-      :recipes="allRecipes"
-      @sort="sortAZ"
-      @sort-recent="sortRecent"
+      :recipes="shownRecipes"
+      @sort="assignSorted"
     />
   </v-container>
 </template>
@@ -22,6 +21,7 @@ export default {
   data() {
     return {
       loading: false,
+      sortedResults: [],
     };
   },
   async mounted() {
@@ -35,13 +35,17 @@ export default {
     allRecipes() {
       return this.$store.getters.getAllRecipes;
     },
+    shownRecipes() {
+      if (this.sortedResults.length > 0) {
+        return this.sortedResults;
+      } else {
+        return this.allRecipes;
+      }
+    },
   },
   methods: {
-    sortAZ() {
-      this.allRecipes.sort((a, b) => (a.name > b.name ? 1 : -1));
-    },
-    sortRecent() {
-      this.allRecipes.sort((a, b) => (a.dateAdded > b.dateAdded ? -1 : 1));
+    assignSorted(val) {
+      this.sortedResults = val;
     },
   },
 };
diff --git a/frontend/src/pages/SearchPage/index.vue b/frontend/src/pages/SearchPage/index.vue
index 4c4135fd4..4738e5f37 100644
--- a/frontend/src/pages/SearchPage/index.vue
+++ b/frontend/src/pages/SearchPage/index.vue
@@ -47,31 +47,20 @@
         </v-col>
       </v-row>
 
-      <v-row v-if="fuzzyRecipes">
-        <v-col :sm="6" :md="6" :lg="4" :xl="3" v-for="item in fuzzyRecipes.slice(0, maxResults)" :key="item.name">
-          <RecipeCard
-            :name="item.item.name"
-            :description="item.item.description"
-            :slug="item.item.slug"
-            :rating="item.item.rating"
-            :image="item.item.image"
-            :tags="item.item.tags"
-          />
-        </v-col>
-      </v-row>
+      <CardSection title-icon="mdi-mag" :recipes="showRecipes" :hardLimit="maxResults" @sort="assignFuzzy" />
     </v-card>
   </v-container>
 </template>
 
 <script>
 import Fuse from "fuse.js";
-import RecipeCard from "@/components/Recipe/RecipeCard";
 import CategoryTagSelector from "@/components/FormHelpers/CategoryTagSelector";
+import CardSection from "@/components/UI/CardSection";
 import FilterSelector from "./FilterSelector.vue";
 
 export default {
   components: {
-    RecipeCard,
+    CardSection,
     CategoryTagSelector,
     FilterSelector,
   },
@@ -88,6 +77,7 @@ export default {
         exclude: false,
         matchAny: false,
       },
+      sortedResults: [],
       includeCategories: [],
       includeTags: [],
       options: {
@@ -126,16 +116,31 @@ export default {
     },
     fuzzyRecipes() {
       if (this.searchString.trim() === "") {
-        return this.filteredRecipes.map(x => ({ item: x }));
+        return this.filteredRecipes;
       }
       const result = this.fuse.search(this.searchString.trim());
-      return result;
+      return result.map(x => x.item);
     },
     isSearching() {
       return this.searchString && this.searchString.length > 0;
     },
+    showRecipes() {
+      if (this.sortedResults.length > 0) {
+        return this.sortedResults;
+      } else {
+        return this.fuzzyRecipes;
+      }
+    },
+  },
+  watch: {
+    showRecipes(val) {
+      console.log(val);
+    },
   },
   methods: {
+    assignFuzzy(val) {
+      this.sortedResults = val;
+    },
     check(filterBy, recipeList, matchAny, exclude) {
       let isMatch = true;
       if (filterBy.length === 0) return isMatch;
diff --git a/frontend/src/routes/meal.js b/frontend/src/routes/meal.js
index 4a3588e2c..f21c8595e 100644
--- a/frontend/src/routes/meal.js
+++ b/frontend/src/routes/meal.js
@@ -3,7 +3,7 @@ import ThisWeek from "@/pages/MealPlan/ThisWeek";
 import { api } from "@/api";
 
 import i18n from "@/i18n.js";
-import utils from "@/utils";
+import { utils } from "@/utils";
 
 export const mealRoutes = [
   {
diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js
index d1f5afe7a..447e4a230 100644
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -1,4 +1,5 @@
 import { vueApp } from "../main";
+import { recipe } from "@/utils/recipe";
 
 // TODO: Migrate to Mixins
 const notifyHelpers = {
@@ -9,7 +10,8 @@ const notifyHelpers = {
   info: "notify-info-color",
 };
 
-export default {
+export const utils = {
+  recipe: recipe,
   getImageURL(image) {
     return `/api/recipes/${image}/image?image_type=small`;
   },
diff --git a/frontend/src/utils/recipe.js b/frontend/src/utils/recipe.js
new file mode 100644
index 000000000..031f85081
--- /dev/null
+++ b/frontend/src/utils/recipe.js
@@ -0,0 +1,31 @@
+export const recipe = {
+  /**
+   * Sorts a list of recipes in place
+   * @param {Array<Object>} list of recipes
+   * @param {Boolean} inverse - Z or A First
+   */
+  sortAToZ(list) {
+    list.sort((a, b) => {
+      var textA = a.name.toUpperCase();
+      var textB = b.name.toUpperCase();
+      return textA < textB ? -1 : textA > textB ? 1 : 0;
+    });
+  },
+  sortByCreated(list) {
+    list.sort((a, b) => (a.dateAdded > b.dateAdded ? -1 : 1));
+  },
+  sortUpdated(list) {
+    list.sort((a, b) => (a.dateUpdated > b.dateUpdated ? -1 : 1));
+  },
+  sortByRating(list) {
+    list.sort((a, b) => (a.rating > b.rating ? -1 : 1));
+  },
+  /**
+   *
+   * @param {Array<Object>} list
+   * @returns String / Recipe Slug
+   */
+  randomRecipe(list) {
+    return list[Math.floor(Math.random() * list.length)];
+  },
+};