feat: Linear-style Task Board mit Drag&Drop

frontend/src/stores/tasks.ts

@@ -1,9 +1,10 @@
 /**
- * Task Store – V2 Dashboard
+ * Task Store – V2 Dashboard + Task Board
  *
- * Fetches tasks from /api/dashboard/tasks and maps them into
- * TaskItem[] format for the TaskStrip component.
+ * Fetches tasks from /api/dashboard/tasks and /api/dashboard/tasks/board
+ * and maps them into TaskItem[] format for the TaskStrip component.
  *
+ * Board state: grouped by column (offen, inProgress, review, done, blocked)
  * Auto-refresh: every 30 seconds.
  */
 import { defineStore } from 'pinia'
@@ -24,6 +25,14 @@ interface DashboardTaskDto {
   updatedAt: string
 }
 
+export interface BoardGroup {
+  offen: DashboardTaskDto[]
+  inProgress: DashboardTaskDto[]
+  review: DashboardTaskDto[]
+  done: DashboardTaskDto[]
+  blocked: DashboardTaskDto[]
+}
+
 /* ── State Mapping ────────────────────────────────── */
 
 function mapPriority(priority: string): TaskItem['priority'] {
@@ -67,6 +76,18 @@ export const useTaskStore = defineStore('tasks', {
     loading: false,
     error: null as string | null,
     refreshInterval: null as ReturnType<typeof setInterval> | null,
+    boardRefreshInterval: null as ReturnType<typeof setInterval> | null,
+
+    // Board state
+    board: {
+      offen: [] as DashboardTaskDto[],
+      inProgress: [] as DashboardTaskDto[],
+      review: [] as DashboardTaskDto[],
+      done: [] as DashboardTaskDto[],
+      blocked: [] as DashboardTaskDto[],
+    } as BoardGroup,
+    boardLoading: false,
+    boardError: null as string | null,
   }),
 
   getters: {
@@ -74,7 +95,7 @@ export const useTaskStore = defineStore('tasks', {
   },
 
   actions: {
-    /* ── API: Fetch tasks ───────────────────────── */
+    /* ── API: Fetch tasks (for TaskStrip) ─────────── */
     async fetchTasks() {
       this.loading = true
       try {
@@ -91,7 +112,97 @@ export const useTaskStore = defineStore('tasks', {
       }
     },
 
-    /* ── API: Add task ──────────────────────────── */
+    /* ── API: Fetch board (for TaskBoardView) ─────── */
+    async fetchBoard() {
+      this.boardLoading = true
+      try {
+        const res = await apiFetch('/api/dashboard/tasks/board')
+        if (!res.ok) throw new Error(`HTTP ${res.status}`)
+        const data: BoardGroup = await res.json()
+        this.board = data
+        this.boardError = null
+      } catch (err) {
+        console.warn('[TaskStore] fetchBoard failed', err)
+        this.boardError = 'Board could not be loaded'
+      } finally {
+        this.boardLoading = false
+      }
+    },
+
+    /* ── API: Move task (Drag & Drop) ─────────────── */
+    async moveTask(id: string, newState: string) {
+      // Map board group key to canonical state string for the API payload
+      const canonicalMap: Record<string, string> = {
+        offen: 'Backlog',
+        inProgress: 'In progress',
+        review: 'Review',
+        done: 'Done',
+        blocked: 'Blocked',
+      }
+
+      // Save previous state for rollback
+      const prevBoard = JSON.parse(JSON.stringify(this.board)) as BoardGroup
+
+      // Optimistic: find the task in current board and move it
+      const findAndRemove = (arr: DashboardTaskDto[]): DashboardTaskDto | null => {
+        const idx = arr.findIndex(t => t.id === id)
+        if (idx === -1) return null
+        return arr.splice(idx, 1)[0]
+      }
+
+      const task =
+        findAndRemove(this.board.offen) ??
+        findAndRemove(this.board.inProgress) ??
+        findAndRemove(this.board.review) ??
+        findAndRemove(this.board.blocked) ??
+        findAndRemove(this.board.done)
+
+      if (task) {
+        const canonicalState = canonicalMap[newState] ?? newState
+        task.state = canonicalState
+        const targetKey = newState as keyof BoardGroup
+        if (this.board[targetKey]) {
+          this.board[targetKey].push(task)
+        }
+      }
+
+      // Actually call API with the board group key (backend handles mapping)
+      try {
+        const res = await apiFetch(`/api/dashboard/tasks/${id}/move`, {
+          method: 'PATCH',
+          body: JSON.stringify({ state: newState }),
+        })
+        if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      } catch (err) {
+        console.warn('[TaskStore] moveTask failed, rolling back', err)
+        this.board = prevBoard
+      }
+    },
+
+    /* ── API: Create task ─────────────────────────── */
+    async createTask(data: { title: string; detail?: string | null; priority?: string; assignedTo?: string }) {
+      try {
+        const res = await apiFetch('/api/dashboard/tasks', {
+          method: 'POST',
+          body: JSON.stringify({
+            title: data.title,
+            detail: data.detail ?? null,
+            priority: data.priority ?? 'Medium',
+            assignedTo: data.assignedTo ?? 'bao',
+            source: 'bao',
+          }),
+        })
+        if (!res.ok) throw new Error(`HTTP ${res.status}`)
+        // Refresh board + task list
+        await this.fetchBoard()
+        await this.fetchTasks()
+      } catch (err) {
+        console.warn('[TaskStore] createTask failed', err)
+        throw err
+      }
+    },
+
+    /* ── API: Add task (for TaskStrip) ────────────── */
     async addTask(title: string, detail?: string, priority?: string, assignedTo?: string) {
       try {
         const res = await apiFetch('/api/dashboard/tasks', {
@@ -112,7 +223,7 @@ export const useTaskStore = defineStore('tasks', {
       }
     },
 
-    /* ── API: Update task ───────────────────────── */
+    /* ── API: Update task ─────────────────────────── */
     async updateTask(id: string, updates: { title?: string; detail?: string; priority?: string; assignedTo?: string }) {
       try {
         const res = await apiFetch(`/api/dashboard/tasks/${id}`, {
@@ -121,12 +232,13 @@ export const useTaskStore = defineStore('tasks', {
         })
         if (!res.ok) throw new Error(`HTTP ${res.status}`)
         await this.fetchTasks()
+        await this.fetchBoard()
       } catch (err) {
         console.warn('[TaskStore] updateTask failed', err)
       }
     },
 
-    /* ── Polling ─────────────────────────────────── */
+    /* ── Polling ──────────────────────────────────── */
     startPolling() {
       if (this.refreshInterval) return
       this.fetchTasks()
@@ -141,5 +253,20 @@ export const useTaskStore = defineStore('tasks', {
         this.refreshInterval = null
       }
     },
+
+    startBoardPolling() {
+      if (this.boardRefreshInterval) return
+      this.fetchBoard()
+      this.boardRefreshInterval = setInterval(() => {
+        this.fetchBoard()
+      }, 30000)
+    },
+
+    stopBoardPolling() {
+      if (this.boardRefreshInterval) {
+        clearInterval(this.boardRefreshInterval)
+        this.boardRefreshInterval = null
+      }
+    },
   },
 })