advanced search apge

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/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,7 +136,7 @@ export default {
         this.fuseResults = this.result;
       }
     },
-    
+
     searchSlug() {
       this.selected(this.searchSlug);
     },

frontend/src/pages/SearchPage/FilterSelector.vue

@@ -1,24 +1,40 @@
 <template>
-  <v-btn-toggle
+  <v-toolbar dense flat>
-    dense
+    <v-btn-toggle
-    v-model="selected"
+      dense
-    tile
+      v-model="selected"
-    color="primary accent-3"
+      tile
-    @change="emitChange"
+      color="primary accent-3"
-    group
+      @change="emitMulti"
-  >
+      group
-    <v-btn value="include">
+      mandatory
-      Include
+    >
-    </v-btn>
+      <v-btn :value="false">
+        Include
+      </v-btn>
 
-    <v-btn value="exclude">
+      <v-btn :value="true">
-      Exclude
+        Exclude
-    </v-btn>
+      </v-btn>
-
+    </v-btn-toggle>
-    <v-btn value="any">
+    <v-spacer></v-spacer>
-      Any
+    <v-btn-toggle
-    </v-btn>
+      dense
-  </v-btn-toggle>
+      v-model="match"
+      tile
+      color="primary accent-3"
+      @change="emitMulti"
+      group
+      mandatory
+    >
+      <v-btn :value="false">
+        And
+      </v-btn>
+      <v-btn :value="true">
+        Or
+      </v-btn>
+    </v-btn-toggle>
+  </v-toolbar>
 </template>
 
 <script>
@@ -30,13 +46,21 @@ export default {
   },
   data() {
     return {
-      selected: "include",
+      selected: false,
+      match: false,
     };
   },
   methods: {
     emitChange() {
       this.$emit("input", this.selected);
     },
+    emitMulti() {
+      const updateData = {
+        exclude: this.selected,
+        matchAny: this.match,
+      };
+      this.$emit("update", updateData);
+    },
   },
 };
 </script>

frontend/src/pages/SearchPage/index.vue

@@ -26,8 +26,8 @@
 
       <v-row dense class="mt-0 flex-row align-center justify-space-around">
         <v-col>
-          <h3 class="pl-2 headline mt-0">Category Filter</h3>
+          <h3 class="pl-2 text-center headline">Category Filter</h3>
-          <FilterSelector v-model="catFilterType" class="mb-1" />
+          <FilterSelector class="mb-1" @update="updateCatParams" />
           <CategorySelector
             :solo="true"
             :dense="false"
@@ -36,8 +36,8 @@
           />
         </v-col>
         <v-col>
-          <h3 class="pl-2 headline">Tag Filter</h3>
+          <h3 class="pl-2 text-center headline">Tag Filter</h3>
-          <FilterSelector v-model="tagFilterType" class="mb-1" />
+          <FilterSelector class="mb-1" @update="updateTagParams" />
           <TagSelector
             :solo="true"
             :dense="false"
@@ -78,9 +78,6 @@ import CategorySelector from "@/components/FormHelpers/CategorySelector";
 import TagSelector from "@/components/FormHelpers/TagSelector";
 import FilterSelector from "./FilterSelector.vue";
 
-const INCLUDE = "include";
-const EXCLUDE = "exclude";
-const ANY = "any";
 export default {
   components: {
     RecipeCard,
@@ -94,9 +91,15 @@ export default {
       searchString: "",
       maxResults: 21,
       searchResults: [],
-      catFilterType: "include",
+      catFilter: {
+        exclude: false,
+        matchAny: false,
+      },
+      tagFilter: {
+        exclude: false,
+        matchAny: false,
+      },
       includeCategories: [],
-      tagFilterType: "include",
       includeTags: [],
       options: {
         shouldSort: true,
@@ -116,8 +119,18 @@ export default {
     },
     filteredRecipes() {
       return this.allRecipes.filter(recipe => {
-        const includesTags = this.checkTags(recipe.tags);
+        const includesTags = this.check(
-        const includesCats = this.checkCategories(recipe.recipeCategory);
+          this.includeTags,
+          recipe.tags,
+          this.tagFilter.matchAny,
+          this.tagFilter.exclude
+        );
+        const includesCats = this.check(
+          this.includeCategories,
+          recipe.recipeCategory,
+          this.catFilter.matchAny,
+          this.catFilter.exclude
+        );
         return [includesTags, includesCats].every(x => x === true);
       });
     },
@@ -136,50 +149,26 @@ export default {
     },
   },
   methods: {
-    checkIncludes(filterBy, recipeList) {
+    check(filterBy, recipeList, matchAny, exclude) {
+      let isMatch = true;
+      if (filterBy.length === 0) return isMatch;
+
       if (recipeList) {
-        return filterBy.every(t => recipeList.includes(t));
+        if (matchAny) {
+          isMatch = filterBy.some(t => recipeList.includes(t)); // Checks if some items are a match
+        } else {
+          isMatch = filterBy.every(t => recipeList.includes(t)); // Checks if every items is a match
+        }
+        return exclude ? !isMatch : isMatch;
       } else;
       return false;
     },
 
-    checkExcludes(filterBy, recipeList) {
+    updateTagParams(params) {
-      if (recipeList) {
+      this.tagFilter = params;
-        return filterBy.every(t => !recipeList.includes(t));
-      } else;
-      return false;
     },
-
+    updateCatParams(params) {
-    checkAny(filterBy, recipeList) {
+      this.catFilter = params;
-      if (filterBy.length === 0) return true;
-      if (recipeList) {
-        return filterBy.some(t => recipeList.includes(t));
-      } else;
-      return false;
-    },
-
-    checkTags(recipeTags) {
-      if (this.tagFilterType === INCLUDE) {
-        return this.checkIncludes(this.includeTags, recipeTags);
-      }
-      if (this.tagFilterType === EXCLUDE) {
-        return this.checkExcludes(this.includeTags, recipeTags);
-      }
-      if (this.tagFilterType === ANY) {
-        return this.checkAny(this.includeTags, recipeTags);
-      }
-    },
-
-    checkCategories(recipeCategories) {
-      if (this.catFilterType === INCLUDE) {
-        return this.checkIncludes(this.includeCategories, recipeCategories);
-      }
-      if (this.catFilterType === EXCLUDE) {
-        return this.checkExcludes(this.includeCategories, recipeCategories);
-      }
-      if (this.catFilterType === ANY) {
-        return this.checkAny(this.includeCategories, recipeCategories);
-      }
     },
   },
 };