github/mealie
1
0
Fork 0
mirror of https://github.com/hay-kot/mealie.git synced 2025-07-14 00:54:00 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

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

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

52
frontend/pages/group/data/tools.vue
View file

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