From 64961631e46ec12889b5ae7a62bc422252bf75e5 Mon Sep 17 00:00:00 2001
From: matthieu <matthieu@yuno.malio.fr>
Date: Sun, 15 Mar 2026 19:30:10 +0100
Subject: [PATCH] feat(frontend) : add client user management to admin

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/components/user/UserDrawer.vue | 79 ++++++++++++++++++++++++-
 1 file changed, 77 insertions(+), 2 deletions(-)

diff --git a/frontend/components/user/UserDrawer.vue b/frontend/components/user/UserDrawer.vue
index 3561701..1ffcc90 100644
--- a/frontend/components/user/UserDrawer.vue
+++ b/frontend/components/user/UserDrawer.vue
@@ -36,6 +36,39 @@
                 </div>
             </div>
 
+            <div class="mt-4">
+                <MalioSelect
+                    v-model="form.clientId"
+                    label="Client"
+                    :options="clientOptions"
+                    placeholder="Aucun client"
+                    class="w-full"
+                    @update:model-value="onClientChange"
+                />
+            </div>
+
+            <div v-if="form.clientId !== null" class="mt-2">
+                <label class="text-sm font-semibold text-neutral-700">Projets autorisés</label>
+                <div class="mt-2 flex flex-col gap-2">
+                    <label
+                        v-for="project in filteredProjects"
+                        :key="project.id"
+                        class="flex items-center gap-2 text-sm text-neutral-700"
+                    >
+                        <input
+                            v-model="form.allowedProjectIds"
+                            type="checkbox"
+                            :value="project.id"
+                            class="rounded border-neutral-300"
+                        />
+                        {{ project.name }}
+                    </label>
+                    <span v-if="filteredProjects.length === 0" class="text-sm text-neutral-400">
+                        Aucun projet pour ce client.
+                    </span>
+                </div>
+            </div>
+
             <div class="mt-6 flex justify-end">
                 <button
                     type="submit"
@@ -52,6 +85,10 @@
 <script setup lang="ts">
 import type { UserData, UserWrite } from '~/services/dto/user-data'
 import { useUserService } from '~/services/users'
+import { useClientService } from '~/services/clients'
+import { useProjectService } from '~/services/projects'
+import type { Client } from '~/services/dto/client'
+import type { Project } from '~/services/dto/project'
 
 const props = defineProps<{
     modelValue: boolean
@@ -68,15 +105,32 @@ const isOpen = computed({
     set: (v) => emit('update:modelValue', v),
 })
 
-const availableRoles = ['ROLE_ADMIN', 'ROLE_USER']
+const availableRoles = ['ROLE_ADMIN', 'ROLE_USER', 'ROLE_CLIENT']
 
 const isEditing = computed(() => !!props.item)
 const isSubmitting = ref(false)
 
+const clients = ref<Client[]>([])
+const allProjects = ref<Project[]>([])
+
+const clientOptions = computed(() => [
+    { label: 'Aucun client', value: null as number | null },
+    ...clients.value.map((c) => ({ label: c.name, value: c.id as number | null })),
+])
+
+const filteredProjects = computed(() => {
+    if (form.clientId === null) return []
+    return allProjects.value.filter(
+        (p) => p.client !== null && p.client.id === form.clientId,
+    )
+})
+
 const form = reactive({
     username: '',
     password: '',
     roles: [] as string[],
+    clientId: null as number | null,
+    allowedProjectIds: [] as number[],
 })
 
 const touched = reactive({
@@ -84,19 +138,38 @@ const touched = reactive({
     password: false,
 })
 
-watch(() => props.modelValue, (open) => {
+function onClientChange(value: number | null) {
+    form.clientId = value
+    form.allowedProjectIds = []
+    if (value !== null && !form.roles.includes('ROLE_CLIENT')) {
+        form.roles = [...form.roles.filter((r) => r !== 'ROLE_USER'), 'ROLE_CLIENT']
+    }
+}
+
+watch(() => props.modelValue, async (open) => {
     if (open) {
         if (props.item) {
             form.username = props.item.username ?? ''
             form.password = ''
             form.roles = [...props.item.roles]
+            form.clientId = props.item.client?.id ?? null
+            form.allowedProjectIds = props.item.allowedProjects?.map((p) => p.id) ?? []
         } else {
             form.username = ''
             form.password = ''
             form.roles = ['ROLE_USER']
+            form.clientId = null
+            form.allowedProjectIds = []
         }
         touched.username = false
         touched.password = false
+
+        const [loadedClients, loadedProjects] = await Promise.all([
+            useClientService().getAll(),
+            useProjectService().getAll({ archived: false }),
+        ])
+        clients.value = loadedClients
+        allProjects.value = loadedProjects
     }
 })
 
@@ -113,6 +186,8 @@ async function handleSubmit() {
         const payload: UserWrite = {
             username: form.username.trim(),
             roles: form.roles,
+            client: form.clientId !== null ? `/api/clients/${form.clientId}` : null,
+            allowedProjects: form.allowedProjectIds.map((id) => `/api/projects/${id}`),
         }
         if (form.password) {
             payload.password = form.password