refactor(frontend): 🚧 Migrate Dashboard to Nuxt

Add API and Functinality for Admin Dashboard. Stills needs to clean-up. See // TODO's
2025-08-05 05:25:26 +02:00 · 2021-08-07 15:12:25 -08:00 · 2021-08-07 15:12:25 -08:00 · 9386cc320b
commit 9386cc320b
parent 41a6916771
32 changed files with 671 additions and 113 deletions
--- a/frontend/components/Domain/Admin/AdminBackupDialog.vue
+++ b/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: {
--- a/frontend/components/Domain/Admin/AdminBackupImportDialog.vue
+++ b/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>
--- a/frontend/components/Domain/Admin/AdminBackupImportOptions.vue
+++ b/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,
      });
    },
  },
--- a/frontend/components/Domain/Admin/AdminBackupViewer.vue
+++ b/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>

--- a/frontend/components/Domain/Admin/AdminEventViewer.vue
+++ b/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,
--- a/frontend/components/Domain/Recipe/RecipeCardSection.vue
+++ b/frontend/components/Domain/Recipe/RecipeCardSection.vue
@ -57,7 +57,7 @@
    </v-app-bar>
    <div v-if="recipes" class="mt-2">
      <v-row v-if="!viewScale">
-        <v-col v-for="recipe in recipes.slice(0, cardLimit)" :key="recipe.name" :sm="6" :md="6" :lg="4" :xl="3">
+        <v-col v-for="recipe in recipes" :key="recipe.name" :sm="6" :md="6" :lg="4" :xl="3">
          <v-lazy>
            <RecipeCard
              :name="recipe.name"
--- a/frontend/components/Domain/Recipe/RecipeChips.vue
+++ b/frontend/components/Domain/Recipe/RecipeChips.vue
@ -50,10 +50,10 @@ export default {
  },
  computed: {
    allCategories() {
-      return this.$store.getters.getAllCategories;
+      return this.$store.getters.getAllCategories || [];
    },
    allTags() {
-      return this.$store.getters.getAllTags;
+      return this.$store.getters.getAllTags || [];
    },
    urlParam() {
      return this.isCategory ? "category" : "tag";
--- a/frontend/components/Domain/Recipe/RecipeFavoriteBadge.vue
+++ b/frontend/components/Domain/Recipe/RecipeFavoriteBadge.vue
@ -21,7 +21,6 @@
 </template>

 <script>
-import { api } from "@/api";
 import { defineComponent } from "@nuxtjs/composition-api";
 import { useApiSingleton } from "~/composables/use-api";
 export default defineComponent({
--- a/frontend/components/Layout/AppFloatingButton.vue
+++ b/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;
--- a/frontend/components/Layout/TheSnackbar.vue
+++ b/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>
--- a/frontend/components/global/AppButtonUpload.vue
+++ b/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);
--- a/frontend/components/global/BaseButton.vue
+++ b/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",
        },
      },
--- a/frontend/components/global/BaseDialog.vue
+++ b/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;
    },
  },