Lesstime/frontend/components/ProjectStatusTab.vue

<template>
    <div>
        <div class="flex items-center justify-between">
            <h2 class="text-lg font-bold text-neutral-900">Statuts</h2>
            <button
                class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
                @click="openCreate"
            >
                + Ajouter un statut
            </button>
        </div>

        <div class="mt-6 overflow-x-auto rounded-lg border border-neutral-200">
            <table class="w-full text-left text-sm">
                <thead class="border-b border-neutral-200 bg-neutral-50">
                    <tr>
                        <th class="px-4 py-3 font-semibold text-neutral-700">Libellé</th>
                        <th class="px-4 py-3 font-semibold text-neutral-700">Couleur</th>
                        <th class="px-4 py-3 font-semibold text-neutral-700">Position</th>
                        <th class="px-4 py-3 font-semibold text-neutral-700">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr
                        v-for="item in items"
                        :key="item.id"
                        class="cursor-pointer border-b border-neutral-100 hover:bg-neutral-50"
                        @click="openEdit(item)"
                    >
                        <td class="px-4 py-3 font-semibold text-primary-500">{{ item.label }}</td>
                        <td class="px-4 py-3">
                            <span
                                class="inline-block h-6 w-6 rounded-full"
                                :style="{ backgroundColor: item.color }"
                            />
                        </td>
                        <td class="px-4 py-3 text-neutral-700">{{ item.position }}</td>
                        <td class="px-4 py-3">
                            <button
                                class="text-red-500 hover:text-red-700"
                                @click.stop="requestDelete(item)"
                            >
                                <Icon name="mdi:delete-outline" size="20" />
                            </button>
                        </td>
                    </tr>
                    <tr v-if="items.length === 0 && !isLoading">
                        <td colspan="4" class="px-4 py-8 text-center text-neutral-400">
                            Aucun statut trouvé.
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <TaskStatusDrawer
            v-model="drawerOpen"
            :item="selectedItem"
            :project-id="projectId"
            @saved="onSaved"
        />

        <ConfirmDeleteStatusModal
            v-model="confirmModalOpen"
            :status-label="statusToDelete?.label ?? ''"
            :task-count="affectedTaskCount"
            :available-statuses="reassignTargets"
            @confirm="onConfirmDelete"
        />
    </div>
</template>

<script setup lang="ts">
import type { TaskStatus } from '~/services/dto/task-status'
import type { Task } from '~/services/dto/task'
import { useTaskStatusService } from '~/services/task-statuses'
import { useTaskService } from '~/services/tasks'

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

const statusService = useTaskStatusService()
const taskService = useTaskService()

const items = ref<TaskStatus[]>([])
const tasks = ref<Task[]>([])
const isLoading = ref(true)
const drawerOpen = ref(false)
const selectedItem = ref<TaskStatus | null>(null)
const confirmModalOpen = ref(false)
const statusToDelete = ref<TaskStatus | null>(null)

const affectedTaskCount = computed(() => {
    if (!statusToDelete.value) return 0
    return tasks.value.filter(t => t.status?.id === statusToDelete.value!.id).length
})

const reassignTargets = computed(() => {
    if (!statusToDelete.value) return items.value
    return items.value.filter(s => s.id !== statusToDelete.value!.id)
})

async function loadItems() {
    isLoading.value = true
    try {
        const [statuses, projectTasks] = await Promise.all([
            statusService.getByProject(props.projectId),
            taskService.getByProject(props.projectId),
        ])
        items.value = statuses
        tasks.value = projectTasks
    } finally {
        isLoading.value = false
    }
}

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

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

async function requestDelete(item: TaskStatus) {
    statusToDelete.value = item
    const count = tasks.value.filter(t => t.status?.id === item.id).length
    if (count === 0) {
        await statusService.remove(item.id)
        await loadItems()
    } else {
        confirmModalOpen.value = true
    }
}

async function onConfirmDelete(targetStatusId: number | null) {
    if (!statusToDelete.value) return

    const affectedTasks = tasks.value.filter(t => t.status?.id === statusToDelete.value!.id)
    const statusIri = targetStatusId ? `/api/task_statuses/${targetStatusId}` : null

    await Promise.all(
        affectedTasks.map(t => taskService.update(t.id, { status: statusIri }))
    )

    await statusService.remove(statusToDelete.value.id)
    confirmModalOpen.value = false
    statusToDelete.value = null
    await loadItems()
}

async function onSaved() {
    await loadItems()
}

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