Bug/misc bug fixes (#400)

* potentiall fix #329

* typo

* auto purge events

* image error

* update import dialog

* fix scheduler interval time

* adjust icon position

* check for property

Co-authored-by: hay-kot <hay-kot@pm.me>

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">
-      <v-card>
-        <v-toolbar dark color="primary" v-show="$vuetify.breakpoint.xsOnly">
-          <v-btn icon dark @click="dialog = false">
-            <v-icon>mdi-close</v-icon>
-          </v-btn>
-          <v-toolbar-title></v-toolbar-title>
-          <v-spacer></v-spacer>
-          <v-toolbar-items>
-            <v-btn dark text @click="raiseEvent('import')">
-              {{ $t("general.import") }}
+    <BaseDialog
+      :title="name"
+      titleIcon="mdi-database"
+      :submit-text="$t('general.import')"
+      :loading="loading"
+      ref="baseDialog"
+      @submit="raiseEvent"
+    >
+      <v-card-subtitle class="mb-n3 mt-3" v-if="date"> {{ $d(new Date(date), "medium") }} </v-card-subtitle>
+      <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>
+      <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 left> mdi-download </v-icon>
+              {{ $t("general.download") }}
             </v-btn>
-          </v-toolbar-items>
-        </v-toolbar>
-        <v-card-title> {{ name }} </v-card-title>
-        <v-card-subtitle class="mb-n3" v-if="date"> {{ $d(new Date(date), "medium") }} </v-card-subtitle>
-        <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>
+          </template>
+        </TheDownloadBtn>
+      </template>
+    </BaseDialog>
   </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) {
-      let eventData = {
+    async raiseEvent() {
+      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.$emit(event, eventData);
+      this.loading = true;
+      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;
+      }
     },
   },
 };