awing-library 2.1.2-beta → 2.1.2-stage

package/lib/ACM-AXN/Notifications/NotificationPopover/Container.js

@@ -0,0 +1,149 @@
+"use strict";
+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");
+/**
+ *
+ * @author dauquan1108@gmail.com on 12/1/2023.
+ *
+ **/
+var react_1 = require("react");
+var material_1 = require("@mui/material");
+var Notifications_1 = __importDefault(require("@mui/icons-material/Notifications"));
+var signalr_1 = require("@microsoft/signalr");
+var Constant_1 = require("../../../ACM-AXN/Common/Constant");
+var Hooks_1 = __importDefault(require("../Hooks"));
+var NotificationDetail_1 = __importDefault(require("../NotificationDetail"));
+var Container = function () {
+    var service = (0, Hooks_1.default)().service;
+    var _a = (0, react_1.useState)(null), anchorEl = _a[0], setAnchorEl = _a[1];
+    var _b = (0, react_1.useState)(0), totalNotification = _b[0], setTotalNotification = _b[1];
+    var _c = (0, react_1.useState)(null), signalRConnection = _c[0], setSignalRConnection = _c[1];
+    (0, react_1.useEffect)(function () {
+        service.notificationsCountUnreadMessages().then(setTotalNotification);
+        setUpSignalRConnection().then(function (connection) { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                setSignalRConnection(connection);
+                return [2 /*return*/];
+            });
+        }); });
+        return function () {
+            if (signalRConnection)
+                signalRConnection.stop();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    var setUpSignalRConnection = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var connection, err_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    connection = new signalr_1.HubConnectionBuilder()
+                        .withUrl("".concat(Constant_1.Constants.API_ENDPOINT, "/api/hubs/notification"))
+                        .configureLogging(signalr_1.LogLevel.None)
+                        .withAutomaticReconnect([0, 5000, 10000, 15000])
+                        .build();
+                    connection.on('ReceiveMessage', function (message) {
+                        setTotalNotification(function (prev) { return prev + 1; });
+                    });
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, connection.start()];
+                case 2:
+                    _a.sent();
+                    return [3 /*break*/, 4];
+                case 3:
+                    err_1 = _a.sent();
+                    console.log(err_1);
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/, connection];
+            }
+        });
+    }); };
+    var handleClick = function (event) {
+        var href = window.location.href;
+        // nếu đang ở notifications thì click vào quả chuông sẽ không mở popover nữa.
+        if (!href.includes(Constant_1.Constants.NOTIFICATIONS_PATH)) {
+            setTotalNotification(0);
+            setAnchorEl(event.currentTarget);
+        }
+    };
+    var handleClose = function () {
+        setAnchorEl(null);
+    };
+    var open = Boolean(anchorEl);
+    var id = open ? 'simple-popover' : undefined;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { component: "div", children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { "aria-describedby": id, onClick: handleClick, sx: { backgroundColor: open ? '#F98D9C' : 'inherit' }, children: (0, jsx_runtime_1.jsx)(material_1.Badge, { badgeContent: totalNotification, color: "error", children: (0, jsx_runtime_1.jsx)(Notifications_1.default, { "data-testid": "notification-icon", sx: { color: open ? '#DD040C' : 'inherit' } }) }) }), (0, jsx_runtime_1.jsx)(material_1.Popover, { id: id, open: open, anchorEl: anchorEl, onClose: handleClose, sx: { zIndex: 1100 }, anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'center',
+                }, transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'center',
+                }, PaperProps: {
+                    style: {
+                        borderRadius: '8px',
+                    },
+                }, children: (0, jsx_runtime_1.jsx)(material_1.Box, { "data-testid": "popover", component: "div", sx: [
+                        {
+                            width: '400px',
+                            overflowY: 'auto',
+                            maxHeight: 'calc(90vh - 8px)',
+                        },
+                        {
+                            '&::-webkit-scrollbar': {
+                                width: '10px',
+                            },
+                        },
+                        {
+                            '&::-webkit-scrollbar-track': {
+                                backgroundColor: '#f1f1f1',
+                            },
+                        },
+                        {
+                            '&::-webkit-scrollbar-thumb': {
+                                borderRadius: '4px',
+                                backgroundColor: '#c1c1c1',
+                            },
+                        },
+                    ], children: (0, jsx_runtime_1.jsx)(NotificationDetail_1.default, { onClosePopover: handleClose }) }) })] }));
+};
+exports.default = Container;

package/lib/ACM-AXN/Notifications/{NotificationPopover.test.d.ts → NotificationPopover/Container.test.d.ts}

@@ -3,4 +3,4 @@
  * @author dauquan1108@gmail.com on 12/7/2023.
  *
  **/
-import "@testing-library/jest-dom";
+import '@testing-library/jest-dom';

package/lib/ACM-AXN/Notifications/{NotificationPopover.test.js → NotificationPopover/Container.test.js}

@@ -7,11 +7,11 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 require("@testing-library/jest-dom");
 var react_1 = require("@testing-library/react");
 // Component
-var NotificationPopover_1 = __importDefault(require("./NotificationPopover"));
-describe("NotificationPopover", function () {
-    it("renders the component", function () {
-        var getByTestId = (0, react_1.render)((0, jsx_runtime_1.jsx)(NotificationPopover_1.default, {})).getByTestId;
-        var notificationsIcon = getByTestId("notification-icon");
+var Container_1 = __importDefault(require("./Container"));
+describe('NotificationPopover', function () {
+    it('renders the component', function () {
+        var getByTestId = (0, react_1.render)((0, jsx_runtime_1.jsx)(Container_1.default, {})).getByTestId;
+        var notificationsIcon = getByTestId('notification-icon');
         expect(notificationsIcon).toBeInTheDocument();
     });
     // it("Mở dao diện 'NotificationPopover' khi click vào quả chuông.", async () => {

package/lib/ACM-AXN/Notifications/NotificationPopover/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ *
+ * @author dauquan1108@gmail.com on 12/1/2023.
+ *
+ **/
+import React from 'react';
+import { NotificationPropsContext } from '../Types';
+export declare const NotificationPopover: React.FC<NotificationPropsContext>;

package/lib/ACM-AXN/Notifications/NotificationPopover/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotificationPopover = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Container_1 = __importDefault(require("./Container"));
+var Context_1 = require("../Context");
+var NotificationPopover = function (props) {
+    return ((0, jsx_runtime_1.jsx)(Context_1.NotificationContext.Provider, { value: props, children: (0, jsx_runtime_1.jsx)(Container_1.default, {}) }));
+};
+exports.NotificationPopover = NotificationPopover;

package/lib/ACM-AXN/Notifications/NotificationScreen.d.ts

@@ -3,6 +3,6 @@
  * @author dauquan1108@gmail.com on 11/27/2023.
  *
  **/
-import React from "react";
+import React from 'react';
 declare const NotificationScreen: React.FC;
 export default NotificationScreen;

package/lib/ACM-AXN/Notifications/NotificationScreen.js

@@ -8,11 +8,11 @@ var Box_1 = __importDefault(require("@mui/material/Box"));
 var NotificationDetail_1 = __importDefault(require("./NotificationDetail"));
 var NotificationScreen = function () {
     return ((0, jsx_runtime_1.jsx)(Box_1.default, { component: "div", sx: {
-            borderRadius: "8px",
-            border: "0.1px solid #0000001a",
-            boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
+            borderRadius: '8px',
+            border: '0.1px solid #0000001a',
+            boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
         }, "data-testid": "notificationScreen", 
         // width={{xs, sm, md, lg, xl}}
-        width: { xs: "100%", sm: "600px", lg: "680px" }, children: (0, jsx_runtime_1.jsx)(NotificationDetail_1.default, {}) }));
+        width: { xs: '100%', sm: '600px', lg: '680px' }, children: (0, jsx_runtime_1.jsx)(NotificationDetail_1.default, {}) }));
 };
 exports.default = NotificationScreen;

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

@@ -0,0 +1,84 @@
+/**
+ *
+ * @author dauquan1108@gmail.com on 04/15/2024.
+ *
+ **/
+import { Timestamp } from '../../ACM-AXN/Common/Types';
+import { SagaTransactionType } from '../../ACM-AXN/TransactionLog/Types';
+export interface IValueFilterState {
+    textSearch: string;
+    tabs: string;
+    status: number | undefined;
+}
+export interface IValueItem {
+    id: number;
+    status: NotificationMessageStatus;
+}
+export interface INotificationItem {
+    id: string | number;
+    content: string;
+    url: string;
+    status: boolean;
+    userName: string;
+    avatarUrl: string;
+    time: number | string;
+}
+export interface Cancel {
+    message: string | undefined;
+}
+export interface CancelToken {
+    promise: Promise<Cancel>;
+    reason?: Cancel;
+    throwIfRequested(): void;
+}
+export interface NotificationPropsContext {
+    service: NotificationService;
+}
+export interface NotificationService {
+    /**
+     *  notificationsPaging: API hiện thị Danh sách Notification.
+     **/
+    notificationsPaging: (pageIndex: number | undefined, pageSize: number | undefined, searchString: string | undefined, status: number | undefined, body: SagaTransactionType[] | undefined, cancelToken?: CancelToken) => Promise<PagedList_1OfNotificationMessage>;
+    /**
+     *  notificationsReadAll: API Chuyển trang Notifications thành đã đọc.
+     **/
+    notificationsReadAll: (cancelToken?: CancelToken) => Promise<void>;
+    /**
+     *  notificationsRead: API Chuyển trang NotificationItem sang đã đọc.
+     **/
+    notificationsRead: (body: number[] | undefined, cancelToken?: CancelToken) => Promise<void>;
+    /**
+     *  notificationsUnread: API Chuyển trang NotificationItem sang chưa đọc.
+     **/
+    notificationsUnread: (body: number[] | undefined, cancelToken?: CancelToken) => Promise<void>;
+    /**
+     *  notificationsCountUnreadMessages: API Hiển thị số lượng thông báo chưa đọc.
+     **/
+    notificationsCountUnreadMessages: (cancelToken?: CancelToken) => Promise<number>;
+}
+export declare enum NotificationMessageStatus {
+    Unread = 0,
+    Read = 1
+}
+export interface NotificationMessage {
+    id?: number;
+    userId?: string;
+    sagaTransactionType?: SagaTransactionType[string];
+    fields?: NotificationMessageField[] | undefined;
+    status?: NotificationMessageStatus;
+    createdDate?: Timestamp;
+}
+export interface NotificationMessageField {
+    name?: string | undefined;
+    value?: string | undefined;
+    text?: string | undefined;
+}
+export interface PagedList_1OfNotificationMessage {
+    items?: NotificationMessage[] | undefined;
+    pageCount?: number;
+    totalItemCount: number;
+    pageNumber?: number;
+    pageSize?: number;
+    hasPreviousPage?: boolean;
+    hasNextPage?: boolean;
+}

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

@@ -0,0 +1,13 @@
+"use strict";
+/**
+ *
+ * @author dauquan1108@gmail.com on 04/15/2024.
+ *
+ **/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotificationMessageStatus = void 0;
+var NotificationMessageStatus;
+(function (NotificationMessageStatus) {
+    NotificationMessageStatus[NotificationMessageStatus["Unread"] = 0] = "Unread";
+    NotificationMessageStatus[NotificationMessageStatus["Read"] = 1] = "Read";
+})(NotificationMessageStatus || (exports.NotificationMessageStatus = NotificationMessageStatus = {}));

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

@@ -4,5 +4,5 @@
  *
  **/
 import React from 'react';
-declare const Notifications: React.FC;
-export default Notifications;
+import { NotificationPropsContext } from './Types';
+export declare const Notifications: React.FC<NotificationPropsContext>;

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

@@ -3,12 +3,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Notifications = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var Box_1 = __importDefault(require("@mui/material/Box"));
-var i18n_1 = __importDefault(require("../../i18n"));
-var react_i18next_1 = require("react-i18next");
 var NotificationScreen_1 = __importDefault(require("./NotificationScreen"));
-var Notifications = function () {
-    return ((0, jsx_runtime_1.jsx)(react_i18next_1.I18nextProvider, { i18n: i18n_1.default, children: (0, jsx_runtime_1.jsx)(Box_1.default, { component: "div", display: "flex", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(NotificationScreen_1.default, {}) }) }));
+var Context_1 = require("./Context");
+var Notifications = function (props) {
+    return ((0, jsx_runtime_1.jsx)(Context_1.NotificationContext.Provider, { value: props, children: (0, jsx_runtime_1.jsx)(Box_1.default, { component: "div", display: "flex", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(NotificationScreen_1.default, {}) }) }));
 };
-exports.default = Notifications;
+exports.Notifications = Notifications;

package/lib/ACM-AXN/Page/Constant.d.ts

@@ -1,13 +1,3 @@
 import { ViewModel } from './Types';
 export declare const PAGE_LOGIN_DIRECTORY_SELECTED = "pageLoginDirectorySelected";
-export declare const pageConstants: {
-    PAGE: string;
-    PAGE_LOGIN: string;
-    PAGE_WELCOME: string;
-    CREATE_PAGE: string;
-    IMPORT_PAGE: string;
-    EDIT_PAGE: string;
-    CLONE_PAGE: string;
-    PAGE_CREATE_DIRECTORY: string;
-};
 export declare const defaultView: ViewModel;

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

@@ -1,18 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultView = exports.pageConstants = exports.PAGE_LOGIN_DIRECTORY_SELECTED = void 0;
+exports.defaultView = exports.PAGE_LOGIN_DIRECTORY_SELECTED = void 0;
 var enums_1 = require("./enums");
 exports.PAGE_LOGIN_DIRECTORY_SELECTED = 'pageLoginDirectorySelected';
-exports.pageConstants = {
-    PAGE: 'Page',
-    PAGE_LOGIN: 'Page/Login',
-    PAGE_WELCOME: 'Page/Welcome',
-    CREATE_PAGE: 'Create',
-    IMPORT_PAGE: 'Import',
-    EDIT_PAGE: 'Edit',
-    CLONE_PAGE: 'Clone',
-    PAGE_CREATE_DIRECTORY: 'CreateDirectory',
-};
 exports.defaultView = {
     templateId: '',
     directoryId: '',

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

@@ -17,16 +17,18 @@ 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 DomainPreview_1 = __importDefault(require("../../ACM-AXN/DomainPreview"));
+var PreviewButton_1 = __importDefault(require("../../ACM-AXN/DomainPreview/PreviewButton"));
 var lodash_1 = require("lodash");
 var react_1 = require("react");
 var react_i18next_1 = require("react-i18next");
-var react_router_1 = require("react-router");
+var react_router_dom_1 = require("react-router-dom");
 var Enum_1 = require("../../ACM-AXN/Campaign/Enum");
 var AWING_1 = require("../../AWING");
 var ClassicDrawer_1 = require("../../Commons/Components/ClassicDrawer");
 var Context_1 = require("../../Context");
 var Helpers_1 = require("../../Utils/Helpers");
-var Constant_1 = require("./Constant");
+var Constant_1 = require("../Common/Constant");
 var Context_2 = __importDefault(require("./Context"));
 var enums_1 = require("./enums");
 var PageContainer = function () {
@@ -34,16 +36,26 @@ var PageContainer = function () {
     var _b = (0, Context_2.default)(), pageCode = _b.pageCode, service = _b.service, domainId = _b.domainId, CONFIGS = _b.configs;
     var _c = (0, Context_1.useAwing)().appHelper, confirm = _c.confirm, snackbar = _c.snackbar;
     var t = (0, react_i18next_1.useTranslation)().t;
-    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 navigate = (0, react_router_dom_1.useNavigate)();
+    var location = (0, react_router_dom_1.useLocation)();
+    var _d = (0, react_1.useState)(true), loading = _d[0], setLoading = _d[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 _k = (0, react_1.useState)(''), previewId = _k[0], setPreviewId = _k[1];
+    var open = Boolean(anchorEl);
+    var handlePreviewPage = function (e, id) {
+        e.stopPropagation();
+        setPreviewId(id);
+        setAnchorEl(e.currentTarget);
+    };
     var prevQuery = (0, react_1.useRef)({});
-    var _g = (0, react_1.useState)({
+    var _l = (0, react_1.useState)({
         items: [],
         totalItemCount: 0,
-    }), pageList = _g[0], setPage = _g[1];
+    }), pageList = _l[0], setPage = _l[1];
     var columnDefinitions = (0, react_1.useMemo)(function () { return [
         {
             field: 'stt',
@@ -57,12 +69,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 +89,21 @@ var PageContainer = function () {
             valueGetter: function (row) {
                 return (0, Helpers_1.timestampToStringDDMMYYYY)(row.createdDate);
             },
+            TableCellProps: {
+                sx: {
+                    width: '250px',
+                },
+            },
         },
     ]; }, [t]);
+    var handlePreviewClose = function (event) {
+        event.stopPropagation();
+        setAnchorEl(null);
+    };
     (0, react_1.useLayoutEffect)(function () {
         setDirectories([]);
+        setInit(true);
+        setLoading(true);
         setPage({
             items: [],
             totalItemCount: 0,
@@ -91,25 +118,27 @@ 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('/'));
+        navigate([Constant_1.Constants.EDIT_PATH, id].join('/'));
     };
     var handleClone = function (id) {
-        navigate([Constant_1.pageConstants.CLONE_PAGE, id].join('/'));
+        navigate([Constant_1.Constants.CLONE_PATH, id].join('/'));
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
     var handleFetchPaging = (0, react_1.useCallback)((0, lodash_1.debounce)(function (searchString, pageSize, pageIndex, directoryId) {
@@ -129,62 +158,71 @@ var PageContainer = function () {
             ((_a = (0, lodash_1.minBy)(directories, 'level')) === null || _a === void 0 ? void 0 : _a.directoryId));
         prevQuery.current = (0, lodash_1.cloneDeep)(input);
     }, [directories, handleFetchPaging]);
-    var handlePreview = function (id) {
-        var url = "".concat(CONFIGS.CAPTIVE_DOMAIN, "/").concat(CONFIGS.PAGE_LOGIN_PREVIEW, "?loginId=").concat(id, "&domainId=").concat(domainId, "&isNetworkCampaign=false");
+    var handlePreview = function (id, domainId) {
+        var url = "".concat(CONFIGS.CAPTIVE_DOMAIN, "/").concat(CONFIGS.PAGE_LOGIN_PREVIEW, "?loginId=").concat(id, "&domainId=").concat(domainId, "&isNetworkCampaign=").concat(Boolean(service.domainsGetAll).toString());
         window.open(url, '_blank');
     };
+    var handlePreviewClick = function (id) {
+        handlePreview(id, domainId || CONFIGS.DEFAULT_PREVIEW_DOMAIN_ID || '');
+    };
     var handleExport = function (id) {
         service.pagesExport(id).then(function (res) {
             (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([
-                'Page',
-                pageCode === enums_1.PageCode.Lgn
-                    ? 'LoginTitle'
-                    : 'WelcomeTitle',
-            ].join('.')), advancedSearchFields: [
-                {
-                    fieldName: 'directoryId',
-                    label: t('Common.Directory'),
-                    type: 'directory',
-                    icon: (0, jsx_runtime_1.jsx)(icons_material_1.FolderOpen, { fontSize: "small" }),
-                    rootId: (_a = (0, lodash_1.minBy)(directories, 'level')) === null || _a === void 0 ? void 0 : _a.directoryId,
-                    options: directories.map(function (directory) { return (__assign(__assign({}, directory), { text: directory.name, value: directory.directoryId })); }),
-                },
-            ], columns: columnDefinitions, rows: pageList.items, onChangeQueryInput: getPagePaging, getRowId: function (obj) { return obj.pageId; }, loading: loading, totalOfRows: pageList.totalItemCount, onCreateButtonClick: function () {
-                navigate(Constant_1.pageConstants.CREATE_PAGE);
-            }, onCreateFolderButtonClick: function () {
-                var _a;
-                navigate([
-                    Constant_1.pageConstants.PAGE_CREATE_DIRECTORY,
-                    (_a = (0, lodash_1.minBy)(directories, 'level')) === null || _a === void 0 ? void 0 : _a.directoryId,
-                ].join('/'));
-            }, rowActions: [
-                {
-                    icon: (0, jsx_runtime_1.jsx)(icons_material_1.Visibility, {}),
-                    tooltipTitle: t('Common.Preview'),
-                    action: handlePreview,
-                    sx: {
-                        display: pageCode === enums_1.PageCode.Wlc
-                            ? 'none'
-                            : 'unset',
+    return ((0, jsx_runtime_1.jsxs)(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'
+                        : 'WelcomeTitle',
+                ].join('.')), advancedSearchFields: [
+                    {
+                        fieldName: 'directoryId',
+                        label: t('Common.Directory'),
+                        type: 'directory',
+                        icon: (0, jsx_runtime_1.jsx)(icons_material_1.FolderOpen, { fontSize: "small" }),
+                        rootId: (_a = (0, lodash_1.minBy)(directories, 'level')) === null || _a === void 0 ? void 0 : _a.directoryId,
+                        options: directories.map(function (directory) { return (__assign(__assign({}, directory), { text: directory.name, value: directory.directoryId })); }),
                     },
-                },
-                {
-                    icon: (0, jsx_runtime_1.jsx)(icons_material_1.GetApp, {}),
-                    tooltipTitle: t('Common.Export'),
-                    action: handleExport,
-                },
-                {
-                    icon: (0, jsx_runtime_1.jsx)(icons_material_1.FileCopyOutlined, {}),
-                    tooltipTitle: t('Common.Duplicate'),
-                    action: handleClone,
-                },
-            ], onRowClick: handleRowClick, onDelete: service.pagesDelete, showNotificationSuccess: function () { return snackbar('success'); }, confirmDelete: confirm, customActions: (0, jsx_runtime_1.jsx)(material_1.Button, { sx: {
-                    marginLeft: function (theme) { return theme.spacing(1); },
-                }, color: "inherit", variant: "outlined", onClick: function () {
-                    navigate(Constant_1.pageConstants.IMPORT_PAGE);
-                }, children: t('Common.Import') }) })) }));
+                ], columns: columnDefinitions, rows: pageList.items, onChangeQueryInput: getPagePaging, getRowId: function (obj) { return obj.pageId; }, loading: loading, totalOfRows: pageList.totalItemCount, onCreateButtonClick: function () {
+                    navigate(Constant_1.Constants.CREATE_PATH);
+                }, onCreateFolderButtonClick: function () {
+                    var _a;
+                    navigate([
+                        Constant_1.Constants.PAGE_CREATE_DIRECTORY,
+                        (_a = (0, lodash_1.minBy)(directories, 'level')) === null || _a === void 0 ? void 0 : _a.directoryId,
+                    ].join('/'));
+                }, rowActions: [
+                    {
+                        icon: function (props) { return (0, jsx_runtime_1.jsx)(DomainPreview_1.default, { handlePreviewPage: function (e) { return handlePreviewPage(e, props.id); }, isSelectDomain: Boolean(service.domainsGetAll) }); },
+                        tooltipTitle: t('Common.Preview'),
+                        action: handlePreviewClick,
+                        sx: {
+                            display: pageCode === enums_1.PageCode.Wlc
+                                ? 'none'
+                                : 'unset',
+                        },
+                    },
+                    {
+                        icon: (0, jsx_runtime_1.jsx)(icons_material_1.GetApp, {}),
+                        tooltipTitle: t('Common.Export'),
+                        action: handleExport,
+                    },
+                    {
+                        icon: (0, jsx_runtime_1.jsx)(icons_material_1.FileCopyOutlined, {}),
+                        tooltipTitle: t('Common.Duplicate'),
+                        action: handleClone,
+                    },
+                ], onRowClick: handleRowClick, onDelete: service.pagesDelete, showNotificationSuccess: function () { return snackbar('success'); }, confirmDelete: confirm, customActions: (0, jsx_runtime_1.jsx)(material_1.Button, { sx: {
+                        marginLeft: function (theme) { return theme.spacing(1); },
+                    }, color: "inherit", variant: "outlined", onClick: function () {
+                        navigate(Constant_1.Constants.IMPORT_PATH);
+                    }, children: t('Common.Import') }) })), open && ((0, jsx_runtime_1.jsx)(PreviewButton_1.default, { anchorEl: anchorEl, open: open, domainIds: [], handlePreviewClose: handlePreviewClose, handlePreviewDomain: function (event, domainId) {
+                    handlePreview(previewId, domainId);
+                }, service: service }))] }));
 };
 exports.default = PageContainer;