CSEC_PUBLIC/catalyst
1
0
Fork 0
mirror of https://github.com/SecurityBrewery/catalyst.git synced 2025-12-06 23:32:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor: create TicketDeleteDialog (#1079)

Browse Source
This commit is contained in:
Jonas Plum
2024-07-12 21:09:48 +02:00
committed by GitHub
parent 00b7ab585c
commit 82ad50d228
8 changed files with 83 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

11
ui/src/components/ticket/TicketActionBar.vue
View File

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

90
ui/src/components/ticket/TicketDeleteDialog.vue
View File

@@ -1,90 +0,0 @@
<script setup lang="ts">
import { Button } from '@/components/ui/button'
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger
} from '@/components/ui/dialog'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger
} from '@/components/ui/dropdown-menu'
import { toast } from '@/components/ui/toast'
import { MoreVertical, Trash2 } from 'lucide-vue-next'
import { useMutation, useQueryClient } from '@tanstack/vue-query'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { pb } from '@/lib/pocketbase'
import type { Ticket } from '@/lib/types'
const queryClient = useQueryClient()
const router = useRouter()
const props = defineProps<{
ticket: Ticket
}>()
const isOpen = ref(false)
const deleteTicketMutation = useMutation({
mutationFn: (): Promise<boolean> => pb.collection('tickets').delete(props.ticket.id),
onSuccess: () => {
router.push({ name: 'tickets', params: { type: props.ticket.expand.type.id } })
queryClient.invalidateQueries({ queryKey: ['tickets'] })
isOpen.value = false
},
onError: (error) =>
toast({
title: error.name,
description: error.message,
variant: 'destructive'
})
})
</script>
<template>
<Dialog v-model:open="isOpen">
<DropdownMenu>
<DropdownMenuTrigger as-child>
<Button variant="ghost" size="icon" :disabled="!ticket">
<MoreVertical class="size-4" />
<span class="sr-only">More</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem class="cursor-pointer" as-child>
<DialogTrigger class="w-full">
<Trash2 class="mr-2 h-4 w-4" />
Delete Ticket
</DialogTrigger>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<DialogContent>
<DialogHeader>
<DialogTitle> Delete Ticket "{{ props.ticket.name }}"</DialogTitle>
<DialogDescription> Are you sure you want to delete this ticket?</DialogDescription>
</DialogHeader>
<DialogFooter class="mt-2">
<DialogClose as-child>
<Button type="button" variant="secondary"> Cancel</Button>
</DialogClose>
<Button type="button" variant="destructive" @click="deleteTicketMutation.mutate()">
Delete
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</template>

16
ui/src/components/ticket/file/TicketFiles.vue
View File

@@ -1,9 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import DeleteDialog from '@/components/common/DeleteDialog.vue'
import TicketPanel from '@/components/ticket/TicketPanel.vue' import TicketPanel from '@/components/ticket/TicketPanel.vue'
import FileAddDialog from '@/components/ticket/file/FileAddDialog.vue' import FileAddDialog from '@/components/ticket/file/FileAddDialog.vue'
import { Button } from '@/components/ui/button' 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 { useQuery } from '@tanstack/vue-query'
import { ref, watch } from 'vue' import { ref, watch } from 'vue'
@@ -69,7 +70,18 @@ watch(config, (newConfig) => {
> >
<Download class="size-4" /> <Download class="size-4" />
</Button> </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> </div>
</TicketPanel> </TicketPanel>
</template> </template>

70
ui/src/components/ticket/link/LinkRemoveDialog.vue
View File

@@ -1,70 +0,0 @@
<script setup lang="ts">
import { Button } from '@/components/ui/button'
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger
} from '@/components/ui/dialog'
import { toast } from '@/components/ui/toast'
import { Trash2 } from 'lucide-vue-next'
import { useMutation, useQueryClient } from '@tanstack/vue-query'
import { ref } from 'vue'
import { pb } from '@/lib/pocketbase'
import type { Link, Ticket } from '@/lib/types'
const queryClient = useQueryClient()
const props = defineProps<{
ticket: Ticket
link: Link
}>()
const isOpen = ref(false)
const removeLinkMutation = useMutation({
mutationFn: (): Promise<boolean> => pb.collection('links').delete(props.link.id),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['tickets', props.ticket.id] })
isOpen.value = false
},
onError: (error) =>
toast({
title: error.name,
description: error.message,
variant: 'destructive'
})
})
</script>
<template>
<Dialog v-model:open="isOpen">
<DialogTrigger as-child>
<Button variant="ghost" size="icon" class="h-8 w-8">
<Trash2 class="size-4" />
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle> Delete Link "{{ props.link.name }}" </DialogTitle>
<DialogDescription> Are you sure you want to delete this link? </DialogDescription>
</DialogHeader>
<DialogFooter class="mt-2">
<DialogClose as-child>
<Button type="button" variant="secondary"> Cancel</Button>
</DialogClose>
<Button type="button" variant="destructive" @click="removeLinkMutation.mutate()">
Delete
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</template>

18
ui/src/components/ticket/link/TicketLinks.vue
View File

@@ -1,8 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import DeleteDialog from '@/components/common/DeleteDialog.vue'
import PanelListElement from '@/components/common/PanelListElement.vue' import PanelListElement from '@/components/common/PanelListElement.vue'
import TicketPanel from '@/components/ticket/TicketPanel.vue' import TicketPanel from '@/components/ticket/TicketPanel.vue'
import LinkAddDialog from '@/components/ticket/link/LinkAddDialog.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' import { ref } from 'vue'
@@ -38,7 +41,18 @@ const dialogOpen = ref(false)
</div> </div>
</a> </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> </PanelListElement>
</TicketPanel> </TicketPanel>
</template> </template>

70
ui/src/components/ticket/task/TaskRemoveDialog.vue
View File

@@ -1,70 +0,0 @@
<script setup lang="ts">
import { Button } from '@/components/ui/button'
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger
} from '@/components/ui/dialog'
import { toast } from '@/components/ui/toast'
import { Trash2 } from 'lucide-vue-next'
import { useMutation, useQueryClient } from '@tanstack/vue-query'
import { ref } from 'vue'
import { pb } from '@/lib/pocketbase'
import type { Task, Ticket } from '@/lib/types'
const queryClient = useQueryClient()
const props = defineProps<{
ticket: Ticket
task: Task
}>()
const isOpen = ref(false)
const removeTaskMutation = useMutation({
mutationFn: (): Promise<boolean> => pb.collection('tasks').delete(props.task.id),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['tickets', props.ticket.id] })
isOpen.value = false
},
onError: (error) =>
toast({
title: error.name,
description: error.message,
variant: 'destructive'
})
})
</script>
<template>
<Dialog v-model:open="isOpen">
<DialogTrigger as-child>
<Button variant="ghost" size="icon" class="h-8 w-8">
<Trash2 class="size-4" />
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle> Delete Task "{{ props.task.name }}" </DialogTitle>
<DialogDescription> Are you sure you want to delete this task? </DialogDescription>
</DialogHeader>
<DialogFooter class="mt-2">
<DialogClose as-child>
<Button type="button" variant="secondary"> Cancel</Button>
</DialogClose>
<Button type="button" variant="destructive" @click="removeTaskMutation.mutate()">
Delete
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</template>

38
ui/src/components/ticket/task/TicketTasks.vue
View File

@@ -1,4 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import DeleteDialog from '@/components/common/DeleteDialog.vue'
import PanelListElement from '@/components/common/PanelListElement.vue' import PanelListElement from '@/components/common/PanelListElement.vue'
import UserSelect from '@/components/common/UserSelect.vue' import UserSelect from '@/components/common/UserSelect.vue'
import DynamicInput from '@/components/input/DynamicInput.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 { Checkbox } from '@/components/ui/checkbox'
import { toast } from '@/components/ui/toast' 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 { useMutation, useQueryClient } from '@tanstack/vue-query'
import { pb } from '@/lib/pocketbase' import { pb } from '@/lib/pocketbase'
import type { Task, Ticket, User } from '@/lib/types' import type { Task, Ticket, User } from '@/lib/types'
import { handleError } from '@/lib/utils'
const queryClient = useQueryClient() const queryClient = useQueryClient()
@@ -28,12 +30,7 @@ const setTaskOwnerMutation = useMutation({
owner: update.user.id owner: update.user.id
}), }),
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['tickets', props.ticket.id] }), onSuccess: () => queryClient.invalidateQueries({ queryKey: ['tickets', props.ticket.id] }),
onError: (error) => onError: handleError
toast({
title: error.name,
description: error.message,
variant: 'destructive'
})
}) })
const update = (id: string, user: User) => setTaskOwnerMutation.mutate({ id, user }) const update = (id: string, user: User) => setTaskOwnerMutation.mutate({ id, user })
@@ -44,12 +41,7 @@ const checkMutation = useMutation({
open: !task.open open: !task.open
}), }),
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['tickets', props.ticket.id] }), onSuccess: () => queryClient.invalidateQueries({ queryKey: ['tickets', props.ticket.id] }),
onError: (error) => onError: handleError
toast({
title: error.name,
description: error.message,
variant: 'destructive'
})
}) })
const check = (task: Task) => checkMutation.mutate(task) const check = (task: Task) => checkMutation.mutate(task)
@@ -60,12 +52,7 @@ const updateTaskNameMutation = useMutation({
name: update.name name: update.name
}), }),
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['tickets', props.ticket.id] }), onSuccess: () => queryClient.invalidateQueries({ queryKey: ['tickets', props.ticket.id] }),
onError: (error) => onError: handleError
toast({
title: error.name,
description: error.message,
variant: 'destructive'
})
}) })
const updateTaskName = (id: string, name: string) => updateTaskNameMutation.mutate({ id, name }) 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 }} {{ task.expand.owner.name }}
</Button> </Button>
</UserSelect> </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> </div>
</PanelListElement> </PanelListElement>
</Card> </Card>