awing-library 2.1.136-beta → 2.1.136

package/lib/ACM-AXN/ViewTemplate/TemplateField/Fields/BasicField/index.js

@@ -17,16 +17,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
 var styles_1 = require("@mui/styles");
-var ImageField_1 = __importDefault(require("./ImageField"));
-var VideoField_1 = __importDefault(require("./VideoField"));
-var MonacoEditor_1 = __importDefault(require("./MonacoEditor"));
-var common_1 = require("../../../common");
-var constant_1 = require("../../../constant");
-var Enum_1 = require("../../../Enum");
+var validation_1 = require("../../../../../AWING/ultis/validation");
 var react_1 = require("react");
 var react_i18next_1 = require("react-i18next");
-var validation_1 = require("../../../../../AWING/ultis/validation");
-var debounce = require('lodash/debounce');
+var Enum_1 = require("../../../Enum");
+var ImageField_1 = __importDefault(require("./ImageField"));
+var MonacoEditor_1 = __importDefault(require("./MonacoEditor"));
+var Utils_1 = require("./Utils");
+var VideoField_1 = __importDefault(require("./VideoField"));
 var useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
     paper: {
         padding: '16px',
@@ -65,6 +63,7 @@ function BasicField(props) {
     register = hookControl.register, errors = hookControl.formState.errors, getValues = hookControl.getValues, setFormValue = hookControl.setFormValue;
     (0, react_1.useEffect)(function () {
         var isNotSubField = fieldPath.split('.').length === 3;
+        var timeOut;
         if (isNotSubField) {
             if (fieldType === Enum_1.TYPE_FIELD_TEMPLATE.CHECKBOX) {
                 if (defaultValue === 'true' &&
@@ -77,13 +76,17 @@ function BasicField(props) {
             }
             else {
                 if (defaultValue && !fieldValue) {
-                    setTimeout(function () {
+                    timeOut = setTimeout(function () {
                         setFormValue(fieldPath, defaultValue);
                         onChange(fieldPath);
                     }, 0);
                 }
             }
         }
+        return function () {
+            if (timeOut)
+                clearTimeout(timeOut);
+        };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     var handleChange = function (newValue) {
@@ -93,8 +96,8 @@ function BasicField(props) {
         if (scriptValidate) {
             onChangeValidateProcess(Enum_1.VALIDATE_PROCESS_CODE.NOT_VALIDATE);
         }
-        runValidate(scriptValidate || '', fields, pagePath, onNotifyError, onChangeViewValid, onChangeValidateProcess, configs);
-        runAutoField(scriptAutoField || '', fields, fieldPath, pagePath, function (needUpdateFieldPath, newValue) {
+        (0, Utils_1.runValidate)(scriptValidate || '', fields, pagePath, onNotifyError, onChangeViewValid, onChangeValidateProcess, configs);
+        (0, Utils_1.runAutoField)(scriptAutoField || '', fields, fieldPath, pagePath, function (needUpdateFieldPath, newValue) {
             setFormValue(needUpdateFieldPath, newValue);
             onChange(needUpdateFieldPath);
         }, configs);
@@ -102,12 +105,15 @@ function BasicField(props) {
     var renderField = function () {
         // const isError = !!getValueByPath(/*errors*/ {}, fieldPath)
         var isError = errors.includes(fieldPath);
-        var field = register(fieldPath, __assign({ required: isRequired }, fieldType === Enum_1.TYPE_FIELD_TEMPLATE.URL && {
-            onValidate: function (value) { return (0, validation_1.urlValid)(value); }
+        var field = register(fieldPath, __assign(__assign({ required: isRequired }, fieldType === Enum_1.TYPE_FIELD_TEMPLATE.URL && {
+            onValidate: validation_1.urlValid
+        }), fieldType === Enum_1.TYPE_FIELD_TEMPLATE.COLOR && {
+            onValidate: validation_1.colorValid
         }));
+        // onChangeViewValid(isError)
         switch (fieldType) {
+            // return renderNumberField(field, isError)
             case Enum_1.TYPE_FIELD_TEMPLATE.TEXT_FIELD_NUMBER:
-                return renderTextField(field, isError);
             case Enum_1.TYPE_FIELD_TEMPLATE.TEXT_FIELD:
             case Enum_1.TYPE_FIELD_TEMPLATE.URL:
                 return renderTextField(field, isError);
@@ -128,42 +134,35 @@ function BasicField(props) {
             default:
                 return null;
         }
-        // return (
-        //     <Controller
-        //         name={fieldPath}
-        //         {...register(fieldPath, { required: isRequired })}
-        //         ref={null}
-        //         control={control}
-        //         render={({ field }) => {
-        //             switch (fieldType) {
-        //                 case TYPE_FIELD_TEMPLATE.TEXT_FIELD_NUMBER:
-        //                     return renderTextField(field, isError)
-        //                 case TYPE_FIELD_TEMPLATE.TEXT_FIELD:
-        //                     return renderTextField(field, isError)
-        //                 case TYPE_FIELD_TEMPLATE.TEXTAREA:
-        //                     return renderTextField(field, isError)
-        //                 case TYPE_FIELD_TEMPLATE.DROPDOWN_LIST:
-        //                     return renderDropdownListField(field, isError)
-        //                 case TYPE_FIELD_TEMPLATE.CHECKBOX:
-        //                     return renderCheckboxField(field)
-        //                 case TYPE_FIELD_TEMPLATE.COLOR:
-        //                     return renderColorField(field, isError)
-        //                 case TYPE_FIELD_TEMPLATE.IMAGE:
-        //                     return renderImageOrVideoField(isError)
-        //                 case TYPE_FIELD_TEMPLATE.VIDEO:
-        //                     return renderImageOrVideoField(isError)
-        //                 case TYPE_FIELD_TEMPLATE.HTML:
-        //                     return renderHTMLField()
-        //                 default:
-        //                     return null
-        //             }
-        //         }}
-        //     ></Controller>
-        // )
     };
+    // const renderNumberField = React.useCallback((field: any, isError: boolean) => {
+    //     return (
+    //         <NumberFormat
+    //             {...field}
+    //             inputProps={{ min: 0 }}
+    //             className={classes.text}
+    //             required={isRequired}
+    //             min={0}
+    //             fullWidth
+    //             variant="standard"
+    //             label={labelName || fieldName}
+    //             onChange={(e) => {
+    //                 let newValue = Number(e.target.value)
+    //                 console.log('newValue', newValue)
+    //                 handleChange(newValue)
+    //             }}
+    //             error={isError}
+    //             helperText={isError ? t('Common.Required') : ''}
+    //         />
+    //     )
+    // // eslint-disable-next-line react-hooks/exhaustive-deps
+    // }, [classes, fieldName, isRequired, labelName, t])
     var renderTextField = function (field, isError) {
         return ((0, jsx_runtime_1.jsx)(material_1.TextField, __assign({}, field, { className: classes.text, required: isRequired, fullWidth: true }, (fieldType === Enum_1.TYPE_FIELD_TEMPLATE.TEXT_FIELD_NUMBER
-            ? { type: 'number' }
+            ? { inputProps: {
+                    min: 0,
+                    type: 'number',
+                } }
             : {}), (fieldType === Enum_1.TYPE_FIELD_TEMPLATE.TEXTAREA
             ? { multiline: true, rows: 4 }
             : {}), { variant: "standard", label: labelName || fieldName, onChange: function (e) {
@@ -240,116 +239,3 @@ function BasicField(props) {
     return renderField();
 }
 exports.default = BasicField;
-var getValidationParams = function (templateDatas, pagePath, configs) {
-    var fields = templateDatas.map(function (dt) {
-        // Convert all video, image link
-        var fieldValue = dt.fieldValue;
-        if ([
-            Enum_1.TYPE_FIELD_TEMPLATE.IMAGE,
-            Enum_1.TYPE_FIELD_TEMPLATE.VIDEO,
-            Enum_1.TYPE_FIELD_TEMPLATE.OBJECT,
-            Enum_1.TYPE_FIELD_TEMPLATE.LIST,
-        ].includes(dt.fieldType)) {
-            var jsonValue = JSON.stringify(fieldValue);
-            if (jsonValue.includes(constant_1.ACM_TEMPLATE_PATH)) {
-                jsonValue = jsonValue.replaceAll('/' + constant_1.ACM_TEMPLATE_PATH, "".concat(configs.TEMPLATE_FILE_PATH, "/").concat(dt.templateId));
-            }
-            if (jsonValue.includes(configs.FILE_RELATIVE_PATH || '')) {
-                jsonValue = jsonValue.replaceAll(configs.FILE_RELATIVE_PATH || '', pagePath);
-            }
-            fieldValue = JSON.parse(jsonValue);
-        }
-        return __assign(__assign({}, dt), { fieldValue: fieldValue });
-    });
-    return [fields];
-};
-var runValidate = debounce(function (scriptValidate, fields, pagePath, notifyError, changeViewValidStatus, changeViewValidProcess, configs) {
-    if (scriptValidate) {
-        changeViewValidProcess(Enum_1.VALIDATE_PROCESS_CODE.VALIDATING);
-        var params = getValidationParams(fields, pagePath, configs);
-        (0, common_1.runScript)(
-        // getValidationParams(fields, pagePath, configs),
-        params, scriptValidate).then(function (result) {
-            if (result) {
-                var fieldsError_1 = [];
-                var newAnswer = result.map(function (validInfo) {
-                    var _a;
-                    if (validInfo.code === Enum_1.VALID_TEMPLATE_CODE.SUCCESS) {
-                        return true;
-                    }
-                    else {
-                        var displayName = ((_a = fields.find(function (dt) {
-                            return validInfo.fieldName === dt.fieldName;
-                        })) === null || _a === void 0 ? void 0 : _a.labelName) || validInfo.fieldName;
-                        fieldsError_1.push("".concat(displayName).concat(validInfo.errorMessage
-                            ? ": ".concat(validInfo.errorMessage)
-                            : ''));
-                        return false;
-                    }
-                });
-                if (fieldsError_1.length > 0) {
-                    notifyError(fieldsError_1.toString());
-                }
-                changeViewValidStatus(newAnswer.length === 0 || !newAnswer.includes(false));
-            }
-            changeViewValidProcess(Enum_1.VALIDATE_PROCESS_CODE.VALIDATED);
-        });
-    }
-}, constant_1.DELAY_TIME_RUN_SCRIPT);
-var getAutoFieldParams = function (templateDatas, fieldPath, pagePath, configs) {
-    var fields = templateDatas.map(function (dt) {
-        // Convert all video, image link
-        var fieldValue = dt.fieldValue;
-        if ([
-            Enum_1.TYPE_FIELD_TEMPLATE.IMAGE,
-            Enum_1.TYPE_FIELD_TEMPLATE.VIDEO,
-            Enum_1.TYPE_FIELD_TEMPLATE.OBJECT,
-            Enum_1.TYPE_FIELD_TEMPLATE.LIST,
-        ].includes(dt.fieldType)) {
-            var jsonValue = JSON.stringify(fieldValue);
-            if (jsonValue.includes(constant_1.ACM_TEMPLATE_PATH)) {
-                jsonValue = jsonValue.replaceAll('/' + constant_1.ACM_TEMPLATE_PATH, "".concat(configs.TEMPLATE_FILE_PATH, "/").concat(dt.templateId));
-            }
-            if (jsonValue.includes(configs.FILE_RELATIVE_PATH || '')) {
-                jsonValue = jsonValue.replaceAll(configs.FILE_RELATIVE_PATH || '', pagePath);
-            }
-            fieldValue = JSON.parse(jsonValue);
-        }
-        return __assign(__assign({}, dt), { fieldValue: fieldValue });
-    });
-    var keys = fieldPath.split('.');
-    var fieldChange = fields[Number(keys[1])];
-    return [fields, __assign(__assign({}, fieldChange), { changePath: fieldPath })];
-};
-var runAutoField = debounce(function (scriptAutoField, fields, fieldPath, pagePath, updateNewValue, configs) {
-    if (scriptAutoField) {
-        (0, common_1.runScript)(getAutoFieldParams(fields, fieldPath, pagePath, configs), scriptAutoField).then(function (result) {
-            if (result) {
-                result === null || result === void 0 ? void 0 : result.map(function (r) {
-                    var _a;
-                    var idx = fields.findIndex(function (f) { return f.fieldName === r.fieldName; });
-                    if ([
-                        Enum_1.TYPE_FIELD_TEMPLATE.IMAGE,
-                        Enum_1.TYPE_FIELD_TEMPLATE.VIDEO,
-                        Enum_1.TYPE_FIELD_TEMPLATE.OBJECT,
-                        Enum_1.TYPE_FIELD_TEMPLATE.LIST,
-                    ].includes(fields[idx].fieldType)) {
-                        var jsonValue = JSON.stringify(r.newValue);
-                        if (jsonValue.includes(pagePath)) {
-                            jsonValue = jsonValue.replaceAll(pagePath, configs.FILE_RELATIVE_PATH || '');
-                        }
-                        if (configs.TEMPLATE_FILE_PATH &&
-                            jsonValue.includes(configs.TEMPLATE_FILE_PATH)) {
-                            var templatePath = "".concat(configs.TEMPLATE_FILE_PATH, "/").concat((_a = fields === null || fields === void 0 ? void 0 : fields[0]) === null || _a === void 0 ? void 0 : _a.templateId);
-                            jsonValue = jsonValue.replaceAll(templatePath, "\"/".concat(constant_1.ACM_TEMPLATE_PATH));
-                        }
-                        r.newValue = JSON.parse(jsonValue);
-                    }
-                    var needUpdateFieldPath = "templateDatas.".concat(idx, ".fieldValue");
-                    updateNewValue(needUpdateFieldPath, r.newValue);
-                    return r;
-                });
-            }
-        });
-    }
-}, constant_1.DELAY_TIME_RUN_SCRIPT);

package/lib/ACM-AXN/ViewTemplate/common.d.ts

@@ -1,7 +1,8 @@
-import { Configs } from "./interface";
+import { Configs } from './interface';
 export declare const fillConfigs: (input: any) => any;
 export declare const isJSON: (value: any) => boolean;
 export declare const getValueByPath: (object: any, path: string) => any;
+export declare const runScriptSandBox: (params: any[], script: string) => Promise<any>;
 export declare const runScript: (params: any[], script: string) => Promise<unknown>;
 export declare const convertRelativeLink: (link: string, pagePath: string, templateId: string, configs: Configs) => string;
 export declare const generateRandomInteger: (max: number) => number;

package/lib/ACM-AXN/ViewTemplate/common.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateRandomInteger = exports.convertRelativeLink = exports.runScript = exports.getValueByPath = exports.isJSON = exports.fillConfigs = void 0;
+exports.generateRandomInteger = exports.convertRelativeLink = exports.runScript = exports.runScriptSandBox = exports.getValueByPath = exports.isJSON = exports.fillConfigs = void 0;
 var Enum_1 = require("./Enum");
 var constant_1 = require("./constant");
 var fillConfigs = function (input) {
@@ -15,12 +15,12 @@ var fillConfigs = function (input) {
 };
 exports.fillConfigs = fillConfigs;
 var isJSON = function (value) {
-    if (typeof value !== "string")
+    if (typeof value !== 'string')
         return false;
     try {
         var result = JSON.parse(value);
         var type = Object.prototype.toString.call(result);
-        return type === "[object Object]" || type === "[object Array]";
+        return type === '[object Object]' || type === '[object Array]';
     }
     catch (err) {
         return false;
@@ -28,14 +28,52 @@ var isJSON = function (value) {
 };
 exports.isJSON = isJSON;
 var getValueByPath = function (object, path) {
-    var keys = path.split(".");
+    var keys = path.split('.');
     var result = object;
     for (var i = 0; i < keys.length; i++) {
-        result = (result === null || result === void 0 ? void 0 : result[keys[i]]) || "";
+        result = (result === null || result === void 0 ? void 0 : result[keys[i]]) || '';
     }
     return result;
 };
 exports.getValueByPath = getValueByPath;
+var runScriptSandBox = function (params, script) {
+    try {
+        var sandboxUrl = window.REACT_APP_API_ENDPOINT + '/api/Sandbox';
+        return fetch(sandboxUrl, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json-patch+json',
+                Accept: 'text/plain',
+            },
+            body: JSON.stringify({
+                jsCode: "\n            const fn = (function func() {\n                ".concat(script, "\n            })();\n            return fn(").concat(Array.from(params).map(function (i) { return JSON.stringify(i); }), ");\n        ").trim(),
+                sandboxType: 0,
+            }).trim(),
+            credentials: 'include',
+        })
+            .then(function (r) { return r.json(); })
+            .then(function (r) { return JSON.parse(r.jsResult); });
+    }
+    catch (error) {
+        console.error('Error running script:', error);
+        return Promise.resolve([]);
+    }
+    // return new Promise((resolve, reject) => {
+    //     try {
+    //         // eslint-disable-next-line
+    //         var scriptFunction = new Function(script)()
+    //     } catch (error) {
+    //         scriptFunction = (...params: any[]) => {
+    //             return new Promise((resolve, reject) => resolve([]))
+    //         }
+    //     }
+    //     scriptFunction(...params).then((result: any[]) => {
+    //         console.log('Script result:', result)
+    //         resolve(result)
+    //     })
+    // })
+};
+exports.runScriptSandBox = runScriptSandBox;
 var runScript = function (params, script) {
     return new Promise(function (resolve, reject) {
         try {
@@ -58,12 +96,13 @@ var runScript = function (params, script) {
 };
 exports.runScript = runScript;
 var convertRelativeLink = function (link, pagePath, templateId, configs) {
-    var isTemplatePath = (link === null || link === void 0 ? void 0 : link.includes(constant_1.ACM_TEMPLATE_PATH)) || (link === null || link === void 0 ? void 0 : link.includes(constant_1.ACM_PAGE_PATH));
+    var isTemplatePath = link === null || link === void 0 ? void 0 : link.includes(constant_1.ACM_TEMPLATE_PATH);
     if (isTemplatePath) {
-        return "".concat(configs.TEMPLATE_FILE_PATH, "/").concat(templateId, "/").concat(link.split("/")[link.split("/").length - 1]);
+        return "".concat(configs.TEMPLATE_FILE_PATH, "/").concat(templateId, "/").concat(link.split('/')[link.split('/').length - 1]);
     }
-    return link;
-    // return `${pagePath}/${link.split("/")[link.split("/").length - 1]}` || "";
+    return (link === null || link === void 0 ? void 0 : link.includes(constant_1.ACM_PAGE_PATH))
+        ? "".concat(pagePath, "/").concat(link.split('/')[link.split('/').length - 1]) || ''
+        : link;
 };
 exports.convertRelativeLink = convertRelativeLink;
 var generateRandomInteger = function (max) {

package/lib/ACM-AXN/ViewTemplate/container.js

@@ -60,10 +60,6 @@ function ViewTemplate(_a) {
         control: control,
         name: "templateDatas",
     }).fields;
-    // const { fields } = useFieldArray({
-    //     control,
-    //     name: "templateDatas",
-    // });
     (0, react_1.useEffect)(function () {
         var language = localStorage.getItem("i18nextLng");
         i18n_1.default.changeLanguage(language || "vi");
@@ -89,7 +85,7 @@ function ViewTemplate(_a) {
     return ((0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, spacing: 4, children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, { item: true, xs: enablePreview ? 8 : 12, children: [templateLabelName && ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", style: {
                             fontWeight: "bold",
                             textTransform: "uppercase",
-                        }, children: templateLabelName })), fields && renderFields(fields, false), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { id: "advance-option", style: {
+                        }, children: templateLabelName })), fields && renderFields(fields, false), enablePreview && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { id: "advance-option", style: {
                                     display: "flex",
                                     flexDirection: "row",
                                     justifyContent: "space-between",
@@ -97,7 +93,13 @@ function ViewTemplate(_a) {
                                     cursor: "pointer",
                                 }, onClick: function () {
                                     setAdvanceOptionExpand(!advanceOptionExpand);
-                                }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { style: { fontWeight: "bold" }, children: t("ViewTemplate.AdvanceOption") }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: advanceOptionExpand ? ((0, jsx_runtime_1.jsx)(icons_material_1.ExpandLess, {})) : ((0, jsx_runtime_1.jsx)(icons_material_1.ExpandMore, {})) })] }), advanceOptionExpand && ((0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, children: [fields && advanceFields.length > 0 && renderFields(fields, true), (0, jsx_runtime_1.jsx)(Event_1.default, __assign({}, props))] }))] })] }), enablePreview && ((0, jsx_runtime_1.jsxs)(material_1.Grid, { item: true, xs: 4, children: [(0, jsx_runtime_1.jsx)(Preview_1.default, { domainId: domainId || "", validStatus: validStatus, configs: CONFIGS, pagePath: pagePath, templateDatas: templateDatas }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", children: t("ViewTemplate.PreviewLoadingNote") })] }))] }));
+                                }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { style: { fontWeight: "bold" }, children: t("ViewTemplate.AdvanceOption") }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: advanceOptionExpand ? ((0, jsx_runtime_1.jsx)(icons_material_1.ExpandLess, {})) : ((0, jsx_runtime_1.jsx)(icons_material_1.ExpandMore, {})) })] }), (0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, sx: {
+                                    transition: "all 3s",
+                                }, style: advanceOptionExpand ? {
+                                    display: "block",
+                                } : {
+                                    display: "none",
+                                }, children: [fields && advanceFields.length > 0 && renderFields(fields, true), (0, jsx_runtime_1.jsx)(Event_1.default, __assign({}, props))] })] }))] }), enablePreview && ((0, jsx_runtime_1.jsxs)(material_1.Grid, { item: true, xs: 4, children: [(0, jsx_runtime_1.jsx)(Preview_1.default, { domainId: domainId || "", validStatus: validStatus, configs: CONFIGS, pagePath: pagePath, templateDatas: templateDatas }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", children: t("ViewTemplate.PreviewLoadingNote") })] }))] }));
 }
 exports.default = ViewTemplate;
 var getChilds = function (fields, fieldInfo) {
@@ -117,21 +119,18 @@ var addChilds = function (fields, fieldInfo) {
     }
     return result;
 };
-var convertToTreeData = function (data) {
-    var treeData = data
-        .map(function (item) { return addChilds(data, item); })
-        .filter(function (item) { return !item.fieldName.includes("."); })
-        .map(function (item) {
-        if ([Enum_1.TYPE_FIELD_TEMPLATE.LIST, Enum_1.TYPE_FIELD_TEMPLATE.OBJECT].includes(item.fieldType)) {
-            return __assign(__assign({}, item), { fieldValue: item.fieldValue && (0, common_1.isJSON)(item.fieldValue)
-                    ? JSON.parse(item.fieldValue)
-                    : item.fieldType === Enum_1.TYPE_FIELD_TEMPLATE.LIST
-                        ? []
-                        : {} });
-        }
-        else {
-            return item;
-        }
-    });
-    return treeData;
-};
+var convertToTreeData = function (data) { return data
+    .map(function (item) { return addChilds(data, item); })
+    .filter(function (item) { return !item.fieldName.includes("."); })
+    .map(function (item) {
+    if ([Enum_1.TYPE_FIELD_TEMPLATE.LIST, Enum_1.TYPE_FIELD_TEMPLATE.OBJECT].includes(item.fieldType)) {
+        return __assign(__assign({}, item), { fieldValue: item.fieldValue && (0, common_1.isJSON)(item.fieldValue)
+                ? JSON.parse(item.fieldValue)
+                : item.fieldType === Enum_1.TYPE_FIELD_TEMPLATE.LIST
+                    ? []
+                    : {} });
+    }
+    else {
+        return item;
+    }
+}); };

package/lib/ACM-AXN/Wizard/CreateOrEdit/PageTemplate.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
-import { IWizardTemplate } from '../Types';
+import { Directory, TemplateType, IWizardTemplate } from '../Types';
 interface PropsPageTemplate {
     pageCodeValue: number;
+    directories: Directory[];
+    templateTypes: TemplateType[];
     wizardTemplates: IWizardTemplate[];
     onConfirmExit: () => void;
     onChange: (wizardNew: object) => void;

package/lib/ACM-AXN/Wizard/CreateOrEdit/PageTemplate.js

@@ -19,55 +19,45 @@ var react_1 = require("react");
 var react_i18next_1 = require("react-i18next");
 var Add_1 = __importDefault(require("@mui/icons-material/Add"));
 var material_1 = require("@mui/material");
-var Hooks_1 = __importDefault(require("../Hooks"));
 var RowTemplate_1 = __importDefault(require("./RowTemplate"));
 var AWING_1 = require("../../../AWING");
 var enums_1 = require("../../../ACM-AXN/Page/enums");
 var Utils_1 = require("../Utils");
 function PageTemplate(props) {
-    var pageCodeValue = props.pageCodeValue, wizardTemplates = props.wizardTemplates, onChange = props.onChange, onConfirmExit = props.onConfirmExit, _a = props.onUpdateWizardLogin, onUpdateWizardLogin = _a === void 0 ? function () { return null; } : _a;
+    var pageCodeValue = props.pageCodeValue, wizardTemplates = props.wizardTemplates, templateTypes = props.templateTypes, directories = props.directories, onChange = props.onChange, onConfirmExit = props.onConfirmExit, _a = props.onUpdateWizardLogin, onUpdateWizardLogin = _a === void 0 ? function () { return null; } : _a;
     var t = (0, react_i18next_1.useTranslation)().t;
-    var service = (0, Hooks_1.default)().service;
     var isPageCodeLogin = pageCodeValue === enums_1.PageCode.Lgn;
     var pageCode = pageCodeValue === enums_1.PageCode.Lgn ? Utils_1.CPageCode.LGN : Utils_1.CPageCode.WLC;
     var _b = (0, react_1.useState)(true), loadingDirectory = _b[0], setLoadingDirectories = _b[1];
     var _c = (0, react_1.useState)(true), loadingtemplateTypes = _c[0], setLoadingTemplateTypes = _c[1];
     // DATA => Tên Thư Mục
-    var _d = (0, react_1.useState)([]), directories = _d[0], setDirectories = _d[1];
+    var _d = (0, react_1.useState)([]), pageDirectories = _d[0], setPageDirectories = _d[1];
     // DATA => Kiểu template
-    var _e = (0, react_1.useState)([]), templateTypes = _e[0], setTemplateTypes = _e[1];
-    (0, react_1.useEffect)(function () {
-        service
-            .templatesGetDirectories()
-            .then(function (directories_) {
+    var _e = (0, react_1.useState)([]), pageTemplateTypes = _e[0], setPageTemplateTypes = _e[1];
+    (0, react_1.useLayoutEffect)(function () {
+        if (directories.length > 0) {
             // CALL API => DATA => Tên Thư Mục
-            var systemDirectoryIndex = directories_ === null || directories_ === void 0 ? void 0 : directories_.findIndex(function (directory) {
+            var systemDirectoryIndex = directories === null || directories === void 0 ? void 0 : directories.findIndex(function (directory) {
                 return directory.parentDirectoryId ===
                     Utils_1.ROOT_DIRECTORY.SYSTEM_DIRECTORY.toString();
             });
             if (systemDirectoryIndex !== -1) {
-                directories_[systemDirectoryIndex].name = 'SYSTEM TEMPLATE';
+                directories[systemDirectoryIndex].name = 'SYSTEM TEMPLATE';
             }
-            setDirectories(directories_);
-        })
-            .finally(function () {
-            setLoadingDirectories(false);
-        });
+            setPageDirectories(directories);
+            loadingDirectory && setLoadingDirectories(false);
+        }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    (0, react_1.useEffect)(function () {
-        service
-            .templateTypesGet()
-            .then(function (templateTypes_) {
-            setTemplateTypes(templateTypes_.filter(function (itemTemplate) {
+    }, [directories.length]);
+    (0, react_1.useLayoutEffect)(function () {
+        if (templateTypes.length > 0) {
+            setPageTemplateTypes(templateTypes.filter(function (itemTemplate) {
                 return itemTemplate.templateTypeCode === pageCode;
             }));
-        })
-            .finally(function () {
-            setLoadingTemplateTypes(false);
-        });
+            loadingtemplateTypes && setLoadingTemplateTypes(false);
+        }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [pageCodeValue]);
+    }, [templateTypes.length]);
     var handleChangeRowTemplate = function (fieldValue, sortOrder) {
         var _a;
         onConfirmExit();
@@ -93,6 +83,6 @@ function PageTemplate(props) {
                             ? t('Wizard.LoginTemplate')
                             : t('Wizard.WelcomeTemplate') }), isPageCodeLogin && ((0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", "aria-label": "button-add", title: t('Common.Add'), "data-testid": "button-add", onClick: function () {
                             return onUpdateWizardLogin(Utils_1.TYPE_LOGIN_TEMPLATE.ADD);
-                        }, children: (0, jsx_runtime_1.jsx)(Add_1.default, {}) }))] }), loadingDirectory || loadingtemplateTypes ? ((0, jsx_runtime_1.jsx)(AWING_1.CircularProgress, {})) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: wizardTemplates.map(function (template, idx) { return ((0, jsx_runtime_1.jsx)(RowTemplate_1.default, { template: template, pageCode: pageCode, directories: directories, templateTypes: templateTypes, onChangeRow: handleChangeRowTemplate, onUpdateWizardLogin: onUpdateWizardLogin, disabledIconDelete: wizardTemplates.length === 1 }, idx)); }) }))] }));
+                        }, children: (0, jsx_runtime_1.jsx)(Add_1.default, {}) }))] }), loadingDirectory || loadingtemplateTypes ? ((0, jsx_runtime_1.jsx)(AWING_1.CircularProgress, {})) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: wizardTemplates.map(function (template, idx) { return ((0, jsx_runtime_1.jsx)(RowTemplate_1.default, { template: template, pageCode: pageCode, directories: pageDirectories, templateTypes: pageTemplateTypes, onChangeRow: handleChangeRowTemplate, onUpdateWizardLogin: onUpdateWizardLogin, disabledIconDelete: wizardTemplates.length === 1 }, idx)); }) }))] }));
 }
 exports.default = (0, react_1.memo)(PageTemplate);

package/lib/ACM-AXN/Wizard/CreateOrEdit/PageTemplate.test.js

@@ -76,6 +76,8 @@ describe('PageTemplate component', function () {
     var mockData = {
         pageCodeValue: 1,
         wizardTemplates: [],
+        directories: [],
+        templateTypes: [],
         onConfirmExit: jest.fn(),
         onChange: jest.fn(),
         onUpdateWizardLogin: jest.fn(),

package/lib/ACM-AXN/Wizard/CreateOrEdit/RowTemplate.js

@@ -47,7 +47,7 @@ function RowTemplate(props) {
     }, [template]);
     (0, react_1.useEffect)(function () {
         if (wizardTemplate === null || wizardTemplate === void 0 ? void 0 : wizardTemplate.directoryId) {
-            setIsLoadingParameter(true);
+            !isLoadingParameter && setIsLoadingParameter(true);
             service
                 .templatesGetByDirectoryId(wizardTemplate.directoryId)
                 .then(function (template_) {

package/lib/ACM-AXN/Wizard/CreateOrEdit/index.js

@@ -49,6 +49,22 @@ function CreateOrEdit() {
     }), wizardData = _c[0], setWizardData = _c[1];
     // Nhóm Wizard
     var _d = (0, react_1.useState)([]), wizardGroup = _d[0], setWizardGroup = _d[1];
+    // DATA => Kiểu template
+    var _e = (0, react_1.useState)([]), templateTypes = _e[0], setTemplateTypes = _e[1];
+    // DATA => Tên Thư Mục
+    var _f = (0, react_1.useState)([]), directories = _f[0], setDirectories = _f[1];
+    (0, react_1.useEffect)(function () {
+        if (!templateTypes.length) {
+            service.templateTypesGet().then(setTemplateTypes);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [templateTypes.length]);
+    (0, react_1.useEffect)(function () {
+        if (!directories.length) {
+            service.templatesGetDirectories().then(setDirectories);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [directories.length]);
     (0, react_1.useEffect)(function () {
         if (id) {
             setLoading(true);
@@ -125,7 +141,7 @@ function CreateOrEdit() {
             hasValidData((wizardData === null || wizardData === void 0 ? void 0 : wizardData.wizardWelcomeTemplates) || []));
     };
     return ((0, jsx_runtime_1.jsx)(ClassicDrawer_1.default, { title: id ? t('Common.Edit') : t('Common.Create'), onSubmit: handleSubmit, confirmExit: confirmExit, childrenWrapperStyle: { padding: 0 }, disableButtonSubmit: !(isDisable() && confirmExit), children: loading ? ((0, jsx_runtime_1.jsx)(AWING_1.CircularProgress, {})) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FormInformationBasic_1.default, { wizardData: wizardData, wizardGroup: wizardGroup, onChange: handleChange, onConfirmExit: handleConfirmExit }), TEMPLATES.map(function (value) {
-                    return ((0, jsx_runtime_1.jsx)(PageTemplate_1.default, { pageCodeValue: value, onChange: handleChange, onConfirmExit: handleConfirmExit, wizardTemplates: value === enums_1.PageCode.Lgn
+                    return ((0, jsx_runtime_1.jsx)(PageTemplate_1.default, { pageCodeValue: value, onChange: handleChange, directories: directories, templateTypes: templateTypes, onConfirmExit: handleConfirmExit, wizardTemplates: value === enums_1.PageCode.Lgn
                             ? (wizardData === null || wizardData === void 0 ? void 0 : wizardData.wizardLoginTemplates) || []
                             : (wizardData === null || wizardData === void 0 ? void 0 : wizardData.wizardWelcomeTemplates) ||
                                 [], onUpdateWizardLogin: handleUpdateWizardLoginTemplate }, value));

package/lib/ACM-AXN/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./PlaceFilter";
 export * from "./Permission";
+export * from "./Template";

package/lib/ACM-AXN/index.js

@@ -16,3 +16,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./PlaceFilter"), exports);
 __exportStar(require("./Permission"), exports);
+__exportStar(require("./Template"), exports);

package/lib/AWING/AsyncAutocomplete/index.js

@@ -33,7 +33,7 @@ var Autocomplete_1 = __importDefault(require("@mui/material/Autocomplete"));
 var Checkbox_1 = __importDefault(require("@mui/material/Checkbox"));
 var CheckBoxOutlineBlank_1 = __importDefault(require("@mui/icons-material/CheckBoxOutlineBlank"));
 var CheckBox_1 = __importDefault(require("@mui/icons-material/CheckBox"));
-var throttle_1 = __importDefault(require("lodash/throttle"));
+var lodash_1 = require("lodash");
 function AsyncAutocomplete(props) {
     var _a;
     var multiple = props.multiple, _b = props.value, value = _b === void 0 ? null : _b, onChange = props.onChange, fetchData = props.fetchData, getOptionValue = props.getOptionValue, getOptionLabel = props.getOptionLabel, readOnly = props.readOnly, TextFieldProps = props.TextFieldProps, renderOption = props.renderOption;
@@ -41,7 +41,7 @@ function AsyncAutocomplete(props) {
     var _d = react_2.default.useState([]), options = _d[0], setOptions = _d[1];
     var _e = react_2.default.useState(false), loading = _e[0], setLoading = _e[1];
     var fetch = react_2.default.useMemo(function () {
-        return (0, throttle_1.default)(function (input, callback) {
+        return (0, lodash_1.debounce)(function (input, callback) {
             setLoading(true);
             fetchData(input)
                 .then(function (response) {