refactor(frontend): 🚧 Migrate Dashboard to Nuxt

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

frontend/components/Layout/AppFloatingButton.vue

@@ -204,12 +204,14 @@ export default defineComponent({
       set(recipe_import_url: string) {
         this.$router.replace({ query: { ...this.$route.query, recipe_import_url } });
       },
-      get(): string {
+      get(): string | (string | null)[] {
         return this.$route.query.recipe_import_url || "";
       },
     },
     fileName(): string {
+      // @ts-ignore
       if (this.uploadData?.file?.name) {
+        // @ts-ignore
         return this.uploadData.file.name;
       }
       return "";
@@ -243,22 +245,31 @@ export default defineComponent({
     },
     async uploadZip() {
       const formData = new FormData();
+
+      // @ts-ignore
       formData.append(this.uploadData.fileName, this.uploadData.file);
 
-      const response = await this.api.utils.uploadFile("/api/recipes/create-from-zip", formData);
+      const { response, data } = await this.api.upload.file("/api/recipes/create-from-zip", formData);
 
-      this.$router.push(`/recipe/${response.data.slug}`);
+      if (response && response.status === 201) {
+        // @ts-ignore
+        this.$router.push(`/recipe/${data.slug}`);
+      }
     },
     async manualCreateRecipe() {
       await this.api.recipes.createOne({ name: this.createRecipeData.form.name });
     },
     async createOnByUrl() {
       this.error = false;
-      console.log(this.domImportFromUrlForm?.validate());
 
       if (this.domImportFromUrlForm?.validate()) {
         this.processing = true;
-        const response = await this.api.recipes.createOneByUrl(this.recipeURL);
+
+        let response;
+        if (typeof this.recipeURL === "string") {
+          response = await this.api.recipes.createOneByUrl(this.recipeURL);
+        }
+
         this.processing = false;
         if (response) {
           this.addRecipe = false;

frontend/components/Layout/TheSnackbar.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="text-center">
+    <v-snackbar v-model="toastAlert.open" top :color="toastAlert.color" timeout="1500" @input="toastAlert.open = false">
+      <v-icon dark left>
+        {{ icon }}
+      </v-icon>
+
+      {{ toastAlert.title }}
+      {{ toastAlert.text }}
+
+      <template #action="{ attrs }">
+        <v-btn text v-bind="attrs" @click="toastAlert.open = false"> Close </v-btn>
+      </template>
+    </v-snackbar>
+    <v-snackbar
+      content-class="py-2"
+      dense
+      bottom
+      right
+      :value="toastLoading.open"
+      :timeout="-1"
+      :color="toastLoading.color"
+      @input="toastLoading.open = false"
+    >
+      <div class="d-flex flex-column align-center justify-start" @click="toastLoading.open = false">
+        <div class="mb-2 mt-0 text-subtitle-1 text-center">
+          {{ toastLoading.text }}
+        </div>
+        <v-progress-linear indeterminate color="white darken-2"></v-progress-linear>
+      </div>
+    </v-snackbar>
+  </div>
+</template>
+
+<script>
+import { toastAlert, toastLoading } from "~/composables/use-toast";
+
+export default {
+  setup() {
+    return { toastAlert, toastLoading };
+  },
+  computed: {
+    icon() {
+      switch (this.toastAlert.color) {
+        case "error":
+          return "mdi-alert";
+        case "success":
+          return "mdi-check-bold";
+        case "info":
+          return "mdi-information-outline";
+        default:
+          return "mdi-alert";
+      }
+    },
+  },
+};
+</script>