fix category auto-completes

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);
     },

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>

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)),
   },
 });