From bb45066013718d90ac8755c86889e13b9bb0f640 Mon Sep 17 00:00:00 2001
From: matthieu <matthieu@yuno.malio.fr>
Date: Mon, 9 Mar 2026 22:46:19 +0100
Subject: [PATCH] feat : add Projects page with cards and drawer form

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/components/ColorPicker.vue   |  31 +++++++
 frontend/components/ProjectDrawer.vue | 122 ++++++++++++++++++++++++++
 frontend/pages/projects.vue           |  92 +++++++++++++++++++
 3 files changed, 245 insertions(+)
 create mode 100644 frontend/components/ColorPicker.vue
 create mode 100644 frontend/components/ProjectDrawer.vue
 create mode 100644 frontend/pages/projects.vue

diff --git a/frontend/components/ColorPicker.vue b/frontend/components/ColorPicker.vue
new file mode 100644
index 0000000..5fe1faf
--- /dev/null
+++ b/frontend/components/ColorPicker.vue
@@ -0,0 +1,31 @@
+<template>
+    <div>
+        <p class="mb-2 text-sm font-medium text-neutral-700">Couleur</p>
+        <div class="flex flex-wrap gap-3">
+            <button
+                v-for="color in colors"
+                :key="color"
+                type="button"
+                class="h-10 w-10 rounded-full border-2 transition-transform hover:scale-110"
+                :class="modelValue === color ? 'border-neutral-900 scale-110' : 'border-transparent'"
+                :style="{ backgroundColor: color }"
+                @click="emit('update:modelValue', color)"
+            />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+    modelValue: string
+}>()
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: string): void
+}>()
+
+const colors = [
+    '#26A69A', '#E91E63', '#4A90D9', '#7E57C2',
+    '#8BC34A', '#FDD835', '#80DEEA', '#FF7043',
+]
+</script>
diff --git a/frontend/components/ProjectDrawer.vue b/frontend/components/ProjectDrawer.vue
new file mode 100644
index 0000000..ff3ec7c
--- /dev/null
+++ b/frontend/components/ProjectDrawer.vue
@@ -0,0 +1,122 @@
+<template>
+    <AppDrawer v-model="isOpen" :title="isEditing ? 'Modifier un projet' : 'Ajouter un projet'">
+        <form @submit.prevent="handleSubmit" class="flex flex-col gap-2">
+            <MalioInputText
+                v-model="form.name"
+                label="Titre"
+                input-class="w-full"
+                :error="touched.name && !form.name.trim() ? 'Le titre est requis' : ''"
+                @blur="touched.name = true"
+            />
+            <MalioInputTextArea
+                v-model="form.description"
+                label="Description"
+                :size="3"
+            />
+            <MalioSelect
+                v-model="form.clientId"
+                :options="clientOptions"
+                label="Client"
+                empty-option-label="Aucun client"
+                min-width="w-full"
+            />
+            <div class="mt-4">
+                <ColorPicker v-model="form.color" />
+            </div>
+
+            <div class="mt-6 flex justify-end">
+                <button
+                    type="submit"
+                    class="rounded-md bg-primary-500 px-6 py-2 text-sm font-semibold text-white hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
+                    :disabled="isSubmitting"
+                >
+                    Enregistrer
+                </button>
+            </div>
+        </form>
+    </AppDrawer>
+</template>
+
+<script setup lang="ts">
+import type { Project, ProjectWrite } from '~/services/dto/project'
+import type { Client } from '~/services/dto/client'
+
+const props = defineProps<{
+    modelValue: boolean
+    project: Project | null
+    clients: Client[]
+}>()
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: boolean): void
+    (e: 'saved'): void
+}>()
+
+const isOpen = computed({
+    get: () => props.modelValue,
+    set: (v) => emit('update:modelValue', v),
+})
+
+const isEditing = computed(() => !!props.project)
+const isSubmitting = ref(false)
+
+const form = reactive({
+    name: '',
+    description: '',
+    color: '#222783',
+    clientId: null as number | null,
+})
+
+const touched = reactive({
+    name: false,
+})
+
+const clientOptions = computed(() =>
+    props.clients.map(c => ({ label: c.name, value: c.id }))
+)
+
+watch(() => props.modelValue, (open) => {
+    if (open) {
+        if (props.project) {
+            form.name = props.project.name ?? ''
+            form.description = props.project.description ?? ''
+            form.color = props.project.color ?? '#222783'
+            form.clientId = props.project.client?.id ?? null
+        } else {
+            form.name = ''
+            form.description = ''
+            form.color = '#222783'
+            form.clientId = null
+        }
+        touched.name = false
+    }
+})
+
+const { create, update } = useProjectService()
+
+async function handleSubmit() {
+    touched.name = true
+    if (!form.name.trim()) return
+
+    isSubmitting.value = true
+    try {
+        const payload: ProjectWrite = {
+            name: form.name.trim(),
+            description: form.description.trim() || null,
+            color: form.color,
+            client: form.clientId ? `/api/clients/${form.clientId}` : null,
+        }
+
+        if (isEditing.value && props.project) {
+            await update(props.project.id, payload)
+        } else {
+            await create(payload)
+        }
+
+        emit('saved')
+        isOpen.value = false
+    } finally {
+        isSubmitting.value = false
+    }
+}
+</script>
diff --git a/frontend/pages/projects.vue b/frontend/pages/projects.vue
new file mode 100644
index 0000000..bce0c82
--- /dev/null
+++ b/frontend/pages/projects.vue
@@ -0,0 +1,92 @@
+<template>
+    <div>
+        <div class="flex items-center justify-between">
+            <h1 class="text-2xl font-bold text-neutral-900">Projets</h1>
+            <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 projet
+            </button>
+        </div>
+
+        <div class="mt-6 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-lg border border-neutral-200 bg-white shadow-sm transition hover:shadow-md"
+                @click="openEdit(project)"
+            >
+                <div class="h-2 rounded-t-lg" :style="{ backgroundColor: project.color }" />
+                <div class="p-4">
+                    <h3 class="text-md font-bold text-primary-500">{{ project.name }}</h3>
+                    <p class="mt-2 text-sm text-neutral-600 line-clamp-4">
+                        {{ project.description ?? '' }}
+                    </p>
+                </div>
+            </div>
+
+            <div
+                v-if="projects.length === 0 && !isLoading"
+                class="col-span-full py-12 text-center text-neutral-400"
+            >
+                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'
+
+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)
+
+async function loadData() {
+    isLoading.value = true
+    try {
+        const [p, c] = await Promise.all([
+            projectService.getAll(),
+            clientService.getAll(),
+        ])
+        projects.value = p
+        clients.value = c
+    } finally {
+        isLoading.value = false
+    }
+}
+
+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>