awing-library 2.1.2-beta → 2.1.2-stage

package/lib/ACM-AXN/User/Add.test.js

@@ -0,0 +1,115 @@
+"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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");
+require("@testing-library/jest-dom/extend-expect");
+var react_1 = require("@testing-library/react");
+var Add_1 = __importDefault(require("./Add"));
+// Mock Axios client
+jest.mock('./Hooks', function () { return ({
+    __esModule: true,
+    default: function () { return ({
+        client: {
+            usersGetIdByUsername: jest.fn(function () {
+                var _param = [];
+                for (var _i = 0; _i < arguments.length; _i++) {
+                    _param[_i] = arguments[_i];
+                }
+                return Promise.reject('error');
+            }),
+            usersAddExisted: jest.fn(function (_id) { return Promise.reject('error'); }),
+        },
+    }); },
+}); });
+// Mock i18next
+jest.mock('react-i18next', function () { return (__assign(__assign({}, jest.requireActual('react-i18next')), { useTranslation: function () { return ({ t: jest.fn(function (key) { return key; }) }); } })); });
+// Mock Drawer
+jest.mock('Commons/Components/ClassicDrawer', function () { return function (props) { return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("button", { "data-testid": "submit-btn", onClick: props.onSubmit, children: "submit" }), props.children] })); }; });
+describe('User AddExisted Component', function () {
+    it('renders without crashing', function () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Add_1.default, {}));
+        expect(react_1.screen.getByText('Common.Username')).toBeInTheDocument();
+    });
+    it('Check validation error message', function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    (0, react_1.render)((0, jsx_runtime_1.jsx)(Add_1.default, {}));
+                    react_1.fireEvent.change(react_1.screen.getByRole('textbox', { name: /username/i }), {
+                        target: { value: 'test1' },
+                    });
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            expect(react_1.screen.getByText('InvalidMessage.InvalidNotExistedUsername')).toBeInTheDocument();
+                        })];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('Check submit error message', function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    jest.spyOn(console, 'error');
+                    (0, react_1.render)((0, jsx_runtime_1.jsx)(Add_1.default, {}));
+                    react_1.fireEvent.click(react_1.screen.getByTestId('submit-btn'));
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            expect(react_1.screen.getByText('InvalidMessage.InvalidAccountConnected')).toBeInTheDocument();
+                        })];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});

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

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

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

@@ -0,0 +1,60 @@
+"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 material_1 = require("@mui/material");
+var PageManagement_1 = require("../../AWING/PageManagement");
+var react_1 = require("react");
+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 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)(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');
+    };
+    var getUsers = (0, react_1.useCallback)(function (queryParams) {
+        setLoading(true);
+        service
+            .usersPaging(queryParams.searchString, queryParams.pageIndex, queryParams.pageSize)
+            .then(setUsers)
+            .finally(function () {
+            setLoading(false);
+        });
+    }, [service]);
+    var handleDelete = function (id) {
+        return service.usersDelete(id).then(function () { return snackbar('success'); });
+    };
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(PageManagement_1.PageManagement, { title: t('User.Title'), onChangeQueryInput: getUsers, getRowId: function (obj) { return obj.userId; }, columns: [
+                {
+                    field: '#',
+                    headerName: '#',
+                    width: 85,
+                    valueGetter: function (_unUse, idx, stt) { return stt; },
+                },
+                {
+                    field: 'username',
+                    headerName: t('Common.Username'),
+                },
+                {
+                    field: 'name',
+                    headerName: t('Common.Name'),
+                },
+                {
+                    field: 'gender',
+                    headerName: t('Common.Gender.Title'),
+                    valueGetter: function (row) {
+                        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: 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/Container.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

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

@@ -0,0 +1,202 @@
+"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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");
+require("@testing-library/jest-dom/extend-expect");
+var react_1 = require("@testing-library/react");
+var Router_1 = require("../../AWING/Router");
+var Container_1 = __importDefault(require("./Container"));
+var initUser = { userId: 'mockUserId' };
+var items = [
+    {
+        userId: '5667797591087411902',
+        name: 'isobar',
+        description: '',
+        username: 'isobar',
+        gender: 1,
+        image: null,
+    },
+    {
+        userId: '4703920046752099132',
+        name: 'Kantar',
+        description: null,
+        username: 'kantar',
+        gender: 1,
+        image: null,
+    },
+];
+var clientMethod = {
+    usersPaging: function () {
+        return Promise.resolve({
+            items: items,
+            totalItemCount: items.length,
+        });
+    },
+    usersDelete: function () { return function (_id) { }; },
+};
+// Mock Axios client
+jest.mock('./Hooks', function () { return ({
+    __esModule: true,
+    default: function () { return ({
+        service: {
+            usersPaging: jest.fn(function (_param) {
+                return Promise.resolve(clientMethod.usersPaging());
+            }),
+            usersDelete: jest.fn(function (_id) {
+                return Promise.resolve(clientMethod.usersDelete());
+            }),
+        },
+        currentUser: initUser,
+    }); },
+}); });
+// Mock i18next
+jest.mock('react-i18next', function () { return (__assign(__assign({}, jest.requireActual('react-i18next')), { useTranslation: function () { return ({ t: jest.fn(function (key) { return key; }) }); } })); });
+// Mock PageManagement
+jest.mock('AWING/PageManagement', function () { return ({
+    PageManagement: function (props) {
+        props.onChangeQueryInput({
+            searchString: '',
+            pageIndex: 0,
+            pageSize: 10,
+        });
+        return ((0, jsx_runtime_1.jsxs)("div", { children: [props.columns
+                    .filter(function (item) { return item.valueGetter; })
+                    .map(function (getter, idx) { return ((0, jsx_runtime_1.jsx)("span", { children: getter.valueGetter(items[0], idx) }, idx)); }), (0, jsx_runtime_1.jsx)("span", { "data-testid": "rowid", children: props.getRowId(items[0]) }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "CreateBtn", onClick: props.onCreateButtonClick, children: "CreateBtn" }), (0, jsx_runtime_1.jsx)("button", { onClick: function () {
+                        props.onChangeQueryInput({
+                            pageIndex: 1,
+                            pageSize: 10,
+                        });
+                    }, children: "ChangeInput" }), props.customActions, (0, jsx_runtime_1.jsx)("button", { "data-testid": "onDelete", onClick: function () {
+                        props.onDelete('onDelete');
+                    }, children: "Remove Btn" }), (0, jsx_runtime_1.jsx)("p", { children: JSON.stringify(props.rows) }), (0, jsx_runtime_1.jsxs)("span", { children: ["totalItemCount:", props.totalOfRows] })] }));
+    },
+}); });
+var renderUi = function () {
+    return (0, react_1.render)((0, jsx_runtime_1.jsx)(Router_1.BrowserRouter, { children: (0, jsx_runtime_1.jsx)(Container_1.default, {}) }));
+};
+describe('User Container Component', function () {
+    it('renders without crashing', function () {
+        renderUi();
+    });
+    it('render state', function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    renderUi();
+                    expect(react_1.screen.getByTestId('CreateBtn')).toBeInTheDocument();
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            expect(react_1.screen.getByText(JSON.stringify(items))).toBeInTheDocument();
+                        })];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            expect(react_1.screen.getByText("totalItemCount:".concat(items.length))).toBeInTheDocument();
+                        })];
+                case 2:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('get paging', function () {
+        var usersPagingSpy = jest.spyOn(clientMethod, 'usersPaging');
+        renderUi();
+        expect(usersPagingSpy).toBeCalled();
+    });
+    it('get rowid', function () {
+        renderUi();
+        expect(react_1.screen.getByText(items[0].userId)).toBeInTheDocument();
+    });
+    it('row getter', function () {
+        renderUi();
+        expect(react_1.screen.getByText('Common.Gender.Male')).toBeInTheDocument();
+    });
+    it('Trigger Create user button', function () {
+        var openSpy = jest.spyOn(window, 'open');
+        renderUi();
+        react_1.fireEvent.click(react_1.screen.getByTestId('CreateBtn'));
+        expect(openSpy).toHaveBeenCalledWith("undefined/organization/mockUserId/User", '_blank');
+        openSpy.mockRestore();
+    });
+    it('Trigger Add Existed user button', function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    renderUi();
+                    react_1.fireEvent.click(react_1.screen.getByText('User.AddExistedUser'));
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            return expect(window.location.href).toContain('http://localhost/AddExistedUser');
+                        })];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('Delete user', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var usersDeleteSpy;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    usersDeleteSpy = jest.spyOn(clientMethod, 'usersDelete');
+                    renderUi();
+                    react_1.fireEvent.click(react_1.screen.getByTestId('onDelete'));
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            expect(usersDeleteSpy).toBeCalled();
+                        })];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});

package/lib/ACM-AXN/User/Hook.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { UserProps } from "./Types";
+export declare const userPropsContext: import("react").Context<UserProps>;
+declare const useUserProps: () => UserProps;
+export default useUserProps;

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.userPropsContext = void 0;
+var react_1 = require("react");
+var react_2 = require("react");
+exports.userPropsContext = (0, react_1.createContext)({});
+var useUserProps = function () {
+    var props = (0, react_2.useContext)(exports.userPropsContext);
+    return (0, react_2.useMemo)(function () {
+        return props;
+    }, [props]);
+};
+exports.default = useUserProps;

package/lib/ACM-AXN/User/Types.d.ts

@@ -0,0 +1,45 @@
+export interface IUserViewModel {
+    userId?: string;
+    name?: string | undefined;
+    username?: string | undefined;
+    gender?: number;
+    status?: boolean;
+    description?: string | undefined;
+    phone?: string | undefined;
+    image?: string | undefined;
+}
+export interface IUser {
+    userId?: string;
+    name?: string | undefined;
+    description?: string | undefined;
+    username?: string | undefined;
+    gender?: number | undefined;
+    image?: string | undefined;
+}
+export interface IUserPagingModel {
+    userId?: string;
+    name?: string;
+    description?: string;
+    username?: string;
+    gender?: number;
+    image?: string;
+}
+export interface IPagedList_1OfUserPagingModel {
+    items?: IUserPagingModel[];
+    pageCount?: number;
+    totalItemCount?: number;
+    pageNumber?: number;
+    pageSize?: number;
+    hasPreviousPage?: boolean;
+    hasNextPage?: boolean;
+}
+export interface IUserService {
+    usersPaging: (searchString: string | undefined, pageIndex: number | undefined, pageSize: number | undefined) => Promise<IPagedList_1OfUserPagingModel>;
+    usersDelete: (id: string) => Promise<void>;
+    usersGetIdByUsername: (username: string | undefined) => Promise<string>;
+    usersAddExisted: (username: string | undefined) => Promise<void>;
+}
+export interface UserProps {
+    service: IUserService;
+    currentUser: IUserViewModel;
+}

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

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

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { UserProps } from './Types';
+export declare const UserFeature: React.FC<UserProps>;
+export default UserFeature;

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

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserFeature = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Router_1 = require("../../AWING/Router");
+var Container_1 = __importDefault(require("./Container"));
+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 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: 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;