awing-library 2.1.2-beta → 2.1.2-stage

package/lib/ACM-AXN/ViewTemplate/TemplateField/Event.js

@@ -0,0 +1,69 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var validation_1 = require("../../../AWING/ultis/validation");
+var Helpers_1 = require("../../../Utils/Helpers");
+var i18n_1 = __importDefault(require("../../../i18n"));
+var lodash_1 = require("lodash");
+var react_1 = __importDefault(require("react"));
+var react_i18next_1 = require("react-i18next");
+var Events = function (_a) {
+    var viewEvents = _a.viewEvents, onChangeEvent = _a.onChangeEvent, disabledLabel = _a.disabledLabel;
+    var t = (0, react_i18next_1.useTranslation)(undefined, { i18n: i18n_1.default }).t;
+    var _b = react_1.default.useState(''), tempValue = _b[0], setTempValue = _b[1];
+    var _c = react_1.default.useState(''), error = _c[0], setError = _c[1];
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+            marginBottom: 2,
+            width: '100%',
+        }, children: (0, jsx_runtime_1.jsx)(material_1.TextField, __assign({ error: !!error, helperText: error, fullWidth: true, variant: "standard", placeholder: "".concat(t('Common.Events'), "...") }, (!disabledLabel && { label: t('Common.Events') }), { inputProps: {
+                autoComplete: 'off',
+            }, value: tempValue, onKeyDown: function (e) {
+                if (e.key === 'Enter') {
+                    var _a = (0, validation_1.textValidation)(tempValue, 50, false, /^[a-zA-Z0-9đĐ_.()\u0080-\uFFFF]+$/g), valid = _a.valid, message = _a.message;
+                    var isStartWithNumber = tempValue.match(/^\d/);
+                    if (viewEvents.map(function (item) { return item.event; }).includes((0, Helpers_1.changeToAlias)(tempValue)) || !valid || isStartWithNumber) {
+                        setError(!valid ? message : isStartWithNumber ? t('Common.InvalidData') : t('Common.Existed').replace('{0}', tempValue));
+                        return;
+                    }
+                    onChangeEvent((0, lodash_1.uniqBy)(viewEvents.concat({ event: tempValue, id: 0 }), function (item) { return (0, Helpers_1.changeToAlias)(item.event); }));
+                    setTempValue('');
+                }
+            }, onChange: function (event) {
+                setTempValue(event.target.value);
+                setError('');
+            }, InputProps: {
+                inputProps: {
+                    autoComplete: 'off',
+                    sx: {
+                        width: 'auto!important',
+                        display: 'flex',
+                        flex: '1 1 auto',
+                    },
+                },
+                sx: {
+                    flexWrap: 'wrap',
+                },
+                startAdornment: viewEvents.map(function (option) { return ((0, jsx_runtime_1.jsx)(material_1.Chip, { sx: {
+                        marginRight: 1,
+                        marginBottom: 0.5,
+                    }, label: option.event, title: option.event, disabled: option === null || option === void 0 ? void 0 : option.protected, onDelete: function () {
+                        onChangeEvent(viewEvents.filter(function (item) { return item.event !== option.event; }));
+                    } }, option.event)); }),
+            } })) }));
+};
+exports.default = Events;

package/lib/ACM-AXN/ViewTemplate/TemplateField/Event.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/ACM-AXN/ViewTemplate/TemplateField/Event.test.js

@@ -0,0 +1,84 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable testing-library/no-wait-for-side-effects */
+var react_1 = require("@testing-library/react");
+var Event_1 = __importDefault(require("./Event"));
+// Mock i18next
+jest.mock('react-i18next', function () { return (__assign(__assign({}, jest.requireActual('react-i18next')), { useTranslation: function () { return ({ t: jest.fn(function (key) { return key; }) }); } })); });
+var props = {
+    viewEvents: [
+        { id: 1101, event: 'event', pageId: 'pageId' },
+        { id: 113, event: 'event-2xxx', pageId: 'pageId' },
+    ],
+    onChangeEvent: jest.fn(function (values) { }),
+};
+var renderUi = function (p) {
+    if (p === void 0) { p = props; }
+    return (0, react_1.render)((0, jsx_runtime_1.jsx)(Event_1.default, __assign({}, p)));
+};
+describe('Import Template component', function () {
+    it('render without crash', function () {
+        // Biên viewEvents
+        renderUi(__assign(__assign({}, props), { viewEvents: [] }));
+        renderUi();
+        expect(react_1.screen.getByText('event-2xxx')).toBeInTheDocument();
+    });
+    it('Remove event', function () {
+        renderUi();
+        react_1.screen.getAllByTestId('CancelIcon').forEach(function (removeBtn) {
+            expect(removeBtn).toBeInTheDocument();
+            react_1.fireEvent.click(removeBtn);
+            expect(props.onChangeEvent).toBeCalled();
+        });
+    });
+    it('Add event Lỗi ký tự', function () {
+        renderUi();
+        var textBox = react_1.screen.getByRole('textbox', { name: 'Common.Events' });
+        react_1.fireEvent.change(textBox, { target: { value: 'new-event@$#' } });
+        react_1.fireEvent.keyDown(textBox, { key: 'Enter' });
+        expect(react_1.screen.getByText('Ký tự không hợp lệ: - @ $ #')).toBeInTheDocument();
+    });
+    it('Add event Existed', function () {
+        renderUi();
+        var textBox = react_1.screen.getByRole('textbox', { name: 'Common.Events' });
+        react_1.fireEvent.change(textBox, { target: { value: 'event' } });
+        react_1.fireEvent.keyDown(textBox, { key: 'Enter' });
+        expect(react_1.screen.getByText('Common.Existed')).toBeInTheDocument();
+    });
+    it('Add event start with number', function () {
+        renderUi();
+        var textBox = react_1.screen.getByRole('textbox', { name: 'Common.Events' });
+        react_1.fireEvent.change(textBox, { target: { value: '123event' } });
+        react_1.fireEvent.keyDown(textBox, { key: 'Enter' });
+        expect(react_1.screen.getByText('Common.InvalidData')).toBeInTheDocument();
+    });
+    it('Add event', function () {
+        renderUi();
+        var textBox = react_1.screen.getByRole('textbox', { name: 'Common.Events' });
+        react_1.fireEvent.change(textBox, { target: { value: 'newEvent' } });
+        react_1.fireEvent.keyDown(textBox, { key: 'Enter' });
+        expect(props.onChangeEvent).toBeCalled();
+    });
+    it('Add event without Enter', function () {
+        renderUi();
+        var textBox = react_1.screen.getByRole('textbox', { name: 'Common.Events' });
+        react_1.fireEvent.change(textBox, { target: { value: 'newEvent' } });
+        react_1.fireEvent.keyDown(textBox, { key: 'Esc' });
+        expect(react_1.screen.getByDisplayValue('newEvent')).toBeInTheDocument();
+    });
+});

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

@@ -25,6 +25,7 @@ var constant_1 = require("../../../constant");
 var Enum_1 = require("../../../Enum");
 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 useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
     paper: {
@@ -64,6 +65,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' &&
@@ -76,13 +78,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) {
@@ -101,11 +107,13 @@ function BasicField(props) {
     var renderField = function () {
         // const isError = !!getValueByPath(/*errors*/ {}, fieldPath)
         var isError = errors.includes(fieldPath);
-        var field = register(fieldPath, { required: isRequired });
+        var field = register(fieldPath, __assign({ required: isRequired }, fieldType === Enum_1.TYPE_FIELD_TEMPLATE.URL && {
+            onValidate: function (value) { return (0, validation_1.urlValid)(value); }
+        }));
         switch (fieldType) {
             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);
             case Enum_1.TYPE_FIELD_TEMPLATE.TEXTAREA:
                 return renderTextField(field, isError);
@@ -124,51 +132,24 @@ 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>
-        // )
     };
     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' }
-            : {}), (fieldType === Enum_1.TYPE_FIELD_TEMPLATE.TEXTAREA
+        return ((0, jsx_runtime_1.jsx)(material_1.TextField, __assign({}, field, { className: classes.text, required: isRequired, fullWidth: true, inputProps: fieldType === Enum_1.TYPE_FIELD_TEMPLATE.TEXT_FIELD_NUMBER
+                ? { type: 'number' }
+                : {} }, (fieldType === Enum_1.TYPE_FIELD_TEMPLATE.TEXTAREA
             ? { multiline: true, rows: 4 }
             : {}), { variant: "standard", label: labelName || fieldName, onChange: function (e) {
                 handleChange(e.target.value);
-            }, error: isError, helperText: isError ? t('Common.Required') : '' })));
+            }, error: isError, helperText: isError
+                ? fieldType === Enum_1.TYPE_FIELD_TEMPLATE.URL &&
+                    !(0, validation_1.urlValid)(field.value)
+                    ? t('Common.InvalidData')
+                    : t('Common.Required')
+                : '' })));
     };
     var renderDropdownListField = function (field, isError) {
         var opts = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.split('\\n');
-        return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, __assign({}, field, { fullWidth: true, component: "fieldset", className: classes.radioGroup, error: isError, children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { required: true, id: "deviceTypeLabel", children: labelName || fieldName }), (0, jsx_runtime_1.jsx)(material_1.Select, { fullWidth: true, defaultValue: '', value: getValues(fieldPath), MenuProps: {
+        return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, __assign({}, field, { fullWidth: true, component: "fieldset", className: classes.radioGroup, error: isError, children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { required: true, id: "deviceTypeLabel", variant: "standard", children: labelName || fieldName }), (0, jsx_runtime_1.jsx)(material_1.Select, { variant: "standard", fullWidth: true, defaultValue: '', value: getValues(fieldPath), MenuProps: {
                         anchorOrigin: {
                             vertical: 'bottom',
                             horizontal: 'left',

package/lib/ACM-AXN/ViewTemplate/TemplateField/Fields/ObjectField.d.ts

@@ -1,3 +1,5 @@
 import { FieldProps, FieldInfo } from "../../interface";
+import { DataObject } from "../../../../AWING";
 export default function ObjectField(props: FieldProps): import("react/jsx-runtime").JSX.Element;
+export declare const getChilds: <T extends Record<string, DataObject>>(child: T, action: (p: T) => any) => any;
 export declare const getObjectDefaultValue: (fieldInfo: FieldInfo) => any;

package/lib/ACM-AXN/ViewTemplate/TemplateField/Fields/ObjectField.js

@@ -14,13 +14,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getObjectDefaultValue = void 0;
+exports.getObjectDefaultValue = exports.getChilds = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var ListField_1 = require("./ListField");
 var material_1 = require("@mui/material");
 var styles_1 = require("@mui/styles");
 var TemplateField_1 = __importDefault(require("../../TemplateField"));
 var react_1 = require("react");
+var Helpers_1 = require("../../../../Utils/Helpers");
+var lodash_1 = require("lodash");
 var useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
     root: {
         textAlign: "center",
@@ -70,13 +72,27 @@ function ObjectField(props) {
                     fieldChild.fieldName.split(".").slice(-1)[0]) }), index)); }) })] }));
 }
 exports.default = ObjectField;
+var getChilds = function (child, action) {
+    var _a;
+    action(child);
+    if (((_a = child === null || child === void 0 ? void 0 : child.childrens) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+        return child.childrens.map(function (c) { return (0, exports.getChilds)(c, action); });
+    }
+};
+exports.getChilds = getChilds;
 var getObjectDefaultValue = function (fieldInfo) {
     var _a;
     var result = {};
     (_a = fieldInfo === null || fieldInfo === void 0 ? void 0 : fieldInfo.childrens) === null || _a === void 0 ? void 0 : _a.map(function (child) {
         if (child.fieldType !== "list") {
-            var defaultValue = child.defaultValue || "";
-            result[child.fieldName.split(".").slice(-1)[0]] = defaultValue;
+            var item_1 = {};
+            (0, exports.getChilds)(child, function (el) {
+                var keys = el.fieldName.split('.');
+                if (keys.length > 1) {
+                    (0, Helpers_1.setObject)(item_1, keys, el.defaultValue);
+                }
+            });
+            result[child.fieldName.split(".").slice(-1)[0]] = (0, lodash_1.get)(item_1, child.fieldName);
         }
         else {
             result[child.fieldName.split(".").slice(-1)[0]] =

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

@@ -62,7 +62,7 @@ var convertRelativeLink = function (link, pagePath, templateId, configs) {
     if (isTemplatePath) {
         return "".concat(configs.TEMPLATE_FILE_PATH, "/").concat(templateId, "/").concat(link.split("/")[link.split("/").length - 1]);
     }
-    return "".concat(pagePath, "/").concat(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/constant.d.ts

@@ -1,2 +1,3 @@
 export declare const ACM_TEMPLATE_PATH = "{acmTemplatePath}";
+export declare const ACM_PAGE_PATH = "{acmPagePath}";
 export declare const DELAY_TIME_RUN_SCRIPT = 1500;

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

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DELAY_TIME_RUN_SCRIPT = exports.ACM_TEMPLATE_PATH = void 0;
+exports.DELAY_TIME_RUN_SCRIPT = exports.ACM_PAGE_PATH = exports.ACM_TEMPLATE_PATH = void 0;
 exports.ACM_TEMPLATE_PATH = "{acmTemplatePath}";
+exports.ACM_PAGE_PATH = "{acmPagePath}";
 exports.DELAY_TIME_RUN_SCRIPT = 1500;

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

@@ -1,2 +1,2 @@
 import { ViewTemplateProps } from "./interface";
-export default function ViewTemplate({ templateDatas, pagePath, enablePreview, advanceFields, templateLabelName, domainId, validStatus, scriptAutoField, scriptValidate, configs, onChange, onChangeViewValid, onChangeValidateProcess, onNotifyError, onUploadFile, }: ViewTemplateProps): import("react/jsx-runtime").JSX.Element;
+export default function ViewTemplate({ templateDatas, pagePath, enablePreview, advanceFields, templateLabelName, domainId, validStatus, scriptAutoField, scriptValidate, configs, onChange, onChangeViewValid, onChangeValidateProcess, onNotifyError, onUploadFile, ...props }: ViewTemplateProps): import("react/jsx-runtime").JSX.Element;

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

@@ -10,6 +10,17 @@ var __assign = (this && this.__assign) || function () {
     };
     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 };
 };
@@ -26,6 +37,7 @@ var react_1 = require("react");
 var react_i18next_1 = require("react-i18next");
 var i18n_1 = __importDefault(require("../../i18n"));
 var Form_1 = require("../../AWING/Form");
+var Event_1 = __importDefault(require("./TemplateField/Event"));
 function ViewTemplate(_a) {
     var _b = _a.templateDatas, templateDatas = _b === void 0 ? [] : _b, pagePath = _a.pagePath, _c = _a.enablePreview, enablePreview = _c === void 0 ? true : _c, _d = _a.advanceFields, advanceFields = _d === void 0 ? [] : _d, _e = _a.templateLabelName, templateLabelName = _e === void 0 ? "" : _e, _f = _a.domainId, domainId = _f === void 0 ? "" : _f, _g = _a.validStatus, validStatus = _g === void 0 ? true : _g, _h = _a.scriptAutoField, scriptAutoField = _h === void 0 ? "" : _h, _j = _a.scriptValidate, scriptValidate = _j === void 0 ? "" : _j, configs = _a.configs, onChange = _a.onChange, _k = _a.onChangeViewValid, onChangeViewValid = _k === void 0 ? function (status) {
         console.log(status);
@@ -33,7 +45,7 @@ function ViewTemplate(_a) {
         console.log(processValue);
     } : _l, _m = _a.onNotifyError, onNotifyError = _m === void 0 ? function (errorMessage) {
         console.log(errorMessage);
-    } : _m, onUploadFile = _a.onUploadFile;
+    } : _m, onUploadFile = _a.onUploadFile, props = __rest(_a, ["templateDatas", "pagePath", "enablePreview", "advanceFields", "templateLabelName", "domainId", "validStatus", "scriptAutoField", "scriptValidate", "configs", "onChange", "onChangeViewValid", "onChangeValidateProcess", "onNotifyError", "onUploadFile"]);
     var t = (0, react_i18next_1.useTranslation)().t;
     var _o = (0, react_1.useState)(false), advanceOptionExpand = _o[0], setAdvanceOptionExpand = _o[1];
     var CONFIGS = (0, common_1.fillConfigs)(configs);
@@ -48,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");
@@ -77,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), fields && advanceFields.length > 0 && ((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), (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",
@@ -85,7 +93,7 @@ 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.jsx)(material_1.Grid, { container: true, children: renderFields(fields, true) }))] }))] }), 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, {})) })] }), 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") })] }))] }));
 }
 exports.default = ViewTemplate;
 var getChilds = function (fields, fieldInfo) {
@@ -105,20 +113,18 @@ var addChilds = function (fields, fieldInfo) {
     }
     return result;
 };
-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;
-        }
-    });
-};
+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/ViewTemplate/index.d.ts

@@ -1,2 +1,3 @@
-export declare function ViewTemplate(props: any): import("react/jsx-runtime").JSX.Element;
+import { ViewTemplateProps } from "./interface";
+export declare function ViewTemplate(props: ViewTemplateProps): import("react/jsx-runtime").JSX.Element;
 export default ViewTemplate;

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

@@ -1,3 +1,4 @@
+import { EventsProps } from "./TemplateField/Event";
 export interface Configs {
     TEMPLATE_FILE_PATH?: string;
     FILE_TEMP_PATH?: string;
@@ -10,7 +11,7 @@ export interface FieldInfo {
     id?: string;
     defaultValue?: string;
     fieldName: string;
-    fieldType: "image" | "textfield" | "video" | "textfield_number" | "html" | "checkbox" | "textarea" | "dropdownlist" | "checkboxlist" | "list" | "object" | "color";
+    fieldType: "image" | "textfield" | "video" | "textfield_number" | "html" | "checkbox" | "textarea" | "dropdownlist" | "checkboxlist" | "list" | "object" | "color" | "url";
     fieldValue?: any;
     isRequired: boolean;
     labelName?: string;
@@ -48,7 +49,7 @@ export interface FieldProps {
     onNotifyError: (errorMessage: string) => void;
     onUploadFile: (files: any[]) => Promise<string>;
 }
-export interface ViewTemplateProps {
+export interface ViewTemplateProps extends EventsProps {
     templateDatas: FieldInfo[];
     /**
      * Đường dẫn tuyệt đối các file của page
@@ -90,5 +91,5 @@ export interface ViewTemplateProps {
      * Hiển thị thông báo lỗi
      */
     onNotifyError?: (errorMessage: string) => void;
-    onUploadFile: (files: any[]) => Promise<string>;
+    onUploadFile: (files: any[]) => Promise<any>;
 }

package/lib/ACM-AXN/Wizard/Container.d.ts

@@ -0,0 +1,2 @@
+declare function Container(): import("react/jsx-runtime").JSX.Element;
+export default Container;

package/lib/ACM-AXN/Wizard/Container.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_i18next_1 = require("react-i18next");
+var Hooks_1 = __importDefault(require("./Hooks"));
+var Context_1 = require("../../Context");
+var Router_1 = require("../../AWING/Router");
+var Constant_1 = require("../Common/Constant");
+var AWING_1 = require("../../AWING");
+function Container() {
+    var _a;
+    var navigate = (0, Router_1.useNavigate)();
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var service = (0, Hooks_1.default)().service;
+    var confirm = (0, Context_1.useAwing)().appHelper.confirm;
+    var _b = (0, react_1.useState)(false), loading = _b[0], setLoading = _b[1];
+    var _c = (0, react_1.useState)(), wizards = _c[0], setWizards = _c[1];
+    var queryData = (0, react_1.useCallback)(function (queryInput) {
+        var _a;
+        setLoading(true);
+        service
+            .wizardsPaging(undefined, (_a = queryInput === null || queryInput === void 0 ? void 0 : queryInput.searchString) === null || _a === void 0 ? void 0 : _a.trim(), queryInput.pageIndex, queryInput.pageSize)
+            .then(setWizards)
+            .finally(function () {
+            setLoading(false);
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(AWING_1.PageManagement, { title: t('Wizard.Title'), onChangeQueryInput: queryData, inputSearchPlaceholder: t('Wizard.SearchPlaceholder'), columns: [
+            {
+                field: 'id',
+                headerName: '#',
+                valueGetter: function (row, idx, stt) { return stt; },
+                width: 60,
+            },
+            {
+                field: 'name',
+                headerName: t('Common.Name'),
+            },
+        ], loading: loading, confirmDelete: confirm, getRowId: function (row) { return row.id; }, rows: (wizards === null || wizards === void 0 ? void 0 : wizards.items) || [], onDelete: (_a = service.wizardsDelete) === null || _a === void 0 ? void 0 : _a.bind(service), totalOfRows: (wizards === null || wizards === void 0 ? void 0 : wizards.totalItemCount) || 0, onRowClick: function (id) { return navigate("".concat(Constant_1.Constants.EDIT_PATH, "/").concat(id)); }, onCreateButtonClick: function () { return navigate("".concat(Constant_1.Constants.CREATE_PATH)); } }));
+}
+exports.default = Container;

package/lib/ACM-AXN/Wizard/Container.test.d.ts

@@ -0,0 +1 @@
+export {};