mws.frontend.vue/src/views/tasks/TasksBoardView.vue

<template>
  <div class="flex h-full flex-col">
    <div class="mb-3 flex items-center justify-end">
      <Button v-if="auth.can('tasks', 'create')" label="New Task" icon="pi pi-plus" @click="openCreate" />
    </div>

    <div class="board-container flex min-h-0 flex-1 overflow-x-auto rounded-2xl border" style="border-color: var(--hairline); background: var(--panel)">
      <div
        v-for="(col, i) in columns"
        :key="col.status"
        class="board-col flex min-w-[260px] flex-1 flex-col p-3"
        :class="{ 'drag-over': dragOverStatus === col.status }"
        :style="i > 0 ? 'border-left: 1px solid var(--hairline)' : ''"
        @dragover.prevent="onDragOver(col.status, $event)"
        @dragleave="onDragLeave(col.status, $event)"
        @drop.prevent="onDrop(col.status)"
      >
        <div class="mb-3 flex items-center justify-between">
          <Tag :value="col.label" :severity="col.severity" />
          <Tag :value="tasksIn(col.status).length" severity="secondary" />
        </div>
        <div class="flex flex-1 flex-col gap-2">
          <div
            v-for="task in tasksIn(col.status)"
            :key="task.id"
            class="task-card cursor-pointer rounded-xl border p-3 shadow-sm"
            :style="{ background: 'var(--canvas)', borderColor: 'var(--hairline)' }"
            :class="{ 'opacity-40': draggingId === task.id }"
            draggable="true"
            @dragstart="onDragStart(task)"
            @dragend="onDragEnd"
            @click.stop="openEdit(task)"
          >
            <div class="font-medium">{{ task.title }}</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 }}
              </span>
            </div>
            <div class="text-[0.8rem]" v-if="task.dueDate">
              <span class="flex items-center gap-1 muted-note">
                <i class="pi pi-calendar text-[0.7rem]"></i> {{ formatDate(task.dueDate) }}
              </span>
            </div>
          </div>
          <div
            v-if="tasksIn(col.status).length === 0 && dragOverStatus === col.status"
            class="flex flex-1 items-center justify-center rounded-xl text-sm"
            style="border: 2px dashed var(--primary); color: var(--primary)"
          >
            Drop here
          </div>
        </div>
      </div>
    </div>

    <TaskDetailDialog
      v-model:visible="dialogVisible"
      :task="editingTask"
      :project-id="projectId"
      :members="members"
      :can-edit="auth.can('tasks', 'edit')"
      :can-delete="auth.can('tasks', 'delete')"
      @saved="onSaved"
      @deleted="onDeleted"
    />
  </div>
</template>

<script setup lang="ts">
import TaskDetailDialog from './TaskDetailDialog.vue'
import { getTasks, updateTask } from '../../services/modules'
import { getMembers } from '../../services/backend'
import { errorMessage } from '../../services/api'
import { useAuthStore } from '../../stores/auth'
import type { Task, TaskStatus } from '../../types'

const route = useRoute()
const toast = useToast()
const auth = useAuthStore()

const projectId = computed(() => String(route.params.id))
const tasks = ref<Task[]>([])
const members = ref<{ userId: string; displayName: string }[]>([])

const draggingId = ref<string | null>(null)
const dragOverStatus = ref<TaskStatus | null>(null)

const dialogVisible = ref(false)
const editingTask = ref<Task | null>(null)

function openEdit(task: Task) {
  editingTask.value = task
  dialogVisible.value = true
}

const columns = [
  { status: 'Todo' as TaskStatus, label: 'To Do', severity: 'secondary' as const },
  { status: 'InProgress' as TaskStatus, label: 'In Progress', severity: 'info' as const },
  { status: 'Done' as TaskStatus, label: 'Done', severity: 'success' as const },
  { status: 'Cancelled' as TaskStatus, label: 'Cancelled', severity: 'danger' as const },
]

function tasksIn(status: TaskStatus) {
  return tasks.value.filter((t) => t.status === status)
}

async function load() {
  try {
    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 })
  }
}

async function loadMembers() {
  try {
    const res = await getMembers(projectId.value, { page: 1, pageSize: 100 })
    members.value = res.items.map((m) => ({
      userId: m.userId,
      displayName: m.displayName,
    }))
  } catch {
    members.value = []
  }
}

function onDragStart(task: Task) {
  draggingId.value = task.id
}

function onDragEnd() {
  draggingId.value = null
  dragOverStatus.value = null
}

function onDragOver(status: TaskStatus, e: DragEvent) {
  e.dataTransfer!.dropEffect = 'move'
  dragOverStatus.value = status
}

function onDragLeave(_status: TaskStatus, e: DragEvent) {
  const related = e.relatedTarget as HTMLElement | null
  if (related && (e.currentTarget as HTMLElement).contains(related)) return
  if (dragOverStatus.value === _status) dragOverStatus.value = null
}

async function onDrop(status: TaskStatus) {
  const id = draggingId.value
  dragOverStatus.value = null
  draggingId.value = null
  if (!id || !auth.can('tasks', 'edit')) return
  const task = tasks.value.find((t) => t.id === id)
  if (!task || task.status === status) return
  try {
    await updateTask(id, {
      title: task.title,
      description: task.description,
      status,
      priority: task.priority,
      assigneeId: task.assigneeId,
      dueDate: task.dueDate,
    })
    toast.add({ severity: 'success', summary: `Moved to ${statusLabel(status)}`, life: 2000 })
    await load()
  } catch (e) {
    toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
  }
}

function openCreate() {
  editingTask.value = null
  dialogVisible.value = true
}

function onSaved() {
  dialogVisible.value = false
  void load()
}

function onDeleted() {
  dialogVisible.value = false
  void load()
}

function statusLabel(s: TaskStatus) {
  return s.replace(/([A-Z])/g, ' $1').trim()
}

function formatDate(v: string) {
  return new Date(v).toLocaleDateString()
}

watch(
  () => route.params.id,
  async () => {
    await loadMembers()
    await load()
  },
  { immediate: true },
)
</script>

<style scoped>
.task-card:hover {
  border-color: var(--primary) !important;
}
.board-col.drag-over {
  background: color-mix(in srgb, var(--primary) 6%, transparent);
  box-shadow: inset 0 0 0 2px var(--primary);
  border-radius: 0.75rem;
}
</style>