refactor: clean up bag javascript

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

@@ -22,6 +22,7 @@
         <v-spacer></v-spacer>
         <span>
           <UploadBtn
+          class="mt-1"
             url="/api/backups/upload/"
             @uploaded="getAvailableBackups"
           />

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,13 +17,20 @@
             :rules="[rules.required]"
           ></v-select>
         </v-col>
-        <v-col cols="12" md="2" sm="12">
+        <v-col md="1" sm="12">
-          <v-btn text color="info" @click="importRecipes"> {{$t('migration.migrate')}} </v-btn>
+          <v-btn-toggle group>
-        </v-col>
+            <v-btn text color="info" @click="importRecipes">
-        <v-col cols="12" md="1" sm="12">
+              {{ $t("migration.migrate") }}
-          <v-btn text color="error" @click="deleteImportValidation">
-            {{$t('general.delete')}}
             </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')"
@@ -28,12 +39,10 @@
               ref="deleteThemeConfirm"
               v-on:confirm="deleteImport()"
             />
+          </v-btn-toggle>
         </v-col>
-      </v-row>
+
-      <v-row>
+        <v-spacer></v-spacer>
-        <v-col cols="12" md="5" sm="12">
-          <UploadMigrationButton @uploaded="getAvaiableImports" />
-        </v-col>
       </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">
+          <v-col>
-            <NewThemeDialog @new-theme="appendTheme" />
+            <v-btn-toggle group>
-          </v-col>
+              <NewThemeDialog @new-theme="appendTheme" class="mt-1" />
-          <v-col cols="12" sm="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-spacer></v-spacer>
-        <v-col> </v-col>
+      <v-btn color="success" @click="saveThemes" class="mr-2">
-        <v-col></v-col>
+        {{ $t("general.save") }}
-        <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-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">
+          <v-btn color="success" @click="saveWebhooks" class="mr-2 mb-1">
-            {{$t('settings.webhooks.save-webhooks')}}
+            {{ $t("settings.webhooks.save-webhooks") }}
           </v-btn>
         </v-col>
       </v-row>

frontend/src/components/UI/UploadBtn.vue

@@ -6,9 +6,8 @@
       @click="onButtonClick"
       color="success"
       text
-      class="ma-2 white--text"
     >
-      <v-icon left dark> mdi-cloud-upload </v-icon>
+      <v-icon left > mdi-cloud-upload </v-icon>
       Upload
     </v-btn>
   </v-form>

frontend/src/locales/en.json

@@ -11,6 +11,7 @@
     "paste-in-your-recipe-data-each-line-will-be-treated-as-an-item-in-a-list": "Paste in your recipe data. Each line will be treated as an item in a list"
   },
   "general": {
+    "upload": "Upload",
     "submit": "Submit",
     "name": "Name",
     "settings": "Settings",

frontend/src/pages/MealPlanPage.vue

@@ -109,7 +109,7 @@ export default {
     },
 
     editPlan(id) {
-      this.plannedMeals.forEach((element) => {
+      this.plannedMeals.forEach(element => {
         if (element.uid === id) {
           this.editMealPlan = element;
         }