chore: extract handleError function (#1078)

ui/src/components/dashboard/OpenTickets.vue

@@ -8,8 +8,6 @@ import { ChevronRight } from 'lucide-vue-next'
 
 import { useQuery } from '@tanstack/vue-query'
 import { intervalToDuration } from 'date-fns'
-import format from 'date-fns/format'
-import { computed } from 'vue'
 
 import { pb } from '@/lib/pocketbase'
 import type { Ticket } from '@/lib/types'

ui/src/components/ticket/TicketActionBar.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import Icon from '@/components/Icon.vue'
 import TicketCloseDialog from '@/components/ticket/TicketCloseDialog.vue'
-import TicketDeleteDialog from '@/components/ticket/TicketDeleteDialog.vue'
 import TicketUserSelect from '@/components/ticket/TicketUserSelect.vue'
 import { Button } from '@/components/ui/button'
 import {
@@ -10,7 +9,6 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
-import { toast } from '@/components/ui/toast'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 
 import { Check, CircleDot, Repeat } from 'lucide-vue-next'
@@ -21,6 +19,7 @@ import { useRouter } from 'vue-router'
 
 import { pb } from '@/lib/pocketbase'
 import type { Ticket, Type } from '@/lib/types'
+import { handleError } from '@/lib/utils'
 
 const queryClient = useQueryClient()
 const router = useRouter()
@@ -51,13 +50,7 @@ const changeTypeMutation = useMutation({
     queryClient.invalidateQueries({ queryKey: ['tickets'] })
     router.push({ name: 'tickets', params: { type: data.type, id: props.ticket.id } })
   },
-  onError: (error) => {
-    toast({
-      title: error.name,
-      description: error.message,
-      variant: 'destructive'
-    })
-  }
+  onError: handleError
 })
 
 const closeTicketMutation = useMutation({
@@ -71,13 +64,7 @@ const closeTicketMutation = useMutation({
       router.push({ name: 'tickets', params: { type: props.ticket.expand.type.id } })
     }
   },
-  onError: (error) => {
-    toast({
-      title: error.name,
-      description: error.message,
-      variant: 'destructive'
-    })
-  }
+  onError: handleError
 })
 
 const otherTypes = computed(() => types.value?.filter((t) => t.id !== props.ticket.expand.type.id))

ui/src/components/ticket/TicketCloseBar.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
-import { toast } from '@/components/ui/toast'
 
 import { Check, Repeat } from 'lucide-vue-next'
 
@@ -11,6 +10,7 @@ import { useRouter } from 'vue-router'
 
 import { pb } from '@/lib/pocketbase'
 import type { Ticket } from '@/lib/types'
+import { handleError } from '@/lib/utils'
 
 const queryClient = useQueryClient()
 const router = useRouter()
@@ -31,13 +31,7 @@ const closeTicketMutation = useMutation({
     queryClient.invalidateQueries({ queryKey: ['tickets'] })
     router.push({ name: 'tickets', params: { type: props.ticket.expand.type.id } })
   },
-  onError: (error) => {
-    toast({
-      title: error.name,
-      description: error.message,
-      variant: 'destructive'
-    })
-  }
+  onError: handleError
 })
 
 const closeButtonDisabled = false // computed(() => !props.ticket.open || message.value == '')

ui/src/components/ticket/TicketCloseDialog.vue

@@ -10,7 +10,6 @@ import {
   DialogTitle
 } from '@/components/ui/dialog'
 import { Textarea } from '@/components/ui/textarea'
-import { toast } from '@/components/ui/toast'
 
 import { useMutation, useQueryClient } from '@tanstack/vue-query'
 import { ref } from 'vue'
@@ -18,6 +17,7 @@ import { useRouter } from 'vue-router'
 
 import { pb } from '@/lib/pocketbase'
 import type { Ticket } from '@/lib/types'
+import { handleError } from '@/lib/utils'
 
 const queryClient = useQueryClient()
 const router = useRouter()
@@ -42,13 +42,7 @@ const closeTicketMutation = useMutation({
       router.push({ name: 'tickets', params: { type: props.ticket.expand.type.id } })
     }
   },
-  onError: (error) => {
-    toast({
-      title: error.name,
-      description: error.message,
-      variant: 'destructive'
-    })
-  }
+  onError: handleError
 })
 </script>
 

ui/src/components/ticket/TicketDisplay.vue

@@ -18,7 +18,6 @@ import { Card } from '@/components/ui/card'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Separator } from '@/components/ui/separator'
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import { toast } from '@/components/ui/toast'
 
 import { Edit } from 'lucide-vue-next'
 
@@ -28,6 +27,7 @@ import { useRoute } from 'vue-router'
 
 import { pb } from '@/lib/pocketbase'
 import type { Ticket, Type } from '@/lib/types'
+import { handleError } from '@/lib/utils'
 
 const route = useRoute()
 const queryClient = useQueryClient()
@@ -64,12 +64,7 @@ const editDescriptionMutation = useMutation({
     queryClient.invalidateQueries({ queryKey: ['tickets', id.value] })
     editMode.value = false
   },
-  onError: (error) =>
-    toast({
-      title: error.name,
-      description: error.message,
-      variant: 'destructive'
-    })
+  onError: handleError
 })
 
 const edit = () => (editMode.value = true)
@@ -80,12 +75,7 @@ const editStateMutation = useMutation({
       state: state
     }),
   onSuccess: () => queryClient.invalidateQueries({ queryKey: ['tickets', id.value] }),
-  onError: (error) =>
-    toast({
-      title: error.name,
-      description: error.message,
-      variant: 'destructive'
-    })
+  onError: handleError
 })
 
 const taskStatus = computed(() => {

ui/src/components/ticket/TicketHeader.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import DynamicInput from '@/components/input/DynamicInput.vue'
 import { Separator } from '@/components/ui/separator'
-import { toast } from '@/components/ui/toast'
 
 import { useMutation, useQueryClient } from '@tanstack/vue-query'
 import format from 'date-fns/format'
 import { ref } from 'vue'
 
 import { pb } from '@/lib/pocketbase'
-import type { Ticket, Type } from '@/lib/types'
+import type { Ticket } from '@/lib/types'
+import { handleError } from '@/lib/utils'
 
 const queryClient = useQueryClient()
 
@@ -24,12 +24,7 @@ const editNameMutation = useMutation({
       name: name.value
     }),
   onSuccess: () => queryClient.invalidateQueries({ queryKey: ['tickets', props.ticket.id] }),
-  onError: (error) =>
-    toast({
-      title: error.name,
-      description: error.message,
-      variant: 'destructive'
-    })
+  onError: handleError
 })
 
 const updateName = (value: string) => {

ui/src/components/ticket/TicketNewDialog.vue

@@ -13,7 +13,6 @@ import {
 } from '@/components/ui/dialog'
 import { FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
-import { toast } from '@/components/ui/toast'
 
 import { useMutation, useQueryClient } from '@tanstack/vue-query'
 import { defineRule, useForm } from 'vee-validate'
@@ -22,6 +21,7 @@ import { useRouter } from 'vue-router'
 
 import { pb } from '@/lib/pocketbase'
 import type { Ticket, Type } from '@/lib/types'
+import { handleError } from '@/lib/utils'
 
 const queryClient = useQueryClient()
 const router = useRouter()
@@ -51,12 +51,7 @@ const addTicketMutation = useMutation({
     queryClient.invalidateQueries({ queryKey: ['tickets'] })
     isOpen.value = false
   },
-  onError: (error) =>
-    toast({
-      title: error.name,
-      description: error.message,
-      variant: 'destructive'
-    })
+  onError: handleError
 })
 
 defineRule('required', (value: string) => {

ui/src/components/ticket/TicketUserSelect.vue

@@ -2,7 +2,6 @@
 import UserSelect from '@/components/common/UserSelect.vue'
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
 import { Button } from '@/components/ui/button'
-import { toast } from '@/components/ui/toast'
 
 import { LoaderCircle, User2 } from 'lucide-vue-next'
 
@@ -10,6 +9,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
 
 import { pb } from '@/lib/pocketbase'
 import type { Ticket, User } from '@/lib/types'
+import { handleError } from '@/lib/utils'
 
 const queryClient = useQueryClient()
 
@@ -34,12 +34,7 @@ const setTicketOwnerMutation = useMutation({
       owner: user.id
     }),
   onSuccess: () => queryClient.invalidateQueries({ queryKey: ['tickets'] }),
-  onError: (error) =>
-    toast({
-      title: error.name,
-      description: error.message,
-      variant: 'destructive'
-    })
+  onError: handleError
 })
 
 const update = (user: User) => setTicketOwnerMutation.mutate(user)

ui/src/components/ticket/comment/TicketComment.vue

@@ -17,7 +17,6 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
-import { toast } from '@/components/ui/toast'
 
 import { Edit, MoreVertical, Trash } from 'lucide-vue-next'
 
@@ -27,6 +26,7 @@ import { ref } from 'vue'
 
 import { pb } from '@/lib/pocketbase'
 import type { Comment } from '@/lib/types'
+import { handleError } from '@/lib/utils'
 
 const queryClient = useQueryClient()
 
@@ -44,12 +44,7 @@ const deleteCommentMutation = useMutation({
     queryClient.invalidateQueries({ queryKey: ['tickets', props.comment.ticket] })
     isOpen.value = false
   },
-  onError: (error) =>
-    toast({
-      title: error.name,
-      description: error.message,
-      variant: 'destructive'
-    })
+  onError: handleError
 })
 
 const editCommentMutation = useMutation({
@@ -61,12 +56,7 @@ const editCommentMutation = useMutation({
     queryClient.invalidateQueries({ queryKey: ['tickets', props.comment.ticket] })
     editMode.value = false
   },
-  onError: (error) =>
-    toast({
-      title: error.name,
-      description: error.message,
-      variant: 'destructive'
-    })
+  onError: handleError
 })
 
 const edit = () => (editMode.value = true)

ui/src/components/ticket/comment/TicketCommentInput.vue

@@ -2,7 +2,6 @@
 import MDEditor from '@/components/input/MDEditor.vue'
 import { Button } from '@/components/ui/button'
 import { Card } from '@/components/ui/card'
-import { toast } from '@/components/ui/toast'
 
 import { Plus } from 'lucide-vue-next'
 
@@ -11,6 +10,7 @@ import { ref } from 'vue'
 
 import { pb } from '@/lib/pocketbase'
 import type { Ticket } from '@/lib/types'
+import { handleError } from '@/lib/utils'
 
 const props = defineProps<{
   ticket: Ticket
@@ -34,12 +34,7 @@ const addCommentMutation = useMutation({
     queryClient.invalidateQueries({ queryKey: ['tickets', props.ticket.id] })
     message.value = ''
   },
-  onError: (error) =>
-    toast({
-      title: error.name,
-      description: error.message,
-      variant: 'destructive'
-    })
+  onError: handleError
 })
 </script>
 

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

@@ -10,13 +10,13 @@ import {
   DialogTitle
 } from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
-import { toast } from '@/components/ui/toast'
 
 import { useMutation, useQueryClient } from '@tanstack/vue-query'
 import { ref } from 'vue'
 
 import { pb } from '@/lib/pocketbase'
 import type { File as CFile, Ticket } from '@/lib/types'
+import { handleError } from '@/lib/utils'
 
 const queryClient = useQueryClient()
 
@@ -42,13 +42,7 @@ const addFileMutation = useMutation({
     queryClient.invalidateQueries({ queryKey: ['tickets', props.ticket.id] })
     isOpen.value = false
   },
-  onError: (error) => {
-    toast({
-      title: error.name,
-      description: error.message,
-      variant: 'destructive'
-    })
-  }
+  onError: handleError
 })
 
 const save = () => addFileMutation.mutate()

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

@@ -10,7 +10,6 @@ import {
   DialogTitle,
   DialogTrigger
 } from '@/components/ui/dialog'
-import { toast } from '@/components/ui/toast'
 
 import { Trash2 } from 'lucide-vue-next'
 
@@ -19,6 +18,7 @@ import { ref } from 'vue'
 
 import { pb } from '@/lib/pocketbase'
 import type { File, Ticket } from '@/lib/types'
+import { handleError } from '@/lib/utils'
 
 const queryClient = useQueryClient()
 
@@ -35,12 +35,7 @@ const removeFileMutation = useMutation({
     queryClient.invalidateQueries({ queryKey: ['tickets', props.ticket.id] })
     isOpen.value = false
   },
-  onError: (error) =>
-    toast({
-      title: error.name,
-      description: error.message,
-      variant: 'destructive'
-    })
+  onError: handleError
 })
 </script>
 

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

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import TicketPanel from '@/components/ticket/TicketPanel.vue'
 import FileAddDialog from '@/components/ticket/file/FileAddDialog.vue'
-import FileRemoveDialog from '@/components/ticket/file/FileRemoveDialog.vue'
 import { Button } from '@/components/ui/button'
 
 import { Download } from 'lucide-vue-next'

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

@@ -11,7 +11,6 @@ import {
 } from '@/components/ui/dialog'
 import { FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
-import { toast } from '@/components/ui/toast'
 
 import { useMutation, useQueryClient } from '@tanstack/vue-query'
 import { defineRule, useForm } from 'vee-validate'
@@ -19,6 +18,7 @@ import { onMounted, ref } from 'vue'
 
 import { pb } from '@/lib/pocketbase'
 import type { Link, Ticket } from '@/lib/types'
+import { handleError } from '@/lib/utils'
 
 const queryClient = useQueryClient()
 
@@ -39,12 +39,7 @@ const addLinkMutation = useMutation({
     queryClient.invalidateQueries({ queryKey: ['tickets', props.ticket.id] })
     isOpen.value = false
   },
-  onError: (error) =>
-    toast({
-      title: error.name,
-      description: error.message,
-      variant: 'destructive'
-    })
+  onError: handleError
 })
 
 defineRule('required', (value: string) => {

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

@@ -4,7 +4,6 @@ import UserSelect from '@/components/common/UserSelect.vue'
 import { Button } from '@/components/ui/button'
 import { Card } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
-import { toast } from '@/components/ui/toast'
 
 import { Plus, User2 } from 'lucide-vue-next'
 
@@ -13,6 +12,7 @@ import { computed, ref } from 'vue'
 
 import { pb } from '@/lib/pocketbase'
 import type { Task, Ticket } from '@/lib/types'
+import { handleError } from '@/lib/utils'
 
 const queryClient = useQueryClient()
 
@@ -40,12 +40,7 @@ const addTaskMutation = useMutation({
     owner.value = pb.authStore.model
     isOpen.value = false
   },
-  onError: (error) =>
-    toast({
-      title: error.name,
-      description: error.message,
-      variant: 'destructive'
-    })
+  onError: handleError
 })
 
 const submitDisabled = computed(() => !name.value || !owner.value)

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

@@ -3,7 +3,6 @@ import PanelListElement from '@/components/common/PanelListElement.vue'
 import UserSelect from '@/components/common/UserSelect.vue'
 import DynamicInput from '@/components/input/DynamicInput.vue'
 import TaskAddDialog from '@/components/ticket/task/TaskAddDialog.vue'
-import TaskRemoveDialog from '@/components/ticket/task/TaskRemoveDialog.vue'
 import { Button } from '@/components/ui/button'
 import { Card } from '@/components/ui/card'
 import { Checkbox } from '@/components/ui/checkbox'

ui/src/components/ticket/timeline/TicketTimelineInput.vue

@@ -3,7 +3,6 @@ import MDEditor from '@/components/input/MDEditor.vue'
 import { Button } from '@/components/ui/button'
 import { Card } from '@/components/ui/card'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import { toast } from '@/components/ui/toast'
 import { Calendar } from '@/components/ui/v-calendar'
 
 import { Calendar as CalendarIcon, Plus } from 'lucide-vue-next'
@@ -14,7 +13,7 @@ import { ref } from 'vue'
 
 import { pb } from '@/lib/pocketbase'
 import type { Ticket, TimelineItem } from '@/lib/types'
-import { cn } from '@/lib/utils'
+import { cn, handleError } from '@/lib/utils'
 
 const props = defineProps<{
   ticket: Ticket
@@ -38,12 +37,7 @@ const addCommentMutation = useMutation({
     message.value = ''
     newTimelineItem.value = false
   },
-  onError: (error) =>
-    toast({
-      title: error.name,
-      description: error.message,
-      variant: 'destructive'
-    })
+  onError: handleError
 })
 
 const addComment = () => addCommentMutation.mutate()

ui/src/components/ticket/timeline/TicketTimelineItem.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import PanelListElement from '@/components/common/PanelListElement.vue'
-import DynamicInput from '@/components/input/DynamicInput.vue'
 import DynamicMDEditor from '@/components/input/DynamicMDEditor.vue'
 import { Button } from '@/components/ui/button'
 import {
@@ -20,10 +19,9 @@ import {
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import { toast } from '@/components/ui/toast'
 import { Calendar } from '@/components/ui/v-calendar'
 
-import { Calendar as CalendarIcon, Edit, MoreVertical, Trash } from 'lucide-vue-next'
+import { Edit, MoreVertical, Trash } from 'lucide-vue-next'
 
 import { useMutation, useQueryClient } from '@tanstack/vue-query'
 import format from 'date-fns/format'
@@ -31,7 +29,7 @@ import { ref, watch } from 'vue'
 
 import { pb } from '@/lib/pocketbase'
 import type { TimelineItem } from '@/lib/types'
-import { cn } from '@/lib/utils'
+import { cn, handleError } from '@/lib/utils'
 
 const queryClient = useQueryClient()
 
@@ -51,12 +49,7 @@ const updateTimelineMutation = useMutation({
     queryClient.invalidateQueries({ queryKey: ['tickets', props.timelineItem.ticket] })
     editMode.value = false
   },
-  onError: (error) =>
-    toast({
-      title: error.name,
-      description: error.message,
-      variant: 'destructive'
-    })
+  onError: handleError
 })
 
 watch(time, () => {
@@ -71,12 +64,7 @@ const deleteTimelineItemMutation = useMutation({
     queryClient.invalidateQueries({ queryKey: ['tickets', props.timelineItem.ticket] })
     isOpen.value = false
   },
-  onError: (error) =>
-    toast({
-      title: error.name,
-      description: error.message,
-      variant: 'destructive'
-    })
+  onError: handleError
 })
 
 const edit = () => (editMode.value = true)

ui/src/components/ui/accordion/AccordionTrigger.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { ChevronDown } from 'lucide-vue-next'
-
 import { AccordionHeader, AccordionTrigger, type AccordionTriggerProps } from 'radix-vue'
 import { type HTMLAttributes, computed } from 'vue'
 

ui/src/lib/utils.ts

@@ -1,3 +1,5 @@
+import { toast } from '@/components/ui/toast'
+
 import { type ClassValue, clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
@@ -12,3 +14,11 @@ export function human(bytes: number) {
       ? (bytes / 1024).toFixed(1) + ' KB'
       : (bytes / 1048576).toFixed(1) + ' MB'
 }
+
+export function handleError(error: Error) {
+  toast({
+    title: error.name,
+    description: error.message,
+    variant: 'destructive'
+  })
+}