All files / src/components/opc KanbanColumn.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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<script>
  import TaskCard from "./TaskCard.svelte";
 
  let {
    title,
    status,
    tasks = [],
    agents = [],
    onEdit,
    onDelete,
    onAssign,
    onDrop
  } = $props();
 
  const columnColors = {
    parking_lot: "bg-slate-100 dark:bg-slate-800 border-slate-300",
    in_progress: "bg-blue-50 dark:bg-blue-900/20 border-blue-300",
    done: "bg-emerald-50 dark:bg-emerald-900/20 border-emerald-300"
  };
 
  function handleDragOver(e) {
    e.preventDefault();
    e.currentTarget.classList.add("ring-2", "ring-primary-400");
  }
 
  function handleDragLeave(e) {
    e.currentTarget.classList.remove("ring-2", "ring-primary-400");
  }
 
  function handleDrop(e) {
    e.preventDefault();
    e.currentTarget.classList.remove("ring-2", "ring-primary-400");
 
    const taskId = parseInt(e.dataTransfer.getData("taskId"));
    const fromStatus = e.dataTransfer.getData("fromStatus");
 
    if (fromStatus !== status) {
      onDrop?.(taskId, status);
    }
  }
 
  function handleDragStart(e, task) {
    e.dataTransfer.setData("taskId", task.id);
    e.dataTransfer.setData("fromStatus", task.status);
    e.dataTransfer.effectAllowed = "move";
  }
</script>
 
<div class="flex flex-col h-full">
  <!-- Column header -->
  <div class="flex items-center justify-between mb-3 pb-2 border-b border-surface-300 dark:border-surface-600">
    <h3 class="font-semibold text-surface-900 dark:text-surface-100">
      {title}
    </h3>
    <span class="text-sm text-surface-600 dark:text-surface-400 bg-surface-200 dark:bg-surface-700 px-2 py-0.5 rounded-full">
      {tasks.length}
    </span>
  </div>
 
  <!-- Drop zone -->
  <div
    class="flex-1 min-h-[200px] p-2 rounded-lg border-2 border-dashed transition-all {columnColors[status] || columnColors.parking_lot}"
    ondragover={handleDragOver}
    ondragleave={handleDragLeave}
    ondrop={handleDrop}
  >
    {#if tasks.length === 0}
      <div class="flex items-center justify-center h-32 text-surface-400 dark:text-surface-500 text-sm">
        Drop tasks here
      </div>
    {:else}
      {#each tasks as task (task.id)}
        <div draggable="true" ondragstart={(e) => handleDragStart(e, task)}>
          <TaskCard
            {task}
            {agents}
            {onEdit}
            {onDelete}
            {onAssign}
          />
        </div>
      {/each}
    {/if}
  </div>
</div>