@irontec/ivoz-ui 1.7.14 → 1.7.16

package/components/List/Filter/ContentFilterSelector/ContentFilterRow.js

@@ -6,9 +6,11 @@ import { memo, useEffect, useMemo, useState } from 'react';
 import { LightButton, TonalButton, } from '../../../../components/shared/Button/Button.styles';
 import { isPropertyFk, isPropertyScalar, } from '../../../../services/api/ParsedApiSpecInterface';
 import { StyledDropdown } from '../../../../services/form/Field/Dropdown/Dropdown.styles';
+import { StyledDynamicAutocomplete } from '../../../../services/form/Field/DynamicAutocomplete/DynamicAutocomplete.styles';
 import { StyledTextField } from '../../../../services/form/Field/TextField/TextField.styles';
 import _ from '../../../../services/translations/translate';
 import FilterIconFactory from '../icons/FilterIconFactory';
+import StoreContainer from '../../../../store/StoreContainer';
 const StyledDropdownMemo = memo(StyledDropdown, (prev, next) => {
     return prev.value === next.value;
 });
@@ -36,19 +38,50 @@ export default function ContentFilterRow(props) {
         setValue(row.value);
     }, [row]);
     const column = columns[name];
-    let enumValue = null;
-    if (isPropertyFk(column)) {
-        enumValue = fkChoices[name] || {};
-    }
-    else if (column.enum) {
-        enumValue = column.enum;
-    }
-    else if (column.type === 'boolean') {
-        enumValue = {
-            true: _('True'),
-            false: _('False'),
+    const [selectOptions, setSelectOptions] = useState(null);
+    const { useDynamicAutocomplete, entityName, enumValue } = useMemo(() => {
+        var _a;
+        let enumVal = null;
+        let useDynamic = false;
+        let entName = '';
+        if (isPropertyFk(column)) {
+            const entities = StoreContainer.store.getState().entities.entities;
+            entName = ((_a = column.$ref) === null || _a === void 0 ? void 0 : _a.replace('#/definitions/', '')) || '';
+            const entity = entities === null || entities === void 0 ? void 0 : entities[entName];
+            if (entity === null || entity === void 0 ? void 0 : entity.dynamicSelectOptions) {
+                useDynamic = true;
+            }
+            else {
+                enumVal = fkChoices[name] || {};
+            }
+        }
+        else if (column.enum) {
+            enumVal = column.enum;
+        }
+        else if (column.type === 'boolean') {
+            enumVal = {
+                true: _('True'),
+                false: _('False'),
+            };
+        }
+        return {
+            useDynamicAutocomplete: useDynamic,
+            entityName: entName,
+            enumValue: enumVal,
         };
-    }
+    }, [column, name, fkChoices]);
+    useEffect(() => {
+        if (!useDynamicAutocomplete || !entityName) {
+            return;
+        }
+        const entities = StoreContainer.store.getState().entities.entities;
+        const entity = entities === null || entities === void 0 ? void 0 : entities[entityName];
+        if (entity === null || entity === void 0 ? void 0 : entity.selectOptions) {
+            entity.selectOptions().then((handler) => {
+                setSelectOptions(() => handler);
+            });
+        }
+    }, [useDynamicAutocomplete, entityName]);
     const columnFormat = isPropertyScalar(column) && column.format;
     let textFieldInputType = 'text';
     const inputProps = {};
@@ -81,13 +114,17 @@ export default function ContentFilterRow(props) {
                     setType(target.value);
                 }, onBlur: () => {
                     /* noop */
-                }, choices: filterChoices, error: false, errorMsg: '', hasChanged: false }), type !== 'exists' && !enumValue && (_jsx(StyledTextField, { name: 'value', value: value, type: textFieldInputType, error: false, errorMsg: '', inputProps: inputProps, InputProps: {}, hasChanged: false, onChange: ({ target }) => {
+                }, choices: filterChoices, error: false, errorMsg: '', hasChanged: false }), type !== 'exists' && !enumValue && !useDynamicAutocomplete && (_jsx(StyledTextField, { name: 'value', value: value, type: textFieldInputType, error: false, errorMsg: '', inputProps: inputProps, InputProps: {}, hasChanged: false, onChange: ({ target }) => {
                     let { value } = target;
                     if (textFieldInputType === 'datetime-local') {
                         value = value.replace('T', ' ');
                     }
                     setValue(value);
-                } })), type !== 'exists' && enumValue && (_jsx(StyledDropdown, { name: 'value', label: '', value: value, required: false, disabled: false, onChange: ({ target }) => {
+                } })), type !== 'exists' && useDynamicAutocomplete && selectOptions && (_jsx(StyledDynamicAutocomplete, { name: 'value', label: '', value: value, choices: {}, multiple: false, required: false, disabled: false, onChange: ({ target }) => {
+                    setValue(target.value);
+                }, onBlur: () => {
+                    /* noop */
+                }, selectOptions: selectOptions, error: false, errorMsg: '', hasChanged: false })), type !== 'exists' && enumValue && !useDynamicAutocomplete && (_jsx(StyledDropdown, { name: 'value', label: '', value: value, required: false, disabled: false, onChange: ({ target }) => {
                     setValue(target.value);
                 }, onBlur: () => {
                     /* noop */

package/components/List/Filter/ContentFilterSelector/ContentFilterRow.styles.js

@@ -5,6 +5,10 @@ export const StyledContentFilterRow = styled(ContentFilterRow)(({ theme }) => {
         display: 'flex',
         alignItems: 'center',
         gap: 'var(--spacing-md)',
+        '& > *:not(button)': {
+            flex: 1,
+            minWidth: 0,
+        },
         [theme.breakpoints.down('md')]: {
             flexDirection: 'column',
             gap: 'var(--spacing-sm)',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@irontec/ivoz-ui",
-  "version": "1.7.14",
+  "version": "1.7.16",
   "description": "UI library used in ivozprovider",
   "license": "GPL-3.0",
   "main": "index.js",

package/services/form/Field/DynamicAutocomplete/DynamicAutocomplete.js

@@ -25,7 +25,11 @@ const DynamicAutocomplete = (props) => {
     const [loading, setLoading] = useState(false);
     const [currentOption, setCurrentOption] = useState(nullOptionObject);
     const debounceTimeoutRef = useRef();
+    const loadedValuesRef = useRef(new Set());
     useEffect(() => {
+        if (selectOptions && Object.keys(choices).length === 0) {
+            return;
+        }
         if (Array.isArray(choices)) {
             setArrayChoices(choices);
             return;
@@ -41,25 +45,27 @@ const DynamicAutocomplete = (props) => {
         if (nullValue) {
             return;
         }
-        if (!choices) {
+        if (!selectOptions) {
             return;
         }
-        const choicesIncludesValue = Array.isArray(choices)
-            ? choices.some((item) => item.id === value)
-            : choices && value in choices;
-        if (choicesIncludesValue) {
+        if (loadedValuesRef.current.has(value)) {
             return;
         }
-        selectOptions === null || selectOptions === void 0 ? void 0 : selectOptions({
+        loadedValuesRef.current.add(value);
+        selectOptions({
             callback: (options) => {
                 const option = options[0];
-                arrayChoices.push(option);
-                setArrayChoices(arrayChoices);
+                if (option) {
+                    setArrayChoices((prev) => {
+                        const exists = prev.some((item) => item.id == option.id);
+                        return exists ? prev : [...prev, option];
+                    });
+                }
             },
         }, {
             id: value,
         });
-    }, []);
+    }, [value, selectOptions]);
     const setOptions = useCallback((options) => {
         const isCurrentOptionIncluded = options.some((option) => option.id == (currentOption === null || currentOption === void 0 ? void 0 : currentOption.id));
         if (!isCurrentOptionIncluded &&
@@ -209,7 +215,7 @@ const DynamicAutocomplete = (props) => {
     const disableClearable = arrayChoices.find((item) => item.id === '__null__')
         ? false
         : true;
-    const safeValue = arrayChoices.find((item) => item.id === value)
+    const safeValue = arrayChoices.find((item) => item.id == value)
         ? value
         : null;
     return (_jsx(MuiAutocomplete, { className: 'dynamic-autocomplete' + className, value: safeValue, multiple: multiple, disabled: disabled, disableClearable: disableClearable, onChange: onChangeWrapper, onBlur: onBlur, onInputChange: handleInputChange, options: arrayChoices !== null && arrayChoices !== void 0 ? arrayChoices : [], getOptionLabel: getOptionLabel, isOptionEqualToValue: isOptionEqualToValue, loading: loading, placeholder: props.placeholder, renderInput: renderInput, PaperComponent: CustomOption, renderOption: (props, option) => (_jsx(Box, Object.assign({ component: 'li', className: 'autocomplete-option', "data-value": option.id }, props, { children: option.label }))) }));

package/services/form/Field/TextField/TextField.styles.js

@@ -103,6 +103,7 @@ export const StyledAutocompleteTextField = styled(StyledTextField)(() => {
     return {
         '& .input-field': {
             paddingLeft: '9px',
+            maxHeight: '25px',
         },
     };
 });