Lesstime/frontend/pages/projects/[id]/archives.vue

<template>
    <div>
        <div class="sticky top-8 z-20 bg-white pb-4 sm:top-12">
            <div class="flex items-center justify-between">
                <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">{{ project?.name ?? '' }} — {{ $t('archive.title') }}</h1>
            </div>

            <div class="mt-4">
                <MalioSelect
                    v-model="selectedGroupId"
                    :options="groupFilterOptions"
                    label="Groupe"
                    empty-option-label="Tous les groupes"
                    min-width="w-64"
                />
            </div>
        </div>

        <div>
            <p v-if="filteredTasks.length === 0" class="text-sm text-neutral-400">
                {{ $t('archive.empty') }}
            </p>
            <div v-else class="grid grid-cols-1 gap-3 md:grid-cols-2">
                <div
                    v-for="task in filteredTasks"
                    :key="task.id"
                    class="flex cursor-pointer items-center justify-between rounded-lg border border-neutral-200 bg-white px-4 py-3 hover:shadow-sm"
                    @click="openTaskEdit(task)"
                >
                    <div class="flex items-center gap-3">
                        <span class="text-xs font-bold text-neutral-400">{{ project?.code }}-{{ task.number }}</span>
                        <span class="text-sm font-semibold text-neutral-900">{{ task.title }}</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <span
                            v-if="task.status"
                            class="rounded-full px-2 py-0.5 text-xs font-semibold text-white"
                            :style="{ backgroundColor: task.status.color }"
                        >
                            {{ task.status.label }}
                        </span>
                        <span
                            v-if="task.group"
                            class="rounded-full border px-2 py-0.5 text-xs font-semibold"
                            :style="{ borderColor: task.group.color, color: task.group.color }"
                        >
                            {{ task.group.title }}
                        </span>
                        <UserAvatar
                            v-if="task.assignee"
                            :user="task.assignee"
                            size="xs"
                        />
                    </div>
                </div>
            </div>
        </div>

        <TaskModal
            v-model="taskDrawerOpen"
            :task="selectedTask"
            :project-id="projectId"
            :statuses="statuses"
            :efforts="efforts"
            :priorities="priorities"
            :tags="tags"
            :groups="groups"
            :users="users"
            @saved="onSaved"
        />
    </div>
</template>

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

const route = useRoute()
const projectId = computed(() => Number(route.params.id))

useHead({ title: 'Archives' })

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

const project = ref<Project | null>(null)
const archivedTasks = 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 selectedGroupId = ref<number | null>(null)
const taskDrawerOpen = ref(false)
const selectedTask = ref<Task | null>(null)

const groupFilterOptions = computed(() =>
    groups.value.map(g => ({ label: g.title, value: g.id }))
)

const filteredTasks = computed(() => {
    if (!selectedGroupId.value) return archivedTasks.value
    return archivedTasks.value.filter(t => t.group?.id === selectedGroupId.value)
})

async function loadData() {
    const [p, t, s, e, pr, ty, g, u] = await Promise.all([
        projectService.getById(projectId.value),
        taskService.getByProject(projectId.value, true),
        statusService.getAll(),
        effortService.getAll(),
        priorityService.getAll(),
        tagService.getAll(),
        groupService.getByProject(projectId.value),
        userService.getAll(),
    ])
    project.value = p
    archivedTasks.value = t
    statuses.value = s
    efforts.value = e
    priorities.value = pr
    tags.value = ty
    groups.value = g
    users.value = u
}

function openTaskEdit(task: Task) {
    selectedTask.value = task
    taskDrawerOpen.value = true
}

async function onSaved() {
    await loadData()
}

onMounted(() => {
    loadData()
})
</script>