merge category and tag selector

frontend/src/components/Admin/General/CreatePageDialog.vue

@@ -19,7 +19,7 @@
             v-model="page.name"
             label="Page Name"
           ></v-text-field>
-          <CategorySelector
+          <CategoryTagSelector
             v-model="page.categories"
             ref="categoryFormSelector"
             @mounted="catMounted = true"
@@ -43,10 +43,10 @@
 <script>
 const NEW_PAGE_EVENT = "refresh-page";
 import { api } from "@/api";
-import CategorySelector from "@/components/FormHelpers/CategorySelector";
+import CategoryTagSelector from "@/components/FormHelpers/CategoryTagSelector";
 export default {
   components: {
-    CategorySelector,
+    CategoryTagSelector,
   },
   data() {
     return {

frontend/src/components/FormHelpers/CategoryTagSelector.vue

@@ -1,8 +1,8 @@
 <template>
   <v-select
-    :items="allCategories"
+    :items="activeItems"
     v-model="selected"
-    label="Categories"
+    :label="inputLabel"
     chips
     deletable-chips
     :dense="dense"
@@ -43,6 +43,9 @@ export default {
     returnObject: {
       default: true,
     },
+    tagSelector: {
+      default: false,
+    },
   },
   data() {
     return {
@@ -54,9 +57,18 @@ export default {
   },
 
   computed: {
+    inputLabel() {
+      return this.tagSelector ? "Tags" : "Categories";
+    },
+    activeItems() {
+      return this.tagSelector ? this.allTags : this.allCategories;
+    },
     allCategories() {
       return this.$store.getters.getAllCategories;
     },
+    allTags() {
+      return this.$store.getters.getAllTags;
+    },
     flat() {
       return this.selected.length > 0 && this.solo;
     },

frontend/src/components/FormHelpers/TagSelector.vue

@@ -1,79 +0,0 @@
-<template>
-  <v-select
-    :items="allTags"
-    v-model="selected"
-    label="Tags"
-    chips
-    deletable-chips
-    :dense="dense"
-    :solo="solo"
-    :flat="flat"
-    item-text="name"
-    multiple
-    :return-object="returnObject"
-    @input="emitChange"
-  >
-    <template v-slot:selection="data">
-      <v-chip
-        class="ma-1"
-        :input-value="data.selected"
-        close
-        @click:close="removeByIndex(data.index)"
-        label
-        color="accent"
-        dark
-      >
-        {{ data.item.name }}
-      </v-chip>
-    </template>
-  </v-select>
-</template>
-
-<script>
-const MOUNTED_EVENT = "mounted";
-export default {
-  props: {
-    value: Array,
-    solo: {
-      default: false,
-    },
-    dense: {
-      default: true,
-    },
-    returnObject: {
-      default: true,
-    },
-  },
-  data() {
-    return {
-      selected: [],
-    };
-  },
-  mounted() {
-    this.$emit(MOUNTED_EVENT);
-  },
-
-  computed: {
-    allTags() {
-      return this.$store.getters.getAllTags;
-    },
-    flat() {
-      return this.selected.length > 0 && this.solo;
-    },
-  },
-  methods: {
-    emitChange() {
-      this.$emit("input", this.selected);
-    },
-    setInit(val) {
-      this.selected = val;
-    },
-    removeByIndex(index) {
-      this.selected.splice(index, 1);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-</style>

frontend/src/pages/SearchPage/index.vue

@@ -28,7 +28,7 @@
         <v-col>
           <h3 class="pl-2 text-center headline">Category Filter</h3>
           <FilterSelector class="mb-1" @update="updateCatParams" />
-          <CategorySelector
+          <CategoryTagSelector
             :solo="true"
             :dense="false"
             v-model="includeCategories"
@@ -38,11 +38,13 @@
         <v-col>
           <h3 class="pl-2 text-center headline">Tag Filter</h3>
           <FilterSelector class="mb-1" @update="updateTagParams" />
-          <TagSelector
+
+          <CategoryTagSelector
             :solo="true"
             :dense="false"
             v-model="includeTags"
             :return-object="false"
+            :tag-selector="true"
           />
         </v-col>
       </v-row>
@@ -74,16 +76,14 @@
 import Fuse from "fuse.js";
 import RecipeCard from "@/components/Recipe/RecipeCard";
 import CategorySidebar from "@/components/UI/CategorySidebar";
-import CategorySelector from "@/components/FormHelpers/CategorySelector";
-import TagSelector from "@/components/FormHelpers/TagSelector";
+import CategoryTagSelector from "@/components/FormHelpers/CategoryTagSelector";
 import FilterSelector from "./FilterSelector.vue";
 
 export default {
   components: {
     RecipeCard,
     CategorySidebar,
-    CategorySelector,
-    TagSelector,
+    CategoryTagSelector,
     FilterSelector,
   },
   data() {