Compare commits

...

4 Commits

Author SHA1 Message Date
gitea-actions d4a5df50a7 chore: bump version to v0.1.99
Auto Tag Develop / tag (push) Successful in 6s
Build & Push Docker Image / build (push) Successful in 38s
2026-06-09 06:07:03 +00:00
tristan 191fd42406 Correctifs frontend ecran categories + alignement boutons admin (ERP-117) (#77)
Auto Tag Develop / tag (push) Successful in 9s
## Contexte
ERP-117 — correctifs frontend sur l'ecran de gestion des categories et alignement des boutons d'action des ecrans admin.

## Changements
### Drawer categories
- Titre stable « Modifier la categorie » (plus de bascule view → edit selon l'etat « dirty »), aligne sur les drawers simples du projet.
- Bouton Enregistrer toujours actif : il sauvegarde a tout moment, meme sans modification (PATCH du payload complet `name` + `categoryTypes`, comme `SiteDrawer`).
- Champ « Types de categorie » : suppression du label « Selectionner un ou plusieurs types ».

### Alignement des boutons admin
- Ecran Categories : ordre des boutons Filtres avant Ajouter + gap reduit (`gap-8`), comme le repertoire client.
- Boutons d'ajout admin (categories, roles, sites) passes en `variant=secondary`.
- Boutons Filtres (categories, audit-log, clients) en `tertiary` simple : suppression des surcharges de classe, icone a gauche 24px.

## Tests
- `useCategoryForm` mis a jour (PATCH payload complet).
- `make nuxt-test` : 256/256 OK.
- `make nuxt-lint` : OK.

Reviewed-on: #77
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>
2026-06-09 06:06:52 +00:00
gitea-actions edfb2b1619 chore: bump version to v0.1.98
Auto Tag Develop / tag (push) Successful in 6s
Build & Push Docker Image / build (push) Successful in 37s
2026-06-08 14:53:01 +00:00
tristan c5c650c599 style(front) : marges PageHeader (38px haut / 30px bas) + ordre boutons Filtres avant Ajouter (repertoire client)
Auto Tag Develop / tag (push) Successful in 7s
2026-06-08 16:52:53 +02:00
11 changed files with 76 additions and 90 deletions
+1 -1
View File
@@ -1,2 +1,2 @@
parameters: parameters:
app.version: '0.1.97' app.version: '0.1.99'
+1 -3
View File
@@ -416,7 +416,6 @@
"newCategory": "Ajouter", "newCategory": "Ajouter",
"editCategory": "Modifier la catégorie", "editCategory": "Modifier la catégorie",
"createCategory": "Créer une catégorie", "createCategory": "Créer une catégorie",
"viewCategory": "Détail de la catégorie",
"noCategories": "Aucune catégorie pour l'instant.", "noCategories": "Aucune catégorie pour l'instant.",
"table": { "table": {
"name": "Nom", "name": "Nom",
@@ -431,8 +430,7 @@
}, },
"form": { "form": {
"name": "Nom", "name": "Nom",
"types": "Types de catégorie", "types": "Types de catégorie"
"typesPlaceholder": "Sélectionner un ou plusieurs types"
}, },
"validation": { "validation": {
"nameRequired": "Le nom est obligatoire.", "nameRequired": "Le nom est obligatoire.",
@@ -31,7 +31,6 @@
v-model="form.categoryTypeIds.value" v-model="form.categoryTypeIds.value"
:options="typeOptions" :options="typeOptions"
:label="t('admin.categories.form.types')" :label="t('admin.categories.form.types')"
:empty-option-label="t('admin.categories.form.typesPlaceholder')"
:error="form.errors.categoryTypes" :error="form.errors.categoryTypes"
:display-tag="true" :display-tag="true"
:disabled="loadingTypes" :disabled="loadingTypes"
@@ -91,28 +90,17 @@ const emit = defineEmits<{
delete: [] delete: []
}>() }>()
/** // Mode du drawer : creation (pas de category prop, POST au save) ou
* Mode du drawer (dérivé du composable `useCategoryForm`) : // modification d'une categorie existante (PATCH au save). Pas de distinction
* - 'create' : pas de category prop, formulaire vide, POST au save. // view/edit : comme les autres drawers, le titre et le bouton Enregistrer sont
* - 'view' : category prop set, formulaire pre-rempli, save MASQUE // stables quel que soit l'etat « dirty » du formulaire.
* 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.
*/
type DrawerMode = 'create' | 'view' | 'edit'
const isCreateMode = computed(() => props.category === null) const isCreateMode = computed(() => props.category === null)
const mode = computed<DrawerMode>(() => { const headerLabel = computed(() =>
if (isCreateMode.value) return 'create' isCreateMode.value
return form.isDirty.value ? 'edit' : 'view' ? t('admin.categories.createCategory')
}) : t('admin.categories.editCategory'),
)
const headerLabel = computed(() => {
if (mode.value === 'create') return t('admin.categories.createCategory')
if (mode.value === 'edit') return t('admin.categories.editCategory')
return t('admin.categories.viewCategory')
})
// Le bouton Supprimer n'est visible qu'en consultation/edition d'une categorie // Le bouton Supprimer n'est visible qu'en consultation/edition d'une categorie
// existante et seulement pour les users ayant la permission manage. En mode // existante et seulement pour les users ayant la permission manage. En mode
@@ -121,10 +109,12 @@ const canShowDelete = computed(
() => !isCreateMode.value && can('catalog.categories.manage'), () => !isCreateMode.value && can('catalog.categories.manage'),
) )
// Save : visible en creation, ou en edition (apres modification d'un champ). // Save : visible en creation, et en consultation/edition d'une categorie
// Masque en view tant que rien n'a change. // existante (l'utilisateur doit pouvoir enregistrer sans qu'un champ ait
// d'abord ete modifie). Le bouton reste neanmoins protege par son `disabled`
// pendant la soumission / le chargement des types.
const canShowSave = computed( const canShowSave = computed(
() => mode.value === 'create' || mode.value === 'edit', () => isCreateMode.value || can('catalog.categories.manage'),
) )
const typeOptions = computed(() => const typeOptions = computed(() =>
@@ -154,18 +144,18 @@ watch(
) )
/** /**
* Sauvegarde : delegue au composable (POST en mode create, PATCH en mode * Sauvegarde : delegue au composable (POST en creation, PATCH en modification).
* edit). Le toast succes + mapping erreur 409/422 est gere par le composable. * Le toast succes + mapping erreur 409/422 est gere par le composable. Le PATCH
* En cas de succes, on ferme le drawer et on previent le parent pour qu'il * envoie le payload complet, donc le bouton Enregistrer sauvegarde a tout
* refresh la liste. * moment (meme sans modification). En cas de succes, on ferme le drawer et on
* previent le parent pour qu'il refresh la liste.
*/ */
async function handleSave(): Promise<void> { async function handleSave(): Promise<void> {
let result: Category | null = null const result = isCreateMode.value
if (mode.value === 'create') { ? await form.submitCreate()
result = await form.submitCreate() : props.category
} else if (mode.value === 'edit' && props.category) { ? await form.submitUpdate(props.category.id)
result = await form.submitUpdate(props.category.id) : null
}
if (result) { if (result) {
emit('saved') emit('saved')
emit('update:modelValue', false) emit('update:modelValue', false)
@@ -346,7 +346,7 @@ describe('useCategoryForm', () => {
}) })
describe('submitUpdate', () => { describe('submitUpdate', () => {
it('appelle PATCH /categories/{id} uniquement avec les champs modifies', async () => { it('appelle PATCH /categories/{id} avec le payload complet (name + categoryTypes)', async () => {
mockPatch.mockResolvedValueOnce({ ...CAT, name: 'Vis V2' }) mockPatch.mockResolvedValueOnce({ ...CAT, name: 'Vis V2' })
const form = useCategoryForm() const form = useCategoryForm()
form.loadFrom(CAT) form.loadFrom(CAT)
@@ -354,9 +354,11 @@ describe('useCategoryForm', () => {
await form.submitUpdate(42) await form.submitUpdate(42)
// Payload complet : meme si seul le name change, on renvoie aussi
// les categoryTypes (PATCH full payload, cf. drawers simples).
expect(mockPatch).toHaveBeenCalledWith( expect(mockPatch).toHaveBeenCalledWith(
'/categories/42', '/categories/42',
{ name: 'Vis V2' }, // pas de categoryTypes car non modifies { name: 'Vis V2', categoryTypes: ['/api/category_types/1'] },
{ toast: false }, { toast: false },
) )
}) })
@@ -371,20 +373,25 @@ describe('useCategoryForm', () => {
expect(mockPatch).toHaveBeenCalledWith( expect(mockPatch).toHaveBeenCalledWith(
'/categories/42', '/categories/42',
{ categoryTypes: ['/api/category_types/1', '/api/category_types/2'] }, { name: CAT.name, categoryTypes: ['/api/category_types/1', '/api/category_types/2'] },
{ toast: false }, { toast: false },
) )
}) })
it('court-circuite l appel API si aucun champ n a change', async () => { it('envoie un PATCH complet meme sans modification (save a tout moment)', async () => {
mockPatch.mockResolvedValueOnce(CAT)
const form = useCategoryForm() const form = useCategoryForm()
form.loadFrom(CAT) form.loadFrom(CAT)
// Aucune modification — isDirty=false, patch payload vide. // Aucune modification : le PATCH part quand meme avec le payload complet.
const result = await form.submitUpdate(42) const result = await form.submitUpdate(42)
expect(mockPatch).not.toHaveBeenCalled() expect(mockPatch).toHaveBeenCalledWith(
expect(result).toBeNull() '/categories/42',
{ name: CAT.name, categoryTypes: ['/api/category_types/1'] },
{ toast: false },
)
expect(result).toEqual(CAT)
expect(form.submitting.value).toBe(false) expect(form.submitting.value).toBe(false)
}) })
@@ -174,26 +174,18 @@ export function useCategoryForm() {
} }
/** /**
* PATCH /api/categories/{id}. Envoie uniquement les champs modifies pour * PATCH /api/categories/{id}. Envoie le payload complet (name +
* coller a la semantique merge-patch (Content-Type pose par useApi). * categoryTypes), comme les autres drawers du projet : le bouton
* Renvoie la categorie mise a jour, ou `null` en cas d'echec. * Enregistrer sauvegarde a tout moment, meme sans modification, et renvoie
* toujours un retour (toast succes + refresh). Renvoie la categorie mise a
* jour, ou `null` en cas d'echec.
*/ */
async function submitUpdate(id: number): Promise<Category | null> { async function submitUpdate(id: number): Promise<Category | null> {
if (!validate()) return null if (!validate()) return null
submitting.value = true submitting.value = true
const payload: Record<string, unknown> = {} const payload: Record<string, unknown> = {
if (name.value !== initialName.value) { name: name.value.trim(),
payload.name = name.value.trim() categoryTypes: categoryTypeIds.value.map(id => `/api/category_types/${id}`),
}
if (!sameIds(categoryTypeIds.value, initialCategoryTypeIds.value)) {
payload.categoryTypes = categoryTypeIds.value.map(id => `/api/category_types/${id}`)
}
// Garde-fou : un PATCH sans changement ne sert a rien. Theoriquement
// empeche par le drawer (bouton Enregistrer masque si !isDirty) mais
// on protege le composable contre un appel direct mal utilise.
if (Object.keys(payload).length === 0) {
submitting.value = false
return null
} }
try { try {
const updated = await api.patch<Category>(`/categories/${id}`, payload, { const updated = await api.patch<Category>(`/categories/${id}`, payload, {
@@ -3,17 +3,10 @@
<PageHeader> <PageHeader>
{{ t('admin.categories.title') }} {{ t('admin.categories.title') }}
<template #actions> <template #actions>
<!-- gap-12 = 48px d'espacement entre Ajouter et Filtres (meme <!-- gap-8 = 32px d'espacement entre Filtres et Ajouter (meme
design que le Repertoire Clients). --> design que le Repertoire Clients). -->
<div class="flex items-center gap-12"> <div class="flex items-center gap-8">
<MalioButton <!-- Bouton Filtres a GAUCHE d'Ajouter. Le compteur reflete
v-if="canManage"
:label="t('admin.categories.newCategory')"
icon-name="mdi:add-bold"
icon-position="left"
@click="openCreateDrawer"
/>
<!-- Bouton Filtres a DROITE d'Ajouter. Le compteur reflete
les filtres actifs. --> les filtres actifs. -->
<MalioButton <MalioButton
variant="tertiary" variant="tertiary"
@@ -21,9 +14,16 @@
icon-name="mdi:tune" icon-name="mdi:tune"
icon-position="left" icon-position="left"
icon-size="24" icon-size="24"
button-class="w-[184px] justify-start gap-4 text-black"
@click="openFilters" @click="openFilters"
/> />
<MalioButton
v-if="canManage"
variant="secondary"
:label="t('admin.categories.newCategory')"
icon-name="mdi:add-bold"
icon-position="left"
@click="openCreateDrawer"
/>
</div> </div>
</template> </template>
</PageHeader> </PageHeader>
@@ -3,8 +3,18 @@
<PageHeader> <PageHeader>
{{ t('commercial.clients.title') }} {{ t('commercial.clients.title') }}
<template #actions> <template #actions>
<!-- gap-12 = 48px d'espacement entre Ajouter et Filtres. --> <!-- gap-8 = 32px d'espacement entre Filtres et Ajouter. -->
<div class="flex items-center gap-8"> <div class="flex items-center gap-8">
<!-- Bouton Filtres a GAUCHE d'Ajouter. Le compteur reflete les filtres actifs. -->
<MalioButton
v-if="canView"
variant="tertiary"
:label="filterButtonLabel"
icon-name="mdi:tune"
icon-position="left"
icon-size="24"
@click="openFilters"
/>
<MalioButton <MalioButton
v-if="canManage" v-if="canManage"
variant="secondary" variant="secondary"
@@ -13,18 +23,6 @@
icon-position="left" icon-position="left"
@click="goToCreate" @click="goToCreate"
/> />
<!-- Bouton Filtres a DROITE d'Ajouter : meme design que
l'audit-log. Le compteur reflete les filtres actifs. -->
<MalioButton
v-if="canView"
variant="tertiary"
:label="filterButtonLabel"
icon-name="mdi:tune"
icon-position="left"
icon-size="20"
button-class="w-[180px] justify-start gap-4 text-black"
@click="openFilters"
/>
</div> </div>
</template> </template>
</PageHeader> </PageHeader>
@@ -9,7 +9,6 @@
icon-name="mdi:tune" icon-name="mdi:tune"
icon-position="left" icon-position="left"
icon-size="24" icon-size="24"
button-class="w-[184px] justify-start gap-4 text-black"
@click="openFilters" @click="openFilters"
/> />
</template> </template>
@@ -5,6 +5,7 @@
<template #actions> <template #actions>
<MalioButton <MalioButton
v-if="can('core.roles.manage')" v-if="can('core.roles.manage')"
variant="secondary"
:label="t('admin.roles.newRole')" :label="t('admin.roles.newRole')"
icon-name="mdi:add-bold" icon-name="mdi:add-bold"
icon-position="left" icon-position="left"
@@ -5,6 +5,7 @@
<template #actions> <template #actions>
<MalioButton <MalioButton
v-if="can('sites.manage')" v-if="can('sites.manage')"
variant="secondary"
:label="t('admin.sites.newSite')" :label="t('admin.sites.newSite')"
icon-name="mdi:add-bold" icon-name="mdi:add-bold"
icon-position="left" icon-position="left"
+4 -4
View File
@@ -2,11 +2,11 @@
<!-- Entete de page standard : source unique du style des titres. <!-- Entete de page standard : source unique du style des titres.
Slot par defaut = texte du titre, slot #actions = boutons a droite. Slot par defaut = texte du titre, slot #actions = boutons a droite.
Sticky en haut du <main> scrollable : reste visible au scroll. Fond blanc Sticky en haut du <main> scrollable : reste visible au scroll. Fond blanc
+ pt-11/pb-[34px] (au lieu de marges) pour que le contenu defilant soit + pt-[38px]/pb-[30px] (au lieu de marges) pour que le contenu defilant soit
masque sous l'entete (espaces haut ET bas compris) et que l'entete soit masque sous l'entete (espaces haut ET bas compris) et que l'entete soit
collee sous le SiteSelector sans trou. pt-11 = 44px, la marge haute collee sous le SiteSelector sans trou. pt = marge haute (38px),
d'origine. z-20 < drawers/modales. --> pb = espace titre -> contenu (30px). z-20 < drawers/modales. -->
<div class="sticky top-0 z-20 flex items-center justify-between gap-4 bg-white pt-11 pb-[34px]"> <div class="sticky top-0 z-20 flex items-center justify-between gap-4 bg-white pt-[38px] pb-[30px]">
<h1 class="text-[30px] font-semibold text-primary-500"> <h1 class="text-[30px] font-semibold text-primary-500">
<slot/> <slot/>
</h1> </h1>