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>

frontend/src/components/Recipe/MobileRecipeCard.vue

@@ -7,7 +7,7 @@
   >
     <v-list-item>
       <v-list-item-avatar rounded size="125" class="mt-0 ml-n4">
-        <v-img :src="getImage(image)"> </v-img>
+        <v-img :src="getImage(slug)"> </v-img>
       </v-list-item-avatar>
       <v-list-item-content class="align-self-start">
         <v-list-item-title>

frontend/src/components/Recipe/RecipeCard.vue

@@ -7,7 +7,7 @@
       @click="$emit('click')"
       min-height="275"
     >
-      <v-img height="200" :src="getImage(image)">
+      <v-img height="200" :src="getImage(slug)">
         <v-expand-transition v-if="description">
           <div
             v-if="hover"

frontend/src/components/Recipe/RecipeViewer/RecipeChips.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="items && items.length > 0">
+  <div v-if="items.length > 0">
     <h2 v-if="title" class="mt-4">{{ title }}</h2>
     <v-chip
       label
@@ -19,7 +19,9 @@
 <script>
 export default {
   props: {
-    items: Array,
+    items: {
+      default: [],
+    },
     title: {
       default: null,
     },

frontend/src/components/UI/CategorySidebar.vue

@@ -51,6 +51,11 @@ export default {
           to: "/recipes/all",
           title: this.$t("page.all-recipes"),
         },
+        {
+          icon: "mdi-magnify",
+          to: "/search",
+          title: "search",
+        },
       ],
     };
   },

frontend/src/components/UI/Search/SearchBar.vue

@@ -27,7 +27,7 @@
           @click="navOnClick ? null : selected(item.item.slug, item.item.name)"
         >
           <v-list-item-avatar>
-            <v-img :src="getImage(item.item.image)"></v-img>
+            <v-img :src="getImage(item.item.slug)"></v-img>
           </v-list-item-avatar>
           <v-list-item-content
             @click="
@@ -136,6 +136,7 @@ export default {
         this.fuseResults = this.result;
       }
     },
+
     searchSlug() {
       this.selected(this.searchSlug);
     },