feat: bulk deletion on "Manage Data" page (#3056)

* labels bulk delete * add foods * bulk delete units * add categories * add tags * add tools * update translations * fix types for text * fix reactivity for stores --------- Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>
2025-05-24 01:12:54 -04:00 · 2024-02-04 19:55:14 +01:00 · 2024-02-04 19:55:14 +01:00 · 52c58e1dc0
commit 52c58e1dc0
parent 67b7fb007b
11 changed files with 310 additions and 22 deletions
--- a/frontend/components/global/CrudTable.vue
+++ b/frontend/components/global/CrudTable.vue
@ -57,12 +57,12 @@
          :buttons="[
            {
              icon: $globals.icons.edit,
-              text: $t('general.edit'),
+              text: $tc('general.edit'),
              event: 'edit',
            },
            {
              icon: $globals.icons.delete,
-              text: $t('general.delete'),
+              text: $tc('general.delete'),
              event: 'delete',
            },
          ]"
@ -160,6 +160,8 @@ export default defineComponent({
      props.bulkActions.forEach((action) => {
        handlers[action.event] = () => {
          context.emit(action.event, selected.value);
+          // clear selection
+          selected.value = [];
        };
      });

--- a/frontend/composables/store/use-food-store.ts
+++ b/frontend/composables/store/use-food-store.ts
@ -4,7 +4,7 @@ import { usePublicExploreApi } from "../api/api-client";
 import { useUserApi } from "~/composables/api";
 import { IngredientFood } from "~/lib/api/types/recipe";

-let foodStore: Ref<IngredientFood[] | null> | null = null;
+let foodStore: Ref<IngredientFood[] | null> = ref([]);

 /**
 * useFoodData returns a template reactive object
@ -39,11 +39,11 @@ export const usePublicFoodStore = function (groupSlug: string) {
  const actions = {
    ...usePublicStoreActions(api.foods, foodStore, loading),
    flushStore() {
-      foodStore = null;
+      foodStore = ref([]);
    },
  };

-  if (!foodStore) {
+  if (!foodStore.value) {
    foodStore = actions.getAll();
  }

@ -57,7 +57,7 @@ export const useFoodStore = function () {
  const actions = {
    ...useStoreActions(api.foods, foodStore, loading),
    flushStore() {
-      foodStore = null;
+      foodStore.value = [];
    },
  };

--- a/frontend/composables/store/use-label-store.ts
+++ b/frontend/composables/store/use-label-store.ts
@ -3,7 +3,7 @@ import { useStoreActions } from "../partials/use-actions-factory";
 import { MultiPurposeLabelOut } from "~/lib/api/types/labels";
 import { useUserApi } from "~/composables/api";

-let labelStore: Ref<MultiPurposeLabelOut[] | null> | null = null;
+let labelStore: Ref<MultiPurposeLabelOut[] | null> = ref([]);

 export function useLabelData() {
  const data = reactive({
@ -33,11 +33,11 @@ export function useLabelStore() {
  const actions = {
    ...useStoreActions<MultiPurposeLabelOut>(api.multiPurposeLabels, labelStore, loading),
    flushStore() {
-      labelStore = null;
+      labelStore.value =[];
    },
  };

-  if (!labelStore) {
+  if (!labelStore.value) {
    labelStore = actions.getAll();
  }

--- a/frontend/composables/store/use-unit-store.ts
+++ b/frontend/composables/store/use-unit-store.ts
@ -3,7 +3,7 @@ import { useStoreActions } from "../partials/use-actions-factory";
 import { useUserApi } from "~/composables/api";
 import { IngredientUnit } from "~/lib/api/types/recipe";

-let unitStore: Ref<IngredientUnit[] | null> | null = null;
+let unitStore: Ref<IngredientUnit[] | null> = ref([]);

 /**
 * useUnitData returns a template reactive object
@ -40,11 +40,11 @@ export const useUnitStore = function () {
  const actions = {
    ...useStoreActions<IngredientUnit>(api.units, unitStore, loading),
    flushStore() {
-      unitStore = null;
+      unitStore.value = [];
    },
  };

-  if (!unitStore) {
+  if (!unitStore.value) {
    unitStore = actions.getAll();
  }

--- a/frontend/lang/messages/en-US.json
+++ b/frontend/lang/messages/en-US.json
@ -199,7 +199,8 @@
    "upload-file": "Upload File",
    "created-on-date": "Created on: {0}",
    "unsaved-changes": "You have unsaved changes. Do you want to save before leaving? Okay to save, Cancel to discard changes.",
-    "clipboard-copy-failure": "Failed to copy to the clipboard."
+    "clipboard-copy-failure": "Failed to copy to the clipboard.",
+    "confirm-delete-generic-items": "Are you sure you want to delete the following items?"
  },
  "group": {
    "are-you-sure-you-want-to-delete-the-group": "Are you sure you want to delete <b>{groupName}<b/>?",
--- a/frontend/pages/group/data/categories.vue
+++ b/frontend/pages/group/data/categories.vue
@ -49,15 +49,41 @@
      </v-card-text>
    </BaseDialog>

+    <!-- Bulk Delete Dialog -->
+    <BaseDialog
+      v-model="state.bulkDeleteDialog"
+      width="650px"
+      :title="$tc('general.confirm')"
+      :icon="$globals.icons.alertCircle"
+      color="error"
+      @confirm="deleteSelected"
+    >
+      <v-card-text>
+        <p class="h4">{{ $t('general.confirm-delete-generic-items') }}</p>
+        <v-card outlined>
+          <v-virtual-scroll height="400" item-height="25" :items="bulkDeleteTarget">
+            <template #default="{ item }">
+              <v-list-item class="pb-2">
+                <v-list-item-content>
+                  <v-list-item-title>{{ item.name }}</v-list-item-title>
+                </v-list-item-content>
+              </v-list-item>
+            </template>
+          </v-virtual-scroll>
+        </v-card>
+      </v-card-text>
+    </BaseDialog>
+
    <!-- Data Table -->
    <BaseCardSectionTitle :icon="$globals.icons.categories" section :title="$tc('data-pages.categories.category-data')"> </BaseCardSectionTitle>
    <CrudTable
      :table-config="tableConfig"
      :headers.sync="tableHeaders"
      :data="categories || []"
-      :bulk-actions="[]"
+      :bulk-actions="[{icon: $globals.icons.delete, text: $tc('general.delete'), event: 'delete-selected'}]"
      @delete-one="deleteEventHandler"
      @edit-one="editEventHandler"
+      @delete-selected="bulkDeleteEventHandler"
    >
      <template #button-row>
        <BaseButton create @click="state.createDialog = true">{{ $t("general.create") }}</BaseButton>
@ -96,6 +122,7 @@ export default defineComponent({
      createDialog: false,
      editDialog: false,
      deleteDialog: false,
+      bulkDeleteDialog: false,
    });
    const categoryData = useCategoryData();
    const categoryStore = useCategoryStore();
@ -149,6 +176,24 @@ export default defineComponent({
      state.deleteDialog = false;
    }

+    // ============================================================
+    // Bulk Delete Category
+    const bulkDeleteTarget = ref<RecipeCategory[]>([]);
+    function bulkDeleteEventHandler(selection: RecipeCategory[]) {
+      bulkDeleteTarget.value = selection;
+      state.bulkDeleteDialog = true;
+    }
+
+    async function deleteSelected() {
+      for (const item of bulkDeleteTarget.value) {
+        if (!item.id) {
+          continue;
+        }
+        await categoryStore.actions.deleteOne(item.id);
+      }
+      bulkDeleteTarget.value = [];
+    }
+
    return {
      state,
      tableConfig,
@ -168,7 +213,12 @@ export default defineComponent({
      // delete
      deleteTarget,
      deleteEventHandler,
-      deleteCategory
+      deleteCategory,
+
+      // bulk delete
+      bulkDeleteTarget,
+      bulkDeleteEventHandler,
+      deleteSelected,
    };
  },
 });
--- a/frontend/pages/group/data/foods.vue
+++ b/frontend/pages/group/data/foods.vue
@ -155,16 +155,42 @@
      </v-card-text>
    </BaseDialog>

+    <!-- Bulk Delete Dialog -->
+    <BaseDialog
+      v-model="bulkDeleteDialog"
+      width="650px"
+      :title="$tc('general.confirm')"
+      :icon="$globals.icons.alertCircle"
+      color="error"
+      @confirm="deleteSelected"
+    >
+      <v-card-text>
+        <p class="h4">{{ $t('general.confirm-delete-generic-items') }}</p>
+        <v-card outlined>
+          <v-virtual-scroll height="400" item-height="25" :items="bulkDeleteTarget">
+            <template #default="{ item }">
+              <v-list-item class="pb-2">
+                <v-list-item-content>
+                  <v-list-item-title>{{ item.name }}</v-list-item-title>
+                </v-list-item-content>
+              </v-list-item>
+            </template>
+          </v-virtual-scroll>
+        </v-card>
+      </v-card-text>
+    </BaseDialog>
+
    <!-- Data Table -->
    <BaseCardSectionTitle :icon="$globals.icons.foods" section :title="$tc('data-pages.foods.food-data')"> </BaseCardSectionTitle>
    <CrudTable
      :table-config="tableConfig"
      :headers.sync="tableHeaders"
      :data="foods || []"
-      :bulk-actions="[]"
+      :bulk-actions="[{icon: $globals.icons.delete, text: $tc('general.delete'), event: 'delete-selected'}]"
      @delete-one="deleteEventHandler"
      @edit-one="editEventHandler"
      @create-one="createEventHandler"
+      @delete-selected="bulkDeleteEventHandler"
    >
      <template #button-row>
        <BaseButton create @click="createDialog = true" />
@ -306,6 +332,21 @@ export default defineComponent({
      deleteDialog.value = false;
    }

+    const bulkDeleteDialog = ref(false);
+    const bulkDeleteTarget = ref<IngredientFood[]>([]);
+
+    function bulkDeleteEventHandler(selection: IngredientFood[]) {
+      bulkDeleteTarget.value = selection;
+      bulkDeleteDialog.value = true;
+    }
+
+    async function deleteSelected() {
+      for (const item of bulkDeleteTarget.value) {
+        await foodStore.actions.deleteOne(item.id);
+      }
+      bulkDeleteTarget.value = [];
+    }
+
    // ============================================================
    // Alias Manager

@ -396,6 +437,10 @@ export default defineComponent({
      deleteDialog,
      deleteFood,
      deleteTarget,
+      bulkDeleteDialog,
+      bulkDeleteTarget,
+      bulkDeleteEventHandler,
+      deleteSelected,
      // Alias Manager
      aliasManagerDialog,
      aliasManagerEventHandler,
--- a/frontend/pages/group/data/labels.vue
+++ b/frontend/pages/group/data/labels.vue
@ -45,6 +45,31 @@
      </v-card-text>
    </BaseDialog>

+    <!-- Bulk Delete Dialog -->
+    <BaseDialog
+      v-model="state.bulkDeleteDialog"
+      width="650px"
+      :title="$tc('general.confirm')"
+      :icon="$globals.icons.alertCircle"
+      color="error"
+      @confirm="deleteSelected"
+    >
+      <v-card-text>
+        <p class="h4">{{ $t('general.confirm-delete-generic-items') }}</p>
+        <v-card outlined>
+          <v-virtual-scroll height="400" item-height="25" :items="bulkDeleteTarget">
+            <template #default="{ item }">
+              <v-list-item class="pb-2">
+                <v-list-item-content>
+                  <v-list-item-title>{{ item.name }}</v-list-item-title>
+                </v-list-item-content>
+              </v-list-item>
+            </template>
+          </v-virtual-scroll>
+        </v-card>
+      </v-card-text>
+    </BaseDialog>
+
    <!-- Seed Dialog-->
    <BaseDialog
      v-model="seedDialog"
@ -88,9 +113,10 @@
      :table-config="tableConfig"
      :headers.sync="tableHeaders"
      :data="labels || []"
-      :bulk-actions="[]"
+      :bulk-actions="[{icon: $globals.icons.delete, text: $tc('general.delete'), event: 'delete-selected'}]"
      @delete-one="deleteEventHandler"
      @edit-one="editEventHandler"
+      @delete-selected="bulkDeleteEventHandler"
    >
      <template #button-row>
        <BaseButton create @click="state.createDialog = true">{{ $t("general.create") }}</BaseButton>
@ -146,6 +172,7 @@ export default defineComponent({
      createDialog: false,
      editDialog: false,
      deleteDialog: false,
+      bulkDeleteDialog: false,
    });

    // ============================================================
@ -179,6 +206,21 @@ export default defineComponent({
      state.deleteDialog = false;
    }

+    // Bulk Delete
+    const bulkDeleteTarget = ref<MultiPurposeLabelSummary[]>([]);
+
+    function bulkDeleteEventHandler(selection: MultiPurposeLabelSummary[]) {
+      bulkDeleteTarget.value = selection;
+      state.bulkDeleteDialog = true;
+    }
+
+    async function deleteSelected() {
+      for (const item of bulkDeleteTarget.value) {
+        await labelStore.actions.deleteOne(item.id);
+      }
+      bulkDeleteTarget.value = [];
+    }
+
    // Edit

    const editLabel = ref<MultiPurposeLabelSummary | null>(null);
@ -244,6 +286,9 @@ export default defineComponent({
      deleteEventHandler,
      deleteLabel,
      deleteTarget,
+      bulkDeleteEventHandler,
+      deleteSelected,
+      bulkDeleteTarget,

      // Seed
      seedDatabase,
--- a/frontend/pages/group/data/tags.vue
+++ b/frontend/pages/group/data/tags.vue
@ -49,15 +49,41 @@
      </v-card-text>
    </BaseDialog>

+    <!-- Bulk Delete Dialog -->
+    <BaseDialog
+      v-model="state.bulkDeleteDialog"
+      width="650px"
+      :title="$tc('general.confirm')"
+      :icon="$globals.icons.alertCircle"
+      color="error"
+      @confirm="deleteSelected"
+    >
+      <v-card-text>
+        <p class="h4">{{ $t('general.confirm-delete-generic-items') }}</p>
+        <v-card outlined>
+          <v-virtual-scroll height="400" item-height="25" :items="bulkDeleteTarget">
+            <template #default="{ item }">
+              <v-list-item class="pb-2">
+                <v-list-item-content>
+                  <v-list-item-title>{{ item.name }}</v-list-item-title>
+                </v-list-item-content>
+              </v-list-item>
+            </template>
+          </v-virtual-scroll>
+        </v-card>
+      </v-card-text>
+    </BaseDialog>
+
    <!-- Data Table -->
    <BaseCardSectionTitle :icon="$globals.icons.tags" section :title="$tc('data-pages.tags.tag-data')"> </BaseCardSectionTitle>
    <CrudTable
      :table-config="tableConfig"
      :headers.sync="tableHeaders"
      :data="tags || []"
-      :bulk-actions="[]"
+      :bulk-actions="[{icon: $globals.icons.delete, text: $tc('general.delete'), event: 'delete-selected'}]"
      @delete-one="deleteEventHandler"
      @edit-one="editEventHandler"
+      @delete-selected="bulkDeleteEventHandler"
    >
      <template #button-row>
        <BaseButton create @click="state.createDialog = true">{{ $t("general.create") }}</BaseButton>
@ -96,6 +122,7 @@ export default defineComponent({
      createDialog: false,
      editDialog: false,
      deleteDialog: false,
+      bulkDeleteDialog: false,
    });

    const tagData = useTagData();
@ -150,6 +177,24 @@ export default defineComponent({
      state.deleteDialog = false;
    }

+    // ============================================================
+    // Bulk Delete Tag
+    const bulkDeleteTarget = ref<RecipeTag[]>([]);
+    function bulkDeleteEventHandler(selection: RecipeTag[]) {
+      bulkDeleteTarget.value = selection;
+      state.bulkDeleteDialog = true;
+    }
+
+    async function deleteSelected() {
+      for (const item of bulkDeleteTarget.value) {
+        if (!item.id) {
+          continue;
+        }
+        await tagStore.actions.deleteOne(item.id);
+      }
+      bulkDeleteTarget.value = [];
+    }
+
    return {
      state,
      tableConfig,
@ -169,7 +214,12 @@ export default defineComponent({
      // delete
      deleteTarget,
      deleteEventHandler,
-      deleteTag
+      deleteTag,
+
+      // bulk delete
+      bulkDeleteTarget,
+      bulkDeleteEventHandler,
+      deleteSelected,
    };
  },
 });
--- a/frontend/pages/group/data/tools.vue
+++ b/frontend/pages/group/data/tools.vue
@ -51,15 +51,41 @@
      </v-card-text>
    </BaseDialog>

+    <!-- Bulk Delete Dialog -->
+    <BaseDialog
+      v-model="state.bulkDeleteDialog"
+      width="650px"
+      :title="$tc('general.confirm')"
+      :icon="$globals.icons.alertCircle"
+      color="error"
+      @confirm="deleteSelected"
+    >
+      <v-card-text>
+        <p class="h4">{{ $t('general.confirm-delete-generic-items') }}</p>
+        <v-card outlined>
+          <v-virtual-scroll height="400" item-height="25" :items="bulkDeleteTarget">
+            <template #default="{ item }">
+              <v-list-item class="pb-2">
+                <v-list-item-content>
+                  <v-list-item-title>{{ item.name }}</v-list-item-title>
+                </v-list-item-content>
+              </v-list-item>
+            </template>
+          </v-virtual-scroll>
+        </v-card>
+      </v-card-text>
+    </BaseDialog>
+
    <!-- Data Table -->
    <BaseCardSectionTitle :icon="$globals.icons.potSteam" section :title="$tc('data-pages.tools.tool-data')"> </BaseCardSectionTitle>
    <CrudTable
      :table-config="tableConfig"
      :headers.sync="tableHeaders"
      :data="tools || []"
-      :bulk-actions="[]"
+      :bulk-actions="[{icon: $globals.icons.delete, text: $tc('general.delete'), event: 'delete-selected'}]"
      @delete-one="deleteEventHandler"
      @edit-one="editEventHandler"
+      @delete-selected="bulkDeleteEventHandler"
    >
      <template #button-row>
        <BaseButton create @click="state.createDialog = true">{{ $t("general.create") }}</BaseButton>
@ -108,6 +134,7 @@ export default defineComponent({
      createDialog: false,
      editDialog: false,
      deleteDialog: false,
+      bulkDeleteDialog: false,
    });

    const toolData = useToolData();
@ -162,6 +189,22 @@ export default defineComponent({
      state.deleteDialog = false;
    }

+    // ============================================================
+    // Bulk Delete Tag
+
+    const bulkDeleteTarget = ref<RecipeTool[]>([]);
+    function bulkDeleteEventHandler(selection: RecipeTool[]) {
+      bulkDeleteTarget.value = selection;
+      state.bulkDeleteDialog = true;
+    }
+
+    async function deleteSelected() {
+      for (const item of bulkDeleteTarget.value) {
+        await toolStore.actions.deleteOne(item.id);
+      }
+      bulkDeleteTarget.value = [];
+    }
+
    return {
      state,
      tableConfig,
@ -181,7 +224,12 @@ export default defineComponent({
      // delete
      deleteTarget,
      deleteEventHandler,
-      deleteTool
+      deleteTool,
+
+      // bulk delete
+      bulkDeleteTarget,
+      bulkDeleteEventHandler,
+      deleteSelected,
    };
  },
 });
--- a/frontend/pages/group/data/units.vue
+++ b/frontend/pages/group/data/units.vue
@ -129,6 +129,31 @@
      </v-card-text>
    </BaseDialog>

+    <!-- Bulk Delete Dialog -->
+    <BaseDialog
+      v-model="bulkDeleteDialog"
+      width="650px"
+      :title="$tc('general.confirm')"
+      :icon="$globals.icons.alertCircle"
+      color="error"
+      @confirm="deleteSelected"
+    >
+      <v-card-text>
+        <p class="h4">{{ $t('general.confirm-delete-generic-items') }}</p>
+        <v-card outlined>
+          <v-virtual-scroll height="400" item-height="25" :items="bulkDeleteTarget">
+            <template #default="{ item }">
+              <v-list-item class="pb-2">
+                <v-list-item-content>
+                  <v-list-item-title>{{ item.name }}</v-list-item-title>
+                </v-list-item-content>
+              </v-list-item>
+            </template>
+          </v-virtual-scroll>
+        </v-card>
+      </v-card-text>
+    </BaseDialog>
+
    <!-- Seed Dialog-->
    <BaseDialog
      v-model="seedDialog"
@ -172,10 +197,11 @@
      :table-config="tableConfig"
      :headers.sync="tableHeaders"
      :data="units || []"
-      :bulk-actions="[]"
+      :bulk-actions="[{icon: $globals.icons.delete, text: $tc('general.delete'), event: 'delete-selected'}]"
      @delete-one="deleteEventHandler"
      @edit-one="editEventHandler"
      @create-one="createEventHandler"
+      @delete-selected="bulkDeleteEventHandler"
    >
      <template #button-row>
        <BaseButton create @click="createDialog = true" />
@ -339,6 +365,22 @@ export default defineComponent({
      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() {
+      for (const item of bulkDeleteTarget.value) {
+        await unitActions.deleteOne(item.id);
+      }
+      bulkDeleteTarget.value = [];
+    }
+
    // ============================================================
    // Alias Manager

@ -423,6 +465,11 @@ export default defineComponent({
      deleteDialog,
      deleteUnit,
      deleteTarget,
+      // Bulk Delete
+      bulkDeleteDialog,
+      bulkDeleteEventHandler,
+      bulkDeleteTarget,
+      deleteSelected,
      // Alias Manager
      aliasManagerDialog,
      aliasManagerEventHandler,