Feature/search page (#259)

* add pillow dependencies

* advanced search page

* advanced search apge

* remove extra dependencies

* add pre-run script

Co-authored-by: hay-kot <hay-kot@pm.me>

frontend/src/components/FormHelpers/CategorySelector.vue

@@ -1,18 +1,32 @@
 <template>
-  <div>
-    <v-select
-      :items="allCategories"
-      v-model="selected"
-      label="Categories"
-      chips
-      deletable-chips
-      dense
-      item-text="name"
-      multiple
-      return-object
-      @input="emitChange"
-    ></v-select>
-  </div>
+  <v-select
+    :items="allCategories"
+    v-model="selected"
+    label="Categories"
+    chips
+    deletable-chips
+    :dense="dense"
+    item-text="name"
+    multiple
+    :solo="solo"
+    :return-object="returnObject"
+    :flat="flat"
+    @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>
@@ -20,6 +34,15 @@ const MOUNTED_EVENT = "mounted";
 export default {
   props: {
     value: Array,
+    solo: {
+      default: false,
+    },
+    dense: {
+      default: true,
+    },
+    returnObject: {
+      default: true,
+    },
   },
   data() {
     return {
@@ -34,6 +57,9 @@ export default {
     allCategories() {
       return this.$store.getters.getAllCategories;
     },
+    flat() {
+      return this.selected.length > 0 && this.solo;
+    },
   },
   methods: {
     emitChange() {
@@ -42,6 +68,9 @@ export default {
     setInit(val) {
       this.selected = val;
     },
+    removeByIndex(index) {
+      this.selected.splice(index, 1);
+    },
   },
 };
 </script>

frontend/src/components/FormHelpers/TagSelector.vue

@@ -0,0 +1,79 @@
+<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>