[ERP-50] Implémenter les composables useCategoriesAdmin et useCategoryForm (#25)

Lien Lesstime : #50

## Résumé
Refacto : extraction de la logique fetch/CRUD inline de la page categories (ERP-49) vers deux composables dédiés, conformément au pattern Starseed (useSidebar / useModules).

- **useCategoriesAdmin** : singleton state (`categories` + `types` + `loading` + `error`). Pré-chargement des types au mount de la page (au lieu d'un fetch par ouverture du drawer). Reset au logout via `onAuthSessionCleared` + appel explicite dans `logout.vue`.
- **useCategoryForm** : state local par form (pas singleton, contrairement à `useCategoriesAdmin`). Valide côté client en miroir des RG back (RG-1.02 / RG-1.04 / RG-1.05), mappe les erreurs 409 (RG-1.07 doublon) et 422 (violations API Platform) sur les bons champs. `submitCreate` / `submitUpdate` / `submitDelete` renvoient la ressource ou `null` pour découpler la décision de fermeture du drawer.

La page et le drawer deviennent purement présentationnels — aucune régression UX attendue (mêmes validations, mêmes toasts, même bascule view → edit via `isDirty` exposé par le composable).

## Décisions
- `useCategoriesAdmin` porte aussi les types (`fetchTypes`), pas seulement `categories` — sinon le drawer continuerait à fetcher tout seul et la refacto n'aurait rien centralisé.
- `buildCreatePayload` retourne `Record<string, unknown>` (pas `CategoryCreateInput`) car la signature `useApi.post(body: AnyObject)` n'accepte pas les types stricts (variance TS).
- Reset au logout : double mécanisme conservé (auto via `onAuthSessionCleared` pour 401, explicite dans `logout.vue` pour logout volontaire — pattern existant Starseed).

## Tests
- `npx nuxi typecheck` ✓ 0 erreur nouvelle (1 erreur pré-existante sur `modules/catalog/nuxt.config.ts` héritée d'ERP-49)
- `make nuxt-test` ✓ 43/43, 0 régression
- PHPUnit ✓ 311/311 (pre-commit)
- Manuel navigateur : à valider (cahier de test consigné dans Lesstime #50)

## ⚠ Note d'intégration
La branche contient encore les 3 commits ERP-49 (`4046910`, `216f388`, `934a12b`) car elle a été créée depuis la branche ERP-49 avant son merge sur develop. Selon l'ordre de merge : soit ERP-49 est mergée d'abord (cette MR ne contiendra plus que le commit ERP-50 après rebase auto), soit cette MR embarque tout l'historique catalog.

Reviewed-on: #25
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

frontend/modules/catalog/components/CategoryDrawer.vue

@@ -16,29 +16,30 @@
             <!-- Nom (RG-1.02 obligatoire / RG-1.04 longueur 2-120 apres trim).
                  Erreur miroir client + erreurs server-side (422) mappees sur ce champ. -->
             <MalioInputText
-                v-model="form.name"
+                v-model="form.name.value"
                 :label="t('admin.categories.form.name')"
                 input-class="w-full"
                 :max-length="120"
-                :error="errors.name"
+                :error="form.errors.value.name"
                 required
             />
 
             <!-- Type (RG-1.05 obligatoire). MalioSelect porte la valeur en
-                 number (categoryType id) ; conversion en IRI au moment du save. -->
+                 number (categoryType id) ; conversion en IRI au moment du save
+                 par le composable useCategoryForm. -->
             <MalioSelect
-                v-model="form.categoryTypeId"
-                :options="categoryTypeOptions"
+                v-model="form.categoryTypeId.value"
+                :options="typeOptions"
                 :label="t('admin.categories.form.type')"
                 :empty-option-label="t('admin.categories.form.typePlaceholder')"
-                :error="errors.categoryType"
+                :error="form.errors.value.categoryType"
                 :disabled="loadingTypes"
             />
 
             <!-- Erreur transverse (typiquement reseau / 5xx) — separe des
                  erreurs de validation par champ. -->
-            <p v-if="errors._global" class="text-sm text-red-600">
-                {{ errors._global }}
+            <p v-if="form.errors.value._global" class="text-sm text-red-600">
+                {{ form.errors.value._global }}
             </p>
         </form>
 
@@ -66,7 +67,7 @@
                 :label="t('common.save')"
                 variant="primary"
                 button-class="w-[150px]"
-                :disabled="saving || loadingTypes"
+                :disabled="form.submitting.value || loadingTypes"
                 @click="handleSave"
             />
         </template>
@@ -74,12 +75,14 @@
 </template>
 
 <script setup lang="ts">
-import type { Category, CategoryType } from '~/modules/catalog/types/category'
-import type { HydraCollection } from '~/shared/utils/api'
+import type { Category } from '~/modules/catalog/types/category'
 
 const { t } = useI18n()
-const api = useApi()
 const { can } = usePermissions()
+const { types, loadingTypes, fetchTypes } = useCategoriesAdmin()
+// Instance dediee de form pour ce drawer — state isole (cf. useCategoryForm
+// n'est pas singleton, contrairement a useCategoriesAdmin).
+const form = useCategoryForm()
 
 const props = defineProps<{
     modelValue: boolean
@@ -93,56 +96,20 @@ const emit = defineEmits<{
 }>()
 
 /**
- * Mode du drawer :
+ * Mode du drawer (dérivé du composable `useCategoryForm`) :
  *  - 'create' : pas de category prop, formulaire vide, POST au save.
  *  - 'view'   : category prop set, formulaire pre-rempli, save MASQUE
  *               jusqu'a ce que l'utilisateur modifie un champ.
  *  - 'edit'   : category prop set et formulaire « dirty » (au moins un
  *               champ different de l'original), PATCH au save.
- *
- * La bascule view → edit est automatique des qu'un champ change (cf. watch
- * sur form). Le label du header suit le mode courant.
  */
 type DrawerMode = 'create' | 'view' | 'edit'
 
-const saving = ref(false)
-const loadingTypes = ref(false)
-const categoryTypes = ref<CategoryType[]>([])
-
-const form = ref({
-    name: '',
-    categoryTypeId: null as number | null,
-})
-
-// Snapshot des valeurs initiales pour detecter le « dirty » (view → edit).
-const initial = ref({
-    name: '',
-    categoryTypeId: null as number | null,
-})
-
-// Erreurs par champ + erreur transverse globale. Pattern propre pour mapper
-// les violations 422 sur les MalioInputText / MalioSelect.
-const errors = ref<{
-    name: string
-    categoryType: string
-    _global: string
-}>({
-    name: '',
-    categoryType: '',
-    _global: '',
-})
-
 const isCreateMode = computed(() => props.category === null)
 
-const isDirty = computed(
-    () =>
-        form.value.name !== initial.value.name
-        || form.value.categoryTypeId !== initial.value.categoryTypeId,
-)
-
 const mode = computed<DrawerMode>(() => {
     if (isCreateMode.value) return 'create'
-    return isDirty.value ? 'edit' : 'view'
+    return form.isDirty.value ? 'edit' : 'view'
 })
 
 const headerLabel = computed(() => {
@@ -164,207 +131,48 @@ const canShowSave = computed(
     () => mode.value === 'create' || mode.value === 'edit',
 )
 
-const categoryTypeOptions = computed(() =>
-    categoryTypes.value.map(ct => ({
+const typeOptions = computed(() =>
+    types.value.map(ct => ({
         label: ct.label,
         value: ct.id,
     })),
 )
 
-/**
- * Charge le referentiel CategoryType. Appele a chaque ouverture du drawer
- * (pas seulement au mount) pour rester a jour si un type est ajoute en
- * arriere-plan. Volontairement sans toast en cas d'echec : on affiche un
- * message inline via `errors._global` pour ne pas spammer.
- */
-async function loadCategoryTypes(): Promise<void> {
-    loadingTypes.value = true
-    try {
-        const data = await api.get<HydraCollection<CategoryType>>(
-            '/category_types',
-            { itemsPerPage: 999 },
-            { toast: false },
-        )
-        categoryTypes.value = data.member ?? []
-    } catch {
-        categoryTypes.value = []
-        errors.value._global = t('admin.categories.toast.typesLoadFailed')
-    } finally {
-        loadingTypes.value = false
-    }
-}
+// Re-initialise le form quand la categorie selectionnee change (clic sur une
+// autre ligne sans fermer le drawer entre-temps).
+watch(() => props.category, (cat) => {
+    form.loadFrom(cat)
+}, { immediate: true })
 
-/**
- * Re-initialise le formulaire a partir de la prop `category`. Aussi appele
- * a l'ouverture du drawer pour repartir d'un etat propre.
- */
-function resetForm(): void {
-    errors.value = { name: '', categoryType: '', _global: '' }
-    if (props.category) {
-        form.value.name = props.category.name
-        form.value.categoryTypeId = props.category.categoryType.id
-        initial.value.name = props.category.name
-        initial.value.categoryTypeId = props.category.categoryType.id
-    } else {
-        form.value.name = ''
-        form.value.categoryTypeId = null
-        initial.value.name = ''
-        initial.value.categoryTypeId = null
-    }
-}
-
-// Re-initialiser quand la categorie selectionnee change (clic sur une autre
-// ligne sans fermer le drawer entre-temps).
-watch(() => props.category, resetForm, { immediate: true })
-
-// A chaque ouverture du drawer : reset + chargement frais des types. Pas
-// d'optimisation cache au M0 — le referentiel est petit et statique.
+// A chaque ouverture du drawer : reload du form + refresh des types (au cas
+// ou un type aurait ete ajoute en arriere-plan depuis le dernier fetch — pas
+// d'optimisation cache au M0, le referentiel est petit).
 watch(
     () => props.modelValue,
     (open) => {
         if (open) {
-            resetForm()
-            loadCategoryTypes()
+            form.loadFrom(props.category)
+            fetchTypes()
         }
     },
 )
 
 /**
- * Validation client-side miroir des RG back. Renvoie true si tout passe et
- * peuple `errors` sinon. Le serveur valide aussi (defense en profondeur) ;
- * la validation client sert juste a eviter l'aller-retour evitable.
- */
-function validate(): boolean {
-    errors.value = { name: '', categoryType: '', _global: '' }
-    const trimmedName = form.value.name.trim()
-
-    // RG-1.02 — name obligatoire (vide / whitespace-only).
-    if (trimmedName === '') {
-        errors.value.name = t('admin.categories.validation.nameRequired')
-    } else if (trimmedName.length < 2 || trimmedName.length > 120) {
-        // RG-1.04 — longueur 2-120 apres trim.
-        errors.value.name = t('admin.categories.validation.nameLength')
-    }
-
-    // RG-1.05 — categoryType obligatoire.
-    if (form.value.categoryTypeId === null) {
-        errors.value.categoryType = t('admin.categories.validation.typeRequired')
-    }
-
-    return errors.value.name === '' && errors.value.categoryType === ''
-}
-
-/**
- * Mappe une reponse 422 d'API Platform sur le state `errors`. API Platform 4
- * retourne soit `violations: [{ propertyPath, message }]` soit
- * `hydra:violations` selon la negociation de format.
- */
-function mapServerViolations(data: unknown): boolean {
-    if (!data || typeof data !== 'object') return false
-    const record = data as Record<string, unknown>
-    const rawViolations = record.violations ?? record['hydra:violations']
-    if (!Array.isArray(rawViolations)) return false
-
-    let mapped = false
-    for (const v of rawViolations) {
-        if (!v || typeof v !== 'object') continue
-        const violation = v as Record<string, unknown>
-        const path = String(violation.propertyPath ?? '')
-        const message = String(violation.message ?? '')
-        if (path === 'name') {
-            errors.value.name = message
-            mapped = true
-        } else if (path === 'categoryType') {
-            errors.value.categoryType = message
-            mapped = true
-        }
-    }
-    return mapped
-}
-
-/**
- * Extrait un message d'erreur HTTP au format API Platform / Hydra.
- */
-function extractErrorMessage(data: unknown): string {
-    if (!data || typeof data !== 'object') return ''
-    const record = data as Record<string, unknown>
-    return (
-        (record['hydra:description'] as string)
-        ?? (record.detail as string)
-        ?? (record.description as string)
-        ?? ''
-    )
-}
-
-/**
- * Sauvegarde la categorie (POST en mode create, PATCH en mode edit).
- * Trim cote client (miroir RG-1.03), conversion ID → IRI pour categoryType,
- * mapping des erreurs server.
+ * Sauvegarde : delegue au composable (POST en mode create, PATCH en mode
+ * edit). Le toast succes + mapping erreur 409/422 est gere par le composable.
+ * En cas de succes, on ferme le drawer et on previent le parent pour qu'il
+ * refresh la liste.
  */
 async function handleSave(): Promise<void> {
-    if (!validate()) return
-    saving.value = true
-    errors.value._global = ''
-
-    // Trim cote client (miroir RG-1.03). Le serveur retrim de toute facon.
-    const payload = {
-        name: form.value.name.trim(),
-        categoryType: `/api/category_types/${form.value.categoryTypeId}`,
+    let result: Category | null = null
+    if (mode.value === 'create') {
+        result = await form.submitCreate()
+    } else if (mode.value === 'edit' && props.category) {
+        result = await form.submitUpdate(props.category.id)
     }
-
-    try {
-        if (mode.value === 'create') {
-            await api.post('/categories', payload, {
-                toastSuccessMessage: t('admin.categories.toast.created'),
-                toast: false, // gestion fine des erreurs ci-dessous
-            })
-        } else if (mode.value === 'edit' && props.category) {
-            await api.patch(`/categories/${props.category.id}`, payload, {
-                toastSuccessMessage: t('admin.categories.toast.updated'),
-                toast: false,
-            })
-        }
-
-        // Succes : toast manuel (car on a desactive le toast du composable
-        // pour gerer finement les erreurs) + propagation au parent.
-        useToast().success({
-            title: 'Succès',
-            message:
-                mode.value === 'create'
-                    ? t('admin.categories.toast.created')
-                    : t('admin.categories.toast.updated'),
-        })
+    if (result) {
         emit('saved')
         emit('update:modelValue', false)
-    } catch (err: unknown) {
-        const error = err as { response?: { status?: number, _data?: unknown } }
-        const status = error?.response?.status
-        const data = error?.response?._data
-
-        if (status === 409) {
-            // RG-1.07 — doublon (name, categoryType). Toast custom + erreur
-            // mappee sur le champ name (origine du conflit).
-            const duplicateMessage = t('admin.categories.toast.duplicate', {
-                name: payload.name,
-            })
-            errors.value.name = duplicateMessage
-            useToast().error({
-                title: 'Erreur',
-                message: duplicateMessage,
-            })
-        } else if (status === 422 && mapServerViolations(data)) {
-            // Violations mappees sur les champs concernes — pas de toast,
-            // l'utilisateur voit l'erreur directement sous le champ.
-        } else {
-            const extracted = extractErrorMessage(data)
-            errors.value._global = extracted || 'Une erreur est survenue.'
-            useToast().error({
-                title: 'Erreur',
-                message: errors.value._global,
-            })
-        }
-    } finally {
-        saving.value = false
     }
 }
 </script>