Meal planner improvements (#107)

* dev-bug: fixed vscode freezes

* test: refactor database init to support tests

* mealplan CRUD testing

* restructure test folder

* git attributes

* tests: migration, settings, theme routes testing

* docker-file shrink

* rebuild

* refactor: moving directories around

* adding funding

* mealplan redesign

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

frontend/src/components/UI/RecipeCard.vue

@@ -25,9 +25,9 @@
           <v-col align="end">
             <v-tooltip top color="secondary" max-width="400" open-delay="50">
               <template v-slot:activator="{ on, attrs }">
-                <v-btn color="secondary" v-on="on" v-bind="attrs" text
-                  >{{$t('recipe.description')}}</v-btn
-                >
+                <v-btn color="secondary" v-on="on" v-bind="attrs" text>{{
+                  $t("recipe.description")
+                }}</v-btn>
               </template>
               <span>{{ description }}</span>
             </v-tooltip>
@@ -47,10 +47,15 @@ export default {
     description: String,
     rating: Number,
     image: String,
+    route: {
+      default: true,
+    },
   },
   methods: {
     moreInfo(recipeSlug) {
-      this.$router.push(`/recipe/${recipeSlug}`);
+      if (this.route) {
+        this.$router.push(`/recipe/${recipeSlug}`);
+      } else this.$emit("click");
     },
     getImage(image) {
       return utils.getImageURL(image);

frontend/src/components/UI/SearchDialog.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="text-center">
+    <v-dialog v-model="dialog" min-height="700" max-width="1000">
+      <v-card min-height="725" height="100%">
+        <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, 10)"
+              :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>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+import SearchBar from "../UI/SearchBar";
+import RecipeCard from "../UI/RecipeCard";
+export default {
+  components: {
+    SearchBar,
+    RecipeCard,
+  },
+  data() {
+    return {
+      searchResults: null,
+      dialog: false,
+    };
+  },
+  methods: {
+    updateResults(results) {
+      this.searchResults = results;
+    },
+    emitSelect(name, slug) {
+      console.log(name, slug);
+      this.$emit("select", name, slug);
+      this.dialog = false;
+    },
+    open() {
+      this.dialog = true;
+    },
+  },
+};
+</script>
+
+<style>
+</style>