refactor(frontend): 🚧 Migrate Dashboard to Nuxt

Add API and Functinality for Admin Dashboard. Stills needs to clean-up. See // TODO's

frontend/components/Domain/Admin/AdminBackupDialog.vue

@@ -25,7 +25,7 @@
             <v-row>
               <v-col sm="4">
                 <p>{{ $t("general.options") }}</p>
-                <AdminBackupImportOptions class="mt-5" @update-options="updateOptions" />
+                <AdminBackupImportOptions v-model="updateOptions" class="mt-5" />
               </v-col>
               <v-col>
                 <p>{{ $t("general.templates") }}</p>
@@ -47,11 +47,9 @@
 </template>
 
 <script>
-import { api } from "@/api";
 import AdminBackupImportOptions from "./AdminBackupImportOptions";
 export default {
   components: {
-    BaseDialog,
     AdminBackupImportOptions,
   },
   props: {

frontend/components/Domain/Admin/AdminBackupImportDialog.vue

@@ -1,3 +1,5 @@
+// TODO: Fix Download Links
+
 <template>
   <div class="text-center">
     <BaseDialog
@@ -39,7 +41,6 @@
 </template>
 
 <script>
-import { api } from "@/api";
 import AdminBackupImportOptions from "./AdminBackupImportOptions";
 const IMPORT_EVENT = "import";
 export default {
@@ -86,7 +87,7 @@ export default {
     close() {
       this.dialog = false;
     },
-    async raiseEvent() {
+    raiseEvent() {
       const eventData = {
         name: this.name,
         force: this.forceImport,
@@ -99,18 +100,9 @@ export default {
         notifications: this.options.notifications,
       };
       this.loading = true;
-      const importData = await this.importBackup(eventData);
-
-      this.$emit(IMPORT_EVENT, importData);
+      this.$emit(IMPORT_EVENT, eventData);
       this.loading = false;
     },
-    async importBackup(data) {
-      this.loading = true;
-      const response = await api.backups.import(data.name, data);
-      if (response) {
-        return response.data;
-      }
-    },
   },
 };
 </script>

frontend/components/Domain/Admin/AdminBackupImportOptions.vue

@@ -9,12 +9,28 @@
       :label="option.text"
       @change="emitValue()"
     ></v-checkbox>
+    <template v-if="importBackup">
+      <v-divider class="my-3"></v-divider>
+      <v-checkbox
+        v-model="forceImport"
+        class="mb-n4"
+        dense
+        :label="$t('settings.remove-existing-entries-matching-imported-entries')"
+        @change="emitValue()"
+      ></v-checkbox>
+    </template>
   </div>
 </template>
 
 <script>
-const UPDATE_EVENT = "update-options";
+const UPDATE_EVENT = "input";
 export default {
+  props: {
+    importBackup: {
+      type: Boolean,
+      default: false,
+    },
+  },
   data() {
     return {
       options: {
@@ -47,6 +63,7 @@ export default {
           text: this.$t("events.notification"),
         },
       },
+      forceImport: false,
     };
   },
   mounted() {
@@ -62,6 +79,7 @@ export default {
         users: this.options.users.value,
         groups: this.options.groups.value,
         notifications: this.options.notifications.value,
+        forceImport: this.forceImport,
       });
     },
   },

frontend/components/Domain/Admin/AdminBackupViewer.vue

@@ -1,22 +1,34 @@
 
 <template>
   <div>
-    <ImportSummaryDialog ref="report" />
-    <AdminBackupImportDialog
-      ref="import_dialog"
-      :name="selectedName"
-      :date="selectedDate"
-      @import="importBackup"
-      @delete="deleteBackup"
-    />
     <BaseDialog
-      ref="deleteBackupConfirm"
+      ref="refImportDialog"
+      :title="selectedBackup.name"
+      :icon="$globals.icons.database"
+      :submit-text="$t('general.import')"
+      :loading="loading"
+      @submit="restoreBackup"
+    >
+      <v-card-subtitle v-if="selectedBackup.date" class="mb-n3 mt-3">
+        {{ $d(new Date(selectedBackup.date), "medium") }}
+      </v-card-subtitle>
+      <v-divider></v-divider>
+      <v-card-text>
+        <AdminBackupImportOptions v-model="importOptions" import-backup class="mt-5 mb-2" />
+      </v-card-text>
+    </BaseDialog>
+
+    <BaseDialog
+      ref="refDeleteConfirmation"
       :title="$t('settings.backup.delete-backup')"
-      :message="$t('general.confirm-delete-generic')"
       color="error"
       :icon="$globals.icons.alertCircle"
-      @confirm="emitDelete()"
-    />
+      @confirm="deleteBackup(selectedBackup.name)"
+    >
+      <v-card-text>
+        {{ $t("general.confirm-delete-generic") }}
+      </v-card-text>
+    </BaseDialog>
     <BaseStatCard :icon="$globals.icons.backupRestore" :color="color">
       <template #after-heading>
         <div class="ml-auto text-right">
@@ -30,7 +42,7 @@
         </div>
       </template>
       <div class="d-flex row py-3 justify-end">
-        <AppButtonUpload url="/api/backups/upload" @uploaded="getAvailableBackups">
+        <AppButtonUpload url="/api/backups/upload" @uploaded="refreshBackups">
           <template #default="{ isSelecting, onButtonClick }">
             <v-btn :loading="isSelecting" class="mx-2" small color="info" @click="onButtonClick">
               <v-icon left> {{ $globals.icons.upload }} </v-icon> {{ $t("general.upload") }}
@@ -39,7 +51,7 @@
         </AppButtonUpload>
         <AdminBackupDialog :color="color" />
 
-        <v-btn :loading="loading" class="mx-2" small color="success" @click="createBackup">
+        <v-btn :loading="loading" class="mx-2" small color="success" @click="createBackup(null)">
           <v-icon left> {{ $globals.icons.create }} </v-icon> {{ $t("general.create") }}
         </v-btn>
       </div>
@@ -75,34 +87,83 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api";
-import AdminBackupImportDialog from "./AdminBackupImportDialog.vue";
+import { defineComponent, ref } from "@nuxtjs/composition-api";
+import AdminBackupImportOptions from "./AdminBackupImportOptions.vue";
+import AdminBackupDialog from "./AdminBackupDialog.vue";
+import { BackupFile } from "~/api/class-interfaces/backups";
+import { useBackups } from "~/composables/use-backups";
 
 const IMPORT_EVENT = "import";
 const DELETE_EVENT = "delete";
 
+type EVENTS = "import" | "delete";
+
 export default defineComponent({
-  components: { AdminBackupImportDialog },
-  layout: "admin",
+  components: { AdminBackupImportOptions, AdminBackupDialog },
+  props: {
+    availableBackups: {
+      type: Array,
+      required: true,
+    },
+    templates: {
+      type: Array,
+      required: true,
+    },
+  },
   setup() {
-    return {};
+    const refImportDialog = ref();
+    const refDeleteConfirmation = ref();
+
+    const { refreshBackups, importBackup, createBackup, deleteBackup } = useBackups();
+
+    return {
+      btnEvent: { IMPORT_EVENT, DELETE_EVENT },
+      refImportDialog,
+      refDeleteConfirmation,
+      refreshBackups,
+      importBackup,
+      createBackup,
+      deleteBackup,
+    };
   },
   data() {
     return {
       color: "accent",
-      selectedName: "",
-      selectedDate: "",
       loading: false,
-      events: [],
-      availableBackups: [],
-      btnEvent: { IMPORT_EVENT, DELETE_EVENT },
+      selectedBackup: {
+        name: "",
+        date: "",
+      },
+      importOptions: {},
     };
   },
   computed: {
-    total() {
+    total(): number {
       return this.availableBackups.length || 0;
     },
   },
+  methods: {
+    openDialog(backup: BackupFile, event: EVENTS) {
+      this.selectedBackup = backup;
+
+      switch (event) {
+        case IMPORT_EVENT:
+          this.refImportDialog.open();
+          break;
+        case DELETE_EVENT:
+          this.refDeleteConfirmation.open();
+          break;
+      }
+    },
+    async restoreBackup() {
+      const payload = {
+        name: this.selectedBackup.name,
+        ...this.importOptions,
+      };
+
+      await this.importBackup(this.selectedBackup.name, payload);
+    },
+  },
 });
 </script>
 

frontend/components/Domain/Admin/AdminEventViewer.vue

@@ -1,3 +1,5 @@
+// TODO: Fix date/time Localization
+
 <template>
   <div>
     <!-- <BaseDialog
@@ -21,7 +23,7 @@
         </div>
       </template>
       <div class="d-flex row py-3 justify-end">
-        <v-btn class="mx-2" small color="error lighten-1" @click="deleteAll">
+        <v-btn class="mx-2" small color="error lighten-1" @click="$emit('delete-all')">
           <v-icon left> {{ $globals.icons.notificationClearAll }} </v-icon> {{ $t("general.clear") }}
         </v-btn>
       </div>
@@ -45,7 +47,7 @@
               </v-list-item-content>
 
               <v-list-item-action class="ml-auto">
-                <v-btn large icon @click="openDialog(item)">
+                <v-btn large icon @click="$emit('delete-item', item.id)">
                   <v-icon color="error">{{ $globals.icons.delete }}</v-icon>
                 </v-btn>
               </v-list-item-action>
@@ -62,15 +64,20 @@ import { defineComponent } from "@nuxtjs/composition-api";
 
 export default defineComponent({
   layout: "admin",
-  setup() {
-    return {};
+  props: {
+    events: {
+      type: Array,
+      required: true,
+    },
+    total: {
+      type: Number,
+      default: 0,
+    },
   },
   data() {
     return {
       color: "accent",
-      total: 0,
       selectedId: "",
-      events: [],
       icons: {
         general: {
           icon: this.$globals.icons.information,