refactor: create TicketDeleteDialog (#1079)

ui/src/components/ticket/task/TicketTasks.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import DeleteDialog from '@/components/common/DeleteDialog.vue'
 import PanelListElement from '@/components/common/PanelListElement.vue'
 import UserSelect from '@/components/common/UserSelect.vue'
 import DynamicInput from '@/components/input/DynamicInput.vue'
@@ -8,12 +9,13 @@ import { Card } from '@/components/ui/card'
 import { Checkbox } from '@/components/ui/checkbox'
 import { toast } from '@/components/ui/toast'
 
-import { User2 } from 'lucide-vue-next'
+import { Trash2, User2 } from 'lucide-vue-next'
 
 import { useMutation, useQueryClient } from '@tanstack/vue-query'
 
 import { pb } from '@/lib/pocketbase'
 import type { Task, Ticket, User } from '@/lib/types'
+import { handleError } from '@/lib/utils'
 
 const queryClient = useQueryClient()
 
@@ -28,12 +30,7 @@ const setTaskOwnerMutation = useMutation({
       owner: update.user.id
     }),
   onSuccess: () => queryClient.invalidateQueries({ queryKey: ['tickets', props.ticket.id] }),
-  onError: (error) =>
-    toast({
-      title: error.name,
-      description: error.message,
-      variant: 'destructive'
-    })
+  onError: handleError
 })
 
 const update = (id: string, user: User) => setTaskOwnerMutation.mutate({ id, user })
@@ -44,12 +41,7 @@ const checkMutation = useMutation({
       open: !task.open
     }),
   onSuccess: () => queryClient.invalidateQueries({ queryKey: ['tickets', props.ticket.id] }),
-  onError: (error) =>
-    toast({
-      title: error.name,
-      description: error.message,
-      variant: 'destructive'
-    })
+  onError: handleError
 })
 
 const check = (task: Task) => checkMutation.mutate(task)
@@ -60,12 +52,7 @@ const updateTaskNameMutation = useMutation({
       name: update.name
     }),
   onSuccess: () => queryClient.invalidateQueries({ queryKey: ['tickets', props.ticket.id] }),
-  onError: (error) =>
-    toast({
-      title: error.name,
-      description: error.message,
-      variant: 'destructive'
-    })
+  onError: handleError
 })
 
 const updateTaskName = (id: string, name: string) => updateTaskNameMutation.mutate({ id, name })
@@ -104,7 +91,18 @@ const updateTaskName = (id: string, name: string) => updateTaskNameMutation.muta
               {{ task.expand.owner.name }}
             </Button>
           </UserSelect>
-          <TaskRemoveDialog :ticket="ticket" :task="task" />
+          <DeleteDialog
+            v-if="task"
+            collection="tasks"
+            :id="task.id"
+            :name="task.name"
+            :singular="'Task'"
+            :queryKey="['tickets', ticket.id]"
+          >
+            <Button variant="ghost" size="icon" class="h-8 w-8">
+              <Trash2 class="size-4" />
+            </Button>
+          </DeleteDialog>
         </div>
       </PanelListElement>
     </Card>