MALIO-DEV/Inventory_frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(composant) : preserve skeleton selections on form validation error

Browse Source 
Shared module-level loading ref in useComposants caused structureDataLoading
to toggle during submission, unmounting the skeleton assignment UI. On remount,
watchers cleared selections not found in the limited local catalog.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matthieu
2026-03-26 10:36:07 +01:00
parent 452de8b069
commit d197d30eb0
2 changed files with 27 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/composables/useComponentCreate.ts
View File

@@ -106,7 +106,7 @@ export function useComponentCreate() {
const availableProducts = computed(() => productCatalogRef.value ?? []) const availableProducts = computed(() => productCatalogRef.value ?? [])
const availableComponents = computed(() => componentCatalogRef.value ?? []) const availableComponents = computed(() => componentCatalogRef.value ?? [])
const structureDataLoading = computed( const structureDataLoading = computed(
() => piecesLoading.value || componentsLoading.value || productsLoading.value, () => !submitting.value && (piecesLoading.value || componentsLoading.value || productsLoading.value),
) )
const fetchedPieceTypeMap = ref<Record<string, string>>({}) const fetchedPieceTypeMap = ref<Record<string, string>>({})

38
app/composables/useStructureAssignmentFetch.ts
View File

@@ -279,6 +279,11 @@ export function useStructureAssignmentFetch(deps: StructureAssignmentFetchDeps)
if (deps.isRoot()) { if (deps.isRoot()) {
return return
} }
// Only clear if we have loaded options (cache or catalog); skip when options are empty
// because the fetch may not have completed yet.
if (!options.length) {
return
}
const hasMatch = options.some( const hasMatch = options.some(
(component) => component.id === deps.assignment.selectedComponentId, (component) => component.id === deps.assignment.selectedComponentId,
) )
@@ -293,12 +298,18 @@ export function useStructureAssignmentFetch(deps: StructureAssignmentFetchDeps)
() => [deps.pieces, deps.assignment.pieces], () => [deps.pieces, deps.assignment.pieces],
() => { () => {
for (const pieceAssignment of deps.assignment.pieces) { for (const pieceAssignment of deps.assignment.pieces) {
const options = getPieceOptions(pieceAssignment) const hasCachedOptions = !!pieceOptionsByPath.value[pieceAssignment.path]
if ( // Only clear selections when we have loaded options (cached or from catalog).
pieceAssignment.selectedPieceId // When no cache exists, a fetch is about to fire — clearing now would lose
&& !options.some((piece) => piece.id === pieceAssignment.selectedPieceId) // user input before the real option list arrives.
) { if (hasCachedOptions) {
pieceAssignment.selectedPieceId = '' const options = getPieceOptions(pieceAssignment)
if (
pieceAssignment.selectedPieceId
&& !options.some((piece) => piece.id === pieceAssignment.selectedPieceId)
) {
pieceAssignment.selectedPieceId = ''
}
} }
if (!primedPiecePaths.has(pieceAssignment.path) && !pieceOptionsByPath.value[pieceAssignment.path]) { if (!primedPiecePaths.has(pieceAssignment.path) && !pieceOptionsByPath.value[pieceAssignment.path]) {
primedPiecePaths.add(pieceAssignment.path) primedPiecePaths.add(pieceAssignment.path)
@@ -313,12 +324,15 @@ export function useStructureAssignmentFetch(deps: StructureAssignmentFetchDeps)
() => [deps.products, deps.assignment.products], () => [deps.products, deps.assignment.products],
() => { () => {
for (const productAssignment of deps.assignment.products) { for (const productAssignment of deps.assignment.products) {
const options = getProductOptions(productAssignment) const hasCachedOptions = !!productOptionsByPath.value[productAssignment.path]
if ( if (hasCachedOptions) {
productAssignment.selectedProductId const options = getProductOptions(productAssignment)
&& !options.some((product) => product.id === productAssignment.selectedProductId) if (
) { productAssignment.selectedProductId
productAssignment.selectedProductId = '' && !options.some((product) => product.id === productAssignment.selectedProductId)
) {
productAssignment.selectedProductId = ''
}
} }
if (!primedProductPaths.has(productAssignment.path) && !productOptionsByPath.value[productAssignment.path]) { if (!primedProductPaths.has(productAssignment.path) && !productOptionsByPath.value[productAssignment.path]) {
primedProductPaths.add(productAssignment.path) primedProductPaths.add(productAssignment.path)