chore: refactor data management pages (#7107)

frontend/components/Domain/Group/GroupDataPage.vue

@@ -0,0 +1,217 @@
+<template>
+  <!-- Create Dialog -->
+  <BaseDialog
+    v-model="createDialog"
+    :title="$t('general.create')"
+    :icon="icon"
+    color="primary"
+    :submit-disabled="!createFormValid"
+    can-confirm
+    @confirm="emit('create-one', createForm.data)"
+  >
+    <div class="mx-2 mt-2">
+      <slot name="create-dialog-top" />
+      <AutoForm
+        v-model="createForm.data"
+        v-model:is-valid="createFormValid"
+        :items="createForm.items"
+      />
+    </div>
+  </BaseDialog>
+
+  <!-- Edit Dialog -->
+  <BaseDialog
+    v-model="editDialog"
+    :title="$t('general.edit')"
+    :icon="icon"
+    color="primary"
+    :submit-disabled="!editFormValid"
+    can-confirm
+    @confirm="emit('edit-one', editForm.data)"
+  >
+    <div class="mx-2 mt-2">
+      <AutoForm
+        v-model="editForm.data"
+        v-model:is-valid="editFormValid"
+        :items="editForm.items"
+      />
+    </div>
+    <template #custom-card-action>
+      <slot name="edit-dialog-custom-action" />
+    </template>
+  </BaseDialog>
+
+  <!-- Delete Dialog -->
+  <BaseDialog
+    v-model="deleteDialog"
+    :title="$t('general.confirm')"
+    :icon="$globals.icons.alertCircle"
+    color="error"
+    can-confirm
+    @confirm="$emit('deleteOne', deleteTarget.id)"
+  >
+    <v-card-text>
+      {{ $t("general.confirm-delete-generic") }}
+      <p v-if="deleteTarget" class="mt-4 ml-4">
+        {{ deleteTarget.name || deleteTarget.title || deleteTarget.id }}
+      </p>
+    </v-card-text>
+  </BaseDialog>
+
+  <!-- Bulk Delete Dialog -->
+  <BaseDialog
+    v-model="bulkDeleteDialog"
+    width="650px"
+    :title="$t('general.confirm')"
+    :icon="$globals.icons.alertCircle"
+    color="error"
+    can-confirm
+    @confirm="$emit('bulk-action', 'delete-selected', bulkDeleteTarget)"
+  >
+    <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 || item.title || item.id }}</v-list-item-title>
+            </v-list-item>
+          </template>
+        </v-virtual-scroll>
+      </v-card>
+    </v-card-text>
+  </BaseDialog>
+
+  <BaseCardSectionTitle
+    :icon="icon"
+    section
+    :title="title"
+  />
+
+  <CrudTable
+    :headers="tableHeaders"
+    :table-config="tableConfig"
+    :data="data || []"
+    :bulk-actions="bulkActions"
+    :initial-sort="initialSort"
+    @edit-one="editEventHandler"
+    @delete-one="deleteEventHandler"
+    @bulk-action="handleBulkAction"
+  >
+    <template
+      v-for="slotName in itemSlotNames"
+      #[slotName]="slotProps"
+    >
+      <slot
+        :name="slotName"
+        v-bind="slotProps"
+      />
+    </template>
+    <template #button-row>
+      <BaseButton
+        create
+        @click="createDialog = true"
+      >
+        {{ $t("general.create") }}
+      </BaseButton>
+      <slot name="table-button-row" />
+    </template>
+    <template #button-bottom>
+      <slot name="table-button-bottom" />
+    </template>
+  </CrudTable>
+</template>
+
+<script setup lang="ts">
+import type { TableHeaders, TableConfig, BulkAction } from "~/components/global/CrudTable.vue";
+import type { AutoFormItems } from "~/types/auto-forms";
+
+const slots = useSlots();
+
+const emit = defineEmits<{
+  (e: "deleteOne", id: string): void;
+  (e: "deleteMany", ids: string[]): void;
+  (e: "create-one" | "edit-one", data: any): void;
+  (e: "bulk-action", event: string, items: any[]): void;
+}>();
+
+const tableHeaders = defineModel<TableHeaders[]>("tableHeaders", { required: true });
+const createForm = defineModel<{ items: AutoFormItems; data: Record<string, any> }>("createForm", { required: true });
+const createDialog = defineModel("createDialog", { type: Boolean, default: false });
+
+const editForm = defineModel<{ items: AutoFormItems; data: Record<string, any> }>("editForm", { required: true });
+const editDialog = defineModel("editDialog", { type: Boolean, default: false });
+
+defineProps({
+  icon: {
+    type: String,
+    required: true,
+  },
+  title: {
+    type: String,
+    required: true,
+  },
+  tableConfig: {
+    type: Object as PropType<TableConfig>,
+    default: () => ({
+      hideColumns: false,
+      canExport: true,
+    }),
+  },
+  data: {
+    type: Array as PropType<Array<any>>,
+    required: true,
+  },
+  bulkActions: {
+    type: Array as PropType<BulkAction[]>,
+    required: true,
+  },
+  initialSort: {
+    type: String,
+    default: "name",
+  },
+});
+
+// ============================================================
+// Bulk Action Handler
+function handleBulkAction(event: string, items: any[]) {
+  if (event === "delete-selected") {
+    bulkDeleteEventHandler(items);
+    return;
+  }
+  emit("bulk-action", event, items);
+}
+
+// ============================================================
+// Create & Edit
+const createFormValid = ref(false);
+const editFormValid = ref(false);
+const itemSlotNames = computed(() => Object.keys(slots).filter(slotName => slotName.startsWith("item.")));
+const editEventHandler = (item: any) => {
+  editForm.value.data = { ...item };
+  editDialog.value = true;
+};
+
+// ============================================================
+// Delete Logic
+const deleteTarget = ref<any>(null);
+const deleteDialog = ref(false);
+
+function deleteEventHandler(item: any) {
+  deleteTarget.value = item;
+  deleteDialog.value = true;
+}
+
+// ============================================================
+// Bulk Delete Logic
+const bulkDeleteTarget = ref<Array<any>>([]);
+const bulkDeleteDialog = ref(false);
+
+function bulkDeleteEventHandler(items: Array<any>) {
+  bulkDeleteTarget.value = items;
+  bulkDeleteDialog.value = true;
+  console.log("Bulk Delete Event Handler", items);
+}
+</script>

frontend/components/global/AutoForm.vue

@@ -1,4 +1,5 @@
 <template>
+  <v-form v-model="isValid" validate-on="input">
     <v-card
       :color="color"
       :dark="dark"
@@ -41,7 +42,7 @@
             :hide-details="!inputField.hint"
             :persistent-hint="!!inputField.hint"
             density="comfortable"
-          @change="emitBlur"
+            validate-on="input"
           >
             <template #label>
               <span class="ml-4">
@@ -59,14 +60,12 @@
             :type="inputField.type === fieldTypes.PASSWORD ? 'password' : 'text'"
             variant="solo-filled"
             flat
-          :autofocus="index === 0"
             density="comfortable"
             :label="inputField.label"
             :name="inputField.varName"
             :hint="inputField.hint || ''"
-          :rules="!(inputField.disableUpdate && updateMode) ? [...rulesByKey(inputField.rules as any), ...defaultRules] : []"
+            :rules="!(inputField.disableUpdate && updateMode) ? inputField.rules || [] : []"
-          lazy-validation
+            validate-on="input"
-          @blur="emitBlur"
           />
 
           <!-- Text Area -->
@@ -83,9 +82,8 @@
             :label="inputField.label"
             :name="inputField.varName"
             :hint="inputField.hint || ''"
-          :rules="[...rulesByKey(inputField.rules as any), ...defaultRules]"
+            :rules="!(inputField.disableUpdate && updateMode) ? inputField.rules || [] : []"
-          lazy-validation
+            validate-on="input"
-          @blur="emitBlur"
           />
 
           <!-- Option Select -->
@@ -100,13 +98,13 @@
             :name="inputField.varName"
             :items="inputField.options"
             item-title="text"
-          item-value="text"
+            :item-value="inputField.selectReturnValue || 'text'"
             :return-object="false"
             :hint="inputField.hint"
             density="comfortable"
             persistent-hint
-          lazy-validation
+            :rules="!(inputField.disableUpdate && updateMode) ? inputField.rules || [] : []"
-          @blur="emitBlur"
+            validate-on="input"
           />
 
           <!-- Color Picker -->
@@ -115,97 +113,24 @@
             class="d-flex"
             style="width: 100%"
           >
-          <v-menu offset-y>
+            <InputColor v-model="model[inputField.varName]" />
-            <template #activator="{ props: templateProps }">
-              <v-btn
-                class="my-2 ml-auto"
-                style="min-width: 200px"
-                :color="model[inputField.varName]"
-                dark
-                v-bind="templateProps"
-              >
-                {{ inputField.label }}
-              </v-btn>
-            </template>
-            <v-color-picker
-              v-model="model[inputField.varName]"
-              value="#7417BE"
-              hide-canvas
-              hide-inputs
-              show-swatches
-              class="mx-auto"
-              @input="emitBlur"
-            />
-          </v-menu>
-        </div>
-
-        <!-- Object Type -->
-        <div v-else-if="inputField.type === fieldTypes.OBJECT">
-          <auto-form
-            v-model="model[inputField.varName]"
-            :color="color"
-            :items="(inputField as any).items"
-            @blur="emitBlur"
-          />
-        </div>
-
-        <!-- List Type -->
-        <div v-else-if="inputField.type === fieldTypes.LIST">
-          <div
-            v-for="(item, idx) in model[inputField.varName]"
-            :key="idx"
-          >
-            <p>
-              {{ inputField.label }} {{ idx + 1 }}
-              <span>
-                <BaseButton
-                  class="ml-5"
-                  x-small
-                  delete
-                  @click="removeByIndex(model[inputField.varName], idx)"
-                />
-              </span>
-            </p>
-            <v-divider class="mb-5 mx-2" />
-            <auto-form
-              v-model="model[inputField.varName][idx]"
-              :color="color"
-              :items="(inputField as any).items"
-              @blur="emitBlur"
-            />
-          </div>
-          <v-card-actions>
-            <v-spacer />
-            <BaseButton
-              small
-              @click="model[inputField.varName].push(getTemplate((inputField as any).items))"
-            >
-              {{ $t("general.new") }}
-            </BaseButton>
-          </v-card-actions>
           </div>
         </v-col>
       </v-row>
     </v-card>
+  </v-form>
 </template>
 
 <script lang="ts" setup>
-import { validators } from "@/composables/use-validators";
 import { fieldTypes } from "@/composables/forms";
 import type { AutoFormItems } from "~/types/auto-forms";
 
-const BLUR_EVENT = "blur";
-
-type ValidatorKey = keyof typeof validators;
-
 // Use defineModel for v-model
-const modelValue = defineModel<Record<string, any> | any[]>({
+const model = defineModel<Record<string, any> | any[]>({
   type: [Object, Array],
   required: true,
 });
-
+const isValid = defineModel("isValid", { type: Boolean, default: false });
-// alias to avoid template TS complaining about possible undefined
-const model = modelValue as any;
 
 const props = defineProps({
   updateMode: {
@@ -220,10 +145,6 @@ const props = defineProps({
     type: [Number, String],
     default: "max",
   },
-  globalRules: {
-    default: null,
-    type: Array as () => string[],
-  },
   color: {
     default: null,
     type: String,
@@ -242,31 +163,6 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["blur", "update:modelValue"]);
-
-function rulesByKey(keys?: ValidatorKey[] | null) {
-  if (keys === undefined || keys === null) {
-    return [] as any[];
-  }
-
-  const list: any[] = [];
-  keys.forEach((key) => {
-    const split = key.split(":");
-    const validatorKey = split[0] as ValidatorKey;
-    if (validatorKey in validators) {
-      if (split.length === 1) {
-        list.push((validators as any)[validatorKey]);
-      }
-      else {
-        list.push((validators as any)[validatorKey](split[1] as any));
-      }
-    }
-  });
-  return list;
-}
-
-const defaultRules = computed<any[]>(() => rulesByKey(props.globalRules as any));
-
 // Combined state map for readonly and disabled fields
 const fieldState = computed<Record<string, { readonly: boolean; disabled: boolean }>>(() => {
   const map: Record<string, { readonly: boolean; disabled: boolean }> = {};
@@ -279,25 +175,6 @@ const fieldState = computed<Record<string, { readonly: boolean; disabled: boolea
   });
   return map;
 });
-
-function removeByIndex(list: never[], index: number) {
-  // Removes the item at the index
-  list.splice(index, 1);
-}
-
-function getTemplate(item: AutoFormItems) {
-  const obj = {} as { [key: string]: string };
-
-  item.forEach((field) => {
-    obj[field.varName] = "";
-  });
-
-  return obj;
-}
-
-function emitBlur() {
-  emit(BLUR_EVENT, modelValue.value);
-}
 </script>
 
 <style lang="scss" scoped></style>

frontend/components/global/CrudTable.vue

@@ -8,11 +8,11 @@
         nudge-bottom="6"
         :close-on-content-click="false"
       >
-        <template #activator="{ props }">
+        <template #activator="{ props: activatorProps }">
           <v-btn
             color="accent"
             variant="elevated"
-            v-bind="props"
+            v-bind="activatorProps"
           >
             <v-icon>
               {{ $globals.icons.cog }}
@@ -108,7 +108,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { downloadAsJson } from "~/composables/use-utils";
 
 export interface TableConfig {
@@ -120,7 +120,7 @@ export interface TableHeaders {
   text: string;
   value: string;
   show: boolean;
-  align?: string;
+  align?: "start" | "center" | "end";
   sortable?: boolean;
   sort?: (a: any, b: any) => number;
 }
@@ -131,8 +131,7 @@ export interface BulkAction {
   event: string;
 }
 
-export default defineNuxtComponent({
+const props = defineProps({
-  props: {
   tableConfig: {
     type: Object as () => TableConfig,
     default: () => ({
@@ -160,11 +159,15 @@ export default defineNuxtComponent({
     type: Boolean,
     default: false,
   },
-  },
+});
-  emits: ["delete-one", "edit-one"],
+
-  setup(props, context) {
+const emit = defineEmits<{
+  (e: "delete-one" | "edit-one", item: any): void;
+  (e: "bulk-action", event: string, items: any[]): void;
+}>();
+
 const i18n = useI18n();
-    const sortBy = computed(() => [{
+const sortBy = computed<{ key: string; order: "asc" | "desc" }[]>(() => [{
   key: props.initialSort,
   order: props.initialSortDesc ? "desc" : "asc",
 }]);
@@ -207,7 +210,7 @@ export default defineNuxtComponent({
 
   props.bulkActions.forEach((action) => {
     handlers[action.event] = () => {
-          context.emit(action.event, selected.value);
+      emit("bulk-action", action.event, selected.value);
       // clear selection
       selected.value = [];
     };
@@ -217,20 +220,6 @@ export default defineNuxtComponent({
 });
 
 const search = ref("");
-
-    return {
-      sortBy,
-      selected,
-      localHeaders,
-      filteredHeaders,
-      headersWithoutActions,
-      activeHeaders,
-      bulkActionListener,
-      search,
-      downloadAsJson,
-    };
-  },
-});
 </script>
 
 <style>

frontend/composables/forms/use-field-types.ts

@@ -1,10 +1,8 @@
 export const fieldTypes = {
   TEXT: "text",
   TEXT_AREA: "textarea",
-  LIST: "list",
   SELECT: "select",
-  OBJECT: "object",
   BOOLEAN: "boolean",
-  COLOR: "color",
   PASSWORD: "password",
+  COLOR: "color",
 } as const;

frontend/composables/use-setup/common-settings-form.ts

@@ -1,4 +1,5 @@
 import { fieldTypes } from "../forms";
+import { validators } from "../use-validators";
 import type { AutoFormItems } from "~/types/auto-forms";
 
 export const useCommonSettingsForm = () => {
@@ -11,7 +12,7 @@ export const useCommonSettingsForm = () => {
       hint: i18n.t("group.enable-public-access-description"),
       varName: "makeGroupRecipesPublic",
       type: fieldTypes.BOOLEAN,
-      rules: ["required"],
+      rules: [validators.required],
     },
     {
       section: i18n.t("data-pages.data-management"),
@@ -19,7 +20,7 @@ export const useCommonSettingsForm = () => {
       hint: i18n.t("user-registration.use-seed-data-description"),
       varName: "useSeedData",
       type: fieldTypes.BOOLEAN,
-      rules: ["required"],
+      rules: [validators.required],
     },
   ]);
 

frontend/composables/use-users/user-form.ts

@@ -1,4 +1,5 @@
 import { fieldTypes } from "../forms";
+import { validators } from "../use-validators";
 import type { AutoFormItems } from "~/types/auto-forms";
 
 export const useUserForm = () => {
@@ -10,26 +11,26 @@ export const useUserForm = () => {
       label: i18n.t("user.user-name"),
       varName: "username",
       type: fieldTypes.TEXT,
-      rules: ["required"],
+      rules: [validators.required],
     },
     {
       label: i18n.t("user.full-name"),
       varName: "fullName",
       type: fieldTypes.TEXT,
-      rules: ["required"],
+      rules: [validators.required],
     },
     {
       label: i18n.t("user.email"),
       varName: "email",
       type: fieldTypes.TEXT,
-      rules: ["required"],
+      rules: [validators.required],
     },
     {
       label: i18n.t("user.password"),
       varName: "password",
       disableUpdate: true,
       type: fieldTypes.PASSWORD,
-      rules: ["required", "minLength:8"],
+      rules: [validators.required, validators.minLength(8)],
     },
     {
       label: i18n.t("user.authentication-method"),
@@ -44,37 +45,37 @@ export const useUserForm = () => {
       label: i18n.t("user.administrator"),
       varName: "admin",
       type: fieldTypes.BOOLEAN,
-      rules: ["required"],
+      rules: [validators.required],
     },
     {
       label: i18n.t("user.user-can-invite-other-to-group"),
       varName: "canInvite",
       type: fieldTypes.BOOLEAN,
-      rules: ["required"],
+      rules: [validators.required],
     },
     {
       label: i18n.t("user.user-can-manage-group"),
       varName: "canManage",
       type: fieldTypes.BOOLEAN,
-      rules: ["required"],
+      rules: [validators.required],
     },
     {
       label: i18n.t("user.user-can-organize-group-data"),
       varName: "canOrganize",
       type: fieldTypes.BOOLEAN,
-      rules: ["required"],
+      rules: [validators.required],
     },
     {
       label: i18n.t("user.user-can-manage-household"),
       varName: "canManageHousehold",
       type: fieldTypes.BOOLEAN,
-      rules: ["required"],
+      rules: [validators.required],
     },
     {
       label: i18n.t("user.enable-advanced-features"),
       varName: "advanced",
       type: fieldTypes.BOOLEAN,
-      rules: ["required"],
+      rules: [validators.required],
     },
   ];
 

frontend/lang/messages/en-US.json

@@ -1445,6 +1445,6 @@
     "invalid-url": "Must Be A Valid URL",
     "no-whitespace": "No Whitespace Allowed",
     "min-length": "Must Be At Least {min} Characters",
-    "max-length": "Must Be At Most {max} Characters"
+    "max-length": "Must Be At Most {max} Character|Must Be At Most {max} Characters"
   }
 }

frontend/lib/validators/inputs.ts

@@ -22,7 +22,7 @@ export function whitespace(v: string | null | undefined) {
 
 export function url(v: string | undefined | null) {
   const i18n = useGlobalI18n();
-  return (!!v && URL_REGEX.test(v)) || i18n.t("validators.invalid-url");
+  return (!!v && URL_REGEX.test(v) && (v.startsWith("http://") || v.startsWith("https://"))) || i18n.t("validators.invalid-url");
 }
 
 export function urlOptional(v: string | undefined | null) {

frontend/pages/admin/manage/groups/index.vue

@@ -95,6 +95,7 @@
 <script lang="ts">
 import { fieldTypes } from "~/composables/forms";
 import { useGroups } from "~/composables/use-groups";
+import { validators } from "~/composables/use-validators";
 import type { GroupInDB } from "~/lib/api/types/user";
 
 export default defineNuxtComponent({
@@ -136,7 +137,7 @@ export default defineNuxtComponent({
             label: i18n.t("group.group-name"),
             varName: "name",
             type: fieldTypes.TEXT,
-            rules: ["required"],
+            rules: [validators.required],
           },
         ],
         data: {

frontend/pages/admin/manage/households/index.vue

@@ -160,7 +160,7 @@ const createHouseholdForm = reactive({
       label: i18n.t("household.household-name"),
       varName: "name",
       type: fieldTypes.TEXT,
-      rules: ["required"],
+      rules: [validators.required],
     },
   ],
   data: {

frontend/pages/group/data/categories.vue

@@ -1,135 +1,36 @@
 <template>
   <div>
-    <!-- Create Dialog -->
+    <GroupDataPage
-    <BaseDialog
-      v-model="state.createDialog"
-      :title="$t('data-pages.categories.new-category')"
       :icon="$globals.icons.categories"
-      can-submit
-      @submit="createCategory"
-    >
-      <v-card-text>
-        <v-form ref="domNewCategoryForm">
-          <v-text-field
-            v-model="createTarget.name"
-            autofocus
-            :label="$t('general.name')"
-            :rules="[validators.required]"
-          />
-        </v-form>
-      </v-card-text>
-    </BaseDialog>
-
-    <!-- Edit Dialog -->
-    <BaseDialog
-      v-model="state.editDialog"
-      :icon="$globals.icons.categories"
-      :title="$t('data-pages.categories.edit-category')"
-      :submit-text="$t('general.save')"
-      can-submit
-      @submit="editSaveCategory"
-    >
-      <v-card-text v-if="editTarget">
-        <div class="mt-4">
-          <v-text-field
-            v-model="editTarget.name"
-            :label="$t('general.name')"
-          />
-        </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="deleteCategory"
-    >
-      <v-card-text>
-        {{ $t("general.confirm-delete-generic") }}
-        <p
-          v-if="deleteTarget"
-          class="mt-4 ml-4"
-        >
-          {{ deleteTarget.name }}
-        </p>
-      </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>
-
-    <!-- Data Table -->
-    <BaseCardSectionTitle
-      :icon="$globals.icons.categories"
-      section
       :title="$t('data-pages.categories.category-data')"
-    />
+      :table-headers="tableHeaders"
-    <CrudTable
-      v-model:headers="tableHeaders"
       :table-config="tableConfig"
-      :data="categories || []"
+      :data="categoryStore.store.value || []"
       :bulk-actions="[{ icon: $globals.icons.delete, text: $t('general.delete'), event: 'delete-selected' }]"
-      initial-sort="name"
+      :create-form="createForm"
-      @delete-one="deleteEventHandler"
+      :edit-form="editForm"
-      @edit-one="editEventHandler"
+      @create-one="handleCreate"
-      @delete-selected="bulkDeleteEventHandler"
+      @edit-one="handleEdit"
-    >
+      @delete-one="categoryStore.actions.deleteOne"
-      <template #button-row>
+      @bulk-action="handleBulkAction"
-        <BaseButton
+    />
-          create
-          @click="state.createDialog = true"
-        >
-          {{ $t("general.create") }}
-        </BaseButton>
-      </template>
-    </CrudTable>
   </div>
 </template>
 
-<script lang="ts">
+<script  setup lang="ts">
+import { useCategoryStore } from "~/composables/store";
 import { validators } from "~/composables/use-validators";
-import { useCategoryStore, useCategoryData } from "~/composables/store";
+import { fieldTypes } from "~/composables/forms";
+import type { AutoFormItems } from "~/types/auto-forms";
 import type { RecipeCategory } from "~/lib/api/types/recipe";
+import type { TableHeaders, TableConfig } from "~/components/global/CrudTable.vue";
 
-export default defineNuxtComponent({
-  setup() {
 const i18n = useI18n();
-    const tableConfig = {
+const tableConfig: TableConfig = {
   hideColumns: true,
   canExport: true,
 };
-    const tableHeaders = [
+const tableHeaders: TableHeaders[] = [
   {
     text: i18n.t("general.id"),
     value: "id",
@@ -142,104 +43,49 @@ export default defineNuxtComponent({
     sortable: true,
   },
 ];
-
-    const state = reactive({
-      createDialog: false,
-      editDialog: false,
-      deleteDialog: false,
-      bulkDeleteDialog: false,
-    });
-    const categoryData = useCategoryData();
 const categoryStore = useCategoryStore();
 
 // ============================================================
-    // Create Category
+// Form items (shared)
-
+const formItems = [
-    async function createCategory() {
+  {
-      await categoryStore.actions.createOne({
+    label: i18n.t("general.name"),
-        name: categoryData.data.name,
+    varName: "name",
-        slug: "",
+    type: fieldTypes.TEXT,
-      });
+    rules: [validators.required],
-      categoryData.reset();
-      state.createDialog = false;
-    }
-
-    // ============================================================
-    // Edit Category
-
-    const editTarget = ref<RecipeCategory | null>(null);
-
-    function editEventHandler(item: RecipeCategory) {
-      state.editDialog = true;
-      editTarget.value = item;
-    }
-
-    async function editSaveCategory() {
-      if (!editTarget.value) {
-        return;
-      }
-      await categoryStore.actions.updateOne(editTarget.value);
-      state.editDialog = false;
-    }
-
-    // ============================================================
-    // Delete Category
-
-    const deleteTarget = ref<RecipeCategory | null>(null);
-
-    function deleteEventHandler(item: RecipeCategory) {
-      state.deleteDialog = true;
-      deleteTarget.value = item;
-    }
-
-    async function deleteCategory() {
-      if (!deleteTarget.value || deleteTarget.value.id === undefined) {
-        return;
-      }
-      await categoryStore.actions.deleteOne(deleteTarget.value.id);
-      state.deleteDialog = false;
-    }
-
-    // ============================================================
-    // Bulk Delete Category
-    const bulkDeleteTarget = ref<RecipeCategory[]>([]);
-    function bulkDeleteEventHandler(selection: RecipeCategory[]) {
-      bulkDeleteTarget.value = selection;
-      state.bulkDeleteDialog = true;
-    }
-
-    async function deleteSelected() {
-      const ids = bulkDeleteTarget.value.map(item => item.id).filter(id => !!id);
-      await categoryStore.actions.deleteMany(ids);
-      bulkDeleteTarget.value = [];
-    }
-
-    return {
-      state,
-      tableConfig,
-      tableHeaders,
-      categories: categoryStore.store,
-      validators,
-
-      // create
-      createTarget: categoryData.data,
-      createCategory,
-
-      // edit
-      editTarget,
-      editEventHandler,
-      editSaveCategory,
-
-      // delete
-      deleteTarget,
-      deleteEventHandler,
-      deleteCategory,
-
-      // bulk delete
-      bulkDeleteTarget,
-      bulkDeleteEventHandler,
-      deleteSelected,
-    };
   },
+] as AutoFormItems;
+
+// ============================================================
+// Create
+const createForm = reactive({
+  items: formItems,
+  data: { name: "" } as RecipeCategory,
 });
+
+async function handleCreate(createFormData: RecipeCategory) {
+  await categoryStore.actions.createOne(createFormData);
+  createForm.data.name = "";
+}
+
+// ============================================================
+// Edit
+const editForm = reactive({
+  items: formItems,
+  data: {} as RecipeCategory,
+});
+
+async function handleEdit(editFormData: RecipeCategory) {
+  await categoryStore.actions.updateOne(editFormData);
+  editForm.data = {} as RecipeCategory;
+}
+
+// ============================================================
+// Bulk Actions
+async function handleBulkAction(event: string, items: RecipeCategory[]) {
+  if (event === "delete-selected") {
+    const ids = items.filter(item => item.id != null).map(item => item.id!);
+    await categoryStore.actions.deleteMany(ids);
+  }
+}
 </script>

frontend/pages/group/data/foods.vue

@@ -79,170 +79,15 @@
       </v-card-text>
     </BaseDialog>
 
-    <!-- Create Dialog -->
-    <BaseDialog
-      v-model="createDialog"
-      :icon="$globals.icons.foods"
-      :title="$t('data-pages.foods.create-food')"
-      :submit-icon="$globals.icons.save"
-      :submit-text="$t('general.save')"
-      can-submit
-      @submit="createFood"
-    >
-      <v-card-text>
-        <v-form ref="domNewFoodForm">
-          <v-text-field
-            v-model="createTarget.name"
-            autofocus
-            :label="$t('general.name')"
-            :hint="$t('data-pages.foods.example-food-singular')"
-            :rules="[validators.required]"
-          />
-          <v-text-field
-            v-model="createTarget.pluralName"
-            :label="$t('general.plural-name')"
-            :hint="$t('data-pages.foods.example-food-plural')"
-          />
-          <v-text-field
-            v-model="createTarget.description"
-            :label="$t('recipe.description')"
-          />
-          <v-autocomplete
-            v-model="createTarget.labelId"
-            clearable
-            :items="allLabels"
-            :custom-filter="normalizeFilter"
-            item-value="id"
-            item-title="name"
-            :label="$t('data-pages.foods.food-label')"
-          />
-          <v-checkbox
-            v-model="createTarget.onHand"
-            hide-details
-            :label="$t('tool.on-hand')"
-          />
-          <p class="text-caption mt-1">
-            {{ $t("data-pages.foods.on-hand-checkbox-label") }}
-          </p>
-        </v-form>
-      </v-card-text>
-    </BaseDialog>
-
     <!-- Alias Sub-Dialog -->
     <RecipeDataAliasManagerDialog
-      v-if="editTarget"
+      v-if="editForm.data"
       v-model="aliasManagerDialog"
-      :data="editTarget"
+      :data="editForm.data"
       @submit="updateFoodAlias"
       @cancel="aliasManagerDialog = false"
     />
 
-    <!-- Edit Dialog -->
-    <BaseDialog
-      v-model="editDialog"
-      :icon="$globals.icons.foods"
-      :title="$t('data-pages.foods.edit-food')"
-      :submit-icon="$globals.icons.save"
-      :submit-text="$t('general.save')"
-      can-submit
-      @submit="editSaveFood"
-    >
-      <v-card-text v-if="editTarget">
-        <v-form ref="domEditFoodForm">
-          <v-text-field
-            v-model="editTarget.name"
-            :label="$t('general.name')"
-            :hint="$t('data-pages.foods.example-food-singular')"
-            :rules="[validators.required]"
-          />
-          <v-text-field
-            v-model="editTarget.pluralName"
-            :label="$t('general.plural-name')"
-            :hint="$t('data-pages.foods.example-food-plural')"
-          />
-          <v-text-field
-            v-model="editTarget.description"
-            :label="$t('recipe.description')"
-          />
-          <v-autocomplete
-            v-model="editTarget.labelId"
-            clearable
-            :items="allLabels"
-            :custom-filter="normalizeFilter"
-            item-value="id"
-            item-title="name"
-            :label="$t('data-pages.foods.food-label')"
-          />
-          <v-checkbox
-            v-model="editTarget.onHand"
-            hide-details
-            :label="$t('tool.on-hand')"
-          />
-          <p class="text-caption mt-1">
-            {{ $t("data-pages.foods.on-hand-checkbox-label") }}
-          </p>
-        </v-form>
-      </v-card-text>
-      <template #custom-card-action>
-        <BaseButton
-          edit
-          @click="aliasManagerEventHandler"
-        >
-          {{ $t('data-pages.manage-aliases') }}
-        </BaseButton>
-      </template>
-    </BaseDialog>
-
-    <!-- Delete Dialog -->
-    <BaseDialog
-      v-model="deleteDialog"
-      :title="$t('general.confirm')"
-      :icon="$globals.icons.alertCircle"
-      color="error"
-      can-confirm
-      @confirm="deleteFood"
-    >
-      <v-card-text>
-        {{ $t("general.confirm-delete-generic") }}
-        <p
-          v-if="deleteTarget"
-          class="mt-4 ml-4"
-        >
-          {{ deleteTarget.name }}
-        </p>
-      </v-card-text>
-    </BaseDialog>
-
-    <!-- Bulk Delete Dialog -->
-    <BaseDialog
-      v-model="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>
-
     <!-- Bulk Assign Labels Dialog -->
     <BaseDialog
       v-model="bulkAssignLabelDialog"
@@ -282,33 +127,24 @@
       </v-card-text>
     </BaseDialog>
 
-    <!-- Data Table -->
+    <GroupDataPage
-    <BaseCardSectionTitle
       :icon="$globals.icons.foods"
-      section
       :title="$t('data-pages.foods.food-data')"
-    />
+      :table-headers="tableHeaders"
-    <CrudTable
-      v-model:headers="tableHeaders"
       :table-config="tableConfig"
       :data="foods || []"
       :bulk-actions="[
         { icon: $globals.icons.delete, text: $t('general.delete'), event: 'delete-selected' },
         { icon: $globals.icons.tags, text: $t('data-pages.labels.assign-label'), event: 'assign-selected' },
       ]"
-      initial-sort="createdAt"
+      :create-form="createForm"
-      initial-sort-desc
+      :edit-form="editForm"
-      @delete-one="deleteEventHandler"
+      @create-one="handleCreate"
-      @edit-one="editEventHandler"
+      @edit-one="handleEdit"
-      @create-one="createEventHandler"
+      @delete-one="foodStore.actions.deleteOne"
-      @delete-selected="bulkDeleteEventHandler"
+      @bulk-action="handleBulkAction"
-      @assign-selected="bulkAssignEventHandler"
     >
-      <template #button-row>
+      <template #table-button-row>
-        <BaseButton
-          create
-          @click="createDialog = true"
-        />
         <BaseButton @click="mergeDialog = true">
           <template #icon>
             {{ $globals.icons.externalLink }}
@@ -316,6 +152,7 @@
           {{ $t('data-pages.combine') }}
         </BaseButton>
       </template>
+
       <template #[`item.label`]="{ item }">
         <MultiPurposeLabel
           v-if="item.label"
@@ -324,15 +161,18 @@
           {{ item.label.name }}
         </MultiPurposeLabel>
       </template>
+
       <template #[`item.onHand`]="{ item }">
         <v-icon :color="item.onHand ? 'success' : undefined">
           {{ item.onHand ? $globals.icons.check : $globals.icons.close }}
         </v-icon>
       </template>
+
       <template #[`item.createdAt`]="{ item }">
         {{ item.createdAt ? $d(new Date(item.createdAt)) : '' }}
       </template>
-      <template #button-bottom>
+
+      <template #table-button-bottom>
         <BaseButton @click="seedDialog = true">
           <template #icon>
             {{ $globals.icons.database }}
@@ -340,11 +180,20 @@
           {{ $t('data-pages.seed') }}
         </BaseButton>
       </template>
-    </CrudTable>
+
+      <template #edit-dialog-custom-action>
+        <BaseButton
+          edit
+          @click="aliasManagerDialog = true"
+        >
+          {{ $t('data-pages.manage-aliases') }}
+        </BaseButton>
+      </template>
+    </GroupDataPage>
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import type { LocaleObject } from "@nuxtjs/i18n";
 import RecipeDataAliasManagerDialog from "~/components/Domain/Recipe/RecipeDataAliasManagerDialog.vue";
 import { validators } from "~/composables/use-validators";
@@ -355,7 +204,9 @@ import { useLocales } from "~/composables/use-locales";
 import { normalizeFilter } from "~/composables/use-utils";
 import { useFoodStore, useLabelStore } from "~/composables/store";
 import type { MultiPurposeLabelOut } from "~/lib/api/types/labels";
-import type { VForm } from "~/types/auto-forms";
+import type { AutoFormItems } from "~/types/auto-forms";
+import type { TableHeaders, TableConfig } from "~/components/global/CrudTable.vue";
+import { fieldTypes } from "~/composables/forms";
 
 interface CreateIngredientFoodWithOnHand extends CreateIngredientFood {
   onHand: boolean;
@@ -365,18 +216,14 @@ interface CreateIngredientFoodWithOnHand extends CreateIngredientFood {
 interface IngredientFoodWithOnHand extends IngredientFood {
   onHand: boolean;
 }
-
-export default defineNuxtComponent({
-  components: { MultiPurposeLabel, RecipeDataAliasManagerDialog },
-  setup() {
 const userApi = useUserApi();
 const i18n = useI18n();
 const auth = useMealieAuth();
-    const tableConfig = {
+const tableConfig: TableConfig = {
   hideColumns: true,
   canExport: true,
 };
-    const tableHeaders = [
+const tableHeaders: TableHeaders[] = [
   {
     text: i18n.t("general.id"),
     value: "id",
@@ -431,36 +278,66 @@ export default defineNuxtComponent({
   return { ...food, onHand } as IngredientFoodWithOnHand;
 }));
 
-    // ===============================================================
+// ============================================================
-    // Food Creator
+// Labels
+const { store: allLabels } = useLabelStore();
+const labelOptions = computed(() => allLabels.value.map(label => ({ text: label.name, value: label.id })) || []);
 
-    const domNewFoodForm = ref<VForm>();
+// ============================================================
-    const createDialog = ref(false);
+// Form items (shared)
-    const createTarget = ref<CreateIngredientFoodWithOnHand>({
+const formItems = computed<AutoFormItems>(() => [
-      name: "",
+  {
-      onHand: false,
+    label: i18n.t("general.name"),
-      householdsWithIngredientFood: [],
+    varName: "name",
+    type: fieldTypes.TEXT,
+    rules: [validators.required],
+  },
+  {
+    label: i18n.t("general.plural-name"),
+    varName: "pluralName",
+    type: fieldTypes.TEXT,
+  },
+  {
+    label: i18n.t("recipe.description"),
+    varName: "description",
+    type: fieldTypes.TEXT,
+  },
+  {
+    label: i18n.t("data-pages.foods.food-label"),
+    varName: "labelId",
+    type: fieldTypes.SELECT,
+    options: labelOptions.value,
+  },
+  {
+    label: i18n.t("tool.on-hand"),
+    varName: "onHand",
+    type: fieldTypes.BOOLEAN,
+    hint: i18n.t("data-pages.foods.on-hand-checkbox-label"),
+  },
+]);
+
+// ===============================================================
+// Create
+
+const createForm = reactive({
+  get items() {
+    return formItems.value;
+  },
+  data: { name: "", onHand: false, householdsWithIngredientFood: [] } as CreateIngredientFoodWithOnHand,
 });
 
-    function createEventHandler() {
+async function handleCreate() {
-      createDialog.value = true;
+  if (!createForm.data || !createForm.data.name) {
-    }
-
-    async function createFood() {
-      if (!createTarget.value || !createTarget.value.name) {
     return;
   }
 
-      if (createTarget.value.onHand) {
+  if (createForm.data.onHand) {
-        createTarget.value.householdsWithIngredientFood = [userHousehold.value];
+    createForm.data.householdsWithIngredientFood = [userHousehold.value];
   }
 
   // @ts-expect-error the createOne function erroneously expects an id because it uses the IngredientFood type
-      await foodStore.actions.createOne(createTarget.value);
+  await foodStore.actions.createOne(createForm.data);
-      createDialog.value = false;
+  createForm.data = {
-
-      domNewFoodForm.value?.reset();
-      createTarget.value = {
     name: "",
     onHand: false,
     householdsWithIngredientFood: [],
@@ -468,84 +345,56 @@ export default defineNuxtComponent({
 }
 
 // ===============================================================
-    // Food Editor
+// Edit
 
-    const editDialog = ref(false);
+const editForm = reactive({
-    const editTarget = ref<IngredientFoodWithOnHand | null>(null);
+  get items() {
+    return formItems.value;
+  },
+  data: {} as IngredientFoodWithOnHand,
+});
 
-    function editEventHandler(item: IngredientFoodWithOnHand) {
+async function handleEdit() {
-      editTarget.value = item;
+  if (!editForm.data) {
-      editTarget.value.onHand = item.householdsWithIngredientFood?.includes(userHousehold.value) || false;
-      editDialog.value = true;
-    }
-
-    async function editSaveFood() {
-      if (!editTarget.value) {
     return;
   }
-      if (editTarget.value.onHand && !editTarget.value.householdsWithIngredientFood?.includes(userHousehold.value)) {
+  if (!editForm.data.householdsWithIngredientFood) {
-        if (!editTarget.value.householdsWithIngredientFood) {
+    editForm.data.householdsWithIngredientFood = [];
-          editTarget.value.householdsWithIngredientFood = [userHousehold.value];
-        }
-        else {
-          editTarget.value.householdsWithIngredientFood.push(userHousehold.value);
-        }
-      }
-      else if (!editTarget.value.onHand && editTarget.value.householdsWithIngredientFood?.includes(userHousehold.value)) {
-        editTarget.value.householdsWithIngredientFood = editTarget.value.householdsWithIngredientFood.filter(
-          household => household !== userHousehold.value,
-        );
   }
 
-      await foodStore.actions.updateOne(editTarget.value);
+  if (editForm.data.onHand && !editForm.data.householdsWithIngredientFood.includes(userHousehold.value)) {
-      editDialog.value = false;
+    editForm.data.householdsWithIngredientFood.push(userHousehold.value);
+  }
+  else if (!editForm.data.onHand && editForm.data.householdsWithIngredientFood.includes(userHousehold.value)) {
+    const idx = editForm.data.householdsWithIngredientFood.indexOf(userHousehold.value);
+    if (idx !== -1) editForm.data.householdsWithIngredientFood.splice(idx, 1);
   }
 
-    // ===============================================================
+  await foodStore.actions.updateOne(editForm.data);
-    // Food Delete
+  editForm.data = {} as IngredientFoodWithOnHand;
-
-    const deleteDialog = ref(false);
-    const deleteTarget = ref<IngredientFoodWithOnHand | null>(null);
-    function deleteEventHandler(item: IngredientFoodWithOnHand) {
-      deleteTarget.value = item;
-      deleteDialog.value = true;
-    }
-    async function deleteFood() {
-      if (!deleteTarget.value) {
-        return;
 }
 
-      await foodStore.actions.deleteOne(deleteTarget.value.id);
+// ============================================================
-      deleteDialog.value = false;
+// Bulk Actions
-    }
+async function handleBulkAction(event: string, items: IngredientFoodWithOnHand[]) {
-
+  if (event === "delete-selected") {
-    const bulkDeleteDialog = ref(false);
+    const ids = items.map(item => item.id);
-    const bulkDeleteTarget = ref<IngredientFoodWithOnHand[]>([]);
-
-    function bulkDeleteEventHandler(selection: IngredientFoodWithOnHand[]) {
-      bulkDeleteTarget.value = selection;
-      bulkDeleteDialog.value = true;
-    }
-
-    async function deleteSelected() {
-      const ids = bulkDeleteTarget.value.map(item => item.id);
     await foodStore.actions.deleteMany(ids);
-      bulkDeleteTarget.value = [];
+  }
+  else if (event === "assign-selected") {
+    bulkAssignEventHandler(items);
+  }
 }
 
 // ============================================================
 // Alias Manager
 
 const aliasManagerDialog = ref(false);
-    function aliasManagerEventHandler() {
-      aliasManagerDialog.value = true;
-    }
-
 function updateFoodAlias(newAliases: IngredientFoodAlias[]) {
-      if (!editTarget.value) {
+  if (!editForm.data) {
     return;
   }
-      editTarget.value.aliases = newAliases;
+  editForm.data.aliases = newAliases;
   aliasManagerDialog.value = false;
 }
 
@@ -572,11 +421,6 @@ export default defineNuxtComponent({
   }
 }
 
-    // ============================================================
-    // Labels
-
-    const { store: allLabels } = useLabelStore();
-
 // ============================================================
 // Seed
 
@@ -624,56 +468,4 @@ export default defineNuxtComponent({
   bulkAssignLabelId.value = undefined;
   foodStore.actions.refresh();
 }
-
-    return {
-      tableConfig,
-      tableHeaders,
-      foods,
-      allLabels,
-      validators,
-      normalizeFilter,
-      // Create
-      createDialog,
-      domNewFoodForm,
-      createEventHandler,
-      createFood,
-      createTarget,
-      // Edit
-      editDialog,
-      editEventHandler,
-      editSaveFood,
-      editTarget,
-      // Delete
-      deleteEventHandler,
-      deleteDialog,
-      deleteFood,
-      deleteTarget,
-      bulkDeleteDialog,
-      bulkDeleteTarget,
-      bulkDeleteEventHandler,
-      deleteSelected,
-      // Alias Manager
-      aliasManagerDialog,
-      aliasManagerEventHandler,
-      updateFoodAlias,
-      // Merge
-      canMerge,
-      mergeFoods,
-      mergeDialog,
-      fromFood,
-      toFood,
-      // Seed Data
-      locale,
-      locales,
-      seedDialog,
-      seedDatabase,
-      // Bulk Assign Labels
-      bulkAssignLabelDialog,
-      bulkAssignTarget,
-      bulkAssignLabelId,
-      bulkAssignEventHandler,
-      assignSelected,
-    };
-  },
-});
 </script>

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 -->
+    <GroupDataPage
-    <BaseCardSectionTitle
       :icon="$globals.icons.tags"
-      section
       :title="$t('data-pages.labels.labels')"
-    />
+      :table-headers="tableHeaders"
-    <CrudTable
-      v-model: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"
+      :create-form="createForm"
-      @delete-one="deleteEventHandler"
+      :edit-form="editForm"
-      @edit-one="editEventHandler"
+      @create-one="handleCreate"
-      @delete-selected="bulkDeleteEventHandler"
+      @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,31 +77,30 @@
           {{ $t('data-pages.seed') }}
         </BaseButton>
       </template>
-    </CrudTable>
+    </GroupDataPage>
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import type { LocaleObject } from "@nuxtjs/i18n";
 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 tableConfig = {
+const tableConfig: TableConfig = {
   hideColumns: true,
   canExport: true,
 };
-    const tableHeaders = [
+const tableHeaders: TableHeaders[] = [
   {
     text: i18n.t("general.id"),
     value: "id",
@@ -214,77 +114,58 @@ export default defineNuxtComponent({
   },
 ];
 
-    const state = reactive({
-      createDialog: false,
-      editDialog: false,
-      deleteDialog: false,
-      bulkDeleteDialog: false,
-    });
-
-    // ============================================================
-    // Labels
-
-    const labelData = useLabelData();
 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 createLabel() {
+async function handleCreate(createFormData: MultiPurposeLabelSummary) {
-      await labelStore.actions.createOne(labelData.data);
+  await labelStore.actions.createOne(createFormData);
-      labelData.reset();
+  createForm.data = { name: "", color: "#7417BE" } as MultiPurposeLabelSummary;
-      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 editForm = reactive({
+  items: formItems,
+  data: {} as MultiPurposeLabelSummary,
+});
 
-    const editLabel = ref<MultiPurposeLabelSummary | null>(null);
+async function handleEdit(editFormData: MultiPurposeLabelSummary) {
-
+  await labelStore.actions.updateOne(editFormData);
-    function editEventHandler(item: MultiPurposeLabelSummary) {
+  editForm.data = {} as MultiPurposeLabelSummary;
-      state.editDialog = true;
-      editLabel.value = item;
-
-      if (!editLabel.value.color) {
-        editLabel.value.color = "#959595";
-      }
 }
 
-    async function editSaveLabel() {
+// ============================================================
-      if (!editLabel.value) {
+// Bulk Actions
-        return;
+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);
   }
-      await labelStore.actions.updateOne(editLabel.value);
-      state.editDialog = false;
 }
 
 // ============================================================
@@ -293,16 +174,12 @@ export default defineNuxtComponent({
 const seedDialog = ref(false);
 const locale = ref("");
 
-    const { locales: LOCALES, locale: currentLocale } = useLocales();
+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 });
 
@@ -310,38 +187,4 @@ export default defineNuxtComponent({
     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,
-    };
-  },
-});
 </script>

frontend/pages/group/data/recipe-actions.vue

@@ -1,160 +1,38 @@
 <template>
   <div>
-    <!-- Create Dialog -->
+    <GroupDataPage
-    <BaseDialog
+      :icon="$globals.icons.categories"
-      v-model="state.createDialog"
+      :title="$t('data-pages.categories.category-data')"
-      :title="$t('data-pages.recipe-actions.new-recipe-action')"
+      :table-headers="tableHeaders"
-      :icon="$globals.icons.linkVariantPlus"
-      can-submit
-      @submit="createAction"
-    >
-      <v-card-text>
-        <v-form ref="domNewActionForm">
-          <v-text-field
-            v-model="createTarget.title"
-            autofocus
-            :label="$t('general.title')"
-            :rules="[validators.required]"
-          />
-          <v-text-field
-            v-model="createTarget.url"
-            :label="$t('general.url')"
-            :rules="[validators.required]"
-          />
-          <v-select
-            v-model="createTarget.actionType"
-            :items="actionTypeOptions"
-            :label="$t('data-pages.recipe-actions.action-type')"
-            :rules="[validators.required]"
-          />
-        </v-form>
-      </v-card-text>
-    </BaseDialog>
-
-    <!-- Edit Dialog -->
-    <BaseDialog
-      v-model="state.editDialog"
-      :icon="$globals.icons.linkVariantPlus"
-      :title="$t('data-pages.recipe-actions.edit-recipe-action')"
-      :submit-text="$t('general.save')"
-      can-submit
-      @submit="editSaveAction"
-    >
-      <v-card-text v-if="editTarget">
-        <div class="mt-4">
-          <v-text-field
-            v-model="editTarget.title"
-            :label="$t('general.title')"
-          />
-        </div>
-        <div class="mt-4">
-          <v-text-field
-            v-model="editTarget.url"
-            :label="$t('general.url')"
-          />
-        </div>
-        <div class="mt-4">
-          <v-select
-            v-model="editTarget.actionType"
-            :items="actionTypeOptions"
-            :label="$t('data-pages.recipe-actions.action-type')"
-          />
-        </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="deleteAction"
-    >
-      <v-card-text>
-        {{ $t("general.confirm-delete-generic") }}
-        <p
-          v-if="deleteTarget"
-          class="mt-4 ml-4"
-        >
-          {{ deleteTarget.title }}
-        </p>
-      </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.title }}</v-list-item-title>
-              </v-list-item>
-            </template>
-          </v-virtual-scroll>
-        </v-card>
-      </v-card-text>
-    </BaseDialog>
-
-    <!-- Data Table -->
-    <BaseCardSectionTitle
-      :icon="$globals.icons.linkVariantPlus"
-      section
-      :title="$t('data-pages.recipe-actions.recipe-actions-data')"
-    />
-    <CrudTable
-      v-model:headers="tableHeaders"
       :table-config="tableConfig"
-      :data="actions || []"
+      :data="actionStore.recipeActions.value || []"
       :bulk-actions="[{ icon: $globals.icons.delete, text: $t('general.delete'), event: 'delete-selected' }]"
+      :create-form="createForm"
+      :edit-form="editForm"
       initial-sort="title"
-      @delete-one="deleteEventHandler"
+      @create-one="handleCreate"
-      @edit-one="editEventHandler"
+      @edit-one="handleEdit"
-      @delete-selected="bulkDeleteEventHandler"
+      @delete-one="actionStore.actions.deleteOne"
-    >
+      @bulk-action="handleBulkAction"
-      <template #button-row>
+    />
-        <BaseButton
-          create
-          @click="state.createDialog = true"
-        >
-          {{ $t("general.create") }}
-        </BaseButton>
-      </template>
-    </CrudTable>
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { validators } from "~/composables/use-validators";
-import { useGroupRecipeActions, useGroupRecipeActionData } from "~/composables/use-group-recipe-actions";
+import { useGroupRecipeActions } from "~/composables/use-group-recipe-actions";
 import type { GroupRecipeActionOut } from "~/lib/api/types/household";
+import type { TableHeaders, TableConfig } from "~/components/global/CrudTable.vue";
+import type { AutoFormItems } from "~/types/auto-forms";
+import { fieldTypes } from "~/composables/forms";
 
-export default defineNuxtComponent({
-  setup() {
 const i18n = useI18n();
 
-    const tableConfig = {
+const tableConfig: TableConfig = {
   hideColumns: true,
   canExport: true,
 };
-    const tableHeaders = [
+const tableHeaders: TableHeaders[] = [
   {
     text: i18n.t("general.id"),
     value: "id",
@@ -179,108 +57,65 @@ export default defineNuxtComponent({
   },
 ];
 
-    const state = reactive({
-      createDialog: false,
-      editDialog: false,
-      deleteDialog: false,
-      bulkDeleteDialog: false,
-    });
-
-    const actionData = useGroupRecipeActionData();
 const actionStore = useGroupRecipeActions(null, null);
-    const actionTypeOptions = ["link", "post"];
 
 // ============================================================
-    // Create Action
+// Form items (shared)
+const formItems: AutoFormItems = [
+  {
+    label: i18n.t("general.title"),
+    varName: "title",
+    type: fieldTypes.TEXT,
+    rules: [validators.required],
+  },
+  {
+    label: i18n.t("general.url"),
+    varName: "url",
+    type: fieldTypes.TEXT,
+    rules: [validators.required, validators.url],
+  },
+  {
+    label: i18n.t("data-pages.recipe-actions.action-type"),
+    varName: "actionType",
+    type: fieldTypes.SELECT,
+    options: [{ text: "link" }, { text: "post" }],
+    rules: [validators.required],
+  },
+];
 
-    async function createAction() {
+// ============================================================
-      await actionStore.actions.createOne({
+// Create
-        actionType: actionData.data.actionType,
+
-        title: actionData.data.title,
+const createForm = reactive({
-        url: actionData.data.url,
+  items: formItems,
-      } as GroupRecipeActionOut);
+  data: {} as GroupRecipeActionOut,
-      actionData.reset();
+});
-      state.createDialog = false;
+
+async function handleCreate() {
+  await actionStore.actions.createOne(createForm.data);
+  createForm.data = {} as GroupRecipeActionOut;
 }
 
 // ============================================================
 // Edit Action
 
-    const editTarget = ref<GroupRecipeActionOut | null>(null);
+const editForm = reactive({
-
+  items: formItems,
-    function editEventHandler(item: GroupRecipeActionOut) {
+  data: {} as GroupRecipeActionOut,
-      state.editDialog = true;
-      editTarget.value = item;
-    }
-
-    async function editSaveAction() {
-      if (!editTarget.value) {
-        return;
-      }
-      await actionStore.actions.updateOne(editTarget.value);
-      state.editDialog = false;
-    }
-
-    // ============================================================
-    // Delete Action
-
-    const deleteTarget = ref<GroupRecipeActionOut | null>(null);
-
-    function deleteEventHandler(item: GroupRecipeActionOut) {
-      state.deleteDialog = true;
-      deleteTarget.value = item;
-    }
-
-    async function deleteAction() {
-      if (!deleteTarget.value || deleteTarget.value.id === undefined) {
-        return;
-      }
-      await actionStore.actions.deleteOne(deleteTarget.value.id);
-      state.deleteDialog = false;
-    }
-
-    // ============================================================
-    // Bulk Delete Action
-
-    const bulkDeleteTarget = ref<GroupRecipeActionOut[]>([]);
-    function bulkDeleteEventHandler(selection: GroupRecipeActionOut[]) {
-      bulkDeleteTarget.value = selection;
-      state.bulkDeleteDialog = true;
-    }
-
-    async function deleteSelected() {
-      const ids = bulkDeleteTarget.value.map(item => item.id);
-      await actionStore.actions.deleteMany(ids);
-      bulkDeleteTarget.value = [];
-    }
-
-    return {
-      state,
-      tableConfig,
-      tableHeaders,
-      actionTypeOptions,
-      actions: actionStore.recipeActions,
-      validators,
-
-      // create
-      createTarget: actionData.data,
-      createAction,
-
-      // edit
-      editTarget,
-      editEventHandler,
-      editSaveAction,
-
-      // delete
-      deleteTarget,
-      deleteEventHandler,
-      deleteAction,
-
-      // bulk delete
-      bulkDeleteTarget,
-      bulkDeleteEventHandler,
-      deleteSelected,
-    };
-  },
 });
+
+async function handleEdit(editFormData: GroupRecipeActionOut) {
+  await actionStore.actions.updateOne(editFormData);
+  editForm.data = {} as GroupRecipeActionOut;
+}
+
+// ============================================================
+// Bulk Actions
+async function handleBulkAction(event: string, items: GroupRecipeActionOut[]) {
+  console.log("Bulk Action Event:", event, "Items:", items);
+  if (event === "delete-selected") {
+    const ids = items.filter(item => item.id != null).map(item => item.id!);
+    await actionStore.actions.deleteMany(ids);
+  }
+}
 </script>

frontend/pages/group/data/tags.vue

@@ -1,137 +1,37 @@
 <template>
   <div>
-    <!-- Create Dialog -->
+    <GroupDataPage
-    <BaseDialog
-      v-model="state.createDialog"
-      :title="$t('data-pages.tags.new-tag')"
       :icon="$globals.icons.tags"
-      can-submit
-      @submit="createTag"
-    >
-      <v-card-text>
-        <v-form ref="domNewTagForm">
-          <v-text-field
-            v-model="createTarget.name"
-            autofocus
-            :label="$t('general.name')"
-            :rules="[validators.required]"
-          />
-        </v-form>
-      </v-card-text>
-    </BaseDialog>
-
-    <!-- Edit Dialog -->
-    <BaseDialog
-      v-model="state.editDialog"
-      :icon="$globals.icons.tags"
-      :title="$t('data-pages.tags.edit-tag')"
-      :submit-icon="$globals.icons.save"
-      :submit-text="$t('general.save')"
-      can-submit
-      @submit="editSaveTag"
-    >
-      <v-card-text v-if="editTarget">
-        <div class="mt-4">
-          <v-text-field
-            v-model="editTarget.name"
-            :label="$t('general.name')"
-          />
-        </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="deleteTag"
-    >
-      <v-card-text>
-        {{ $t("general.confirm-delete-generic") }}
-        <p
-          v-if="deleteTarget"
-          class="mt-4 ml-4"
-        >
-          {{ deleteTarget.name }}
-        </p>
-      </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>
-
-    <!-- Data Table -->
-    <BaseCardSectionTitle
-      :icon="$globals.icons.tags"
-      section
       :title="$t('data-pages.tags.tag-data')"
-    />
+      :table-headers="tableHeaders"
-    <CrudTable
-      v-model:headers="tableHeaders"
       :table-config="tableConfig"
-      :data="tags || []"
+      :data="tagStore.store.value || []"
       :bulk-actions="[{ icon: $globals.icons.delete, text: $t('general.delete'), event: 'delete-selected' }]"
-      initial-sort="name"
+      :create-form="createForm"
-      @delete-one="deleteEventHandler"
+      :edit-form="editForm"
-      @edit-one="editEventHandler"
+      @create-one="handleCreate"
-      @delete-selected="bulkDeleteEventHandler"
+      @edit-one="handleEdit"
-    >
+      @delete-one="tagStore.actions.deleteOne"
-      <template #button-row>
+      @bulk-action="handleBulkAction"
-        <BaseButton
+    />
-          create
-          @click="state.createDialog = true"
-        >
-          {{ $t("general.create") }}
-        </BaseButton>
-      </template>
-    </CrudTable>
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { validators } from "~/composables/use-validators";
-import { useTagStore, useTagData } from "~/composables/store";
+import { useTagStore } from "~/composables/store";
-import type { RecipeTag } from "~/lib/api/types/admin";
+import { fieldTypes } from "~/composables/forms";
+import type { AutoFormItems } from "~/types/auto-forms";
+import type { RecipeTag } from "~/lib/api/types/recipe";
+import type { TableHeaders, TableConfig } from "~/components/global/CrudTable.vue";
 
-export default defineNuxtComponent({
-  setup() {
 const i18n = useI18n();
 
-    const tableConfig = {
+const tableConfig: TableConfig = {
   hideColumns: true,
   canExport: true,
 };
-    const tableHeaders = [
+const tableHeaders: TableHeaders[] = [
   {
     text: i18n.t("general.id"),
     value: "id",
@@ -144,105 +44,49 @@ export default defineNuxtComponent({
     sortable: true,
   },
 ];
-
-    const state = reactive({
-      createDialog: false,
-      editDialog: false,
-      deleteDialog: false,
-      bulkDeleteDialog: false,
-    });
-
-    const tagData = useTagData();
 const tagStore = useTagStore();
 
 // ============================================================
-    // Create Tag
+// Form items (shared)
-
+const formItems = [
-    async function createTag() {
+  {
-      await tagStore.actions.createOne({
+    label: i18n.t("general.name"),
-        name: tagData.data.name,
+    varName: "name",
-        slug: "",
+    type: fieldTypes.TEXT,
-      });
+    rules: [validators.required],
-      tagData.reset();
-      state.createDialog = false;
-    }
-
-    // ============================================================
-    // Edit Tag
-
-    const editTarget = ref<RecipeTag | null>(null);
-
-    function editEventHandler(item: RecipeTag) {
-      state.editDialog = true;
-      editTarget.value = item;
-    }
-
-    async function editSaveTag() {
-      if (!editTarget.value) {
-        return;
-      }
-      await tagStore.actions.updateOne(editTarget.value);
-      state.editDialog = false;
-    }
-
-    // ============================================================
-    // Delete Tag
-
-    const deleteTarget = ref<RecipeTag | null>(null);
-
-    function deleteEventHandler(item: RecipeTag) {
-      state.deleteDialog = true;
-      deleteTarget.value = item;
-    }
-
-    async function deleteTag() {
-      if (!deleteTarget.value || deleteTarget.value.id === undefined) {
-        return;
-      }
-      await tagStore.actions.deleteOne(deleteTarget.value.id!);
-      state.deleteDialog = false;
-    }
-
-    // ============================================================
-    // Bulk Delete Tag
-    const bulkDeleteTarget = ref<RecipeTag[]>([]);
-    function bulkDeleteEventHandler(selection: RecipeTag[]) {
-      bulkDeleteTarget.value = selection;
-      state.bulkDeleteDialog = true;
-    }
-
-    async function deleteSelected() {
-      const ids = bulkDeleteTarget.value.map(item => item.id).filter(id => !!id);
-      await tagStore.actions.deleteMany(ids);
-      bulkDeleteTarget.value = [];
-    }
-
-    return {
-      state,
-      tableConfig,
-      tableHeaders,
-      tags: tagStore.store,
-      validators,
-
-      // create
-      createTarget: tagData.data,
-      createTag,
-
-      // edit
-      editTarget,
-      editEventHandler,
-      editSaveTag,
-
-      // delete
-      deleteTarget,
-      deleteEventHandler,
-      deleteTag,
-
-      // bulk delete
-      bulkDeleteTarget,
-      bulkDeleteEventHandler,
-      deleteSelected,
-    };
   },
+] as AutoFormItems;
+
+// ============================================================
+// Create
+const createForm = reactive({
+  items: formItems,
+  data: { name: "" } as RecipeTag,
 });
+
+async function handleCreate(createFormData: RecipeTag) {
+  await tagStore.actions.createOne(createFormData);
+  createForm.data.name = "";
+}
+
+// ============================================================
+// Edit
+const editForm = reactive({
+  items: formItems,
+  data: {} as RecipeTag,
+});
+
+async function handleEdit(editFormData: RecipeTag) {
+  await tagStore.actions.updateOne(editFormData);
+  editForm.data = {} as RecipeTag;
+}
+
+// ============================================================
+// Bulk Actions
+async function handleBulkAction(event: string, items: RecipeTag[]) {
+  if (event === "delete-selected") {
+    const ids = items.filter(item => item.id != null).map(item => item.id!);
+    await tagStore.actions.deleteMany(ids);
+  }
+}
 </script>

frontend/pages/group/data/tools.vue

@@ -1,154 +1,46 @@
 <template>
   <div>
-    <!-- Create Dialog -->
+    <GroupDataPage
-    <BaseDialog
+      :icon="$globals.icons.tools"
-      v-model="state.createDialog"
-      :title="$t('data-pages.tools.new-tool')"
-      :icon="$globals.icons.potSteam"
-      can-submit
-      @submit="createTool"
-    >
-      <v-card-text>
-        <v-form ref="domNewToolForm">
-          <v-text-field
-            v-model="createTarget.name"
-            autofocus
-            :label="$t('general.name')"
-            :rules="[validators.required]"
-          />
-          <v-checkbox
-            v-model="createTarget.onHand"
-            :label="$t('tool.on-hand')"
-          />
-        </v-form>
-      </v-card-text>
-    </BaseDialog>
-
-    <!-- Edit Dialog -->
-    <BaseDialog
-      v-model="state.editDialog"
-      :icon="$globals.icons.potSteam"
-      :title="$t('data-pages.tools.edit-tool')"
-      :submit-text="$t('general.save')"
-      can-submit
-      @submit="editSaveTool"
-    >
-      <v-card-text v-if="editTarget">
-        <div class="mt-4">
-          <v-text-field
-            v-model="editTarget.name"
-            :label="$t('general.name')"
-          />
-          <v-checkbox
-            v-model="editTarget.onHand"
-            :label="$t('tool.on-hand')"
-            hide-details
-          />
-        </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="deleteTool"
-    >
-      <v-card-text>
-        {{ $t("general.confirm-delete-generic") }}
-        <p
-          v-if="deleteTarget"
-          class="mt-4 ml-4"
-        >
-          {{ deleteTarget.name }}
-        </p>
-      </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>
-
-    <!-- Data Table -->
-    <BaseCardSectionTitle
-      :icon="$globals.icons.potSteam"
-      section
       :title="$t('data-pages.tools.tool-data')"
-    />
+      :table-headers="tableHeaders"
-    <CrudTable
-      v-model:headers="tableHeaders"
       :table-config="tableConfig"
       :data="tools || []"
       :bulk-actions="[{ icon: $globals.icons.delete, text: $t('general.delete'), event: 'delete-selected' }]"
-      initial-sort="name"
+      :create-form="createForm"
-      @delete-one="deleteEventHandler"
+      :edit-form="editForm"
-      @edit-one="editEventHandler"
+      @create-one="handleCreate"
-      @delete-selected="bulkDeleteEventHandler"
+      @edit-one="handleEdit"
+      @delete-one="toolStore.actions.deleteOne"
+      @bulk-action="handleBulkAction"
     >
-      <template #button-row>
-        <BaseButton
-          create
-          @click="state.createDialog = true"
-        >
-          {{ $t("general.create") }}
-        </BaseButton>
-      </template>
       <template #[`item.onHand`]="{ item }">
         <v-icon :color="item.onHand ? 'success' : undefined">
           {{ item.onHand ? $globals.icons.check : $globals.icons.close }}
         </v-icon>
       </template>
-    </CrudTable>
+    </GroupDataPage>
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { validators } from "~/composables/use-validators";
-import { useToolStore, useToolData } from "~/composables/store";
+import { fieldTypes } from "~/composables/forms";
-import type { RecipeTool } from "~/lib/api/types/recipe";
+import type { AutoFormItems } from "~/types/auto-forms";
+import { useToolStore } from "~/composables/store";
+import type { RecipeTool, RecipeToolCreate } from "~/lib/api/types/recipe";
+import type { TableHeaders, TableConfig } from "~/components/global/CrudTable.vue";
 
 interface RecipeToolWithOnHand extends RecipeTool {
   onHand: boolean;
 }
 
-export default defineNuxtComponent({
-  setup() {
 const i18n = useI18n();
-    const auth = useMealieAuth();
+const tableConfig: TableConfig = {
-    const tableConfig = {
   hideColumns: true,
   canExport: true,
 };
-    const tableHeaders = [
+const tableHeaders: TableHeaders[] = [
   {
     text: i18n.t("general.id"),
     value: "id",
@@ -168,15 +60,8 @@ export default defineNuxtComponent({
   },
 ];
 
-    const state = reactive({
+const auth = useMealieAuth();
-      createDialog: false,
-      editDialog: false,
-      deleteDialog: false,
-      bulkDeleteDialog: false,
-    });
-
 const userHousehold = computed(() => auth.user.value?.householdSlug || "");
-    const toolData = useToolData();
 const toolStore = useToolStore();
 const tools = computed(() => toolStore.store.value.map((tools) => {
   const onHand = tools.householdsWithTool?.includes(userHousehold.value) || false;
@@ -184,116 +69,65 @@ export default defineNuxtComponent({
 }));
 
 // ============================================================
-    // Create Tool
+// Form items (shared)
-
+const formItems = [
-    async function createTool() {
+  {
-      if (toolData.data.onHand) {
+    label: i18n.t("general.name"),
-        toolData.data.householdsWithTool = [userHousehold.value];
+    varName: "name",
-      }
+    type: fieldTypes.TEXT,
-      else {
+    rules: [validators.required],
-        toolData.data.householdsWithTool = [];
-      }
-
-      await toolStore.actions.createOne({
-        name: toolData.data.name, householdsWithTool: toolData.data.householdsWithTool,
-        id: "",
-        slug: "",
-      });
-      toolData.reset();
-      state.createDialog = false;
-    }
-
-    // ============================================================
-    // Edit Tool
-
-    const editTarget = ref<RecipeToolWithOnHand | null>(null);
-
-    function editEventHandler(item: RecipeToolWithOnHand) {
-      state.editDialog = true;
-      editTarget.value = item;
-    }
-
-    async function editSaveTool() {
-      if (!editTarget.value) {
-        return;
-      }
-      if (editTarget.value.onHand && !editTarget.value.householdsWithTool?.includes(userHousehold.value)) {
-        if (!editTarget.value.householdsWithTool) {
-          editTarget.value.householdsWithTool = [userHousehold.value];
-        }
-        else {
-          editTarget.value.householdsWithTool.push(userHousehold.value);
-        }
-      }
-      else if (!editTarget.value.onHand && editTarget.value.householdsWithTool?.includes(userHousehold.value)) {
-        editTarget.value.householdsWithTool = editTarget.value.householdsWithTool.filter(
-          household => household !== userHousehold.value,
-        );
-      }
-
-      await toolStore.actions.updateOne(editTarget.value);
-      state.editDialog = false;
-    }
-
-    // ============================================================
-    // Delete Tool
-
-    const deleteTarget = ref<RecipeToolWithOnHand | null>(null);
-
-    function deleteEventHandler(item: RecipeToolWithOnHand) {
-      state.deleteDialog = true;
-      deleteTarget.value = item;
-    }
-
-    async function deleteTool() {
-      if (!deleteTarget.value || deleteTarget.value.id === undefined) {
-        return;
-      }
-      await toolStore.actions.deleteOne(deleteTarget.value.id);
-      state.deleteDialog = false;
-    }
-
-    // ============================================================
-    // Bulk Delete Tool
-
-    const bulkDeleteTarget = ref<RecipeToolWithOnHand[]>([]);
-    function bulkDeleteEventHandler(selection: RecipeToolWithOnHand[]) {
-      bulkDeleteTarget.value = selection;
-      state.bulkDeleteDialog = true;
-    }
-
-    async function deleteSelected() {
-      const ids = bulkDeleteTarget.value.map(item => item.id);
-      await toolStore.actions.deleteMany(ids);
-      bulkDeleteTarget.value = [];
-    }
-
-    return {
-      state,
-      tableConfig,
-      tableHeaders,
-      tools,
-      validators,
-
-      // create
-      createTarget: toolData.data,
-      createTool,
-
-      // edit
-      editTarget,
-      editEventHandler,
-      editSaveTool,
-
-      // delete
-      deleteTarget,
-      deleteEventHandler,
-      deleteTool,
-
-      // bulk delete
-      bulkDeleteTarget,
-      bulkDeleteEventHandler,
-      deleteSelected,
-    };
   },
+  {
+    label: i18n.t("tool.on-hand"),
+    varName: "onHand",
+    type: fieldTypes.BOOLEAN,
+  },
+] as AutoFormItems;
+
+// ============================================================
+// Create
+const createForm = reactive({
+  items: formItems,
+  data: { name: "", onHand: false } as RecipeToolCreate,
 });
+
+async function handleCreate(createFormData: RecipeToolCreate) {
+  // @ts-expect-error createOne eroniusly expects id and slug which are not preset at time of creation
+  await toolStore.actions.createOne({ name: createFormData.name, householdsWithTool: createFormData.onHand ? [userHousehold.value] : [] } as RecipeToolCreate);
+  createForm.data = { name: "", onHand: false } as RecipeToolCreate;
+}
+
+// ============================================================
+// Edit
+const editForm = reactive({
+  items: formItems,
+  data: {} as RecipeToolWithOnHand,
+});
+
+async function handleEdit(editFormData: RecipeToolWithOnHand) {
+  // if list of households is undefined default to empty array
+  if (!editFormData.householdsWithTool) {
+    editFormData.householdsWithTool = [];
+  }
+
+  if (editFormData.onHand && !editFormData.householdsWithTool.includes(userHousehold.value)) {
+    editFormData.householdsWithTool.push(userHousehold.value);
+  }
+  else if (!editFormData.onHand && editFormData.householdsWithTool.includes(userHousehold.value)) {
+    const idx = editFormData.householdsWithTool.indexOf(userHousehold.value);
+    if (idx !== -1) editFormData.householdsWithTool.splice(idx, 1);
+  }
+
+  await toolStore.actions.updateOne({ ...editFormData, id: editFormData.id } as RecipeTool);
+  editForm.data = {} as RecipeToolWithOnHand;
+}
+
+// ============================================================
+// Bulk Actions
+async function handleBulkAction(event: string, items: RecipeToolWithOnHand[]) {
+  if (event === "delete-selected") {
+    const ids = items.filter(item => item.id != null).map(item => item.id!);
+    await toolStore.actions.deleteMany(ids);
+  }
+}
 </script>

frontend/pages/group/data/units.vue

@@ -18,15 +18,16 @@
         <v-autocomplete
           v-model="fromUnit"
           return-object
-          :items="store"
+          :items="unitStore"
           :custom-filter="normalizeFilter"
           item-title="name"
           :label="$t('data-pages.units.source-unit')"
+          class="mt-2"
         />
         <v-autocomplete
           v-model="toUnit"
           return-object
-          :items="store"
+          :items="unitStore"
           :custom-filter="normalizeFilter"
           item-title="name"
           :label="$t('data-pages.units.target-unit')"
@@ -40,177 +41,16 @@
       </v-card-text>
     </BaseDialog>
 
-    <!-- Create Dialog -->
-    <BaseDialog
-      v-model="createDialog"
-      :icon="$globals.icons.units"
-      :title="$t('data-pages.units.create-unit')"
-      :submit-icon="$globals.icons.save"
-      :submit-text="$t('general.save')"
-      can-submit
-      @submit="createUnit"
-    >
-      <v-card-text>
-        <v-form ref="domNewUnitForm">
-          <v-text-field
-            v-model="createTarget.name"
-            autofocus
-            :label="$t('general.name')"
-            :hint="$t('data-pages.units.example-unit-singular')"
-            :rules="[validators.required]"
-          />
-          <v-text-field
-            v-model="createTarget.pluralName"
-            :label="$t('general.plural-name')"
-            :hint="$t('data-pages.units.example-unit-plural')"
-          />
-          <v-text-field
-            v-model="createTarget.abbreviation"
-            :label="$t('data-pages.units.abbreviation')"
-            :hint="$t('data-pages.units.example-unit-abbreviation-singular')"
-          />
-          <v-text-field
-            v-model="createTarget.pluralAbbreviation"
-            :label="$t('data-pages.units.plural-abbreviation')"
-            :hint="$t('data-pages.units.example-unit-abbreviation-plural')"
-          />
-          <v-text-field
-            v-model="createTarget.description"
-            :label="$t('data-pages.units.description')"
-          />
-          <v-checkbox
-            v-model="createTarget.fraction"
-            hide-details
-            :label="$t('data-pages.units.display-as-fraction')"
-          />
-          <v-checkbox
-            v-model="createTarget.useAbbreviation"
-            hide-details
-            :label="$t('data-pages.units.use-abbreviation')"
-          />
-        </v-form>
-      </v-card-text>
-    </BaseDialog>
-
     <!-- Alias Sub-Dialog -->
     <RecipeDataAliasManagerDialog
-      v-if="editTarget"
+      v-if="editForm.data"
       v-model="aliasManagerDialog"
-      :data="editTarget"
+      :data="editForm.data"
       can-submit
       @submit="updateUnitAlias"
       @cancel="aliasManagerDialog = false"
     />
 
-    <!-- Edit Dialog -->
-    <BaseDialog
-      v-model="editDialog"
-      :icon="$globals.icons.units"
-      :title="$t('data-pages.units.edit-unit')"
-      :submit-icon="$globals.icons.save"
-      :submit-text="$t('general.save')"
-      can-submit
-      @submit="editSaveUnit"
-    >
-      <v-card-text v-if="editTarget">
-        <v-form ref="domEditUnitForm">
-          <v-text-field
-            v-model="editTarget.name"
-            :label="$t('general.name')"
-            :hint="$t('data-pages.units.example-unit-singular')"
-            :rules="[validators.required]"
-          />
-          <v-text-field
-            v-model="editTarget.pluralName"
-            :label="$t('general.plural-name')"
-            :hint="$t('data-pages.units.example-unit-plural')"
-          />
-          <v-text-field
-            v-model="editTarget.abbreviation"
-            :label="$t('data-pages.units.abbreviation')"
-            :hint="$t('data-pages.units.example-unit-abbreviation-singular')"
-          />
-          <v-text-field
-            v-model="editTarget.pluralAbbreviation"
-            :label="$t('data-pages.units.plural-abbreviation')"
-            :hint="$t('data-pages.units.example-unit-abbreviation-plural')"
-          />
-          <v-text-field
-            v-model="editTarget.description"
-            :label="$t('data-pages.units.description')"
-          />
-          <v-checkbox
-            v-model="editTarget.fraction"
-            hide-details
-            :label="$t('data-pages.units.display-as-fraction')"
-          />
-          <v-checkbox
-            v-model="editTarget.useAbbreviation"
-            hide-details
-            :label="$t('data-pages.units.use-abbreviation')"
-          />
-        </v-form>
-      </v-card-text>
-      <template #custom-card-action>
-        <BaseButton
-          edit
-          @click="aliasManagerEventHandler"
-        >
-          {{ $t('data-pages.manage-aliases') }}
-        </BaseButton>
-      </template>
-    </BaseDialog>
-
-    <!-- Delete Dialog -->
-    <BaseDialog
-      v-model="deleteDialog"
-      :title="$t('general.confirm')"
-      :icon="$globals.icons.alertCircle"
-      color="error"
-      can-confirm
-      @confirm="deleteUnit"
-    >
-      <v-card-text>
-        {{ $t("general.confirm-delete-generic") }}
-        <p
-          v-if="deleteTarget"
-          class="mt-4 ml-4"
-        >
-          {{ deleteTarget.name }}
-        </p>
-      </v-card-text>
-    </BaseDialog>
-
-    <!-- Bulk Delete Dialog -->
-    <BaseDialog
-      v-model="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"
@@ -243,7 +83,7 @@
         </v-autocomplete>
 
         <v-alert
-          v-if="store && store.length > 0"
+          v-if="unitStore && unitStore.length > 0"
           type="error"
           class="mb-0 text-body-2"
         >
@@ -252,63 +92,65 @@
       </v-card-text>
     </BaseDialog>
 
-    <!-- Data Table -->
+    <GroupDataPage
-    <BaseCardSectionTitle
       :icon="$globals.icons.units"
-      section
+      :title="$t('general.units')"
-      :title="$t('data-pages.units.unit-data')"
+      :table-headers="tableHeaders"
-    />
-    <CrudTable
-      v-model:headers="tableHeaders"
       :table-config="tableConfig"
-      :data="store"
+      :data="unitStore || []"
       :bulk-actions="[{ icon: $globals.icons.delete, text: $t('general.delete'), event: 'delete-selected' }]"
-      initial-sort="createdAt"
+      :create-form="createForm"
-      initial-sort-desc
+      :edit-form="editForm"
-      @delete-one="deleteEventHandler"
+      @create-one="handleCreate"
-      @edit-one="editEventHandler"
+      @edit-one="handleEdit"
-      @create-one="createEventHandler"
+      @delete-one="unitActions.deleteOne"
-      @delete-selected="bulkDeleteEventHandler"
+      @bulk-action="handleBulkAction"
     >
-      <template #button-row>
+      <template #table-button-row>
         <BaseButton
-          create
+          :icon="$globals.icons.externalLink"
-          @click="createDialog = true"
+          @click="mergeDialog = true"
-        />
+        >
-
-        <BaseButton @click="mergeDialog = true">
-          <template #icon>
-            {{ $globals.icons.externalLink }}
-          </template>
           {{ $t('data-pages.combine') }}
         </BaseButton>
       </template>
+
       <template #[`item.useAbbreviation`]="{ item }">
         <v-icon :color="item.useAbbreviation ? 'success' : undefined">
           {{ item.useAbbreviation ? $globals.icons.check : $globals.icons.close }}
         </v-icon>
       </template>
+
       <template #[`item.fraction`]="{ item }">
         <v-icon :color="item.fraction ? 'success' : undefined">
           {{ item.fraction ? $globals.icons.check : $globals.icons.close }}
         </v-icon>
       </template>
+
       <template #[`item.createdAt`]="{ item }">
         {{ item.createdAt ? $d(new Date(item.createdAt)) : '' }}
       </template>
-      <template #button-bottom>
+
-        <BaseButton @click="seedDialog = true">
+      <template #table-button-bottom>
-          <template #icon>
+        <BaseButton :icon="$globals.icons.database" @click="seedDialog = true">
-            {{ $globals.icons.database }}
-          </template>
           {{ $t('data-pages.seed') }}
         </BaseButton>
       </template>
-    </CrudTable>
+
+      <template #edit-dialog-custom-action>
+        <BaseButton
+          :icon="$globals.icons.tags"
+          color="info"
+          @click="aliasManagerDialog = true"
+        >
+          {{ $t('data-pages.manage-aliases') }}
+        </BaseButton>
+      </template>
+    </GroupDataPage>
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import type { LocaleObject } from "@nuxtjs/i18n";
 import RecipeDataAliasManagerDialog from "~/components/Domain/Recipe/RecipeDataAliasManagerDialog.vue";
 import { validators } from "~/composables/use-validators";
@@ -317,19 +159,18 @@ import type { CreateIngredientUnit, IngredientUnit, IngredientUnitAlias } from "
 import { useLocales } from "~/composables/use-locales";
 import { normalizeFilter } from "~/composables/use-utils";
 import { useUnitStore } from "~/composables/store";
-import type { VForm } from "~/types/auto-forms";
+import type { AutoFormItems } from "~/types/auto-forms";
+import type { TableHeaders, TableConfig } from "~/components/global/CrudTable.vue";
+import { fieldTypes } from "~/composables/forms";
 
-export default defineNuxtComponent({
-  components: { RecipeDataAliasManagerDialog },
-  setup() {
 const userApi = useUserApi();
 const i18n = useI18n();
 
-    const tableConfig = {
+const tableConfig: TableConfig = {
   hideColumns: true,
   canExport: true,
 };
-    const tableHeaders = [
+const tableHeaders: TableHeaders[] = [
   {
     text: i18n.t("general.id"),
     value: "id",
@@ -384,105 +225,100 @@ export default defineNuxtComponent({
   },
 ];
 
-    const { store, actions: unitActions } = useUnitStore();
+const { store: unitStore, actions: unitActions } = useUnitStore();
 
 // ============================================================
-    // Create Units
+// Form items (shared)
+const formItems: AutoFormItems = [
+  {
+    label: i18n.t("general.name"),
+    varName: "name",
+    type: fieldTypes.TEXT,
+    rules: [validators.required],
+  },
+  {
+    label: i18n.t("general.plural-name"),
+    varName: "pluralName",
+    type: fieldTypes.TEXT,
+  },
+  {
+    label: i18n.t("data-pages.units.abbreviation"),
+    varName: "abbreviation",
+    type: fieldTypes.TEXT,
+  },
+  {
+    label: i18n.t("data-pages.units.plural-abbreviation"),
+    varName: "pluralAbbreviation",
+    type: fieldTypes.TEXT,
+  },
+  {
+    label: i18n.t("data-pages.units.description"),
+    varName: "description",
+    type: fieldTypes.TEXT,
+  },
+  {
+    label: i18n.t("data-pages.units.use-abbv"),
+    varName: "useAbbreviation",
+    type: fieldTypes.BOOLEAN,
+  },
+  {
+    label: i18n.t("data-pages.units.fraction"),
+    varName: "fraction",
+    type: fieldTypes.BOOLEAN,
+  },
+];
 
-    const createDialog = ref(false);
+// ============================================================
-    const domNewUnitForm = ref<VForm>();
+// Create
-
+const createForm = reactive({
-    // we explicitly set booleans to false since forms don't POST unchecked boxes
+  items: formItems,
-    const createTarget = ref<CreateIngredientUnit>({
+  data: {
-      name: "",
-      fraction: true,
-      useAbbreviation: false,
-    });
-
-    function createEventHandler() {
-      createDialog.value = true;
-    }
-
-    async function createUnit() {
-      if (!createTarget.value || !createTarget.value.name) {
-        return;
-      }
-
-      // @ts-expect-error the createOne function erroneously expects an id because it uses the IngredientUnit type
-      await unitActions.createOne(createTarget.value);
-      createDialog.value = false;
-
-      domNewUnitForm.value?.reset();
-      createTarget.value = {
     name: "",
     fraction: false,
     useAbbreviation: false,
-      };
+  } as CreateIngredientUnit,
+});
+
+async function handleCreate(createFormData: CreateIngredientUnit) {
+  // @ts-expect-error createOne eroniusly expects id which is not preset at time of creation
+  await unitActions.createOne(createFormData);
+  createForm.data = {
+    name: "",
+    fraction: false,
+    useAbbreviation: false,
+  } as CreateIngredientUnit;
 }
 
 // ============================================================
-    // Edit Units
+// Edit
-    const editDialog = ref(false);
+const editForm = reactive({
-    const editTarget = ref<IngredientUnit | null>(null);
+  items: formItems,
-    function editEventHandler(item: IngredientUnit) {
+  data: {} as IngredientUnit,
-      editTarget.value = item;
+});
-      editDialog.value = true;
-    }
 
-    async function editSaveUnit() {
+async function handleEdit(editFormData: IngredientUnit) {
-      if (!editTarget.value) {
+  await unitActions.updateOne(editFormData);
-        return;
+  editForm.data = {} as IngredientUnit;
-      }
-
-      await unitActions.updateOne(editTarget.value);
-      editDialog.value = false;
 }
 
 // ============================================================
-    // Delete Units
+// Bulk Actions
-    const deleteDialog = ref(false);
+async function handleBulkAction(event: string, items: IngredientUnit[]) {
-    const deleteTarget = ref<IngredientUnit | null>(null);
+  if (event === "delete-selected") {
-    function deleteEventHandler(item: IngredientUnit) {
+    const ids = items.filter(item => item.id != null).map(item => item.id!);
-      deleteTarget.value = item;
-      deleteDialog.value = true;
-    }
-
-    async function deleteUnit() {
-      if (!deleteTarget.value) {
-        return;
-      }
-      await unitActions.deleteOne(deleteTarget.value.id);
-      deleteDialog.value = false;
-    }
-
-    // ============================================================
-    // Bulk Delete Units
-    const bulkDeleteDialog = ref(false);
-    const bulkDeleteTarget = ref<IngredientUnit[]>([]);
-    function bulkDeleteEventHandler(selection: IngredientUnit[]) {
-      bulkDeleteTarget.value = selection;
-      bulkDeleteDialog.value = true;
-    }
-
-    async function deleteSelected() {
-      const ids = bulkDeleteTarget.value.map(item => item.id);
     await unitActions.deleteMany(ids);
-      bulkDeleteTarget.value = [];
+  }
 }
 
 // ============================================================
 // Alias Manager
 
 const aliasManagerDialog = ref(false);
-    function aliasManagerEventHandler() {
-      aliasManagerDialog.value = true;
-    }
-
 function updateUnitAlias(newAliases: IngredientUnitAlias[]) {
-      if (!editTarget.value) {
+  if (!editForm.data) {
     return;
   }
-      editTarget.value.aliases = newAliases;
+  editForm.data.aliases = newAliases;
   aliasManagerDialog.value = false;
 }
 
@@ -522,7 +358,7 @@ export default defineNuxtComponent({
 });
 
 const locales = LOCALES.filter(locale =>
-      (i18n.locales.value as LocaleObject[]).map(i18nLocale => i18nLocale.code).includes(locale.value),
+  (i18n.locales.value as LocaleObject[]).map(i18nLocale => i18nLocale.code).includes(locale.value as any),
 );
 
 async function seedDatabase() {
@@ -532,50 +368,4 @@ export default defineNuxtComponent({
     unitActions.refresh();
   }
 }
-
-    return {
-      tableConfig,
-      tableHeaders,
-      store,
-      validators,
-      normalizeFilter,
-      // Create
-      createDialog,
-      domNewUnitForm,
-      createEventHandler,
-      createUnit,
-      createTarget,
-      // Edit
-      editDialog,
-      editEventHandler,
-      editSaveUnit,
-      editTarget,
-      // Delete
-      deleteEventHandler,
-      deleteDialog,
-      deleteUnit,
-      deleteTarget,
-      // Bulk Delete
-      bulkDeleteDialog,
-      bulkDeleteEventHandler,
-      bulkDeleteTarget,
-      deleteSelected,
-      // Alias Manager
-      aliasManagerDialog,
-      aliasManagerEventHandler,
-      updateUnitAlias,
-      // Merge
-      canMerge,
-      mergeUnits,
-      mergeDialog,
-      fromUnit,
-      toUnit,
-      // Seed
-      seedDatabase,
-      locales,
-      locale,
-      seedDialog,
-    };
-  },
-});
 </script>

frontend/types/auto-forms.ts

@@ -2,6 +2,8 @@ import type { VForm as VuetifyForm } from "vuetify/components/VForm";
 
 type FormFieldType = "text" | "textarea" | "list" | "select" | "object" | "boolean" | "color" | "password";
 
+export type FormValidationRule = (value: any) => boolean | string;
+
 export interface FormSelectOption {
   text: string;
 }
@@ -13,10 +15,11 @@ export interface FormField {
   hint?: string;
   varName: string;
   type: FormFieldType;
-  rules?: string[];
+  rules?: FormValidationRule[];
   disableUpdate?: boolean;
   disableCreate?: boolean;
   options?: FormSelectOption[];
+  selectReturnValue?: string;
 }
 
 export type AutoFormItems = FormField[];