awing-library 2.1.1 → 2.1.2-stage

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

@@ -11,12 +11,12 @@ var react_i18next_1 = require("react-i18next");
 var Router_1 = require("../../AWING/Router");
 var Hook_1 = __importDefault(require("./Hook"));
 var Context_1 = require("../../Context");
-var Constants_1 = require("./Constants");
+var Constant_1 = require("../../ACM-AXN/Common/Constant");
 var Container = function () {
     var t = (0, react_i18next_1.useTranslation)().t;
     var _a = (0, Hook_1.default)(), service = _a.service, currentUser = _a.currentUser;
     var _b = (0, Context_1.useAwing)().appHelper, confirm = _b.confirm, snackbar = _b.snackbar;
-    var _c = (0, react_1.useState)(false), loading = _c[0], setLoading = _c[1];
+    var _c = (0, react_1.useState)(true), loading = _c[0], setLoading = _c[1];
     var _d = (0, react_1.useState)(), users = _d[0], setUsers = _d[1];
     var handleNavigate = function () {
         window.open("".concat(window.REACT_APP_ID_DOMAIN, "/organization/").concat(currentUser.userId, "/User"), '_blank');
@@ -55,6 +55,6 @@ var Container = function () {
                         return t('Common.Gender.Gender_' + row.gender);
                     },
                 },
-            ], loading: loading, rows: (users === null || users === void 0 ? void 0 : users.items) || [], onCreateButtonClick: handleNavigate, customActions: (0, jsx_runtime_1.jsx)(material_1.Button, { component: Router_1.Link, to: Constants_1.ADD_EXISTED_USER, variant: "outlined", size: "medium", sx: { marginLeft: '16px', fontWeight: 'bold' }, children: t('User.AddExistedUser') }), totalOfRows: users === null || users === void 0 ? void 0 : users.totalItemCount, onDelete: handleDelete, confirmDelete: confirm }) }));
+            ], loading: loading, rows: (users === null || users === void 0 ? void 0 : users.items) || [], onCreateButtonClick: handleNavigate, customActions: (0, jsx_runtime_1.jsx)(material_1.Button, { component: Router_1.Link, to: Constant_1.Constants.ADD_EXISTED_USER, variant: "outlined", size: "medium", sx: { marginLeft: '16px', fontWeight: 'bold' }, children: t('User.AddExistedUser') }), totalOfRows: users === null || users === void 0 ? void 0 : users.totalItemCount, onDelete: handleDelete, confirmDelete: confirm }) }));
 };
 exports.default = Container;

package/lib/ACM-AXN/User/index.js

@@ -11,8 +11,8 @@ var Hook_1 = require("./Hook");
 var react_i18next_1 = require("react-i18next");
 var react_helmet_async_1 = require("react-helmet-async");
 var i18n_1 = __importDefault(require("../../i18n"));
-var Constants_1 = require("./Constants");
+var Constant_1 = require("../../ACM-AXN/Common/Constant");
 var Add_1 = __importDefault(require("./Add"));
-var UserFeature = function (props) { return ((0, jsx_runtime_1.jsx)(react_i18next_1.I18nextProvider, { i18n: i18n_1.default, children: (0, jsx_runtime_1.jsx)(react_helmet_async_1.HelmetProvider, { children: (0, jsx_runtime_1.jsxs)(Hook_1.userPropsContext.Provider, { value: props, children: [(0, jsx_runtime_1.jsx)(Container_1.default, {}), (0, jsx_runtime_1.jsx)(Router_1.Routes, { children: (0, jsx_runtime_1.jsx)(Router_1.Route, { path: Constants_1.ADD_EXISTED_USER, element: (0, jsx_runtime_1.jsx)(Add_1.default, {}) }, Constants_1.ADD_EXISTED_USER) })] }) }) })); };
+var UserFeature = function (props) { return ((0, jsx_runtime_1.jsx)(react_i18next_1.I18nextProvider, { i18n: i18n_1.default, children: (0, jsx_runtime_1.jsx)(react_helmet_async_1.HelmetProvider, { children: (0, jsx_runtime_1.jsxs)(Hook_1.userPropsContext.Provider, { value: props, children: [(0, jsx_runtime_1.jsx)(Container_1.default, {}), (0, jsx_runtime_1.jsx)(Router_1.Routes, { children: (0, jsx_runtime_1.jsx)(Router_1.Route, { path: Constant_1.Constants.ADD_EXISTED_USER, element: (0, jsx_runtime_1.jsx)(Add_1.default, {}) }, Constant_1.Constants.ADD_EXISTED_USER) })] }) }) })); };
 exports.UserFeature = UserFeature;
 exports.default = exports.UserFeature;

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

@@ -11,6 +11,7 @@ export declare const TYPE_FIELD_TEMPLATE: {
     LIST: string;
     OBJECT: string;
     COLOR: string;
+    URL: string;
 };
 export declare const PAGE_CODES: {
     PageCodeLogin: string;

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

@@ -14,6 +14,7 @@ exports.TYPE_FIELD_TEMPLATE = {
     LIST: "list",
     OBJECT: "object",
     COLOR: "color",
+    URL: "url",
 };
 exports.PAGE_CODES = {
     PageCodeLogin: "lgn",

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

@@ -1,15 +1,38 @@
 "use strict";
+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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 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_1 = __importStar(require("react"));
 var styles_1 = require("@mui/styles");
 var material_1 = require("@mui/material");
 var Refresh_1 = __importDefault(require("@mui/icons-material/Refresh"));
 var react_i18next_1 = require("react-i18next");
-var debounce = require("lodash/debounce");
+var lodash_1 = require("lodash");
 var useStyles = (0, styles_1.makeStyles)(function () { return ({
     root: {
         width: "100%",
@@ -20,52 +43,41 @@ var Preview = function (props) {
     var _a;
     var classes = useStyles();
     var t = (0, react_i18next_1.useTranslation)().t;
-    var validStatus = props.validStatus, pagePath = props.pagePath, templateDatas = props.templateDatas, domainId = props.domainId, configs = props.configs, onChangeField = props.onChangeField;
+    var validStatus = props.validStatus, pagePath = props.pagePath, templateDatas = props.templateDatas, domainId = props.domainId, configs = props.configs;
     var viewIndex = ((_a = templateDatas[0]) === null || _a === void 0 ? void 0 : _a.viewNumber) || -1;
+    var formRef = react_1.default.useRef(null);
     var iframeSrc = (0, react_1.useMemo)(function () {
         var result = "".concat(configs.CAPTIVE_DOMAIN, "/").concat(configs.TEMPLATE_PREVIEW, "?domainId=").concat(domainId);
         if (result.startsWith("http://"))
             result = result.replace("http://", "https://");
         return result;
     }, [configs.CAPTIVE_DOMAIN, configs.TEMPLATE_PREVIEW, domainId]);
-    var templatePagePath = (0, react_1.useMemo)(function () {
-        var result = pagePath;
-        if (pagePath.startsWith("/")) {
-            result = result.slice(1);
-        }
-        return result;
-    }, [pagePath]);
-    var handleLoadContent = (0, react_1.useMemo)(function () {
-        return debounce(function (tempDatas, tempPagePath, status) {
-            var _a;
-            if (!status)
-                return;
-            var iframe = document.getElementById("iframe-demo-".concat(viewIndex));
-            var mess = JSON.stringify({
-                pagePath: tempPagePath,
-                templateDatas: tempDatas,
-            });
-            (_a = iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage(mess, "*");
-        }, 2000);
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [onChangeField]);
     (0, react_1.useEffect)(function () {
-        handleLoadContent(templateDatas, templatePagePath, validStatus);
-    }, [
-        onChangeField,
-        handleLoadContent,
-        validStatus,
-        templateDatas,
-        templatePagePath,
-    ]);
-    var handleRefresh = function () {
-        var iframe = document.getElementById("iframe-demo-".concat(viewIndex));
-        if (iframe) {
-            iframe.src = iframeSrc;
+        var handleFormdata = function (_a) {
+            var formData = _a.formData;
+            formData.append('pagePath', pagePath.split('/').filter(Boolean).join('/'));
+            templateDatas.forEach(function (templateData, index) {
+                Object.keys(templateData).forEach(function (key) {
+                    formData.append("templateDatas[".concat(index, "][").concat(key, "]"), templateData[key]);
+                });
+            });
+        };
+        if (formRef.current) {
+            formRef.current.addEventListener('formdata', handleFormdata);
+            handleSubmit();
         }
-        handleLoadContent(templateDatas, templatePagePath, validStatus);
-    };
+        return function () {
+            if (formRef.current)
+                // eslint-disable-next-line react-hooks/exhaustive-deps
+                formRef.current.removeEventListener('formdata', handleFormdata);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [viewIndex, templateDatas, pagePath]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    var handleSubmit = react_1.default.useCallback((0, lodash_1.debounce)(function () {
+        if (formRef.current)
+            formRef.current.submit();
+    }, 2000), []);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                     display: "flex",
                     alignItems: "center",
@@ -73,8 +85,6 @@ var Preview = function (props) {
                 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", style: {
                             fontWeight: "bold",
                             textTransform: "uppercase",
-                        }, children: t("ViewTemplate.PreviewTitle") }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t("Common.Refresh") || "", placement: "top", children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: handleRefresh, "aria-label": "refresh", style: { float: "right" }, disabled: !validStatus, children: (0, jsx_runtime_1.jsx)(Refresh_1.default, {}) }) }) })] }), (0, jsx_runtime_1.jsx)("iframe", { title: "iframe-demo-".concat(viewIndex), id: "iframe-demo-".concat(viewIndex), className: classes.root, src: iframeSrc, 
-                // src={"https://httpbin.org/post"}
-                width: "100%" })] }));
+                        }, children: t("ViewTemplate.PreviewTitle") }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t("Common.Refresh") || "", placement: "top", children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: function () { return formRef.current.submit(); }, "aria-label": "refresh", style: { float: "right" }, disabled: !validStatus, children: (0, jsx_runtime_1.jsx)(Refresh_1.default, {}) }) }) })] }), (0, jsx_runtime_1.jsx)("form", { action: iframeSrc, method: "post", target: "iframe-demo", ref: formRef }), (0, jsx_runtime_1.jsx)("iframe", { title: "iframe-demo-".concat(viewIndex), id: "iframe-demo", name: "iframe-demo", className: classes.root, width: "100%" })] }));
 };
 exports.default = Preview;

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

@@ -0,0 +1,12 @@
+import { PageViewEvent } from '../../../ACM-AXN/Page/Types';
+import React from 'react';
+export interface ViewTemplateEvents extends Omit<PageViewEvent, 'viewNumber' | 'templateId'> {
+    protected?: boolean;
+}
+export interface EventsProps {
+    viewEvents: ViewTemplateEvents[];
+    onChangeEvent: (values: ViewTemplateEvents[]) => void;
+    disabledLabel?: boolean;
+}
+declare const Events: React.FC<EventsProps>;
+export default Events;

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;