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>

frontend/src/components/MealPlan/MealPlanEditor.vue

@@ -1,13 +1,17 @@
 <template>
   <v-card>
-    <v-card-title class="headline"> {{$t('meal-plan.edit-meal-plan')}} </v-card-title>
+    <v-card-title class="headline">
+      {{ $t("meal-plan.edit-meal-plan") }}
+    </v-card-title>
     <v-divider></v-divider>
 
     <v-card-text>
       <MealPlanCard v-model="mealPlan.meals" />
       <v-row align="center" justify="end">
         <v-card-actions>
-          <v-btn color="success" text @click="update"> {{$t('general.update')}} </v-btn>
+          <v-btn color="success" text @click="update">
+            {{ $t("general.update") }}
+          </v-btn>
           <v-spacer></v-spacer>
         </v-card-actions>
       </v-row>

frontend/src/components/MealPlan/MealPlanNew.vue

@@ -1,7 +1,7 @@
 <template>
   <v-card>
     <v-card-title class="headline">
-      {{$t('meal-plan.create-a-new-meal-plan')}}
+      {{ $t("meal-plan.create-a-new-meal-plan") }}
     </v-card-title>
     <v-divider></v-divider>
     <v-card-text>
@@ -71,9 +71,11 @@
     <v-row align="center" justify="end">
       <v-card-actions>
         <v-btn color="success" @click="random" v-if="meals[1]" text>
-          {{$t('general.random')}}
+          {{ $t("general.random") }}
+        </v-btn>
+        <v-btn color="success" @click="save" text>
+          {{ $t("general.save") }}
         </v-btn>
-        <v-btn color="success" @click="save" text> {{$t('general.save')}} </v-btn>
 
         <v-spacer></v-spacer>
         <v-btn icon @click="show = !show"> </v-btn>

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

@@ -8,7 +8,7 @@
 
         <v-card-text>
           <v-row>
-            <v-col >
+            <v-col>
               <v-checkbox
                 class="mb-n4 mt-1"
                 dense
@@ -65,15 +65,15 @@
         <v-divider></v-divider>
 
         <v-card-actions>
-          <v-btn disabled color="success" text @click="raiseEvent('download')">
-            {{$t('general.download')}}
+          <v-btn color="success" 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')}}
+            {{ $t("general.delete") }}
           </v-btn>
           <v-btn color="success" text @click="raiseEvent('import')">
-            {{$t('general.import')}}
+            {{ $t("general.import") }}
           </v-btn>
         </v-card-actions>
       </v-card>

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

@@ -21,10 +21,11 @@
         Available Backups
         <v-spacer></v-spacer>
         <span>
-          <v-btn color="success" text class="ma-2 white--text">
-            Upload
-            <v-icon right dark> mdi-cloud-upload </v-icon>
-          </v-btn>
+          <UploadBtn
+          class="mt-1"
+            url="/api/backups/upload/"
+            @uploaded="getAvailableBackups"
+          />
         </span>
       </v-card-title>
       <AvailableBackupCard
@@ -45,12 +46,14 @@
 <script>
 import api from "../../../api";
 import SuccessFailureAlert from "../../UI/SuccessFailureAlert";
+import UploadBtn from "../../UI/UploadBtn";
 import AvailableBackupCard from "./AvailableBackupCard";
 import NewBackupCard from "./NewBackupCard";
 
 export default {
   components: {
     SuccessFailureAlert,
+    UploadBtn,
     AvailableBackupCard,
     NewBackupCard,
   },
@@ -70,6 +73,7 @@ export default {
       let response = await api.backups.requestAvailable();
       this.availableBackups = response.imports;
       this.availableTemplates = response.templates;
+      console.log(this.availableBackups);
     },
     deleteBackup() {
       if (this.$refs.form.validate()) {

frontend/src/components/Settings/Migration/NextcloudCard.vue

@@ -1,7 +1,11 @@
 <template>
   <v-card-text>
     <p>
-      {{$t('migration.you-can-import-recipes-from-either-a-zip-file-or-a-directory-located-in-the-app-data-migraiton-folder-please-review-the-documentation-to-ensure-your-directory-structure-matches-what-is-expected')}}
+      {{
+        $t(
+          "migration.you-can-import-recipes-from-either-a-zip-file-or-a-directory-located-in-the-app-data-migraiton-folder-please-review-the-documentation-to-ensure-your-directory-structure-matches-what-is-expected"
+        )
+      }}
     </p>
     <v-form ref="form">
       <v-row align="center">
@@ -13,27 +17,32 @@
             :rules="[rules.required]"
           ></v-select>
         </v-col>
-        <v-col cols="12" md="2" sm="12">
-          <v-btn text color="info" @click="importRecipes"> {{$t('migration.migrate')}} </v-btn>
-        </v-col>
-        <v-col cols="12" md="1" sm="12">
-          <v-btn text color="error" @click="deleteImportValidation">
-            {{$t('general.delete')}}
-          </v-btn>
-          <Confirmation
-            :title="$t('general.delete-data')"
-            :message="$t('migration.delete-confirmation')"
-            color="error"
-            icon="mdi-alert-circle"
-            ref="deleteThemeConfirm"
-            v-on:confirm="deleteImport()"
-          />
-        </v-col>
-      </v-row>
-      <v-row>
-        <v-col cols="12" md="5" sm="12">
-          <UploadMigrationButton @uploaded="getAvaiableImports" />
+        <v-col md="1" sm="12">
+          <v-btn-toggle group>
+            <v-btn text color="info" @click="importRecipes">
+              {{ $t("migration.migrate") }}
+            </v-btn>
+            <v-btn text color="error" @click="deleteImportValidation">
+              {{ $t("general.delete") }}
+            </v-btn>
+            <UploadBtn
+              url="/api/migration/upload/"
+              class="mt-1"
+              @uploaded="getAvaiableImports"
+            />
+
+            <Confirmation
+              :title="$t('general.delete-data')"
+              :message="$t('migration.delete-confirmation')"
+              color="error"
+              icon="mdi-alert-circle"
+              ref="deleteThemeConfirm"
+              v-on:confirm="deleteImport()"
+            />
+          </v-btn-toggle>
         </v-col>
+
+        <v-spacer></v-spacer>
       </v-row>
     </v-form>
     <SuccessFailureAlert
@@ -48,13 +57,13 @@
 <script>
 import api from "../../../api";
 import SuccessFailureAlert from "../../UI/SuccessFailureAlert";
-import UploadMigrationButton from "./UploadMigrationButton";
 import Confirmation from "../../UI/Confirmation";
+import UploadBtn from "../../UI/UploadBtn";
 export default {
   components: {
     SuccessFailureAlert,
-    UploadMigrationButton,
     Confirmation,
+    UploadBtn,
   },
   data() {
     return {
@@ -63,7 +72,7 @@ export default {
       availableImports: [],
       selectedImport: null,
       rules: {
-        required: (v) => !!v || "Selection Required",
+        required: v => !!v || "Selection Required",
       },
     };
   },

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

@@ -43,7 +43,7 @@
 
       <v-form ref="form" lazy-validation>
         <v-row dense align="center">
-          <v-col cols="12" md="4" sm="3">
+          <v-col md="4" sm="3">
             <v-select
               :label="$t('settings.theme.saved-color-theme')"
               :items="availableThemes"
@@ -51,18 +51,18 @@
               return-object
               v-model="selectedTheme"
               @change="themeSelected"
-              :rules="[(v) => !!v || $t('settings.theme.theme-is-required')]"
+              :rules="[v => !!v || $t('settings.theme.theme-is-required')]"
               required
             >
             </v-select>
           </v-col>
-          <v-col cols="12" sm="1">
-            <NewThemeDialog @new-theme="appendTheme" />
-          </v-col>
-          <v-col cols="12" sm="1">
-            <v-btn text color="error" @click="deleteSelectedThemeValidation">
-              Delete
-            </v-btn>
+          <v-col>
+            <v-btn-toggle group>
+              <NewThemeDialog @new-theme="appendTheme" class="mt-1" />
+              <v-btn text color="error" @click="deleteSelectedThemeValidation">
+                Delete
+              </v-btn>
+            </v-btn-toggle>
             <Confirmation
               :title="$t('settings.theme.delete-theme')"
               :message="
@@ -74,6 +74,7 @@
               v-on:confirm="deleteSelectedTheme()"
             />
           </v-col>
+          <v-spacer></v-spacer>
         </v-row>
       </v-form>
       <v-row dense align-content="center" v-if="selectedTheme.colors">
@@ -123,15 +124,10 @@
     </v-card-text>
 
     <v-card-actions>
-      <v-row>
-        <v-col> </v-col>
-        <v-col></v-col>
-        <v-col align="end">
-          <v-btn text color="success" @click="saveThemes">
-            {{ $t("settings.theme.save-colors-and-apply-theme") }}
-          </v-btn>
-        </v-col>
-      </v-row>
+      <v-spacer></v-spacer>
+      <v-btn color="success" @click="saveThemes" class="mr-2">
+        {{ $t("general.save") }}
+      </v-btn>
     </v-card-actions>
   </v-card>
 </template>
@@ -187,7 +183,7 @@ export default {
       //Change to default if deleting current theme.
       if (
         !this.availableThemes.some(
-          (theme) => theme.name === this.selectedTheme.name
+          theme => theme.name === this.selectedTheme.name
         )
       ) {
         await this.$store.dispatch("resetTheme");

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

@@ -1,10 +1,17 @@
 <template>
   <v-card>
     <v-card-title class="headline">
-      {{$t('settings.webhooks.meal-planner-webhooks')}}
+      {{ $t("settings.webhooks.meal-planner-webhooks") }}
     </v-card-title>
     <v-card-text>
-      <p v-html="$t('settings.webhooks.the-urls-listed-below-will-recieve-webhooks-containing-the-recipe-data-for-the-meal-plan-on-its-scheduled-day-currently-webhooks-will-execute-at', {time: time})"></p>
+      <p
+        v-html="
+          $t(
+            'settings.webhooks.the-urls-listed-below-will-recieve-webhooks-containing-the-recipe-data-for-the-meal-plan-on-its-scheduled-day-currently-webhooks-will-execute-at',
+            { time: time }
+          )
+        "
+      ></p>
 
       <v-row dense align="center">
         <v-col cols="12" md="2" sm="5">
@@ -19,7 +26,9 @@
           <TimePickerDialog @save-time="saveTime" />
         </v-col>
         <v-col cols="12" md="4" sm="5">
-          <v-btn text color="info" @click="testWebhooks"> {{$t('settings.webhooks.test-webhooks')}} </v-btn>
+          <v-btn text color="info" @click="testWebhooks">
+            {{ $t("settings.webhooks.test-webhooks") }}
+          </v-btn>
         </v-col>
       </v-row>
 
@@ -46,8 +55,8 @@
         </v-col>
         <v-col> </v-col>
         <v-col align="end">
-          <v-btn text color="success" @click="saveWebhooks">
-            {{$t('settings.webhooks.save-webhooks')}}
+          <v-btn color="success" @click="saveWebhooks" class="mr-2 mb-1">
+            {{ $t("settings.webhooks.save-webhooks") }}
           </v-btn>
         </v-col>
       </v-row>

frontend/src/components/UI/UploadBtn.vue

@@ -1,24 +1,61 @@
 <template>
   <v-form ref="file">
-    <v-file-input
-      :loading="loading"
-      :label="$t('migration.upload-an-archive')"
-      v-model="file"
-      accept=".zip"
-      @change="upload"
-      :prepend-icon="icon"
-      class="file-icon"
+    <input ref="uploader" class="d-none" type="file" @change="onFileChanged" />
+    <v-btn
+      :loading="isSelecting"
+      @click="onButtonClick"
+      color="success"
+      text
     >
-    </v-file-input>
-    <v-btn color="success" text class="ma-2 white--text">
+      <v-icon left > mdi-cloud-upload </v-icon>
       Upload
-      <v-icon right dark> mdi-cloud-upload </v-icon>
     </v-btn>
   </v-form>
 </template>
 
 <script>
-export default {};
+import api from "../../api";
+export default {
+  props: {
+    url: String,
+  },
+  data: () => ({
+    defaultButtonText: "Upload",
+    file: null,
+    isSelecting: false,
+  }),
+
+  methods: {
+    async upload() {
+      if (this.file != null) {
+        this.isSelecting = true;
+        let formData = new FormData();
+        formData.append("archive", this.file);
+
+        await api.utils.uploadFile(this.url, formData);
+
+        this.isSelecting = false;
+        this.$emit("uploaded");
+      }
+    },
+    onButtonClick() {
+      this.isSelecting = true;
+      window.addEventListener(
+        "focus",
+        () => {
+          this.isSelecting = false;
+        },
+        { once: true }
+      );
+
+      this.$refs.uploader.click();
+    },
+    onFileChanged(e) {
+      this.file = e.target.files[0];
+      this.upload();
+    },
+  },
+};
 </script>
 
 <style>