add sub componet in catego ske

This commit is contained in:
Matthieu
2025-10-16 16:48:36 +02:00
parent 761c5f559a
commit 42c788103a
11 changed files with 859 additions and 109 deletions

View File

@@ -25,7 +25,6 @@
initial-category="COMPONENT"
:initial-data="initialData"
:lock-category="true"
:allow-component-subcomponents="false"
:saving="saving"
@submit="handleSubmit"
@cancel="handleCancel"

View File

@@ -19,7 +19,6 @@
mode="create"
initial-category="COMPONENT"
:lock-category="true"
:allow-component-subcomponents="false"
:saving="saving"
@submit="handleSubmit"
@cancel="handleCancel"

View File

@@ -131,32 +131,43 @@
{{ selectedType.description || 'Ce squelette définit la structure et les contraintes du composant.' }}
</p>
</div>
<span class="badge badge-outline">{{ formatStructurePreview(selectedType.structure) }}</span>
<span class="badge badge-outline">{{ formatStructurePreview(selectedTypeStructure) }}</span>
</div>
<details v-if="selectedType.structure" class="collapse collapse-arrow bg-base-100">
<details v-if="selectedTypeStructure" class="collapse collapse-arrow bg-base-100">
<summary class="collapse-title text-sm font-medium">
Consulter le détail du squelette
</summary>
<div class="collapse-content space-y-4 text-sm text-base-content/80">
<div v-if="getStructureCustomFields(selectedType.structure).length" class="space-y-2">
<div v-if="getStructureCustomFields(selectedTypeStructure).length" class="space-y-2">
<h3 class="font-semibold text-sm text-base-content">Champs personnalisés</h3>
<ul class="list-disc list-inside space-y-1">
<ul class="space-y-2">
<li
v-for="field in getStructureCustomFields(selectedType.structure)"
:key="field.key || field.name"
v-for="field in getStructureCustomFields(selectedTypeStructure)"
:key="field.customFieldId || field.id || field.name"
class="rounded bg-base-200/60 px-3 py-2"
>
<span class="font-medium">{{ field.key || field.name }}</span>
<span v-if="field.value !== undefined && field.value !== null"> : {{ field.value }}</span>
<p class="font-medium text-sm text-base-content">
{{ field.name || field.key }}
</p>
<p class="text-xs text-base-content/70 mt-1">
Type : {{ field.type || 'text' }}<span v-if="field.required"> Obligatoire</span>
<span v-if="Array.isArray(field.options) && field.options.length">
Options : {{ field.options.join(', ') }}
</span>
<span v-if="field.defaultValue">
Défaut : {{ field.defaultValue }}
</span>
</p>
</li>
</ul>
</div>
<div v-if="getStructurePieces(selectedType.structure).length" class="space-y-2">
<div v-if="getStructurePieces(selectedTypeStructure).length" class="space-y-2">
<h3 class="font-semibold text-sm text-base-content">Pièces imposées</h3>
<ul class="list-disc list-inside space-y-1">
<li
v-for="(piece, index) in getStructurePieces(selectedType.structure)"
v-for="(piece, index) in getStructurePieces(selectedTypeStructure)"
:key="piece.role || piece.typePieceId || piece.familyCode || index"
>
{{ resolvePieceLabel(piece) }}
@@ -164,11 +175,11 @@
</ul>
</div>
<div v-if="getStructureSubcomponents(selectedType.structure).length" class="space-y-2">
<div v-if="getStructureSubcomponents(selectedTypeStructure).length" class="space-y-2">
<h3 class="font-semibold text-sm text-base-content">Sous-composants</h3>
<ul class="list-disc list-inside space-y-1">
<li
v-for="(subcomponent, index) in getStructureSubcomponents(selectedType.structure)"
v-for="(subcomponent, index) in getStructureSubcomponents(selectedTypeStructure)"
:key="subcomponent.alias || subcomponent.typeComposantId || subcomponent.familyCode || index"
>
{{ resolveSubcomponentLabel(subcomponent) }}
@@ -177,7 +188,7 @@
</div>
<p
v-if="!getStructureCustomFields(selectedType.structure).length && !getStructurePieces(selectedType.structure).length && !getStructureSubcomponents(selectedType.structure).length"
v-if="!getStructureCustomFields(selectedTypeStructure).length && !getStructurePieces(selectedTypeStructure).length && !getStructureSubcomponents(selectedTypeStructure).length"
class="text-xs text-gray-500"
>
Ce squelette ne définit pas encore de pièces, sous-composants ou valeurs par défaut.
@@ -383,7 +394,7 @@ import { useCustomFields } from '~/composables/useCustomFields'
import { useApi } from '~/composables/useApi'
import { useToast } from '~/composables/useToast'
import { useDocuments } from '~/composables/useDocuments'
import { formatStructurePreview } from '~/shared/modelUtils'
import { formatStructurePreview, normalizeStructureForEditor } from '~/shared/modelUtils'
import type { ComponentModelStructure } from '~/shared/types/inventory'
import type { ModelType } from '~/services/modelTypes'
import { getFileIcon } from '~/utils/fileIcons'
@@ -530,6 +541,11 @@ const selectedType = computed(() => {
return componentTypeList.value.find((type) => type.id === selectedTypeId.value) ?? null
})
const selectedTypeStructure = computed<ComponentModelStructure | null>(() => {
const structure = selectedType.value?.structure ?? null
return structure ? normalizeStructureForEditor(structure) : null
})
const requiredCustomFieldsFilled = computed(() =>
customFieldInputs.value.every((field) => {
if (!field.required) {
@@ -582,8 +598,8 @@ const fetchComponent = async () => {
let initialized = false
watch(
[component, selectedType],
([currentComponent, currentType]) => {
[component, selectedTypeStructure],
([currentComponent, currentStructure]) => {
if (!currentComponent || initialized) {
return
}
@@ -596,7 +612,7 @@ watch(
editionForm.prix = currentComponent.prix !== null && currentComponent.prix !== undefined ? String(currentComponent.prix) : ''
customFieldInputs.value = buildCustomFieldInputs(
currentType?.structure ?? null,
currentStructure,
currentComponent.customFieldValues,
)
@@ -605,12 +621,12 @@ watch(
{ immediate: true },
)
watch(selectedType, (currentType) => {
if (!component.value || !currentType) {
watch(selectedTypeStructure, (currentStructure) => {
if (!component.value) {
return
}
customFieldInputs.value = buildCustomFieldInputs(
currentType.structure,
currentStructure,
component.value.customFieldValues,
)
})
@@ -662,7 +678,8 @@ const buildCustomFieldInputs = (
structure: ComponentModelStructure | null,
values: any[] | null,
): CustomFieldInput[] => {
const definitions = normalizeCustomFieldInputs(structure)
const normalizedStructure = structure ? normalizeStructureForEditor(structure) : null
const definitions = normalizeCustomFieldInputs(normalizedStructure)
const valueList = Array.isArray(values) ? values : []
const mapById = new Map<string, any>()
@@ -694,7 +711,7 @@ const buildCustomFieldInputs = (
}
}
const resolvedValue = matched.value ?? ''
const resolvedValue = extractStoredCustomFieldValue(matched)
return {
...definition,
customFieldId: matched.customField?.id || definition.customFieldId || definition.id,
@@ -728,11 +745,10 @@ const normalizeCustomField = (rawField: any): CustomFieldInput | null => {
return null
}
const type = resolveFieldType(rawField)
const required = !!rawField.required
const options = Array.isArray(rawField.options)
? rawField.options.filter((option: unknown): option is string => typeof option === 'string')
: []
const value = formatDefaultValue(type, rawField.value)
const required = resolveRequiredFlag(rawField)
const options = resolveOptions(rawField)
const defaultSource = resolveDefaultValue(rawField)
const value = formatDefaultValue(type, defaultSource)
const id = typeof rawField.id === 'string' ? rawField.id : null
const customFieldId = typeof rawField.customFieldId === 'string' ? rawField.customFieldId : id
const customFieldValueId = typeof rawField.customFieldValueId === 'string'
@@ -756,14 +772,56 @@ const resolveFieldName = (field: any): string => {
const resolveFieldType = (field: any): string => {
const allowed = ['text', 'number', 'select', 'boolean', 'date']
const value = typeof field?.type === 'string' ? field.type.toLowerCase() : ''
const rawType =
typeof field?.type === 'string'
? field.type
: typeof field?.value?.type === 'string'
? field.value.type
: ''
const value = rawType.toLowerCase()
return allowed.includes(value) ? value : 'text'
}
const resolveDefaultValue = (field: any): any => {
if (!field || typeof field !== 'object') {
return null
}
if (field.defaultValue !== undefined && field.defaultValue !== null) {
return field.defaultValue
}
if (field.value !== undefined && field.value !== null && typeof field.value !== 'object') {
return field.value
}
if (field.default !== undefined && field.default !== null) {
return field.default
}
if (field.value && typeof field.value === 'object') {
if ((field.value as any).defaultValue !== undefined && (field.value as any).defaultValue !== null) {
return (field.value as any).defaultValue
}
if ((field.value as any).value !== undefined && (field.value as any).value !== null && typeof (field.value as any).value !== 'object') {
return (field.value as any).value
}
}
return null
}
const formatDefaultValue = (type: string, defaultValue: any): string => {
if (defaultValue === null || defaultValue === undefined) {
return ''
}
if (typeof defaultValue === 'object') {
if (defaultValue === null) {
return ''
}
if ('defaultValue' in (defaultValue as Record<string, any>)) {
return formatDefaultValue(type, (defaultValue as Record<string, any>).defaultValue)
}
if ('value' in (defaultValue as Record<string, any>)) {
return formatDefaultValue(type, (defaultValue as Record<string, any>).value)
}
return ''
}
if (type === 'boolean') {
const normalized = String(defaultValue).toLowerCase()
if (normalized === 'true' || normalized === '1') {
@@ -777,6 +835,90 @@ const formatDefaultValue = (type: string, defaultValue: any): string => {
return String(defaultValue)
}
const resolveRequiredFlag = (field: any): boolean => {
if (typeof field?.required === 'boolean') {
return field.required
}
const nestedRequired = field?.value?.required
if (typeof nestedRequired === 'boolean') {
return nestedRequired
}
if (typeof nestedRequired === 'string') {
const normalized = nestedRequired.toLowerCase()
return normalized === 'true' || normalized === '1'
}
return false
}
const resolveOptions = (field: any): string[] => {
const sources = [field?.options, field?.value?.options, field?.value?.choices]
for (const source of sources) {
if (Array.isArray(source)) {
const mapped = source
.map((option: unknown) => {
if (option === null || option === undefined) {
return ''
}
if (typeof option === 'string') {
return option.trim()
}
if (typeof option === 'object') {
const record = option as Record<string, unknown>
const keys = ['value', 'label', 'name']
for (const key of keys) {
const candidate = record[key]
if (typeof candidate === 'string' && candidate.trim().length > 0) {
return candidate.trim()
}
}
}
const fallback = String(option).trim()
return fallback === '[object Object]' ? '' : fallback
})
.filter((option) => option.length > 0)
if (mapped.length) {
return mapped
}
}
}
return []
}
const extractStoredCustomFieldValue = (entry: any): any => {
if (entry === null || entry === undefined) {
return ''
}
if (typeof entry === 'string' || typeof entry === 'number' || typeof entry === 'boolean') {
return entry
}
if (typeof entry !== 'object') {
return String(entry)
}
const direct = entry.value
if (direct !== undefined && direct !== null) {
if (typeof direct === 'object') {
if (direct === null) {
return ''
}
if ('value' in direct && direct.value !== undefined && direct.value !== null) {
return direct.value
}
if ('defaultValue' in direct && direct.defaultValue !== undefined && direct.defaultValue !== null) {
return direct.defaultValue
}
return ''
}
return direct
}
if (entry.defaultValue !== undefined && entry.defaultValue !== null) {
return entry.defaultValue
}
if (entry.customFieldValue?.value !== undefined && entry.customFieldValue?.value !== null) {
return entry.customFieldValue.value
}
return ''
}
const getStructureCustomFields = (structure: ComponentModelStructure | null) => {
return Array.isArray(structure?.customFields) ? structure.customFields : []
}

View File

@@ -104,32 +104,43 @@
{{ selectedType.description || 'Ce squelette définit la structure et les contraintes du composant.' }}
</p>
</div>
<span class="badge badge-outline">{{ formatStructurePreview(selectedType.structure) }}</span>
<span class="badge badge-outline">{{ formatStructurePreview(selectedTypeStructure) }}</span>
</div>
<details v-if="selectedType.structure" class="collapse collapse-arrow bg-base-100">
<details v-if="selectedTypeStructure" class="collapse collapse-arrow bg-base-100">
<summary class="collapse-title text-sm font-medium">
Consulter le détail du squelette
</summary>
<div class="collapse-content space-y-4 text-sm text-base-content/80">
<div v-if="getStructureCustomFields(selectedType.structure).length" class="space-y-2">
<div v-if="getStructureCustomFields(selectedTypeStructure).length" class="space-y-2">
<h3 class="font-semibold text-sm text-base-content">Champs personnalisés</h3>
<ul class="list-disc list-inside space-y-1">
<ul class="space-y-2">
<li
v-for="field in getStructureCustomFields(selectedType.structure)"
:key="field.key || field.name"
v-for="field in getStructureCustomFields(selectedTypeStructure)"
:key="field.customFieldId || field.id || field.name"
class="rounded bg-base-200/60 px-3 py-2"
>
<span class="font-medium">{{ field.key || field.name }}</span>
<span v-if="field.value !== undefined && field.value !== null"> : {{ field.value }}</span>
<p class="font-medium text-sm text-base-content">
{{ field.name || field.key }}
</p>
<p class="text-xs text-base-content/70 mt-1">
Type : {{ field.type || 'text' }}<span v-if="field.required"> Obligatoire</span>
<span v-if="Array.isArray(field.options) && field.options.length">
Options : {{ field.options.join(', ') }}
</span>
<span v-if="field.defaultValue">
Défaut : {{ field.defaultValue }}
</span>
</p>
</li>
</ul>
</div>
<div v-if="getStructurePieces(selectedType.structure).length" class="space-y-2">
<div v-if="getStructurePieces(selectedTypeStructure).length" class="space-y-2">
<h3 class="font-semibold text-sm text-base-content">Pièces imposées</h3>
<ul class="list-disc list-inside space-y-1">
<li
v-for="(piece, index) in getStructurePieces(selectedType.structure)"
v-for="(piece, index) in getStructurePieces(selectedTypeStructure)"
:key="piece.role || piece.typePieceId || piece.familyCode || index"
>
{{ resolvePieceLabel(piece) }}
@@ -137,11 +148,11 @@
</ul>
</div>
<div v-if="getStructureSubcomponents(selectedType.structure).length" class="space-y-2">
<div v-if="getStructureSubcomponents(selectedTypeStructure).length" class="space-y-2">
<h3 class="font-semibold text-sm text-base-content">Sous-composants</h3>
<ul class="list-disc list-inside space-y-1">
<li
v-for="(subcomponent, index) in getStructureSubcomponents(selectedType.structure)"
v-for="(subcomponent, index) in getStructureSubcomponents(selectedTypeStructure)"
:key="subcomponent.alias || subcomponent.typeComposantId || subcomponent.familyCode || index"
>
{{ resolveSubcomponentLabel(subcomponent) }}
@@ -327,7 +338,7 @@ import { usePieces } from '~/composables/usePieces'
import { useToast } from '~/composables/useToast'
import { useCustomFields } from '~/composables/useCustomFields'
import { useDocuments } from '~/composables/useDocuments'
import { formatStructurePreview } from '~/shared/modelUtils'
import { formatStructurePreview, normalizeStructureForEditor } from '~/shared/modelUtils'
import type {
ComponentModelPiece,
ComponentModelStructure,
@@ -422,6 +433,11 @@ const selectedType = computed(() => {
return componentTypeList.value.find((type) => type.id === selectedTypeId.value) ?? null
})
const selectedTypeStructure = computed<ComponentModelStructure | null>(() => {
const structure = selectedType.value?.structure ?? null
return structure ? normalizeStructureForEditor(structure) : null
})
watch(selectedType, (type) => {
if (!type) {
clearCreationForm()
@@ -433,8 +449,8 @@ watch(selectedType, (type) => {
creationForm.name = type.name
}
lastSuggestedName.value = creationForm.name
customFieldInputs.value = normalizeCustomFieldInputs(type.structure)
structureAssignments.value = initializeStructureAssignments(type.structure)
customFieldInputs.value = normalizeCustomFieldInputs(selectedTypeStructure.value)
structureAssignments.value = initializeStructureAssignments(selectedTypeStructure.value)
})
const extractSubcomponents = (
@@ -845,11 +861,10 @@ const normalizeCustomField = (rawField: any): CustomFieldInput | null => {
return null
}
const type = resolveFieldType(rawField)
const required = !!rawField.required
const options = Array.isArray(rawField.options)
? rawField.options.filter((option: unknown): option is string => typeof option === 'string')
: []
const value = formatDefaultValue(type, rawField.value)
const required = resolveRequiredFlag(rawField)
const options = resolveOptions(rawField)
const defaultSource = resolveDefaultValue(rawField)
const value = formatDefaultValue(type, defaultSource)
const id = typeof rawField.id === 'string' ? rawField.id : null
const customFieldId = typeof rawField.customFieldId === 'string' ? rawField.customFieldId : id
const customFieldValueId = typeof rawField.customFieldValueId === 'string'
@@ -873,14 +888,56 @@ const resolveFieldName = (field: any): string => {
const resolveFieldType = (field: any): string => {
const allowed = ['text', 'number', 'select', 'boolean', 'date']
const value = typeof field?.type === 'string' ? field.type.toLowerCase() : ''
const rawType =
typeof field?.type === 'string'
? field.type
: typeof field?.value?.type === 'string'
? field.value.type
: ''
const value = rawType.toLowerCase()
return allowed.includes(value) ? value : 'text'
}
const resolveDefaultValue = (field: any): any => {
if (!field || typeof field !== 'object') {
return null
}
if (field.defaultValue !== undefined && field.defaultValue !== null) {
return field.defaultValue
}
if (field.value !== undefined && field.value !== null && typeof field.value !== 'object') {
return field.value
}
if (field.default !== undefined && field.default !== null) {
return field.default
}
if (field.value && typeof field.value === 'object') {
if ((field.value as any).defaultValue !== undefined && (field.value as any).defaultValue !== null) {
return (field.value as any).defaultValue
}
if ((field.value as any).value !== undefined && (field.value as any).value !== null && typeof (field.value as any).value !== 'object') {
return (field.value as any).value
}
}
return null
}
const formatDefaultValue = (type: string, defaultValue: any): string => {
if (defaultValue === null || defaultValue === undefined) {
return ''
}
if (typeof defaultValue === 'object') {
if (defaultValue === null) {
return ''
}
if ('defaultValue' in (defaultValue as Record<string, any>)) {
return formatDefaultValue(type, (defaultValue as Record<string, any>).defaultValue)
}
if ('value' in (defaultValue as Record<string, any>)) {
return formatDefaultValue(type, (defaultValue as Record<string, any>).value)
}
return ''
}
if (type === 'boolean') {
const normalized = String(defaultValue).toLowerCase()
if (normalized === 'true' || normalized === '1') {
@@ -894,6 +951,55 @@ const formatDefaultValue = (type: string, defaultValue: any): string => {
return String(defaultValue)
}
const resolveRequiredFlag = (field: any): boolean => {
if (typeof field?.required === 'boolean') {
return field.required
}
const nestedRequired = field?.value?.required
if (typeof nestedRequired === 'boolean') {
return nestedRequired
}
if (typeof nestedRequired === 'string') {
const normalized = nestedRequired.toLowerCase()
return normalized === 'true' || normalized === '1'
}
return false
}
const resolveOptions = (field: any): string[] => {
const sources = [field?.options, field?.value?.options, field?.value?.choices]
for (const source of sources) {
if (Array.isArray(source)) {
const mapped = source
.map((option: unknown) => {
if (option === null || option === undefined) {
return ''
}
if (typeof option === 'string') {
return option.trim()
}
if (typeof option === 'object') {
const record = option as Record<string, unknown>
const keys = ['value', 'label', 'name']
for (const key of keys) {
const candidate = record[key]
if (typeof candidate === 'string' && candidate.trim().length > 0) {
return candidate.trim()
}
}
}
const fallback = String(option).trim()
return fallback === '[object Object]' ? '' : fallback
})
.filter((option) => option.length > 0)
if (mapped.length) {
return mapped
}
}
}
return []
}
const buildCustomFieldMetadata = (field: CustomFieldInput) => ({
customFieldName: field.name,
customFieldType: field.type,

View File

@@ -699,7 +699,8 @@ const normalizeCustomField = (rawField: any): CustomFieldInput | null => {
const options = Array.isArray(rawField.options)
? rawField.options.filter((option: unknown): option is string => typeof option === 'string')
: []
const value = formatDefaultValue(type, rawField.value)
const defaultSource = resolveDefaultValue(rawField)
const value = formatDefaultValue(type, defaultSource)
const id = typeof rawField.id === 'string' ? rawField.id : null
const customFieldId = typeof rawField.customFieldId === 'string' ? rawField.customFieldId : id
const customFieldValueId = typeof rawField.customFieldValueId === 'string'
@@ -728,10 +729,46 @@ const resolveFieldType = (field: any): string => {
return allowed.includes(value) ? value : 'text'
}
const resolveDefaultValue = (field: any): any => {
if (!field || typeof field !== 'object') {
return null
}
if (field.defaultValue !== undefined && field.defaultValue !== null) {
return field.defaultValue
}
if (field.value !== undefined && field.value !== null && typeof field.value !== 'object') {
return field.value
}
if (field.default !== undefined && field.default !== null) {
return field.default
}
if (field.value && typeof field.value === 'object') {
if ((field.value as any).defaultValue !== undefined && (field.value as any).defaultValue !== null) {
return (field.value as any).defaultValue
}
if ((field.value as any).value !== undefined && (field.value as any).value !== null && typeof (field.value as any).value !== 'object') {
return (field.value as any).value
}
}
return null
}
const formatDefaultValue = (type: string, defaultValue: any): string => {
if (defaultValue === null || defaultValue === undefined) {
return ''
}
if (typeof defaultValue === 'object') {
if (defaultValue === null) {
return ''
}
if ('defaultValue' in (defaultValue as Record<string, any>)) {
return formatDefaultValue(type, (defaultValue as Record<string, any>).defaultValue)
}
if ('value' in (defaultValue as Record<string, any>)) {
return formatDefaultValue(type, (defaultValue as Record<string, any>).value)
}
return ''
}
if (type === 'boolean') {
const normalized = String(defaultValue).toLowerCase()
if (normalized === 'true' || normalized === '1') {

View File

@@ -494,7 +494,8 @@ const normalizeCustomField = (rawField: any): CustomFieldInput | null => {
const options = Array.isArray(rawField.options)
? rawField.options.filter((option: unknown): option is string => typeof option === 'string')
: []
const value = formatDefaultValue(type, rawField.value)
const defaultSource = resolveDefaultValue(rawField)
const value = formatDefaultValue(type, defaultSource)
const id = typeof rawField.id === 'string' ? rawField.id : null
const customFieldId = typeof rawField.customFieldId === 'string' ? rawField.customFieldId : id
const customFieldValueId = typeof rawField.customFieldValueId === 'string'
@@ -523,10 +524,46 @@ const resolveFieldType = (field: any): string => {
return allowed.includes(value) ? value : 'text'
}
const resolveDefaultValue = (field: any): any => {
if (!field || typeof field !== 'object') {
return null
}
if (field.defaultValue !== undefined && field.defaultValue !== null) {
return field.defaultValue
}
if (field.value !== undefined && field.value !== null && typeof field.value !== 'object') {
return field.value
}
if (field.default !== undefined && field.default !== null) {
return field.default
}
if (field.value && typeof field.value === 'object') {
if ((field.value as any).defaultValue !== undefined && (field.value as any).defaultValue !== null) {
return (field.value as any).defaultValue
}
if ((field.value as any).value !== undefined && (field.value as any).value !== null && typeof (field.value as any).value !== 'object') {
return (field.value as any).value
}
}
return null
}
const formatDefaultValue = (type: string, defaultValue: any): string => {
if (defaultValue === null || defaultValue === undefined) {
return ''
}
if (typeof defaultValue === 'object') {
if (defaultValue === null) {
return ''
}
if ('defaultValue' in (defaultValue as Record<string, any>)) {
return formatDefaultValue(type, (defaultValue as Record<string, any>).defaultValue)
}
if ('value' in (defaultValue as Record<string, any>)) {
return formatDefaultValue(type, (defaultValue as Record<string, any>).value)
}
return ''
}
if (type === 'boolean') {
const normalized = String(defaultValue).toLowerCase()
if (normalized === 'true' || normalized === '1') {