Lesstime/frontend/components/project/ProjectGroupTab.vue

<template>
    <div>
        <div class="flex items-center justify-between">
            <h2 class="text-lg font-bold text-neutral-900">Groupes</h2>
            <div class="flex items-center gap-3">
                <button
                    type="button"
                    class="text-sm font-medium text-neutral-500 hover:text-neutral-700"
                    @click="showArchived = !showArchived"
                >
                    {{ showArchived ? $t('archive.hideArchived') : $t('archive.showArchived') }}
                </button>
                <button
                    v-if="!showArchived"
                    class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
                    @click="openCreate"
                >
                    + Ajouter un groupe
                </button>
            </div>
        </div>

        <DataTable
            :columns="columns"
            :items="items"
            :loading="isLoading"
            empty-message="Aucun groupe trouvé."
            :deletable="!showArchived"
            @row-click="openEdit"
            @delete="(item) => handleDelete(item.id)"
        >
            <template #cell-color="{ item }">
                <span
                    class="inline-block h-6 w-6 rounded-full"
                    :style="{ backgroundColor: item.color }"
                />
            </template>
            <template #cell-description="{ item }">
                {{ item.description ?? '—' }}
            </template>
            <template #actions="{ item }">
                <button
                    v-if="!showArchived && canArchiveGroup(item)"
                    type="button"
                    class="rounded-md bg-neutral-500 px-3 py-1 text-xs font-semibold text-white hover:bg-neutral-600"
                    @click.stop="handleArchive(item)"
                >
                    {{ $t('archive.archiveButton') }}
                </button>
                <button
                    v-if="showArchived"
                    type="button"
                    class="rounded-md bg-neutral-500 px-3 py-1 text-xs font-semibold text-white hover:bg-neutral-600"
                    @click.stop="handleUnarchive(item)"
                >
                    {{ $t('archive.unarchiveButton') }}
                </button>
            </template>
        </DataTable>

        <TaskGroupDrawer
            v-model="drawerOpen"
            :group="selectedItem"
            :project-id="projectId"
            :tasks="[...activeTasks, ...archivedTasks]"
            @saved="onSaved"
        />
    </div>
</template>

<script setup lang="ts">
import type { TaskGroup } from '~/services/dto/task-group'
import type { Task } from '~/services/dto/task'
import { useTaskGroupService } from '~/services/task-groups'
import { useTaskService } from '~/services/tasks'

const props = defineProps<{
    projectId: number
}>()

const emit = defineEmits<{
    (e: 'updated'): void
}>()

import type { DataTableColumn } from '~/components/ui/DataTable.vue'

const columns: DataTableColumn[] = [
    { key: 'title', label: 'Titre', primary: true },
    { key: 'color', label: 'Couleur' },
    { key: 'description', label: 'Description', class: 'max-w-xs truncate text-neutral-700' },
]

const groupService = useTaskGroupService()
const taskService = useTaskService()

const allGroups = ref<TaskGroup[]>([])
const activeTasks = ref<Task[]>([])
const archivedTasks = ref<Task[]>([])
const isLoading = ref(true)
const drawerOpen = ref(false)
const selectedItem = ref<TaskGroup | null>(null)
const showArchived = ref(false)

const items = computed(() =>
    allGroups.value.filter(g => showArchived.value ? g.archived : !g.archived)
)

function canArchiveGroup(group: TaskGroup): boolean {
    const groupTasks = activeTasks.value.filter(t => t.group?.id === group.id)
    if (groupTasks.length === 0) return false
    return groupTasks.every(t => t.status?.isFinal === true)
}

async function loadItems() {
    isLoading.value = true
    try {
        const [g, t, at] = await Promise.all([
            groupService.getByProject(props.projectId),
            taskService.getByProject(props.projectId),
            taskService.getByProjectArchived(props.projectId),
        ])
        allGroups.value = g
        activeTasks.value = t
        archivedTasks.value = at
    } finally {
        isLoading.value = false
    }
}

function openCreate() {
    selectedItem.value = null
    drawerOpen.value = true
}

function openEdit(item: TaskGroup) {
    selectedItem.value = item
    drawerOpen.value = true
}

async function handleDelete(id: number) {
    await groupService.remove(id)
    await loadItems()
    emit('updated')
}

async function handleArchive(group: TaskGroup) {
    const groupTasks = activeTasks.value.filter(t => t.group?.id === group.id)
    await Promise.all(groupTasks.map(t => taskService.update(t.id, { archived: true })))
    await groupService.update(group.id, { archived: true })
    await loadItems()
    emit('updated')
}

async function handleUnarchive(group: TaskGroup) {
    const groupTasks = archivedTasks.value.filter(t => t.group?.id === group.id)
    await Promise.all(groupTasks.map(t => taskService.update(t.id, { archived: false })))
    await groupService.update(group.id, { archived: false })
    await loadItems()
    emit('updated')
}

async function onSaved() {
    await loadItems()
    emit('updated')
}

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