merge kentors changes

frontend/src/components/Recipe/RecipeEditor/index.vue

@@ -101,6 +101,10 @@
             item-color="secondary"
             deletable-chips
             v-model="value.categories"
+            hide-selected
+            :items="categories"
+            :search-input.sync="categoriesSearchInput"
+            @change="categoriesSearchInput = ''"
           >
             <template v-slot:selection="data">
               <v-chip
@@ -116,7 +120,17 @@
           </v-combobox>
 
           <h2 class="mt-4">{{ $t("recipe.tags") }}</h2>
-          <v-combobox dense multiple chips deletable-chips v-model="value.tags">
+          <v-combobox
+            dense
+            multiple
+            chips
+            deletable-chips
+            v-model="value.tags"
+            hide-selected
+            :items="tags"
+            :search-input.sync="tagsSearchInput"
+            @change="tagssSearchInput = ''"
+          >
             <template v-slot:selection="data">
               <v-chip
                 :input-value="data.selected"
@@ -234,13 +248,24 @@ export default {
     return {
       fileObject: null,
       rules: {
-        required: v => !!v || "Key Name Required",
-        whiteSpace: v =>
+        required: (v) => !!v || "Key Name Required",
+        whiteSpace: (v) =>
           !v || v.split(" ").length <= 1 || "No White Space Allowed",
       },
+      categoriesSearchInput: "",
+      tagsSearchInput: "",
+      categories: [],
+      tags: [],
     };
   },
+  mounted() {
+    this.getCategories();
+  },
   methods: {
+    async getCategories() {
+      let response = await api.categories.get_all();
+      this.categories = response.data.map((cat) => cat.name);
+    },
     uploadImage() {
       this.$emit("upload", this.fileObject);
     },
@@ -286,7 +311,7 @@ export default {
 
     appendSteps(steps) {
       let processSteps = [];
-      steps.forEach(element => {
+      steps.forEach((element) => {
         processSteps.push({ text: element });
       });