refactor(frontend): 🔥 rewrite backup UI for new page base components

Removed old split code and used the composition api to to re-write the import/export functionality of mealie.

frontend/pages/admin/backups.vue

@@ -0,0 +1,153 @@
+// TODO: Create a new datatable below to display the import summary json files saved on server (Need to do as well).
+<template>
+  <v-container fluid>
+    <section>
+      <BaseCardSectionTitle title="Mealie Backups"> </BaseCardSectionTitle>
+
+      <!-- Delete Dialog -->
+      <BaseDialog
+        ref="domDeleteConfirmation"
+        :title="$t('settings.backup.delete-backup')"
+        color="error"
+        :icon="$globals.icons.alertCircle"
+        @confirm="deleteBackup()"
+      >
+        <v-card-text>
+          {{ $t("general.confirm-delete-generic") }}
+        </v-card-text>
+      </BaseDialog>
+
+      <!-- Import Dialog -->
+      <BaseDialog
+        ref="domImportDialog"
+        :title="selected.name"
+        :icon="$globals.icons.database"
+        :submit-text="$t('general.import')"
+        @submit="importBackup()"
+      >
+        <!-- <v-card-subtitle v-if="date" class="mb-n3 mt-3"> {{ $d(new Date(date), "medium") }} </v-card-subtitle> -->
+        <v-divider></v-divider>
+        <v-card-text>
+          <AdminBackupImportOptions v-model="selected.options" class="mt-5 mb-2" :import-backup="true" />
+        </v-card-text>
+
+        <v-divider></v-divider>
+      </BaseDialog>
+
+      <v-toolbar flat class="justify-between">
+        <BaseButton class="mr-2" @click="createBackup(null)" />
+        <!-- Backup Creation Dialog -->
+        <BaseDialog
+          :title="$t('settings.backup.create-heading')"
+          :icon="$globals.icons.database"
+          :submit-text="$t('general.create')"
+          @submit="createBackup"
+        >
+          <template #activator="{ open }">
+            <BaseButton secondary @click="open"> {{ $t("general.custom") }}</BaseButton>
+          </template>
+
+          <v-divider></v-divider>
+          <v-card-text>
+            <v-text-field v-model="backupOptions.tag" :label="$t('settings.backup.backup-tag')"> </v-text-field>
+            <AdminBackupImportOptions v-model="backupOptions.options" class="mt-5 mb-2" />
+            <v-divider class="my-3"></v-divider>
+            <p class="text-uppercase">Templates</p>
+            <v-checkbox
+              v-for="(template, index) in backups.templates"
+              :key="index"
+              v-model="backupOptions.templates"
+              :value="template"
+              :label="template"
+            ></v-checkbox>
+          </v-card-text>
+        </BaseDialog>
+      </v-toolbar>
+
+      <v-data-table
+        :headers="headers"
+        :items="backups.imports || []"
+        class="elevation-0"
+        hide-default-footer
+        disable-pagination
+        :search="search"
+        @click:row="setSelected"
+      >
+        <template #item.date="{ item }">
+          {{ $d(Date.parse(item.date), "medium") }}
+        </template>
+        <template #item.actions="{ item }">
+          <BaseButton
+            small
+            class="mx-1"
+            delete
+            @click.stop="
+              domDeleteConfirmation.open();
+              deleteTarget = item.name;
+            "
+          />
+          <BaseButton small download :download-url="backupsFileNameDownload(item.name)" @click.stop />
+        </template>
+      </v-data-table>
+      <v-divider></v-divider>
+    </section>
+  </v-container>
+</template>
+    
+<script lang="ts">
+import AdminBackupImportOptions from "@/components/Domain/Admin/AdminBackupImportOptions.vue";
+import { defineComponent, reactive, toRefs, useContext, ref } from "@nuxtjs/composition-api";
+import { useBackups } from "~/composables/use-backups";
+
+export default defineComponent({
+  components: { AdminBackupImportOptions },
+  layout: "admin",
+  setup() {
+    const { i18n } = useContext();
+
+    const { selected, backups, backupOptions, deleteTarget, refreshBackups, importBackup, createBackup, deleteBackup } =
+      useBackups();
+
+    const domDeleteConfirmation = ref(null);
+    const domImportDialog = ref(null);
+    const state = reactive({
+      search: "",
+      headers: [
+        { text: i18n.t("general.name"), value: "name" },
+        { text: i18n.t("general.created"), value: "date" },
+        { text: "", value: "actions", align: "right" },
+      ],
+    });
+
+    function setSelected(data: { name: string; date: string }) {
+      if (selected.value === null || selected.value === undefined) {
+        return;
+      }
+      selected.value.name = data.name;
+      // @ts-ignore - Calling Child Method
+      domImportDialog.value.open();
+    }
+
+    const backupsFileNameDownload = (fileName: string) => `api/backups/${fileName}/download`;
+
+    return {
+      selected,
+      ...toRefs(state),
+      backupOptions,
+      backups,
+      createBackup,
+      deleteBackup,
+      setSelected,
+      deleteTarget,
+      domDeleteConfirmation,
+      domImportDialog,
+      importBackup,
+      refreshBackups,
+      backupsFileNameDownload,
+    };
+  },
+});
+</script>
+    
+<style scoped>
+</style>

frontend/pages/admin/dashboard.vue

@@ -77,7 +77,7 @@
       </v-col>
     </v-row>
     <v-row class="mt-10" align-content="stretch">
-      <v-col cols="12" sm="12" lg="6">
+      <v-col>
         <AdminEventViewer
           v-if="events"
           :events="events.events"
@@ -86,9 +86,6 @@
           @delete-item="deleteEvent"
         />
       </v-col>
-      <v-col cols="12" sm="12" lg="6">
-        <AdminBackupViewer v-if="backups" :available-backups="backups.imports" :templates="backups.templates" />
-      </v-col>
     </v-row>
   </v-container>
 </template>
@@ -97,13 +94,11 @@
 <script lang="ts">
 import { defineComponent, useAsync } from "@nuxtjs/composition-api";
 import AdminEventViewer from "@/components/Domain/Admin/AdminEventViewer.vue";
-import AdminBackupViewer from "@/components/Domain/Admin/AdminBackupViewer.vue";
 import { useApiSingleton } from "~/composables/use-api";
-import { useBackups } from "~/composables/use-backups";
 import { useAsyncKey } from "~/composables/use-utils";
 
 export default defineComponent({
-  components: { AdminEventViewer, AdminBackupViewer },
+  components: { AdminEventViewer },
   layout: "admin",
   setup() {
     const api = useApiSingleton();
@@ -146,11 +141,10 @@ export default defineComponent({
       }
     }
 
-    const { backups } = useBackups();
     const events = getEvents();
     const statistics = getStatistics();
 
-    return { statistics, events, deleteEvents, deleteEvent, backups };
+    return { statistics, events, deleteEvents, deleteEvent };
   },
 });
 </script>

frontend/pages/admin/manage-users/all-groups.vue

@@ -1,5 +1,6 @@
 // TODO: Add Loading Indicator...Maybe?
 // TODO: Edit Group
+// TODO: Migrate all stuff to setup()
 <template>
   <v-container fluid>
     <BaseCardSectionTitle title="Group Management"> </BaseCardSectionTitle>
@@ -77,9 +78,7 @@ export default defineComponent({
   layout: "admin",
   setup() {
     const api = useApiSingleton();
-
     const { groups, refreshAllGroups, deleteGroup, createGroup } = useGroups();
-
     return { api, groups, refreshAllGroups, deleteGroup, createGroup };
   },
   data() {
@@ -117,6 +116,3 @@ export default defineComponent({
   },
 });
 </script>
-
-<style scoped>
-</style>

frontend/pages/user/profile.vue

@@ -2,28 +2,30 @@
   <v-container fluid>
     <v-row>
       <v-col cols="12" sm="12" md="12" lg="6">
-        <UserProfileCard class="mt-14" />
+        <UserProfileCard :user="user" class="mt-14" @refresh="$auth.fetchUser()" />
       </v-col>
       <v-col cols="12" sm="12" md="12" lg="6">
-        <UserThemeCard class="mt-14" />
+        <UserAPITokenCard :tokens="user.tokens" class="mt-14" @refresh="$auth.fetchUser()" />
       </v-col>
     </v-row>
   </v-container>
 </template>
     
-    <script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api";
+<script lang="ts">
+import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
 import UserProfileCard from "~/components/Domain/User/UserProfileCard.vue";
-import UserThemeCard from "~/components/Domain/User/UserThemeCard.vue";
+import UserAPITokenCard from "~/components/Domain/User/UserAPITokenCard.vue";
 
 export default defineComponent({
-  components: { UserProfileCard, UserThemeCard },
+  components: { UserProfileCard, UserAPITokenCard },
   layout: "admin",
   setup() {
-    return {};
+    const user = computed(() => {
+      return useContext().$auth.user;
+    });
+
+    return { user };
   },
 });
 </script>
     
-    <style scoped>
-</style>