Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 tristan
|
aa7cda48b3 | ||
|
tristan
|
fd6b7e4c79 |
+10
-10
@@ -144,6 +144,16 @@ return [
|
||||
'module' => 'catalog',
|
||||
'permission' => 'catalog.products.view',
|
||||
],
|
||||
// Stockage (M7, ERP-210). Admin-only : gate par `catalog.storages.view`
|
||||
// et son module owner `catalog`. Reutilise le referentiel StorageType
|
||||
// du M6. Place juste sous le Catalogue produits (items Catalog groupes).
|
||||
[
|
||||
'label' => 'sidebar.catalog.storages',
|
||||
'to' => '/admin/storages',
|
||||
'icon' => 'mdi:warehouse',
|
||||
'module' => 'catalog',
|
||||
'permission' => 'catalog.storages.view',
|
||||
],
|
||||
[
|
||||
'label' => 'sidebar.core.roles',
|
||||
'to' => '/admin/roles',
|
||||
@@ -172,16 +182,6 @@ return [
|
||||
'module' => 'catalog',
|
||||
'permission' => 'catalog.categories.view',
|
||||
],
|
||||
// Stockage (M7, ERP-210). Admin-only : gate par `catalog.storages.view`
|
||||
// et son module owner `catalog`. Reutilise le referentiel StorageType
|
||||
// du M6. Place pres des autres items Catalog (produits, categories).
|
||||
[
|
||||
'label' => 'sidebar.catalog.storages',
|
||||
'to' => '/admin/storages',
|
||||
'icon' => 'mdi:warehouse',
|
||||
'module' => 'catalog',
|
||||
'permission' => 'catalog.storages.view',
|
||||
],
|
||||
[
|
||||
'label' => 'sidebar.core.audit_log',
|
||||
'to' => '/admin/audit-log',
|
||||
|
||||
@@ -54,7 +54,7 @@
|
||||
"catalog": {
|
||||
"categories": "Gestion des catégories",
|
||||
"products": "Catalogue produits",
|
||||
"storages": "Gestion des stockages"
|
||||
"storages": "Catalogue stockages"
|
||||
}
|
||||
},
|
||||
"dashboard": {
|
||||
@@ -1091,6 +1091,47 @@
|
||||
"createSuccess": "Produit créé avec succès",
|
||||
"updateSuccess": "Produit mis à jour avec succès"
|
||||
}
|
||||
},
|
||||
"storages": {
|
||||
"title": "Gestion des stockages",
|
||||
"add": "Ajouter",
|
||||
"export": "Exporter",
|
||||
"empty": "Aucun stockage pour l'instant.",
|
||||
"column": {
|
||||
"name": "Nom",
|
||||
"site": "Site"
|
||||
},
|
||||
"state": {
|
||||
"RECEPTION": "Réception",
|
||||
"PRODUCTION": "Production",
|
||||
"TRIAGE": "Triage"
|
||||
},
|
||||
"filters": {
|
||||
"title": "Filtres",
|
||||
"search": "Recherche",
|
||||
"type": "Type de stockage",
|
||||
"typeAll": "Tous les types",
|
||||
"state": "État",
|
||||
"stateAll": "Tous les états",
|
||||
"site": "Sites",
|
||||
"apply": "Voir les résultats",
|
||||
"reset": "Réinitialiser"
|
||||
},
|
||||
"form": {
|
||||
"title": "Ajouter un stockage",
|
||||
"back": "Retour à la liste",
|
||||
"submit": "Valider",
|
||||
"site": "Site",
|
||||
"storageType": "Type de stockage",
|
||||
"numero": "Numéro",
|
||||
"states": "État du type de stockage",
|
||||
"duplicateNumero": "Un stockage avec ce site, ce type et ce numéro existe déjà."
|
||||
},
|
||||
"toast": {
|
||||
"error": "Une erreur est survenue. Réessayez.",
|
||||
"exportError": "L'export du répertoire stockage a échoué. Réessayez.",
|
||||
"createSuccess": "Stockage créé avec succès"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,189 @@
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
import { useFormErrors } from '~/shared/composables/useFormErrors'
|
||||
import { useStorageForm } from '../useStorageForm'
|
||||
|
||||
// Stubs des auto-imports Nuxt consommes par le composable + ses dependances.
|
||||
const mockGet = vi.hoisted(() => vi.fn())
|
||||
const mockPost = vi.hoisted(() => vi.fn())
|
||||
const mockToastSuccess = vi.hoisted(() => vi.fn())
|
||||
const mockToastError = vi.hoisted(() => vi.fn())
|
||||
|
||||
vi.stubGlobal('useApi', () => ({
|
||||
get: mockGet,
|
||||
post: mockPost,
|
||||
put: vi.fn(),
|
||||
patch: vi.fn(),
|
||||
delete: vi.fn(),
|
||||
}))
|
||||
vi.stubGlobal('useToast', () => ({
|
||||
success: mockToastSuccess,
|
||||
error: mockToastError,
|
||||
}))
|
||||
// useFormErrors est un auto-import Nuxt : on expose l'implementation reelle
|
||||
// (elle consomme useToast/useI18n deja stubbes) pour tester l'integration 422/409.
|
||||
vi.stubGlobal('useFormErrors', useFormErrors)
|
||||
vi.stubGlobal('useI18n', () => ({
|
||||
t: (key: string, params?: Record<string, unknown>) =>
|
||||
params ? `${key}::${JSON.stringify(params)}` : key,
|
||||
}))
|
||||
|
||||
/** Referentiel PLAT des types de stockage (renvoye tel quel, sans filtre site). */
|
||||
const STORAGE_TYPES = {
|
||||
member: [
|
||||
{ '@id': '/api/storage_types/9', label: 'Cellule' },
|
||||
{ '@id': '/api/storage_types/5', label: 'Tas' },
|
||||
],
|
||||
}
|
||||
|
||||
describe('useStorageForm', () => {
|
||||
beforeEach(() => {
|
||||
mockGet.mockReset()
|
||||
mockPost.mockReset()
|
||||
mockToastSuccess.mockReset()
|
||||
mockToastError.mockReset()
|
||||
|
||||
// Routage des GET par url (referentiels). Le type de stockage est un
|
||||
// referentiel plat : meme reponse quelle que soit la requete.
|
||||
mockGet.mockImplementation((url: string) => {
|
||||
if (url === '/sites') {
|
||||
return Promise.resolve({ member: [{ '@id': '/api/sites/1', name: 'Chatellerault' }] })
|
||||
}
|
||||
if (url === '/storage_types') {
|
||||
return Promise.resolve(STORAGE_TYPES)
|
||||
}
|
||||
return Promise.resolve({ member: [] })
|
||||
})
|
||||
})
|
||||
|
||||
describe('referentiel plat — pas de cascade Site->Type (RG-7.03 non portee back)', () => {
|
||||
it('loadReferentials charge les sites et TOUS les types, sans filtre site', async () => {
|
||||
const { siteOptions, storageTypeOptions, loadReferentials } = useStorageForm()
|
||||
await loadReferentials()
|
||||
|
||||
const storageCall = mockGet.mock.calls.find(c => c[0] === '/storage_types')
|
||||
expect(storageCall).toBeDefined()
|
||||
// Aucun filtre siteId envoye (referentiel plat).
|
||||
expect(storageCall?.[1]).not.toHaveProperty('siteId[]')
|
||||
|
||||
expect(siteOptions.value.map(o => o.value)).toEqual(['/api/sites/1'])
|
||||
expect(storageTypeOptions.value.map(o => o.value)).toEqual([
|
||||
'/api/storage_types/9',
|
||||
'/api/storage_types/5',
|
||||
])
|
||||
})
|
||||
|
||||
it('changer de site ne recharge pas les types ni ne purge la selection', async () => {
|
||||
const { form, setSite, setStorageType, loadReferentials } = useStorageForm()
|
||||
await loadReferentials()
|
||||
const callsBefore = mockGet.mock.calls.filter(c => c[0] === '/storage_types').length
|
||||
|
||||
setStorageType('/api/storage_types/9')
|
||||
setSite('/api/sites/1')
|
||||
|
||||
expect(form.siteIri).toBe('/api/sites/1')
|
||||
// Selection conservee : pas de cascade ni de purge par site.
|
||||
expect(form.storageTypeIri).toBe('/api/storage_types/9')
|
||||
const callsAfter = mockGet.mock.calls.filter(c => c[0] === '/storage_types').length
|
||||
expect(callsAfter).toBe(callsBefore)
|
||||
})
|
||||
})
|
||||
|
||||
describe('submit — POST /storages', () => {
|
||||
function fillValidForm(form: ReturnType<typeof useStorageForm>['form']): void {
|
||||
form.siteIri = '/api/sites/1'
|
||||
form.storageTypeIri = '/api/storage_types/9'
|
||||
form.numero = '12'
|
||||
form.states = ['RECEPTION', 'PRODUCTION']
|
||||
}
|
||||
|
||||
it('poste le payload (relations en IRI) et retourne true au succes', async () => {
|
||||
mockPost.mockResolvedValueOnce({ id: 42 })
|
||||
const { form, submit } = useStorageForm()
|
||||
fillValidForm(form)
|
||||
|
||||
const ok = await submit()
|
||||
|
||||
expect(ok).toBe(true)
|
||||
expect(mockPost).toHaveBeenCalledWith(
|
||||
'/storages',
|
||||
{
|
||||
numero: '12',
|
||||
states: ['RECEPTION', 'PRODUCTION'],
|
||||
site: '/api/sites/1',
|
||||
storageType: '/api/storage_types/9',
|
||||
},
|
||||
expect.objectContaining({ toast: false }),
|
||||
)
|
||||
expect(mockToastSuccess).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('omet `site` / `storageType` du payload quand la relation n\'est pas choisie', async () => {
|
||||
// Envoyer null casserait la denormalisation back (IRI attendu) et
|
||||
// court-circuiterait les autres violations -> on omet la cle.
|
||||
mockPost.mockResolvedValueOnce({ id: 43 })
|
||||
const { form, submit } = useStorageForm()
|
||||
fillValidForm(form)
|
||||
form.siteIri = null
|
||||
form.storageTypeIri = null
|
||||
|
||||
await submit()
|
||||
|
||||
const payload = mockPost.mock.calls[0][1]
|
||||
expect(payload).not.toHaveProperty('site')
|
||||
expect(payload).not.toHaveProperty('storageType')
|
||||
// numero envoye en chaine vide si non saisi (NotBlank cote back).
|
||||
expect(payload).toHaveProperty('numero')
|
||||
})
|
||||
|
||||
it('mappe un 409 doublon (site, type, numero) sur errors.numero + toast explicite', async () => {
|
||||
mockPost.mockRejectedValueOnce({ response: { status: 409, _data: {} } })
|
||||
const { form, errors, submit } = useStorageForm()
|
||||
fillValidForm(form)
|
||||
|
||||
const ok = await submit()
|
||||
|
||||
expect(ok).toBe(false)
|
||||
expect(errors.numero).toBe('admin.storages.form.duplicateNumero')
|
||||
expect(mockToastError).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('mappe une 422 inline par champ (errors.numero) sans toast', async () => {
|
||||
mockPost.mockRejectedValueOnce({
|
||||
response: {
|
||||
status: 422,
|
||||
_data: { violations: [{ propertyPath: 'numero', message: 'Le numéro du stockage est obligatoire.' }] },
|
||||
},
|
||||
})
|
||||
const { form, errors, submit } = useStorageForm()
|
||||
fillValidForm(form)
|
||||
form.numero = null
|
||||
|
||||
const ok = await submit()
|
||||
|
||||
expect(ok).toBe(false)
|
||||
expect(errors.numero).toBe('Le numéro du stockage est obligatoire.')
|
||||
expect(mockToastError).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('mappe une 422 sur site / storageType / states (NotNull / Count)', async () => {
|
||||
mockPost.mockRejectedValueOnce({
|
||||
response: {
|
||||
status: 422,
|
||||
_data: { violations: [
|
||||
{ propertyPath: 'site', message: 'Le site est obligatoire.' },
|
||||
{ propertyPath: 'storageType', message: 'Le type de stockage est obligatoire.' },
|
||||
{ propertyPath: 'states', message: 'Sélectionnez au moins un état.' },
|
||||
] },
|
||||
},
|
||||
})
|
||||
const { form, errors, submit } = useStorageForm()
|
||||
fillValidForm(form)
|
||||
|
||||
await submit()
|
||||
|
||||
expect(errors.site).toBe('Le site est obligatoire.')
|
||||
expect(errors.storageType).toBe('Le type de stockage est obligatoire.')
|
||||
expect(errors.states).toBe('Sélectionnez au moins un état.')
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,141 @@
|
||||
/**
|
||||
* Composable du formulaire de creation d'un stockage (M7 — ERP-217).
|
||||
*
|
||||
* Porte l'etat du formulaire principal (a plat, PAS d'onglets — HP-M7-06), les
|
||||
* referentiels des selects et la soumission `POST /api/storages` avec mapping des
|
||||
* erreurs 422/409 inline (useFormErrors, ERP-101). Reference : ecran « Ajouter un
|
||||
* produit » (M6) / ecran Client.
|
||||
*
|
||||
* Referentiel des types de stockage : PLAT (RG-6.06 / decision back). Le concept
|
||||
* type<->site a ete retire en M6 (jointure storage_type_site droppee, migration
|
||||
* Version20260626100000) et `StorageType` n'a plus de relation Site ; le provider
|
||||
* ignore tout filtre `?siteId[]`. La cascade Site->Type de RG-7.03 n'est donc PAS
|
||||
* portee (decision produit du 30/06 : referentiel plat, fidele au back ; RG-7.03 a
|
||||
* reclarifier cote spec). On charge donc TOUS les types une fois, Site et Type
|
||||
* independants.
|
||||
*
|
||||
* Etat 100 % local a l'instance.
|
||||
*/
|
||||
import { reactive, ref } from 'vue'
|
||||
import {
|
||||
useSiteOptions,
|
||||
useStorageTypeOptions,
|
||||
} from '~/modules/catalog/composables/useProductOptions'
|
||||
|
||||
/** Etats d'un stockage (miroir de l'enum back Storage::STATE_*, RG-7.04). */
|
||||
export const STORAGE_STATES = ['RECEPTION', 'PRODUCTION', 'TRIAGE'] as const
|
||||
|
||||
export function useStorageForm() {
|
||||
const api = useApi()
|
||||
const { t } = useI18n()
|
||||
const toast = useToast()
|
||||
const formErrors = useFormErrors()
|
||||
|
||||
const sites = useSiteOptions()
|
||||
const storageTypes = useStorageTypeOptions()
|
||||
|
||||
// ── Etat du formulaire ───────────────────────────────────────────────────
|
||||
// Les relations (site, storageType) sont stockees en IRI (envoyees telles
|
||||
// quelles au POST) ; `states` porte les codes enum.
|
||||
const form = reactive({
|
||||
siteIri: null as string | null,
|
||||
storageTypeIri: null as string | null,
|
||||
numero: null as string | null,
|
||||
states: [] as string[],
|
||||
})
|
||||
|
||||
const submitting = ref(false)
|
||||
|
||||
/** Met a jour le site (select simple, RG-7.02). */
|
||||
function setSite(iri: string | null): void {
|
||||
form.siteIri = iri
|
||||
}
|
||||
|
||||
/** Met a jour le type de stockage (select simple, referentiel plat). */
|
||||
function setStorageType(iri: string | null): void {
|
||||
form.storageTypeIri = iri
|
||||
}
|
||||
|
||||
/** Met a jour les etats (multi-select, >= 1, RG-7.04). */
|
||||
function setStates(states: string[]): void {
|
||||
form.states = states
|
||||
}
|
||||
|
||||
/**
|
||||
* Charge les referentiels (sites + TOUS les types de stockage). Resilient :
|
||||
* un referentiel en echec reste vide sans casser l'autre. Pas de cascade par
|
||||
* site (referentiel plat, cf. docblock).
|
||||
*/
|
||||
async function loadReferentials(): Promise<void> {
|
||||
await Promise.allSettled([sites.load(), storageTypes.load()])
|
||||
}
|
||||
|
||||
/**
|
||||
* Soumet la creation. Retourne true au succes (la page redirige), false sinon.
|
||||
* 422 → mapping inline par champ (useFormErrors, `{ toast: false }`) ; 409
|
||||
* doublon du triplet (site, type, numero, RG-7.01) → erreur inline sur `numero`
|
||||
* (propertyPath exploitable cote back) + toast explicite.
|
||||
*/
|
||||
async function submit(): Promise<boolean> {
|
||||
if (submitting.value) {
|
||||
return false
|
||||
}
|
||||
submitting.value = true
|
||||
formErrors.clearErrors()
|
||||
try {
|
||||
const payload: Record<string, unknown> = {
|
||||
// Chaine vide (jamais null) : le setter back setNumero attend un
|
||||
// `string` non-nullable -> envoyer null leverait une erreur de type
|
||||
// (denormalisation) qui court-circuiterait les autres violations.
|
||||
// Avec '', la contrainte NotBlank renvoie un message propre par champ.
|
||||
numero: form.numero ?? '',
|
||||
states: form.states,
|
||||
}
|
||||
// `site` / `storageType` attendent un IRI (string) : envoyer null
|
||||
// declencherait une erreur de denormalisation API Platform qui
|
||||
// court-circuiterait TOUTES les autres violations. On omet la cle quand
|
||||
// la relation n'est pas choisie -> la contrainte NotNull renvoie un
|
||||
// message propre, et les autres champs sont valides dans la meme 422.
|
||||
if (form.siteIri) {
|
||||
payload.site = form.siteIri
|
||||
}
|
||||
if (form.storageTypeIri) {
|
||||
payload.storageType = form.storageTypeIri
|
||||
}
|
||||
|
||||
const options = { headers: { Accept: 'application/ld+json' }, toast: false }
|
||||
await api.post('/storages', payload, options)
|
||||
toast.success({ title: t('admin.storages.toast.createSuccess') })
|
||||
return true
|
||||
}
|
||||
catch (error) {
|
||||
const status = (error as { response?: { status?: number } })?.response?.status
|
||||
if (status === 409) {
|
||||
// Doublon (site, type, numero) RG-7.01 : inline sur `numero` + toast.
|
||||
const message = t('admin.storages.form.duplicateNumero')
|
||||
formErrors.setError('numero', message)
|
||||
toast.error({ title: t('admin.storages.toast.error'), message })
|
||||
}
|
||||
else {
|
||||
formErrors.handleApiError(error, { fallbackMessage: t('admin.storages.toast.error') })
|
||||
}
|
||||
return false
|
||||
}
|
||||
finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
form,
|
||||
errors: formErrors.errors,
|
||||
submitting,
|
||||
siteOptions: sites.options,
|
||||
storageTypeOptions: storageTypes.options,
|
||||
setSite,
|
||||
setStorageType,
|
||||
setStates,
|
||||
loadReferentials,
|
||||
submit,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,270 @@
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
import { mount, flushPromises } from '@vue/test-utils'
|
||||
import { defineComponent, h, ref } from 'vue'
|
||||
|
||||
// ── Auto-imports Nuxt stubbes globalement ───────────────────────────────────
|
||||
// La page ne les importe pas (auto-import) : on les expose en globals pour le
|
||||
// runtime de test (happy-dom). Meme philosophie que la spec Catalogue produit.
|
||||
const mockPush = vi.hoisted(() => vi.fn())
|
||||
const mockApiGet = vi.hoisted(() => vi.fn())
|
||||
const mockCan = vi.hoisted(() => vi.fn())
|
||||
const mockSetFilters = vi.hoisted(() => vi.fn())
|
||||
const mockFetch = vi.hoisted(() => vi.fn())
|
||||
const mockToastError = vi.hoisted(() => vi.fn())
|
||||
|
||||
vi.stubGlobal('useI18n', () => ({ t: (key: string) => key }))
|
||||
vi.stubGlobal('useHead', () => undefined)
|
||||
vi.stubGlobal('useApi', () => ({ get: mockApiGet }))
|
||||
vi.stubGlobal('useRouter', () => ({ push: mockPush }))
|
||||
vi.stubGlobal('useToast', () => ({ error: mockToastError, success: vi.fn() }))
|
||||
vi.stubGlobal('usePermissions', () => ({ can: mockCan }))
|
||||
// usePaginatedList est l'auto-import pilotant la liste : on controle items +
|
||||
// setFilters + fetch. La ligne reproduit le contrat JSON reel (§ 4.0.bis) :
|
||||
// site et storageType embarques, displayName virtuel (RG-7.05).
|
||||
vi.stubGlobal('usePaginatedList', () => ({
|
||||
items: ref<Array<Record<string, unknown>>>([
|
||||
{
|
||||
id: 42,
|
||||
numero: '12',
|
||||
states: ['RECEPTION', 'PRODUCTION'],
|
||||
displayName: 'Cellule 12',
|
||||
site: { '@id': '/api/sites/1', id: 1, name: 'Chatellerault', code: '86' },
|
||||
storageType: { '@id': '/api/storage_types/9', id: 9, code: 'CELLULE', label: 'Cellule' },
|
||||
},
|
||||
]),
|
||||
totalItems: ref(1),
|
||||
currentPage: ref(1),
|
||||
itemsPerPage: ref(10),
|
||||
itemsPerPageOptions: ref([10, 25, 50]),
|
||||
fetch: mockFetch,
|
||||
goToPage: vi.fn(),
|
||||
setItemsPerPage: vi.fn(),
|
||||
setFilters: mockSetFilters,
|
||||
}))
|
||||
|
||||
// happy-dom n'implemente pas createObjectURL : on ajoute les methodes statiques
|
||||
// sur la classe URL existante (sans la remplacer — sinon `new URL()` casse).
|
||||
globalThis.URL.createObjectURL = vi.fn(() => 'blob:fake')
|
||||
globalThis.URL.revokeObjectURL = vi.fn()
|
||||
|
||||
// Import APRES les stubs (la page resout les auto-imports au top-level du module).
|
||||
const StoragesIndex = (await import('../admin/storages/index.vue')).default
|
||||
|
||||
// ── Stubs de composants ──────────────────────────────────────────────────────
|
||||
const ButtonStub = defineComponent({
|
||||
props: { label: { type: String, default: '' }, disabled: { type: Boolean, default: false } },
|
||||
emits: ['click'],
|
||||
setup(props, { emit }) {
|
||||
return () => h('button', { 'data-label': props.label, onClick: () => emit('click') }, props.label)
|
||||
},
|
||||
})
|
||||
|
||||
const DataTableStub = defineComponent({
|
||||
props: { items: { type: Array, default: () => [] } },
|
||||
emits: ['row-click', 'update:page', 'update:per-page'],
|
||||
setup(props, { emit }) {
|
||||
return () => h('div', { 'data-testid': 'datatable' },
|
||||
(props.items as Array<Record<string, unknown>>).map(it =>
|
||||
h('tr', {
|
||||
'data-row-id': it.id,
|
||||
'data-name': it.displayName,
|
||||
'data-site': it.siteLabel,
|
||||
'onClick': () => emit('row-click', it),
|
||||
}),
|
||||
),
|
||||
)
|
||||
},
|
||||
})
|
||||
|
||||
const DrawerStub = defineComponent({
|
||||
props: { modelValue: { type: Boolean, default: false } },
|
||||
setup(_, { slots }) {
|
||||
return () => h('div', {}, [slots.header?.(), slots.default?.(), slots.footer?.()])
|
||||
},
|
||||
})
|
||||
|
||||
const SlotStub = defineComponent({ setup(_, { slots }) { return () => h('div', {}, slots.default?.()) } })
|
||||
|
||||
const PageHeaderStub = defineComponent({
|
||||
setup(_, { slots }) { return () => h('div', {}, [slots.default?.(), slots.actions?.()]) },
|
||||
})
|
||||
|
||||
const CheckboxStub = defineComponent({
|
||||
props: { id: { type: String, default: '' }, modelValue: { type: Boolean, default: false } },
|
||||
emits: ['update:model-value'],
|
||||
setup(props, { emit }) {
|
||||
return () => h('input', {
|
||||
'type': 'checkbox',
|
||||
'data-id': props.id,
|
||||
'onChange': (e: Event) => emit('update:model-value', (e.target as HTMLInputElement).checked),
|
||||
})
|
||||
},
|
||||
})
|
||||
|
||||
const SelectStub = defineComponent({
|
||||
props: {
|
||||
modelValue: { type: [String, Number, null] as unknown as () => string | number | null, default: null },
|
||||
options: { type: Array, default: () => [] },
|
||||
emptyOptionLabel: { type: String, default: '' },
|
||||
},
|
||||
emits: ['update:model-value'],
|
||||
setup(props, { emit }) {
|
||||
return () => h('select', {
|
||||
'data-empty-label': props.emptyOptionLabel,
|
||||
'onChange': (e: Event) => emit('update:model-value', (e.target as HTMLSelectElement).value),
|
||||
}, (props.options as Array<{ value: string | number, label: string }>).map(o =>
|
||||
h('option', { value: o.value }, o.label),
|
||||
))
|
||||
},
|
||||
})
|
||||
|
||||
const InputTextStub = defineComponent({ setup() { return () => h('input') } })
|
||||
|
||||
function mountPage() {
|
||||
return mount(StoragesIndex, {
|
||||
global: {
|
||||
stubs: {
|
||||
PageHeader: PageHeaderStub,
|
||||
MalioButton: ButtonStub,
|
||||
MalioDataTable: DataTableStub,
|
||||
MalioDrawer: DrawerStub,
|
||||
MalioAccordion: SlotStub,
|
||||
MalioAccordionItem: SlotStub,
|
||||
MalioInputText: InputTextStub,
|
||||
MalioSelect: SelectStub,
|
||||
MalioCheckbox: CheckboxStub,
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
describe('Répertoire stockage (page /admin/storages)', () => {
|
||||
beforeEach(() => {
|
||||
mockPush.mockReset()
|
||||
mockApiGet.mockReset().mockImplementation((url: string) => {
|
||||
if (url === '/storage_types') {
|
||||
return Promise.resolve({ member: [{ '@id': '/api/storage_types/9', id: 9, label: 'Cellule' }] })
|
||||
}
|
||||
if (url === '/sites') {
|
||||
return Promise.resolve({ member: [{ id: 1, name: 'Chatellerault' }] })
|
||||
}
|
||||
return Promise.resolve({ member: [] })
|
||||
})
|
||||
mockCan.mockReset().mockReturnValue(true)
|
||||
mockSetFilters.mockReset()
|
||||
mockFetch.mockReset()
|
||||
mockToastError.mockReset()
|
||||
})
|
||||
|
||||
it('charge la liste au montage', async () => {
|
||||
mountPage()
|
||||
await flushPromises()
|
||||
expect(mockFetch).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('mappe les colonnes Nom / Site sur le JSON réel (§ 4.0.bis)', async () => {
|
||||
const wrapper = mountPage()
|
||||
await flushPromises()
|
||||
const row = wrapper.find('tr[data-row-id="42"]')
|
||||
// displayName = libelle type + numero (RG-7.05).
|
||||
expect(row.attributes('data-name')).toBe('Cellule 12')
|
||||
// Site formate « Nom (Code) », miroir de l'export back.
|
||||
expect(row.attributes('data-site')).toBe('Chatellerault (86)')
|
||||
})
|
||||
|
||||
it('affiche « + Ajouter » uniquement avec la permission manage', async () => {
|
||||
mockCan.mockImplementation((perm: string) => perm === 'catalog.storages.manage')
|
||||
const wrapper = mountPage()
|
||||
await flushPromises()
|
||||
expect(wrapper.find('[data-label="admin.storages.add"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('masque « + Ajouter » sans la permission manage (view seul)', async () => {
|
||||
mockCan.mockImplementation((perm: string) => perm === 'catalog.storages.view')
|
||||
const wrapper = mountPage()
|
||||
await flushPromises()
|
||||
expect(wrapper.find('[data-label="admin.storages.add"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('navigue vers l\'édition au clic sur une ligne', async () => {
|
||||
const wrapper = mountPage()
|
||||
await flushPromises()
|
||||
await wrapper.find('tr[data-row-id="42"]').trigger('click')
|
||||
expect(mockPush).toHaveBeenCalledWith('/admin/storages/42/edit')
|
||||
})
|
||||
|
||||
it('navigue vers la création au clic sur « + Ajouter »', async () => {
|
||||
const wrapper = mountPage()
|
||||
await flushPromises()
|
||||
await wrapper.find('[data-label="admin.storages.add"]').trigger('click')
|
||||
expect(mockPush).toHaveBeenCalledWith('/admin/storages/new')
|
||||
})
|
||||
|
||||
it('appelle l\'export XLSX sur /storages/export.xlsx en blob', async () => {
|
||||
const wrapper = mountPage()
|
||||
await flushPromises()
|
||||
await wrapper.find('[data-label="admin.storages.export"]').trigger('click')
|
||||
await flushPromises()
|
||||
expect(mockApiGet).toHaveBeenCalledWith(
|
||||
'/storages/export.xlsx',
|
||||
expect.any(Object),
|
||||
expect.objectContaining({ responseType: 'blob', toast: false }),
|
||||
)
|
||||
})
|
||||
|
||||
it('répercute les sites cochés dans setFilters (filtre multi, clé siteId[])', async () => {
|
||||
const wrapper = mountPage()
|
||||
await flushPromises()
|
||||
|
||||
await wrapper.find('input[data-id="filter-site-1"]').setValue(true)
|
||||
await wrapper.find('[data-label="admin.storages.filters.apply"]').trigger('click')
|
||||
|
||||
expect(mockSetFilters).toHaveBeenLastCalledWith(
|
||||
{ 'siteId[]': ['1'] },
|
||||
{ replace: true },
|
||||
)
|
||||
// Etat 100 % local (regle n°6) : aucune navigation/query string declenchee.
|
||||
expect(mockPush).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('répercute l\'état sélectionné dans setFilters (param state)', async () => {
|
||||
const wrapper = mountPage()
|
||||
await flushPromises()
|
||||
|
||||
await wrapper.find('select[data-empty-label="admin.storages.filters.stateAll"]').setValue('RECEPTION')
|
||||
await wrapper.find('[data-label="admin.storages.filters.apply"]').trigger('click')
|
||||
|
||||
expect(mockSetFilters).toHaveBeenLastCalledWith(
|
||||
{ state: 'RECEPTION' },
|
||||
{ replace: true },
|
||||
)
|
||||
})
|
||||
|
||||
it('répercute le type sélectionné dans setFilters (param storageTypeId)', async () => {
|
||||
const wrapper = mountPage()
|
||||
await flushPromises()
|
||||
|
||||
await wrapper.find('select[data-empty-label="admin.storages.filters.typeAll"]').setValue('9')
|
||||
await wrapper.find('[data-label="admin.storages.filters.apply"]').trigger('click')
|
||||
|
||||
expect(mockSetFilters).toHaveBeenLastCalledWith(
|
||||
{ storageTypeId: '9' },
|
||||
{ replace: true },
|
||||
)
|
||||
})
|
||||
|
||||
it('badge filtres actifs + Réinitialiser vide l\'état appliqué', async () => {
|
||||
const wrapper = mountPage()
|
||||
await flushPromises()
|
||||
|
||||
await wrapper.find('input[data-id="filter-site-1"]').setValue(true)
|
||||
await wrapper.find('[data-label="admin.storages.filters.apply"]').trigger('click')
|
||||
|
||||
// Le libelle du bouton Filtrer porte le compteur (1 filtre actif).
|
||||
expect(wrapper.find('[data-label="admin.storages.filters.title (1)"]').exists()).toBe(true)
|
||||
|
||||
// Réinitialiser → query propre (setFilters avec objet vide).
|
||||
await wrapper.find('[data-label="admin.storages.filters.reset"]').trigger('click')
|
||||
expect(mockSetFilters).toHaveBeenLastCalledWith({}, { replace: true })
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,386 @@
|
||||
<template>
|
||||
<div>
|
||||
<PageHeader>
|
||||
{{ t('admin.storages.title') }}
|
||||
<template #actions>
|
||||
<!-- gap-8 = 32px d'espacement entre Filtrer et Ajouter (meme
|
||||
design que le Catalogue produit / les repertoires M1→M5). -->
|
||||
<div class="flex items-center gap-8">
|
||||
<!-- Bouton Filtrer 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
|
||||
v-if="canManage"
|
||||
variant="secondary"
|
||||
:label="t('admin.storages.add')"
|
||||
icon-name="mdi:add-bold"
|
||||
icon-position="left"
|
||||
@click="goToCreate"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</PageHeader>
|
||||
|
||||
<!-- Datatable branchee sur usePaginatedList : pagination serveur, tri
|
||||
site.code / storageType.label / numero ASC par defaut (cote back,
|
||||
§ 4.1). Colonnes Nom (displayName, RG-7.05) / Site (spec § 4.0). -->
|
||||
<MalioDataTable
|
||||
:columns="columns"
|
||||
:items="rows"
|
||||
:total-items="totalItems"
|
||||
:page="currentPage"
|
||||
:per-page="itemsPerPage"
|
||||
:per-page-options="itemsPerPageOptions"
|
||||
row-clickable
|
||||
:empty-message="t('admin.storages.empty')"
|
||||
@row-click="onRowClick"
|
||||
@update:page="goToPage"
|
||||
@update:per-page="setItemsPerPage"
|
||||
/>
|
||||
|
||||
<div class="flex justify-center mt-4">
|
||||
<MalioButton
|
||||
v-if="canView"
|
||||
variant="primary"
|
||||
:label="t('admin.storages.export')"
|
||||
:disabled="exporting"
|
||||
@click="exportXlsx"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Drawer de filtres : etat BROUILLON, applique uniquement au clic sur
|
||||
« Voir les résultats ». Meme pattern que le Catalogue produit.
|
||||
Etat 100 % local, jamais dans l'URL (regle ABSOLUE n°6). -->
|
||||
<MalioDrawer
|
||||
v-model="filterDrawerOpen"
|
||||
drawer-class="max-w-[450px]"
|
||||
body-class="p-0"
|
||||
footer-class="justify-between border-t border-black p-6"
|
||||
>
|
||||
<template #header>
|
||||
<h2 class="text-[24px] font-bold uppercase">{{ t('admin.storages.filters.title') }}</h2>
|
||||
</template>
|
||||
|
||||
<MalioAccordion>
|
||||
<!-- Recherche : numero (param `search`, partiel insensible a la casse). -->
|
||||
<MalioAccordionItem :title="t('admin.storages.filters.search')" value="search">
|
||||
<MalioInputText
|
||||
v-model="draftSearch"
|
||||
icon-name="mdi:magnify"
|
||||
/>
|
||||
</MalioAccordionItem>
|
||||
|
||||
<!-- Type de stockage : select simple (param `storageTypeId`). -->
|
||||
<MalioAccordionItem :title="t('admin.storages.filters.type')" value="type">
|
||||
<MalioSelect
|
||||
:model-value="draftStorageTypeId"
|
||||
:options="storageTypeOptions"
|
||||
:empty-option-label="t('admin.storages.filters.typeAll')"
|
||||
@update:model-value="(v: string | number | null) => draftStorageTypeId = v === null || v === '' ? null : Number(v)"
|
||||
/>
|
||||
</MalioAccordionItem>
|
||||
|
||||
<!-- Etat : select simple (param `state`, enum RECEPTION / PRODUCTION / TRIAGE). -->
|
||||
<MalioAccordionItem :title="t('admin.storages.filters.state')" value="state">
|
||||
<MalioSelect
|
||||
:model-value="draftState"
|
||||
:options="stateOptions"
|
||||
:empty-option-label="t('admin.storages.filters.stateAll')"
|
||||
@update:model-value="(v: string | number | null) => draftState = v === null || v === '' ? null : String(v)"
|
||||
/>
|
||||
</MalioAccordionItem>
|
||||
|
||||
<!-- Site(s) : cases a cocher (multi, param `siteId[]`). Un stockage
|
||||
remonte s'il est rattache a AU MOINS UN des sites coches (OR). -->
|
||||
<MalioAccordionItem :title="t('admin.storages.filters.site')" value="site">
|
||||
<div class="flex flex-col">
|
||||
<MalioCheckbox
|
||||
v-for="opt in siteOptions"
|
||||
:id="`filter-site-${opt.value}`"
|
||||
:key="opt.value"
|
||||
:label="opt.label"
|
||||
:model-value="draftSiteIds.includes(opt.value)"
|
||||
@update:model-value="(val: boolean) => toggleSite(opt.value, val)"
|
||||
/>
|
||||
</div>
|
||||
</MalioAccordionItem>
|
||||
</MalioAccordion>
|
||||
|
||||
<template #footer>
|
||||
<MalioButton
|
||||
variant="tertiary"
|
||||
:label="t('admin.storages.filters.reset')"
|
||||
button-class="w-m-btn-action"
|
||||
@click="resetFilters"
|
||||
/>
|
||||
<MalioButton
|
||||
variant="primary"
|
||||
:label="t('admin.storages.filters.apply')"
|
||||
button-class="w-[170px]"
|
||||
@click="applyFilters"
|
||||
/>
|
||||
</template>
|
||||
</MalioDrawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import type { Storage } from '~/modules/catalog/types/storage'
|
||||
|
||||
interface FilterOption {
|
||||
value: number
|
||||
label: string
|
||||
}
|
||||
|
||||
const { t } = useI18n()
|
||||
const api = useApi()
|
||||
const router = useRouter()
|
||||
const toast = useToast()
|
||||
const { can } = usePermissions()
|
||||
|
||||
useHead({ title: t('admin.storages.title') })
|
||||
|
||||
// Repertoire stockage admin-only (spec § 5) : « + Ajouter » reserve a `manage`.
|
||||
// « Filtrer » / « Exporter » suivent `view` (gate page-level). L'item sidebar est
|
||||
// deja masque cote back pour les roles sans `view` (RBAC § 5.2, ERP-219).
|
||||
const canManage = computed(() => can('catalog.storages.manage'))
|
||||
const canView = computed(() => can('catalog.storages.view'))
|
||||
|
||||
// Pagination serveur via le composable partage. Le StorageProvider applique deja
|
||||
// le tri (site.code, storageType.label, numero ASC, § 4.1) — pas de defaultSort
|
||||
// cote front tant qu'aucun OrderFilter n'est expose.
|
||||
const {
|
||||
items: storages,
|
||||
totalItems,
|
||||
currentPage,
|
||||
itemsPerPage,
|
||||
itemsPerPageOptions,
|
||||
fetch: loadStorages,
|
||||
goToPage,
|
||||
setItemsPerPage,
|
||||
setFilters,
|
||||
} = usePaginatedList<Storage>({ url: '/storages' })
|
||||
|
||||
// Mappe les stockages en objets « plats » pour MalioDataTable (items typees
|
||||
// Record<string, unknown>[]) : un objet litteral porte une signature d'index
|
||||
// implicite, contrairement a l'interface Storage. Meme pattern que le Catalogue.
|
||||
const rows = computed(() => storages.value.map(storage => ({
|
||||
id: storage.id,
|
||||
displayName: storage.displayName,
|
||||
siteLabel: formatSite(storage.site),
|
||||
})))
|
||||
|
||||
const columns = [
|
||||
{ key: 'displayName', label: t('admin.storages.column.name') },
|
||||
{ key: 'siteLabel', label: t('admin.storages.column.site') },
|
||||
]
|
||||
|
||||
/**
|
||||
* Libelle du site « Nom (Code) » (ex. « Chatellerault (86) »), miroir de
|
||||
* l'export back (StorageExportController::formatSite). Le code peut etre absent :
|
||||
* on retombe alors sur le seul nom.
|
||||
*/
|
||||
function formatSite(site: Storage['site']): string {
|
||||
if (!site) {
|
||||
return ''
|
||||
}
|
||||
return site.code ? `${site.name} (${site.code})` : site.name
|
||||
}
|
||||
|
||||
/** Clic sur une ligne → ecran d'edition /admin/storages/{id}/edit (pas de consultation au M7). */
|
||||
function onRowClick(item: Record<string, unknown>): void {
|
||||
router.push(`/admin/storages/${item.id}/edit`)
|
||||
}
|
||||
|
||||
function goToCreate(): void {
|
||||
router.push('/admin/storages/new')
|
||||
}
|
||||
|
||||
// ── Referentiels des filtres ─────────────────────────────────────────────────
|
||||
// Charges une fois (pagination desactivee, referentiels bornes) : tous les types
|
||||
// de stockage et tous les sites.
|
||||
const storageTypeOptions = ref<FilterOption[]>([])
|
||||
const siteOptions = ref<FilterOption[]>([])
|
||||
|
||||
// Etats stockage (miroir de l'enum back Storage::STATE_*). Le libelle est resolu
|
||||
// par i18n. Select simple cote filtre (`?state=` n'accepte qu'une valeur).
|
||||
const STORAGE_STATES = ['RECEPTION', 'PRODUCTION', 'TRIAGE'] as const
|
||||
|
||||
const stateOptions = computed(() =>
|
||||
STORAGE_STATES.map(code => ({ value: code, label: t(`admin.storages.state.${code}`) })),
|
||||
)
|
||||
|
||||
interface HydraMember { '@id': string, id: number, name?: string, label?: string }
|
||||
|
||||
/** Recupere une collection complete (pagination desactivee) en Hydra. */
|
||||
async function fetchAll<T extends HydraMember>(
|
||||
url: string,
|
||||
query: Record<string, string> = {},
|
||||
): Promise<T[]> {
|
||||
const res = await api.get<{ member?: T[] }>(
|
||||
url,
|
||||
{ pagination: 'false', ...query },
|
||||
{ headers: { Accept: 'application/ld+json' }, toast: false },
|
||||
)
|
||||
return res.member ?? []
|
||||
}
|
||||
|
||||
/**
|
||||
* Charge les referentiels des filtres en parallele et de maniere resiliente :
|
||||
* un referentiel en echec (403/500) reste vide sans casser l'autre.
|
||||
*/
|
||||
async function loadFilterReferentials(): Promise<void> {
|
||||
await Promise.allSettled([
|
||||
fetchAll('/storage_types')
|
||||
.then((types) => { storageTypeOptions.value = types.map(s => ({ value: s.id, label: s.label ?? '' })) }),
|
||||
fetchAll('/sites')
|
||||
.then((sitesList) => { siteOptions.value = sitesList.map(s => ({ value: s.id, label: s.name ?? '' })) }),
|
||||
])
|
||||
}
|
||||
|
||||
// ── Filtres (drawer) ─────────────────────────────────────────────────────────
|
||||
// Deux niveaux d'etat (pattern Catalogue produit / repertoires M1→M5) :
|
||||
// - APPLIED : pilote la liste/l'export + le compteur du bouton. Modifie
|
||||
// uniquement au clic « Voir les résultats » / « Réinitialiser ».
|
||||
// - DRAFT : edite librement dans le drawer ; recopie vers applied a la validation.
|
||||
const filterDrawerOpen = ref(false)
|
||||
|
||||
const draftSearch = ref('')
|
||||
const draftStorageTypeId = ref<number | null>(null)
|
||||
const draftState = ref<string | null>(null)
|
||||
const draftSiteIds = ref<number[]>([])
|
||||
|
||||
const appliedSearch = ref('')
|
||||
const appliedStorageTypeId = ref<number | null>(null)
|
||||
const appliedState = ref<string | null>(null)
|
||||
const appliedSiteIds = ref<number[]>([])
|
||||
|
||||
const activeFilterCount = computed(() => {
|
||||
let count = 0
|
||||
if (appliedSearch.value.trim() !== '') count++
|
||||
if (appliedStorageTypeId.value !== null) count++
|
||||
if (appliedState.value !== null) count++
|
||||
if (appliedSiteIds.value.length > 0) count++
|
||||
return count
|
||||
})
|
||||
|
||||
const filterButtonLabel = computed(() => {
|
||||
const base = t('admin.storages.filters.title')
|
||||
return activeFilterCount.value > 0 ? `${base} (${activeFilterCount.value})` : base
|
||||
})
|
||||
|
||||
// Recopie l'etat applique vers le brouillon puis ouvre le drawer : la reouverture
|
||||
// reflete les filtres actifs.
|
||||
function openFilters(): void {
|
||||
draftSearch.value = appliedSearch.value
|
||||
draftStorageTypeId.value = appliedStorageTypeId.value
|
||||
draftState.value = appliedState.value
|
||||
draftSiteIds.value = [...appliedSiteIds.value]
|
||||
filterDrawerOpen.value = true
|
||||
}
|
||||
|
||||
/** Coche / decoche un site dans le brouillon (filtre multi). */
|
||||
function toggleSite(id: number, selected: boolean): void {
|
||||
draftSiteIds.value = selected
|
||||
? [...draftSiteIds.value, id]
|
||||
: draftSiteIds.value.filter(s => s !== id)
|
||||
}
|
||||
|
||||
/**
|
||||
* Construit le payload de filtres serveur a partir de l'etat applique. Cle
|
||||
* `siteId[]` pour que PHP la parse en tableau (OR cote back). Les filtres vides
|
||||
* sont omis pour une query propre.
|
||||
*/
|
||||
function buildFilterPayload(): Record<string, string | string[]> {
|
||||
const payload: Record<string, string | string[]> = {}
|
||||
if (appliedSearch.value.trim() !== '') payload.search = appliedSearch.value.trim()
|
||||
if (appliedStorageTypeId.value !== null) payload.storageTypeId = String(appliedStorageTypeId.value)
|
||||
if (appliedState.value !== null) payload.state = appliedState.value
|
||||
if (appliedSiteIds.value.length > 0) payload['siteId[]'] = appliedSiteIds.value.map(String)
|
||||
return payload
|
||||
}
|
||||
|
||||
// « Voir les résultats » : recopie brouillon → applied, pousse les filtres
|
||||
// (retombe en page 1 via usePaginatedList) et ferme le drawer.
|
||||
function applyFilters(): void {
|
||||
appliedSearch.value = draftSearch.value.trim()
|
||||
appliedStorageTypeId.value = draftStorageTypeId.value
|
||||
appliedState.value = draftState.value
|
||||
appliedSiteIds.value = [...draftSiteIds.value]
|
||||
|
||||
setFilters(buildFilterPayload(), { replace: true })
|
||||
filterDrawerOpen.value = false
|
||||
}
|
||||
|
||||
// « Réinitialiser » : vide brouillon ET applied, recharge la liste complete.
|
||||
// Le drawer reste ouvert pour montrer le formulaire vide.
|
||||
function resetFilters(): void {
|
||||
draftSearch.value = ''
|
||||
draftStorageTypeId.value = null
|
||||
draftState.value = null
|
||||
draftSiteIds.value = []
|
||||
|
||||
appliedSearch.value = ''
|
||||
appliedStorageTypeId.value = null
|
||||
appliedState.value = null
|
||||
appliedSiteIds.value = []
|
||||
|
||||
setFilters({}, { replace: true })
|
||||
}
|
||||
|
||||
// ── Export XLSX ──────────────────────────────────────────────────────────────
|
||||
// Memes filtres que la vue : l'export reflete exactement ce que l'utilisateur voit.
|
||||
const exporting = ref(false)
|
||||
|
||||
async function exportXlsx(): Promise<void> {
|
||||
if (exporting.value) {
|
||||
return
|
||||
}
|
||||
exporting.value = true
|
||||
try {
|
||||
// useApi type ses options en JSON ; l'export renvoie un binaire, donc on
|
||||
// force responseType:'blob' (transmis tel quel a ofetch au runtime). Cast
|
||||
// contenu faute d'overload blob sur le client partage (meme pattern Catalogue).
|
||||
const blob = await api.get<Blob>('/storages/export.xlsx', buildFilterPayload(), {
|
||||
responseType: 'blob',
|
||||
toast: false,
|
||||
} as unknown as Parameters<typeof api.get>[2])
|
||||
|
||||
triggerDownload(blob, 'repertoire-stockage.xlsx')
|
||||
}
|
||||
catch {
|
||||
toast.error({
|
||||
title: t('admin.storages.toast.error'),
|
||||
message: t('admin.storages.toast.exportError'),
|
||||
})
|
||||
}
|
||||
finally {
|
||||
exporting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** Declenche le telechargement d'un blob via un lien temporaire. */
|
||||
function triggerDownload(blob: Blob, filename: string): void {
|
||||
const url = URL.createObjectURL(blob)
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.download = filename
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
link.remove()
|
||||
URL.revokeObjectURL(url)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadStorages()
|
||||
loadFilterReferentials()
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- En-tete : retour vers la liste + titre. -->
|
||||
<div class="flex items-center gap-3 pt-11">
|
||||
<MalioButtonIcon
|
||||
icon="mdi:arrow-left-bold"
|
||||
icon-size="24"
|
||||
variant="ghost"
|
||||
:title="t('admin.storages.form.back')"
|
||||
v-bind="{ ariaLabel: t('admin.storages.form.back') }"
|
||||
@click="goBack"
|
||||
/>
|
||||
<h1 class="text-[30px] font-semibold text-m-primary">{{ t('admin.storages.form.title') }}</h1>
|
||||
</div>
|
||||
|
||||
<!-- ── Formulaire principal de creation (a plat, PAS d'onglets — HP-M7-06)
|
||||
Bouton « Valider » TOUJOURS actif (ERP-101) : la validation
|
||||
autoritaire est serveur, les erreurs 422 reviennent inline. -->
|
||||
<div class="mt-[48px] grid grid-cols-3 xl:grid-cols-4 gap-x-[44px] gap-y-4">
|
||||
<!-- Site : select simple obligatoire (RG-7.02). -->
|
||||
<MalioSelect
|
||||
:model-value="form.siteIri"
|
||||
:options="siteOptions"
|
||||
:label="t('admin.storages.form.site')"
|
||||
empty-option-label=""
|
||||
:required="true"
|
||||
:error="errors.site"
|
||||
@update:model-value="(v: string | number | null) => setSite(v === null || v === '' ? null : String(v))"
|
||||
/>
|
||||
<!-- Type de stockage : select simple obligatoire. Referentiel plat :
|
||||
tous les types (pas de cascade par site, RG-7.03 non portee back). -->
|
||||
<MalioSelect
|
||||
:model-value="form.storageTypeIri"
|
||||
:options="storageTypeOptions"
|
||||
:label="t('admin.storages.form.storageType')"
|
||||
empty-option-label=""
|
||||
:required="true"
|
||||
:error="errors.storageType"
|
||||
@update:model-value="(v: string | number | null) => setStorageType(v === null || v === '' ? null : String(v))"
|
||||
/>
|
||||
<!-- Numero : texte libre obligatoire (RG-7.01, normalise trim cote serveur). -->
|
||||
<MalioInputText
|
||||
v-model="form.numero"
|
||||
:mask="FREE_TEXT_MASK"
|
||||
:label="t('admin.storages.form.numero')"
|
||||
:required="true"
|
||||
:error="errors.numero"
|
||||
/>
|
||||
<!-- Etat du type de stockage : multi-select obligatoire (>= 1, RG-7.04). -->
|
||||
<MalioSelectCheckbox
|
||||
:model-value="form.states"
|
||||
:options="stateOptions"
|
||||
:max-tags="3"
|
||||
:label="t('admin.storages.form.states')"
|
||||
:display-tag="true"
|
||||
:required="true"
|
||||
:error="errors.states"
|
||||
@update:model-value="(v: (string | number)[]) => setStates(v.map(String))"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mt-12 flex justify-center">
|
||||
<MalioButton
|
||||
variant="primary"
|
||||
:label="t('admin.storages.form.submit')"
|
||||
:disabled="submitting"
|
||||
@click="onSubmit"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Onglets de la maquette (Clients / Règles / Etiquette / Comptabilité) :
|
||||
HORS perimetre HP-M7-06 — aucune barre d'onglets a l'ajout. -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted } from 'vue'
|
||||
import { useStorageForm, STORAGE_STATES } from '~/modules/catalog/composables/useStorageForm'
|
||||
import { FREE_TEXT_MASK } from '~/shared/utils/textSanitize'
|
||||
|
||||
const { t } = useI18n()
|
||||
const router = useRouter()
|
||||
const { can } = usePermissions()
|
||||
|
||||
useHead({ title: t('admin.storages.form.title') })
|
||||
|
||||
// Gating de la route : la creation est reservee a `manage` (repertoire admin-only).
|
||||
if (!can('catalog.storages.manage')) {
|
||||
await navigateTo('/admin/storages')
|
||||
}
|
||||
|
||||
const {
|
||||
form,
|
||||
errors,
|
||||
submitting,
|
||||
siteOptions,
|
||||
storageTypeOptions,
|
||||
setSite,
|
||||
setStorageType,
|
||||
setStates,
|
||||
loadReferentials,
|
||||
submit,
|
||||
} = useStorageForm()
|
||||
|
||||
// Options de l'etat : libelles i18n (la valeur d'option = code enum).
|
||||
const stateOptions = computed(() =>
|
||||
STORAGE_STATES.map(code => ({ value: code, label: t(`admin.storages.state.${code}`) })),
|
||||
)
|
||||
|
||||
/** Retour vers la liste des stockages (fleche d'en-tete). */
|
||||
function goBack(): void {
|
||||
router.push('/admin/storages')
|
||||
}
|
||||
|
||||
/** Soumet la creation ; au succes, retour a la liste. */
|
||||
async function onSubmit(): Promise<void> {
|
||||
const ok = await submit()
|
||||
if (ok) {
|
||||
router.push('/admin/storages')
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// Echec du chargement des referentiels non bloquant : les selects restent vides.
|
||||
loadReferentials().catch(() => {})
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,50 @@
|
||||
/**
|
||||
* Types front du module Catalog (M7 — Repertoire stockage).
|
||||
*
|
||||
* Contrats API consommes :
|
||||
* - GET /api/storages → HydraCollection<Storage>
|
||||
* - GET /api/storages/{id} → Storage
|
||||
* - GET /api/storages/export.xlsx → binaire XLSX (export complet, filtres actifs)
|
||||
*
|
||||
* Notes (cf. spec-back § 4.0.bis, contrat JSON capture en ERP-215) :
|
||||
* - `site` et `storageType` sont embarques (objets bornes, pas IRI) — embed
|
||||
* autorise (ne viole pas la regle n°13, ensembles bornes).
|
||||
* - `displayName` = libelle du type + numero (RG-7.05), expose en lecture seule.
|
||||
* - `states` est un tableau de chaines (RECEPTION / PRODUCTION / TRIAGE, RG-7.04).
|
||||
* - `skip_null_values` actif cote back : ne pas presumer la presence des nulls.
|
||||
*/
|
||||
|
||||
/** Site embarque dans un stockage (groupe `site:read`, sous-ensemble utile au front). */
|
||||
export interface StorageSite {
|
||||
/** IRI Hydra, ex. `/api/sites/1` — utilise pour pre-selectionner le select en edition. */
|
||||
'@id': string
|
||||
id: number
|
||||
name: string
|
||||
code: string | null
|
||||
}
|
||||
|
||||
/** Type de stockage embarque dans un stockage (referentiel borne, groupe `storage_type:read`). */
|
||||
export interface StorageStorageType {
|
||||
/** IRI Hydra, ex. `/api/storage_types/9` — utilise pour pre-selectionner le select en edition. */
|
||||
'@id': string
|
||||
id: number
|
||||
code: string
|
||||
label: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Stockage metier — tel qu'il est lu depuis l'API. L'entite porte le pattern
|
||||
* Timestampable+Blamable (cf. spec-back § 2.8).
|
||||
*/
|
||||
export interface Storage {
|
||||
id: number
|
||||
numero: string
|
||||
/** Etats : sous-ensemble non vide de RECEPTION / PRODUCTION / TRIAGE (RG-7.04). */
|
||||
states: string[]
|
||||
/** Libelle d'affichage = libelle du type + numero (RG-7.05). */
|
||||
displayName: string
|
||||
site: StorageSite | null
|
||||
storageType: StorageStorageType | null
|
||||
createdAt: string
|
||||
updatedAt: string
|
||||
}
|
||||
Reference in New Issue
Block a user