Lesstime/frontend/pages/projects/index.vue

<template>
    <div>
        <div class="sticky top-8 z-20 bg-white pb-4 sm:top-12">
            <div class="flex flex-wrap items-center justify-between gap-3">
                <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">Projets</h1>
                <div class="flex items-center gap-2 sm:gap-3">
                    <button
                        class="flex items-center gap-1.5 rounded-md px-2 py-2 text-sm font-medium transition sm:px-3"
                        :class="showArchived
                            ? 'bg-amber-100 text-amber-700 hover:bg-amber-200'
                            : 'text-neutral-500 hover:bg-neutral-100 hover:text-neutral-700'"
                        @click="toggleArchived"
                    >
                        <Icon :name="showArchived ? 'mdi:archive-arrow-up-outline' : 'mdi:archive-outline'" size="18" />
                        <span class="hidden sm:inline">{{ showArchived ? $t('projects.hideArchived') : $t('projects.showArchived') }}</span>
                    </button>
                    <button
                        class="shrink-0 rounded-md bg-primary-500 px-3 py-2 text-xs font-semibold text-white hover:bg-secondary-500 sm:px-4 sm:text-sm"
                        @click="openCreate"
                    >
                        <span class="hidden sm:inline">+ Ajouter un projet</span>
                        <span class="sm:hidden">+ Projet</span>
                    </button>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
            <div
                v-for="project in projects"
                :key="project.id"
                class="cursor-pointer rounded-[6px] border border-neutral-200 bg-tertiary-500 p-4 shadow-sm transition hover:shadow-md"
                :class="{ 'opacity-60': project.archived }"
                @click="navigateTo(`/projects/${project.id}`)"
            >
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <h3 class="text-md font-bold" :style="{ color: project.color }">{{ project.name }}</h3>
                        <span
                            v-if="project.archived"
                            class="rounded bg-amber-100 px-1.5 py-0.5 text-xs font-medium text-amber-700"
                        >
                            Archivé
                        </span>
                    </div>
                    <button
                        class="p-1 text-neutral-400 hover:text-primary-500"
                        @click.stop="openEdit(project)"
                    >
                        <Icon name="mdi:pencil-outline" size="16" />
                    </button>
                </div>
                <p class="mt-2 text-sm text-neutral-600 line-clamp-4">
                    {{ project.description ?? '' }}
                </p>
            </div>

            <div
                v-if="projects.length === 0 && !isLoading"
                class="col-span-full py-12 text-center text-neutral-400"
            >
                {{ showArchived ? 'Aucun projet archivé.' : 'Aucun projet trouvé.' }}
            </div>
        </div>

        <ProjectDrawer
            v-model="drawerOpen"
            :project="selectedProject"
            :clients="clients"
            @saved="onSaved"
        />
    </div>
</template>

<script setup lang="ts">
import type { Project } from '~/services/dto/project'
import type { Client } from '~/services/dto/client'
import { useProjectService } from '~/services/projects'
import { useClientService } from '~/services/clients'

useHead({ title: 'Projets' })

const projectService = useProjectService()
const clientService = useClientService()

const projects = ref<Project[]>([])
const clients = ref<Client[]>([])
const isLoading = ref(true)
const drawerOpen = ref(false)
const selectedProject = ref<Project | null>(null)
const showArchived = ref(false)

async function loadData() {
    isLoading.value = true
    try {
        const [p, c] = await Promise.all([
            projectService.getAll({ archived: showArchived.value }),
            clientService.getAll(),
        ])
        projects.value = p
        clients.value = c
    } finally {
        isLoading.value = false
    }
}

function toggleArchived() {
    showArchived.value = !showArchived.value
    loadData()
}

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

function openEdit(project: Project) {
    selectedProject.value = project
    drawerOpen.value = true
}

async function onSaved() {
    await loadData()
}

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