From 096fb867612cd60302e1f65c18ef1de9bf8bff40 Mon Sep 17 00:00:00 2001
From: hay-kot <hay-kot@pm.me>
Date: Tue, 30 Mar 2021 16:36:53 -0800
Subject: [PATCH] fix category auto-completes

---
 .../components/Recipe/RecipeEditor/index.vue  | 23 +++++++++++--------
 .../Recipe/RecipeViewer/RecipeChips.vue       | 17 ++++++++++++++
 frontend/src/store/index.js                   |  3 ++-
 3 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/Recipe/RecipeEditor/index.vue b/frontend/src/components/Recipe/RecipeEditor/index.vue
index dfa368e6e..e50d9080d 100644
--- a/frontend/src/components/Recipe/RecipeEditor/index.vue
+++ b/frontend/src/components/Recipe/RecipeEditor/index.vue
@@ -120,17 +120,19 @@
             deletable-chips
             v-model="value.recipeCategory"
             hide-selected
-            :items="categories"
+            :items="allCategories"
             text="name"
             :search-input.sync="categoriesSearchInput"
             @change="categoriesSearchInput = ''"
           >
             <template v-slot:selection="data">
               <v-chip
+                class="ma-1"
                 :input-value="data.selected"
                 close
                 @click:close="removeCategory(data.index)"
-                color="secondary"
+                label
+                color="accent"
                 dark
               >
                 {{ data.item }}
@@ -152,10 +154,12 @@
           >
             <template v-slot:selection="data">
               <v-chip
+                class="ma-1"
                 :input-value="data.selected"
                 close
+                label
                 @click:close="removeTags(data.index)"
-                color="secondary"
+                color="accent"
                 dark
               >
                 {{ data.item }}
@@ -221,7 +225,7 @@
                     elevation="0"
                     @click="removeStep(index)"
                   >
-                    <v-icon color="error">mdi-delete</v-icon>
+                    <v-icon size="24" color="error">mdi-delete</v-icon>
                   </v-btn>
                   {{ $t("recipe.step-index", { step: index + 1 }) }}
                 </v-card-title>
@@ -284,14 +288,13 @@ export default {
       tags: [],
     };
   },
-  mounted() {
-    this.getCategories();
+  computed: {
+    allCategories() {
+      const categories = this.$store.getters.getAllCategories;
+      return categories.map(cat => cat.name);
+    },
   },
   methods: {
-    async getCategories() {
-      let response = await api.categories.get_all();
-      this.categories = response.map(cat => cat.name);
-    },
     uploadImage() {
       this.$emit("upload", this.fileObject);
     },
diff --git a/frontend/src/components/Recipe/RecipeViewer/RecipeChips.vue b/frontend/src/components/Recipe/RecipeViewer/RecipeChips.vue
index 539da8e32..825f2e8d9 100644
--- a/frontend/src/components/Recipe/RecipeViewer/RecipeChips.vue
+++ b/frontend/src/components/Recipe/RecipeViewer/RecipeChips.vue
@@ -2,6 +2,8 @@
   <div v-if="items && items.length > 0">
     <h2 class="mt-4">{{ title }}</h2>
     <v-chip
+      :to="`/recipes/${getSlug(category)}`"
+      label
       class="ma-1"
       color="accent"
       dark
@@ -18,6 +20,21 @@ export default {
   props: {
     items: Array,
     title: String,
+    category: {
+      default: true,
+    },
+  },
+  computed: {
+    allCategories() {
+      return this.$store.getters.getAllCategories;
+    },
+  },
+  methods: {
+    getSlug(name) {
+      if (this.category) {
+        return this.allCategories.filter(x => x.name == name)[0].slug;
+      }
+    },
   },
 };
 </script>
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index d84455d43..7065f70f0 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -65,7 +65,8 @@ const store = new Vuex.Store({
   getters: {
     getRecentRecipes: state => state.recentRecipes,
     getMealPlanCategories: state => state.mealPlanCategories,
-    getAllCategories: state => state.allCategories,
+    getAllCategories: state =>
+      state.allCategories.sort((a, b) => (a.slug > b.slug ? 1 : -1)),
   },
 });