awing-library 2.1.2-dev.99 → 2.1.2-stable.10

package/lib/AWING/BasicDataForm/BasicDataForm.js

@@ -0,0 +1,400 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BasicDataForm = exports.DefaultCheckValid = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
+var moment_1 = __importDefault(require("moment"));
+var react_i18next_1 = require("react-i18next");
+var material_1 = require("@mui/material");
+var Search_1 = __importDefault(require("@mui/icons-material/Search"));
+var DatePicker_1 = require("@mui/x-date-pickers/DatePicker");
+var OldAsyncAutoComplete_1 = __importDefault(require("../OldAsyncAutoComplete"));
+var NumberFormat_1 = __importDefault(require("../NumberFormat"));
+var DateRangePicker_1 = __importDefault(require("../DateRangePicker"));
+var GeoFencing_1 = __importDefault(require("../../ACM-AXN/GeoFencing"));
+var validation_1 = require("../../AWING/ultis/validation");
+var DefaultCheckValid = function (type, value) {
+    switch (type) {
+        case 'date':
+            return Boolean(value && (0, moment_1.default)(value).isValid());
+        case 'date-range':
+            return Boolean(value[0] &&
+                value[1] &&
+                (0, moment_1.default)(value[0]).isValid() &&
+                (0, moment_1.default)(value[1]).isValid());
+        case 'number':
+            return Boolean(value && !Number.isNaN(value));
+        case 'text':
+        case 'text-area':
+            return Boolean(value && value.toString().length);
+        case 'multiple-select':
+            return Boolean(value && value.length);
+        default:
+            return Boolean(value !== null && value !== undefined);
+    }
+};
+exports.DefaultCheckValid = DefaultCheckValid;
+var BasicDataForm = function (props) {
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var caption = props.caption, actions = props.actions, actionsBottom = props.actionsBottom, fields = props.fields, oldValue = props.oldValue, onUpdate = props.onUpdate, _a = props.padding, padding = _a === void 0 ? 'normal' : _a;
+    var _b = react_1.default.useState(function () {
+        return getCurrentObj({ oldValue: oldValue, fields: fields });
+    }), currentObj = _b[0], setCurrentObj = _b[1];
+    var renderCount = react_1.default.useRef(0);
+    var _c = react_1.default.useState({}), currentValid = _c[0], setCurrentValid = _c[1];
+    var errorText = react_1.default.useRef({
+        default: t('Common.InvalidData'),
+    });
+    function getCurrentObj(_a) {
+        var _b;
+        var oldValue = _a.oldValue, fields = _a.fields;
+        var initObj = oldValue !== null && oldValue !== void 0 ? oldValue : {};
+        for (var i = 0; i < fields.length; i++) {
+            if (!initObj[fields[i].fieldName] &&
+                fields[i].defaultValue !== undefined) {
+                initObj = __assign(__assign({}, initObj), (_b = {}, _b[fields[i].fieldName] = fields[i].defaultValue, _b));
+            }
+        }
+        return initObj;
+    }
+    var CheckValid = function (fieldDef, value) {
+        var _a;
+        if (!fieldDef.required && (!value || value.length <= 0))
+            return true;
+        var fieldType = (_a = fieldDef.type) !== null && _a !== void 0 ? _a : 'text';
+        var isTextErr = true;
+        var isText = ['text', 'text-area'].includes(fieldType);
+        if (isText) {
+            var valid = (0, validation_1.textValidation)(value, fieldDef === null || fieldDef === void 0 ? void 0 : fieldDef.length, Boolean(fieldDef === null || fieldDef === void 0 ? void 0 : fieldDef.required), fieldDef === null || fieldDef === void 0 ? void 0 : fieldDef.pattern);
+            errorText.current[fieldDef.fieldName] = valid.message;
+            isTextErr = valid.valid;
+        }
+        return fieldDef.checkValid
+            ? fieldDef.checkValid(value, fieldDef === null || fieldDef === void 0 ? void 0 : fieldDef.length, fieldDef === null || fieldDef === void 0 ? void 0 : fieldDef.pattern)
+            : isText
+                ? isTextErr
+                : (0, exports.DefaultCheckValid)(fieldType, value);
+    };
+    react_1.default.useEffect(function () {
+        if (oldValue && renderCount.current !== 0) {
+            setCurrentObj(getCurrentObj({ oldValue: oldValue, fields: fields }));
+            var valid = {};
+            for (var i = 0; i < fields.length; i++) {
+                var field = fields[i];
+                valid[field.fieldName] = CheckValid(field, oldValue[field.fieldName]);
+            }
+            setCurrentValid(valid);
+        }
+        renderCount.current += 1;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    var handleChange = function (fieldName, fieldValue) {
+        var _a;
+        var field = fields.find(function (x) { return x.fieldName === fieldName; });
+        var newCurrentObj = __assign(__assign({}, currentObj), (_a = {}, _a[fieldName] = fieldValue, _a));
+        var newCurrentValid = __assign({}, currentValid);
+        if (field) {
+            newCurrentValid[fieldName] = CheckValid(field, fieldValue);
+            if (field.customeFieldChange) {
+                var oldValueChange = field.customeFieldChange(fieldValue);
+                newCurrentObj = __assign(__assign({}, newCurrentObj), oldValueChange);
+                var _loop_1 = function (fieldKey) {
+                    var subField = fields.find(function (x) { return x.fieldName === fieldKey; });
+                    if (subField)
+                        newCurrentValid[fieldKey] = CheckValid(subField, oldValueChange[fieldKey]);
+                };
+                for (var fieldKey in oldValueChange) {
+                    _loop_1(fieldKey);
+                }
+            }
+            setCurrentValid(newCurrentValid);
+        }
+        setCurrentObj(newCurrentObj);
+        if (onUpdate) {
+            for (var _i = 0, fields_1 = fields; _i < fields_1.length; _i++) {
+                var field_1 = fields_1[_i];
+                if (newCurrentValid[field_1.fieldName])
+                    continue;
+                if (!CheckValid(field_1, newCurrentObj[field_1.fieldName])) {
+                    onUpdate(false, newCurrentObj);
+                    return;
+                }
+            }
+            onUpdate(true, newCurrentObj);
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(material_1.Grid, { container: true, sx: { flexGrow: 1, padding: function (theme) { return theme.spacing(3); } }, children: (0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ item: true, xs: 12 }, (padding === 'normal' && {
+            component: material_1.Paper,
+            sx: { p: 3 },
+        }), { children: [(caption || actions) && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                    }, children: [caption && ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", sx: { flexGrow: 1 }, children: caption })), actions && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                                margin: function (theme) { return theme.spacing(1); },
+                                position: 'relative',
+                                width: '100%',
+                            }, children: actions }))] })), (0, jsx_runtime_1.jsx)(material_1.Grid, { container: true, spacing: 2, children: fields.map(function (fieldDef, index) {
+                        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+                        var fieldName = fieldDef.fieldName, _t = fieldDef.type, type = _t === void 0 ? 'text' : _t, checkValid = fieldDef.checkValid, options = fieldDef.options, loading = fieldDef.loading, customeFieldChange = fieldDef.customeFieldChange, AsynchronousAutocompleteProps = fieldDef.AsynchronousAutocompleteProps, AutocompleteBasicProps = fieldDef.AutocompleteBasicProps, SearchProps = fieldDef.SearchProps, defaultValue = fieldDef.defaultValue, value = fieldDef.value, other = __rest(fieldDef, ["fieldName", "type", "checkValid", "options", "loading", "customeFieldChange", "AsynchronousAutocompleteProps", "AutocompleteBasicProps", "SearchProps", "defaultValue", "value"]);
+                        var fieldValue = value !== null && value !== void 0 ? value : currentObj[fieldName];
+                        var showError = currentValid[fieldName] !== undefined &&
+                            !currentValid[fieldName];
+                        var currentField = null;
+                        switch (type) {
+                            case 'asynchronous-autocomplete':
+                                currentField = ((0, jsx_runtime_1.jsx)(OldAsyncAutoComplete_1.default, __assign({}, AsynchronousAutocompleteProps, { value: fieldValue, onChange: function (value) {
+                                        return handleChange(fieldName, value);
+                                    }, options: options, readOnly: fieldDef.readOnly, TextFieldProps: __assign(__assign({}, other), { error: showError, helperText: showError
+                                            ? (_a = fieldDef.helperText) !== null && _a !== void 0 ? _a : t('Common.InvalidData')
+                                            : '' }) }), fieldName));
+                                break;
+                            case 'autocomplete':
+                                currentField = ((0, jsx_runtime_1.jsx)(material_1.Autocomplete, { options: options !== null && options !== void 0 ? options : [], getOptionLabel: function (option) {
+                                        return option.text;
+                                    }, onChange: function (e, value) {
+                                        handleChange(fieldName, value ? value.value : null);
+                                    }, value: options &&
+                                        options.find(function (x) { return x.value === fieldValue; }) !== undefined
+                                        ? options.find(function (x) {
+                                            return x.value === fieldValue;
+                                        })
+                                        : null, loading: loading, readOnly: (_b = fieldDef === null || fieldDef === void 0 ? void 0 : fieldDef.readOnly) !== null && _b !== void 0 ? _b : false, clearOnEscape: true, fullWidth: true, disabled: fieldDef.disabled, renderInput: function (params) {
+                                        var _a;
+                                        return ((0, jsx_runtime_1.jsx)(material_1.TextField, __assign({}, params, other, { variant: "standard", InputProps: __assign(__assign({}, params.InputProps), { endAdornment: ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [loading ? ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, { color: "inherit", size: 20 })) : null, params
+                                                            .InputProps
+                                                            .endAdornment] })) }), error: showError, helperText: showError
+                                                ? (_a = fieldDef.helperText) !== null && _a !== void 0 ? _a : t('Common.InvalidData')
+                                                : '' })));
+                                    }, disableClearable: AutocompleteBasicProps === null || AutocompleteBasicProps === void 0 ? void 0 : AutocompleteBasicProps.disableClearable }, index));
+                                break;
+                            case 'checkbox':
+                                currentField = ((0, jsx_runtime_1.jsx)(material_1.FormControl, { fullWidth: true, required: fieldDef.required, children: (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { id: fieldName, name: fieldName, checked: fieldValue, onChange: function (event) {
+                                                return handleChange(fieldName, event.target.checked);
+                                            }, color: "primary" }), label: fieldDef.label }) }, fieldName));
+                                break;
+                            case 'month':
+                                currentField = ((0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, __assign({ views: ['month', 'year'], label: fieldDef.label, value: (0, moment_1.default)(fieldValue, 'MM-YYYY'), disabled: fieldDef.disabled, onChange: function (date) {
+                                        return handleChange(fieldName, date === null || date === void 0 ? void 0 : date.toDate());
+                                    }, readOnly: fieldDef.readOnly, slotProps: {
+                                        textField: __assign(__assign({ required: fieldDef.required, fullWidth: true, variant: 'standard' }, other), { error: showError, helperText: showError
+                                                ? (_c = fieldDef.helperText) !== null && _c !== void 0 ? _c : t('Common.InvalidData')
+                                                : '' }),
+                                    } }, fieldDef.DateProps), fieldName));
+                                break;
+                            case 'date':
+                                currentField = ((0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, __assign({ label: fieldDef.label, value: fieldValue
+                                        ? (0, moment_1.default)(fieldValue)
+                                        : null, onChange: function (date) {
+                                        return handleChange(fieldName, date === null || date === void 0 ? void 0 : date.toDate());
+                                    }, disabled: fieldDef.disabled, readOnly: fieldDef.readOnly, slotProps: {
+                                        textField: __assign(__assign({ required: fieldDef.required, fullWidth: true, variant: 'standard' }, other), { error: showError, helperText: showError
+                                                ? (_d = fieldDef.helperText) !== null && _d !== void 0 ? _d : t('Common.InvalidData')
+                                                : '' }),
+                                    } }, fieldDef.DateProps), fieldName));
+                                break;
+                            case 'date-range':
+                                currentField = ((0, jsx_runtime_1.jsx)(DateRangePicker_1.default, __assign({ required: fieldDef === null || fieldDef === void 0 ? void 0 : fieldDef.required, variant: "outlined", textFieldProps: {
+                                        fullWidth: true,
+                                    }, value: {
+                                        startDate: (fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue[0]) || null,
+                                        endDate: (fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue[1]) || null,
+                                    }, callback: function (dateRange) {
+                                        handleChange(fieldName, [
+                                            dateRange.startDate,
+                                            dateRange.endDate,
+                                        ]);
+                                    }, label: fieldDef.label, error: showError, helperText: (showError
+                                        ? (_e = fieldDef.helperText) !== null && _e !== void 0 ? _e : t('Common.InvalidData')
+                                        : '') }, fieldDef.DateRangeProps), fieldName));
+                                break;
+                            case 'number':
+                                currentField = ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { position: 'relative' }, children: [(0, jsx_runtime_1.jsx)(NumberFormat_1.default, __assign({ id: fieldName, name: fieldName, fullWidth: true, variant: "standard" }, other, { value: fieldValue !== null && fieldValue !== void 0 ? fieldValue : '', onChange: function (event) {
+                                                return handleChange(fieldName, event.target.value);
+                                            }, onKeyDown: function (e) {
+                                                if (e.key === 'Enter' &&
+                                                    fieldValue) {
+                                                    (SearchProps === null || SearchProps === void 0 ? void 0 : SearchProps.onSearch) &&
+                                                        SearchProps.onSearch(fieldValue);
+                                                }
+                                            }, error: showError, helperText: showError
+                                                ? (_f = fieldDef.helperText) !== null && _f !== void 0 ? _f : t('Common.InvalidData')
+                                                : '' }), fieldName), SearchProps && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: (_g = SearchProps.title) !== null && _g !== void 0 ? _g : '', children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { sx: function (theme) { return ({
+                                                    position: 'absolute',
+                                                    top: theme.spacing(2),
+                                                    right: theme.spacing(0),
+                                                }); }, onClick: function () {
+                                                    if (fieldValue) {
+                                                        (SearchProps === null || SearchProps === void 0 ? void 0 : SearchProps.onSearch) &&
+                                                            SearchProps.onSearch(fieldValue);
+                                                    }
+                                                }, children: (0, jsx_runtime_1.jsx)(Search_1.default, {}) }) })), ((SearchProps === null || SearchProps === void 0 ? void 0 : SearchProps.searchResult) ||
+                                            (SearchProps === null || SearchProps === void 0 ? void 0 : SearchProps.error) ||
+                                            (SearchProps === null || SearchProps === void 0 ? void 0 : SearchProps.loading)) &&
+                                            ((SearchProps === null || SearchProps === void 0 ? void 0 : SearchProps.loading) ? ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, {})) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle1", sx: { opacity: '0.6' }, children: (SearchProps === null || SearchProps === void 0 ? void 0 : SearchProps.error)
+                                                    ? t('Common.NoResult')
+                                                    : SearchProps.searchResult })))] }));
+                                break;
+                            case 'text-number':
+                                {
+                                    currentField = ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { position: 'relative' }, children: [(0, jsx_runtime_1.jsx)(material_1.TextField, __assign({ id: fieldName, name: fieldName, fullWidth: true, variant: "standard" }, other, { value: fieldValue !== null && fieldValue !== void 0 ? fieldValue : '', onChange: function (event) {
+                                                    if (!isNaN(Number(event.target
+                                                        .value))) {
+                                                        handleChange(fieldName, event.target.value);
+                                                    }
+                                                }, onKeyDown: function (e) {
+                                                    if (e.key === 'Enter' &&
+                                                        fieldValue) {
+                                                        (SearchProps === null || SearchProps === void 0 ? void 0 : SearchProps.onSearch) &&
+                                                            SearchProps.onSearch(fieldValue);
+                                                    }
+                                                }, error: showError, helperText: showError
+                                                    ? (_h = fieldDef.helperText) !== null && _h !== void 0 ? _h : t('Common.InvalidData')
+                                                    : '' }), fieldName), SearchProps && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: (_j = SearchProps.title) !== null && _j !== void 0 ? _j : '', children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { sx: function (theme) { return ({
+                                                        position: 'absolute',
+                                                        top: theme.spacing(2),
+                                                        right: theme.spacing(0),
+                                                    }); }, onClick: function () {
+                                                        if (fieldValue) {
+                                                            (SearchProps === null || SearchProps === void 0 ? void 0 : SearchProps.onSearch) &&
+                                                                SearchProps.onSearch(fieldValue);
+                                                        }
+                                                    }, children: (0, jsx_runtime_1.jsx)(Search_1.default, {}) }) })), ((SearchProps === null || SearchProps === void 0 ? void 0 : SearchProps.searchResult) ||
+                                                (SearchProps === null || SearchProps === void 0 ? void 0 : SearchProps.error) ||
+                                                (SearchProps === null || SearchProps === void 0 ? void 0 : SearchProps.loading)) &&
+                                                ((SearchProps === null || SearchProps === void 0 ? void 0 : SearchProps.loading) ? ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, {})) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle1", sx: { opacity: '0.6' }, children: (SearchProps === null || SearchProps === void 0 ? void 0 : SearchProps.error)
+                                                        ? t('Common.NoResult')
+                                                        : SearchProps.searchResult })))] }));
+                                }
+                                break;
+                            case 'radio':
+                                currentField = ((0, jsx_runtime_1.jsxs)(material_1.FormControl, { component: "fieldset", children: [(0, jsx_runtime_1.jsx)(material_1.FormLabel, { component: "legend", required: fieldDef.required, children: fieldDef.label }), (0, jsx_runtime_1.jsx)(material_1.RadioGroup, { "aria-label": fieldName, name: fieldName, value: fieldValue, onChange: function (event) {
+                                                return handleChange(fieldName, event.target.value);
+                                            }, children: options &&
+                                                options.map(function (item, index) { return ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { value: item.value, control: (0, jsx_runtime_1.jsx)(material_1.Radio, {}), label: item.label
+                                                        ? item.label
+                                                        : item.text, disabled: item.disabled }, "".concat(fieldName, "-opt-").concat(index))); }) })] }, fieldName));
+                                break;
+                            case 'text':
+                                currentField = ((0, jsx_runtime_1.jsx)(material_1.TextField, __assign({ id: fieldName, name: fieldName, fullWidth: true, variant: "standard", inputProps: {
+                                        'data-testid': 'data-form-text',
+                                    } }, other, { value: fieldValue !== null && fieldValue !== void 0 ? fieldValue : '', onChange: function (event) {
+                                        return handleChange(fieldName, event.target.value);
+                                    }, error: showError, helperText: showError
+                                        ? (_k = fieldDef.helperText) !== null && _k !== void 0 ? _k : errorText.current[fieldName]
+                                        : '' }), fieldName));
+                                break;
+                            case 'password':
+                                currentField = ((0, jsx_runtime_1.jsx)(material_1.TextField, __assign({ id: fieldName, name: fieldName, fullWidth: true, variant: "standard", type: "password" }, other, { value: fieldValue !== null && fieldValue !== void 0 ? fieldValue : '', onChange: function (event) {
+                                        return handleChange(fieldName, event.target.value);
+                                    }, error: showError, helperText: showError
+                                        ? (_l = fieldDef.helperText) !== null && _l !== void 0 ? _l : t('Common.InvalidData')
+                                        : '' }), fieldName));
+                                break;
+                            case 'text-area':
+                                currentField = ((0, jsx_runtime_1.jsx)(material_1.TextField, __assign({ id: fieldName, name: fieldName, rows: (_m = fieldDef === null || fieldDef === void 0 ? void 0 : fieldDef.rows) !== null && _m !== void 0 ? _m : 3, fullWidth: true, multiline: true, variant: "standard" }, other, { value: fieldValue !== null && fieldValue !== void 0 ? fieldValue : '', onChange: function (event) {
+                                        return handleChange(fieldName, event.target.value);
+                                    }, error: showError, helperText: showError
+                                        ? (_o = fieldDef.helperText) !== null && _o !== void 0 ? _o : errorText.current[fieldName]
+                                        : '' }), fieldName));
+                                break;
+                            case 'select': {
+                                currentField = ((0, jsx_runtime_1.jsxs)(material_1.TextField, __assign({ id: fieldName, name: fieldName, fullWidth: true, select: true, variant: "standard" }, other, { value: fieldValue !== null && fieldValue !== void 0 ? fieldValue : '', onChange: function (event) {
+                                        return handleChange(fieldName, event.target.value);
+                                    }, error: showError, helperText: showError
+                                        ? (_p = fieldDef.helperText) !== null && _p !== void 0 ? _p : t('Common.InvalidData')
+                                        : '', children: [!fieldDef.required && ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: "", children: (0, jsx_runtime_1.jsx)("em", { children: t('Common.None') }) })), options &&
+                                            options.map(function (item, index) {
+                                                var _a;
+                                                return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: item.value, disabled: item.disabled, children: (_a = item.label) !== null && _a !== void 0 ? _a : item.text }, "".concat(fieldName, "-opt-").concat(index)));
+                                            })] }), fieldName));
+                                break;
+                            }
+                            case 'select-folder': {
+                                currentField = ((0, jsx_runtime_1.jsxs)(material_1.TextField, __assign({ id: fieldName, name: fieldName, fullWidth: true, select: true, variant: "standard" }, other, { value: fieldValue !== null && fieldValue !== void 0 ? fieldValue : '', onChange: function (event) {
+                                        return handleChange(fieldName, event.target.value);
+                                    }, error: showError, helperText: showError
+                                        ? (_q = fieldDef.helperText) !== null && _q !== void 0 ? _q : t('Common.InvalidData')
+                                        : '', children: [!fieldDef.required && ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: "", children: (0, jsx_runtime_1.jsx)("em", { children: t('Common.None') }) })), options &&
+                                            options.map(function (item, index) {
+                                                var _a;
+                                                return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: item.value, disabled: item.disabled, style: {
+                                                        paddingLeft: (item.level || 0) *
+                                                            24 +
+                                                            'px',
+                                                    }, children: (_a = item.label) !== null && _a !== void 0 ? _a : item.text }, "".concat(fieldName, "-opt-").concat(index)));
+                                            })] }), fieldName));
+                                break;
+                            }
+                            case 'multiple-select': {
+                                currentField = ((0, jsx_runtime_1.jsx)(material_1.Autocomplete, { options: options !== null && options !== void 0 ? options : [], multiple: true, getOptionLabel: function (option) {
+                                        return option.text;
+                                    }, onChange: function (e, value) {
+                                        return handleChange(fieldName, value ? value : []);
+                                    }, value: fieldValue || [], loading: loading, readOnly: (_r = fieldDef === null || fieldDef === void 0 ? void 0 : fieldDef.readOnly) !== null && _r !== void 0 ? _r : false, clearOnEscape: true, disableCloseOnSelect: true, fullWidth: true, disabled: fieldDef.disabled, isOptionEqualToValue: function (option, value) {
+                                        return option.value === value.value;
+                                    }, renderInput: function (params) {
+                                        var _a;
+                                        return ((0, jsx_runtime_1.jsx)(material_1.TextField, __assign({}, params, other, { variant: "standard", InputProps: __assign(__assign({}, params.InputProps), { endAdornment: ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [loading ? ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, { color: "inherit", size: 20 })) : null, params
+                                                            .InputProps
+                                                            .endAdornment] })) }), error: showError, helperText: showError
+                                                ? (_a = fieldDef.helperText) !== null && _a !== void 0 ? _a : t('Common.InvalidData')
+                                                : '' })));
+                                    } }, index));
+                                break;
+                            }
+                            case 'geo-fencing': {
+                                var geoProps = (fieldDef === null || fieldDef === void 0 ? void 0 : fieldDef.GeoFencingProps) || {};
+                                currentField = ((0, jsx_runtime_1.jsx)("div", { style: { margin: '16px 0px' }, children: (0, jsx_runtime_1.jsx)(GeoFencing_1.default, __assign({ configs: {
+                                            // GOONG_API_KEY: '',
+                                            // GOONG_MAP_KEY: '',
+                                            GOOGLE_MAP_KEY: '',
+                                        }, label: '' }, geoProps, { onChange: function (value) {
+                                            return handleChange(fieldName, value ? value : null);
+                                        } }), index) }, index));
+                                break;
+                            }
+                            default:
+                                currentField = ((0, jsx_runtime_1.jsx)(material_1.TextField, __assign({ id: fieldName, name: fieldName, type: type, fullWidth: true, variant: "standard" }, other, { value: fieldValue, onChange: function (event) {
+                                        return handleChange(fieldName, event.target.value);
+                                    }, error: showError, helperText: showError
+                                        ? (_s = fieldDef.helperText) !== null && _s !== void 0 ? _s : errorText.current[fieldName]
+                                        : '' }), fieldName));
+                                break;
+                        }
+                        return ((0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: fieldDef.gridSize || 12, children: currentField }, index));
+                    }) }), actionsBottom && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                    }, children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                            width: '100%',
+                        }, children: actionsBottom }) }))] })) }));
+};
+exports.BasicDataForm = BasicDataForm;
+exports.default = exports.BasicDataForm;

package/lib/AWING/BasicDataForm/index.d.ts

@@ -0,0 +1,4 @@
+import { BasicDataFormProps } from './interface';
+export declare function BasicDataForm(props: BasicDataFormProps): import("react/jsx-runtime").JSX.Element;
+export * from './interface';
+export default BasicDataForm;

package/lib/AWING/BasicDataForm/index.js

@@ -0,0 +1,43 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BasicDataForm = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var BasicDataForm_1 = __importDefault(require("./BasicDataForm"));
+var i18n_1 = __importDefault(require("../../i18n"));
+var react_i18next_1 = require("react-i18next");
+var x_date_pickers_1 = require("@mui/x-date-pickers");
+var AdapterMoment_1 = require("@mui/x-date-pickers/AdapterMoment");
+function BasicDataForm(props) {
+    return ((0, jsx_runtime_1.jsx)(react_i18next_1.I18nextProvider, { i18n: i18n_1.default, children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.LocalizationProvider, { dateAdapter: AdapterMoment_1.AdapterMoment, children: (0, jsx_runtime_1.jsx)(BasicDataForm_1.default, __assign({}, props)) }) }));
+}
+exports.BasicDataForm = BasicDataForm;
+__exportStar(require("./interface"), exports);
+exports.default = BasicDataForm;

package/lib/AWING/BasicDataForm/interface.d.ts

@@ -0,0 +1,81 @@
+import { ReactNode } from "react";
+import { BaseTextFieldProps } from "@mui/material/TextField";
+import { DataObject, MenuOption } from "../DataGrid/interface";
+import { AsynchronousAutocompleteProps } from "../PageManagement/interface";
+import { Moment } from "moment";
+import { GeoFencingValue, IConfig } from "../../ACM-AXN/GeoFencing/interface";
+export type FieldType = "asynchronous-autocomplete" | "autocomplete" | "checkbox" | "color" | "month" | "date" | "date-range" | "email" | "file" | "hidden" | "image" | "number" | "password" | "radio" | "range" | "search" | "select" | "tel" | "text" | "text-area" | "time" | "url" | "select-folder" | "text-number" | "multiple-select" | "geo-fencing";
+export interface BasicFieldDefinition extends BaseTextFieldProps {
+    fieldName: string;
+    type?: FieldType;
+    /**
+     * Dùng khi cần sắp xếp các field, mặc định là 12
+     */
+    gridSize?: number;
+    /**
+     * Độ dài byte, Mặc định là 50, đơn vị tính: 5*10^n (n >= 1)
+     *
+     * VD: 'Giáp' là 5 byte
+     */
+    length?: number;
+    /**
+     * Định dạng regex cho hàm textValid
+    */
+    pattern?: RegExp | false;
+    /**
+    *
+    * @param value
+    * @param length - Độ dài byte, only type text và text-area
+    * @param pattern - Định dạng regex, only type text và text-area
+    */
+    checkValid?(value: any, length?: number, pattern?: RegExp | false): boolean;
+    options?: MenuOption[];
+    loading?: boolean;
+    readOnly?: boolean;
+    /**
+     * Dùng khi cần update các field khác kèm theo
+     */
+    customeFieldChange?(fieldValue: any): DataObject;
+    AsynchronousAutocompleteProps?: AsynchronousAutocompleteProps;
+    AutocompleteBasicProps?: {
+        disableClearable?: boolean;
+    };
+    SearchProps?: {
+        searchResult?: any;
+        error: boolean;
+        title?: string;
+        loading?: boolean;
+        onSearch?(inputValue: string): void;
+    };
+    DateRangeProps?: {
+        isDayBlocked?: (day: Moment) => boolean;
+        isOutsideRange?: (day: Moment) => boolean;
+        disableHelperText?: boolean;
+        isShowCalendarInfo?: boolean;
+        disabled?: boolean;
+    };
+    DateProps?: {
+        minDate?: Moment;
+        maxDate?: Moment;
+    };
+    GeoFencingProps?: {
+        initValue?: GeoFencingValue;
+        label?: string;
+        configs: IConfig;
+        value?: GeoFencingValue;
+        limit?: {
+            min?: number;
+            max?: number;
+        };
+        isOnlyMap?: boolean;
+    };
+}
+export interface BasicDataFormProps {
+    caption?: string;
+    actions?: ReactNode;
+    actionsBottom?: ReactNode;
+    fields: BasicFieldDefinition[];
+    oldValue?: DataObject;
+    onUpdate?(formValid: boolean, value?: DataObject): void;
+    padding?: "none" | "normal";
+}

package/lib/AWING/BasicDataForm/interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/AWING/ButtonDateRangePicker/ButtonDateRangePicker.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { ButtonDateRangePickerProps } from './interface';
+export declare const ButtonDateRangePicker: FC<ButtonDateRangePickerProps>;
+export default ButtonDateRangePicker;
+export * from './interface';