Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| d4a5df50a7 | |||
| 191fd42406 |
+1
-1
@@ -1,2 +1,2 @@
|
|||||||
parameters:
|
parameters:
|
||||||
app.version: '0.1.98'
|
app.version: '0.1.99'
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -12,8 +12,7 @@
|
|||||||
:label="filterButtonLabel"
|
:label="filterButtonLabel"
|
||||||
icon-name="mdi:tune"
|
icon-name="mdi:tune"
|
||||||
icon-position="left"
|
icon-position="left"
|
||||||
icon-size="20"
|
icon-size="24"
|
||||||
button-class="w-[180px] justify-start gap-4 text-black"
|
|
||||||
@click="openFilters"
|
@click="openFilters"
|
||||||
/>
|
/>
|
||||||
<MalioButton
|
<MalioButton
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
Reference in New Issue
Block a user