From 75d140849bd8f64a14493405705f0a4157668b11 Mon Sep 17 00:00:00 2001
From: Hayden <hay-kot@pm.me>
Date: Wed, 20 Jan 2021 20:53:46 -0900
Subject: [PATCH] refactor: clean up bag javascript

---
 .../src/components/Settings/Backup/index.vue  |  1 +
 .../Settings/Migration/NextcloudCard.vue      | 57 +++++++++++--------
 .../src/components/Settings/Theme/index.vue   | 34 +++++------
 .../src/components/Settings/Webhook/index.vue | 19 +++++--
 frontend/src/components/UI/UploadBtn.vue      |  3 +-
 frontend/src/locales/en.json                  |  3 +-
 frontend/src/pages/MealPlanPage.vue           |  2 +-
 7 files changed, 67 insertions(+), 52 deletions(-)

diff --git a/frontend/src/components/Settings/Backup/index.vue b/frontend/src/components/Settings/Backup/index.vue
index c37198dcb..f3fb6afff 100644
--- a/frontend/src/components/Settings/Backup/index.vue
+++ b/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"
           />
diff --git a/frontend/src/components/Settings/Migration/NextcloudCard.vue b/frontend/src/components/Settings/Migration/NextcloudCard.vue
index b21097e2b..45d584248 100644
--- a/frontend/src/components/Settings/Migration/NextcloudCard.vue
+++ b/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",
       },
     };
   },
diff --git a/frontend/src/components/Settings/Theme/index.vue b/frontend/src/components/Settings/Theme/index.vue
index 438b72754..5b255879d 100644
--- a/frontend/src/components/Settings/Theme/index.vue
+++ b/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");
diff --git a/frontend/src/components/Settings/Webhook/index.vue b/frontend/src/components/Settings/Webhook/index.vue
index 0584372de..e232e5e08 100644
--- a/frontend/src/components/Settings/Webhook/index.vue
+++ b/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>
diff --git a/frontend/src/components/UI/UploadBtn.vue b/frontend/src/components/UI/UploadBtn.vue
index a2d770afb..483c03094 100644
--- a/frontend/src/components/UI/UploadBtn.vue
+++ b/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>
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index f88bde5ab..1a0589d59 100644
--- a/frontend/src/locales/en.json
+++ b/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",
@@ -137,4 +138,4 @@
     "failed-imports": "Failed Imports",
     "upload-an-archive": "Upload an Archive"
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/pages/MealPlanPage.vue b/frontend/src/pages/MealPlanPage.vue
index 3292782f9..1cf136e60 100644
--- a/frontend/src/pages/MealPlanPage.vue
+++ b/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;
         }