update import dialog

frontend/src/components/UI/Dialogs/BackupDialog.vue

@@ -8,7 +8,9 @@
       :loading="loading"
     >
       <template v-slot:open="{ open }">
-        <v-btn @click="open" class="mx-2" small :color="color"> <v-icon left> mdi-plus </v-icon> {{$t('general.custom')}} </v-btn>
+        <v-btn @click="open" class="mx-2" small :color="color">
+          <v-icon left> mdi-plus </v-icon> {{ $t("general.custom") }}
+        </v-btn>
       </template>
       <v-card-text class="mt-6">
         <v-text-field dense :label="$t('settings.backup.backup-tag')" v-model="tag"></v-text-field>

frontend/src/components/UI/Dialogs/BaseDialog.vue

@@ -1,7 +1,12 @@
 <template>
   <div>
     <slot name="open" v-bind="{ open }"> </slot>
-    <v-dialog v-model="dialog" :width="modalWidth + 'px'" :content-class="top ? 'top-dialog' : undefined">
+    <v-dialog
+      v-model="dialog"
+      :width="modalWidth + 'px'"
+      :content-class="top ? 'top-dialog' : undefined"
+      :fullscreen="$vuetify.breakpoint.xsOnly"
+    >
       <v-card height="100%">
         <v-app-bar dark :color="color" class="mt-n1 mb-0">
           <v-icon large left>
@@ -24,6 +29,7 @@
             <v-btn color="error" text @click="deleteEvent" v-if="$listeners.delete">
               {{ $t("general.delete") }}
             </v-btn>
+            <slot name="extra-buttons"> </slot>
             <v-btn color="success" type="submit" @click="submitEvent">
               {{ submitText }}
             </v-btn>

frontend/src/components/UI/Dialogs/ImportDialog.vue

@@ -1,58 +1,52 @@
 <template>
   <div class="text-center">
-    <v-dialog v-model="dialog" width="500" :fullscreen="$vuetify.breakpoint.xsOnly">
+    <BaseDialog
-      <v-card>
+      :title="name"
-        <v-toolbar dark color="primary" v-show="$vuetify.breakpoint.xsOnly">
+      titleIcon="mdi-database"
-          <v-btn icon dark @click="dialog = false">
+      :submit-text="$t('general.import')"
-            <v-icon>mdi-close</v-icon>
+      :loading="loading"
-          </v-btn>
+      ref="baseDialog"
-          <v-toolbar-title></v-toolbar-title>
+      @submit="raiseEvent"
-          <v-spacer></v-spacer>
+    >
-          <v-toolbar-items>
+      <v-card-subtitle class="mb-n3 mt-3" v-if="date"> {{ $d(new Date(date), "medium") }} </v-card-subtitle>
-            <v-btn dark text @click="raiseEvent('import')">
+      <v-divider></v-divider>
-              {{ $t("general.import") }}
+
+      <v-card-text>
+        <ImportOptions @update-options="updateOptions" class="mt-5 mb-2" />
+
+        <v-divider></v-divider>
+
+        <v-checkbox
+          dense
+          :label="$t('settings.remove-existing-entries-matching-imported-entries')"
+          v-model="forceImport"
+        ></v-checkbox>
+      </v-card-text>
+
+      <v-divider></v-divider>
+      <template v-slot:extra-buttons>
+        <TheDownloadBtn :download-url="downloadUrl">
+          <template v-slot:default="{ downloadFile }">
+            <v-btn class="mr-1" color="info" @click="downloadFile">
+              <v-icon> mdi-download </v-icon>
+              {{ $t("general.download") }}
             </v-btn>
-          </v-toolbar-items>
+          </template>
-        </v-toolbar>
+        </TheDownloadBtn>
-        <v-card-title> {{ name }} </v-card-title>
+      </template>
-        <v-card-subtitle class="mb-n3" v-if="date"> {{ $d(new Date(date), "medium") }} </v-card-subtitle>
+    </BaseDialog>
-        <v-divider></v-divider>
-
-        <v-card-text>
-          <ImportOptions @update-options="updateOptions" class="mt-5 mb-2" />
-
-          <v-divider></v-divider>
-
-          <v-checkbox
-            dense
-            :label="$t('settings.remove-existing-entries-matching-imported-entries')"
-            v-model="forceImport"
-          ></v-checkbox>
-        </v-card-text>
-
-        <v-divider></v-divider>
-
-        <v-card-actions>
-          <TheDownloadBtn :download-url="downloadUrl" />
-          <v-spacer></v-spacer>
-          <v-btn color="error" text @click="raiseEvent('delete')">
-            {{ $t("general.delete") }}
-          </v-btn>
-          <v-btn color="success" outlined @click="raiseEvent('import')" v-show="$vuetify.breakpoint.smAndUp">
-            {{ $t("general.import") }}
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
   </div>
 </template>
 
 <script>
+const IMPORT_EVENT = "import";
+import { api } from "@/api";
+import BaseDialog from "./BaseDialog";
 import ImportOptions from "@/components/FormHelpers/ImportOptions";
 import TheDownloadBtn from "@/components/UI/Buttons/TheDownloadBtn.vue";
 import { backupURLs } from "@/api/backup";
 export default {
-  components: { ImportOptions, TheDownloadBtn },
+  components: { ImportOptions, TheDownloadBtn, BaseDialog },
   props: {
     name: {
       default: "Backup Name",
@@ -63,6 +57,7 @@ export default {
   },
   data() {
     return {
+      loading: false,
       options: {
         recipes: true,
         settings: true,
@@ -87,12 +82,13 @@ export default {
     },
     open() {
       this.dialog = true;
+      this.$refs.baseDialog.open();
     },
     close() {
       this.dialog = false;
     },
-    raiseEvent(event) {
+    async raiseEvent() {
-      let eventData = {
+      const eventData = {
         name: this.name,
         force: this.forceImport,
         rebase: this.rebaseImport,
@@ -102,8 +98,18 @@ export default {
         users: this.options.users,
         groups: this.options.groups,
       };
-      this.close();
+      this.loading = true;
-      this.$emit(event, eventData);
+      const importData = await this.importBackup(eventData);
+
+      this.$emit(IMPORT_EVENT, importData);
+      this.loading = false;
+    },
+    async importBackup(data) {
+      this.loading = true;
+      const response = await api.backups.import(data.name, data);
+      if (response) {
+        return response.data;
+      }
     },
   },
 };

frontend/src/pages/Admin/Dashboard/BackupViewer.vue

@@ -112,13 +112,7 @@ export default {
     },
 
     async importBackup(data) {
-      this.loading = true;
+      this.$refs.report.open(data);
-      const response = await api.backups.import(data.name, data);
-      if (response) {
-        const importData = response.data;
-        this.$refs.report.open(importData);
-      }
-      this.loading = false;
     },
 
     async createBackup() {