@integry/sdk 4.6.93 → 4.6.95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@integry/sdk",
-  "version": "4.6.93",
+  "version": "4.6.95",
   "description": "Integry SDK",
   "main": "dist/umd/index.umd.js",
   "module": "dist/esm/index.csm.js",

package/src/features/common/DynamicField/index.ts

@@ -5,7 +5,6 @@ import { TemplateField, NestedObject } from '@/interfaces';
 import AppContext from '@/contexts/AppContext';
 import { StoreType } from '@/types/store';
 // import { Input } from '@/components/Input';
-import { LargeLoader } from '@/components/LargeLoader';
 import { Loader } from '@/components/Loader';
 import { MultipurposeField } from '@/components/MultipurposeField';
 import { actionFunctions } from '@/store';
@@ -141,7 +140,13 @@ const DynamicFields = (props: DynamicFieldsProps) => {
 
   useEffect(() => {
     fetchDynamicFields();
-  }, [dynamicField, endpointData, selectedAuthId, parentFieldChanged]);
+  }, [parentFieldChanged]);
+
+  useEffect(() => {
+    if (!onChangeCallback) {
+      fetchDynamicFields();
+    }
+  }, [dynamicField, endpointData, selectedAuthId]);
 
   const getPlaceholder = () => {
     let placeHolderValue = 'Enter text or map to fields...';
@@ -166,13 +171,19 @@ const DynamicFields = (props: DynamicFieldsProps) => {
     });
 
     if (onChangeCallback && objectValue !== null) {
-      const data = {
-        ...customFieldsData,
-        [machineName]: val,
-      };
-      setCustomFieldsData(data);
+      // Use the functional update form of setState to ensure we're working with the latest state
+      setCustomFieldsData((prevData: any) => {
+        const updatedData = {
+          ...prevData,
+          [machineName]: val,
+        };
 
-      onChangeCallback(JSON.stringify(data));
+        // Call the callback with the updated data
+        onChangeCallback(JSON.stringify(updatedData));
+
+        // Return the updated data to set the state
+        return updatedData;
+      });
     } else {
       props.setStepMappingData({
         stepId,

package/src/features/common/DynamicTypedField/index.ts

@@ -38,7 +38,7 @@ export type DynamicFieldsProps = {
   isDisabled?: boolean;
   onChangeCallback?: (val: any) => void;
   dependsOn?: string[];
-  isArray?: boolean; // New prop to determine if the output should be an array
+  isArray?: boolean;
 } & StoreType;
 
 interface DynamicDataItem {
@@ -69,16 +69,37 @@ const DynamicTypedFields = (props: DynamicFieldsProps) => {
     isDisabled = false,
     onChangeCallback = () => null,
     dependsOn = [],
-    isArray = false, // Default to false for backward compatibility
+    isArray = false,
   } = props;
+
   const [dynamicItems, setDynamicItems] = useState<DynamicDataItem[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
+
+  // For array mode, we'll track multiple sets of field data
+  const [fieldSets, setFieldSets] = useState<any[]>(() => {
+    if (value) {
+      const parsedValue = typeof value === 'string' ? JSON.parse(value) : value;
+
+      if (isArray) {
+        // If it's already an array, use it
+        if (Array.isArray(parsedValue)) {
+          return parsedValue;
+        }
+        // If it's an object, wrap it in an array
+        return [parsedValue];
+      }
+
+      // For non-array mode, we still initialize with a single object
+      return [parsedValue];
+    }
+    return [{}]; // Start with one empty object
+  });
+
+  // For backward compatibility, maintain customFieldsData for the first set
   const [customFieldsData, setCustomFieldsData] = useState<any>(() => {
-    // Initialize from value prop if available
     if (value) {
       const parsedValue = typeof value === 'string' ? JSON.parse(value) : value;
 
-      // If isArray is true and the value is an array, extract the first object
       if (isArray && Array.isArray(parsedValue) && parsedValue.length > 0) {
         return parsedValue[0];
       }
@@ -87,6 +108,7 @@ const DynamicTypedFields = (props: DynamicFieldsProps) => {
     }
     return {};
   });
+
   const [
     isErrorOnLoadingCustomFields,
     setIsErrorOnLoadingCustomFields,
@@ -135,13 +157,13 @@ const DynamicTypedFields = (props: DynamicFieldsProps) => {
             if (Array.isArray(res)) {
               transformedItems = res;
             } else if (res.output && Array.isArray(res.output)) {
-              const { idKeyPath, titleKeyPath, typeKeyPath } = props; // Assuming these are passed as part of dynamicField prop
+              const { idKeyPath, titleKeyPath, typeKeyPath } = props;
 
               if (idKeyPath && titleKeyPath) {
                 transformedItems = res.output.map((item: any) => ({
-                  id: resolveValue(idKeyPath, item), // Use idKeyPath to access the ID
-                  title: resolveValue(titleKeyPath, item), // Use titleKeyPath to access the title
-                  type: 'TEXTFIELD', // Use typeKeyPath to access the type
+                  id: resolveValue(idKeyPath, item),
+                  title: resolveValue(titleKeyPath, item),
+                  type: 'TEXTFIELD',
                 }));
               } else {
                 setDynamicItems([]);
@@ -164,9 +186,8 @@ const DynamicTypedFields = (props: DynamicFieldsProps) => {
     }
   };
 
-  // Split the effects - one for fetching fields, one for handling value changes
+  // Effect for fetching fields
   useEffect(() => {
-    // Only fetch fields on initial mount or when parentFieldsChanged changes
     if (dependsOn.length > 0 && !parentFieldsChanged) {
       setLoading(false);
       setIsErrorOnLoadingCustomFields(false);
@@ -176,51 +197,115 @@ const DynamicTypedFields = (props: DynamicFieldsProps) => {
       fetchDynamicFields();
       fieldsHaveBeenFetched.current = true;
     }
-  }, [parentFieldsChanged]); // Remove value from dependencies
+  }, [parentFieldsChanged]);
 
-  // Separate effect for handling external value changes
+  // Effect for handling external value changes
   useEffect(() => {
-    // Only update from props if the value is different from current state
-    // AND it's not coming from our own onChange (which would cause a loop)
     if (value && !loading) {
-      let parsedValue = typeof value === 'string' ? JSON.parse(value) : value;
+      const parsedValue = typeof value === 'string' ? JSON.parse(value) : value;
 
-      // If isArray is true and the value is an array, extract the first object for internal state
-      if (isArray && Array.isArray(parsedValue) && parsedValue.length > 0) {
-        [parsedValue] = parsedValue;
-      }
+      if (isArray) {
+        // Handle array values
+        const newFieldSets = Array.isArray(parsedValue)
+          ? parsedValue
+          : [parsedValue];
 
-      // Compare if the value is actually different to avoid unnecessary updates
-      const currentValueStr = JSON.stringify(customFieldsData);
-      const newValueStr = JSON.stringify(parsedValue);
+        // Update fieldSets
+        setFieldSets(newFieldSets);
 
-      if (currentValueStr !== newValueStr) {
+        // Update customFieldsData with the first item for backward compatibility
+        if (newFieldSets.length > 0) {
+          setCustomFieldsData(newFieldSets[0]);
+        }
+      } else {
+        // Handle single object value
         setCustomFieldsData(parsedValue);
+        setFieldSets([parsedValue]);
       }
     }
   }, [value, loading, isArray]);
 
-  // Modify the onFieldChange function to handle array output if isArray is true
-  const onFieldChange = (id: string, val: string, type: string) => {
-    // Update local state immediately
-    setCustomFieldsData((prevData: any) => {
-      const newData = {
-        ...prevData,
-        [id]: val,
+  // Function to add a new empty set of fields
+  const addNewFieldSet = () => {
+    setFieldSets((prev) => {
+      const newFieldSets = [...prev, {}];
+
+      // Call parent callbacks with the updated array
+      if (onChange) {
+        onChange(newFieldSets);
+      }
+      if (onChangeCallback) {
+        onChangeCallback(JSON.stringify(newFieldSets));
+      }
+
+      return newFieldSets;
+    });
+  };
+
+  // Function to remove a field set
+  const removeFieldSet = (index: number) => {
+    if (fieldSets.length <= 1) return; // Don't remove the last set
+
+    setFieldSets((prev) => {
+      const newFieldSets = prev.filter((_, i) => i !== index);
+
+      // Update customFieldsData if we're removing the first set
+      if (index === 0 && newFieldSets.length > 0) {
+        setCustomFieldsData(newFieldSets[0]);
+      }
+
+      // Call parent callbacks with the updated array
+      if (onChange) {
+        onChange(newFieldSets);
+      }
+      if (onChangeCallback) {
+        onChangeCallback(JSON.stringify(newFieldSets));
+      }
+
+      return newFieldSets;
+    });
+  };
+
+  // Function to update a specific field in a specific set
+  const onFieldSetChange = (
+    setIndex: number,
+    fieldId: string,
+    val: string,
+    type: string,
+  ) => {
+    setFieldSets((prev) => {
+      const newFieldSets = [...prev];
+
+      // Create or update the field in the specified set
+      newFieldSets[setIndex] = {
+        ...newFieldSets[setIndex],
+        [fieldId]: val,
       };
 
-      // Call parent callbacks with the new data, wrapping in array if isArray is true
+      // If this is the first set, also update customFieldsData for backward compatibility
+      if (setIndex === 0) {
+        setCustomFieldsData(newFieldSets[0]);
+      }
+
+      // Call parent callbacks with the updated array
       if (onChange) {
-        onChange(isArray ? [newData] : newData);
+        onChange(isArray ? newFieldSets : newFieldSets[0]);
       }
       if (onChangeCallback) {
-        onChangeCallback(JSON.stringify(isArray ? [newData] : newData));
+        onChangeCallback(
+          JSON.stringify(isArray ? newFieldSets : newFieldSets[0]),
+        );
       }
 
-      return newData;
+      return newFieldSets;
     });
   };
 
+  // For backward compatibility, maintain the original onFieldChange function
+  const onFieldChange = (id: string, val: string, type: string) => {
+    onFieldSetChange(0, id, val, type);
+  };
+
   return html`
     <div>
       ${loading
@@ -231,31 +316,111 @@ const DynamicTypedFields = (props: DynamicFieldsProps) => {
             Loading custom fields...
           </div> `
         : html`
-            ${dynamicItems.map(
-              (el) => html`
-                <div class=${styles.dynamicTypedFieldWrapper} key=${el.id}>
-                  <${MultipurposeField}
-                    id="${el.id}"
-                    title="${el.title}"
-                    placeholder="${dynamicField.placeholder}"
-                    isRequired="${dynamicField.is_required}"
-                    isEditable="${dynamicField.is_editable}"
-                    fieldId=${el.id}
-                    onChange=${(val: any) => {
-                      onFieldChange(el.id, val, el.type || 'string');
-                    }}
-                    value=${customFieldsData[el.id] || ''}
-                    activityOutputData=${activityOutputData}
-                    activityOutputDataRaw=${activityOutputDataRaw}
-                    type=${el.type || 'TEXTFIELD'}
-                    isMappable=${Object.entries(activityOutputData || {})
-                      .length > 0}
-                    allowTagsInText=${true}
-                    isDisabled=${isDisabled}
-                  ><//>
-                </div>
-              `,
-            )}
+            ${isArray
+              ? dynamicItems.length > 0 &&
+                html`
+                  ${fieldSets.map(
+                    (fieldSet, setIndex) => html`
+                      <div
+                        class=${styles.dynamicTypedFieldSetContainer}
+                        key=${`fieldset-${setIndex}`}
+                      >
+                        <div class=${styles.fieldSetHeader}>
+                          <h4>${dynamicField.title} ${setIndex + 1}</h4>
+                          ${setIndex > 0 &&
+                          html`
+                            <button
+                              type="button"
+                              class=${styles.removeButton}
+                              onClick=${() => removeFieldSet(setIndex)}
+                              disabled=${isDisabled}
+                            >
+                              Remove
+                            </button>
+                          `}
+                        </div>
+                        ${dynamicItems.map(
+                          (el) => html`
+                            <div
+                              class=${styles.dynamicTypedFieldWrapper}
+                              key=${`${setIndex}-${el.id}`}
+                            >
+                              <${MultipurposeField}
+                                id="${`${setIndex}_${el.id}`}"
+                                title="${el.title}"
+                                placeholder="${dynamicField.placeholder}"
+                                isRequired="${dynamicField.is_required}"
+                                isEditable="${dynamicField.is_editable}"
+                                fieldId=${`${setIndex}_${el.id}`}
+                                onChange=${(val: any) => {
+                                  onFieldSetChange(
+                                    setIndex,
+                                    el.id,
+                                    val,
+                                    el.type || 'string',
+                                  );
+                                }}
+                                value=${fieldSet[el.id] || ''}
+                                activityOutputData=${activityOutputData}
+                                activityOutputDataRaw=${activityOutputDataRaw}
+                                type=${el.type || 'TEXTFIELD'}
+                                isMappable=${Object.entries(
+                                  activityOutputData || {},
+                                ).length > 0}
+                                allowTagsInText=${true}
+                                isDisabled=${isDisabled}
+                              ><//>
+                            </div>
+                          `,
+                        )}
+                        ${setIndex === fieldSets.length - 1 &&
+                        html`
+                          <div class=${styles.addButtonContainer}>
+                            <button
+                              type="button"
+                              class=${styles.addButton}
+                              onClick=${addNewFieldSet}
+                              disabled=${isDisabled}
+                            >
+                              + Add Another ${dynamicField.title}
+                            </button>
+                          </div>
+                        `}
+                      </div>
+                    `,
+                  )}
+                `
+              : dynamicItems.length > 0 &&
+                html`
+                  ${dynamicItems.map(
+                    (el) => html`
+                      <div
+                        class=${styles.dynamicTypedFieldWrapper}
+                        key=${el.id}
+                      >
+                        <${MultipurposeField}
+                          id="${el.id}"
+                          title="${el.title}"
+                          placeholder="${dynamicField.placeholder}"
+                          isRequired="${dynamicField.is_required}"
+                          isEditable="${dynamicField.is_editable}"
+                          fieldId=${el.id}
+                          onChange=${(val: any) => {
+                            onFieldChange(el.id, val, el.type || 'string');
+                          }}
+                          value=${customFieldsData[el.id] || ''}
+                          activityOutputData=${activityOutputData}
+                          activityOutputDataRaw=${activityOutputDataRaw}
+                          type=${el.type || 'TEXTFIELD'}
+                          isMappable=${Object.entries(activityOutputData || {})
+                            .length > 0}
+                          allowTagsInText=${true}
+                          isDisabled=${isDisabled}
+                        ><//>
+                      </div>
+                    `,
+                  )}
+                `}
           `}
       ${!isErrorOnLoadingCustomFields
         ? ''

package/src/features/common/DynamicTypedField/styles.module.scss

@@ -71,3 +71,65 @@ a.optionsRefresh {
     height: 37px;
   }
 }
+
+// New styles for field sets
+.dynamicTypedFieldSetContainer {
+  margin-bottom: 20px;
+  padding: 15px;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  background-color: #f9f9f9;
+
+  .fieldSetHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #e0e0e0;
+
+    h4 {
+      margin: 0;
+      font-size: 12px;
+      font-weight: 500;
+    }
+  }
+
+  .removeButton {
+    background-color: #f44336;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    padding: 5px 10px;
+    cursor: pointer;
+    font-size: 12px;
+
+    &:hover {
+      background-color: #d32f2f;
+    }
+
+    &:disabled {
+      background-color: #cccccc;
+      cursor: not-allowed;
+    }
+  }
+
+  .addButtonContainer {
+    margin-top: 15px;
+  }
+
+  .addButton {
+    background-color: unset;
+    color: #007bff;
+    border: none;
+    border-radius: 4px;
+    padding: 8px 16px;
+    cursor: pointer;
+    font-size: 12px;
+
+    &:disabled {
+      background-color: #cccccc;
+      cursor: not-allowed;
+    }
+  }
+}