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>

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,
     };
   },
 });