chore: refactor data management pages (#7107)

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 -->
-    <BaseCardSectionTitle
+    <GroupDataPage
       :icon="$globals.icons.foods"
-      section
       :title="$t('data-pages.foods.food-data')"
-    />
-    <CrudTable
-      v-model:headers="tableHeaders"
+      :table-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"
-      initial-sort-desc
-      @delete-one="deleteEventHandler"
-      @edit-one="editEventHandler"
-      @create-one="createEventHandler"
-      @delete-selected="bulkDeleteEventHandler"
-      @assign-selected="bulkAssignEventHandler"
+      :create-form="createForm"
+      :edit-form="editForm"
+      @create-one="handleCreate"
+      @edit-one="handleEdit"
+      @delete-one="foodStore.actions.deleteOne"
+      @bulk-action="handleBulkAction"
     >
-      <template #button-row>
-        <BaseButton
-          create
-          @click="createDialog = true"
-        />
+      <template #table-button-row>
         <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,315 +216,256 @@ 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 = {
-      hideColumns: true,
-      canExport: true,
-    };
-    const tableHeaders = [
-      {
-        text: i18n.t("general.id"),
-        value: "id",
-        show: false,
-      },
-      {
-        text: i18n.t("general.name"),
-        value: "name",
-        show: true,
-        sortable: true,
-      },
-      {
-        text: i18n.t("general.plural-name"),
-        value: "pluralName",
-        show: true,
-        sortable: true,
-      },
-      {
-        text: i18n.t("recipe.description"),
-        value: "description",
-        show: true,
-      },
-      {
-        text: i18n.t("shopping-list.label"),
-        value: "label",
-        show: true,
-        sortable: true,
-        sort: (label1: MultiPurposeLabelOut | null, label2: MultiPurposeLabelOut | null) => {
-          const label1Name = label1?.name || "";
-          const label2Name = label2?.name || "";
-          return label1Name.localeCompare(label2Name);
-        },
-      },
-      {
-        text: i18n.t("tool.on-hand"),
-        value: "onHand",
-        show: true,
-        sortable: true,
-      },
-      {
-        text: i18n.t("general.date-added"),
-        value: "createdAt",
-        show: false,
-        sortable: true,
-      },
-    ];
-
-    const userHousehold = computed(() => auth.user.value?.householdSlug || "");
-    const foodStore = useFoodStore();
-    const foods = computed(() => foodStore.store.value.map((food) => {
-      const onHand = food.householdsWithIngredientFood?.includes(userHousehold.value) || false;
-      return { ...food, onHand } as IngredientFoodWithOnHand;
-    }));
-
-    // ===============================================================
-    // Food Creator
-
-    const domNewFoodForm = ref<VForm>();
-    const createDialog = ref(false);
-    const createTarget = ref<CreateIngredientFoodWithOnHand>({
-      name: "",
-      onHand: false,
-      householdsWithIngredientFood: [],
-    });
-
-    function createEventHandler() {
-      createDialog.value = true;
-    }
-
-    async function createFood() {
-      if (!createTarget.value || !createTarget.value.name) {
-        return;
-      }
-
-      if (createTarget.value.onHand) {
-        createTarget.value.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);
-      createDialog.value = false;
-
-      domNewFoodForm.value?.reset();
-      createTarget.value = {
-        name: "",
-        onHand: false,
-        householdsWithIngredientFood: [],
-      };
-    }
-
-    // ===============================================================
-    // Food Editor
-
-    const editDialog = ref(false);
-    const editTarget = ref<IngredientFoodWithOnHand | null>(null);
-
-    function editEventHandler(item: IngredientFoodWithOnHand) {
-      editTarget.value = item;
-      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 (!editTarget.value.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);
-      editDialog.value = false;
-    }
-
-    // ===============================================================
-    // Food Delete
-
-    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;
-    }
-
-    const bulkDeleteDialog = ref(false);
-    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 = [];
-    }
-
-    // ============================================================
-    // Alias Manager
-
-    const aliasManagerDialog = ref(false);
-    function aliasManagerEventHandler() {
-      aliasManagerDialog.value = true;
-    }
-
-    function updateFoodAlias(newAliases: IngredientFoodAlias[]) {
-      if (!editTarget.value) {
-        return;
-      }
-      editTarget.value.aliases = newAliases;
-      aliasManagerDialog.value = false;
-    }
-
-    // ============================================================
-    // Merge Foods
-
-    const mergeDialog = ref(false);
-    const fromFood = ref<IngredientFoodWithOnHand | null>(null);
-    const toFood = ref<IngredientFoodWithOnHand | null>(null);
-
-    const canMerge = computed(() => {
-      return fromFood.value && toFood.value && fromFood.value.id !== toFood.value.id;
-    });
-
-    async function mergeFoods() {
-      if (!canMerge.value || !fromFood.value || !toFood.value) {
-        return;
-      }
-
-      const { data } = await userApi.foods.merge(fromFood.value.id, toFood.value.id);
-
-      if (data) {
-        foodStore.actions.refresh();
-      }
-    }
-
-    // ============================================================
-    // Labels
-
-    const { store: allLabels } = useLabelStore();
-
-    // ============================================================
-    // Seed
-
-    const seedDialog = ref(false);
-    const locale = ref("");
-
-    const { locales: LOCALES, locale: currentLocale } = useLocales();
-
-    onMounted(() => {
-      locale.value = currentLocale.value;
-    });
-
-    const locales = LOCALES.filter(locale =>
-      (i18n.locales.value as LocaleObject[]).map(i18nLocale => i18nLocale.code).includes(locale.value as any),
-    );
-
-    async function seedDatabase() {
-      const { data } = await userApi.seeders.foods({ locale: locale.value });
-
-      if (data) {
-        foodStore.actions.refresh();
-      }
-    }
-
-    // ============================================================
-    // Bulk Assign Labels
-    const bulkAssignLabelDialog = ref(false);
-    const bulkAssignTarget = ref<IngredientFoodWithOnHand[]>([]);
-    const bulkAssignLabelId = ref<string | undefined>();
-
-    function bulkAssignEventHandler(selection: IngredientFoodWithOnHand[]) {
-      bulkAssignTarget.value = selection;
-      bulkAssignLabelDialog.value = true;
-    }
-
-    async function assignSelected() {
-      if (!bulkAssignLabelId.value) {
-        return;
-      }
-      for (const item of bulkAssignTarget.value) {
-        item.labelId = bulkAssignLabelId.value;
-        await foodStore.actions.updateOne(item);
-      }
-      bulkAssignTarget.value = [];
-      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,
-    };
+const userApi = useUserApi();
+const i18n = useI18n();
+const auth = useMealieAuth();
+const tableConfig: TableConfig = {
+  hideColumns: true,
+  canExport: true,
+};
+const tableHeaders: TableHeaders[] = [
+  {
+    text: i18n.t("general.id"),
+    value: "id",
+    show: false,
   },
+  {
+    text: i18n.t("general.name"),
+    value: "name",
+    show: true,
+    sortable: true,
+  },
+  {
+    text: i18n.t("general.plural-name"),
+    value: "pluralName",
+    show: true,
+    sortable: true,
+  },
+  {
+    text: i18n.t("recipe.description"),
+    value: "description",
+    show: true,
+  },
+  {
+    text: i18n.t("shopping-list.label"),
+    value: "label",
+    show: true,
+    sortable: true,
+    sort: (label1: MultiPurposeLabelOut | null, label2: MultiPurposeLabelOut | null) => {
+      const label1Name = label1?.name || "";
+      const label2Name = label2?.name || "";
+      return label1Name.localeCompare(label2Name);
+    },
+  },
+  {
+    text: i18n.t("tool.on-hand"),
+    value: "onHand",
+    show: true,
+    sortable: true,
+  },
+  {
+    text: i18n.t("general.date-added"),
+    value: "createdAt",
+    show: false,
+    sortable: true,
+  },
+];
+
+const userHousehold = computed(() => auth.user.value?.householdSlug || "");
+const foodStore = useFoodStore();
+const foods = computed(() => foodStore.store.value.map((food) => {
+  const onHand = food.householdsWithIngredientFood?.includes(userHousehold.value) || false;
+  return { ...food, onHand } as IngredientFoodWithOnHand;
+}));
+
+// ============================================================
+// Labels
+const { store: allLabels } = useLabelStore();
+const labelOptions = computed(() => allLabels.value.map(label => ({ text: label.name, value: label.id })) || []);
+
+// ============================================================
+// Form items (shared)
+const formItems = computed<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("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,
 });
+
+async function handleCreate() {
+  if (!createForm.data || !createForm.data.name) {
+    return;
+  }
+
+  if (createForm.data.onHand) {
+    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(createForm.data);
+  createForm.data = {
+    name: "",
+    onHand: false,
+    householdsWithIngredientFood: [],
+  };
+}
+
+// ===============================================================
+// Edit
+
+const editForm = reactive({
+  get items() {
+    return formItems.value;
+  },
+  data: {} as IngredientFoodWithOnHand,
+});
+
+async function handleEdit() {
+  if (!editForm.data) {
+    return;
+  }
+  if (!editForm.data.householdsWithIngredientFood) {
+    editForm.data.householdsWithIngredientFood = [];
+  }
+
+  if (editForm.data.onHand && !editForm.data.householdsWithIngredientFood.includes(userHousehold.value)) {
+    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);
+  editForm.data = {} as IngredientFoodWithOnHand;
+}
+
+// ============================================================
+// Bulk Actions
+async function handleBulkAction(event: string, items: IngredientFoodWithOnHand[]) {
+  if (event === "delete-selected") {
+    const ids = items.map(item => item.id);
+    await foodStore.actions.deleteMany(ids);
+  }
+  else if (event === "assign-selected") {
+    bulkAssignEventHandler(items);
+  }
+}
+
+// ============================================================
+// Alias Manager
+
+const aliasManagerDialog = ref(false);
+function updateFoodAlias(newAliases: IngredientFoodAlias[]) {
+  if (!editForm.data) {
+    return;
+  }
+  editForm.data.aliases = newAliases;
+  aliasManagerDialog.value = false;
+}
+
+// ============================================================
+// Merge Foods
+
+const mergeDialog = ref(false);
+const fromFood = ref<IngredientFoodWithOnHand | null>(null);
+const toFood = ref<IngredientFoodWithOnHand | null>(null);
+
+const canMerge = computed(() => {
+  return fromFood.value && toFood.value && fromFood.value.id !== toFood.value.id;
+});
+
+async function mergeFoods() {
+  if (!canMerge.value || !fromFood.value || !toFood.value) {
+    return;
+  }
+
+  const { data } = await userApi.foods.merge(fromFood.value.id, toFood.value.id);
+
+  if (data) {
+    foodStore.actions.refresh();
+  }
+}
+
+// ============================================================
+// Seed
+
+const seedDialog = ref(false);
+const locale = ref("");
+
+const { locales: LOCALES, locale: currentLocale } = useLocales();
+
+onMounted(() => {
+  locale.value = currentLocale.value;
+});
+
+const locales = LOCALES.filter(locale =>
+  (i18n.locales.value as LocaleObject[]).map(i18nLocale => i18nLocale.code).includes(locale.value as any),
+);
+
+async function seedDatabase() {
+  const { data } = await userApi.seeders.foods({ locale: locale.value });
+
+  if (data) {
+    foodStore.actions.refresh();
+  }
+}
+
+// ============================================================
+// Bulk Assign Labels
+const bulkAssignLabelDialog = ref(false);
+const bulkAssignTarget = ref<IngredientFoodWithOnHand[]>([]);
+const bulkAssignLabelId = ref<string | undefined>();
+
+function bulkAssignEventHandler(selection: IngredientFoodWithOnHand[]) {
+  bulkAssignTarget.value = selection;
+  bulkAssignLabelDialog.value = true;
+}
+
+async function assignSelected() {
+  if (!bulkAssignLabelId.value) {
+    return;
+  }
+  for (const item of bulkAssignTarget.value) {
+    item.labelId = bulkAssignLabelId.value;
+    await foodStore.actions.updateOne(item);
+  }
+  bulkAssignTarget.value = [];
+  bulkAssignLabelId.value = undefined;
+  foodStore.actions.refresh();
+}
 </script>