merge kentors changes

frontend/src/api.js

@@ -5,6 +5,9 @@ import settings from "./api/settings";
 import themes from "./api/themes";
 import migration from "./api/migration";
 import myUtils from "./api/upload";
+import category from "./api/category";
+
+// import api from "../api";
 
 export default {
   recipes: recipe,
@@ -14,4 +17,5 @@ export default {
   themes: themes,
   migrations: migration,
   utils: myUtils,
+  categories: category,
 };

frontend/src/api/category.js

@@ -0,0 +1,15 @@
+import { baseURL } from "./api-utils";
+import { apiReq } from "./api-utils";
+
+const categoryBase = baseURL + "category/";
+
+const categoryURLs = {
+    get_all: `${categoryBase}all`,
+  };
+ 
+export default {
+    async get_all() {
+      let response = await apiReq.get(categoryURLs.get_all);
+      return response;
+    },
+}

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