diff --git a/packages/crayons-core/src/utils/draggable.ts b/packages/crayons-core/src/utils/draggable.ts index 422d0f8db..7450bad8c 100644 --- a/packages/crayons-core/src/utils/draggable.ts +++ b/packages/crayons-core/src/utils/draggable.ts @@ -80,7 +80,7 @@ export class Draggable { bubbles: false, detail: { droppedElement: dragElement, - dropToId: this.dragContainer.id, // Return the drop container ID + dragContainer: this.dragContainer, // Return the drop container ID }, }) ); @@ -99,7 +99,6 @@ export class Draggable { private isDropNotAllowed() { const inValidTypesForSection = [ - 'DROPDOWN', 'DEPENDENT_FIELD', 'MULTI_SELECT', 'RELATIONSHIP', @@ -107,10 +106,42 @@ export class Draggable { const dragId = this.dragContainer.id; const isSection = dragId.includes('sectionIdentifier-'); const isFieldTypeNotAllowed = inValidTypesForSection.includes( - dragElement.dataProvider.type + dragElement.dataProvider?.type ); + + // Check if the DROPDOWN is default field + const isDropdownDefaultField = + dragElement.dataProvider?.type === 'DROPDOWN' && + !dragElement.dataProvider.custom; + + const isNewField = + dragElement.dataProvider?.choices?.length > 0 && + dragElement.dataProvider?.choices[0]?.value === ''; + + // Allow dropping if it's a new DROPDOWN field + const isAllowedNewDropdown = + dragElement.dataProvider?.type === 'DROPDOWN' && isNewField; + + // Check if the DROPDOWN has field_options with hasSections + const hasSectionsInFieldOptions = + dragElement.dataProvider?.type === 'DROPDOWN' && + dragElement.dataProvider?.field_options && + dragElement.dataProvider?.field_options.has_sections; + + // Check if the section already has the maximum number of fields + const isSectionFieldLimitExceeded = + this.dragContainer?.children?.length > 15; + + // Check if the field is required const isFieldRequired = dragElement.dataProvider.required; - return isSection && (isFieldTypeNotAllowed || isFieldRequired); + return ( + isSection && + (isFieldTypeNotAllowed || + isFieldRequired || + isSectionFieldLimitExceeded || + (isDropdownDefaultField && !isAllowedNewDropdown) || + hasSectionsInFieldOptions) + ); } private onDragLeave = (e) => { @@ -157,7 +188,7 @@ export class Draggable { bubbles: false, detail: { droppedElement: dragElement, - dropToId: this.dragContainer.id, // Return the drop container ID + dragContainer: this.dragContainer, // Return the drop container ID }, }) ); @@ -198,7 +229,12 @@ export class Draggable { this.dropped = true; const sortContainerId = dragElement.parentElement.id; const newElement = this.placeholder || dragElement; - const droppedIndex = [...this.dragContainer.children].indexOf(newElement); + + // Get all children except the empty section + const relevantChildren = [...this.dragContainer.children].filter( + (child) => !child.classList.contains('empty-section') + ); + const droppedIndex = [...relevantChildren].indexOf(newElement); if (this.placeholder) { if (this.options.addOnDrop) { const clone = this.options.copy diff --git a/packages/crayons-extended/custom-objects/src/components/form-builder/components/fb-field-drag-drop-item.tsx b/packages/crayons-extended/custom-objects/src/components/form-builder/components/fb-field-drag-drop-item.tsx index dab65842e..179e3a501 100644 --- a/packages/crayons-extended/custom-objects/src/components/form-builder/components/fb-field-drag-drop-item.tsx +++ b/packages/crayons-extended/custom-objects/src/components/form-builder/components/fb-field-drag-drop-item.tsx @@ -161,10 +161,13 @@ export class FormBuilderFieldDragDropItem { hasCustomProperty(this.dataProvider, objProductConfig.defaultTagKey) && !this.dataProvider[objProductConfig.defaultTagKey]; + const isCustomDropdownField = + !isDefaultNonCustomField && isDropdownField(this.dataProvider); + const showDynamicFieldSections = this.dynamicSectionsBetaEnabled && - !isDefaultNonCustomField && - isDropdownField(this.dataProvider); + isCustomDropdownField && + !this.sectionName; let choicesWithNoSectionCreated = [], noOfSections = 0, diff --git a/packages/crayons-extended/custom-objects/src/components/form-builder/form-builder.tsx b/packages/crayons-extended/custom-objects/src/components/form-builder/form-builder.tsx index 0e826b6f6..d63884e04 100644 --- a/packages/crayons-extended/custom-objects/src/components/form-builder/form-builder.tsx +++ b/packages/crayons-extended/custom-objects/src/components/form-builder/form-builder.tsx @@ -531,13 +531,15 @@ export class FormBuilder { const objDetail = event.detail, elField = objDetail.droppedElement; let elFieldType = elField.dataProvider.type; - + if (objDetail.dragContainer.children.length > 15) { + elFieldType = 'MAX_LIMIT'; + } if (elField.dataProvider.required) { elFieldType = 'REQUIRED'; } - if (!elField.dataProvider.custom && elField.dataProvider.label) { - elFieldType = 'DEFAULT'; + elFieldType = + elFieldType === 'DEPENDENT_FIELD' ? 'DEPENDENT_FIELD' : 'DEFAULT'; } this.dragErrorMessages = { diff --git a/packages/crayons-i18n/i18n/en-US.json b/packages/crayons-i18n/i18n/en-US.json index 2bd6ea44b..e7221029b 100644 --- a/packages/crayons-i18n/i18n/en-US.json +++ b/packages/crayons-i18n/i18n/en-US.json @@ -218,7 +218,8 @@ "DEPENDENT_FIELD" : "Dependent fields cannot be added into sections", "RELATIONSHIP" : "Lookup fields cannot be added into sections", "REQUIRED" : "Fields marked as required cannot be added into sections", - "DEFAULT" : "Default fields cannot be added into sections" + "DEFAULT" : "Default fields cannot be added into sections", + "MAX_LIMIT": "Sections cannot contain more than 15 fields" } } },