refactor(frontend): 🚧 Migrate Dashboard to Nuxt

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

frontend/components/global/AppButtonUpload.vue

@@ -11,25 +11,44 @@
 </template>
 
 <script>
-import { api } from "@/api";
+import { useApiSingleton } from "~/composables/use-api";
 const UPLOAD_EVENT = "uploaded";
 export default {
   props: {
     small: {
+      type: Boolean,
       default: false,
     },
     post: {
       type: Boolean,
       default: true,
     },
-    url: String,
-    text: String,
-    icon: { default: null },
-    fileName: { default: "archive" },
+    url: {
+      type: String,
+      default: "",
+    },
+    text: {
+      type: String,
+      default: "",
+    },
+    icon: {
+      type: String,
+      default: null,
+    },
+    fileName: {
+      type: String,
+      default: "archive",
+    },
     textBtn: {
+      type: Boolean,
       default: true,
     },
   },
+  setup() {
+    const api = useApiSingleton();
+
+    return { api };
+  },
   data: () => ({
     file: null,
     isSelecting: false,
@@ -58,7 +77,7 @@ export default {
         const formData = new FormData();
         formData.append(this.fileName, this.file);
 
-        const response = await api.utils.uploadFile(this.url, formData);
+        const response = await this.api.upload.file(this.url, formData);
 
         if (response) {
           this.$emit(UPLOAD_EVENT, response);

frontend/components/global/BaseButton.vue

@@ -86,32 +86,32 @@ export default {
       buttonOptions: {
         create: {
           text: "Create",
-          icon: "mdi-plus",
+          icon: this.$globals.icons.createAlt,
           color: "success",
         },
         update: {
           text: "Update",
-          icon: "mdi-edit",
+          icon: this.$globals.icons.edit,
           color: "success",
         },
         save: {
           text: "Save",
-          icon: "mdi-save",
+          icon: this.$globals.icons.save,
           color: "success",
         },
         edit: {
           text: "Edit",
-          icon: "mdi-square-edit-outline",
+          icon: this.$globals.icons.edit,
           color: "info",
         },
         delete: {
           text: "Delete",
-          icon: "mdi-delete",
+          icon: this.$globals.icons.delete,
           color: "error",
         },
         cancel: {
           text: "Cancel",
-          icon: "mdi-close",
+          icon: this.$globals.icons.cancel,
           color: "grey",
         },
       },

frontend/components/global/BaseDialog.vue

@@ -32,7 +32,15 @@
             <v-spacer></v-spacer>
 
             <BaseButton v-if="$listeners.delete" delete secondary @click="deleteEvent" />
-            <BaseButton v-if="$listeners.confirm" :color="color" type="submit" @click="$emit('confirm')">
+            <BaseButton
+              v-if="$listeners.confirm"
+              :color="color"
+              type="submit"
+              @click="
+                $emit('confirm');
+                dialog = false;
+              "
+            >
               <template #icon>
                 {{ $globals.icons.check }}
               </template>
@@ -97,10 +105,10 @@ export default defineComponent({
     };
   },
   computed: {
-    determineClose() {
+    determineClose(): Boolean {
       return this.submitted && !this.loading && !this.keepOpen;
     },
-    displayicon() {
+    displayicon(): Boolean {
       return this.icon || this.$globals.icons.user;
     },
   },