awing-library 2.1.13-beta → 2.1.15-beta

package/lib/ACM-AXN/Campaign/CreateOrEdit/Recoils.d.ts

@@ -1,6 +1,7 @@
-import { CampaignModel, Directory, CampaignGroupModel } from '../Types';
+import { CampaignModel, Directory, CampaignGroupModel, Attribute } from '../Types';
 import { WeightContainerProps } from './TabSubCampaign/Weight';
 export declare const directoriesState: import("recoil").RecoilState<Directory[]>;
+export declare const attributesState: import("recoil").RecoilState<Attribute[]>;
 export declare const isCreateState: import("recoil").RecoilState<boolean>;
 /**
  * Đánh dấu việc cần xác nhận lại trước khi đóng (set thành true khi có bất kỳ chỉnh sửa campaign nào)
@@ -17,6 +18,7 @@ export declare const campaignState: import("recoil").RecoilState<import("../Type
 /**
  * State lưu thông tin của CampaignAttributes
  */
+export declare const campaignAttributesState: import("recoil").RecoilState<import("../Types").CampaignAttribute[]>;
 /**
  * State lưu thông tin của chiến dịch con
  */

package/lib/ACM-AXN/Campaign/CreateOrEdit/Recoils.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.weightState = exports.readyForSubmitState = exports.tabPartnerValidState = exports.tabSubCampaignValidState = exports.tabInfomationValidState = exports.campaignPartnerState = exports.campaignGroupsState = exports.campaignState = exports.campaignModelState = exports.confirmExitState = exports.isCreateState = exports.directoriesState = void 0;
+exports.weightState = exports.readyForSubmitState = exports.tabPartnerValidState = exports.tabSubCampaignValidState = exports.tabInfomationValidState = exports.campaignPartnerState = exports.campaignGroupsState = exports.campaignAttributesState = exports.campaignState = exports.campaignModelState = exports.confirmExitState = exports.isCreateState = exports.attributesState = exports.directoriesState = void 0;
 var recoil_1 = require("recoil");
 var Types_1 = require("../Types");
 var Utils_1 = require("../Utils");
@@ -20,6 +20,10 @@ exports.directoriesState = (0, recoil_1.atom)({
     key: 'DirectoriesCampaignState',
     default: [],
 });
+exports.attributesState = (0, recoil_1.atom)({
+    key: 'attributesState',
+    default: [],
+});
 exports.isCreateState = (0, recoil_1.atom)({
     key: 'isCreateState',
     default: false,
@@ -82,25 +86,22 @@ exports.campaignState = (0, recoil_1.selector)({
 /**
  * State lưu thông tin của CampaignAttributes
  */
-// export const campaignAttributesState = selector({
-//     key: 'campaignAttributes',
-//     get: ({get}) => {
-//         const campaignModel = get(campaignModelState);
-//         return campaignModel.campaignAttributes;
-//     },
-//     set: ({set, get}, newAttributes) => {
-//         const campaignModel = get(campaignModelState);
-//         set(campaignModelState,
-//             newAttributes instanceof DefaultValue ?
-//             newAttributes :
-//             {
-//                 ...campaignModel,
-//                 campaignAttributes: newAttributes
-//             });
-//         if (!get(confirmExitState))
-//             set(confirmExitState, true);
-//     }
-// })
+exports.campaignAttributesState = (0, recoil_1.selector)({
+    key: 'campaignAttributes',
+    get: function (_a) {
+        var get = _a.get;
+        var campaignModel = get(exports.campaignModelState);
+        return campaignModel.campaignAttributes;
+    },
+    set: function (_a, campaignAttributes) {
+        var set = _a.set, get = _a.get;
+        var campaignModel = get(exports.campaignModelState);
+        set(exports.campaignModelState, campaignAttributes instanceof recoil_1.DefaultValue ?
+            campaignAttributes : __assign(__assign({}, campaignModel), { campaignAttributes: campaignAttributes }));
+        if (!get(exports.confirmExitState))
+            set(exports.confirmExitState, true);
+    }
+});
 /**
  * State lưu thông tin của chiến dịch con
  */
@@ -151,7 +152,7 @@ exports.tabInfomationValidState = (0, recoil_1.atom)({
         get: function (_a) {
             var get = _a.get;
             var campaignModel = get(exports.campaignModelState);
-            return (0, Utils_1.tabInfomationValid)(campaignModel.campaign, campaignModel.campaignAttributes.length ? campaignModel.campaignAttributes.length : [""]);
+            return (0, Utils_1.tabInfomationValid)(campaignModel.campaign, campaignModel.campaignAttributes);
         },
     }),
 });

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabInfomation.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 declare const Infomation: React.FC;
 export default Infomation;

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabInfomation.js

@@ -10,6 +10,29 @@ var __assign = (this && this.__assign) || function () {
     };
     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 (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 };
 };
@@ -18,14 +41,18 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
 var immer_1 = __importDefault(require("immer"));
 var lodash_1 = require("lodash");
-var react_1 = require("react");
+var react_1 = __importStar(require("react"));
 var react_i18next_1 = require("react-i18next");
 var recoil_1 = require("recoil");
 var AWING_1 = require("../../../AWING");
 var Recoils_1 = require("./Recoils");
+var Hooks_1 = __importDefault(require("../Hooks"));
 var Infomation = function () {
+    var service = (0, Hooks_1.default)().service;
     var directories = (0, recoil_1.useRecoilValue)(Recoils_1.directoriesState);
+    var attributes = (0, recoil_1.useRecoilValue)(Recoils_1.attributesState);
     var _a = (0, recoil_1.useRecoilState)(Recoils_1.campaignState), campaign = _a[0], setCampaign = _a[1];
+    var _b = (0, recoil_1.useRecoilState)(Recoils_1.campaignAttributesState), campaignAttributes = _b[0], setCampaignAttributes = _b[1];
     var setCampaignModel = (0, recoil_1.useSetRecoilState)(Recoils_1.campaignModelState);
     var t = (0, react_i18next_1.useTranslation)().t;
     (0, react_1.useEffect)(function () {
@@ -37,36 +64,64 @@ var Infomation = function () {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [directories]);
-    var handleUpdate = (0, react_1.useCallback)(function (obj, formValid) {
-        if (!(0, lodash_1.isEmpty)(obj)) {
-            setCampaign(function (prev) { return (__assign(__assign({}, prev), obj)); });
+    (0, react_1.useEffect)(function () {
+        if (!service.attributesGetByObjectTypeCode) {
+            setCampaignAttributes([""]);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps     
+    }, [service]);
+    var handleUpdate = (0, react_1.useCallback)(function (obj, formValid, fieldUpdate) {
+        if (fieldUpdate) {
+            if (fieldUpdate === 'attributeIds') {
+                setCampaignAttributes(obj['attributeIds'].map(function (item) { return ({ attributeId: item }); }));
+            }
+            else {
+                setCampaign(function (prev) { return (__assign(__assign({}, prev), obj)); });
+            }
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+    var fieldDefine = react_1.default.useMemo(function () {
+        var fields = [
+            {
+                fieldName: 'directoryId',
+                type: 'select',
+                label: t('Common.Directory'),
+                required: true,
+                options: directories.map(function (directory) { return ({
+                    value: directory.directoryId,
+                    text: directory.name,
+                    level: directory.level,
+                }); }),
+            },
+            {
+                length: 200,
+                fieldName: 'name',
+                type: 'text',
+                label: t('Campaign.Name'),
+                required: true,
+            },
+        ];
+        if (attributes.length) {
+            fields.push({
+                fieldName: 'attributeIds',
+                type: 'autocomplete',
+                multiple: true,
+                label: t('Campaign.Attributes'),
+                required: true,
+                options: attributes.map(function (attribute) { return ({
+                    value: attribute.id,
+                    text: attribute.name,
+                }); }),
+            });
+        }
+        return fields;
+    }, [attributes, directories, t]);
     return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
             '&>div': {
                 padding: 0,
                 boxShadow: 'none',
             },
-        }, children: (0, jsx_runtime_1.jsx)(AWING_1.DataForm, { fields: [
-                {
-                    fieldName: 'directoryId',
-                    type: 'select',
-                    label: t('Common.Directory'),
-                    required: true,
-                    options: directories.map(function (directory) { return ({
-                        value: directory.directoryId,
-                        text: directory.name,
-                        level: directory.level,
-                    }); }),
-                },
-                {
-                    length: 200,
-                    fieldName: 'name',
-                    type: 'text',
-                    label: t('Campaign.Name'),
-                    required: true,
-                },
-            ], checkAllRequiredFields: !(campaign.directoryId && campaign.name), oldValue: campaign, onUpdate: handleUpdate }) }));
+        }, children: (0, jsx_runtime_1.jsx)(AWING_1.DataForm, { fields: fieldDefine, checkAllRequiredFields: !(campaign.directoryId && campaign.name), oldValue: __assign(__assign({}, campaign), { attributeIds: campaignAttributes.map(function (item) { return item.attributeId; }) }), onUpdate: handleUpdate }) }));
 };
 exports.default = Infomation;

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

@@ -1,4 +1,15 @@
 "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 };
 };
@@ -46,6 +57,7 @@ var CreateOrEdit = function () {
     var _d = (0, recoil_1.useRecoilState)(Recoils_1.campaignModelState), campaignData = _d[0], setCampaignData = _d[1];
     var setCampaignPages = (0, recoil_1.useSetRecoilState)(atoms_1.campaignPageIdState);
     var setDirectories = (0, recoil_1.useSetRecoilState)(Recoils_1.directoriesState);
+    var setAttributes = (0, recoil_1.useSetRecoilState)(Recoils_1.attributesState);
     var confirmExit = (0, recoil_1.useRecoilValue)(Recoils_1.confirmExitState);
     var readyForSubmit = (0, recoil_1.useRecoilValue)(Recoils_1.readyForSubmitState);
     var setCreate = (0, recoil_1.useSetRecoilState)(Recoils_1.isCreateState);
@@ -78,7 +90,10 @@ var CreateOrEdit = function () {
         service
             .directoriesGetByObjectTypeCode(Enum_1.DirectoryRoot.Campaign)
             .then(setDirectories);
-    }, [service, setDirectories]);
+        if (service.attributesGetByObjectTypeCode) {
+            service.attributesGetByObjectTypeCode(Enum_1.DirectoryRoot.Campaign).then(setAttributes);
+        }
+    }, [service, setDirectories, setAttributes]);
     (0, react_1.useLayoutEffect)(function () {
         if (tabName && route.includes(tabName)) {
             setValue(String(route.indexOf(tabName)));
@@ -179,11 +194,12 @@ var CreateOrEdit = function () {
             .flatMap(function (x) { return x.ads; }))) {
             return Promise.reject(t('Campaign.CClassDuplicatePlace'));
         }
+        var dataSubmit = __assign(__assign({}, campaignData), { campaignAttributes: campaignData.campaignAttributes.filter(Boolean) });
         if (componentStatus === Constant_1.Constants.CAMPAIGN_DETAIL) {
-            return service.campaignsPut(campaignId, campaignData);
+            return service.campaignsPut(campaignId, dataSubmit);
         }
         else {
-            return service.campaignsPost(campaignData);
+            return service.campaignsPost(dataSubmit);
         }
     };
     return ((0, jsx_runtime_1.jsx)(ClassicDrawer_1.default, { title: "".concat(t(['Campaign', campaignId ? 'TitleDetail' : 'Create'].join('.'))).concat(campaignId ? ": ".concat((_a = campaignData === null || campaignData === void 0 ? void 0 : campaignData.campaign) === null || _a === void 0 ? void 0 : _a.name) : '', "\n               "), onSubmit: handleSubmit, disableButtonSubmit: !readyForSubmit, confirmExit: confirmExit, childrenWrapperStyle: { padding: 0 }, children: (0, jsx_runtime_1.jsx)(material_1.Grid, { container: true, sx: {

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

@@ -331,6 +331,14 @@ export interface AnalyticDataProviderModel {
     click: number;
     ctr: number;
 }
+export interface Attribute {
+    id: number;
+    name: string;
+    objectTypeCode: string;
+    description: string;
+    createdDate: Timestamp;
+    attributeTypeId: number;
+}
 export interface AppHelper {
     alert: (message: string, title?: string) => void;
     snackbar: (severity?: AlertColor, message?: string, autoHideDuration?: number) => void;
@@ -354,6 +362,7 @@ interface CampaignService extends PrmissionService {
     statisticCampaignGetEvents: (body: AnalyticEventModel) => Promise<AnalyticEvent[]>;
     statisticCampaignGet: (startDate?: string, endDate?: string, timelineType?: TIMELINE_TYPE, body?: Record<string, any>) => Promise<AnalyticDataProviderModel[]>;
     statisticCampaignGetAnalyticCampaign: (timelineType?: TIMELINE_TYPE, startDate?: string, endDate?: string, body?: Record<string, any>) => Promise<AnalyticCampaignSummary[]>;
+    attributesGetByObjectTypeCode?: (objectTypeCode: string) => Promise<Attribute[]>;
 }
 export interface CampaignFeatureProps {
     service: CampaignService & PageService;
@@ -361,6 +370,7 @@ export interface CampaignFeatureProps {
     tabStatistic: (p?: any) => JSX.Element;
     domainId: string;
     configs: any;
+    isAxn?: boolean;
 }
 export interface AnalyticCampaignSummary {
     campaignId: string;

package/lib/ACM-AXN/Campaign/Utils.js

@@ -112,7 +112,7 @@ function nameValid(value) {
 }
 exports.nameValid = nameValid;
 function attributesValid(value) {
-    return value.length > 0;
+    return Array.isArray(value) && value.length > 0;
 }
 exports.attributesValid = attributesValid;
 function tabInfomationValid(campaign, campaignAttributes) {

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

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

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var index = function () {
+    return ((0, jsx_runtime_1.jsx)("div", { children: "index" }));
+};
+exports.default = index;

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

@@ -37,13 +37,21 @@ var PageContainer = function () {
     var navigate = (0, react_router_1.useNavigate)();
     var location = (0, react_router_1.useLocation)();
     var _d = (0, react_1.useState)(false), loading = _d[0], setLoading = _d[1];
-    var _e = (0, react_1.useState)([]), directories = _e[0], setDirectories = _e[1];
-    var _f = (0, react_1.useState)(true), tempLoading = _f[0], setTempLoading = _f[1];
+    var _e = (0, react_1.useState)(true), init = _e[0], setInit = _e[1]; // First time render
+    var _f = (0, react_1.useState)([]), directories = _f[0], setDirectories = _f[1];
+    var _g = (0, react_1.useState)(true), isLoadDirectory = _g[0], setLoadLoadDirectory = _g[1];
+    var _h = (0, react_1.useState)(true), tempLoading = _h[0], setTempLoading = _h[1];
+    var _j = (0, react_1.useState)(), anchorEl = _j[0], setAnchorEl = _j[1];
+    var open = Boolean(anchorEl);
+    var handlePreviewPage = function (e) {
+        e.stopPropagation();
+        setAnchorEl(e.currentTarget);
+    };
     var prevQuery = (0, react_1.useRef)({});
-    var _g = (0, react_1.useState)({
+    var _k = (0, react_1.useState)({
         items: [],
         totalItemCount: 0,
-    }), pageList = _g[0], setPage = _g[1];
+    }), pageList = _k[0], setPage = _k[1];
     var columnDefinitions = (0, react_1.useMemo)(function () { return [
         {
             field: 'stt',
@@ -57,12 +65,16 @@ var PageContainer = function () {
                 return params.at(-1);
             },
         },
-        { field: 'pageId', headerName: 'Id', TableCellProps: {
+        {
+            field: 'pageId',
+            headerName: 'Id',
+            TableCellProps: {
                 sx: {
                     minWidth: '180px',
                     width: '20%',
                 },
-            } },
+            },
+        },
         {
             field: 'title',
             headerName: t('Page.Name'),
@@ -73,10 +85,16 @@ var PageContainer = function () {
             valueGetter: function (row) {
                 return (0, Helpers_1.timestampToStringDDMMYYYY)(row.createdDate);
             },
+            TableCellProps: {
+                sx: {
+                    width: '250px',
+                },
+            },
         },
     ]; }, [t]);
     (0, react_1.useLayoutEffect)(function () {
         setDirectories([]);
+        setInit(true);
         setPage({
             items: [],
             totalItemCount: 0,
@@ -91,19 +109,21 @@ var PageContainer = function () {
     }, [pageCode]);
     (0, react_1.useEffect)(function () {
         var _a;
-        if (((_a = location.state) === null || _a === void 0 ? void 0 : _a.action) === ClassicDrawer_1.CloseAction.ReloadDirectory || !directories.length) {
+        if (((_a = location.state) === null || _a === void 0 ? void 0 : _a.action) === ClassicDrawer_1.CloseAction.ReloadDirectory || init) {
             fetchDirectories();
+            setInit(false);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [location.pathname, directories]);
+    }, [location.pathname, init]);
     var fetchDirectories = function () {
+        setLoadLoadDirectory(true);
         service
             .directoriesGetByObjectTypeCode(Enum_1.DirectoryRoot[pageCode === enums_1.PageCode.Lgn ? 'PageLogin' : 'PageWelcome'])
-            .then(function (res) {
-            var _a;
-            setDirectories(res);
-            getPagePaging(prevQuery.current, (_a = (0, lodash_1.minBy)(res, 'level')) === null || _a === void 0 ? void 0 : _a.directoryId);
-        }).finally(function () { return navigate(location.pathname, { replace: true }); });
+            .then(setDirectories)
+            .finally(function () {
+            // navigate(location.pathname, { replace: true })
+            setLoadLoadDirectory(false);
+        });
     };
     var handleRowClick = function (id) {
         navigate([Constant_1.pageConstants.EDIT_PAGE, id].join('/'));
@@ -123,7 +143,6 @@ var PageContainer = function () {
     }, 100), []);
     var getPagePaging = (0, react_1.useCallback)(function (input, directoryId) {
         var _a;
-        console.log("call");
         var searchString = input.searchString, pageSize = input.pageSize, pageIndex = input.pageIndex, advancedObject = input.advancedObject;
         handleFetchPaging(searchString, pageSize, pageIndex, directoryId ||
             (advancedObject === null || advancedObject === void 0 ? void 0 : advancedObject.directoryId) ||
@@ -139,7 +158,11 @@ var PageContainer = function () {
             (0, Helpers_1.downloadZipFile)(res, "Page_".concat(pageCode === enums_1.PageCode.Lgn ? 'lgn' : 'wlc', "_"));
         });
     };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: tempLoading ? ((0, jsx_runtime_1.jsx)(AWING_1.CircularProgress, {})) : ((0, jsx_runtime_1.jsx)(AWING_1.PageManagement, { title: t([
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+            '& th:last-of-type': {
+                width: '250px!important',
+            },
+        }, children: tempLoading || isLoadDirectory ? ((0, jsx_runtime_1.jsx)(AWING_1.CircularProgress, {})) : ((0, jsx_runtime_1.jsx)(AWING_1.PageManagement, { title: t([
                 'Page',
                 pageCode === enums_1.PageCode.Lgn
                     ? 'LoginTitle'
@@ -164,8 +187,28 @@ var PageContainer = function () {
             }, rowActions: [
                 {
                     icon: (0, jsx_runtime_1.jsx)(icons_material_1.Visibility, {}),
+                    // icon: (() => {
+                    //     return (
+                    //         <Typography
+                    //             component={'p'}
+                    //             // onClick={(e) => handlePreview(e)}
+                    //             title={t('Campaign.Preview')}
+                    //         >
+                    //             <VisibilityOutlined fontSize="small" />
+                    //             <span
+                    //                 aria-label="more"
+                    //                 aria-controls="long-menu"
+                    //                 aria-haspopup="true"
+                    //                 onClick={handlePreviewPage}
+                    //             >
+                    //                 <ArrowDropDown fontSize="small" />
+                    //             </span>
+                    //         </Typography>
+                    //     )
+                    // })(),
                     tooltipTitle: t('Common.Preview'),
                     action: handlePreview,
+                    // action: () => {},
                     sx: {
                         display: pageCode === enums_1.PageCode.Wlc
                             ? 'none'

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

@@ -1,6 +1,7 @@
 import { Directory } from '../../Campaign/Types';
 import { FormValid, PageModel } from '../Types';
 export declare const pageDirectoriesState: import("recoil").RecoilState<Directory[]>;
+export declare const wiewMounted: import("recoil").RecoilState<boolean>;
 export declare const pageRootDeirectory: import("recoil").RecoilState<string>;
 export declare const pageChangedFormState: import("recoil").RecoilState<Record<keyof PageModel, boolean>>;
 export declare const pageRootState: import("recoil").RecoilState<PageModel>;

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

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.pageState = exports.validForm = exports.pageRootState = exports.pageChangedFormState = exports.pageRootDeirectory = exports.pageDirectoriesState = void 0;
+exports.pageState = exports.validForm = exports.pageRootState = exports.pageChangedFormState = exports.pageRootDeirectory = exports.wiewMounted = exports.pageDirectoriesState = void 0;
 var lodash_1 = require("lodash");
 var recoil_1 = require("recoil");
 var Constant_1 = require("../Constant");
@@ -21,6 +21,10 @@ exports.pageDirectoriesState = (0, recoil_1.atom)({
     key: 'pageDirectoriesState',
     default: [],
 });
+exports.wiewMounted = (0, recoil_1.atom)({
+    key: 'wiewMounted',
+    default: false,
+});
 exports.pageRootDeirectory = (0, recoil_1.atom)({
     key: 'pageRootDeirectory',
     default: (0, recoil_1.selector)({

package/lib/ACM-AXN/Page/CreateOrEdit/Tabview/ViewContent.js

@@ -75,7 +75,7 @@ var ViewContent = function (_a) {
             onChange(['viewDatas'], []);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [service, viewInfoData.templateId, viewInfoData.viewDatas.length]);
+    }, [viewInfoData.templateId, viewInfoData.viewDatas.length]);
     var handleResData = function (res) {
         onChange(['viewDatas'], (0, Utils_1.getTemplateDatas)(res.templateParameters, viewInfoData, pageId, viewNumber));
         onChange(['templateValidation'], res.template.validation);

package/lib/ACM-AXN/Page/CreateOrEdit/Tabview/ViewInfo.js

@@ -47,6 +47,8 @@ var enums_1 = require("../../enums");
 var Utils_1 = require("../Utils");
 var Constant_1 = require("../../../../ACM-AXN/Page/Constant");
 var react_router_dom_1 = require("react-router-dom");
+var recoil_1 = require("recoil");
+var Recoil_1 = require("../Recoil");
 var ViewInfo = function (_a) {
     var directories = _a.directories, templateTypes = _a.templateTypes, onChange = _a.onChange, viewInfoData = _a.viewInfoData;
     var pageId = (0, react_router_dom_1.useParams)().pageId;
@@ -54,20 +56,24 @@ var ViewInfo = function (_a) {
     var cacheDirectoryId = react_1.default.useRef('');
     var _b = react_1.default.useState([]), templates = _b[0], setTemplates = _b[1];
     var _c = react_1.default.useState(false), loadingTemplate = _c[0], setLoadingTemplate = _c[1];
-    var _d = (0, Context_1.default)(), service = _d.service, pageCode = _d.pageCode;
+    var _d = (0, recoil_1.useRecoilState)(Recoil_1.wiewMounted), isMounted = _d[0], setIsMounted = _d[1];
+    var _e = (0, Context_1.default)(), service = _e.service, pageCode = _e.pageCode, domainId = _e.domainId;
     var t = (0, react_i18next_1.useTranslation)().t;
     (0, react_1.useEffect)(function () {
-        var savedDirectoryId = localStorage.getItem(Constant_1.PAGE_LOGIN_DIRECTORY_SELECTED);
-        if (savedDirectoryId && !pageId) {
+        var savedDirectoryId = JSON.parse(localStorage.getItem(Constant_1.PAGE_LOGIN_DIRECTORY_SELECTED) || '{]')[Array.isArray(domainId) ? 'awingPge' : domainId];
+        if (savedDirectoryId && !pageId && !isMounted) {
+            setIsMounted(true);
             handleChangeForm({ directoryId: savedDirectoryId }, true, 'directoryId');
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     var handleChangeForm = react_1.default.useCallback(function (obj, _valid, keyUpdate) {
+        var _a;
         if ((0, lodash_1.isEmpty)(obj))
             return;
         if (['templateTypeId', 'directoryId'].includes(keyUpdate)) {
             if (keyUpdate === 'directoryId') {
-                localStorage.setItem(Constant_1.PAGE_LOGIN_DIRECTORY_SELECTED, obj[keyUpdate]);
+                localStorage.setItem(Constant_1.PAGE_LOGIN_DIRECTORY_SELECTED, JSON.stringify((_a = {}, _a[Array.isArray(domainId) ? 'awingPge' : domainId] = obj[keyUpdate], _a)));
             }
             onChange(['templateId'], null);
         }

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

@@ -59,7 +59,7 @@ var setObject = function (obj, arrKey, value) {
 exports.setObject = setObject;
 var convertTreeArrayToFlatArray = function (treeArray) {
     var result = [];
-    treeArray.forEach(function (data) {
+    treeArray === null || treeArray === void 0 ? void 0 : treeArray.forEach(function (data) {
         getChilds(data, function (item) { return result.push(item); });
     });
     return result;

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

@@ -0,0 +1,9 @@
+interface Props {
+    pageId: string;
+    open: boolean;
+    anchorEl: any;
+    onPreviewClose: (event: any) => void;
+    onPreviewDomain: (event: any, domainId: string) => void;
+}
+declare const PagePreview: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default PagePreview;

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

@@ -0,0 +1,148 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importStar(require("react"));
+var react_i18next_1 = require("react-i18next");
+var styles_1 = require("@mui/styles");
+var material_1 = require("@mui/material");
+var icons_material_1 = require("@mui/icons-material");
+var Context_1 = require("../../../Context");
+var useStyles = (0, styles_1.makeStyles)(function () {
+    var _a, _b;
+    var theme = (0, material_1.useTheme)();
+    return {
+        circularProgress: {
+            width: "10px !important",
+            height: "10px !important",
+            margin: "0px auto",
+        },
+        drawer: {
+            width: theme.spacing(60),
+        },
+        search: (_a = {
+                position: "relative",
+                borderRadius: theme.shape.borderRadius,
+                backgroundColor: "rgba(255, 255, 255, 0.15)",
+                "&:hover": {
+                    backgroundColor: "rgba(255, 255, 255, 0.25)",
+                },
+                marginRight: theme.spacing(2),
+                marginLeft: 0,
+                width: "100%"
+            },
+            _a[theme.breakpoints.up("sm")] = {
+                marginLeft: theme.spacing(3),
+                width: "auto",
+            },
+            _a),
+        searchIcon: {
+            padding: theme.spacing(0, 2),
+            height: "100%",
+            position: "absolute",
+            pointerEvents: "none",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+        },
+        inputRoot: {
+            color: "inherit",
+        },
+        inputInput: (_b = {
+                padding: theme.spacing(1, 1, 1, 0),
+                // vertical padding + font size from searchIcon
+                paddingLeft: "calc(1em + ".concat(theme.spacing(4), "px)"),
+                transition: theme.transitions.create("width"),
+                width: "100%"
+            },
+            _b[theme.breakpoints.up("md")] = {
+                width: "20ch",
+            },
+            _b),
+    };
+});
+var PagePreview = function (props) {
+    var pageId = props.pageId, open = props.open, anchorEl = props.anchorEl, onPreviewClose = props.onPreviewClose, onPreviewDomain = props.onPreviewDomain;
+    var appHelper = (0, Context_1.useAwing)().appHelper;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var _a = (0, react_1.useState)(false), loadingFlags = _a[0], setLoadingFlags = _a[1];
+    var classes = useStyles();
+    var _b = react_1.default.useState(false), openDrawer = _b[0], setOpenDrawer = _b[1];
+    var toggleDrawer = function (open) { return function (event) {
+        event.stopPropagation();
+        if (event.type === "keydown" &&
+            (event.key === "Tab" || event.key === "Shift")) {
+            return;
+        }
+        setOpenDrawer(open);
+    }; };
+    var _c = react_1.default.useState(""), searchDomainString = _c[0], setSearchDomainString = _c[1];
+    var _d = react_1.default.useState([]), allDomains = _d[0], setAllDomains = _d[1];
+    (0, react_1.useEffect)(function () {
+        setLoadingFlags(true);
+    }, []);
+    (0, react_1.useEffect)(function () {
+        // if (pageId && open === true) {
+        //   DomainService.getAllDomain()
+        //     .then((res) => {
+        //       if (res.data.status === STATUS_CODE.OK) {
+        //         setAllDomains(res.data.data);
+        //         setLoadingFlags(false);
+        //       }
+        //     })
+        //     .catch((err) => Snackbar(SNACKBAR_TYPES.ERROR));
+        // }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    var translationText = {
+        searchPlaceholder: t("Common.SearchPlaceholder"),
+        copyToClipboard: t("Common.Preview"),
+        other: t("Common.Other"),
+    };
+    return ((0, jsx_runtime_1.jsxs)(material_1.Menu, { id: "domain-menu", anchorEl: anchorEl, keepMounted: true, open: open, onClose: onPreviewClose, PaperProps: {
+            style: {
+                maxHeight: 48 * 4.5,
+                width: "25ch",
+            },
+        }, children: [loadingFlags ? ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { children: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { className: classes.circularProgress, color: "primary" }) })) : (allDomains &&
+                allDomains.slice(0, 5).map(function (domain) { return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { onClick: function (event) {
+                        onPreviewClose(event);
+                        onPreviewDomain(event, domain.domainId);
+                    }, children: domain.name }, domain.domainId)); })), !loadingFlags && ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { onClick: toggleDrawer(true), children: translationText.other })), (0, jsx_runtime_1.jsx)(material_1.Drawer, { anchor: "right", open: openDrawer, onClose: toggleDrawer(false), onClick: function (e) { return e.stopPropagation(); }, children: allDomains.length === 0 ? ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, { className: classes.circularProgress, color: "primary" })) : ((0, jsx_runtime_1.jsxs)(material_1.List, { className: classes.drawer, children: [(0, jsx_runtime_1.jsx)(material_1.ListItem, { component: "div", children: (0, jsx_runtime_1.jsxs)("div", { className: classes.search, children: [(0, jsx_runtime_1.jsx)("div", { className: classes.searchIcon, children: (0, jsx_runtime_1.jsx)(icons_material_1.Search, {}) }), (0, jsx_runtime_1.jsx)(material_1.InputBase, { placeholder: translationText.searchPlaceholder, classes: {
+                                            root: classes.inputRoot,
+                                            input: classes.inputInput,
+                                        }, inputProps: { "aria-label": "search" }, onChange: function (e) { return setSearchDomainString(e.target.value); } })] }) }), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), allDomains &&
+                            allDomains
+                                .filter(function (d) {
+                                return d.name
+                                    .toLowerCase()
+                                    .includes(searchDomainString.toLowerCase());
+                            })
+                                .sort(function (a, b) {
+                                return a.name !== b.name ? (a.name < b.name ? -1 : 1) : 0;
+                            })
+                                .map(function (domain) { return ((0, jsx_runtime_1.jsxs)(material_1.ListItem, { button: true, onClick: function (e) { return onPreviewDomain(e, domain.domainId); }, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: domain.name }), (0, jsx_runtime_1.jsx)(material_1.ListItemSecondaryAction, { children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: translationText.copyToClipboard, placement: "left", arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { edge: "end", children: (0, jsx_runtime_1.jsx)(icons_material_1.VisibilityOutlined, { fontSize: "small" }) }) }) })] }, domain.domainId)); })] })) })] }));
+};
+exports.default = PagePreview;

package/lib/AWING/ultis/validation.d.ts

@@ -19,7 +19,7 @@ export declare function logicExpressionValid(value: string | null | undefined):
  * @param str - The text string to be validated.
  * @param length - The maximum length of the text string. Default is 50.
  * @param required - validField required.
- * @param pattern - The regular expression pattern to match against the text string. Default is /^[a-zA-Z0-9\/\-_()\[\] ]+$/g.
+ * @param pattern - The regular expression pattern to match against the text string. Default is /^[a-zA-Z0-9\/\-_.()\[\] ]+$/g.
  * @param invertRegex - The inverted regular expression pattern to match against the text string. Default is undefined.
  * @returns An object containing the validation result and a message describing any validation errors.
  */

package/lib/AWING/ultis/validation.js

@@ -89,14 +89,14 @@ exports.logicExpressionValid = logicExpressionValid;
  * @param str - The text string to be validated.
  * @param length - The maximum length of the text string. Default is 50.
  * @param required - validField required.
- * @param pattern - The regular expression pattern to match against the text string. Default is /^[a-zA-Z0-9\/\-_()\[\] ]+$/g.
+ * @param pattern - The regular expression pattern to match against the text string. Default is /^[a-zA-Z0-9\/\-_.()\[\] ]+$/g.
  * @param invertRegex - The inverted regular expression pattern to match against the text string. Default is undefined.
  * @returns An object containing the validation result and a message describing any validation errors.
  */
 var textValidation = function (str, length, required, pattern, invertRegex) {
     if (length === void 0) { length = 50; }
     if (required === void 0) { required = true; }
-    if (pattern === void 0) { pattern = /^[a-zA-Z0-9\/\-_()\[\] ]+$/g; }
+    if (pattern === void 0) { pattern = /^[a-zA-Z0-9\/\-_.()\[\] ]+$/g; }
     var validRes = {
         valid: true,
         message: [],
@@ -113,7 +113,7 @@ var textValidation = function (str, length, required, pattern, invertRegex) {
         .replace(/[\u0300-\u036f]/g, '')
         .replace(/đ/g, 'd')
         .trim();
-    var invertedRegex = invertRegex || new RegExp("[^".concat(pattern.source.replace(/[.*+?^${}|]/g, ''), "]").replace(/\[\[|\]\]/g, ']'), 'g');
+    var invertedRegex = invertRegex || new RegExp("[^".concat(pattern.source.replace(/[*+?^${}|]/g, ''), "]").replace(/\[\[|\]\]/g, ']'), 'g');
     if (textTransform && pattern && !pattern.test(textTransform)) {
         validRes.valid = false;
         validRes.message.push("".concat(i18n_1.default.t('Common.InvalidChars'), ": ").concat(Array.from(new Set(textTransform.match(invertedRegex))).join(' ')));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "awing-library",
-  "version": "2.1.13-beta",
+  "version": "2.1.15-beta",
   "description": "",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",