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>

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>

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

@@ -19,14 +19,14 @@
       <v-divider class="my-3"></v-divider>
       <v-card-title class="mt-n6">
         Available Backups
-        <v-spacer></v-spacer>
         <span>
           <UploadBtn
-          class="mt-1"
+            class="mt-1"
             url="/api/backups/upload/"
             @uploaded="getAvailableBackups"
           />
         </span>
+        <v-spacer></v-spacer>
       </v-card-title>
       <AvailableBackupCard
         @loading="backupLoading = true"

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",
       },
     };
   },

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

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>

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-btn color="success" @click="saveWebhooks" class="mr-2 mb-1">
-            {{ $t("settings.webhooks.save-webhooks") }}
-          </v-btn>
-        </v-col>
-      </v-row>
+      <v-btn icon color="success" @click="addWebhook">
+        <v-icon>mdi-plus</v-icon>
+      </v-btn>
+      <v-spacer></v-spacer>
+      <v-btn color="success" @click="saveWebhooks" class="mr-2 mb-1">
+        <v-icon left> mdi-content-save </v-icon>
+        {{ $t("general.save") }}
+      </v-btn>
     </v-card-actions>
   </v-card>
 </template>