feat: add loading

src/views/tasks/TasksBoardView.vue

@@ -29,10 +29,10 @@
             draggable="true"
             @dragstart="onDragStart(task)"
             @dragend="onDragEnd"
-            @click.stop="toggleDesc(task.id)"
+            @click.stop="openEdit(task)"
           >
             <div class="font-medium">{{ task.title }}</div>
-            <div v-if="expandedDescs.has(task.id) && task.description" class="muted-note mt-1 line-clamp-2 text-[0.85rem]">{{ task.description }}</div>
+            <div v-if="task.description" class="muted-note mt-1 line-clamp-2 text-[0.85rem]">{{ task.description }}</div>
             <div class="mt-2 text-[0.8rem]" v-if="task.assigneeName">
               <span class="flex items-center gap-1 muted-note">
                 <i class="pi pi-user text-[0.7rem]"></i> {{ task.assigneeName }}
@@ -80,7 +80,7 @@ const route = useRoute()
 const toast = useToast()
 const auth = useAuthStore()
 
-const projectId = String(route.params.id)
+const projectId = computed(() => String(route.params.id))
 const tasks = ref<Task[]>([])
 const members = ref<{ userId: string; displayName: string }[]>([])
 
@@ -89,13 +89,10 @@ const dragOverStatus = ref<TaskStatus | null>(null)
 
 const dialogVisible = ref(false)
 const editingTask = ref<Task | null>(null)
-const expandedDescs = ref(new Set<string>())
 
-function toggleDesc(id: string) {
-  const s = new Set(expandedDescs.value)
-  if (s.has(id)) s.delete(id)
-  else s.add(id)
-  expandedDescs.value = s
+function openEdit(task: Task) {
+  editingTask.value = task
+  dialogVisible.value = true
 }
 
 const columns = [
@@ -111,7 +108,7 @@ function tasksIn(status: TaskStatus) {
 
 async function load() {
   try {
-    const res = await getTasks(projectId, undefined, 1, 100)
+    const res = await getTasks(projectId.value, undefined, 1, 100)
     tasks.value = res.items
   } catch (e) {
     toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
@@ -120,7 +117,7 @@ async function load() {
 
 async function loadMembers() {
   try {
-    const res = await getMembers(projectId, 1, 100)
+    const res = await getMembers(projectId.value, 1, 100)
     members.value = res.items.map((m) => ({
       userId: m.userId,
       displayName: m.displayName,
@@ -196,10 +193,14 @@ function formatDate(v: string) {
   return new Date(v).toLocaleDateString()
 }
 
-onMounted(async () => {
-  await loadMembers()
-  await load()
-})
+watch(
+  () => route.params.id,
+  async () => {
+    await loadMembers()
+    await load()
+  },
+  { immediate: true },
+)
 </script>
 
 <style scoped>