Merge branch 'mealie-next' into feat-frontend-access-controll

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" />
@@ -305,6 +331,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
 
@@ -395,6 +436,10 @@ export default defineComponent({
       deleteDialog,
       deleteFood,
       deleteTarget,
+      bulkDeleteDialog,
+      bulkDeleteTarget,
+      bulkDeleteEventHandler,
+      deleteSelected,
       // Alias Manager
       aliasManagerDialog,
       aliasManagerEventHandler,