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

package/lib/ACM-AXN/Page/CreateOrEdit/Utils.d.ts

@@ -0,0 +1,23 @@
+import { DataObject } from '../../../AWING';
+import { PageModel, TemplateData, ViewModel } from '../Types';
+import { ITemplateParameter } from '../../../ACM-AXN/Template/Types';
+export declare const isObjectType: (value: unknown) => value is object;
+export declare const isObject: <T extends object>(value: unknown) => value is T;
+export declare const composeKey: <F extends (...p: any[]) => any, G extends (...p: any[]) => any>(f: F, g: G) => F;
+export declare const concatKey: (parent: string | string[]) => (child: string | string[]) => string[];
+export declare const convertTreeArrayToFlatArray: (treeArray: DataObject[]) => any[];
+export declare const convertValueByType: (type: string, val: any) => any;
+export declare const getFieldsValid: (templateDatas: TemplateData[]) => boolean[];
+export declare function updateStateByPageModel(this: {
+    setPageRoot: (valOrUpdater: PageModel | ((currVal: PageModel) => PageModel)) => void;
+}, pageModel: PageModel): void;
+/**
+ * Retrieves the template data based on the provided template parameters, view information data, page ID, and view number.
+ *
+ * @param {ITemplateParameter[]} templateParameters - The array of template parameters.
+ * @param {ViewModel} viewInfoData - The view information data.
+ * @param {string} pageId - The page ID.
+ * @param {number} viewNumber - The view number.
+ * @returns {TemplateData[]} - The array of template data.
+ */
+export declare const getTemplateDatas: (templateParameters: ITemplateParameter[], viewInfoData: ViewModel, pageId: string, viewNumber: number) => TemplateData[];

package/lib/ACM-AXN/Page/CreateOrEdit/Utils.js

@@ -0,0 +1,261 @@
+"use strict";
+// export const isObject = (obj: any) => {
+//     if (typeof obj !== 'object') return false
+//     return !Array.isArray(obj) && obj !== null
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTemplateDatas = exports.getFieldsValid = exports.convertValueByType = exports.convertTreeArrayToFlatArray = exports.concatKey = exports.composeKey = exports.isObject = exports.isObjectType = void 0;
+exports.updateStateByPageModel = updateStateByPageModel;
+var Enum_1 = require("../../ViewTemplate/Enum");
+var lodash_1 = require("lodash");
+var immer_1 = require("immer");
+var common_1 = require("../../ViewTemplate/common");
+var enums_1 = require("../enums");
+var Helpers_1 = require("../../../Utils/Helpers");
+// }
+var isDateObject = function (value) { return value instanceof Date; };
+var isNullOrUndefined = function (value) {
+    return value == null;
+};
+var isObjectType = function (value) {
+    return typeof value === 'object';
+};
+exports.isObjectType = isObjectType;
+var isObject = function (value) {
+    return !isNullOrUndefined(value) &&
+        !Array.isArray(value) &&
+        (0, exports.isObjectType)(value) &&
+        !isDateObject(value);
+};
+exports.isObject = isObject;
+var composeXY = function (f, g, h) {
+    return function (x, y) {
+        return f(g(x), h(y));
+    };
+};
+var composeKey = function (f, g) { return composeXY(f, g, function (y) { return y; }); }; // f(x,y).g(x) = f(g(x),y);
+exports.composeKey = composeKey;
+var concatKey = function (parent) {
+    return function (child) {
+        var arrParent = Array.isArray(parent) ? parent : [parent];
+        var arrChild = Array.isArray(child) ? child : [child];
+        var result = __spreadArray(__spreadArray([], arrParent, true), arrChild, true);
+        return result.filter(function (value) { return !(typeof value == 'string' && value.trim() === ''); }); // đoạn này để remove '' nếu có
+    };
+};
+exports.concatKey = concatKey;
+var convertTreeArrayToFlatArray = function (treeArray) {
+    var result = [];
+    treeArray === null || treeArray === void 0 ? void 0 : treeArray.forEach(function (data) {
+        getChilds(data, function (item) {
+            if (item.fieldType === Enum_1.TYPE_FIELD_TEMPLATE.OBJECT && !item.fieldName.includes('.')) {
+                var child_1 = {};
+                getChilds(item, function (el) {
+                    var keys = el.fieldName.split('.');
+                    if (keys.length > 1) {
+                        (0, Helpers_1.setObject)(child_1, keys, el.fieldValue || el.defaultValue);
+                    }
+                });
+                item.fieldValue = JSON.stringify((0, lodash_1.get)(child_1, item.fieldName));
+            }
+            result.push(item);
+        });
+    });
+    return result;
+};
+exports.convertTreeArrayToFlatArray = convertTreeArrayToFlatArray;
+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 getChilds(c, action); });
+    }
+};
+var convertValueByType = function (type, val) {
+    if (type === Enum_1.TYPE_FIELD_TEMPLATE.CHECKBOX) {
+        if (typeof val === 'string')
+            val = val === 'true';
+    }
+    else if (type === Enum_1.TYPE_FIELD_TEMPLATE.DROPDOWN_LIST) {
+        var spl = val.split('\\n');
+        val = spl[0].trim();
+    }
+    // Không parse số, trong trường hợp số có thể float
+    // else if (type === TYPE_FIELD_TEMPLATE.TEXT_FIELD_NUMBER) {
+    //     // val = parseInt(val)
+    // }
+    return val;
+};
+exports.convertValueByType = convertValueByType;
+var getFieldsValid = function (templateDatas) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var fieldsValid = [false];
+    if (templateDatas) {
+        for (var i = 0; i < templateDatas.length; i++) {
+            var valid = false;
+            if (((_a = templateDatas[i]) === null || _a === void 0 ? void 0 : _a.fieldType) ===
+                Enum_1.TYPE_FIELD_TEMPLATE.TEXT_FIELD_NUMBER) {
+                var parseValue = parseInt((_b = templateDatas[i]) === null || _b === void 0 ? void 0 : _b.fieldValue);
+                valid = isNaN(parseValue) ? true : parseValue < 0 ? true : false;
+            }
+            else if (((_c = templateDatas[i]) === null || _c === void 0 ? void 0 : _c.fieldType) === Enum_1.TYPE_FIELD_TEMPLATE.CHECKBOX) {
+                valid = false;
+            }
+            else if (((_d = templateDatas[i]) === null || _d === void 0 ? void 0 : _d.fieldType) ===
+                Enum_1.TYPE_FIELD_TEMPLATE.DROPDOWN_LIST) {
+                var spl = (_e = templateDatas[i]) === null || _e === void 0 ? void 0 : _e.fieldValue.split('\\n');
+                valid = spl[0].trim().length <= 0;
+            }
+            else if (((_f = templateDatas[i]) === null || _f === void 0 ? void 0 : _f.fieldType) === Enum_1.TYPE_FIELD_TEMPLATE.LIST) {
+                valid = listFieldValid(templateDatas, i, false, (_g = templateDatas[i]) === null || _g === void 0 ? void 0 : _g.fieldValue);
+            }
+            else if (((_h = templateDatas[i]) === null || _h === void 0 ? void 0 : _h.fieldType) === Enum_1.TYPE_FIELD_TEMPLATE.OBJECT) {
+                valid = objectFieldValid(templateDatas, i, templateDatas[i].fieldValue, false);
+            }
+            else {
+                valid = Number((_k = (_j = templateDatas[i]) === null || _j === void 0 ? void 0 : _j.fieldValue) === null || _k === void 0 ? void 0 : _k.trim().length) <= 0;
+            }
+            if (!templateDatas[i].fieldName.includes('.') &&
+                (templateDatas[i].isRequired ||
+                    [
+                        Enum_1.TYPE_FIELD_TEMPLATE.LIST,
+                        Enum_1.TYPE_FIELD_TEMPLATE.OBJECT,
+                    ].includes(templateDatas[i].fieldType)) &&
+                valid) {
+                fieldsValid[i] = false;
+            }
+            else
+                fieldsValid[i] = true;
+        }
+    }
+    return fieldsValid;
+};
+exports.getFieldsValid = getFieldsValid;
+var listFieldValid = function (fieldDatas, indexOfField, isSubField, fieldValue) {
+    var _a;
+    var isListRequired = !!((_a = fieldDatas[indexOfField]) === null || _a === void 0 ? void 0 : _a.isRequired);
+    if ((0, common_1.isJSON)(fieldValue) || isSubField) {
+        var subFieldIndex_1 = fieldDatas.findIndex(function (item) {
+            return (item.fieldName.includes("".concat(fieldDatas[indexOfField].fieldName, ".")) &&
+                item.fieldName.split('.').length ===
+                    fieldDatas[indexOfField].fieldName.split('.').length + 1);
+        });
+        var list = isSubField
+            ? fieldValue || []
+            : JSON.parse(fieldValue);
+        if (list.length === 0) {
+            return isListRequired;
+        }
+        else {
+            var result_1 = false;
+            var isObjectList_1 = fieldDatas[subFieldIndex_1].fieldType ===
+                Enum_1.TYPE_FIELD_TEMPLATE.OBJECT;
+            list.forEach(function (l) {
+                if (isObjectList_1) {
+                    objectFieldValid(fieldDatas, subFieldIndex_1, l, true) &&
+                        (result_1 = true);
+                }
+                else {
+                    !l && isListRequired && (result_1 = true);
+                }
+            });
+            return result_1;
+        }
+    }
+    else
+        return isListRequired;
+};
+var objectFieldValid = function (fieldDatas, indexOfField, fieldValue, isSubField) {
+    var _a;
+    if ((0, common_1.isJSON)(fieldValue) || isSubField) {
+        var childrens = fieldDatas.filter(function (item) {
+            return (item.fieldName.includes("".concat(fieldDatas[indexOfField].fieldName, ".")) &&
+                item.fieldName.split('.').length ===
+                    fieldDatas[indexOfField].fieldName.split('.').length + 1);
+        });
+        var objectValue_1 = isSubField ? fieldValue : JSON.parse(fieldValue);
+        var result_2 = false;
+        childrens.forEach(function (child) {
+            var nameSplit = child.fieldName.split('.');
+            var nameKey = nameSplit[nameSplit.length - 1];
+            if (child.fieldType === Enum_1.TYPE_FIELD_TEMPLATE.LIST) {
+                var subFieldIndex = fieldDatas.findIndex(function (item) { return item.fieldName === child.fieldName; });
+                listFieldValid(fieldDatas, subFieldIndex, true, objectValue_1[nameKey]) && (result_2 = true);
+            }
+            else {
+                if (child.isRequired) {
+                    !objectValue_1[nameKey] && (result_2 = true);
+                }
+            }
+        });
+        return result_2;
+    }
+    else
+        return !!((_a = fieldDatas[indexOfField]) === null || _a === void 0 ? void 0 : _a.isRequired);
+};
+function updateStateByPageModel(pageModel) {
+    var page = pageModel.page, commonHtml = pageModel.commonHtml, views = pageModel.views, viewEvents = pageModel.viewEvents;
+    var randomUUID = crypto.randomUUID();
+    this.setPageRoot((0, immer_1.produce)(function (draft) {
+        draft.views = views.map(function (view) { return ({
+            templateId: view.templateId,
+            viewDatas: view.viewDatas,
+            templateTypeId: 0,
+            validStatus: true,
+            isValidationFields: view.viewDatas.map(function () { return true; }),
+            directoryId: view.directoryId,
+            templateHandleEvent: '',
+            templateValidation: '',
+            validProcessStatus: enums_1.VALID_PROCESS_CODE.VALIDATED,
+            fieldsRequireStatus: false,
+            isChanged: false,
+            verifiedStatus: enums_1.VERIFIED_STATUS.NOT_VERIFIED,
+            events: view.events || viewEvents.filter(function (event) { return event.viewNumber === view.viewDatas[0].viewNumber; }),
+            viewId: randomUUID,
+            viewNumber: view.viewNumber || view.viewDatas[0].viewNumber,
+        }); }).sort(function (view1, view2) { return view1.viewDatas.at(-1).viewNumber - view2.viewDatas.at(-1).viewNumber; });
+        draft.page = page;
+        draft.commonHtml = commonHtml;
+    }));
+}
+/**
+ * Retrieves the template data based on the provided template parameters, view information data, page ID, and view number.
+ *
+ * @param {ITemplateParameter[]} templateParameters - The array of template parameters.
+ * @param {ViewModel} viewInfoData - The view information data.
+ * @param {string} pageId - The page ID.
+ * @param {number} viewNumber - The view number.
+ * @returns {TemplateData[]} - The array of template data.
+ */
+var getTemplateDatas = function (templateParameters, viewInfoData, pageId, viewNumber) {
+    var result = (0, exports.convertTreeArrayToFlatArray)(templateParameters).map(function (parameter) {
+        var tempData = viewInfoData.viewDatas
+            ? viewInfoData.viewDatas.find(function (el) { return el.fieldName === parameter.fieldName; })
+            : null;
+        var valData = tempData ? tempData.fieldValue : null;
+        var fieldValue = valData !== null && valData !== void 0 ? valData : (parameter.defaultValue ? parameter.defaultValue : '');
+        fieldValue = (0, exports.convertValueByType)(parameter.fieldType, fieldValue);
+        return {
+            templateId: parameter.templateId,
+            pageId: pageId,
+            viewNumber: viewNumber,
+            fieldType: parameter.fieldType,
+            labelName: parameter.labelName,
+            fieldName: parameter.fieldName,
+            defaultValue: parameter.defaultValue,
+            fieldValue: fieldValue,
+            isRequired: parameter.isRequired,
+            isAdvanced: parameter.isAdvanced,
+        };
+    });
+    return result;
+};
+exports.getTemplateDatas = getTemplateDatas;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { PathType } from '../enums';
+declare const _default: React.FC<{
+    type: PathType;
+}>;
+export default _default;

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

@@ -0,0 +1,189 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+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 = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["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");
+var immer_1 = require("immer");
+var react_1 = __importStar(require("react"));
+var react_i18next_1 = require("react-i18next");
+var react_router_dom_1 = require("react-router-dom");
+var recoil_1 = require("recoil");
+var Enum_1 = require("../../../ACM-AXN/Campaign/Enum");
+var ClassicDrawer_1 = __importDefault(require("../../../Commons/Components/ClassicDrawer"));
+var Context_1 = __importDefault(require("../Context"));
+var enums_1 = require("../enums");
+var PageStepView_1 = __importDefault(require("./Components/PageStepView"));
+var PageTabView_1 = __importDefault(require("./Components/PageTabView"));
+var DrawerAction_1 = __importDefault(require("./DrawerAction"));
+var Recoil_1 = require("./Recoil");
+var Utils_1 = require("./Utils");
+var Helpers_1 = require("../../../Utils/Helpers");
+var lodash_1 = require("lodash");
+var Wrapper_1 = __importDefault(require("../../../AWING/HOC/Wrapper"));
+var Context_2 = require("../../../Context");
+var ListenTemplate_1 = require("./ListenTemplate");
+var CreateOrEdit = function (_a) {
+    var type = _a.type;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var pageId = (0, react_router_dom_1.useParams)().pageId;
+    var na = (0, react_router_dom_1.useNavigate)();
+    var appHelper = (0, Context_2.useAwing)().appHelper;
+    var getTemplate = (0, ListenTemplate_1.usePageCache)().getTemplate;
+    var _b = (0, Context_1.default)(), service = _b.service, pageCode = _b.pageCode;
+    var _c = react_1.default.useState(false), loading = _c[0], setLoading = _c[1];
+    var _d = (0, recoil_1.useRecoilState)(Recoil_1.hasDeprecated), isDeprecated = _d[0], setDeprecated = _d[1];
+    var setDirectories = (0, recoil_1.useSetRecoilState)(Recoil_1.pageDirectoriesState);
+    var formValid = (0, recoil_1.useRecoilValue)(Recoil_1.validForm);
+    var pageChangedForm = (0, recoil_1.useRecoilValue)(Recoil_1.pageChangedFormState);
+    var _e = (0, recoil_1.useRecoilState)(Recoil_1.pageRootState), pageRoot = _e[0], setPageRoot = _e[1];
+    (0, react_1.useEffect)(function () {
+        setLoading(true);
+        fetchDirectories().then(function (directories) { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!(type === enums_1.PathType.CREATE)) return [3 /*break*/, 2];
+                        return [4 /*yield*/, service.pagesGenerateId().then(function (res) {
+                                setPageRoot((0, immer_1.produce)(function (draf) {
+                                    var _a;
+                                    draf.page.createdDate = (0, Helpers_1.convertDateTimeToTimestamp)(new Date());
+                                    draf.page.directoryId = ((_a = (0, lodash_1.minBy)(directories, 'level')) === null || _a === void 0 ? void 0 : _a.directoryId) || '';
+                                    draf.page.pageId = res;
+                                    draf.page.pageCode = pageCode === enums_1.PageCode.Lgn ? 'lgn' : 'wlc';
+                                }));
+                            })];
+                    case 1:
+                        _a.sent();
+                        return [3 /*break*/, 4];
+                    case 2: return [4 /*yield*/, service[type === enums_1.PathType.CLONE ? 'pagesClone' : 'pagesGet'](pageId).then(function (res) { return __awaiter(void 0, void 0, void 0, function () {
+                            var isDeprecated;
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, checkDeprecated(res.views.map(function (x) { return x.templateId; }))];
+                                    case 1:
+                                        isDeprecated = _a.sent();
+                                        setDeprecated(isDeprecated);
+                                        if (isDeprecated && type === enums_1.PathType.CLONE) {
+                                            na('..', { replace: true });
+                                            appHelper.snackbar('error', t('Page.DeprecatedTemplate'));
+                                            throw new Error(t('Page.DeprecatedTemplate'));
+                                        }
+                                        Utils_1.updateStateByPageModel.call({ setPageRoot: setPageRoot }, res);
+                                        return [2 /*return*/];
+                                }
+                            });
+                        }); })];
+                    case 3:
+                        _a.sent();
+                        _a.label = 4;
+                    case 4:
+                        setDirectories(directories);
+                        return [2 /*return*/];
+                }
+            });
+        }); }).finally(function () { return setLoading(false); });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    var checkDeprecated = function (templateIds) {
+        return Promise.all(templateIds.map(function (id) { return getTemplate(id); })).then(function (res) { return res.some(function (x) { return x.template.isDeprecated; }); });
+    };
+    var fetchDirectories = function () {
+        return service
+            .directoriesGetByObjectTypeCode(Enum_1.DirectoryRoot[pageCode === enums_1.PageCode.Lgn ? 'PageLogin' : 'PageWelcome']);
+    };
+    var handleSubmit = function () {
+        if (isDeprecated) {
+            appHelper.snackbar('error', t('Page.DeprecatedTemplate'));
+            return;
+        }
+        var params = [
+            __assign(__assign({}, pageRoot), { viewEvents: pageRoot.views.map(function (x, idx) { return x.events.map(function (e) { var _a; return (__assign(__assign({}, e), { viewNumber: ((_a = x.viewDatas[0]) === null || _a === void 0 ? void 0 : _a.viewNumber) || idx + 1, pageId: pageRoot.page.pageId })); }); }).flat() })
+        ];
+        if (type === enums_1.PathType.EDIT)
+            params.unshift(pageId);
+        return service[type === enums_1.PathType.EDIT ? 'pagesPut' : 'pagesPost'].apply(service, params);
+    };
+    return ((0, jsx_runtime_1.jsx)(ClassicDrawer_1.default, { customAction: type === enums_1.PathType.EDIT ? ((0, jsx_runtime_1.jsx)(DrawerAction_1.default, { type: type })) : undefined, title: t("Page.".concat(pageCode === enums_1.PageCode.Lgn ? 'TitleLogin' : 'TitleWelcome').concat(type)), disableButtonSubmit: Object.values(formValid).includes(false), confirmExit: Object.values(pageChangedForm).includes(true), onSubmit: handleSubmit, childrenWrapperStyle: { padding: 0 }, children: type === enums_1.PathType.EDIT ? ((0, jsx_runtime_1.jsx)(PageTabView_1.default, { loading: loading })) : ((0, jsx_runtime_1.jsx)(PageStepView_1.default, {})) }));
+};
+exports.default = (0, Wrapper_1.default)(CreateOrEdit, { component: recoil_1.RecoilRoot });

package/lib/ACM-AXN/Page/Import/SelectPage.d.ts

@@ -0,0 +1,8 @@
+import { Directory } from '../../../ACM-AXN/Campaign/Types';
+import { DrawerProps } from '../../../AWING';
+import { IPage } from '../Types';
+declare const SelectPage: React.FC<{
+    directories: Directory[];
+    onSubmit: (pageSelected: IPage) => void;
+} & Omit<DrawerProps, 'children' | 'onSubmit'>>;
+export default SelectPage;

package/lib/ACM-AXN/Page/Import/SelectPage.js

@@ -0,0 +1,98 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var icons_material_1 = require("@mui/icons-material");
+var material_1 = require("@mui/material");
+var lodash_1 = require("lodash");
+var react_1 = require("react");
+var react_i18next_1 = require("react-i18next");
+var AWING_1 = require("../../../AWING");
+var Context_1 = __importDefault(require("../Context"));
+var SelectPage = function (_a) {
+    var directories = _a.directories, onSubmit = _a.onSubmit, props = __rest(_a, ["directories", "onSubmit"]);
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var service = (0, Context_1.default)().service;
+    var _b = (0, react_1.useState)(false), loading = _b[0], setLoading = _b[1];
+    var _c = (0, react_1.useState)(), pageSelected = _c[0], setPageSelected = _c[1];
+    var _d = (0, react_1.useState)({
+        items: [],
+        totalItemCount: 0,
+    }), pageList = _d[0], setPage = _d[1];
+    var _e = (0, react_1.useState)(function () {
+        var _a;
+        return ({
+            pageIndex: 0,
+            pageSize: 10,
+            directoryId: (_a = (0, lodash_1.minBy)(directories, 'level')) === null || _a === void 0 ? void 0 : _a.directoryId,
+        });
+    }), queryParams = _e[0], setQueryParams = _e[1];
+    (0, react_1.useEffect)(function () {
+        getPage();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [queryParams]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    var handleChangeSearch = (0, react_1.useCallback)((0, lodash_1.debounce)(function (e) {
+        setQueryParams(function (prev) { return (__assign(__assign({}, prev), { searchString: e.target.value })); });
+    }, 300), []);
+    var getPage = function () {
+        if (queryParams.directoryId) {
+            var searchString = queryParams.searchString, pageSize = queryParams.pageSize, pageIndex = queryParams.pageIndex, directoryId = queryParams.directoryId;
+            setLoading(true);
+            service
+                .pagesPaging(searchString, // searchString,
+            pageSize, // pageSize,
+            pageIndex, //pageIndex,
+            directoryId // advancedObject!.directoryId
+            )
+                .then(setPage)
+                .finally(function () { return setLoading(false); });
+        }
+    };
+    var handleSelectPage = function (pageId) {
+        setPageSelected(pageList.items.find(function (item) { return item.pageId === pageId; }));
+    };
+    return ((0, jsx_runtime_1.jsx)(AWING_1.Drawer, __assign({ disableButtonSubmit: !(pageSelected === null || pageSelected === void 0 ? void 0 : pageSelected.pageId), onSubmit: function () { return onSubmit(pageSelected); } }, props, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: material_1.Paper, sx: {
+                padding: function (theme) { return theme.spacing(2, 2, 7, 2); },
+                marginTop: function (theme) { return theme.spacing(2); },
+            }, children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, spacing: 1, sx: { marginBottom: function (theme) { return theme.spacing(2); } }, children: [(0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 5, children: (0, jsx_runtime_1.jsx)(material_1.TextField, { select: true, fullWidth: true, label: t('Common.Directory'), id: "directoryId", "data-testid": "directoryId", name: "directoryId", value: queryParams.directoryId, onChange: function (e) {
+                                    return setQueryParams(function (prev) { return (__assign(__assign({}, prev), { directoryId: e.target.value })); });
+                                }, 
+                                // className={classes.directoriesSelect}
+                                size: "small", variant: "outlined", children: directories.map(function (option) { return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: option.directoryId, style: {
+                                        paddingLeft: option.level * 24 + 'px',
+                                    }, children: option.name }, option.directoryId)); }) }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 7, children: (0, jsx_runtime_1.jsx)(material_1.TextField, { id: "searchString", name: "searchString", size: "small", fullWidth: true, defaultValue: queryParams.searchString, onChange: handleChangeSearch, placeholder: t('Common.SearchPlaceholder'), label: t('Common.Search'), InputProps: {
+                                    startAdornment: (0, jsx_runtime_1.jsx)(icons_material_1.Search, {}),
+                                } }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { marginBottom: function (theme) { return theme.spacing(2); } }, children: ["Page:\u00A0", (pageSelected === null || pageSelected === void 0 ? void 0 : pageSelected.pageId)
+                            ? "".concat(pageSelected.pageId, " - ").concat(pageSelected.title)
+                            : t('Campaign.NoPageSelected')] }), loading ? ((0, jsx_runtime_1.jsx)(AWING_1.CircularProgress, {})) : ((0, jsx_runtime_1.jsx)(AWING_1.DataGrid, { hideHeader: true, columns: [{ headerName: '', field: 'title' }], rows: pageList.items, totalOfRows: pageList.totalItemCount, pageIndex: queryParams.pageIndex, pageSize: queryParams.pageSize, onPageIndexChange: function (pageIndex) {
+                        setQueryParams(function (prev) { return (__assign(__assign({}, prev), { pageIndex: pageIndex })); });
+                    }, getRowId: function (obj) { return obj.pageId; }, onRowClick: handleSelectPage, onPageSizeChange: function (pageSize) {
+                        setQueryParams(function (prev) { return (__assign(__assign({}, prev), { pageSize: pageSize, pageIndex: 0 })); });
+                    } }))] }) })));
+};
+exports.default = SelectPage;

package/lib/ACM-AXN/Page/Import/SelectPage.test.d.ts

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