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>
2025-08-22 06:23:34 -07:00 · 2021-01-22 09:23:25 -09:00 · 2021-01-22 09:23:25 -09:00 · 41e079d423
commit 41e079d423
parent f35e9c20d6
19 changed files with 204 additions and 139 deletions
--- a/README.md
+++ b/README.md
@ -72,7 +72,6 @@ Mealie also provides a secure API for interactions from 3rd party applications.
 * [Vue.js](https://vuejs.org/)
 * [Vuetify](https://vuetifyjs.com/en/)
 * [FastAPI](https://fastapi.tiangolo.com/)
-* [MongoDB](https://www.mongodb.com/)
 * [Docker](https://www.docker.com/)


--- a/dev/dev-notes.md
+++ b/dev/dev-notes.md
@ -35,7 +35,7 @@ Frontend
 - [ ] Search Bar redesign
  - [x] Initial
  - [ ] Results redesign
- [ ] Replace Backups card with something like Home Assistant
+- [x] Replace Backups card with something like Home Assistant
 - [x] Replace import card with something like Home Assistant
  - [x] Select which imports to do

--- a/docs/docs/changelog.md
+++ b/docs/docs/changelog.md
@ -1,9 +1,37 @@
 # Release Notes

+## V0.2.0 - Now with Test!
+### Bug Fixes
+  - Remove ability to save recipe with no name
+  - Fixed data validation error on missing parameters
+  - Fixed failed database initialization at startup
+  - Fixed misaligned text on various cards
+  - Fixed bug that blocked opening links in new tabs
+
+### Features and Improvements
+  - Meal Planner
+    - Improved Search (Fuzzy Search)
+    - New Scheduled card support 
+    - Upload/Download backups
+  - Dockerfile now 1/5 of the size!
+  - **Minor**
+    - Continued work on button/style unification
+    - Adding icons to buttons
+
+### Development
+  - Fixed Vetur config file. Autocomplete in VSCode works!
+  - Added Prettier config
+  - Fixed incorrect layout code
+  - FastAPI Route tests for major operations
+
+### Breaking Changes
+  - Officially Dropped MongoDB Support
+  - Mounting volume moved to different internal location due to development issues. New volume should be mounted as `mealie/data:/app_data/` 
+
 ## v0.1.0 - Initial Beta
 ### Bug Fixes
  - Fixed Can't delete recipe after changing name - Closes Issue #67
-  - Fixed No image when added by URL, and can;t add an image - Closes Issue #66
+  - Fixed No image when added by URL, and can't add an image - Closes Issue #66
  - Fixed Images saved with no way to delete when add recipe via URL fails - Closes Issue #43

 ### Features
@ -23,7 +51,7 @@
  - Major code refactoring to support new database layer
  - Global variable refactor

-### Break Changes
+### Breaking Changes

 - Internal docker port is now 80 instead of 9000. You MUST remap the internal port to connect to the UI. 

--- a/docs/docs/index.md
+++ b/docs/docs/index.md
@ -65,7 +65,6 @@ Mealie also provides an API for interactions from 3rd party applications. **Why
 * [Vue.js](https://vuejs.org/)
 * [Vuetify](https://vuetifyjs.com/en/)
 * [FastAPI](https://fastapi.tiangolo.com/)
-* [MongoDB](https://www.mongodb.com/)
 * [Docker](https://www.docker.com/)


--- a/docs/docs/roadmap.md
+++ b/docs/docs/roadmap.md
@ -34,12 +34,12 @@ Feature placement is not set in stone. This is much more of a guideline than any
    - [ ] Category Filter
    - [ ] Tag Filter
    - [x] Fuzzy Search
- [ ] Backup card redesign
+- [x] Backup card redesign
 - [ ] Additional Backup / Import Features
    - [ ] Import Recipes Force/Rebase options
-    - [ ] Upload .zip file
+    - [x] Upload .zip file
 - [ ] Improved Color Picker
- [ ] Meal Plan redesign
+- [x] Meal Plan redesign
 ### Backend
 - [ ] PostgreSQL Support
 - [ ] Setup SQL Migrations
@ -48,4 +48,4 @@ Feature placement is not set in stone. This is much more of a guideline than any
 - MongoDB support dropped
 ## Code Chores
 - [x] Remove MongoDB Interface Code
- [ ] Dockerfile Trim
+- [x] Dockerfile Trim
--- a/frontend/src/components/MealPlan/MealPlanNew.vue
+++ b/frontend/src/components/MealPlan/MealPlanNew.vue
@ -151,11 +151,13 @@ export default {
  methods: {
    get_random(list) {
      const object = list[Math.floor(Math.random() * list.length)];
-      return object.slug;
+      return object;
    },
    random() {
      this.meals.forEach((element, index) => {
-        this.meals[index]["slug"] = this.get_random(this.items);
+        let recipe = this.get_random(this.items);
+        this.meals[index]["slug"] = recipe.slug;
+        this.meals[index]["name"] = recipe.name;
      });
    },
    processTime(index) {
--- a/frontend/src/components/Recipe/RecipeEditor/index.vue
+++ b/frontend/src/components/Recipe/RecipeEditor/index.vue
@ -1,5 +1,5 @@
 <template>
-  <div>
+  <v-form ref="form">
    <v-card-text>
      <v-row dense>
        <v-col cols="3"></v-col>
@ -33,14 +33,26 @@
          ></v-col>
        </v-row>
      </v-row>
-      <v-text-field class="my-3" :label="$t('recipe.recipe-name')" v-model="value.name">
+      <v-text-field
+        class="my-3"
+        :label="$t('recipe.recipe-name')"
+        v-model="value.name"
+        :rules="[rules.required, rules.whiteSpace]"
+      >
      </v-text-field>
-      <v-textarea height="100" :label="$t('recipe.description')" v-model="value.description">
+      <v-textarea
+        height="100"
+        :label="$t('recipe.description')"
+        v-model="value.description"
+      >
      </v-textarea>
      <div class="my-2"></div>
      <v-row dense disabled>
        <v-col sm="5">
-          <v-text-field :label="$t('recipe.servings')" v-model="value.recipeYield">
+          <v-text-field
+            :label="$t('recipe.servings')"
+            v-model="value.recipeYield"
+          >
          </v-text-field>
        </v-col>
        <v-col></v-col>
@ -54,7 +66,7 @@
      </v-row>
      <v-row>
        <v-col cols="12" sm="12" md="4" lg="4">
-          <h2 class="mb-4">{{$t('recipe.ingredients')}}</h2>
+          <h2 class="mb-4">{{ $t("recipe.ingredients") }}</h2>
          <div
            v-for="(ingredient, index) in value.recipeIngredient"
            :key="generateKey('ingredient', index)"
@ -81,7 +93,7 @@
          </v-btn>
          <BulkAdd @bulk-data="appendIngredients" />

-          <h2 class="mt-6">{{$t('recipe.categories')}}</h2>
+          <h2 class="mt-6">{{ $t("recipe.categories") }}</h2>
          <v-combobox
            dense
            multiple
@ -103,7 +115,7 @@
            </template>
          </v-combobox>

-          <h2 class="mt-4">{{$t('recipe.tags')}}</h2>
+          <h2 class="mt-4">{{ $t("recipe.tags") }}</h2>
          <v-combobox dense multiple chips deletable-chips v-model="value.tags">
            <template v-slot:selection="data">
              <v-chip
@ -118,7 +130,7 @@
            </template>
          </v-combobox>

-          <h2 class="my-4">{{$t('recipe.notes')}}</h2>
+          <h2 class="my-4">{{ $t("recipe.notes") }}</h2>
          <v-card
            class="mt-1"
            v-for="(note, index) in value.notes"
@ -142,7 +154,10 @@
                ></v-text-field>
              </v-row>

-              <v-textarea :label="$t('recipe.note')" v-model="value.notes[index]['text']">
+              <v-textarea
+                :label="$t('recipe.note')"
+                v-model="value.notes[index]['text']"
+              >
              </v-textarea>
            </v-card-text>
          </v-card>
@ -155,7 +170,7 @@
        <v-divider class="my-divider" :vertical="true"></v-divider>

        <v-col cols="12" sm="12" md="8" lg="8">
-          <h2 class="mb-4">{{$t('recipe.instructions')}}</h2>
+          <h2 class="mb-4">{{ $t("recipe.instructions") }}</h2>
          <div v-for="(step, index) in value.recipeInstructions" :key="index">
            <v-hover v-slot="{ hover }">
              <v-card
@ -173,7 +188,9 @@
                    @click="removeStep(index)"
                  >
                    <v-icon color="error">mdi-delete</v-icon> </v-btn
-                  >{{ $t('recipe.step-index', {step: index + 1}) }}</v-card-title
+                  >{{
+                    $t("recipe.step-index", { step: index + 1 })
+                  }}</v-card-title
                >
                <v-card-text>
                  <v-textarea
@ -192,7 +209,7 @@
        </v-col>
      </v-row>
    </v-card-text>
-  </div>
+  </v-form>
 </template>

 <script>
@ -211,6 +228,11 @@ export default {
  data() {
    return {
      fileObject: null,
+      rules: {
+        required: v => !!v || "Key Name Required",
+        whiteSpace: v =>
+          !v || v.split(" ").length <= 1 || "No White Space Allowed",
+      },
    };
  },
  methods: {
@ -259,7 +281,7 @@ export default {

    appendSteps(steps) {
      let processSteps = [];
-      steps.forEach((element) => {
+      steps.forEach(element => {
        processSteps.push({ text: element });
      });

@ -289,6 +311,13 @@ export default {
    saveExtras(extras) {
      this.value.extras = extras;
    },
+    validateRecipe() {
+      if (this.$refs.form.validate()) {
+        return true;
+      } else {
+        return false;
+      }
+    },
  },
 };
 </script>
--- a/frontend/src/components/Settings/Backup/ImportDialog.vue
+++ b/frontend/src/components/Settings/Backup/ImportDialog.vue
@ -65,14 +65,14 @@
        <v-divider></v-divider>

        <v-card-actions>
-          <v-btn color="success" text :href="`/api/backups/${name}/download/`">
+          <v-btn color="accent" text :href="`/api/backups/${name}/download/`">
            {{ $t("general.download") }}
          </v-btn>
          <v-spacer></v-spacer>
          <v-btn color="error" text @click="raiseEvent('delete')">
            {{ $t("general.delete") }}
          </v-btn>
-          <v-btn color="success" text @click="raiseEvent('import')">
+          <v-btn color="success" outlined @click="raiseEvent('import')">
            {{ $t("general.import") }}
          </v-btn>
        </v-card-actions>
--- a/frontend/src/components/Settings/Backup/index.vue
+++ b/frontend/src/components/Settings/Backup/index.vue
@ -19,7 +19,6 @@
      <v-divider class="my-3"></v-divider>
      <v-card-title class="mt-n6">
        Available Backups
-        <v-spacer></v-spacer>
        <span>
          <UploadBtn
            class="mt-1"
@ -27,6 +26,7 @@
            @uploaded="getAvailableBackups"
          />
        </span>
+        <v-spacer></v-spacer>
      </v-card-title>
      <AvailableBackupCard
        @loading="backupLoading = true"
--- a/frontend/src/components/Settings/Migration/ChowdownCard.vue
+++ b/frontend/src/components/Settings/Migration/ChowdownCard.vue
@ -1,7 +1,11 @@
 <template>
  <v-card-text>
    <p>
-      {{$t('migration.currently-chowdown-via-public-repo-url-is-the-only-supported-type-of-migration')}}
+      {{
+        $t(
+          "migration.currently-chowdown-via-public-repo-url-is-the-only-supported-type-of-migration"
+        )
+      }}
    </p>
    <v-form ref="form">
      <v-row dense align="center">
@ -14,12 +18,15 @@
          </v-text-field>
        </v-col>
        <v-col cols="12" md="4" sm="5">
-          <v-btn text color="info" @click="importRepo"> {{$t('migration.migrate')}} </v-btn>
+          <v-btn text color="info" @click="importRepo">
+            <v-icon left> mdi-import </v-icon>
+            {{ $t("migration.migrate") }}
+          </v-btn>
        </v-col>
      </v-row>
    </v-form>
    <v-alert v-if="failedRecipes[1]" outlined dense type="error">
-      <h4>{{$t('migration.failed-recipes')}}</h4>
+      <h4>{{ $t("migration.failed-recipes") }}</h4>
      <v-list dense>
        <v-list-item v-for="fail in this.failedRecipes" :key="fail">
          {{ fail }}
@ -27,7 +34,7 @@
      </v-list>
    </v-alert>
    <v-alert v-if="failedImages[1]" outlined dense type="error">
-      <h4>{{$t('migration.failed-images')}}</h4>
+      <h4>{{ $t("migration.failed-images") }}</h4>
      <v-list dense>
        <v-list-item v-for="fail in this.failedImages" :key="fail">
          {{ fail }}
@ -49,7 +56,7 @@ export default {
      failedRecipes: [],
      repo: "",
      rules: {
-        required: (v) => !!v || "Selection Required",
+        required: v => !!v || "Selection Required",
      },
    };
  },
--- a/frontend/src/components/Settings/Migration/NextcloudCard.vue
+++ b/frontend/src/components/Settings/Migration/NextcloudCard.vue
@ -20,9 +20,11 @@
        <v-col md="1" sm="12">
          <v-btn-toggle group>
            <v-btn text color="info" @click="importRecipes">
+              <v-icon left> mdi-import </v-icon>
              {{ $t("migration.migrate") }}
            </v-btn>
            <v-btn text color="error" @click="deleteImportValidation">
+              <v-icon left> mdi-delete </v-icon>
              {{ $t("general.delete") }}
            </v-btn>
            <UploadBtn
--- a/frontend/src/components/Settings/Theme/index.vue
+++ b/frontend/src/components/Settings/Theme/index.vue
@ -126,6 +126,7 @@
    <v-card-actions>
      <v-spacer></v-spacer>
      <v-btn color="success" @click="saveThemes" class="mr-2">
+        <v-icon left> mdi-content-save </v-icon>
        {{ $t("general.save") }}
      </v-btn>
    </v-card-actions>
--- a/frontend/src/components/Settings/Webhook/index.vue
+++ b/frontend/src/components/Settings/Webhook/index.vue
@ -15,18 +15,14 @@

      <v-row dense align="center">
        <v-col cols="12" md="2" sm="5">
-          <v-switch
-            v-model="enabled"
-            inset
-            :label="$t('general.enabled')"
-            class="my-n3"
-          ></v-switch>
+          <v-switch v-model="enabled" :label="$t('general.enabled')"></v-switch>
        </v-col>
        <v-col cols="12" md="3" sm="5">
          <TimePickerDialog @save-time="saveTime" />
        </v-col>
        <v-col cols="12" md="4" sm="5">
          <v-btn text color="info" @click="testWebhooks">
+            <v-icon left> mdi-webhook </v-icon>
            {{ $t("settings.webhooks.test-webhooks") }}
          </v-btn>
        </v-col>
@ -47,19 +43,14 @@
      </v-row>
    </v-card-text>
    <v-card-actions>
-      <v-row>
-        <v-col>
      <v-btn icon color="success" @click="addWebhook">
        <v-icon>mdi-plus</v-icon>
      </v-btn>
-        </v-col>
-        <v-col> </v-col>
-        <v-col align="end">
+      <v-spacer></v-spacer>
      <v-btn color="success" @click="saveWebhooks" class="mr-2 mb-1">
-            {{ $t("settings.webhooks.save-webhooks") }}
+        <v-icon left> mdi-content-save </v-icon>
+        {{ $t("general.save") }}
      </v-btn>
-        </v-col>
-      </v-row>
    </v-card-actions>
  </v-card>
 </template>
--- a/frontend/src/components/UI/RecipeCard.vue
+++ b/frontend/src/components/UI/RecipeCard.vue
@ -3,7 +3,8 @@
    <v-card
      :class="{ 'on-hover': hover }"
      :elevation="hover ? 12 : 2"
-      @click="moreInfo(slug)"
+      :to="route ? `/recipe/${slug}` : ''"
+      @click="$emit('click')"
    >
      <v-img height="200" :src="getImage(image)"></v-img>
      <v-card-title class="my-n3 mb-n6">{{ name | truncate(30) }}</v-card-title>
@ -52,11 +53,6 @@ export default {
    },
  },
  methods: {
-    moreInfo(recipeSlug) {
-      if (this.route) {
-        this.$router.push(`/recipe/${recipeSlug}`);
-      } else this.$emit("click");
-    },
    getImage(image) {
      return utils.getImageURL(image);
    },
--- a/frontend/src/components/UI/UploadBtn.vue
+++ b/frontend/src/components/UI/UploadBtn.vue
@ -1,13 +1,8 @@
 <template>
  <v-form ref="file">
    <input ref="uploader" class="d-none" type="file" @change="onFileChanged" />
-    <v-btn
-      :loading="isSelecting"
-      @click="onButtonClick"
-      color="success"
-      text
-    >
-      <v-icon left > mdi-cloud-upload </v-icon>
+    <v-btn :loading="isSelecting" @click="onButtonClick" color="accent" text>
+      <v-icon left> mdi-cloud-upload </v-icon>
      Upload
    </v-btn>
  </v-form>
--- a/frontend/src/pages/MealPlanPage.vue
+++ b/frontend/src/pages/MealPlanPage.vue
@ -12,8 +12,8 @@
        {{ $t("meal-plan.meal-plans") }}
      </v-card-title>
      <v-divider></v-divider>
-
-      <v-row no-gutters>
+    </v-card>
+    <v-row dense>
      <v-col
        :sm="6"
        :md="6"
@ -22,7 +22,7 @@
        v-for="(mealplan, i) in plannedMeals"
        :key="i"
      >
-          <v-card class="ml-2 mt-2 mr-0">
+        <v-card class="mt-1">
          <v-card-title>
            {{ formatDate(mealplan.startDate) }} -
            {{ formatDate(mealplan.endDate) }}
@ -70,7 +70,6 @@
        </v-card>
      </v-col>
    </v-row>
-    </v-card>
  </div>
 </template>

--- 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,6 +90,7 @@ export default {
    },

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

        if (this.fileObject) {
@ -99,6 +105,7 @@ export default {
        this.isLoading = false;

        this.$router.push(`/recipe/${slug}`);
+      }
    },
  },
 };
--- a/frontend/src/pages/RecipePage.vue
+++ b/frontend/src/pages/RecipePage.vue
@ -45,7 +45,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>

@ -101,7 +106,7 @@ export default {
  },

  watch: {
-    $route: function () {
+    $route: function() {
      this.getRecipeDetails();
    },
  },
@ -138,6 +143,9 @@ export default {
      api.recipes.delete(this.recipeDetails.slug);
    },
    async saveRecipe() {
+      if (this.$refs.recipeEditor.validateRecipe()) {
+        console.log("Thank you")
+      }
      let slug = await api.recipes.update(this.recipeDetails);

      if (this.fileObject) {