@irontec/ivoz-ui 1.7.12 → 1.7.13

package/components/Dashboard/Dashboard.js

@@ -10,12 +10,12 @@ const Dashboard = (props) => {
         return { name, platform, dLicences, mLicenses };
     }
     const rows = [
-        createData('Acies Abogados', 'IvozProvider Irontec', 10, 8),
-        createData('Ayuntamiento Bilbao', 'IvozProvider Irontec', 10, 8),
-        createData('BicBerrilan', 'IvozProvider Irontec', 10, 8),
-        createData('CaritasSoria', 'IvozProvider Irontec', 10, 8),
+        createData('Client 1', 'Platform A', 5, 3),
+        createData('Client 2', 'Platform B', 8, 2),
+        createData('Client 3', 'Platform C', 4, 6),
+        createData('Client 4', 'Platform D', 7, 1),
     ];
-    return (_jsxs("section", Object.assign({ className: className }, { children: [_jsx("div", Object.assign({ className: 'card welcome' }, { children: _jsxs("div", Object.assign({ className: 'card-container' }, { children: [_jsxs("div", { children: [_jsxs("h3", { children: ["Welcome to ", _jsx("br", {}), " Advanced Provisioning System"] }), _jsx("p", { children: "APS is an Open Source solution by Irontec. Add platforms, manage clients, assign license to VoIP users and much more." }), _jsx(LightButton, { children: "Get started" })] }), _jsx("img", { src: 'assets/img/dashboard-welcome.svg' })] })) })), _jsxs("div", Object.assign({ className: 'card activity' }, { children: [_jsx("div", Object.assign({ className: 'title' }, { children: "Recent activity" })), _jsxs("div", Object.assign({ className: 'content' }, { children: [_jsxs("div", Object.assign({ className: 'row' }, { children: [_jsx("div", Object.assign({ className: 'time' }, { children: "5m" })), _jsx("div", Object.assign({ className: 'value' }, { children: "Login (Antonio)" }))] })), _jsxs("div", Object.assign({ className: 'row' }, { children: [_jsx("div", Object.assign({ className: 'time' }, { children: "30m" })), _jsx("div", Object.assign({ className: 'value' }, { children: "New admin added (Mikel)" }))] })), _jsxs("div", Object.assign({ className: 'row' }, { children: [_jsx("div", Object.assign({ className: 'time' }, { children: "6h" })), _jsx("div", Object.assign({ className: 'value' }, { children: "Login (Mikel)" }))] })), _jsxs("div", Object.assign({ className: 'row' }, { children: [_jsx("div", Object.assign({ className: 'time' }, { children: "1d" })), _jsx("div", Object.assign({ className: 'value' }, { children: "10 new licenses assigned (Carlos)" }))] })), _jsxs("div", Object.assign({ className: 'row' }, { children: [_jsx("div", Object.assign({ className: 'time' }, { children: "1d" })), _jsx("div", Object.assign({ className: 'value' }, { children: "New client added (Carlos)" }))] }))] }))] })), _jsxs("div", Object.assign({ className: 'card amount' }, { children: [_jsx("div", Object.assign({ className: 'img-container' }, { children: _jsx(IconPlatformsDashboard, {}) })), _jsx("div", Object.assign({ className: 'number' }, { children: "5" })), _jsx("div", Object.assign({ className: 'name' }, { children: "Platforms" })), _jsxs("div", Object.assign({ className: 'progress' }, { children: [_jsx("span", { children: "+ 0" }), _jsx("img", { src: 'assets/img/same.svg' })] })), _jsx("a", Object.assign({ href: '', className: 'link' }, { children: "Go to platforms" }))] })), _jsxs("div", Object.assign({ className: 'card amount' }, { children: [_jsx("div", Object.assign({ className: 'img-container' }, { children: _jsx(IconClientsDashboard, {}) })), _jsx("div", Object.assign({ className: 'number' }, { children: "120" })), _jsx("div", Object.assign({ className: 'name' }, { children: "Clients" })), _jsxs("div", Object.assign({ className: 'progress' }, { children: [_jsx("span", { children: "+ 3" }), _jsx("img", { src: 'assets/img/up.svg' })] })), _jsx("a", Object.assign({ href: '', className: 'link' }, { children: "Go to clients" }))] })), _jsxs("div", Object.assign({ className: 'card amount' }, { children: [_jsx("div", Object.assign({ className: 'img-container' }, { children: _jsx(IconUsersDashboard, {}) })), _jsx("div", Object.assign({ className: 'number' }, { children: "1264" })), _jsx("div", Object.assign({ className: 'name' }, { children: "Users" })), _jsxs("div", Object.assign({ className: 'progress' }, { children: [_jsx("span", { children: "- 15" }), _jsx("img", { src: 'assets/img/down.svg' })] })), _jsx("a", Object.assign({ href: '', className: 'link' }, { children: "Go to users" }))] })), _jsxs("div", Object.assign({ className: 'card licenses' }, { children: [_jsx("div", Object.assign({ className: 'title' }, { children: "Licenses" })), _jsxs("div", Object.assign({ className: 'radial' }, { children: [_jsx("div", { className: 'circle' }), _jsxs("div", Object.assign({ className: 'data' }, { children: [_jsx("div", Object.assign({ className: 'total' }, { children: "Total" })), _jsx("div", Object.assign({ className: 'number' }, { children: "1632" }))] }))] })), _jsxs("div", Object.assign({ className: 'legend' }, { children: [_jsxs("div", Object.assign({ className: 'label' }, { children: [_jsx("div", { className: 'color orange' }), _jsx("div", Object.assign({ className: 'text' }, { children: "Desktop" }))] })), _jsxs("div", Object.assign({ className: 'label' }, { children: [_jsx("div", { className: 'color red' }), _jsx("div", Object.assign({ className: 'text' }, { children: "Mobile" }))] }))] }))] })), _jsxs("div", Object.assign({ className: 'card last' }, { children: [_jsxs("div", Object.assign({ className: 'header' }, { children: [_jsx("div", Object.assign({ className: 'title' }, { children: "Last added clients" })), _jsx(SolidButton, { children: "+ Add" })] })), _jsx("div", Object.assign({ className: 'table' }, { children: _jsx(TableContainer, Object.assign({ component: Paper, sx: { boxShadow: 'none' } }, { children: _jsxs(Table, Object.assign({ sx: { minWidth: 650 }, "aria-label": 'simple table' }, { children: [_jsx(TableHead, { children: _jsxs(TableRow, Object.assign({ style: { fontSize: '13px' } }, { children: [_jsx(TableCell, Object.assign({ style: { fontSize: '13px', color: 'var(--color-text)' } }, { children: "Name" })), _jsx(TableCell, Object.assign({ style: { fontSize: '13px', color: 'var(--color-text)' } }, { children: "Platform" })), _jsx(TableCell, Object.assign({ style: { fontSize: '13px', color: 'var(--color-text)' } }, { children: "Desktop licenses" })), _jsx(TableCell, Object.assign({ style: { fontSize: '13px', color: 'var(--color-text)' } }, { children: "Mobile licenses" }))] })) }), _jsx(TableBody, { children: rows.map((row) => (_jsxs(TableRow, Object.assign({ sx: { '&:last-child td, &:last-child th': { border: 0 } } }, { children: [_jsx(TableCell, Object.assign({ component: 'th', scope: 'row' }, { children: row.name })), _jsx(TableCell, { children: row.platform }), _jsx(TableCell, { children: row.dLicences }), _jsx(TableCell, { children: row.mLicenses })] }), row.name))) })] })) })) }))] }))] })));
+    return (_jsxs("section", Object.assign({ className: className }, { children: [_jsx("div", Object.assign({ className: 'card welcome' }, { children: _jsxs("div", Object.assign({ className: 'card-container' }, { children: [_jsxs("div", { children: [_jsxs("h3", { children: ["Welcome to ", _jsx("br", {}), " Demo System"] }), _jsx("p", { children: "This is a demo. Add platforms, manage clients, assign licenses and more." }), _jsx(LightButton, { children: "Get started" })] }), _jsx("img", { src: 'assets/img/dashboard-welcome.svg' })] })) })), _jsxs("div", Object.assign({ className: 'card activity' }, { children: [_jsx("div", Object.assign({ className: 'title' }, { children: "Recent activity" })), _jsxs("div", Object.assign({ className: 'content' }, { children: [_jsxs("div", Object.assign({ className: 'row' }, { children: [_jsx("div", Object.assign({ className: 'time' }, { children: "5m" })), _jsx("div", Object.assign({ className: 'value' }, { children: "Login (User1)" }))] })), _jsxs("div", Object.assign({ className: 'row' }, { children: [_jsx("div", Object.assign({ className: 'time' }, { children: "30m" })), _jsx("div", Object.assign({ className: 'value' }, { children: "New admin added (User2)" }))] })), _jsxs("div", Object.assign({ className: 'row' }, { children: [_jsx("div", Object.assign({ className: 'time' }, { children: "6h" })), _jsx("div", Object.assign({ className: 'value' }, { children: "Login (User2)" }))] })), _jsxs("div", Object.assign({ className: 'row' }, { children: [_jsx("div", Object.assign({ className: 'time' }, { children: "1d" })), _jsx("div", Object.assign({ className: 'value' }, { children: "10 licenses assigned (User3)" }))] })), _jsxs("div", Object.assign({ className: 'row' }, { children: [_jsx("div", Object.assign({ className: 'time' }, { children: "1d" })), _jsx("div", Object.assign({ className: 'value' }, { children: "New client added (User3)" }))] }))] }))] })), _jsxs("div", Object.assign({ className: 'card amount' }, { children: [_jsx("div", Object.assign({ className: 'img-container' }, { children: _jsx(IconPlatformsDashboard, {}) })), _jsx("div", Object.assign({ className: 'number' }, { children: "4" })), _jsx("div", Object.assign({ className: 'name' }, { children: "Platforms" })), _jsxs("div", Object.assign({ className: 'progress' }, { children: [_jsx("span", { children: "+ 0" }), _jsx("img", { src: 'assets/img/same.svg' })] })), _jsx("a", Object.assign({ href: '', className: 'link' }, { children: "View platforms" }))] })), _jsxs("div", Object.assign({ className: 'card amount' }, { children: [_jsx("div", Object.assign({ className: 'img-container' }, { children: _jsx(IconClientsDashboard, {}) })), _jsx("div", Object.assign({ className: 'number' }, { children: "20" })), _jsx("div", Object.assign({ className: 'name' }, { children: "Clients" })), _jsxs("div", Object.assign({ className: 'progress' }, { children: [_jsx("span", { children: "+ 1" }), _jsx("img", { src: 'assets/img/up.svg' })] })), _jsx("a", Object.assign({ href: '', className: 'link' }, { children: "View clients" }))] })), _jsxs("div", Object.assign({ className: 'card amount' }, { children: [_jsx("div", Object.assign({ className: 'img-container' }, { children: _jsx(IconUsersDashboard, {}) })), _jsx("div", Object.assign({ className: 'number' }, { children: "100" })), _jsx("div", Object.assign({ className: 'name' }, { children: "Users" })), _jsxs("div", Object.assign({ className: 'progress' }, { children: [_jsx("span", { children: "- 2" }), _jsx("img", { src: 'assets/img/down.svg' })] })), _jsx("a", Object.assign({ href: '', className: 'link' }, { children: "View users" }))] })), _jsxs("div", Object.assign({ className: 'card licenses' }, { children: [_jsx("div", Object.assign({ className: 'title' }, { children: "Licenses" })), _jsxs("div", Object.assign({ className: 'radial' }, { children: [_jsx("div", { className: 'circle' }), _jsxs("div", Object.assign({ className: 'data' }, { children: [_jsx("div", Object.assign({ className: 'total' }, { children: "Total" })), _jsx("div", Object.assign({ className: 'number' }, { children: "120" }))] }))] })), _jsxs("div", Object.assign({ className: 'legend' }, { children: [_jsxs("div", Object.assign({ className: 'label' }, { children: [_jsx("div", { className: 'color orange' }), _jsx("div", Object.assign({ className: 'text' }, { children: "Desktop" }))] })), _jsxs("div", Object.assign({ className: 'label' }, { children: [_jsx("div", { className: 'color red' }), _jsx("div", Object.assign({ className: 'text' }, { children: "Mobile" }))] }))] }))] })), _jsxs("div", Object.assign({ className: 'card last' }, { children: [_jsxs("div", Object.assign({ className: 'header' }, { children: [_jsx("div", Object.assign({ className: 'title' }, { children: "Last added clients" })), _jsx(SolidButton, { children: "+ Add" })] })), _jsx("div", Object.assign({ className: 'table' }, { children: _jsx(TableContainer, Object.assign({ component: Paper, sx: { boxShadow: 'none' } }, { children: _jsxs(Table, Object.assign({ sx: { minWidth: 650 }, "aria-label": 'simple table' }, { children: [_jsx(TableHead, { children: _jsxs(TableRow, Object.assign({ style: { fontSize: '13px' } }, { children: [_jsx(TableCell, Object.assign({ style: { fontSize: '13px', color: 'var(--color-text)' } }, { children: "Name" })), _jsx(TableCell, Object.assign({ style: { fontSize: '13px', color: 'var(--color-text)' } }, { children: "Platform" })), _jsx(TableCell, Object.assign({ style: { fontSize: '13px', color: 'var(--color-text)' } }, { children: "Desktop licenses" })), _jsx(TableCell, Object.assign({ style: { fontSize: '13px', color: 'var(--color-text)' } }, { children: "Mobile licenses" }))] })) }), _jsx(TableBody, { children: rows.map((row) => (_jsxs(TableRow, Object.assign({ sx: { '&:last-child td, &:last-child th': { border: 0 } } }, { children: [_jsx(TableCell, Object.assign({ component: 'th', scope: 'row' }, { children: row.name })), _jsx(TableCell, { children: row.platform }), _jsx(TableCell, { children: row.dLicences }), _jsx(TableCell, { children: row.mLicenses })] }), row.name))) })] })) })) }))] }))] })));
 };
 export default styled(Dashboard)(({ theme }) => {
     return {

package/components/shared/ConfirmDialog.styles.d.ts

@@ -10,8 +10,8 @@ export declare const StyledDialogContentText: import("@emotion/styled").StyledCo
     noWrap?: boolean | undefined;
     paragraph?: boolean | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | undefined;
-    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline", string>> | undefined;
+    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2" | undefined;
+    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2", string>> | undefined;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
 }, "children" | keyof import("@mui/material/OverridableComponent").CommonProps | "sx" | "variant" | "align" | ("color" | "p" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "noWrap" | "gutterBottom" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/entities/EntityInterface.d.ts

@@ -47,6 +47,10 @@ export declare type SelectOptionsArgs = {
     callback: FetchFksCallback;
     cancelToken?: CancelToken;
 };
+export declare type DynamicSelectOptionsArgs = {
+    searchTerm?: string;
+    id?: string;
+};
 export declare type SelectOptionsType<T = any> = (props: SelectOptionsArgs, customProps?: T) => Promise<unknown>;
 export declare type EntityAclType = {
     iden?: string;
@@ -90,6 +94,7 @@ export default interface EntityInterface {
     foreignKeyResolver: () => Promise<foreignKeyResolverType>;
     foreignKeyGetter: () => Promise<ForeignKeyGetterType>;
     selectOptions?: () => Promise<SelectOptionsType>;
+    dynamicSelectOptions?: boolean;
     Form: () => Promise<React.FunctionComponent<EntityFormProps>>;
     View: () => Promise<ViewType>;
     List: React.FunctionComponent<ListContentProps>;

package/helpers/fetchFilteredPage.d.ts

@@ -0,0 +1,9 @@
+import { CancelToken } from 'axios';
+import { FetchFksCallback } from '../entities/EntityInterface';
+export declare type fetchFilteredPageProps = {
+    endpoint: string;
+    params: Record<string, unknown>;
+    setter: FetchFksCallback;
+    cancelToken?: CancelToken;
+};
+export declare const fetchFilteredPage: (props: fetchFilteredPageProps) => Promise<unknown>;

package/helpers/fetchFilteredPage.js

@@ -0,0 +1,31 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { StoreContainer } from '../store';
+export const fetchFilteredPage = (props) => __awaiter(void 0, void 0, void 0, function* () {
+    const { endpoint, params, setter, cancelToken } = props;
+    const getAction = StoreContainer.store.getActions().api.get;
+    const response = [];
+    try {
+        yield getAction({
+            path: endpoint,
+            silenceErrors: false,
+            params: Object.assign(Object.assign({ _itemsPerPage: 20 }, params), { _pagination: true, _page: 1 }),
+            successCallback: (data) => __awaiter(void 0, void 0, void 0, function* () {
+                response.push(...data);
+            }),
+            cancelToken,
+        });
+    }
+    catch (error) {
+        console.error(error);
+    }
+    setter(response);
+    return response;
+});

package/helpers/index.d.ts

@@ -0,0 +1,2 @@
+export * from './fechAllPages';
+export * from './fetchFilteredPage';

package/helpers/index.js

@@ -0,0 +1,2 @@
+export * from './fechAllPages';
+export * from './fetchFilteredPage';

package/index.d.ts

@@ -1,5 +1,6 @@
 export * from './components';
 export * from './entities';
+export * from './helpers';
 export * from './hooks';
 export * from './router';
 export * from './services';

package/index.js

@@ -1,5 +1,6 @@
 export * from './components';
 export * from './entities';
+export * from './helpers';
 export * from './hooks';
 export * from './router';
 export * from './services';

package/package.json

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

package/services/form/Field/DynamicAutocomplete/DynamicAutocomplete.d.ts

@@ -0,0 +1,25 @@
+import { InputProps } from '@mui/material';
+import React, { JSXElementConstructor, ReactElement } from 'react';
+import { SelectOptionsType } from 'entities/EntityInterface';
+import { FormOnChangeEvent } from 'entities/DefaultEntityBehavior/Form/Form';
+export interface DynamicAutocompleteProps {
+    selectOptions: (() => Promise<SelectOptionsType>) | undefined;
+    nullOption?: string | React.ReactElement<any>;
+    className?: string;
+    name: string;
+    label: string | ReactElement<any, string | JSXElementConstructor<any>>;
+    placeholder?: string;
+    value: any;
+    multiple: boolean;
+    required: boolean;
+    disabled: boolean;
+    onBlur: (event: React.FocusEvent) => void;
+    error?: boolean;
+    errorMsg?: React.ReactNode;
+    helperText?: string | React.ReactNode;
+    hasChanged: boolean;
+    InputProps?: Partial<InputProps>;
+    onChange: (event: FormOnChangeEvent) => void;
+}
+declare const DynamicAutocomplete: (props: DynamicAutocompleteProps) => JSX.Element | null;
+export default DynamicAutocomplete;

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

@@ -0,0 +1,194 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Paper, Typography } from '@mui/material';
+import MuiAutocomplete from '@mui/material/Autocomplete';
+import { useCallback, useEffect, useState, useRef, } from 'react';
+import { useTranslation } from 'react-i18next';
+import { StyledAutocompleteTextField } from '../TextField';
+import SearchIcon from '@mui/icons-material/Search';
+const DynamicAutocomplete = (props) => {
+    var _a;
+    const { nullOption, name, label, required, multiple, disabled, onBlur, error, errorMsg, helperText, hasChanged, value, selectOptions, onChange, } = props;
+    const { t } = useTranslation();
+    let className = props.className;
+    if (hasChanged) {
+        className += ' changed';
+    }
+    if (multiple) {
+        className += ' multiselect';
+    }
+    const nullOptionObject = nullOption
+        ? { id: '__null__', label: nullOption }
+        : null;
+    const [arrayChoices, setArrayChoices] = useState(nullOptionObject ? [nullOptionObject] : []);
+    const [searchTerm, setSearchTerm] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [open, setOpen] = useState(false);
+    const [currentOption, setCurrentOption] = useState(nullOptionObject);
+    const debounceTimeoutRef = useRef();
+    const setOptions = useCallback((options) => {
+        const isCurrentOptionIncluded = options.some((option) => option.id == (currentOption === null || currentOption === void 0 ? void 0 : currentOption.id));
+        if (!isCurrentOptionIncluded &&
+            currentOption &&
+            currentOption.id !== '__null__') {
+            options.unshift(currentOption);
+        }
+        if (nullOptionObject) {
+            options.unshift(nullOptionObject);
+        }
+        console.log('setOptions', options);
+        setArrayChoices(options);
+    }, [nullOptionObject, currentOption]);
+    useEffect(() => {
+        const hasOptions = arrayChoices.some((option) => option.id !== '__null__');
+        if (hasOptions) {
+            return;
+        }
+        const searchParams = {};
+        if (value) {
+            searchParams.id = value;
+        }
+        selectOptions === null || selectOptions === void 0 ? void 0 : selectOptions().then((selectOptions) => {
+            selectOptions({
+                callback: (options) => {
+                    if (options.length > 0) {
+                        setOptions(options);
+                    }
+                },
+            }, searchParams);
+        });
+    }, []);
+    useEffect(() => {
+        if (!selectOptions) {
+            return;
+        }
+        if (debounceTimeoutRef.current) {
+            clearTimeout(debounceTimeoutRef.current);
+        }
+        const searchTermMatchNullOption = getOptionLabel(nullOptionObject) === searchTerm;
+        if (searchTermMatchNullOption) {
+            return;
+        }
+        const isSearchTermIncluded = arrayChoices === null || arrayChoices === void 0 ? void 0 : arrayChoices.some((option) => getOptionLabel(option).includes(searchTerm));
+        if (isSearchTermIncluded) {
+            return;
+        }
+        setLoading(true);
+        debounceTimeoutRef.current = setTimeout(() => {
+            selectOptions().then((selectOptions) => {
+                selectOptions({
+                    callback: (options) => {
+                        setLoading(false);
+                        setOptions(options);
+                    },
+                }, {
+                    searchTerm: searchTerm,
+                });
+            });
+        }, 500);
+    }, [searchTerm, selectOptions]);
+    const handleInputChange = useCallback((e, value, reason) => {
+        console.log('inputChange', arrayChoices);
+        if (reason === 'clear') {
+            setSearchTerm('');
+            return;
+        }
+        if (reason === 'input') {
+            setSearchTerm(value);
+            return;
+        }
+        if (reason === 'reset') {
+            if (arrayChoices.length === 0) {
+                setSearchTerm('');
+            }
+        }
+    }, []);
+    const onChangeWrapper = useCallback((e, option, reason) => {
+        let selectedValue = undefined;
+        if (reason !== 'clear' && option !== null) {
+            selectedValue = multiple
+                ? option.map((item) => typeof item === 'object' ? item.id : item)
+                : option.id;
+        }
+        else if (reason === 'clear') {
+            selectedValue = '';
+        }
+        else {
+            selectedValue = (arrayChoices === null || arrayChoices === void 0 ? void 0 : arrayChoices.find((item) => item.id === '__null__'))
+                ? '__null__'
+                : null;
+        }
+        setCurrentOption(option);
+        onChange({
+            target: {
+                name: name,
+                value: selectedValue,
+            },
+        });
+    }, [multiple, onChange, name, arrayChoices]);
+    const getOptionLabel = useCallback((value) => {
+        var _a, _b, _c, _d, _e, _f;
+        if (typeof value !== 'object') {
+            value = arrayChoices === null || arrayChoices === void 0 ? void 0 : arrayChoices.find((option) => option.id == value);
+        }
+        const isTranslation = (value === null || value === void 0 ? void 0 : value.label) &&
+            typeof value.label === 'object' &&
+            ((_b = (_a = value.label) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.defaults) &&
+            typeof ((_d = (_c = value.label) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.defaults) === 'string';
+        if (isTranslation) {
+            const translatableText = (_f = (_e = value.label) === null || _e === void 0 ? void 0 : _e.props) === null || _f === void 0 ? void 0 : _f.defaults;
+            return t(translatableText);
+        }
+        return (value === null || value === void 0 ? void 0 : value.label) || '';
+    }, [arrayChoices, t]);
+    const isOptionEqualToValue = useCallback((option, value) => {
+        if (value === (currentOption === null || currentOption === void 0 ? void 0 : currentOption.id)) {
+            return true;
+        }
+        if ((option === null || option === void 0 ? void 0 : option.id) == value) {
+            return true;
+        }
+        if ((option === null || option === void 0 ? void 0 : option.id) == value.id) {
+            return true;
+        }
+        return false;
+    }, []);
+    const arrayChoicesLength = (_a = arrayChoices === null || arrayChoices === void 0 ? void 0 : arrayChoices.length) !== null && _a !== void 0 ? _a : 0;
+    const renderInput = useCallback((props) => {
+        const inputProps = Object.assign(Object.assign({}, props.InputProps), { notched: true });
+        const showPlaceholder = !searchTerm && !loading;
+        const inputPlaceholder = showPlaceholder
+            ? t('Type to search')
+            : props.placeholder;
+        return (_jsx(StyledAutocompleteTextField, Object.assign({}, props, { name: name, label: label, required: required, disabled: disabled, InputProps: inputProps, InputLabelProps: { shrink: true, required: required }, error: error, errorMsg: errorMsg, helperText: helperText, placeholder: inputPlaceholder })));
+    }, [
+        name,
+        label,
+        required,
+        disabled,
+        error,
+        errorMsg,
+        helperText,
+        arrayChoicesLength,
+        searchTerm,
+        loading,
+    ]);
+    const dropdownHelperText = 'Type to load more options';
+    const CustomOption = useCallback((props) => {
+        return (_jsxs(Paper, Object.assign({}, props, { children: [props.children, dropdownHelperText && (_jsxs(Box, Object.assign({ sx: {
+                        p: 2,
+                        borderTop: '1px solid',
+                        borderColor: 'divider',
+                        backgroundColor: 'var(--color-background)',
+                        color: 'var(--color-text)',
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '4px',
+                    } }, { children: [_jsx(SearchIcon, { sx: { fontSize: '18px' } }), _jsx(Typography, Object.assign({ variant: 'caption' }, { children: t(dropdownHelperText) }))] })))] })));
+    }, [dropdownHelperText]);
+    const disableClearable = arrayChoices.find((item) => item.id === '__null__')
+        ? false
+        : true;
+    const safeValue = value.length !== '' ? value : null;
+    return (_jsx(MuiAutocomplete, { className: 'dynamic-autocomplete' + className, value: safeValue, multiple: multiple, disabled: disabled, disableClearable: disableClearable, onChange: onChangeWrapper, onBlur: onBlur, onInputChange: handleInputChange, onClose: () => setOpen(false), onOpen: () => setOpen(true), 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 }))) }));
+};
+export default DynamicAutocomplete;

package/services/form/Field/DynamicAutocomplete/DynamicAutocomplete.styles.d.ts

@@ -0,0 +1 @@
+export declare const StyledDynamicAutocomplete: import("@emotion/styled").StyledComponent<import("./DynamicAutocomplete").DynamicAutocompleteProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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

@@ -0,0 +1,6 @@
+import { styled } from '@mui/material';
+import DynamicAutocomplete from './DynamicAutocomplete';
+const TextFieldBaseStyles = () => {
+    return {};
+};
+export const StyledDynamicAutocomplete = styled(DynamicAutocomplete)(TextFieldBaseStyles);

package/services/form/Field/DynamicAutocomplete/index.d.ts

@@ -0,0 +1,2 @@
+import { StyledDynamicAutocomplete } from './DynamicAutocomplete.styles';
+export { StyledDynamicAutocomplete as DynamicAutocomplete };

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

@@ -0,0 +1,2 @@
+import { StyledDynamicAutocomplete } from './DynamicAutocomplete.styles';
+export { StyledDynamicAutocomplete as DynamicAutocomplete };

package/services/form/Field/index.d.ts

@@ -1,4 +1,5 @@
 export * from './FileUploader';
+export * from './DynamicAutocomplete';
 export * from './Autocomplete';
 export * from './CustomComponentWrapper.styles';
 export * from './CustomComponentWrapper';

package/services/form/Field/index.js

@@ -1,4 +1,5 @@
 export * from './FileUploader';
+export * from './DynamicAutocomplete';
 export * from './Autocomplete';
 export * from './CustomComponentWrapper.styles';
 export * from './CustomComponentWrapper';

package/services/form/FormFieldFactory/Factory/DynamicAutocompleteFactory.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { PropertySpec } from '../../../api';
+import { ScalarEntityValue } from '../../../entity';
+import { NullableFormFieldFactoryChoices } from '../FormFieldFactory';
+import { SelectOptionsType } from 'entities/EntityInterface';
+import { FormOnChangeEvent } from 'entities/DefaultEntityBehavior/Form/Form';
+declare type DynamicAutocompleteFactoryPropsType = {
+    fld: string;
+    property: PropertySpec;
+    disabled: boolean;
+    multiSelect: boolean;
+    value: ScalarEntityValue | Array<ScalarEntityValue>;
+    hasChanged: boolean;
+    error: React.ReactNode;
+    touched: boolean | undefined;
+    changeHandler: (event: FormOnChangeEvent) => void;
+    choices: NullableFormFieldFactoryChoices;
+    handleBlur: (event: React.FocusEvent) => void;
+    selectOptions: (() => Promise<SelectOptionsType>) | undefined;
+};
+export declare const DynamicAutocompleteFactory: (props: DynamicAutocompleteFactoryPropsType) => JSX.Element;
+export {};

package/services/form/FormFieldFactory/Factory/DynamicAutocompleteFactory.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DynamicAutocomplete } from '../../Field/DynamicAutocomplete';
+export const DynamicAutocompleteFactory = (props) => {
+    const { selectOptions, fld, disabled, multiSelect, value, hasChanged, error, touched, property, changeHandler, handleBlur, } = props;
+    return (_jsx(DynamicAutocomplete, { name: fld, label: property.label, value: value, multiple: multiSelect, nullOption: property.null, required: property.required, disabled: disabled, onBlur: handleBlur, error: touched && Boolean(error), errorMsg: touched && error, helperText: property.helpText, hasChanged: hasChanged, onChange: changeHandler, selectOptions: selectOptions }));
+};

package/services/form/FormFieldFactory/Factory/index.d.ts

@@ -1,3 +1,4 @@
+import { DynamicAutocompleteFactory } from './DynamicAutocompleteFactory';
 import { AutocompleteFactory } from './AutocompleteFactory';
 import { DateFactory } from './DateFactory';
 import { DateTimeFactory } from './DateTimeFactory';
@@ -11,4 +12,4 @@ import { SwitchFactory } from './SwitchFactory';
 import { TextareaFactory } from './TextareaFactory';
 import { TimeFactory } from './TimeFactory';
 import { ColorFactory } from './ColorFactory';
-export { AutocompleteFactory, DateFactory, DateTimeFactory, DropdownFactory, FileUploadFactory, InputTextFactory, MultilangFactory, NumberFactory, PasswordFactory, SwitchFactory, TextareaFactory, TimeFactory, ColorFactory, };
+export { DynamicAutocompleteFactory, AutocompleteFactory, DateFactory, DateTimeFactory, DropdownFactory, FileUploadFactory, InputTextFactory, MultilangFactory, NumberFactory, PasswordFactory, SwitchFactory, TextareaFactory, TimeFactory, ColorFactory, };

package/services/form/FormFieldFactory/Factory/index.js

@@ -1,3 +1,4 @@
+import { DynamicAutocompleteFactory } from './DynamicAutocompleteFactory';
 import { AutocompleteFactory } from './AutocompleteFactory';
 import { DateFactory } from './DateFactory';
 import { DateTimeFactory } from './DateTimeFactory';
@@ -11,4 +12,4 @@ import { SwitchFactory } from './SwitchFactory';
 import { TextareaFactory } from './TextareaFactory';
 import { TimeFactory } from './TimeFactory';
 import { ColorFactory } from './ColorFactory';
-export { AutocompleteFactory, DateFactory, DateTimeFactory, DropdownFactory, FileUploadFactory, InputTextFactory, MultilangFactory, NumberFactory, PasswordFactory, SwitchFactory, TextareaFactory, TimeFactory, ColorFactory, };
+export { DynamicAutocompleteFactory, AutocompleteFactory, DateFactory, DateTimeFactory, DropdownFactory, FileUploadFactory, InputTextFactory, MultilangFactory, NumberFactory, PasswordFactory, SwitchFactory, TextareaFactory, TimeFactory, ColorFactory, };

package/services/form/FormFieldFactory/FormFieldFactory.d.ts

@@ -12,6 +12,7 @@ export default class FormFieldFactory {
     private handleBlur;
     private divRef?;
     constructor(entityService: EntityService, formik: useFormikType, changeHandler: (event: FormOnChangeEvent) => void, handleBlur: (event: React.FocusEvent) => void, divRef?: React.RefObject<HTMLDivElement> | undefined);
+    private getDynamicSelectOptions;
     getFormField(fld: string, choices: NullableFormFieldFactoryChoices, readOnly?: boolean): JSX.Element | null;
     createByPropertySpec(fld: string, property: PropertySpec, choices: NullableFormFieldFactoryChoices, readOnly?: boolean): JSX.Element | null;
     getProperty(fld: string): PropertySpec | null;

package/services/form/FormFieldFactory/FormFieldFactory.js

@@ -3,7 +3,8 @@ import { InputAdornment, } from '@mui/material';
 import React from 'react';
 import { isPropertyEmbeddable, isPropertyFk, isPropertyScalar, } from '../../api/ParsedApiSpecInterface';
 import { CustomFunctionComponentContext, } from '../../form/Field/CustomComponentWrapper';
-import { AutocompleteFactory, DateFactory, DateTimeFactory, DropdownFactory, FileUploadFactory, InputTextFactory, MultilangFactory, NumberFactory, PasswordFactory, SwitchFactory, TextareaFactory, TimeFactory, ColorFactory, } from './Factory/index';
+import { DynamicAutocompleteFactory, AutocompleteFactory, DateFactory, DateTimeFactory, DropdownFactory, FileUploadFactory, InputTextFactory, MultilangFactory, NumberFactory, PasswordFactory, SwitchFactory, TextareaFactory, TimeFactory, ColorFactory, } from './Factory/index';
+import { StoreContainer } from '../../../store';
 export default class FormFieldFactory {
     constructor(entityService, formik, changeHandler, handleBlur, divRef) {
         this.entityService = entityService;
@@ -12,6 +13,18 @@ export default class FormFieldFactory {
         this.handleBlur = handleBlur;
         this.divRef = divRef;
     }
+    getDynamicSelectOptions(property) {
+        var _a;
+        if (!isPropertyFk(property)) {
+            return undefined;
+        }
+        const entities = StoreContainer.store.getState().entities.entities;
+        const entityName = property.$ref.replace('#/definitions/', '');
+        if (!((_a = entities[entityName]) === null || _a === void 0 ? void 0 : _a.dynamicSelectOptions)) {
+            return undefined;
+        }
+        return entities[entityName].selectOptions;
+    }
     getFormField(fld, choices, readOnly = false) {
         const property = this.getProperty(fld);
         if (!property) {
@@ -34,6 +47,10 @@ export default class FormFieldFactory {
                 .component;
             return (_jsx(PropertyComponent, { _context: CustomFunctionComponentContext.write, _columnName: fld, readOnly: readOnly, formik: this.formik, values: this.formik.values, choices: choices, property: property, disabled: disabled, changeHandler: this.changeHandler, onBlur: this.handleBlur, formFieldFactory: this }));
         }
+        const dynamicSelectOptions = this.getDynamicSelectOptions(property);
+        if (dynamicSelectOptions) {
+            return (_jsx(DynamicAutocompleteFactory, { fld: fld, property: property, disabled: disabled, multiSelect: multiSelect, value: value, hasChanged: hasChanged, error: error, touched: touched, selectOptions: dynamicSelectOptions, choices: choices, changeHandler: this.changeHandler, handleBlur: this.handleBlur }));
+        }
         if (isPropertyFk(property) || multiSelect) {
             return (_jsx(AutocompleteFactory, { fld: fld, property: property, disabled: disabled, multiSelect: multiSelect, value: value, hasChanged: hasChanged, error: error, touched: touched, choices: choices, changeHandler: this.changeHandler, handleBlur: this.handleBlur }));
         }

package/translations/ca.json

@@ -40,6 +40,8 @@
   "Starts with": "empieza por",
   "This change will affect": "Aquest canvi afectarà",
   "True": "Verdadero",
+  "Type to load more options": "Escriu per carregar més opcions",
+  "Type to search": "Escriu per cercar",
   "Upload image": "Subir imagen",
   "Username": "Usuari",
   "Validation error": "Error de validación",

package/translations/en.json

@@ -40,6 +40,8 @@
   "Starts with": "Starts with",
   "This change will affect": "This change will affect",
   "True": "True",
+  "Type to load more options": "Type to load more options",
+  "Type to search": "Type to search",
   "Upload image": "Upload image",
   "Username": "Username",
   "Validation error": "Validation error",
@@ -48,7 +50,7 @@
   "Yes, delete it": "Yes, delete it",
   "You are about to remove": "You are about to remove",
   "You are about to update": "You are about to update",
-  "You haven’t created any {{entity}} yet.": "You haven’t created any {{entity}} yet.",
+  "You haven't created any {{entity}} yet.": "You haven't created any {{entity}} yet.",
   "entities": "entities",
   "invalid pattern": "invalid pattern",
   "required value": "required value",

package/translations/es.json

@@ -40,6 +40,8 @@
   "Starts with": "empieza por",
   "This change will affect": "Este cambio afectará",
   "True": "Verdadero",
+  "Type to load more options": "Escribe para cargar más opciones",
+  "Type to search": "Escribe para buscar",
   "Upload image": "Subir imagen",
   "Username": "Usuario",
   "Validation error": "Error de validación",
@@ -48,7 +50,7 @@
   "Yes, delete it": "Si, eliminar",
   "You are about to remove": "Estás a punto de eliminar",
   "You are about to update": "Estás a punto de actualizar",
-  "You haven’t created any {{entity}} yet.": "Aún no has creado ningún {{entity}}",
+  "You haven't created any {{entity}} yet.": "Aún no has creado ningún {{entity}}",
   "entities": "entidades",
   "invalid pattern": "Patrón invalido",
   "required value": "valor requerido",

package/translations/it.json

@@ -40,6 +40,8 @@
   "Starts with": "Starts with",
   "This change will affect": "Questa modifica influirà",
   "True": "True",
+  "Type to load more options": "Digita per caricare più opzioni",
+  "Type to search": "Digita per cercare",
   "Upload image": "Upload image",
   "Username": "Username",
   "Validation error": "Validation error",