refactor(frontend): 🚧 Migrate Dashboard to Nuxt

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

frontend/composables/use-backups.ts

@@ -0,0 +1,84 @@
+import { useAsync, ref } from "@nuxtjs/composition-api";
+import { set } from "@vueuse/core";
+import { toastLoading, loader } from "./use-toast";
+import { AllBackups, ImportBackup, BackupJob } from "~/api/class-interfaces/backups";
+import { useApiSingleton } from "~/composables/use-api";
+
+const backups = ref<AllBackups>({
+  imports: [],
+  templates: [],
+});
+
+function setBackups(newBackups: AllBackups | null) {
+  if (newBackups) {
+    set(backups, newBackups);
+  }
+}
+
+export const useBackups = function (fetch = true) {
+  const api = useApiSingleton();
+
+  function getBackups() {
+    const backups = useAsync(async () => {
+      const { data } = await api.backups.getAll();
+      return data;
+    });
+    return backups;
+  }
+
+  async function refreshBackups() {
+    const { data } = await api.backups.getAll();
+    if (data) {
+      setBackups(data);
+    }
+  }
+
+  async function createBackup(payload: BackupJob | null = null) {
+    if (payload === null) {
+      payload = {
+        tag: "",
+        templates: [],
+        options: {
+          recipes: true,
+          settings: true,
+          themes: true,
+          pages: true,
+          users: true,
+          groups: true,
+          notifications: true,
+        },
+      };
+    }
+    loader.info("Creating Backup...");
+
+    const { response } = await api.backups.createOne(payload);
+    if (response && response.status === 201) {
+      refreshBackups();
+      toastLoading.open = false;
+    }
+  }
+
+  async function deleteBackup(fileName: string) {
+    const { response } = await api.backups.deleteOne(fileName);
+
+    if (response && response.status === 200) {
+      refreshBackups();
+    }
+  }
+
+  async function importBackup(fileName: string, payload: ImportBackup) {
+    loader.info("Import Backup...");
+    const { response } = await api.backups.restoreDatabase(fileName, payload);
+
+    if (response && response.status === 200) {
+      refreshBackups();
+      loader.close();
+    }
+  }
+
+  if (fetch) {
+    refreshBackups();
+  }
+
+  return { getBackups, refreshBackups, deleteBackup, backups, importBackup, createBackup };
+};

frontend/composables/use-toast.ts

@@ -0,0 +1,65 @@
+import { reactive } from "@nuxtjs/composition-api";
+
+interface Toast {
+  open: boolean;
+  text: string;
+  title: string | null;
+  color: string;
+}
+
+export const toastAlert = reactive<Toast>({
+  open: false,
+  title: null,
+  text: "Hello From The Store",
+  color: "info",
+});
+
+export const toastLoading = reactive<Toast>({
+  open: false,
+  title: null,
+  text: "Importing Backup",
+  color: "success",
+});
+
+function setToast(toast: Toast, text: string, title: string | null, color: string) {
+  toast.open = true;
+  toast.text = text;
+  toast.title = title;
+  toast.color = color;
+}
+
+export const loader = {
+  info(text: string, title: string | null = null) {
+    setToast(toastLoading, text, title, "info");
+  },
+  success(text: string, title: string | null = null) {
+    setToast(toastLoading, text, title, "success");
+  },
+  error(text: string, title: string | null = null) {
+    setToast(toastLoading, text, title, "error");
+  },
+  warning(text: string, title: string | null = null) {
+    setToast(toastLoading, text, title, "warning");
+  },
+  close() {
+    toastLoading.open = false;
+  },
+};
+
+export const alert = {
+  info(text: string, title: string | null = null) {
+    setToast(toastAlert, text, title, "info");
+  },
+  success(text: string, title: string | null = null) {
+    setToast(toastAlert, text, title, "success");
+  },
+  error(text: string, title: string | null = null) {
+    setToast(toastAlert, text, title, "error");
+  },
+  warning(text: string, title: string | null = null) {
+    setToast(toastAlert, text, title, "warning");
+  },
+  close() {
+    toastAlert.open = false;
+  },
+};

frontend/composables/use-utils.ts

@@ -0,0 +1,3 @@
+export const useAsyncKey = function () {
+  return String(Date.now());
+};