diff --git a/app/components/TypeComponentDisplay.vue b/app/components/TypeComponentDisplay.vue index 32edaa1..5fbcfbb 100644 --- a/app/components/TypeComponentDisplay.vue +++ b/app/components/TypeComponentDisplay.vue @@ -2,156 +2,521 @@
+

{{ component.name }}

+ (Ref: {{ component.reference }})
-
- {{ component.reference ? `Ref: ${component.reference}` : '' }} +
+ {{ compactInfo }}
- -
-
- Prestataire: {{ component.prestataire }} -
-
- Emplacement: {{ component.emplacement }} -
-
- Prix: {{ component.prix }}€ -
-
- - -
-
Champs personnalisés:
-
-
-
{{ field.name }}
-
{{ field.type }}
-
Obligatoire
-
Défaut: {{ field.defaultValue }}
+
\ No newline at end of file + +const expanded = ref(true) +const expandedSections = reactive({ + customFields: true, + pieces: true, + subComponents: true +}) + +const expandedPieces = ref([]) +const expandedPieceCustomFields = ref([]) +const expandedSubComponents = ref([]) +const expandedSubComponentCustomFields = ref([]) +const expandedSubComponentPieces = ref([]) +const expandedSubComponentPieceCustomFields = reactive({}) + +const compactInfo = computed(() => { + const infos = [] + if (props.component?.prestataire) { + infos.push(props.component.prestataire) + } + if (props.component?.emplacement) { + infos.push(props.component.emplacement) + } + return infos.join(' • ') +}) + +const quickPieceSummary = (piece) => { + const infos = [] + if (piece?.prestataire) infos.push(piece.prestataire) + if (piece?.emplacement) infos.push(piece.emplacement) + return infos.join(' • ') +} + +const quickSubSummary = (subComponent) => { + const infos = [] + if (subComponent?.prestataire) infos.push(subComponent.prestataire) + if (subComponent?.emplacement) infos.push(subComponent.emplacement) + return infos.join(' • ') +} + +const applyGlobalExpansion = (expand) => { + expanded.value = expand + expandedSections.customFields = expand && (props.component?.customFields || []).length > 0 + expandedSections.pieces = expand && (props.component?.pieces || []).length > 0 + expandedSections.subComponents = expand && (props.component?.subComponents || []).length > 0 + + expandedPieces.value = (props.component?.pieces || []).map(() => expand) + expandedPieceCustomFields.value = (props.component?.pieces || []).map(() => expand) + + expandedSubComponents.value = (props.component?.subComponents || []).map(() => expand) + expandedSubComponentCustomFields.value = (props.component?.subComponents || []).map(() => expand) + expandedSubComponentPieces.value = (props.component?.subComponents || []).map(() => expand) + + Object.keys(expandedSubComponentPieceCustomFields).forEach((key) => delete expandedSubComponentPieceCustomFields[key]) + ;(props.component?.subComponents || []).forEach((subComponent, subIndex) => { + expandedSubComponentPieceCustomFields[subIndex] = (subComponent.pieces || []).map(() => ({ + expanded: expand, + customFields: expand + })) + }) +} + +const initializeExpansionState = () => { + const initialExpand = props.globalExpandState ? props.globalExpandState.expanded : true + applyGlobalExpansion(initialExpand) +} + +watch(() => props.component, () => { + initializeExpansionState() +}, { deep: true }) + +onMounted(() => { + initializeExpansionState() +}) + +const toggleComponent = () => { + expanded.value = !expanded.value +} + +const toggleSection = (section) => { + expandedSections[section] = !expandedSections[section] +} + +const isPieceExpanded = (index) => expandedPieces.value[index] +const togglePieceDetails = (index) => { + expandedPieces.value[index] = !expandedPieces.value[index] +} + +const isPieceCustomFieldSectionExpanded = (index) => expandedPieceCustomFields.value[index] +const togglePieceCustomFields = (index) => { + expandedPieceCustomFields.value[index] = !expandedPieceCustomFields.value[index] +} + +const isSubComponentExpanded = (index) => expandedSubComponents.value[index] +const toggleSubComponentDetails = (index) => { + expandedSubComponents.value[index] = !expandedSubComponents.value[index] +} + +const isSubComponentCustomFieldSectionExpanded = (index) => expandedSubComponentCustomFields.value[index] +const toggleSubComponentCustomFieldSection = (index) => { + expandedSubComponentCustomFields.value[index] = !expandedSubComponentCustomFields.value[index] +} + +const isSubComponentPieceSectionExpanded = (index) => expandedSubComponentPieces.value[index] +const toggleSubComponentPieceSection = (index) => { + expandedSubComponentPieces.value[index] = !expandedSubComponentPieces.value[index] +} + +const isSubPieceExpanded = (subIndex, pieceIndex) => expandedSubComponentPieceCustomFields[subIndex]?.[pieceIndex]?.expanded ?? false + +const ensureSubPieceEntry = (subIndex, pieceIndex) => { + if (!expandedSubComponentPieceCustomFields[subIndex]) { + expandedSubComponentPieceCustomFields[subIndex] = [] + } + if (!expandedSubComponentPieceCustomFields[subIndex][pieceIndex]) { + expandedSubComponentPieceCustomFields[subIndex][pieceIndex] = { expanded: false, customFields: false } + } +} + +const toggleSubPieceDetails = (subIndex, pieceIndex) => { + ensureSubPieceEntry(subIndex, pieceIndex) + expandedSubComponentPieceCustomFields[subIndex][pieceIndex].expanded = !expandedSubComponentPieceCustomFields[subIndex][pieceIndex].expanded +} + +const isSubPieceCustomFieldSectionExpanded = (subIndex, pieceIndex) => expandedSubComponentPieceCustomFields[subIndex]?.[pieceIndex]?.customFields ?? false +const toggleSubPieceCustomFields = (subIndex, pieceIndex) => { + ensureSubPieceEntry(subIndex, pieceIndex) + expandedSubComponentPieceCustomFields[subIndex][pieceIndex].customFields = !expandedSubComponentPieceCustomFields[subIndex][pieceIndex].customFields +} + +watch(() => props.globalExpandState?.id, () => { + if (props.globalExpandState) { + applyGlobalExpansion(props.globalExpandState.expanded) + } +}) + diff --git a/app/components/TypeComponentForm.vue b/app/components/TypeComponentForm.vue index f49eed2..8368f18 100644 --- a/app/components/TypeComponentForm.vue +++ b/app/components/TypeComponentForm.vue @@ -1,8 +1,59 @@