refactor: improve setup and maintainability (#1067)

ui/src/components/dashboard/OpenTasks.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import PanelListElement from '@/components/common/PanelListElement.vue'
+import { buttonVariants } from '@/components/ui/button'
+import { Card } from '@/components/ui/card'
+
+import { ChevronRight } from 'lucide-vue-next'
+
+import { useQuery } from '@tanstack/vue-query'
+
+import { pb } from '@/lib/pocketbase'
+import type { Task } from '@/lib/types'
+import { cn } from '@/lib/utils'
+
+const {
+  isPending,
+  isError,
+  data: tasks,
+  error
+} = useQuery({
+  queryKey: ['tasks'],
+  queryFn: (): Promise<Array<Task>> => {
+    if (!pb.authStore.model) return Promise.reject('Not authenticated')
+    return pb.collection('tasks').getFullList({
+      sort: '-created',
+      filter: pb.filter(`open = true && owner = {:owner}`, { owner: pb.authStore.model.id }),
+      expand: 'owner,ticket'
+    })
+  }
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <Card>
+      <div v-if="tasks && tasks.length === 0" class="p-2 text-center text-sm text-gray-500">
+        No open tasks
+      </div>
+      <PanelListElement v-else v-for="task in tasks" :key="task.id" class="pr-1">
+        <span>{{ task.name }}</span>
+        <RouterLink
+          :to="{
+            name: 'tickets',
+            params: { type: task.expand.ticket.type, id: task.expand.ticket.id }
+          }"
+          :class="cn(buttonVariants({ variant: 'outline', size: 'sm' }), 'ml-auto h-8')"
+        >
+          <span class="flex flex-row items-center text-sm text-gray-500">
+            Go to {{ task.expand.ticket.name }}
+            <ChevronRight class="ml-2 h-4 w-4" />
+          </span>
+        </RouterLink>
+      </PanelListElement>
+    </Card>
+  </div>
+</template>