Lesstime/frontend/modules/project-management/pages/my-tasks.vue

<script setup lang="ts">
import type { Task } from '~/modules/project-management/services/dto/task'
import type { TaskStatus } from '~/modules/project-management/services/dto/task-status'
import type { TaskEffort } from '~/modules/project-management/services/dto/task-effort'
import type { TaskPriority } from '~/modules/project-management/services/dto/task-priority'
import type { TaskTag } from '~/modules/project-management/services/dto/task-tag'
import type { TaskGroup } from '~/modules/project-management/services/dto/task-group'
import type { UserData } from '~/services/dto/user-data'
import type { Project } from '~/modules/project-management/services/dto/project'
import type { StatusCategory } from '~/modules/project-management/services/dto/workflow'
import { STATUS_CATEGORY_LABEL, STATUS_CATEGORY_COLOR, contrastText } from '~/modules/project-management/services/dto/workflow'
import { useTaskService } from '~/modules/project-management/services/tasks'
import { useTaskStatusService } from '~/modules/project-management/services/task-statuses'
import { useTaskEffortService } from '~/modules/project-management/services/task-efforts'
import { useTaskPriorityService } from '~/modules/project-management/services/task-priorities'
import { useTaskTagService } from '~/modules/project-management/services/task-tags'
import { useTaskGroupService } from '~/modules/project-management/services/task-groups'
import { useUserService } from '~/services/users'
import { useProjectService } from '~/modules/project-management/services/projects'

const { t } = useI18n()
const route = useRoute()
const router = useRouter()
const auth = useAuthStore()

useHead({ title: t('myTasks.title') })

const taskService = useTaskService()
const statusService = useTaskStatusService()
const effortService = useTaskEffortService()
const priorityService = useTaskPriorityService()
const tagService = useTaskTagService()
const groupService = useTaskGroupService()
const userService = useUserService()
const projectService = useProjectService()

const tasks = ref<Task[]>([])
const statuses = ref<TaskStatus[]>([])
const efforts = ref<TaskEffort[]>([])
const priorities = ref<TaskPriority[]>([])
const tags = ref<TaskTag[]>([])
const groups = ref<TaskGroup[]>([])
const users = ref<UserData[]>([])
const projects = ref<Project[]>([])
const isLoading = ref(true)

// Filters
const selectedProjectId = ref<number | null>(null)
const selectedGroupId = ref<number | null>(null)
const selectedTagId = ref<number | null>(null)
const selectedPriorityId = ref<number | null>(null)
const selectedEffortId = ref<number | null>(null)
const selectedAssigneeId = ref<number | null>(auth.user?.id ?? null)

// Sort
const SORT_DEADLINE = 1
const SORT_SCHEDULED = 2
const sortById = ref<number | null>(null)

// View toggle
const viewMode = ref<'kanban' | 'list'>('kanban')

// Bulk selection
const selectedTaskIds = reactive(new Set<number>())
const selectedTasksArray = computed(() => tasks.value.filter(t => selectedTaskIds.has(t.id)))

// Modal
const taskModalOpen = ref(false)
const selectedTask = ref<Task | null>(null)

// Timer
const timerStore = useTimerStore()

// Toast
const toast = useToast()

// Drag & drop
const dragOverCategory = ref<StatusCategory | null>(null)
const pendingPicker = ref<{ statuses: TaskStatus[], task: Task, x: number, y: number } | null>(null)

function statusesForTaskCategory(task: Task, category: StatusCategory): TaskStatus[] {
    // GET /tasks n'embarque que l'IRI du workflow ; on résout depuis la liste projects chargée (qui embarque workflow.statuses).
    const project = projects.value.find(p => p.id === task.project?.id)
    const wf = project?.workflow
    if (!wf || typeof wf === 'string') return []
    return wf.statuses.filter(s => s.category === category)
}

async function applyStatus(task: Task, status: TaskStatus): Promise<void> {
    if (task.status?.id === status.id) return
    // Mise à jour optimiste : re-bucket le kanban instantanément avant la réponse réseau (cf. index.vue).
    const previousStatus = task.status
    task.status = status
    try {
        await taskService.update(task.id, { status: `/api/task_statuses/${status.id}` })
    } catch (e) {
        task.status = previousStatus
        throw e
    }
}

function onDrop(category: StatusCategory, event: DragEvent): void {
    dragOverCategory.value = null
    const taskId = Number(event.dataTransfer?.getData('text/plain'))
    const task = tasks.value.find(t => t.id === taskId)
    if (!task) return
    const candidates = statusesForTaskCategory(task, category)
    if (candidates.length === 0) {
        toast.error({ message: t('myTasks.dropRefused') })
        return
    }
    if (candidates.length === 1) {
        void applyStatus(task, candidates[0])
        return
    }
    pendingPicker.value = { statuses: candidates, task, x: event.clientX, y: event.clientY }
}

function onPickerChoice(status: TaskStatus): void {
    if (pendingPicker.value) void applyStatus(pendingPicker.value.task, status)
    pendingPicker.value = null
}

function isTimerOnTask(task: Task): boolean {
    const entry = timerStore.activeEntry
    if (!entry?.task) return false
    const entryTaskId = typeof entry.task === 'string'
        ? entry.task
        : (entry.task['@id'] ?? entry.task.id)
    const taskId = task['@id'] ?? task.id
    return entryTaskId === taskId || entryTaskId === `/api/tasks/${task.id}`
}

// Filter options
const projectOptions = computed(() =>
    projects.value.map(p => ({ label: p.name, value: p.id }))
)

const groupOptions = computed(() => {
    let g = groups.value.filter(g => !g.archived)
    if (selectedProjectId.value) {
        g = g.filter(g => g.project?.id === selectedProjectId.value)
    }
    return g.map(g => ({ label: g.title, value: g.id }))
})

const tagOptions = computed(() =>
    tags.value.map(t => ({ label: t.label, value: t.id }))
)

const priorityOptions = computed(() =>
    priorities.value.map(p => ({ label: p.label, value: p.id }))
)

const effortOptions = computed(() =>
    efforts.value.map(e => ({ label: e.label, value: e.id }))
)

const assigneeOptions = computed(() =>
    users.value.map(u => ({ label: u.username, value: u.id }))
)

const sortOptions = computed(() => [
    { label: t('myTasks.sortDeadline'), value: SORT_DEADLINE },
    { label: t('myTasks.sortScheduledStart'), value: SORT_SCHEDULED },
])

// Kanban helpers (grouped by canonical status category)
const CATEGORIES: StatusCategory[] = ['todo', 'in_progress', 'blocked', 'review', 'done']

function tasksByCategory(category: StatusCategory): Task[] {
    return tasks.value.filter(t => t.status?.category === category)
}

const backlogTasks = computed(() =>
    tasks.value.filter(t => !t.status)
)

// Data loading
async function loadReferenceData() {
    const [s, e, pr, tg, g, u, p] = await Promise.all([
        statusService.getAll(),
        effortService.getAll(),
        priorityService.getAll(),
        tagService.getAll(),
        groupService.getAll(),
        userService.getAll(),
        projectService.getAll(),
    ])
    statuses.value = s
    efforts.value = e
    priorities.value = pr
    tags.value = tg
    groups.value = g
    users.value = u
    projects.value = p
}

async function loadTasks() {
    const baseParams: Record<string, string | number | boolean | string[]> = {
        archived: false,
    }
    if (selectedProjectId.value) {
        baseParams.project = `/api/projects/${selectedProjectId.value}`
    }
    if (selectedGroupId.value) {
        baseParams.group = `/api/task_groups/${selectedGroupId.value}`
    }
    if (selectedPriorityId.value) {
        baseParams.priority = `/api/task_priorities/${selectedPriorityId.value}`
    }
    if (selectedEffortId.value) {
        baseParams.effort = `/api/task_efforts/${selectedEffortId.value}`
    }
    if (selectedTagId.value) {
        baseParams['tags[]'] = `/api/task_tags/${selectedTagId.value}`
    }
    if (sortById.value === SORT_DEADLINE) {
        baseParams['order[deadline]'] = 'asc'
    } else if (sortById.value === SORT_SCHEDULED) {
        baseParams['order[scheduledStart]'] = 'asc'
    }

    if (selectedAssigneeId.value) {
        const userIri = `/api/users/${selectedAssigneeId.value}`
        const [assigneeTasks, collabTasks] = await Promise.all([
            taskService.getFiltered({ ...baseParams, assignee: userIri }),
            taskService.getFiltered({ ...baseParams, 'collaborators[]': userIri }),
        ])
        const map = new Map<number, Task>()
        for (const t of assigneeTasks) map.set(t.id, t)
        for (const t of collabTasks) map.set(t.id, t)
        tasks.value = [...map.values()].sort((a, b) => b.id - a.id)
    } else {
        tasks.value = await taskService.getFiltered(baseParams)
    }
}

async function loadAll() {
    isLoading.value = true
    try {
        await Promise.all([loadReferenceData(), loadTasks()])
    } finally {
        isLoading.value = false
    }
}

// Watch filters and sort to reload tasks
watch(
    [selectedProjectId, selectedGroupId, selectedTagId, selectedPriorityId, selectedEffortId, selectedAssigneeId, sortById],
    () => { loadTasks() },
)

// Reset group when project changes
watch(selectedProjectId, () => {
    selectedGroupId.value = null
}, { flush: 'sync' })

// Modal
function openTaskCreate() {
    selectedTask.value = null
    taskModalOpen.value = true
    router.replace({ query: {} })
}

function openTaskEdit(task: Task) {
    selectedTask.value = task
    taskModalOpen.value = true
    if (task.project?.code && task.number) {
        router.replace({ query: { task: `${task.project.code}-${task.number}` } })
    }
}

watch(taskModalOpen, (open) => {
    if (!open) {
        router.replace({ query: {} })
    }
})

async function onSaved(savedTask?: Task) {
    // Mise à jour optimiste avant le re-fetch (cf. index.vue) pour éviter le snapshot stale.
    if (savedTask) {
        const idx = tasks.value.findIndex(t => t.id === savedTask.id)
        if (idx !== -1) tasks.value[idx] = savedTask
        if (selectedTask.value?.id === savedTask.id) selectedTask.value = savedTask
    }
    await loadTasks()
}

function toggleTaskSelect(taskId: number) {
    if (selectedTaskIds.has(taskId)) {
        selectedTaskIds.delete(taskId)
    } else {
        selectedTaskIds.add(taskId)
    }
}

function toggleSelectAll(taskList: Task[]) {
    if (selectedTaskIds.size === taskList.length) {
        selectedTaskIds.clear()
    } else {
        taskList.forEach(t => selectedTaskIds.add(t.id))
    }
}

async function onBulkUpdate(field: string, value: number) {
    const ids = [...selectedTaskIds]
    if (ids.length === 0) return
    const payload: Record<string, unknown> = {}
    if (field === 'status') payload.status = `/api/task_statuses/${value}`
    else if (field === 'assignee') payload.assignee = `/api/users/${value}`
    else if (field === 'priority') payload.priority = `/api/task_priorities/${value}`
    else if (field === 'effort') payload.effort = `/api/task_efforts/${value}`
    else if (field === 'group') payload.group = `/api/task_groups/${value}`
    await Promise.all(ids.map(id => taskService.update(id, payload)))
    selectedTaskIds.clear()
    await loadTasks()
}

async function onBulkArchive() {
    const ids = [...selectedTaskIds]
    if (ids.length === 0) return
    await Promise.all(ids.map(id => taskService.update(id, { archived: true })))
    selectedTaskIds.clear()
    await loadTasks()
}

async function onBulkDelete() {
    const ids = [...selectedTaskIds]
    if (ids.length === 0) return
    await Promise.all(ids.map(id => taskService.remove(id)))
    selectedTaskIds.clear()
    await loadTasks()
}

onMounted(async () => {
    await loadAll()
    const taskParam = route.query.task as string | undefined
    if (taskParam) {
        const dashIndex = taskParam.lastIndexOf('-')
        if (dashIndex > 0) {
            const code = taskParam.slice(0, dashIndex)
            const num = Number(taskParam.slice(dashIndex + 1))
            if (num) {
                const task = tasks.value.find(t => t.project?.code === code && t.number === num)
                if (task) {
                    openTaskEdit(task)
                }
            }
        }
    }
})
</script>

<template>
    <div class="min-w-0">
        <!-- Header + Filters -->
        <div class="sticky top-8 z-20 bg-white pb-4 sm:top-12">
            <div class="flex items-center justify-between gap-3">
                <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">{{ $t('myTasks.title') }}</h1>
                <div class="flex items-center gap-2">
                    <MalioButton
                        icon-name="mdi:plus"
                        icon-position="left"
                        button-class="w-auto px-3"
                        @click="openTaskCreate"
                    >
                        {{ $t('myTasks.createTask') }}
                    </MalioButton>
                    <button
                        class="flex h-[40px] w-[40px] items-center justify-center rounded-md border transition-colors"
                        :class="viewMode === 'list'
                            ? 'border-primary-500 bg-primary-500 text-white'
                            : 'border-primary-500 text-primary-500 hover:bg-primary-50'"
                        :title="viewMode === 'list' ? $t('myTasks.viewKanban') : $t('myTasks.viewList')"
                        @click="viewMode = viewMode === 'kanban' ? 'list' : 'kanban'"
                    >
                        <Icon name="mdi:format-list-bulleted" size="20" />
                    </button>
                </div>
            </div>

            <div class="mt-4 flex flex-wrap gap-3">
                <MalioSelect
                    v-model="selectedProjectId"
                    :options="projectOptions"
                    label="Projet"
                    :empty-option-label="$t('myTasks.allProjects')"
                    group-class="!w-40"
                    text-field="text-sm"
                    text-value="text-sm"
                />
                <MalioSelect
                    v-model="selectedGroupId"
                    :options="groupOptions"
                    label="Groupe"
                    :empty-option-label="$t('myTasks.allGroups')"
                    group-class="!w-40"
                    text-field="text-sm"
                    text-value="text-sm"
                />
                <MalioSelect
                    v-model="selectedTagId"
                    :options="tagOptions"
                    label="Type"
                    :empty-option-label="$t('myTasks.allTypes')"
                    group-class="!w-40"
                    text-field="text-sm"
                    text-value="text-sm"
                />
                <MalioSelect
                    v-model="selectedPriorityId"
                    :options="priorityOptions"
                    label="Priorité"
                    :empty-option-label="$t('myTasks.allPriorities')"
                    group-class="!w-40"
                    text-field="text-sm"
                    text-value="text-sm"
                />
                <MalioSelect
                    v-model="selectedEffortId"
                    :options="effortOptions"
                    label="Effort"
                    :empty-option-label="$t('myTasks.allEfforts')"
                    group-class="!w-40"
                    text-field="text-sm"
                    text-value="text-sm"
                />
                <MalioSelect
                    v-model="selectedAssigneeId"
                    :options="assigneeOptions"
                    label="Assigné"
                    :empty-option-label="$t('myTasks.allAssignees')"
                    group-class="!w-40"
                    text-field="text-sm"
                    text-value="text-sm"
                />
                <MalioSelect
                    v-model="sortById"
                    :options="sortOptions"
                    :label="$t('myTasks.sortBy')"
                    :empty-option-label="$t('myTasks.sortDefault')"
                    group-class="!w-40"
                    text-field="text-sm"
                    text-value="text-sm"
                />
            </div>
        </div>

        <!-- Kanban View — grouped by canonical category -->
        <div v-if="viewMode === 'kanban'">
            <div class="mt-6 flex h-[calc(100vh-260px)] gap-3 overflow-x-auto pb-4">
                <div
                    v-for="cat in CATEGORIES"
                    :key="cat"
                    class="flex w-72 shrink-0 flex-col rounded-lg bg-neutral-50 transition"
                    :class="dragOverCategory === cat ? 'ring-2 ring-primary-400' : ''"
                    @dragover.prevent="dragOverCategory = cat"
                    @dragleave="dragOverCategory = null"
                    @drop="onDrop(cat, $event)"
                >
                    <div
                        class="shrink-0 rounded-t-lg px-4 py-3 text-sm font-bold"
                        :style="{ backgroundColor: STATUS_CATEGORY_COLOR[cat], color: contrastText(STATUS_CATEGORY_COLOR[cat]) }"
                    >
                        {{ STATUS_CATEGORY_LABEL[cat] }} ({{ tasksByCategory(cat).length }})
                    </div>
                    <div class="min-h-0 flex-1 overflow-y-auto p-3">
                        <div class="flex flex-col gap-3">
                            <TaskCard
                                v-for="task in tasksByCategory(cat)"
                                :key="task.id"
                                :task="task"
                                show-project-color
                                show-status-badge
                                @click="openTaskEdit(task)"
                            />
                            <p
                                v-if="tasksByCategory(cat).length === 0"
                                class="py-4 text-center text-xs text-neutral-400"
                            >
                                {{ $t('myTasks.noTasks') }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Backlog below kanban (no drag/drop — status change goes through TaskModal) -->
            <div class="mt-8 rounded-lg bg-neutral-50 p-4">
                <h2 class="text-lg font-bold text-neutral-900">{{ $t('myTasks.backlog') }} ({{ backlogTasks.length }})</h2>
                <div class="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
                    <TaskCard
                        v-for="task in backlogTasks"
                        :key="task.id"
                        :task="task"
                        show-project-color
                        show-status-badge
                        @click="openTaskEdit(task)"
                    />
                </div>
                <p
                    v-if="backlogTasks.length === 0"
                    class="py-4 text-center text-xs text-neutral-400"
                >
                    {{ $t('myTasks.noTasks') }}
                </p>
            </div>
        </div>

        <!-- List View -->
        <div v-if="viewMode === 'list'" class="mt-6 flex flex-col gap-2.5 rounded-[10px] bg-tertiary-500 p-2.5">
            <TaskBulkActions
                :selected-count="selectedTaskIds.size"
                :total-count="tasks.length"
                :all-selected="tasks.length > 0 && selectedTaskIds.size === tasks.length"
                :some-selected="selectedTaskIds.size > 0 && selectedTaskIds.size < tasks.length"
                :statuses="statuses"
                :users="users"
                :priorities="priorities"
                :efforts="efforts"
                :groups="groups"
                :selected-tasks="selectedTasksArray"
                :projects="projects"
                @toggle-all="toggleSelectAll(tasks)"
                @bulk-update="onBulkUpdate"
                @bulk-archive="onBulkArchive"
                @bulk-delete="onBulkDelete"
            />
            <TaskListItem
                v-for="task in tasks"
                :key="task.id"
                :task="task"
                show-project-color
                :selected="selectedTaskIds.has(task.id)"
                @click="openTaskEdit(task)"
                @toggle-select="toggleTaskSelect"
            />
            <p
                v-if="tasks.length === 0 && !isLoading"
                class="py-8 text-center text-sm text-neutral-400"
            >
                {{ $t('myTasks.noTasks') }}
            </p>
        </div>

        <!-- StatusPickerPopover (D&D ambiguity resolution) -->
        <StatusPickerPopover
            v-if="pendingPicker"
            :statuses="pendingPicker.statuses"
            :x="pendingPicker.x"
            :y="pendingPicker.y"
            @pick="onPickerChoice"
            @cancel="pendingPicker = null"
        />

        <!-- TaskModal -->
        <TaskModal
            v-model="taskModalOpen"
            :task="selectedTask"
            :project-id="selectedTask?.project?.id ?? 0"
            :statuses="statuses"
            :efforts="efforts"
            :priorities="priorities"
            :tags="tags"
            :groups="selectedTask?.project?.id ? groups.filter(g => g.project?.id === selectedTask?.project?.id) : groups"
            :users="users"
            :projects="projects"
            @saved="onSaved"
        />
    </div>
</template>