refactor: create TicketDeleteDialog

ui/src/components/ticket/file/FileRemoveDialog.vue → ui/src/components/common/DeleteDialog.vue

@@ -15,25 +15,30 @@ import { Trash2 } from 'lucide-vue-next'
 
 import { useMutation, useQueryClient } from '@tanstack/vue-query'
 import { ref } from 'vue'
+import { type RouteLocationRaw, useRouter } from 'vue-router'
 
 import { pb } from '@/lib/pocketbase'
-import type { File, Ticket } from '@/lib/types'
 import { handleError } from '@/lib/utils'
 
 const queryClient = useQueryClient()
+const router = useRouter()
 
 const props = defineProps<{
-  ticket: Ticket
-  file: File
+  collection: string
+  id: string
+  name: string
+  singular: string
+  queryKey: string[]
+  to?: RouteLocationRaw
 }>()
 
 const isOpen = ref(false)
 
-const removeFileMutation = useMutation({
-  mutationFn: (): Promise<boolean> => pb.collection('files').delete(props.file.id),
+const deleteMutation = useMutation({
+  mutationFn: () => pb.collection(props.collection).delete(props.id),
   onSuccess: () => {
-    queryClient.invalidateQueries({ queryKey: ['tickets', props.ticket.id] })
-    isOpen.value = false
+    queryClient.invalidateQueries({ queryKey: props.queryKey })
+    if (props.to) router.push(props.to)
   },
   onError: handleError
 })
@@ -42,23 +47,27 @@ const removeFileMutation = useMutation({
 <template>
   <Dialog v-model:open="isOpen">
     <DialogTrigger as-child>
-      <Button variant="ghost" size="icon">
-        <Trash2 class="h-4 w-4" />
-      </Button>
+      <slot>
+        <Button variant="outline">
+          <Trash2 class="mr-2 h-4 w-4" />
+          Delete {{ props.singular }}
+        </Button>
+      </slot>
     </DialogTrigger>
+
     <DialogContent>
       <DialogHeader>
-        <DialogTitle> Delete File "{{ props.file.name }}" </DialogTitle>
-        <DialogDescription> Are you sure you want to delete this file? </DialogDescription>
+        <DialogTitle> Delete {{ props.singular }} "{{ props.name }}"</DialogTitle>
+        <DialogDescription>
+          Are you sure you want to delete this {{ props.singular }}?</DialogDescription
+        >
       </DialogHeader>
 
       <DialogFooter class="mt-2">
         <DialogClose as-child>
-          <Button type="button" variant="secondary"> Cancel</Button>
+          <Button type="button" variant="secondary">Cancel</Button>
         </DialogClose>
-        <Button type="button" variant="destructive" @click="removeFileMutation.mutate()">
-          Delete
-        </Button>
+        <Button type="button" variant="destructive" @click="deleteMutation.mutate"> Delete </Button>
       </DialogFooter>
     </DialogContent>
   </Dialog>

ui/src/components/ticket/TicketActionBar.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import Icon from '@/components/Icon.vue'
+import DeleteDialog from '@/components/common/DeleteDialog.vue'
 import TicketCloseDialog from '@/components/ticket/TicketCloseDialog.vue'
 import TicketUserSelect from '@/components/ticket/TicketUserSelect.vue'
 import { Button } from '@/components/ui/button'
@@ -141,6 +142,14 @@ const closeTicketDialogOpen = ref(false)
         <TooltipContent>Change User</TooltipContent>
       </Tooltip>
     </div>
-    <TicketDeleteDialog :ticket="ticket" />
+    <DeleteDialog
+      v-if="ticket"
+      :collection="'tickets'"
+      :id="ticket.id"
+      :name="ticket.name"
+      singular="Ticket"
+      :to="{ name: 'tickets' }"
+      :queryKey="['tickets']"
+    />
   </div>
 </template>

ui/src/components/ticket/file/TicketFiles.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
+import DeleteDialog from '@/components/common/DeleteDialog.vue'
 import TicketPanel from '@/components/ticket/TicketPanel.vue'
 import FileAddDialog from '@/components/ticket/file/FileAddDialog.vue'
 import { Button } from '@/components/ui/button'
 
-import { Download } from 'lucide-vue-next'
+import { Download, Trash2 } from 'lucide-vue-next'
 
 import { useQuery } from '@tanstack/vue-query'
 import { ref, watch } from 'vue'
@@ -69,7 +70,18 @@ watch(config, (newConfig) => {
       >
         <Download class="size-4" />
       </Button>
-      <FileRemoveDialog :ticket="ticket" :file="file" />
+      <DeleteDialog
+        v-if="file"
+        collection="files"
+        :id="file.id"
+        :name="file.name"
+        singular="File"
+        :queryKey="['tickets', ticket.id]"
+      >
+        <Button variant="ghost" size="icon" class="h-8 w-8">
+          <Trash2 class="size-4" />
+        </Button>
+      </DeleteDialog>
     </div>
   </TicketPanel>
 </template>

ui/src/components/ticket/link/TicketLinks.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
+import DeleteDialog from '@/components/common/DeleteDialog.vue'
 import PanelListElement from '@/components/common/PanelListElement.vue'
 import TicketPanel from '@/components/ticket/TicketPanel.vue'
 import LinkAddDialog from '@/components/ticket/link/LinkAddDialog.vue'
-import LinkRemoveDialog from '@/components/ticket/link/LinkRemoveDialog.vue'
+import { Button } from '@/components/ui/button'
+
+import { Trash2 } from 'lucide-vue-next'
 
 import { ref } from 'vue'
 
@@ -38,7 +41,18 @@ const dialogOpen = ref(false)
         </div>
       </a>
 
-      <LinkRemoveDialog :ticket="ticket" :link="link" />
+      <DeleteDialog
+        v-if="link"
+        collection="links"
+        :id="link.id"
+        :name="link.name"
+        singular="Link"
+        :queryKey="['tickets', ticket.id]"
+      >
+        <Button variant="ghost" size="icon" class="h-8 w-8">
+          <Trash2 class="size-4" />
+        </Button>
+      </DeleteDialog>
     </PanelListElement>
   </TicketPanel>
 </template>