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/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,