77 lines
2.0 KiB
Vue
77 lines
2.0 KiB
Vue
<script lang="ts" setup generic="T = Task">
|
|
import type { Table as VueTable } from '@tanstack/vue-table'
|
|
|
|
import { toast } from 'vue-sonner'
|
|
|
|
import ConfirmDialog from '@/components/confirm-dialog.vue'
|
|
|
|
import type { Task } from '../data/schema'
|
|
|
|
const { table } = defineProps<{
|
|
table: VueTable<T>
|
|
}>()
|
|
|
|
const openModel = defineModel<boolean>('open', {
|
|
default: false,
|
|
})
|
|
|
|
const CONFIRM_WORD = 'DELETE'
|
|
|
|
const confirmValue = ref('')
|
|
|
|
const selectedRows = computed(() => table.getSelectedRowModel().rows)
|
|
const selectedCount = computed(() => selectedRows.value.length || 0)
|
|
function handleConfirm() {
|
|
if (confirmValue.value !== CONFIRM_WORD) {
|
|
toast.error(`Please type "${CONFIRM_WORD}" to confirm deletion.`)
|
|
return
|
|
}
|
|
|
|
openModel.value = false
|
|
|
|
toast.promise(new Promise(resolve => setTimeout(resolve, 2000)), {
|
|
loading: 'Deleting tasks...',
|
|
success: () => {
|
|
table.resetRowSelection()
|
|
return `Successfully deleted ${selectedRows.value.length} tasks.`
|
|
},
|
|
error: 'Failed to delete tasks.',
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<ConfirmDialog
|
|
v-model:open="openModel"
|
|
confirm-button-text="Delete"
|
|
destructive
|
|
:disabled="confirmValue.trim() !== CONFIRM_WORD"
|
|
@confirm="handleConfirm"
|
|
>
|
|
<template #title>
|
|
Delete {{ selectedCount }} tasks?
|
|
</template>
|
|
<template #description>
|
|
Are you sure you want to delete the selected tasks? <br>
|
|
This action cannot be undone.
|
|
</template>
|
|
|
|
<template #default>
|
|
<UiLabel class="my-4 flex flex-col items-start gap-1.5">
|
|
<span>Confirm by typing {{ CONFIRM_WORD }}:</span>
|
|
<UiInput
|
|
v-model="confirmValue"
|
|
:placeholder="`Type "${CONFIRM_WORD}" to confirm.`"
|
|
/>
|
|
</UiLabel>
|
|
|
|
<UiAlert variant="destructive">
|
|
<UiAlertTitle>Warning!</UiAlertTitle>
|
|
<UiAlertDescription>
|
|
Please be careful, this operation can not be rolled back.
|
|
</UiAlertDescription>
|
|
</UiAlert>
|
|
</template>
|
|
</ConfirmDialog>
|
|
</template>
|