v0.2.0 (#143)

* Changed uvicorn port to 80 * Changed port in docker-compose to match dockerfile * Readded environment variables in docker-compose * production image rework * Use opengraph metadata to make basic recipe cards when full recipe metadata is not available * fixed instrucitons on parse * add last_recipe * automated testing * roadmap update * 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> * Backup card (#78) * backup / import dialog * upgrade to new tag method * New import card * rename settings.py to app_config.py * migrate to poetry for development * fix failing test Co-authored-by: Hayden <hay-kot@pm.me> * added mkdocs to docker-compose * Translations (#72) * Translations + danish * changed back proxy target to use ENV * Resolved more merge conflicts * Removed test in translation * Documentation of translations * Updated translations * removed old packages Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com> * fail to start bug fixes * feature: prep/cook/total time slots (#80) Co-authored-by: Hayden <hay-kot@pm.me> * missing bind attributes * Bug fixes (#81) * fix: url remains after succesful import * docs: changelog + update todos * arm image * arm compose * compose updates * update poetry * arm support Co-authored-by: Hayden <hay-kot@pm.me> * dockerfile hotfix * dockerfile hotfix * Version Release Final Touches (#84) * Remove slim * bug: opacity issues * bug: startup failure with no database * ci/cd on dev branch * formatting * v0.1.0 documentation Co-authored-by: Hayden <hay-kot@pm.me> * db init hotfix * bug: fix crash in mongo * fix mongo bug * fixed version notifier * finale changelog * Dropping Mongo From Dev Branch (#89) * Fix link to Docker Hub Found an extra s. DESTROYED it. * initial pass * second pass cleanup * backup card framework * backup card functionality * translation * upload button vile creation * Release v0.1.0 Candidate (#85) * Changed uvicorn port to 80 * Changed port in docker-compose to match dockerfile * Readded environment variables in docker-compose * production image rework * Use opengraph metadata to make basic recipe cards when full recipe metadata is not available * fixed instrucitons on parse * add last_recipe * automated testing * roadmap update * 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> * Backup card (#78) * backup / import dialog * upgrade to new tag method * New import card * rename settings.py to app_config.py * migrate to poetry for development * fix failing test Co-authored-by: Hayden <hay-kot@pm.me> * added mkdocs to docker-compose * Translations (#72) * Translations + danish * changed back proxy target to use ENV * Resolved more merge conflicts * Removed test in translation * Documentation of translations * Updated translations * removed old packages Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com> * fail to start bug fixes * feature: prep/cook/total time slots (#80) Co-authored-by: Hayden <hay-kot@pm.me> * missing bind attributes * Bug fixes (#81) * fix: url remains after succesful import * docs: changelog + update todos * arm image * arm compose * compose updates * update poetry * arm support Co-authored-by: Hayden <hay-kot@pm.me> * dockerfile hotfix * dockerfile hotfix * Version Release Final Touches (#84) * Remove slim * bug: opacity issues * bug: startup failure with no database * ci/cd on dev branch * formatting * v0.1.0 documentation Co-authored-by: Hayden <hay-kot@pm.me> * db init hotfix * bug: fix crash in mongo * fix mongo bug * fixed version notifier * finale changelog Co-authored-by: kentora <=> Co-authored-by: Hayden <hay-kot@pm.me> Co-authored-by: Richard Mitic <richard.h.mitic@gmail.com> Co-authored-by: kentora <kentora@kentora.dk> * build container * webscraper hotfix * dev bug: change data location to prevent reloads * api docs * api docs bug * workflow update Co-authored-by: David Young <davidy@funkypenguin.co.nz> Co-authored-by: Hayden <hay-kot@pm.me> Co-authored-by: Richard Mitic <richard.h.mitic@gmail.com> Co-authored-by: kentora <kentora@kentora.dk> * Add French Translation (#93) * New tests (#94) * dev-bug: fixed vscode freezes * test: refactor database init to support tests Co-authored-by: Hayden <hay-kot@pm.me> * Mealplan CRUD Tests (#95) * dev-bug: fixed vscode freezes * test: refactor database init to support tests * mealplan CRUD testing Co-authored-by: Hayden <hay-kot@pm.me> * Fix typos (#96) * Settings, Themes and Migration Route Tests (#100) * 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 Co-authored-by: Hayden <hay-kot@pm.me> * Refactor + New Docker File (#105) * 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 Co-authored-by: Hayden <hay-kot@pm.me> * 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> * Upload component (#108) * unified upload button + download backups * javascript toolings * fix vuetur config * fixed type check error * refactor: clean up bag javascript Co-authored-by: Hayden <hay-kot@pm.me> * Upload component (#113) * unified upload button + download backups * javascript toolings * fix vuetur config * fixed type check error * refactor: clean up bag javascript * UI updates + name validation * docs: changelog + sp * fixed route links * changelog Co-authored-by: Hayden <hay-kot@pm.me> * fixed menu links * fixed poetry install on docker.dev build * Migration redesign (#119) * migration redesign init * new color picker * changelog * added UI language selection * fix layout issue on recipe editor * remove git as dependency * added UI editor for original URL * CI/CD Tests * test: fixed migration routes Co-authored-by: Hayden <hay-kot@pm.me> * Fix link to dev-notes.md (#110) * translation: add swedish (#128) * language: da is Danish * translations: add swedish * scraper: unescape html in instructions (#129) Some urls erroneously deliver escaped html their instructions, sometimes they are even escaped on multiple levels like here: https://www.ica.se/recept/kladdig-kladdkaka-722982/ ``` >>> normalize_instruction("S&auml;tt ugnen p&aring; 200&deg;C.") 'Sätt ugnen på 200°C.' ``` * v0.2.0 Updates (#130) * migration redesign init * new color picker * changelog * added UI language selection * fix layout issue on recipe editor * remove git as dependency * added UI editor for original URL * CI/CD Tests * test: fixed migration routes * test todos * bug/added docker volume * chowdow test data * partial image recipe image testing * added card section card * settings form * homepage cetegory ui * frontend category placeholder * fixed broken scheduler * remove old files * removed temp test Co-authored-by: Hayden <hay-kot@pm.me> * Fix missing translations key (#133) * translation: add simplified & traditional chinese * Fix missing translations * fix chinese translations * v0.2.0 Release Candidate (#141) * Fix link to Docker Hub Found an extra s. DESTROYED it. * Release v0.1.0 Candidate (#85) * Changed uvicorn port to 80 * Changed port in docker-compose to match dockerfile * Readded environment variables in docker-compose * production image rework * Use opengraph metadata to make basic recipe cards when full recipe metadata is not available * fixed instrucitons on parse * add last_recipe * automated testing * roadmap update * 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> * Backup card (#78) * backup / import dialog * upgrade to new tag method * New import card * rename settings.py to app_config.py * migrate to poetry for development * fix failing test Co-authored-by: Hayden <hay-kot@pm.me> * added mkdocs to docker-compose * Translations (#72) * Translations + danish * changed back proxy target to use ENV * Resolved more merge conflicts * Removed test in translation * Documentation of translations * Updated translations * removed old packages Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com> * fail to start bug fixes * feature: prep/cook/total time slots (#80) Co-authored-by: Hayden <hay-kot@pm.me> * missing bind attributes * Bug fixes (#81) * fix: url remains after succesful import * docs: changelog + update todos * arm image * arm compose * compose updates * update poetry * arm support Co-authored-by: Hayden <hay-kot@pm.me> * dockerfile hotfix * dockerfile hotfix * Version Release Final Touches (#84) * Remove slim * bug: opacity issues * bug: startup failure with no database * ci/cd on dev branch * formatting * v0.1.0 documentation Co-authored-by: Hayden <hay-kot@pm.me> * db init hotfix * bug: fix crash in mongo * fix mongo bug * fixed version notifier * finale changelog Co-authored-by: kentora <=> Co-authored-by: Hayden <hay-kot@pm.me> Co-authored-by: Richard Mitic <richard.h.mitic@gmail.com> Co-authored-by: kentora <kentora@kentora.dk> * build container * webscraper hotfix * notes hot fix * bug: mongo updates fail #99 * Fix error message (#101) * gh funding * Create Issue Templates (#125) * Create bug_report.md * Create config.yml Included a link to feature requests. * Update config.yml Fixed link I had for testing to the actual link * Update bug_report.md fix capitalization * Update .github/ISSUE_TEMPLATE/bug_report.md Co-authored-by: Stephen Brown II <Stephen.Brown2@gmail.com> Co-authored-by: Stephen Brown II <Stephen.Brown2@gmail.com> * merge kentors changes * refactor/recipe routers * category/tag database relationship and endpoints * frontend category management * update branch todos * bug/normalize recipe steps html * remove console.log + refactor categories * fix categories database errors * refactor/ router endpoint * refactor/ remove old code * drag and drop ingredients * general cleanup * route refactoring * changelog * api refactoring + random cleanup * fixed backwards sort * Update mkdocs.yml (#137) Fix warning from Deploy Docs github action * fixed navigate on enter in search * refactor/create global css * added category scroll * cleanup todos * debug routes * docs/new gifs & general updates * cleanup * fix list test Co-authored-by: David Young <davidy@funkypenguin.co.nz> Co-authored-by: Hayden <hay-kot@pm.me> Co-authored-by: Richard Mitic <richard.h.mitic@gmail.com> Co-authored-by: kentora <kentora@kentora.dk> Co-authored-by: Alexei Pesic <pesic.alexei@gmail.com> Co-authored-by: Andrew <dpieski@gmail.com> Co-authored-by: Stephen Brown II <Stephen.Brown2@gmail.com> * fix build * fix duplicate editor * fixed docker mount problem * python 3.9 * added tasks for non-docker development * remove old scripts * dev updates * fixed no image upload option * get version from backend * final docs pass * .gitignore Co-authored-by: kentora <=> Co-authored-by: Hayden <hay-kot@pm.me> Co-authored-by: Richard Mitic <richard.h.mitic@gmail.com> Co-authored-by: kentora <kentora@kentora.dk> Co-authored-by: David Young <davidy@funkypenguin.co.nz> Co-authored-by: Bastien <43323819+Batgame@users.noreply.github.com> Co-authored-by: sephrat <34862846+sephrat@users.noreply.github.com> Co-authored-by: Nick CJ <17556895+nickcj931@users.noreply.github.com> Co-authored-by: dekvall <dkvldev@gmail.com> Co-authored-by: wengtad <wengtad93@gmail.com> Co-authored-by: Alexei Pesic <pesic.alexei@gmail.com> Co-authored-by: Andrew <dpieski@gmail.com> Co-authored-by: Stephen Brown II <Stephen.Brown2@gmail.com>
2025-11-26 13:44:15 -05:00 · 2021-02-08 09:47:40 -09:00
parent 3ec0f2ec21
commit b3573dc078
233 changed files with 11756 additions and 2491 deletions
--- a/frontend/src/pages/AllRecipesPage.vue
+++ b/frontend/src/pages/AllRecipesPage.vue
@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <CategorySidebar />
+    <CardSection
+      :sortable="true"
+      title="All Recipes"
+      :recipes="allRecipes"
+      :card-limit="9999"
+      @sort="sortAZ"
+      @sort-recent="sortRecent"
+    />
+  </div>
+</template>
+
+<script>
+import CardSection from "../components/UI/CardSection";
+import CategorySidebar from "../components/UI/CategorySidebar";
+export default {
+  components: {
+    CardSection,
+    CategorySidebar,
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    allRecipes() {
+      return this.$store.getters.getRecentRecipes;
+    },
+  },
+  methods: {
+    sortAZ() {
+      this.allRecipes.sort((a, b) => (a.name > b.name ? 1 : -1));
+    },
+    sortRecent() {
+      this.allRecipes.sort((a, b) => (a.dateAdded > b.dateAdded ? -1 : 1));
+    },
+  },
+};
+</script>
+
+<style>
+</style>
--- a/frontend/src/pages/CategoryPage.vue
+++ b/frontend/src/pages/CategoryPage.vue
@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <CategorySidebar />
+    <CardSection
+      :sortable="true"
+      :title="title"
+      :recipes="recipes"
+      :card-limit="9999"
+      @sort="sortAZ"
+      @sort-recent="sortRecent"
+    />
+  </div>
+</template>
+
+<script>
+import api from "../api";
+import CardSection from "../components/UI/CardSection";
+import CategorySidebar from "../components/UI/CategorySidebar";
+export default {
+  components: {
+    CardSection,
+    CategorySidebar,
+  },
+  data() {
+    return {
+      title: "",
+      recipes: [],
+    };
+  },
+  computed: {
+    currentCategory() {
+      return this.$route.params.category;
+    },
+  },
+  watch: {
+    async currentCategory() {
+      this.getRecipes();
+    },
+  },
+  mounted() {
+    this.getRecipes();
+  },
+  methods: {
+    async getRecipes() {
+      let data = await api.categories.get_recipes_in_category(
+        this.currentCategory
+      );
+      this.title = data.name;
+      this.recipes = data.recipes;
+    },
+    sortAZ() {
+      this.recipes.sort((a, b) => (a.name > b.name ? 1 : -1));
+    },
+    sortRecent() {
+      this.recipes.sort((a, b) => (a.dateAdded > b.dateAdded ? -1 : 1));
+    },
+  },
+};
+</script>
+
+<style>
+</style>
--- a/frontend/src/pages/HomePage.vue
+++ b/frontend/src/pages/HomePage.vue
@@ -1,15 +1,82 @@
 <template>
  <div>
-    <RecentRecipes />
+    <CategorySidebar />
+    <CardSection
+      v-if="showRecent"
+      title="Recent"
+      :recipes="recentRecipes"
+      :card-limit="showLimit"
+    />
+    <CardSection
+      :sortable="true"
+      v-for="(section, index) in recipeByCategory"
+      :key="section.name + section.position"
+      :title="section.name"
+      :recipes="section.recipes"
+      :card-limit="showLimit"
+      @sort="sortAZ(index)"
+      @sort-recent="sortRecent(index)"
+    />
  </div>
 </template>

 <script>
-import RecentRecipes from "../components/UI/RecentRecipes";
-
+import api from "../api";
+import CardSection from "../components/UI/CardSection";
+import CategorySidebar from "../components/UI/CategorySidebar";
 export default {
  components: {
-    RecentRecipes,
+    CardSection,
+    CategorySidebar,
+  },
+  data() {
+    return {
+      recipeByCategory: [],
+    };
+  },
+  computed: {
+    showRecent() {
+      return this.$store.getters.getShowRecent;
+    },
+    showLimit() {
+      return this.$store.getters.getShowLimit;
+    },
+    homeCategories() {
+      return this.$store.getters.getHomeCategories;
+    },
+    recentRecipes() {
+      let recipes = this.$store.getters.getRecentRecipes;
+      return recipes.sort((a, b) => (a.dateAdded > b.dateAdded ? -1 : 1));
+    },
+  },
+  async mounted() {
+    await this.buildPage();
+    this.recipeByCategory.sort((a, b) => a.position - b.position);
+  },
+  methods: {
+    async buildPage() {
+      this.homeCategories.forEach(async (element) => {
+        let recipes = await this.getRecipeByCategory(element.slug);
+        recipes.position = element.position;
+        this.recipeByCategory.push(recipes);
+      });
+    },
+    async getRecipeByCategory(category) {
+      return await api.categories.get_recipes_in_category(category);
+    },
+    getRecentRecipes() {
+      this.$store.dispatch("requestRecentRecipes");
+    },
+    sortAZ(index) {
+      this.recipeByCategory[index].recipes.sort((a, b) =>
+        a.name > b.name ? 1 : -1
+      );
+    },
+    sortRecent(index) {
+      this.recipeByCategory[index].recipes.sort((a, b) =>
+        a.dateAdded > b.dateAdded ? -1 : 1
+      );
+    },
  },
 };
 </script>
--- a/frontend/src/pages/MealPlanPage.vue
+++ b/frontend/src/pages/MealPlanPage.vue
@@ -5,67 +5,71 @@
      :meal-plan="editMealPlan"
      @updated="planUpdated"
    />
-    <NewMeal v-else @created="requestMeals" />
+    <NewMeal v-else @created="requestMeals" class="mb-5" />

-    <v-card class="my-1">
-      <v-card-title class="headline"> {{$t('meal-plan.meal-plans')}} </v-card-title>
+    <v-card class="my-2">
+      <v-card-title class="headline">
+        {{ $t("meal-plan.meal-plans") }}
+      </v-card-title>
      <v-divider></v-divider>
-
-      <v-timeline align-top :dense="$vuetify.breakpoint.smAndDown">
-        <v-timeline-item
-          class="mx-4"
-          v-for="(mealplan, i) in plannedMeals"
-          :key="i"
-          color="accent lighten-2"
-          icon="mdi-silverware-variant"
-          fill-dot
-        >
-          <v-card>
-            <v-card-title class="white--text secondary lighten-1">
-              {{ formatDate(mealplan.startDate) }} -
-              {{ formatDate(mealplan.endDate) }}
-            </v-card-title>
-
-            <v-card-text>
-              <v-row dense align="center">
-                <v-col></v-col>
-                <v-col
-                  v-for="(meal, index) in mealplan.meals"
-                  :key="generateKey(meal.slug, index)"
-                >
-                  <v-img
-                    class="rounded-lg info"
-                    :src="getImage(meal.image)"
-                    height="80"
-                    width="80"
-                  >
-                  </v-img>
-                </v-col>
-                <v-col></v-col>
-              </v-row>
-              <v-row class="mt-2 ml-1">
-                <v-btn
-                  color="accent lighten-2"
-                  class="mx-0"
-                  text
-                  @click="editPlan(mealplan.uid)"
-                >
-                  {{$t('general.edit')}}
-                </v-btn>
-                <v-btn
-                  color="error lighten-2"
-                  class="mx-2"
-                  text
-                  @click="deletePlan(mealplan.uid)"
-                >
-                  {{$t('general.delete')}}
-                </v-btn>
-              </v-row>
-            </v-card-text>
-          </v-card>
-        </v-timeline-item>
-      </v-timeline>
    </v-card>
+    <v-row dense>
+      <v-col
+        :sm="6"
+        :md="6"
+        :lg="4"
+        :xl="3"
+        v-for="(mealplan, i) in plannedMeals"
+        :key="i"
+      >
+        <v-card class="mt-1">
+          <v-card-title>
+            {{ formatDate(mealplan.startDate) }} -
+            {{ formatDate(mealplan.endDate) }}
+          </v-card-title>
+          <v-list nav>
+            <v-list-item-group color="primary">
+              <v-list-item
+                v-for="(meal, index) in mealplan.meals"
+                :key="generateKey(meal.slug, index)"
+                @click="$router.push(`/recipe/${meal.slug}`)"
+              >
+                <v-list-item-avatar
+                  color="primary"
+                  class="headline font-weight-light white--text"
+                >
+                  <v-img :src="getImage(meal.image)"></v-img>
+                </v-list-item-avatar>
+                <v-list-item-content>
+                  <v-list-item-title v-text="meal.name"></v-list-item-title>
+                  <v-list-item-subtitle v-text="meal.dateText">
+                  </v-list-item-subtitle>
+                </v-list-item-content>
+              </v-list-item>
+            </v-list-item-group>
+          </v-list>
+          <v-card-actions class="mt-n5">
+            <v-spacer></v-spacer>
+            <v-btn
+              color="accent lighten-2"
+              class="mx-0"
+              text
+              @click="editPlan(mealplan.uid)"
+            >
+              {{ $t("general.edit") }}
+            </v-btn>
+            <v-btn
+              color="error lighten-2"
+              class="mx-2"
+              text
+              @click="deletePlan(mealplan.uid)"
+            >
+              {{ $t("general.delete") }}
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-col>
+    </v-row>
  </div>
 </template>

@@ -104,7 +108,7 @@ export default {
    },

    editPlan(id) {
-      this.plannedMeals.forEach((element) => {
+      this.plannedMeals.forEach(element => {
        if (element.uid === id) {
          this.editMealPlan = element;
        }
--- a/frontend/src/pages/MealPlanThisWeekPage.vue
+++ b/frontend/src/pages/MealPlanThisWeekPage.vue
@@ -23,14 +23,16 @@
                <v-card-text> {{ meal.description }} </v-card-text>

                <v-card-actions>
+                  <v-spacer></v-spacer>
                  <v-btn
                    align="center"
                    color="secondary"
                    text
                    @click="$router.push(`/recipe/${meal.slug}`)"
                  >
-                    {{$t('recipe.view-recipe')}}
+                    {{ $t("recipe.view-recipe") }}
                  </v-btn>
+                  <v-spacer></v-spacer>
                </v-card-actions>
              </v-card>
            </v-col>
--- a/frontend/src/pages/RecipeNewPage.vue
+++ b/frontend/src/pages/RecipeNewPage.vue
@@ -29,7 +29,12 @@
      />
    </div>

-    <RecipeEditor v-else v-model="recipeDetails" @upload="getImage" />
+    <RecipeEditor
+      ref="recipeEditor"
+      v-else
+      v-model="recipeDetails"
+      @upload="getImage"
+    />
  </v-card>
 </template>

@@ -85,20 +90,22 @@ export default {
    },

    async createRecipe() {
-      this.isLoading = true;
+      if (this.$refs.recipeEditor.validateRecipe()) {
+        this.isLoading = true;

-      if (this.fileObject) {
-        this.recipeDetails.image = this.fileObject.name;
+        if (this.fileObject) {
+          this.recipeDetails.image = this.fileObject.name;
+        }
+        let slug = await api.recipes.create(this.recipeDetails);
+
+        if (this.fileObject) {
+          await api.recipes.updateImage(slug, this.fileObject);
+        }
+
+        this.isLoading = false;
+
+        this.$router.push(`/recipe/${slug}`);
      }
-      let slug = await api.recipes.create(this.recipeDetails);
-
-      if (this.fileObject) {
-        await api.recipes.updateImage(slug, this.fileObject);
-      }
-
-      this.isLoading = false;
-
-      this.$router.push(`/recipe/${slug}`);
    },
  },
 };
--- a/frontend/src/pages/RecipePage.vue
+++ b/frontend/src/pages/RecipePage.vue
@@ -22,6 +22,7 @@
      "
      @save="saveRecipe"
      @delete="deleteRecipe"
+      class="sticky"
    />

    <RecipeViewer
@@ -45,7 +46,12 @@
      height="1500px"
      :options="jsonEditorOptions"
    />
-    <RecipeEditor v-else v-model="recipeDetails" @upload="getImageFile" />
+    <RecipeEditor
+      v-else
+      v-model="recipeDetails"
+      ref="recipeEditor"
+      @upload="getImageFile"
+    />
  </v-card>
 </template>

@@ -137,16 +143,30 @@ export default {
    deleteRecipe() {
      api.recipes.delete(this.recipeDetails.slug);
    },
-    async saveRecipe() {
-      let slug = await api.recipes.update(this.recipeDetails);
-
-      if (this.fileObject) {
-        await api.recipes.updateImage(this.recipeDetails.slug, this.fileObject);
+    validateRecipe() {
+      if (this.jsonEditor) {
+        return true;
+      } else {
+        return this.$refs.recipeEditor.validateRecipe();
      }
+    },
+    async saveRecipe() {
+      if (this.validateRecipe()) {
+        let slug = await api.recipes.update(this.recipeDetails);

-      this.form = false;
-      this.imageKey += 1;
-      this.$router.push(`/recipe/${slug}`);
+        if (this.fileObject) {
+          await api.recipes.updateImage(
+            this.recipeDetails.slug,
+            this.fileObject
+          );
+        }
+
+        this.form = false;
+        this.imageKey += 1;
+        if (slug != this.recipeDetails.slug) {
+          this.$router.push(`/recipe/${slug}`);
+        }
+      }
    },
    showForm() {
      this.form = true;
@@ -169,4 +189,9 @@ export default {
  width: 100%;
  bottom: 0;
 }
+.sticky {
+  position: sticky !important;
+  top: 0;
+  z-index: 2;
+}
 </style>
--- a/frontend/src/pages/SearchPage.vue
+++ b/frontend/src/pages/SearchPage.vue
@@ -43,7 +43,7 @@ export default {
  },
  data() {
    return {
-      searchResults: null,
+      searchResults: [],
    };
  },
  methods: {
--- a/frontend/src/pages/SettingsPage.vue
+++ b/frontend/src/pages/SettingsPage.vue
@@ -13,7 +13,8 @@
      "
    >
    </v-alert>
-    <Theme />
+    <General />
+    <Theme class="mt-2" />
    <Backup class="mt-2" />
    <Webhooks class="mt-2" />
    <Migration class="mt-2" />
@@ -39,9 +40,11 @@

 <script>
 import Backup from "../components/Settings/Backup";
+import General from "../components/Settings/General";
 import Webhooks from "../components/Settings/Webhook";
 import Theme from "../components/Settings/Theme";
 import Migration from "../components/Settings/Migration";
+import api from "../api";
 import axios from "axios";

 export default {
@@ -50,15 +53,18 @@ export default {
    Webhooks,
    Theme,
    Migration,
+    General,
  },
  data() {
    return {
      latestVersion: null,
-      version: "v0.1.0",
+      version: null,
    };
  },
-  mounted() {
+  async mounted() {
    this.getVersion();
+    let versionData = await api.meta.get_version();
+    this.version = versionData.version;
  },
  computed: {
    newVersion() {