meal-plan search redesign

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

@@ -1,34 +1,38 @@
 <template>
-  <v-menu v-model="menuModel" offset-y readonly max-width="450">
+  <v-menu v-model="menuModel" offset-y readonly :max-width="maxWidth">
     <template #activator="{ attrs }">
       <v-text-field
         class="mt-6"
         v-model="search"
         v-bind="attrs"
-        dense
+        :dense="dense"
         light
         :label="$t('search.search-mealie')"
-        solo
         autofocus
-        style="max-width: 450px;"
+        :solo="solo"
+        :style="`max-width: ${maxWidth};`"
         @focus="onFocus"
+        autocomplete="off"
       >
       </v-text-field>
     </template>
-    <v-card  v-if="showResults" max-height="500" min-width="98%" class="">
-      <v-card-text  class="py-1">Results</v-card-text>
+    <v-card v-if="showResults" max-height="500" :max-width="maxWidth">
+      <v-card-text class="py-1">Results</v-card-text>
       <v-divider></v-divider>
       <v-list scrollable>
         <v-list-item
           v-for="(item, index) in autoResults"
           :key="index"
-          :to="showResults ? `/recipe/${item.item.slug}` : null"
+          :to="navOnClick ? `/recipe/${item.item.slug}` : null"
+          @click="navOnClick ? null : selected(item.item.slug, item.item.name)"
         >
           <v-list-item-avatar>
             <v-img :src="getImage(item.item.image)"></v-img>
           </v-list-item-avatar>
           <v-list-item-content
-            @click="showResults ? null : selected(item.item.slug)"
+            @click="
+              showResults ? null : selected(item.item.slug, item.item.name)
+            "
           >
             <v-list-item-title v-html="highlight(item.item.name)">
             </v-list-item-title>
@@ -57,6 +61,21 @@ export default {
     showResults: {
       default: false,
     },
+    maxWidth: {
+      default: "450px",
+    },
+    dense: {
+      default: true,
+    },
+    navOnClick: {
+      default: true,
+    },
+    resetSearch: {
+      default: false,
+    },
+    solo: {
+      default: true,
+    },
   },
   data() {
     return {
@@ -65,7 +84,7 @@ export default {
       menuModel: false,
       data: [],
       result: [],
-      autoResults: [],
+      fuseResults: [],
       isDark: false,
       options: {
         shouldSort: true,
@@ -84,6 +103,9 @@ export default {
     this.data = this.$store.getters.getRecentRecipes;
   },
   computed: {
+    autoResults() {
+      return this.fuseResults.length > 1 ? this.fuseResults : this.results;
+    },
     fuse() {
       return new Fuse(this.data, this.options);
     },
@@ -96,6 +118,10 @@ export default {
       val ? (this.menuModel = true) : null;
     },
 
+    resetSearch(val) {
+      val ? (this.search = "") : null;
+    },
+
     search() {
       try {
         this.result = this.fuse.search(this.search.trim());
@@ -107,7 +133,7 @@ export default {
       this.$emit("results", this.result);
 
       if (this.showResults === true) {
-        this.autoResults = this.result;
+        this.fuseResults = this.result;
       }
     },
     searchSlug() {
@@ -127,8 +153,9 @@ export default {
     getImage(image) {
       return utils.getImageURL(image);
     },
-    selected(slug) {
-      this.$emit("selected", slug);
+    selected(slug, name) {
+      console.log("Selected", slug, name);
+      this.$emit("selected", slug, name);
     },
     async onFocus() {
       clearTimeout(this.timeout);

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

@@ -1,41 +1,21 @@
 <template>
   <div class="text-center">
-    <v-dialog v-model="dialog" height="100%" max-width="1200">
-      <v-card min-height="725" height="100%">
+    <v-dialog v-model="dialog" width="600px" height="0">
+      <v-card>
+        <v-app-bar dark color="primary">
+          <v-toolbar-title class="headline">Search a Recipe</v-toolbar-title>
+        </v-app-bar>
         <v-card-text>
-          <v-card-title></v-card-title>
-          <v-row justify="center">
-            <v-col cols="1"> </v-col>
-            <v-col>
-              <SearchBar @results="updateResults" :show-results="false" />
-            </v-col>
-            <v-col cols="2">
-              <v-btn icon>
-                <v-icon large> mdi-filter </v-icon>
-              </v-btn>
-            </v-col>
-          </v-row>
-
-          <v-row v-if="searchResults">
-            <v-col
-              :sm="6"
-              :md="6"
-              :lg="4"
-              :xl="3"
-              v-for="item in searchResults.slice(0, 24)"
-              :key="item.item.name"
-            >
-              <RecipeCard
-                :route="false"
-                :name="item.item.name"
-                :description="item.item.description"
-                :slug="item.item.slug"
-                :rating="item.item.rating"
-                :image="item.item.image"
-                @click="emitSelect(item.item.name, item.item.slug)"
-              />
-            </v-col>
-          </v-row>
+          <SearchBar
+            @results="updateResults"
+            @selected="emitSelect"
+            :show-results="true"
+            max-width="550px"
+            :dense="false"
+            :nav-on-click="false"
+            :reset-search="dialog"
+            :solo="false"
+          />
         </v-card-text>
       </v-card>
     </v-dialog>
@@ -44,11 +24,9 @@
 
 <script>
 import SearchBar from "./SearchBar";
-import RecipeCard from "../../Recipe/RecipeCard";
 export default {
   components: {
     SearchBar,
-    RecipeCard,
   },
   data() {
     return {
@@ -60,7 +38,7 @@ export default {
     updateResults(results) {
       this.searchResults = results;
     },
-    emitSelect(name, slug) {
+    emitSelect(slug, name) {
       this.$emit("select", name, slug);
       this.dialog = false;
     },
@@ -72,4 +50,9 @@ export default {
 </script>
 
 <style>
+.v-dialog__content {
+  margin-top: 10%;
+  align-items: flex-start;
+  justify-content: center;
+}
 </style>