chore: refactor data management pages (#7107)

frontend/pages/group/data/labels.vue

@@ -1,99 +1,5 @@
 <template>
   <div>
-    <!-- Create New Dialog -->
-    <BaseDialog
-      v-model="state.createDialog"
-      :title="$t('data-pages.labels.new-label')"
-      :icon="$globals.icons.tags"
-      can-submit
-      @submit="createLabel"
-    >
-      <v-card-text>
-        <MultiPurposeLabel :label="createLabelData" />
-
-        <div class="mt-4">
-          <v-text-field
-            v-model="createLabelData.name"
-            :label="$t('general.name')"
-          />
-          <InputColor v-model="createLabelData.color!" />
-        </div>
-      </v-card-text>
-    </BaseDialog>
-
-    <!-- Edit Dialog -->
-    <BaseDialog
-      v-model="state.editDialog"
-      :icon="$globals.icons.tags"
-      :title="$t('data-pages.labels.edit-label')"
-      :submit-icon="$globals.icons.save"
-      :submit-text="$t('general.save')"
-      can-submit
-      @submit="editSaveLabel"
-    >
-      <v-card-text v-if="editLabel">
-        <MultiPurposeLabel :label="editLabel" />
-        <div class="mt-4">
-          <v-text-field
-            v-model="editLabel.name"
-            :label="$t('general.name')"
-          />
-          <InputColor v-model="editLabel.color!" />
-        </div>
-      </v-card-text>
-    </BaseDialog>
-
-    <!-- Delete Dialog -->
-    <BaseDialog
-      v-model="state.deleteDialog"
-      :title="$t('general.confirm')"
-      :icon="$globals.icons.alertCircle"
-      color="error"
-      can-confirm
-      @confirm="deleteLabel"
-    >
-      <v-card-text>
-        {{ $t("general.confirm-delete-generic") }}
-        <v-row>
-          <MultiPurposeLabel
-            v-if="deleteTarget"
-            class="mt-4 ml-4 mb-1"
-            :label="deleteTarget"
-          />
-        </v-row>
-      </v-card-text>
-    </BaseDialog>
-
-    <!-- Bulk Delete Dialog -->
-    <BaseDialog
-      v-model="state.bulkDeleteDialog"
-      width="650px"
-      :title="$t('general.confirm')"
-      :icon="$globals.icons.alertCircle"
-      color="error"
-      can-confirm
-      @confirm="deleteSelected"
-    >
-      <v-card-text>
-        <p class="h4">
-          {{ $t('general.confirm-delete-generic-items') }}
-        </p>
-        <v-card variant="outlined">
-          <v-virtual-scroll
-            height="400"
-            item-height="25"
-            :items="bulkDeleteTarget"
-          >
-            <template #default="{ item }">
-              <v-list-item class="pb-2">
-                <v-list-item-title>{{ item.name }}</v-list-item-title>
-              </v-list-item>
-            </template>
-          </v-virtual-scroll>
-        </v-card>
-      </v-card-text>
-    </BaseDialog>
-
     <!-- Seed Dialog -->
     <BaseDialog
       v-model="seedDialog"
@@ -127,7 +33,7 @@
         </v-autocomplete>
 
         <v-alert
-          v-if="labels && labels.length > 0"
+          v-if="labelStore.store.value && labelStore.store.value.length > 0"
           type="error"
           class="mb-0 text-body-2"
         >
@@ -136,30 +42,20 @@
       </v-card-text>
     </BaseDialog>
 
-    <!-- Data Table -->
-    <BaseCardSectionTitle
+    <GroupDataPage
       :icon="$globals.icons.tags"
-      section
       :title="$t('data-pages.labels.labels')"
-    />
-    <CrudTable
-      v-model:headers="tableHeaders"
+      :table-headers="tableHeaders"
       :table-config="tableConfig"
-      :data="labels || []"
+      :data="labelStore.store.value || []"
       :bulk-actions="[{ icon: $globals.icons.delete, text: $t('general.delete'), event: 'delete-selected' }]"
-      initial-sort="name"
-      @delete-one="deleteEventHandler"
-      @edit-one="editEventHandler"
-      @delete-selected="bulkDeleteEventHandler"
+      :create-form="createForm"
+      :edit-form="editForm"
+      @create-one="handleCreate"
+      @edit-one="handleEdit"
+      @delete-one="labelStore.actions.deleteOne"
+      @bulk-action="handleBulkAction"
     >
-      <template #button-row>
-        <BaseButton
-          create
-          @click="state.createDialog = true"
-        >
-          {{ $t("general.create") }}
-        </BaseButton>
-      </template>
       <template #[`item.name`]="{ item }">
         <MultiPurposeLabel
           v-if="item"
@@ -168,7 +64,12 @@
           {{ item.name }}
         </MultiPurposeLabel>
       </template>
-      <template #button-bottom>
+
+      <template #create-dialog-top>
+        <MultiPurposeLabel :label="createForm.data" class="my-2" />
+      </template>
+
+      <template #table-button-bottom>
         <BaseButton @click="seedDialog = true">
           <template #icon>
             {{ $globals.icons.database }}
@@ -176,172 +77,114 @@
           {{ $t('data-pages.seed') }}
         </BaseButton>
       </template>
-    </CrudTable>
+    </GroupDataPage>
   </div>
 </template>
 
-<script lang="ts">
-import type { LocaleObject } from "@nuxtjs/i18n";
+<script setup lang="ts">
 import { validators } from "~/composables/use-validators";
 import { useUserApi } from "~/composables/api";
 import MultiPurposeLabel from "~/components/Domain/ShoppingList/MultiPurposeLabel.vue";
+import { fieldTypes } from "~/composables/forms";
 import type { MultiPurposeLabelSummary } from "~/lib/api/types/labels";
+import type { AutoFormItems } from "~/types/auto-forms";
 import { useLocales } from "~/composables/use-locales";
 import { normalizeFilter } from "~/composables/use-utils";
-import { useLabelData, useLabelStore } from "~/composables/store";
+import { useLabelStore } from "~/composables/store";
+import type { TableHeaders, TableConfig } from "~/components/global/CrudTable.vue";
 
-export default defineNuxtComponent({
-  components: { MultiPurposeLabel },
-  setup() {
-    const userApi = useUserApi();
-    const i18n = useI18n();
+const userApi = useUserApi();
+const i18n = useI18n();
 
-    const tableConfig = {
-      hideColumns: true,
-      canExport: true,
-    };
-    const tableHeaders = [
-      {
-        text: i18n.t("general.id"),
-        value: "id",
-        show: false,
-      },
-      {
-        text: i18n.t("general.name"),
-        value: "name",
-        show: true,
-        sortable: true,
-      },
-    ];
-
-    const state = reactive({
-      createDialog: false,
-      editDialog: false,
-      deleteDialog: false,
-      bulkDeleteDialog: false,
-    });
-
-    // ============================================================
-    // Labels
-
-    const labelData = useLabelData();
-    const labelStore = useLabelStore();
-
-    // Create
-
-    async function createLabel() {
-      await labelStore.actions.createOne(labelData.data);
-      labelData.reset();
-      state.createDialog = false;
-    }
-
-    // Delete
-
-    const deleteTarget = ref<MultiPurposeLabelSummary | null>(null);
-
-    function deleteEventHandler(item: MultiPurposeLabelSummary) {
-      state.deleteDialog = true;
-      deleteTarget.value = item;
-    }
-
-    async function deleteLabel() {
-      if (!deleteTarget.value) {
-        return;
-      }
-      await labelStore.actions.deleteOne(deleteTarget.value.id);
-      state.deleteDialog = false;
-    }
-
-    // Bulk Delete
-    const bulkDeleteTarget = ref<MultiPurposeLabelSummary[]>([]);
-
-    function bulkDeleteEventHandler(selection: MultiPurposeLabelSummary[]) {
-      bulkDeleteTarget.value = selection;
-      state.bulkDeleteDialog = true;
-    }
-
-    async function deleteSelected() {
-      const ids = bulkDeleteTarget.value.map(item => item.id);
-      await labelStore.actions.deleteMany(ids);
-      bulkDeleteTarget.value = [];
-    }
-
-    // Edit
-
-    const editLabel = ref<MultiPurposeLabelSummary | null>(null);
-
-    function editEventHandler(item: MultiPurposeLabelSummary) {
-      state.editDialog = true;
-      editLabel.value = item;
-
-      if (!editLabel.value.color) {
-        editLabel.value.color = "#959595";
-      }
-    }
-
-    async function editSaveLabel() {
-      if (!editLabel.value) {
-        return;
-      }
-      await labelStore.actions.updateOne(editLabel.value);
-      state.editDialog = false;
-    }
-
-    // ============================================================
-    // Seed
-
-    const seedDialog = ref(false);
-    const locale = ref("");
-
-    const { locales: LOCALES, locale: currentLocale } = useLocales();
-
-    onMounted(() => {
-      locale.value = currentLocale.value;
-    });
-
-    const locales = LOCALES.filter(locale =>
-      (i18n.locales.value as LocaleObject[]).map(i18nLocale => i18nLocale.code).includes(locale.value),
-    );
-
-    async function seedDatabase() {
-      const { data } = await userApi.seeders.labels({ locale: locale.value });
-
-      if (data) {
-        labelStore.actions.refresh();
-      }
-    }
-
-    return {
-      state,
-      tableConfig,
-      tableHeaders,
-      labels: labelStore.store,
-      validators,
-      normalizeFilter,
-
-      // create
-      createLabel,
-      createLabelData: labelData.data,
-
-      // edit
-      editLabel,
-      editEventHandler,
-      editSaveLabel,
-
-      // delete
-      deleteEventHandler,
-      deleteLabel,
-      deleteTarget,
-      bulkDeleteEventHandler,
-      deleteSelected,
-      bulkDeleteTarget,
-
-      // Seed
-      seedDatabase,
-      locales,
-      locale,
-      seedDialog,
-    };
+const tableConfig: TableConfig = {
+  hideColumns: true,
+  canExport: true,
+};
+const tableHeaders: TableHeaders[] = [
+  {
+    text: i18n.t("general.id"),
+    value: "id",
+    show: false,
   },
+  {
+    text: i18n.t("general.name"),
+    value: "name",
+    show: true,
+    sortable: true,
+  },
+];
+
+const labelStore = useLabelStore();
+
+// ============================================================
+// Form items (shared)
+const formItems: AutoFormItems = [
+  {
+    label: i18n.t("general.name"),
+    varName: "name",
+    type: fieldTypes.TEXT,
+    rules: [validators.required],
+  },
+  {
+    label: i18n.t("general.color"),
+    varName: "color",
+    type: fieldTypes.COLOR,
+  },
+];
+
+// ============================================================
+// Create
+const createForm = reactive({
+  items: formItems,
+  data: {
+    name: "",
+    color: "",
+  } as MultiPurposeLabelSummary,
 });
+
+async function handleCreate(createFormData: MultiPurposeLabelSummary) {
+  await labelStore.actions.createOne(createFormData);
+  createForm.data = { name: "", color: "#7417BE" } as MultiPurposeLabelSummary;
+}
+
+// ============================================================
+// Edit
+const editForm = reactive({
+  items: formItems,
+  data: {} as MultiPurposeLabelSummary,
+});
+
+async function handleEdit(editFormData: MultiPurposeLabelSummary) {
+  await labelStore.actions.updateOne(editFormData);
+  editForm.data = {} as MultiPurposeLabelSummary;
+}
+
+// ============================================================
+// Bulk Actions
+async function handleBulkAction(event: string, items: MultiPurposeLabelSummary[]) {
+  if (event === "delete-selected") {
+    const ids = items.filter(item => item.id != null).map(item => item.id!);
+    await labelStore.actions.deleteMany(ids);
+  }
+}
+
+// ============================================================
+// Seed
+
+const seedDialog = ref(false);
+const locale = ref("");
+
+const { locales: locales, locale: currentLocale } = useLocales();
+
+onMounted(() => {
+  locale.value = currentLocale.value;
+});
+
+async function seedDatabase() {
+  const { data } = await userApi.seeders.labels({ locale: locale.value });
+
+  if (data) {
+    labelStore.actions.refresh();
+  }
+}
 </script>