efe1fd2a73
Extend ComponentModelPiece/Product with optional typePiece/typeProduct nested objects. Replace 12 'as any' casts in assignment node, convert Promise<any> to Promise<unknown>, use Record<string, unknown> at API boundaries. ~15 casts eliminated. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
723 lines
21 KiB
Vue
723 lines
21 KiB
Vue
<template>
|
|
<div :class="wrapperClass">
|
|
<section v-if="!isRoot" class="rounded-lg border border-base-200 bg-base-100 p-4 space-y-3">
|
|
<div class="space-y-1">
|
|
<h4 class="text-sm font-semibold text-base-content">
|
|
{{ requirementLabel }}
|
|
</h4>
|
|
<p class="text-xs text-base-content/70">
|
|
{{ requirementDescription }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="form-control">
|
|
<label class="label">
|
|
<span class="label-text text-xs">Sélectionner un composant</span>
|
|
</label>
|
|
<SearchSelect
|
|
:model-value="assignment.selectedComponentId || ''"
|
|
:options="componentOptions"
|
|
:loading="componentsLoading || componentLoadingByPath[assignment.path]"
|
|
size="sm"
|
|
placeholder="Rechercher un composant..."
|
|
:empty-text="componentOptions.length ? 'Aucun résultat' : 'Aucun composant disponible'"
|
|
:option-label="componentOptionLabel"
|
|
:option-description="componentOptionDescription"
|
|
@search="fetchComponentOptions"
|
|
@update:modelValue="(value) => { assignment.selectedComponentId = normalizeSelectionValue(value); }"
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
<section v-if="assignment.pieces.length" class="rounded-lg border border-dashed border-base-300 bg-base-200/40 p-4 space-y-4">
|
|
<header class="space-y-1">
|
|
<h4 class="text-sm font-semibold text-base-content">
|
|
{{ isRoot ? 'Pièces requises par le squelette' : 'Pièces associées à ce sous-composant' }}
|
|
</h4>
|
|
<p class="text-xs text-base-content/70">
|
|
Sélectionnez les pièces concrètes à associer pour chaque emplacement.
|
|
</p>
|
|
</header>
|
|
|
|
<div
|
|
v-for="pieceAssignment in assignment.pieces"
|
|
:key="pieceAssignment.path"
|
|
class="rounded-md border border-base-200 bg-base-100 p-3 space-y-2"
|
|
>
|
|
<div class="space-y-1">
|
|
<p class="text-xs font-medium text-base-content">
|
|
{{ describePieceRequirement(pieceAssignment) }}
|
|
</p>
|
|
<p v-if="!getPieceOptions(pieceAssignment).length" class="text-[11px] text-error">
|
|
Aucune pièce disponible pour cette famille.
|
|
</p>
|
|
</div>
|
|
|
|
<SearchSelect
|
|
:model-value="pieceAssignment.selectedPieceId || ''"
|
|
:options="getPieceOptions(pieceAssignment)"
|
|
:loading="piecesLoading || pieceLoadingByPath[pieceAssignment.path]"
|
|
size="xs"
|
|
placeholder="Rechercher une pièce..."
|
|
:empty-text="getPieceOptions(pieceAssignment).length ? 'Aucun résultat' : 'Aucune pièce disponible'"
|
|
:option-label="pieceOptionLabel"
|
|
:option-description="pieceOptionDescription"
|
|
@search="(term) => fetchPieceOptions(pieceAssignment, term)"
|
|
@update:modelValue="(value) => { pieceAssignment.selectedPieceId = normalizeSelectionValue(value); }"
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
<section v-if="assignment.products.length" class="rounded-lg border border-dashed border-base-300 bg-base-200/40 p-4 space-y-4">
|
|
<header class="space-y-1">
|
|
<h4 class="text-sm font-semibold text-base-content">
|
|
{{ isRoot ? 'Produits requis par le squelette' : 'Produits associés à ce sous-composant' }}
|
|
</h4>
|
|
<p class="text-xs text-base-content/70">
|
|
Sélectionnez les produits catalogue à lier sur chaque position définie.
|
|
</p>
|
|
</header>
|
|
|
|
<div
|
|
v-for="productAssignment in assignment.products"
|
|
:key="productAssignment.path"
|
|
class="rounded-md border border-base-200 bg-base-100 p-3 space-y-2"
|
|
>
|
|
<div class="space-y-1">
|
|
<p class="text-xs font-medium text-base-content">
|
|
{{ describeProductRequirement(productAssignment) }}
|
|
</p>
|
|
<p v-if="!getProductOptions(productAssignment).length" class="text-[11px] text-error">
|
|
Aucun produit disponible pour cette catégorie.
|
|
</p>
|
|
</div>
|
|
|
|
<SearchSelect
|
|
:model-value="productAssignment.selectedProductId || ''"
|
|
:options="getProductOptions(productAssignment)"
|
|
:loading="productsLoading || productLoadingByPath[productAssignment.path]"
|
|
size="xs"
|
|
placeholder="Rechercher un produit..."
|
|
:empty-text="getProductOptions(productAssignment).length ? 'Aucun résultat' : 'Aucun produit disponible'"
|
|
:option-label="productOptionLabel"
|
|
:option-description="productOptionDescription"
|
|
@search="(term) => fetchProductOptions(productAssignment, term)"
|
|
@update:modelValue="(value) => { productAssignment.selectedProductId = normalizeSelectionValue(value); }"
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
<section v-if="assignment.subcomponents.length" class="space-y-4">
|
|
<header class="space-y-1">
|
|
<h4 class="text-sm font-semibold text-base-content">
|
|
{{ isRoot ? 'Sous-composants définis par le squelette' : 'Sous-composants imbriqués' }}
|
|
</h4>
|
|
<p class="text-xs text-base-content/70">
|
|
Choisissez un composant existant pour chaque sous-niveau requis.
|
|
</p>
|
|
</header>
|
|
|
|
<ComponentStructureAssignmentNode
|
|
v-for="subAssignment in assignment.subcomponents"
|
|
:key="subAssignment.path"
|
|
:assignment="subAssignment"
|
|
:pieces="pieces"
|
|
:products="products"
|
|
:components="components"
|
|
:components-loading="componentsLoading"
|
|
:pieces-loading="piecesLoading"
|
|
:products-loading="productsLoading"
|
|
:depth="depth + 1"
|
|
/>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref, watch } from 'vue';
|
|
import SearchSelect from '~/components/common/SearchSelect.vue';
|
|
import { useApi } from '~/composables/useApi';
|
|
import { extractCollection } from '~/shared/utils/apiHelpers';
|
|
import type {
|
|
ComponentModelPiece,
|
|
ComponentModelProduct,
|
|
ComponentModelStructureNode,
|
|
} from '~/shared/types/inventory';
|
|
|
|
interface ComponentOption {
|
|
id: string;
|
|
name?: string | null;
|
|
reference?: string | null;
|
|
typeComposantId?: string | null;
|
|
typeComposant?: {
|
|
id: string;
|
|
name?: string | null;
|
|
code?: string | null;
|
|
} | null;
|
|
}
|
|
|
|
interface PieceOption {
|
|
id: string;
|
|
name?: string | null;
|
|
reference?: string | null;
|
|
typePieceId?: string | null;
|
|
typePiece?: {
|
|
id: string;
|
|
name?: string | null;
|
|
code?: string | null;
|
|
} | null;
|
|
}
|
|
|
|
interface ProductOption {
|
|
id: string;
|
|
name?: string | null;
|
|
reference?: string | null;
|
|
typeProductId?: string | null;
|
|
typeProduct?: {
|
|
id: string;
|
|
name?: string | null;
|
|
code?: string | null;
|
|
} | null;
|
|
}
|
|
|
|
export interface StructurePieceAssignment {
|
|
path: string;
|
|
definition: ComponentModelPiece;
|
|
selectedPieceId: string;
|
|
}
|
|
|
|
export interface StructureProductAssignment {
|
|
path: string;
|
|
definition: ComponentModelProduct;
|
|
selectedProductId: string;
|
|
}
|
|
|
|
export interface StructureAssignmentNode {
|
|
path: string;
|
|
definition: ComponentModelStructureNode;
|
|
selectedComponentId: string;
|
|
pieces: StructurePieceAssignment[];
|
|
products: StructureProductAssignment[];
|
|
subcomponents: StructureAssignmentNode[];
|
|
}
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
assignment: StructureAssignmentNode;
|
|
pieces: PieceOption[] | null;
|
|
products: ProductOption[] | null;
|
|
components: ComponentOption[] | null;
|
|
depth?: number;
|
|
componentsLoading?: boolean;
|
|
piecesLoading?: boolean;
|
|
productsLoading?: boolean;
|
|
pieceTypeLabelMap?: Record<string, string>;
|
|
productTypeLabelMap?: Record<string, string>;
|
|
componentTypeLabelMap?: Record<string, string>;
|
|
}>(),
|
|
{
|
|
depth: 0,
|
|
pieces: () => [],
|
|
products: () => [],
|
|
components: () => [],
|
|
componentsLoading: false,
|
|
piecesLoading: false,
|
|
productsLoading: false,
|
|
pieceTypeLabelMap: () => ({}),
|
|
productTypeLabelMap: () => ({}),
|
|
componentTypeLabelMap: () => ({}),
|
|
},
|
|
);
|
|
|
|
const depth = computed(() => props.depth ?? 0);
|
|
const isRoot = computed(() => depth.value === 0);
|
|
|
|
const wrapperClass = computed(() =>
|
|
depth.value === 0 ? 'space-y-6' : 'space-y-6 border-l border-base-300 pl-4',
|
|
);
|
|
|
|
const { get } = useApi();
|
|
const pieceOptionsByPath = ref<Record<string, PieceOption[]>>({});
|
|
const productOptionsByPath = ref<Record<string, ProductOption[]>>({});
|
|
const componentOptionsByPath = ref<Record<string, ComponentOption[]>>({});
|
|
const pieceLoadingByPath = ref<Record<string, boolean>>({});
|
|
const productLoadingByPath = ref<Record<string, boolean>>({});
|
|
const componentLoadingByPath = ref<Record<string, boolean>>({});
|
|
|
|
const setLoading = (target: Record<string, boolean>, key: string, value: boolean) => {
|
|
target[key] = value;
|
|
};
|
|
|
|
const componentOptions = computed(() => {
|
|
if (isRoot.value) {
|
|
return [];
|
|
}
|
|
const cached = componentOptionsByPath.value[props.assignment.path];
|
|
if (cached) {
|
|
return cached;
|
|
}
|
|
const definition = props.assignment.definition || {};
|
|
const requiredTypeId =
|
|
definition.typeComposantId || definition.modelId || null;
|
|
const requiredFamilyCode = definition.familyCode || null;
|
|
|
|
return (props.components || []).filter((component) => {
|
|
if (!component || typeof component !== 'object') {
|
|
return false;
|
|
}
|
|
if (requiredTypeId) {
|
|
return component.typeComposantId === requiredTypeId;
|
|
}
|
|
if (requiredFamilyCode) {
|
|
return (
|
|
component.typeComposant?.code === requiredFamilyCode ||
|
|
component.typeComposantId === requiredFamilyCode
|
|
);
|
|
}
|
|
return true;
|
|
});
|
|
});
|
|
|
|
const componentOptionLabel = (component?: ComponentOption | null) => {
|
|
if (!component) {
|
|
return 'Composant sans nom';
|
|
}
|
|
return component.name || 'Composant sans nom';
|
|
};
|
|
|
|
const componentOptionDescription = (component?: ComponentOption | null) => {
|
|
if (!component) {
|
|
return '';
|
|
}
|
|
const parts: string[] = [];
|
|
const typeLabel =
|
|
component.typeComposant?.name || component.typeComposant?.code || null;
|
|
if (typeLabel) {
|
|
parts.push(typeLabel);
|
|
}
|
|
if (component.reference) {
|
|
parts.push(`Ref. ${component.reference}`);
|
|
}
|
|
return parts.join(' • ');
|
|
};
|
|
|
|
const typeIri = (id: string) => `/api/model_types/${id}`;
|
|
const primedPiecePaths = new Set<string>();
|
|
const primedProductPaths = new Set<string>();
|
|
const primedComponentPaths = new Set<string>();
|
|
|
|
const fetchComponentOptions = async (term = '') => {
|
|
if (isRoot.value) {
|
|
return;
|
|
}
|
|
const key = props.assignment.path;
|
|
if (componentLoadingByPath.value[key]) {
|
|
return;
|
|
}
|
|
|
|
const definition = props.assignment.definition || {};
|
|
const requiredTypeId =
|
|
definition.typeComposantId || definition.modelId || definition.typeComposant?.id || null;
|
|
|
|
const params = new URLSearchParams();
|
|
params.set('itemsPerPage', '50');
|
|
if (term.trim()) {
|
|
params.set('name', term.trim());
|
|
}
|
|
if (requiredTypeId) {
|
|
params.set('typeComposant', typeIri(requiredTypeId));
|
|
}
|
|
|
|
setLoading(componentLoadingByPath.value, key, true);
|
|
try {
|
|
const result = await get(`/composants?${params.toString()}`);
|
|
if (result.success) {
|
|
componentOptionsByPath.value[key] = extractCollection(result.data);
|
|
}
|
|
} finally {
|
|
setLoading(componentLoadingByPath.value, key, false);
|
|
}
|
|
};
|
|
|
|
const fetchPieceOptions = async (assignment: StructurePieceAssignment, term = '') => {
|
|
const key = assignment.path;
|
|
if (pieceLoadingByPath.value[key]) {
|
|
return;
|
|
}
|
|
|
|
const definition = assignment.definition || {};
|
|
const requiredTypeId =
|
|
definition.typePieceId || definition.typePiece?.id || null;
|
|
|
|
const params = new URLSearchParams();
|
|
params.set('itemsPerPage', '50');
|
|
if (term.trim()) {
|
|
params.set('name', term.trim());
|
|
}
|
|
if (requiredTypeId) {
|
|
params.set('typePiece', typeIri(requiredTypeId));
|
|
}
|
|
|
|
setLoading(pieceLoadingByPath.value, key, true);
|
|
try {
|
|
const result = await get(`/pieces?${params.toString()}`);
|
|
if (result.success) {
|
|
pieceOptionsByPath.value[key] = extractCollection(result.data);
|
|
}
|
|
} finally {
|
|
setLoading(pieceLoadingByPath.value, key, false);
|
|
}
|
|
};
|
|
|
|
const fetchProductOptions = async (assignment: StructureProductAssignment, term = '') => {
|
|
const key = assignment.path;
|
|
if (productLoadingByPath.value[key]) {
|
|
return;
|
|
}
|
|
|
|
const definition = assignment.definition || {};
|
|
const requiredTypeId =
|
|
definition.typeProductId || definition.typeProduct?.id || null;
|
|
|
|
const params = new URLSearchParams();
|
|
params.set('itemsPerPage', '50');
|
|
if (term.trim()) {
|
|
params.set('name', term.trim());
|
|
}
|
|
if (requiredTypeId) {
|
|
params.set('typeProduct', typeIri(requiredTypeId));
|
|
}
|
|
|
|
setLoading(productLoadingByPath.value, key, true);
|
|
try {
|
|
const result = await get(`/products?${params.toString()}`);
|
|
if (result.success) {
|
|
productOptionsByPath.value[key] = extractCollection(result.data);
|
|
}
|
|
} finally {
|
|
setLoading(productLoadingByPath.value, key, false);
|
|
}
|
|
};
|
|
|
|
watch(
|
|
componentOptions,
|
|
(options) => {
|
|
if (isRoot.value) {
|
|
return;
|
|
}
|
|
const hasMatch = options.some(
|
|
(component) => component.id === props.assignment.selectedComponentId,
|
|
);
|
|
if (!hasMatch) {
|
|
props.assignment.selectedComponentId = '';
|
|
}
|
|
},
|
|
{ immediate: true },
|
|
);
|
|
|
|
const describePieceRequirement = (assignment: StructurePieceAssignment) => {
|
|
const definition = assignment.definition;
|
|
const parts: string[] = [];
|
|
const addPart = (value?: string | null) => {
|
|
const trimmed = typeof value === 'string' ? value.trim() : '';
|
|
if (trimmed && !parts.includes(trimmed)) {
|
|
parts.push(trimmed);
|
|
}
|
|
};
|
|
|
|
const options = getPieceOptions(assignment);
|
|
const fallbackPiece = options[0] || null;
|
|
const fallbackType = fallbackPiece?.typePiece || null;
|
|
|
|
addPart(definition.role);
|
|
const explicitLabel =
|
|
definition.typePieceLabel ||
|
|
definition.typePiece?.name ||
|
|
(definition.typePieceId ? props.pieceTypeLabelMap[definition.typePieceId] : null) ||
|
|
fallbackType?.name;
|
|
addPart(explicitLabel);
|
|
|
|
const family =
|
|
definition.familyCode ||
|
|
definition.typePiece?.code ||
|
|
fallbackType?.code ||
|
|
null;
|
|
if (family) {
|
|
addPart(`Famille ${family}`);
|
|
}
|
|
|
|
if (parts.length === 0) {
|
|
addPart(fallbackType?.name);
|
|
if (fallbackType?.code) {
|
|
addPart(`Famille ${fallbackType.code}`);
|
|
}
|
|
}
|
|
|
|
if (parts.length === 0 && definition.typePieceId) {
|
|
addPart(`#${definition.typePieceId}`);
|
|
}
|
|
|
|
return parts.length ? parts.join(' • ') : 'Pièce du squelette';
|
|
};
|
|
|
|
const getProductOptions = (assignment: StructureProductAssignment) => {
|
|
const cached = productOptionsByPath.value[assignment.path];
|
|
if (cached) {
|
|
return cached;
|
|
}
|
|
const definition = assignment.definition;
|
|
const requiredTypeId =
|
|
definition.typeProductId ||
|
|
definition.typeProduct?.id ||
|
|
definition.familyCode ||
|
|
null;
|
|
|
|
return (props.products || []).filter((product) => {
|
|
if (!product || typeof product !== 'object') {
|
|
return false;
|
|
}
|
|
if (!requiredTypeId) {
|
|
return true;
|
|
}
|
|
if (definition.typeProductId || definition.typeProduct?.id) {
|
|
return (
|
|
product.typeProductId === requiredTypeId ||
|
|
product.typeProduct?.id === requiredTypeId
|
|
);
|
|
}
|
|
if (definition.familyCode) {
|
|
return (
|
|
product.typeProduct?.code === requiredTypeId ||
|
|
product.typeProductId === requiredTypeId
|
|
);
|
|
}
|
|
return false;
|
|
});
|
|
};
|
|
|
|
const productOptionLabel = (product?: ProductOption | null) => {
|
|
if (!product) {
|
|
return 'Produit';
|
|
}
|
|
return product.name || product.reference || 'Produit';
|
|
};
|
|
|
|
const productOptionDescription = (product?: ProductOption | null) => {
|
|
if (!product) {
|
|
return '';
|
|
}
|
|
const parts: string[] = [];
|
|
const typeLabel =
|
|
product.typeProduct?.name || product.typeProduct?.code || null;
|
|
if (typeLabel) {
|
|
parts.push(typeLabel);
|
|
}
|
|
if (product.reference) {
|
|
parts.push(`Ref. ${product.reference}`);
|
|
}
|
|
return parts.join(' • ');
|
|
};
|
|
|
|
const describeProductRequirement = (assignment: StructureProductAssignment) => {
|
|
const definition = assignment.definition;
|
|
const parts: string[] = [];
|
|
const addPart = (value?: string | null) => {
|
|
const trimmed = typeof value === 'string' ? value.trim() : '';
|
|
if (trimmed && !parts.includes(trimmed)) {
|
|
parts.push(trimmed);
|
|
}
|
|
};
|
|
|
|
const options = getProductOptions(assignment);
|
|
const fallbackProduct = options[0] || null;
|
|
const fallbackType = fallbackProduct?.typeProduct || null;
|
|
|
|
addPart(definition.role);
|
|
const explicitLabel =
|
|
definition.typeProductLabel ||
|
|
definition.typeProduct?.name ||
|
|
(definition.typeProductId ? props.productTypeLabelMap[definition.typeProductId] : null) ||
|
|
fallbackType?.name;
|
|
addPart(explicitLabel);
|
|
|
|
const family =
|
|
definition.familyCode ||
|
|
definition.typeProduct?.code ||
|
|
fallbackType?.code ||
|
|
null;
|
|
if (family) {
|
|
addPart(`Famille ${family}`);
|
|
}
|
|
|
|
if (parts.length === 0) {
|
|
addPart(fallbackType?.name);
|
|
if (fallbackType?.code) {
|
|
addPart(`Famille ${fallbackType.code}`);
|
|
}
|
|
}
|
|
|
|
if (parts.length === 0 && definition.typeProductId) {
|
|
addPart(`#${definition.typeProductId}`);
|
|
}
|
|
|
|
return parts.length ? parts.join(' • ') : 'Produit du squelette';
|
|
};
|
|
|
|
const requirementLabel = computed(() => {
|
|
const definition = props.assignment.definition || {};
|
|
const alias = definition.alias || definition.typeComposantLabel;
|
|
if (alias) {
|
|
return alias;
|
|
}
|
|
if (definition.typeComposantId && props.componentTypeLabelMap[definition.typeComposantId]) {
|
|
return props.componentTypeLabelMap[definition.typeComposantId];
|
|
}
|
|
if (definition.typeComposant?.name) {
|
|
return definition.typeComposant.name;
|
|
}
|
|
if (definition.familyCode) {
|
|
return `Famille ${definition.familyCode}`;
|
|
}
|
|
return 'Sous-composant';
|
|
});
|
|
|
|
const requirementDescription = computed(() => {
|
|
const definition = props.assignment.definition || {};
|
|
const family =
|
|
definition.typeComposantLabel ||
|
|
(definition.typeComposantId ? props.componentTypeLabelMap[definition.typeComposantId] : null) ||
|
|
definition.typeComposant?.name ||
|
|
definition.familyCode;
|
|
if (family) {
|
|
return `Doit appartenir à la famille "${family}".`;
|
|
}
|
|
return 'Sélectionnez un composant enfant conforme à cette position.';
|
|
});
|
|
|
|
const getPieceOptions = (assignment: StructurePieceAssignment) => {
|
|
const cached = pieceOptionsByPath.value[assignment.path];
|
|
if (cached) {
|
|
return cached;
|
|
}
|
|
const definition = assignment.definition;
|
|
const requiredTypeId =
|
|
definition.typePieceId ||
|
|
definition.typePiece?.id ||
|
|
definition.familyCode ||
|
|
null;
|
|
|
|
return (props.pieces || []).filter((piece) => {
|
|
if (!piece || typeof piece !== 'object') {
|
|
return false;
|
|
}
|
|
if (!requiredTypeId) {
|
|
return true;
|
|
}
|
|
if (definition.typePieceId || definition.typePiece?.id) {
|
|
return (
|
|
piece.typePieceId === requiredTypeId ||
|
|
piece.typePiece?.id === requiredTypeId
|
|
);
|
|
}
|
|
if (definition.familyCode) {
|
|
return (
|
|
piece.typePiece?.code === requiredTypeId ||
|
|
piece.typePieceId === requiredTypeId
|
|
);
|
|
}
|
|
return false;
|
|
});
|
|
};
|
|
|
|
const pieceOptionLabel = (piece?: PieceOption | null) => {
|
|
if (!piece) {
|
|
return 'Pièce';
|
|
}
|
|
return piece.name || 'Pièce';
|
|
};
|
|
|
|
const pieceOptionDescription = (piece?: PieceOption | null) => {
|
|
if (!piece) {
|
|
return '';
|
|
}
|
|
const parts: string[] = [];
|
|
const typeLabel =
|
|
piece.typePiece?.name || piece.typePiece?.code || null;
|
|
if (typeLabel) {
|
|
parts.push(typeLabel);
|
|
}
|
|
if (piece.reference) {
|
|
parts.push(`Ref. ${piece.reference}`);
|
|
}
|
|
return parts.join(' • ');
|
|
};
|
|
|
|
const normalizeSelectionValue = (value: unknown) => {
|
|
if (value === null || value === undefined || value === '') {
|
|
return '';
|
|
}
|
|
if (typeof value === 'string') {
|
|
return value;
|
|
}
|
|
if (typeof value === 'number') {
|
|
return String(value);
|
|
}
|
|
return '';
|
|
};
|
|
|
|
watch(
|
|
() => [props.pieces, props.assignment.pieces],
|
|
() => {
|
|
for (const pieceAssignment of props.assignment.pieces) {
|
|
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]) {
|
|
primedPiecePaths.add(pieceAssignment.path);
|
|
fetchPieceOptions(pieceAssignment).catch(() => {});
|
|
}
|
|
}
|
|
},
|
|
{ deep: true, immediate: true },
|
|
);
|
|
|
|
watch(
|
|
() => [props.products, props.assignment.products],
|
|
() => {
|
|
for (const productAssignment of props.assignment.products) {
|
|
const options = getProductOptions(productAssignment);
|
|
if (
|
|
productAssignment.selectedProductId &&
|
|
!options.some((product) => product.id === productAssignment.selectedProductId)
|
|
) {
|
|
productAssignment.selectedProductId = '';
|
|
}
|
|
if (!primedProductPaths.has(productAssignment.path) && !productOptionsByPath.value[productAssignment.path]) {
|
|
primedProductPaths.add(productAssignment.path);
|
|
fetchProductOptions(productAssignment).catch(() => {});
|
|
}
|
|
}
|
|
},
|
|
{ deep: true, immediate: true },
|
|
);
|
|
|
|
watch(
|
|
() => props.assignment.definition,
|
|
() => {
|
|
if (isRoot.value) {
|
|
return;
|
|
}
|
|
const key = props.assignment.path;
|
|
if (!primedComponentPaths.has(key) && !componentOptionsByPath.value[key]) {
|
|
primedComponentPaths.add(key);
|
|
fetchComponentOptions().catch(() => {});
|
|
}
|
|
},
|
|
{ immediate: true },
|
|
);
|
|
</script>
|