Sqlite (#75)

* file structure

* auto-test

* take 2

* refactor ap scheduler and startup process

* fixed scraper error

* database abstraction

* database abstraction

* port recipes over to new schema

* meal migration

* start settings migration

* finale mongo port

* backup improvements

* migration imports to new DB structure

* unused import cleanup

* docs strings

* settings and theme import logic

* cleanup

* fixed tinydb error

* requirements

* fuzzy search

* remove scratch file

* sqlalchemy models

* improved search ui

* recipe models almost done

* sql modal population

* del scratch

* rewrite database model mixins

* mostly grabage

* recipe updates

* working sqllite

* remove old files and reorganize

* final cleanup

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

frontend/src/App.vue

@@ -1,17 +1,22 @@
 <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-icon size="40">
-          mdi-silverware-variant
-        </v-icon>
+      <v-btn @click="$router.push('/')" icon>
+        <v-icon size="40"> mdi-silverware-variant </v-icon>
       </v-btn>
       <div btn class="pl-2">
         <v-toolbar-title @click="$router.push('/')">Mealie</v-toolbar-title>
       </div>
 
       <v-spacer></v-spacer>
-
+      <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>
@@ -22,10 +27,6 @@
       <v-container>
         <AddRecipeFab />
         <SnackBar />
-        <v-expand-transition>
-          <SearchHeader v-show="search" />
-        </v-expand-transition>
-
         <router-view></router-view>
       </v-container>
     </v-main>
@@ -34,7 +35,7 @@
 
 <script>
 import Menu from "./components/UI/Menu";
-import SearchHeader from "./components/UI/SearchHeader";
+import SearchBar from "./components/UI/SearchBar";
 import AddRecipeFab from "./components/UI/AddRecipeFab";
 import SnackBar from "./components/UI/SnackBar";
 import Vuetify from "./plugins/vuetify";
@@ -44,14 +45,14 @@ export default {
   components: {
     Menu,
     AddRecipeFab,
-    SearchHeader,
-    SnackBar
+    SnackBar,
+    SearchBar,
   },
 
   watch: {
     $route() {
       this.search = false;
-    }
+    },
   },
 
   mounted() {
@@ -62,7 +63,7 @@ export default {
   },
 
   data: () => ({
-    search: false
+    search: false,
   }),
   methods: {
     /**
@@ -90,8 +91,11 @@ export default {
       } else {
         this.search = true;
       }
-    }
-  }
+    },
+    navigateFromSearch(slug) {
+      this.$router.push(`/recipe/${slug}`);
+    },
+  },
 };
 </script>
 

frontend/src/api/backup.js

@@ -29,6 +29,10 @@ export default {
   },
 
   async create(tag, template) {
+    if (typeof template == String) {
+      template = [template];
+    }
+    console.log(tag, template);
     let response = apiReq.post(backupURLs.createBackup, {
       tag: tag,
       template: template,

frontend/src/api/recipe.js

@@ -23,7 +23,7 @@ export default {
     let response = await apiReq.post(recipeURLs.createByURL, {
       url: recipeURL,
     });
-    
+
     store.dispatch("requestRecentRecipes");
     return response;
   },
@@ -51,8 +51,9 @@ export default {
   async update(data) {
     const recipeSlug = data.slug;
 
-    apiReq.post(recipeURLs.update(recipeSlug), data);
+    let response = await apiReq.post(recipeURLs.update(recipeSlug), data);
     store.dispatch("requestRecentRecipes");
+    return response.data;
   },
 
   async delete(recipeSlug) {

frontend/src/components/Settings/Backup/index.vue

@@ -121,10 +121,7 @@ export default {
     async createBackup() {
       this.backupLoading = true;
 
-      let response = await api.backups.create(
-        this.backupTag,
-        this.selectedTemplate
-      );
+      let response = await api.backups.create(this.backupTag, this.templates);
 
       if (response.status == 201) {
         this.selectedBackup = null;

frontend/src/components/UI/SearchBar.vue

@@ -0,0 +1,108 @@
+<template>
+  <div>
+    <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
+    >
+      <template
+        v-if="showResults"
+        v-slot:item="{ item }"
+        style="max-width: 750px"
+      >
+        <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-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>
+
+<script>
+import Fuse from "fuse.js";
+import utils from "../../utils";
+
+export default {
+  props: {
+    showResults: {
+      default: false,
+    },
+  },
+  data() {
+    return {
+      search: "",
+      result: [],
+      autoResults: [],
+      isDark: false,
+      options: {
+        shouldSort: true,
+        threshold: 0.6,
+        location: 0,
+        distance: 100,
+        maxPatternLength: 32,
+        minMatchCharLength: 1,
+        keys: ["name", "slug"],
+      },
+    };
+  },
+  mounted() {
+    this.isDark = this.$store.getters.getIsDark;
+  },
+  computed: {
+    data() {
+      return this.$store.getters.getRecentRecipes;
+    },
+    fuse() {
+      return new Fuse(this.data, this.options);
+    },
+  },
+  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>
+
+<style>
+.color-transition {
+  transition: background-color 0.3s ease;
+}
+</style>

frontend/src/main.js

@@ -21,7 +21,7 @@ new Vue({
 }).$mount("#app");
 
 // Truncate
-let filter = function (text, length, clamp) {
+let filter = function(text, length, clamp) {
   clamp = clamp || "...";
   let node = document.createElement("div");
   node.innerHTML = text;
@@ -32,5 +32,3 @@ let filter = function (text, length, clamp) {
 Vue.filter("truncate", filter);
 
 export { router };
-
-

frontend/src/pages/RecipePage.vue

@@ -130,7 +130,7 @@ export default {
       api.recipes.delete(this.recipeDetails.slug);
     },
     async saveRecipe() {
-      await api.recipes.update(this.recipeDetails);
+      let slug = await api.recipes.update(this.recipeDetails);
 
       if (this.fileObject) {
         await api.recipes.updateImage(this.recipeDetails.slug, this.fileObject);
@@ -138,6 +138,7 @@ export default {
 
       this.form = false;
       this.imageKey += 1;
+      this.$router.push(`/recipe/${slug}`);
     },
     showForm() {
       this.form = true;

frontend/src/pages/SearchPage.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <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
+          :name="item.item.name"
+          :description="item.item.description"
+          :slug="item.item.slug"
+          :rating="item.item.rating"
+          :image="item.item.image"
+        />
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import SearchBar from "../components/UI/SearchBar";
+import RecipeCard from "../components/UI/RecipeCard";
+export default {
+  components: {
+    SearchBar,
+    RecipeCard,
+  },
+  data() {
+    return {
+      searchResults: null,
+    };
+  },
+  methods: {
+    updateResults(results) {
+      this.searchResults = results;
+    },
+  },
+};
+</script>
+
+<style>
+</style>

frontend/src/routes.js

@@ -1,5 +1,6 @@
 import HomePage from "./pages/HomePage";
 import Page404 from "./pages/404Page";
+import SearchPage from "./pages/SearchPage";
 import RecipePage from "./pages/RecipePage";
 import RecipeNewPage from "./pages/RecipeNewPage";
 import SettingsPage from "./pages/SettingsPage";
@@ -10,6 +11,7 @@ import api from "./api";
 export const routes = [
   { path: "/", component: HomePage },
   { path: "/mealie", component: HomePage },
+  { path: "/search", component: SearchPage },
   { path: "/recipe/:recipe", component: RecipePage },
   { path: "/new/", component: RecipeNewPage },
   { path: "/settings/site", component: SettingsPage },

frontend/src/store/modules/userSettings.js

@@ -17,6 +17,7 @@ function inDarkMode(payload) {
 const state = {
   activeTheme: {},
   darkMode: "system",
+  isDark: false,
 };
 
 const mutations = {
@@ -30,6 +31,7 @@ const mutations = {
 
     if (isDark !== null) {
       Vuetify.framework.theme.dark = isDark;
+      state.isDark = isDark;
       state.darkMode = payload;
     }
   },
@@ -60,6 +62,7 @@ const actions = {
 const getters = {
   getActiveTheme: (state) => state.activeTheme,
   getDarkMode: (state) => state.darkMode,
+  getIsDark: (state) => state.isDark,
 };
 
 export default {