@dartech/arsenal-ui 1.4.0 → 1.4.2

package/index.js

@@ -24,6 +24,7 @@ import Radio from '@mui/material/Radio';
 import RadioGroup from '@mui/material/RadioGroup';
 import FormLabel from '@mui/material/FormLabel';
 import Autocomplete from '@mui/material/Autocomplete';
+import _get from 'lodash/get';
 import { useQuery } from '@tanstack/react-query';
 import qs from 'qs';
 import Tooltip from '@mui/material/Tooltip';
@@ -661,7 +662,7 @@ const useAutocomplete = ({
       if (typeof option === 'string') {
         return option === value;
       } else if (valueKey) {
-        return option[valueKey] === value[valueKey] || option[valueKey] === value;
+        return _get(option, valueKey) === _get(value, valueKey) || _get(option, valueKey) === value;
       } else if (option.value) {
         return option.value === value.value || option.value === value;
       }
@@ -672,8 +673,8 @@ const useAutocomplete = ({
     if (!option) return '';
     if (typeof option === 'string') {
       return option;
-    } else if (labelKey && option[labelKey]) {
-      return option[labelKey] + '';
+    } else if (labelKey && _get(option, labelKey, '')) {
+      return _get(option, labelKey, '') + '';
     } else {
       return option.label + '' || option.name + '' || option.value + '' || option.code + '' || '--no label--';
     }
@@ -745,12 +746,12 @@ const ControlAutocomplete = _a => {
     labelKey
   });
   const handleChange = (_, value) => {
-    onChange(useStringValue ? value[valueKey] : value);
+    onChange(useStringValue ? _get(value, valueKey) : value);
     setLocalValue(value);
   };
   useEffect(() => {
     if (typeof value === 'string' && valueKey && useStringValue && !localValue && options.length && !!options[0] && typeof options[0] === 'object') {
-      setLocalValue(options.find(el => el[valueKey] === value));
+      setLocalValue(options.find(el => _get(el, valueKey) === value));
     } else setLocalValue(value);
   }, [localValue, options, useStringValue, value, valueKey]);
   return jsx(Autocomplete, Object.assign({}, fieldProps, {
@@ -866,11 +867,11 @@ function ControlQueryAutocomplete(_a) {
     if (!isDirty && formValue && itemQueryFunction) {
       let requestValue = formValue;
       if (typeof formValue === 'object' && valueKey in formValue) {
-        requestValue = formValue[valueKey];
+        requestValue = _get(formValue, valueKey);
       }
       itemQueryFunction(requestValue).then(item => {
         setFieldValue(item);
-        setInputValue(item[labelKey]);
+        setInputValue(_get(item, labelKey));
       }).catch();
     }
   }, [formValue, isDirty, valueKey, labelKey, itemQueryFunction, setFieldValue]);
@@ -1626,9 +1627,6 @@ const propertiesArrayToObject = (properties, isGlobalParameter) => {
       name,
       isRequired,
       isMultiple,
-      isVisible,
-      isFillable,
-      isEditable,
       sortOrder,
       isEnabled,
       uiSettings,
@@ -1647,9 +1645,6 @@ const propertiesArrayToObject = (properties, isGlobalParameter) => {
     }, getPropertyValue(Object.assign(Object.assign({}, property), {
       propertyType
     }), isGlobalParameter));
-    if (isVisible !== undefined) resultProperty.isVisible = isVisible;
-    if (isFillable !== undefined) resultProperty.isFillable = isFillable;
-    if (isEditable !== undefined) resultProperty.isEditable = isEditable;
     if ('isViewableInList' in property) {
       resultProperty['isViewableInList'] = property.isViewableInList;
     }
@@ -3378,7 +3373,7 @@ const EntityPropertiesShortView = ({
 };
 var EntityPropertiesShortView$1 = EntityPropertiesShortView;
 
-const defaultPropertyValues$1 = {
+const defaultPropertyValues$2 = {
   key: '',
   propertyType: null,
   name: '',
@@ -3431,11 +3426,11 @@ const EntityAdditionalFields = ({
   const [focusedProperty, setFocusedProperty] = useState(0);
   const handleAddParameter = useCallback(() => {
     if ((properties === null || properties === void 0 ? void 0 : properties.length) > 0) {
-      append(defaultPropertyValues$1);
+      append(defaultPropertyValues$2);
       const propertyIndex = properties.length;
       setFocusedProperty(propertyIndex);
     } else {
-      append(defaultPropertyValues$1);
+      append(defaultPropertyValues$2);
     }
     propsRef.current.addProperty();
   }, [properties, append]);
@@ -5002,8 +4997,6 @@ const CreatePropertyFormFields = /*#__PURE__*/memo(({
   fileReferenceValueComponent
 }) => {
   var _a;
-  // const { control, setValue, watch } = useFormContext();
-  // console.log(propertyFieldName);
   const propertyType = useWatch({
     control,
     name: `${propertyFieldName}.propertyType`
@@ -5150,7 +5143,7 @@ const CreatePropertyFormFields = /*#__PURE__*/memo(({
   }));
 });
 
-const defaultPropertyValues = {
+const defaultPropertyValues$1 = {
   key: '',
   propertyType: null,
   name: '',
@@ -5165,7 +5158,7 @@ const defaultPropertyValues = {
 };
 const CreatePropertiesList = /*#__PURE__*/forwardRef(({
   properties,
-  // parentFieldName,
+  parentFieldName,
   hideAddButton,
   focusOnIndex,
   required,
@@ -5177,10 +5170,6 @@ const CreatePropertiesList = /*#__PURE__*/forwardRef(({
   entityReferenceValueComponent,
   fileReferenceValueComponent
 }, ref) => {
-  // const fieldName = useMemo(
-  //   () => (parentFieldName ? `${parentFieldName}.properties` : `properties`),
-  //   [parentFieldName]
-  // );
   var _a;
   const {
     clearErrors,
@@ -5219,7 +5208,7 @@ const CreatePropertiesList = /*#__PURE__*/forwardRef(({
   });
   const refs = useRef([]);
   const handleAddParameter = useCallback(() => {
-    append(defaultPropertyValues);
+    append(defaultPropertyValues$1);
     clearErrors('properties');
   }, [append, clearErrors]);
   const handleRemoveParameter = useCallback(index => {
@@ -5259,12 +5248,12 @@ const CreatePropertiesList = /*#__PURE__*/forwardRef(({
       }, {
         children: error.message
       }))
-    })), Array.isArray(fields) && fields.map((item, index) => jsx(Grid, Object.assign({
+    })), Array.isArray(fields) && fields.map((item, index, array) => jsx(Grid, Object.assign({
       sm: 12,
       ref: ref => refs.current[index] = ref
     }, {
       children: jsxs(Accordion, Object.assign({
-        defaultExpanded: !(properties === null || properties === void 0 ? void 0 : properties.length),
+        defaultExpanded: index === array.length - 1 && !item.key,
         elevation: 3
       }, {
         children: [jsx(AccordionSummary, Object.assign({
@@ -5320,6 +5309,149 @@ const CreatePropertiesList = /*#__PURE__*/forwardRef(({
   });
 });
 
+const defaultPropertyValues = {
+  key: '',
+  propertyType: null,
+  name: '',
+  defaultValue: '',
+  defaultValues: [],
+  isRequired: true,
+  isMultiple: false,
+  sortOrder: 0,
+  isEnabled: true,
+  executeValue: '',
+  uiSettings: ''
+};
+const CreatePropertiesListContext = ({
+  parentFieldName,
+  hideAddButton,
+  focusOnIndex,
+  required,
+  entityDefinition: _entityDefinition = false,
+  globalParameter: _globalParameter = false,
+  customPropertyFields: _customPropertyFields = [],
+  parentRemove,
+  entityReferenceDefinitionSources,
+  entityReferenceValueComponent,
+  fileReferenceValueComponent
+}) => {
+  var _a;
+  const fieldName = useMemo(() => parentFieldName ? `${parentFieldName}.properties` : `properties`, [parentFieldName]);
+  const {
+    clearErrors,
+    control,
+    setValue
+  } = useFormContext();
+  const {
+    fields,
+    append,
+    remove
+  } = useFieldArray({
+    control,
+    name: fieldName
+  });
+  const {
+    fieldState: {
+      error
+    }
+  } = useController({
+    control,
+    name: fieldName,
+    rules: {
+      validate: val => {
+        if (required && Array.isArray(val) && val.length === 0) return 'Please, fill the properties';
+        return true;
+      }
+    }
+  });
+  // const properties = useWatch({ control, name: fieldName });
+  const refs = useRef([]);
+  const handleAddParameter = useCallback(() => {
+    append(defaultPropertyValues);
+    clearErrors('properties');
+  }, [append, clearErrors]);
+  const handleRemoveParameter = useCallback(index => {
+    if (parentRemove) parentRemove(index);
+    remove(index);
+  }, [parentRemove, remove]);
+  useEffect(() => {
+    if (typeof focusOnIndex === 'number' && refs.current[focusOnIndex]) {
+      refs.current[focusOnIndex].scrollIntoView({
+        behavior: 'smooth',
+        block: 'start'
+      });
+    }
+  }, [focusOnIndex, refs]);
+  return jsxs(Fragment, {
+    children: [error && error.message && jsx(Grid, Object.assign({
+      sm: 12
+    }, {
+      children: jsx(Typography, Object.assign({
+        color: "secondary"
+      }, {
+        children: error.message
+      }))
+    })), Array.isArray(fields) && fields.map((item, index, array) => jsx(Grid, Object.assign({
+      sm: 12,
+      ref: ref => refs.current[index] = ref
+    }, {
+      children: jsxs(Accordion, Object.assign({
+        defaultExpanded: index === array.length - 1 && !item.key,
+        elevation: 3
+      }, {
+        children: [jsx(AccordionSummary, Object.assign({
+          expandIcon: jsx(ExpandMore, {})
+        }, {
+          children: jsx(Typography, Object.assign({
+            color: error && error[index] ? 'secondary' : 'initial',
+            style: {
+              wordBreak: 'break-word'
+            }
+          }, {
+            children: item.name || `Property ${index + 1}`
+          }))
+        })), jsx(AccordionDetails, {
+          children: jsx(CreatePropertyFormFields, {
+            control: control,
+            setValue: setValue,
+            propertyFieldName: `${fieldName}.${index}`,
+            entityDefinition: _entityDefinition,
+            globalParameter: _globalParameter,
+            customPropertyFields: _customPropertyFields,
+            entityReferenceDefinitionSources: entityReferenceDefinitionSources,
+            entityReferenceValueComponent: entityReferenceValueComponent,
+            fileReferenceValueComponent: fileReferenceValueComponent
+          })
+        }), jsx(AccordionActions, {
+          children: jsx(Button, Object.assign({
+            variant: "contained",
+            size: "small",
+            color: "secondary",
+            onClick: () => handleRemoveParameter(index)
+          }, {
+            children: "Remove"
+          }))
+        })]
+      }))
+    }), item.id)), !hideAddButton && jsxs(Grid, Object.assign({
+      xs: 12
+    }, {
+      children: [jsx(Button, Object.assign({
+        variant: "contained",
+        size: "small",
+        color: "primary",
+        onClick: handleAddParameter
+      }, {
+        children: "Add property"
+      })), error && jsx(FormHelperText, Object.assign({
+        error: true
+      }, {
+        children: (_a = error.root) === null || _a === void 0 ? void 0 : _a.message
+      }))]
+    }))]
+  });
+};
+
 const CreateDefinition = /*#__PURE__*/forwardRef(({
   definitionFieldName,
   title,
@@ -5380,7 +5512,7 @@ const CreateDefinition = /*#__PURE__*/forwardRef(({
         name: definitionFieldName ? `${definitionFieldName}.version` : `version`,
         label: "Version"
       })
-    })), jsx(CreatePropertiesList, {
+    })), ref ? jsx(CreatePropertiesList, {
       ref: ref,
       properties: properties,
       required: _required,
@@ -5388,6 +5520,12 @@ const CreateDefinition = /*#__PURE__*/forwardRef(({
       entityReferenceDefinitionSources: entityReferenceDefinitionSources,
       entityReferenceValueComponent: entityReferenceValueComponent,
       fileReferenceValueComponent: fileReferenceValueComponent
+    }) : jsx(CreatePropertiesListContext, {
+      required: _required,
+      parentFieldName: definitionFieldName,
+      entityReferenceDefinitionSources: entityReferenceDefinitionSources,
+      entityReferenceValueComponent: entityReferenceValueComponent,
+      fileReferenceValueComponent: fileReferenceValueComponent
     })]
   }));
 });
@@ -5844,6 +5982,12 @@ const PropertyFiller = ({
       entityReferenceDefinitionSources: entityReferenceDefinitionSources,
       entityReferenceValueComponent: entityReferenceValueComponent,
       fileReferenceValueComponent: fileReferenceValueComponent
+    }), fillOption === 'dem_builder' && jsx(CreateDefinition, {
+      title: "JSON",
+      definitionFieldName: name,
+      entityReferenceDefinitionSources: entityReferenceDefinitionSources,
+      entityReferenceValueComponent: entityReferenceValueComponent,
+      fileReferenceValueComponent: fileReferenceValueComponent
     }), error && jsx(FormHelperText, Object.assign({
       error: true
     }, {
@@ -7512,4 +7656,4 @@ const defaultDefinitionObjectValue = {
   properties: {}
 };
 
-export { AlertDialog, BackButton, Breadcrumbs, ContentLayout, ControlAceEditor, ControlArrayInput, ControlAutocomplete, ControlCheckbox, ControlDate, ControlDateTime, ControlDebouncedInput, ControlInput, ControlNumberInput, ControlPeriodInput, ControlPhoneInput, ControlQueryAutocomplete, ControlRadio, ControlSelect, ControlSwitch, ControlTime, CopyButton, CreateDefinition, CreatePropertiesList, CreatePropertyFormFields, DATE_DEFAULT_FORMAT, DATE_TIME_DEFAULT_FORMAT, DefinitionFiller, DefinitionValueView, InfoItem, JsonModalView, JsonPathPicker, JsonView, Loader, MenuIcon, MultiplePropertyFiller, PropertyFiller, PropertyType, PropertyValueField, RoundingMode, RouteTabs, Sidebar, SimpleTable, Status, StepperView, TIME_DEFAULT_FORMAT, TabPanel, Table, TableAction, TableActionCell, ViewPropertiesList, ViewProperty, capitalize, deepParseJson, defaultDefinitionArrayValue, defaultDefinitionObjectValue, digitsOnly, floatsOnly, formatDefinitionData, formatTableRowValue, getDemPropertyDateFormat, getEntityStarterValue, getJsonStringValue, getMultiplePropertyFillOptions, getSinglePropertyFillOptions, isDateType, isExpression, isPropertyValueEmpty, propertiesArrayToObject, propertiesObjectToArray, removeArrayItem, safeParseJson, sortArrayOfObjects, theme, useDebounce, useToggle, validateJson };
+export { AlertDialog, BackButton, Breadcrumbs, ContentLayout, ControlAceEditor, ControlArrayInput, ControlAutocomplete, ControlCheckbox, ControlDate, ControlDateTime, ControlDebouncedInput, ControlInput, ControlNumberInput, ControlPeriodInput, ControlPhoneInput, ControlQueryAutocomplete, ControlRadio, ControlSelect, ControlSwitch, ControlTime, CopyButton, CreateDefinition, CreatePropertiesList, CreatePropertiesListContext, CreatePropertyFormFields, DATE_DEFAULT_FORMAT, DATE_TIME_DEFAULT_FORMAT, DefinitionFiller, DefinitionValueView, InfoItem, JsonModalView, JsonPathPicker, JsonView, Loader, MenuIcon, MultiplePropertyFiller, PropertyFiller, PropertyType, PropertyValueField, RoundingMode, RouteTabs, Sidebar, SimpleTable, Status, StepperView, TIME_DEFAULT_FORMAT, TabPanel, Table, TableAction, TableActionCell, ViewPropertiesList, ViewProperty, capitalize, deepParseJson, defaultDefinitionArrayValue, defaultDefinitionObjectValue, digitsOnly, floatsOnly, formatDefinitionData, formatTableRowValue, getDemPropertyDateFormat, getEntityStarterValue, getJsonStringValue, getMultiplePropertyFillOptions, getSinglePropertyFillOptions, isDateType, isExpression, isPropertyValueEmpty, propertiesArrayToObject, propertiesObjectToArray, removeArrayItem, safeParseJson, sortArrayOfObjects, theme, useDebounce, useToggle, validateJson };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dartech/arsenal-ui",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "author": "DAR",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -27,6 +27,7 @@
     "classnames": "^2.3.1",
     "@tanstack/react-query": "^4.24.10",
     "@rollup/plugin-node-resolve": "13.3.0",
+    "lodash": "4.17.21",
     "qs": "6.11.0",
     "react-input-mask": "2.0.4"
   },

package/src/interfaces/definition.d.ts

@@ -43,9 +43,6 @@ export interface Property {
     isMultiple: boolean;
     sortOrder: number;
     isEnabled: boolean;
-    isVisible?: boolean;
-    isFillable?: boolean;
-    isEditable?: boolean;
     uiSettings: unknown;
     validationNode: unknown;
     key?: string;

package/src/lib/Definition/CreateDefinition/CreateDefinition.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { type RefMethods } from '../../Property/UpsertProperty/CreatePropertiesList';
+import { type RefMethods } from '../../Property/UpsertProperty';
 import { EntityReferenceProperty } from '../../../interfaces';
 type Props = {
     definitionFieldName?: string;

package/src/lib/Property/UpsertProperty/CreatePropertiesListContext.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { CustomPropertyFieldProps, EntityReferenceProperty } from '../../../interfaces';
+type Props = {
+    parentFieldName?: string;
+    hideAddButton?: boolean;
+    focusOnIndex?: number;
+    required?: boolean;
+    entityDefinition?: boolean;
+    globalParameter?: boolean;
+    customPropertyFields?: CustomPropertyFieldProps[];
+    entityPropFields?: Array<object & {
+        id: string;
+    }>;
+    parentRemove?: (index?: number | number[]) => void;
+    entityReferenceDefinitionSources?: {
+        label: string;
+        value: string;
+    }[];
+    entityReferenceValueComponent?: React.ElementType<{
+        name: string;
+        property: EntityReferenceProperty;
+    }>;
+    fileReferenceValueComponent?: React.ElementType<{
+        name: string;
+    }>;
+};
+export declare const CreatePropertiesListContext: ({ parentFieldName, hideAddButton, focusOnIndex, required, entityDefinition, globalParameter, customPropertyFields, parentRemove, entityReferenceDefinitionSources, entityReferenceValueComponent, fileReferenceValueComponent, }: Props) => JSX.Element;
+export default CreatePropertiesListContext;

package/src/lib/Property/UpsertProperty/index.d.ts

@@ -1,3 +1,4 @@
 export * from './CreatePropertiesList';
+export * from './CreatePropertiesListContext';
 export * from './CreatePropertyFormFields';
 export * from './PropertyValueField';