fix: added the validation for section with dropdown

freshworks · Sep 28, 2024 · a66f8d8 · a66f8d8
1 parent 9da63b7
commit a66f8d8
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 8 deletions.
diff --git 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
           },
         })
       );
@@ -106,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) => {
@@ -156,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
           },
         })
       );

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
@@ -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
@@ -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"
       }
     }
   },