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>
This commit is contained in:
Kuchenpirat 2024-02-04 19:55:14 +01:00 committed by GitHub
parent 67b7fb007b
commit 52c58e1dc0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 310 additions and 22 deletions

View file

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