improved search ui

frontend/src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <v-app>
     <v-app-bar dense app color="primary" dark class="d-print-none">
-      <v-btn @click="$router.push('/')" icon class="d-flex align-center">
+      <v-btn @click="$router.push('/')" icon>
         <v-icon size="40"> mdi-silverware-variant </v-icon>
       </v-btn>
       <div btn class="pl-2">
@@ -9,8 +9,15 @@
       </div>
 
       <v-spacer></v-spacer>
-
-      <v-btn icon @click="$router.push('/search')">
+      <v-expand-x-transition>
+        <SearchBar
+          class="mt-7"
+          v-if="search"
+          :show-results="true"
+          @selected="navigateFromSearch"
+        />
+      </v-expand-x-transition>
+      <v-btn icon @click="toggleSearch">
         <v-icon>mdi-magnify</v-icon>
       </v-btn>
 
@@ -28,6 +35,7 @@
 
 <script>
 import Menu from "./components/UI/Menu";
+import SearchBar from "./components/UI/SearchBar";
 import AddRecipeFab from "./components/UI/AddRecipeFab";
 import SnackBar from "./components/UI/SnackBar";
 import Vuetify from "./plugins/vuetify";
@@ -38,6 +46,7 @@ export default {
     Menu,
     AddRecipeFab,
     SnackBar,
+    SearchBar,
   },
 
   watch: {
@@ -83,6 +92,9 @@ export default {
         this.search = true;
       }
     },
+    navigateFromSearch(slug) {
+      this.$router.push(`/recipe/${slug}`);
+    },
   },
 };
 </script>

frontend/src/components/UI/SearchBar.vue

@@ -1,40 +1,42 @@
 <template>
   <div>
-    <v-text-field
-      label="Search"
-      v-model="search"
+    <v-autocomplete
+      :items="autoResults"
+      item-value="item.slug"
+      item-text="item.name"
+      dense
+      light
+      label="Search Mealie"
+      :search-input.sync="search"
+      hide-no-data
+      cache-items
       solo
-    ></v-text-field>
-    <v-card v-if="search && showResults">
-      <v-hover
-        square
-        v-for="(item, index) in result.slice(0, 5)"
-        :key="index"
-        v-slot="{ hover }"
+    >
+      <template
+        v-if="showResults"
+        v-slot:item="{ item }"
+        style="max-width: 750px"
       >
-        <v-card
-          class="color-transition"
-          @click="$router.push(`/recipe/${item.item.slug}`)"
-          :color="hover ? highlightColor : null"
-        >
-          <v-row dense no-gutters>
-            <v-col cols="12" md="2" sm="6">
-              <v-img
-                :src="getImage(item.item.image)"
-                width="100%"
-                height="100%"
-                rounded
-              >
-              </v-img>
-            </v-col>
-            <v-col cols="12" md="10" sm="6">
-              <v-card-title> {{ item.item.name }}</v-card-title>
-              <v-card-text> {{ item.item.description }}</v-card-text></v-col
+        <v-list-item-avatar>
+          <v-img :src="getImage(item.item.image)"></v-img>
+        </v-list-item-avatar>
+        <v-list-item-content @click="selected(item.item.slug)">
+          <v-list-item-title>
+            {{ item.item.name }}
+            <v-rating
+              dense
+              v-if="item.item.rating"
+              :value="item.item.rating"
+              size="12"
             >
-          </v-row>
-        </v-card>
-      </v-hover>
-    </v-card>
+            </v-rating>
+          </v-list-item-title>
+          <v-list-item-subtitle>
+            {{ item.item.description }}
+          </v-list-item-subtitle>
+        </v-list-item-content>
+      </template>
+    </v-autocomplete>
   </div>
 </template>
 
@@ -52,6 +54,7 @@ export default {
     return {
       search: "",
       result: [],
+      autoResults: [],
       isDark: false,
       options: {
         shouldSort: true,
@@ -74,21 +77,26 @@ export default {
     fuse() {
       return new Fuse(this.data, this.options);
     },
-    highlightColor() {
-      return this.isDark ? "primary lighten-5" : "primary lighten-5";
-    },
   },
   watch: {
     search() {
       if (this.search.trim() === "") this.result = this.list;
       else this.result = this.fuse.search(this.search.trim());
+      console.log("test");
+
       this.$emit("results", this.result);
+      if (this.showResults === true) {
+        this.autoResults = this.result;
+      }
     },
   },
   methods: {
     getImage(image) {
       return utils.getImageURL(image);
     },
+    selected(slug) {
+      this.$emit("selected", slug);
+    },
   },
 };
 </script>

frontend/src/pages/SearchPage.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <v-row  justify="center">
+    <v-row justify="center">
       <v-col cols="1"> </v-col>
       <v-col>
-        <SearchBar @results="updateResults" />
+        <SearchBar @results="updateResults" :show-results="false" />
       </v-col>
       <v-col cols="2">
         <v-btn icon>
@@ -11,6 +11,7 @@
         </v-btn>
       </v-col>
     </v-row>
+
     <v-row v-if="searchResults">
       <v-col
         :sm="6"

mealie/db/sql/recipe_models.py

@@ -6,7 +6,7 @@ from db.sql.model_base import SqlAlchemyBase
 
 
 class RecipeModel(SqlAlchemyBase):
-    __tablename__ = 'recipes'
+    __tablename__ = "recipes"
     # id = mongoengine.UUIDField(primary_key=True)
     name = sa.Column(sa.String)
     description = sa.Column(sa.String)
@@ -24,8 +24,11 @@ class RecipeModel(SqlAlchemyBase):
     notes = orm.relation("Note")
     rating = sa.Column(sa.Integer)
     orgURL = sa.Column(sa.String)
-    # extras = 
+    extras = orm.relation("ApiExtras")
 
+class ApiExtras(SqlAlchemyBase):
+    key: sa.Column(sa.String)
+    value: sa.Column(sa.String)
 
 class Category(SqlAlchemyBase):
     name = sa.Column(sa.String, index=True)