All files / src/components/opc KanbanBoard.svelte

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<script>
  import KanbanColumn from "./KanbanColumn.svelte";
  import { moveTask } from "../../lib/opc-api.js";
 
  let { tasks = [], agents = [], onEdit, onDelete, onAssign, onTaskMoved } = $props();
 
  const columns = [
    { id: "parking_lot", title: "Parking Lot", status: "parking_lot" },
    { id: "in_progress", title: "In Progress", status: "in_progress" },
    { id: "done", title: "Done", status: "done" }
  ];
 
  function getTasksByStatus(status) {
    return tasks.filter(t => t.status === status);
  }
 
  async function handleDrop(taskId, newStatus) {
    try {
      await moveTask(taskId, newStatus);
      onTaskMoved?.(taskId, newStatus);
    } catch (e) {
      alert("Failed to move task: " + e.message);
    }
  }
</script>
 
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 h-full">
  {#each columns as column}
    <KanbanColumn
      title={column.title}
      status={column.status}
      tasks={getTasksByStatus(column.status)}
      {agents}
      {onEdit}
      {onDelete}
      {onAssign}
      onDrop={handleDrop}
    />
  {/each}
</div>