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">{{ $t('projects.title') }}</h1>
                <div class="flex items-center gap-2 sm:gap-3">
                    <MalioButton
                        variant="tertiary"
                        :icon-name="showArchived ? 'mdi:archive-arrow-up-outline' : 'mdi:archive-outline'"
                        icon-position="left"
                        button-class="w-auto px-3"
                        @click="toggleArchived"
                    >
                        <span class="hidden sm:inline">{{ showArchived ? $t('projects.hideArchived') : $t('projects.showArchived') }}</span>
                    </MalioButton>
                    <MalioButton
                        icon-name="mdi:plus"
                        icon-position="left"
                        button-class="w-auto px-3 shrink-0"
                        @click="openCreate"
                    >
                        <span class="hidden sm:inline">{{ $t('projects.addProject') }}</span>
                        <span class="sm:hidden">{{ $t('projects.addProjectShort') }}</span>
                    </MalioButton>
                </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 p-4 shadow-sm transition hover:shadow-md"
                :class="{ 'opacity-60': project.archived }"
                :style="projectCardStyle(project.color)"
                @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"
                        >
                            {{ $t('common.archived') }}
                        </span>
                    </div>
                    <MalioButtonIcon
                        icon="mdi:pencil-outline"
                        aria-label="Modifier le projet"
                        variant="ghost"
                        icon-size="16"
                        @click.stop="openEdit(project)"
                    />
                </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 ? $t('projects.noArchivedProjects') : $t('projects.noProjects') }}
            </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' })

function projectCardStyle(color: string | null) {
    const hex = (color || '#222783').replace('#', '')
    const r = parseInt(hex.substring(0, 2), 16)
    const g = parseInt(hex.substring(2, 4), 16)
    const b = parseInt(hex.substring(4, 6), 16)
    return {
        borderRadius: '16px',
        backgroundColor: `rgba(${r}, ${g}, ${b}, 0.08)`,
    }
}

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>