awing-library 2.1.7-beta → 2.1.7

package/lib/ACM-AXN/Directory/components/Permission/CreateOrEditPermission.js

@@ -53,9 +53,10 @@ function Permission(props) {
             setDrawerTitle(t('Directory.EditPermission'));
             setLoading(true);
             setDrawerState(AWING_1.DrawerStateEnum.LOADING);
-            var getPermission = isSystemDirectory
-                ? service.systemDirectoryPermissionGet
-                : service.directoryPermissionGet;
+            var getPermission = service.directoryPermissionGet;
+            if (isSystemDirectory) {
+                getPermission = service.systemDirectoryPermissionGet;
+            }
             getPermission(directoryId)
                 .then(function (res) {
                 var currentPermission = res.permissions.find(function (p) { return p.authenId == id; });
@@ -211,9 +212,10 @@ function Permission(props) {
             result.inheritedPermissions = [];
             return result;
         });
-        var updatePermission = isSystemDirectory
-            ? service.systemDirectoryPermissionPut
-            : service.directoryPermissionPut;
+        var updatePermission = service.directoryPermissionPut;
+        if (isSystemDirectory) {
+            updatePermission = service.systemDirectoryPermissionPut;
+        }
         return updatePermission(directoryId, {
             directoryId: directoryId,
             permissions: convertPermissions,

package/lib/ACM-AXN/Directory/components/Permission/Management.js

@@ -57,21 +57,24 @@ function Permission(props) {
 }
 exports.default = Permission;
 function FolderPermission(props) {
-    var t = (0, react_i18next_1.useTranslation)().t;
+    var _a = (0, react_i18next_1.useTranslation)(), t = _a.t, i18n = _a.i18n;
     var isSystemDirectory = props.isSystemDirectory;
     var setDrawerTitle = (0, AWING_1.useDrawer)().setDrawerTitle;
     var navigate = (0, react_router_dom_1.useNavigate)();
     var directoryId = (0, react_router_dom_1.useParams)().directoryId;
-    var _a = (0, react_1.useContext)(Context_1.default), appHelper = _a.appHelper, service = _a.service;
+    var _b = (0, react_1.useContext)(Context_1.default), appHelper = _b.appHelper, service = _b.service;
     var confirm = appHelper.confirm, snackbar = appHelper.snackbar;
-    var _b = (0, react_1.useState)(false), loading = _b[0], setLoading = _b[1];
-    var _c = (0, react_1.useState)([]), permissions = _c[0], setPermissions = _c[1];
+    var _c = (0, react_1.useState)(false), loading = _c[0], setLoading = _c[1];
+    var _d = (0, react_1.useState)([]), permissions = _d[0], setPermissions = _d[1];
     (0, react_1.useEffect)(function () {
-        var getDirectory = isSystemDirectory
-            ? service.systemDirectoriesGet
-            : service.directoriesGet;
+        var getDirectory = service.directoriesGet;
+        if (isSystemDirectory) {
+            getDirectory = service.systemDirectoriesGet;
+        }
         getDirectory(directoryId).then(function (res) {
-            setDrawerTitle("".concat(t('Directory.ObjectPermission'), ": ").concat(res.name));
+            setDrawerTitle("".concat(t('Directory.ObjectPermission'), ": ").concat(i18n.exists("Menu.MenuName.Menu_".concat(directoryId))
+                ? t("Menu.MenuName.Menu_".concat(directoryId))
+                : res.name));
         });
         var randomKey = (0, PubSub_1.getRandomKey)();
         (0, PubSub_1.sub)('update-directory-permission', function () {
@@ -86,9 +89,10 @@ function FolderPermission(props) {
     }, [directoryId]);
     var fetchPermission = function () {
         setLoading(true);
-        var getPermission = isSystemDirectory
-            ? service.systemDirectoryPermissionGet
-            : service.directoryPermissionGet;
+        var getPermission = service.directoryPermissionGet;
+        if (isSystemDirectory) {
+            getPermission = service.systemDirectoryPermissionGet;
+        }
         getPermission(directoryId)
             .then(function (res) {
             setPermissions(res.permissions.map(function (p) { return convertPermission(p); }));
@@ -101,9 +105,10 @@ function FolderPermission(props) {
     };
     var handleDeletePermission = function (authenId, authenType) {
         confirm(function () {
-            var deletePermission = isSystemDirectory
-                ? service.systemDirectoryPermissionDelete
-                : service.directoryPermissionDelete;
+            var deletePermission = service.directoryPermissionDelete;
+            if (isSystemDirectory) {
+                deletePermission = service.systemDirectoryPermissionDelete;
+            }
             deletePermission(directoryId, authenId, authenType)
                 .then(function () {
                 snackbar('success');

package/lib/ACM-AXN/Directory/components/Permission/MenuPermissions/MenuPermissionManagement.d.ts

@@ -0,0 +1 @@
+export default function Permission(): import("react/jsx-runtime").JSX.Element;

package/lib/ACM-AXN/Directory/components/Permission/MenuPermissions/MenuPermissionManagement.js

@@ -0,0 +1,185 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var AWING_1 = require("../../../../../AWING");
+var react_i18next_1 = require("react-i18next");
+var react_1 = require("react");
+var icons_material_1 = require("@mui/icons-material");
+var material_1 = require("@mui/material");
+var react_router_dom_1 = require("react-router-dom");
+var Context_1 = __importDefault(require("../../../../../Context"));
+var Constant_1 = __importDefault(require("../../../Constant"));
+var PubSub_1 = require("../../../../../AWING/PubSub");
+var AddAuthen_1 = __importDefault(require("../AddAuthen"));
+function Permission() {
+    var i18next = (0, react_1.useContext)(Context_1.default).i18next;
+    var t = (0, react_i18next_1.useTranslation)(undefined, { i18n: i18next }).t;
+    return ((0, jsx_runtime_1.jsx)(AWING_1.DrawerNavigate, { title: t('Directory.ObjectPermission'), customButtonSubmit: (0, jsx_runtime_1.jsx)(material_1.Button, { component: react_router_dom_1.Link, color: 'primary', variant: "contained", to: Constant_1.default.MENU_DIRECTORY_ADD_PERMISSION, children: t('Directory.AddPermission') }), childrenWrapperStyle: { padding: function (theme) { return theme.spacing(3); } }, children: (0, jsx_runtime_1.jsx)(MenuPermissions, {}) }));
+}
+exports.default = Permission;
+function MenuPermissions() {
+    var _a = (0, react_1.useContext)(Context_1.default), appHelper = _a.appHelper, service = _a.service, i18next = _a.i18next;
+    var _b = (0, react_i18next_1.useTranslation)(undefined, { i18n: i18next }), t = _b.t, i18n = _b.i18n;
+    var setDrawerTitle = (0, AWING_1.useDrawer)().setDrawerTitle;
+    var directoryId = (0, react_router_dom_1.useParams)().directoryId;
+    var confirm = appHelper.confirm, snackbar = appHelper.snackbar;
+    var _c = (0, react_1.useState)(false), loading = _c[0], setLoading = _c[1];
+    var _d = (0, react_1.useState)([]), permissions = _d[0], setPermissions = _d[1];
+    var _e = (0, react_1.useState)([]), users = _e[0], setUsers = _e[1];
+    var _f = (0, react_1.useState)([]), groups = _f[0], setGroups = _f[1];
+    var _g = (0, react_1.useState)(false), loadingAuthen = _g[0], setLoadingAuthen = _g[1];
+    (0, react_1.useEffect)(function () {
+        setLoadingAuthen(true);
+        var loader = [service.usersGet(), service.groupsGetAll()];
+        Promise.all(loader)
+            .then(function (responses) {
+            if (responses[0] && responses[1]) {
+                setUsers(responses[0]);
+                setGroups(responses[1]);
+            }
+            setLoadingAuthen(false);
+        })
+            .catch(function (err) {
+            console.log(err);
+            snackbar('error');
+        });
+    }, []);
+    (0, react_1.useEffect)(function () {
+        var getDirectory = service.menusGet;
+        getDirectory(directoryId).then(function (res) {
+            setDrawerTitle("".concat(t('Directory.ObjectPermission'), ": ").concat(i18n.exists("Menu.MenuName.Menu_".concat(directoryId))
+                ? t("Menu.MenuName.Menu_".concat(directoryId))
+                : res.name));
+        });
+        var randomKey = (0, PubSub_1.getRandomKey)();
+        (0, PubSub_1.sub)('update-directory-permission', function () {
+            fetchPermission();
+        }, randomKey);
+        return function () { return (0, PubSub_1.off)(randomKey); };
+    }, []);
+    (0, react_1.useEffect)(function () {
+        if (directoryId) {
+            (0, PubSub_1.pub)('update-directory-permission');
+        }
+    }, [directoryId]);
+    var fetchPermission = function () {
+        setLoading(true);
+        var getPermission = service.menuPermissionGet;
+        getPermission(directoryId)
+            .then(function (res) {
+            setPermissions(res.permissions);
+            setLoading(false);
+        })
+            .catch(function (err) {
+            snackbar('error');
+            console.log(err);
+        });
+    };
+    var handleDeletePermission = function (authenId, authenType) {
+        confirm(function () {
+            var deletePermission = service.menuPermissionDelete;
+            deletePermission(directoryId, authenId, authenType)
+                .then(function () {
+                snackbar('success');
+                (0, PubSub_1.pub)('update-directory-permission');
+            })
+                .catch(function (err) {
+                snackbar('error');
+                console.log(err);
+            });
+        });
+    };
+    var handleUpdateMenuPermission = function (selected) {
+        var temp = selected.map(function (s) {
+            var isGroup = s.groupId !== undefined;
+            return {
+                authenId: isGroup ? s.groupId : s.userId,
+                authenType: isGroup ? 1 : 0,
+                explicitPermission: true,
+            };
+        });
+        service
+            .menuPermissionPut(directoryId, {
+            menuId: directoryId,
+            permissions: temp,
+        })
+            .then(function () {
+            snackbar('success');
+            (0, PubSub_1.pub)('update-directory-permission');
+        })
+            .catch(function (err) {
+            snackbar('error');
+            console.log(err);
+        });
+    };
+    return loading && loadingAuthen ? ((0, jsx_runtime_1.jsx)(AWING_1.CircularProgress, {})) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(AWING_1.DataGrid, { columns: [
+                    {
+                        field: '',
+                        width: 50,
+                        headerName: '#',
+                        valueGetter: function (row, idx) {
+                            return idx + 1;
+                        },
+                    },
+                    {
+                        field: 'authenType',
+                        width: 50,
+                        headerName: '',
+                        valueGetter: function (row, idx) {
+                            return row.authenType == 0 ? ((0, jsx_runtime_1.jsx)(icons_material_1.Person, { fontSize: "small" })) : ((0, jsx_runtime_1.jsx)(icons_material_1.Group, { fontSize: "small" }));
+                        },
+                    },
+                    {
+                        field: 'name',
+                        headerName: t('Common.UserGroupUser'),
+                        valueGetter: function (row, idx) {
+                            var _a, _b;
+                            return row.authenType == 0
+                                ? (_a = users.find(function (u) { return u.userId == row.authenId; })) === null || _a === void 0 ? void 0 : _a.username
+                                : (_b = groups.find(function (g) { return g.groupId == row.authenId; })) === null || _b === void 0 ? void 0 : _b.name;
+                        },
+                    },
+                    {
+                        field: 'inheritedPermission',
+                        headerName: t('Directory.InheritedPermission'),
+                        valueGetter: function (row, idx) {
+                            return row.inheritedPermission ? ((0, jsx_runtime_1.jsx)(icons_material_1.Check, { color: "primary" })) : ('');
+                        },
+                    },
+                    {
+                        field: 'explicitPermission',
+                        headerName: t('Directory.ExplicitPermission'),
+                        valueGetter: function (row, idx) {
+                            return row.explicitPermission ? ((0, jsx_runtime_1.jsx)(icons_material_1.Check, { color: "primary" })) : ('');
+                        },
+                    },
+                ], rows: permissions, rowActions: [
+                    {
+                        icon: (0, jsx_runtime_1.jsx)(icons_material_1.Clear, { fontSize: "small" }),
+                        tooltipTitle: t('Common.Delete'),
+                        action: function (id) {
+                            var row = permissions[id];
+                            handleDeletePermission(row.authenId, row.authenType);
+                        },
+                        isShouldHideActions: function (row) {
+                            return !row.explicitPermission;
+                        },
+                    },
+                ] }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Routes, { children: (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: Constant_1.default.MENU_DIRECTORY_ADD_PERMISSION, element: (0, jsx_runtime_1.jsx)(AddAuthen_1.default, { initialLoad: {
+                            users: users.filter(function (u) {
+                                return !permissions.find(function (p) {
+                                    return p.explicitPermission &&
+                                        p.authenId == u.userId;
+                                });
+                            }),
+                            groups: groups.filter(function (g) {
+                                return !permissions.find(function (p) {
+                                    return p.explicitPermission &&
+                                        p.authenId == g.groupId;
+                                });
+                            }),
+                        }, oldSelected: [], onSubmit: handleUpdateMenuPermission }) }) })] }));
+}

package/lib/ACM-AXN/Directory/components/Permission/MenuPermissions/MenuPermissionManagement.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/ACM-AXN/Directory/components/Permission/MenuPermissions/MenuPermissionManagement.test.js

@@ -0,0 +1,86 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var MenuPermissionManagement_1 = __importDefault(require("./MenuPermissionManagement"));
+var react_1 = require("@testing-library/react");
+var react_router_dom_1 = require("react-router-dom");
+var Context_1 = __importDefault(require("../../../../../Context"));
+describe('Menu Management', function () {
+    var mockUsersGet = jest.fn();
+    var mockGetGroups = jest.fn();
+    var mockGetMenu = jest.fn();
+    var mockMenuPermissionGet = jest.fn();
+    var mockDeleteMenuPermission = jest.fn();
+    var usersGet = function () {
+        mockUsersGet();
+        return new Promise(function (resolve) {
+            resolve([]);
+        });
+    };
+    var groupsGetAll = function () {
+        mockGetGroups();
+        return new Promise(function (resolve) {
+            resolve({});
+        });
+    };
+    var menusGet = function (directoryId) {
+        mockGetMenu(directoryId);
+        return new Promise(function (resolve) {
+            resolve({ permissions: [] });
+        });
+    };
+    var menuPermissionGet = function (directoryId) {
+        mockMenuPermissionGet(directoryId);
+        return new Promise(function (resolve) {
+            resolve(true);
+        });
+    };
+    var menuPermissionDelete = function () {
+        mockDeleteMenuPermission();
+        return new Promise(function (resolve) {
+            resolve(true);
+        });
+    };
+    var menuPermissionPut = function () {
+        return new Promise(function (resolve) {
+            resolve(true);
+        });
+    };
+    it('renders the component', function () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(react_router_dom_1.BrowserRouter, { children: (0, jsx_runtime_1.jsx)(Context_1.default.Provider, { value: {
+                    routes: [],
+                    i18next: {},
+                    service: {
+                        usersGet: usersGet,
+                        groupsGetAll: groupsGetAll,
+                        menusGet: menusGet,
+                        menuPermissionGet: menuPermissionGet,
+                        menuPermissionDelete: menuPermissionDelete,
+                        menuPermissionPut: menuPermissionPut,
+                    },
+                    appHelper: {},
+                }, children: (0, jsx_runtime_1.jsx)(MenuPermissionManagement_1.default, {}) }) }));
+        expect(react_1.screen.getByText('Directory.ObjectPermission')).toBeInTheDocument();
+    });
+    it('fetches the menu', function () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(react_router_dom_1.BrowserRouter, { children: (0, jsx_runtime_1.jsx)(Context_1.default.Provider, { value: {
+                    routes: [],
+                    i18next: {},
+                    service: {
+                        usersGet: usersGet,
+                        groupsGetAll: groupsGetAll,
+                        menusGet: menusGet,
+                        menuPermissionGet: menuPermissionGet,
+                        menuPermissionDelete: menuPermissionDelete,
+                        menuPermissionPut: menuPermissionPut,
+                    },
+                    appHelper: {},
+                }, children: (0, jsx_runtime_1.jsx)(MenuPermissionManagement_1.default, {}) }) }));
+        expect(mockGetMenu).toHaveBeenCalled();
+        expect(mockUsersGet).toHaveBeenCalled();
+        expect(mockGetGroups).toHaveBeenCalled();
+    });
+});

package/lib/ACM-AXN/Directory/function.d.ts

@@ -2,3 +2,5 @@ import { IRawData } from './interface';
 import { TreeNode } from '../../AWING';
 export declare const replaceChildren: (object1: TreeNode, object2: TreeNode) => TreeNode;
 export declare const convertData: (input: IRawData[], parentId?: string | null) => TreeNode[];
+export declare const convertMenuData: (input: any[], parentId?: string | null) => TreeNode[];
+export declare const translateMenu: (data: any, i18n: any, t: any) => any;

package/lib/ACM-AXN/Directory/function.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.convertData = exports.replaceChildren = void 0;
+exports.translateMenu = exports.convertMenuData = exports.convertData = exports.replaceChildren = void 0;
 var AWING_1 = require("../../AWING");
 var replaceChildren = function (object1, object2) {
     if (object1.nodeId === object2.nodeId) {
@@ -54,3 +54,41 @@ var convertData = function (input, parentId) {
     return result;
 };
 exports.convertData = convertData;
+var convertMenuData = function (input, parentId) {
+    if (parentId === void 0) { parentId = input[0].parentMenuId; }
+    var result = [];
+    for (var i = 0; i < input.length; i++) {
+        var item = input[i];
+        if (item.parentMenuId === parentId) {
+            var newItem = {
+                name: item.name,
+                nodeId: item.menuId,
+                status: AWING_1.NodeStatus.Unchecked,
+                isSystem: true,
+                parentId: item.parentMenuId,
+                children: [],
+            };
+            var children = (0, exports.convertMenuData)(input, item.menuId);
+            if (children.length > 0) {
+                newItem.children = children;
+            }
+            result.push(newItem);
+        }
+    }
+    return result;
+};
+exports.convertMenuData = convertMenuData;
+var translateMenu = function (data, i18n, t) {
+    if (!data)
+        return data;
+    if (i18n.exists("Menu.MenuName.Menu_".concat(data.nodeId))) {
+        data.name = t("Menu.MenuName.Menu_".concat(data.nodeId));
+    }
+    if (data.children) {
+        data.children = data.children.map(function (child) {
+            return (0, exports.translateMenu)(child, i18n, t);
+        });
+    }
+    return data;
+};
+exports.translateMenu = translateMenu;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { IDomain } from '../../ACM-AXN/Page/Types';
+interface PreviewCampaignContainerProps {
+    domainIds: string[];
+    open: boolean;
+    anchorEl: HTMLElement | null;
+    handlePreviewClose: (event: React.MouseEvent<HTMLElement>) => void;
+    handlePreviewDomain: (event: React.MouseEvent<HTMLElement>, domainId: string) => void;
+    service: {
+        domainsGetAll: () => Promise<IDomain[]>;
+        domainsGetByIds: (body: string[]) => Promise<IDomain[]>;
+    };
+}
+declare const PreviewCampaignContainer: React.FC<PreviewCampaignContainerProps>;
+export default PreviewCampaignContainer;

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

@@ -0,0 +1,188 @@
+"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 material_1 = require("@mui/material");
+var icons_material_1 = require("@mui/icons-material");
+var react_1 = __importStar(require("react"));
+var react_i18next_1 = require("react-i18next");
+var styles_1 = require("@mui/styles");
+var AWING_1 = require("../../AWING");
+var lodash_1 = require("lodash");
+var useStylesContainer = (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 PreviewCampaignContainer = function (props) {
+    var domainIds = props.domainIds, open = props.open, anchorEl = props.anchorEl, handlePreviewClose = props.handlePreviewClose, handlePreviewDomain = props.handlePreviewDomain, service = props.service;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var _a = react_1.default.useState([]), domains = _a[0], setDomains = _a[1];
+    var _b = react_1.default.useState(false), loadingFlags = _b[0], setLoadingFlags = _b[1];
+    var classes = useStylesContainer();
+    react_1.default.useEffect(function () {
+        setLoadingFlags(true);
+    }, []);
+    react_1.default.useEffect(function () {
+        if (open === true) {
+            if (domainIds.length) {
+                service
+                    .domainsGetByIds(domainIds)
+                    .then(setDomains)
+                    .finally(function () { return setLoadingFlags(false); });
+            }
+            else {
+                service
+                    .domainsGetAll()
+                    .then(function (res) {
+                    setDomains(res.slice(0, 4));
+                })
+                    .finally(function () { return setLoadingFlags(false); });
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [domainIds, open]);
+    var _c = react_1.default.useState(false), openDrawer = _c[0], setOpenDrawer = _c[1];
+    var toggleDrawer = function (open) { return function (event) {
+        event.stopPropagation();
+        if (event &&
+            event.type === 'keydown' &&
+            (event.key === 'Tab' ||
+                event.key === 'Shift')) {
+            return;
+        }
+        setOpenDrawer(open);
+    }; };
+    var _d = react_1.default.useState(''), searchDomainString = _d[0], setSearchDomainString = _d[1];
+    var _e = react_1.default.useState([]), allDomain = _e[0], setAllDomain = _e[1];
+    var _f = react_1.default.useState(true), isLoadingAllDomain = _f[0], setIsLoadingAllDomain = _f[1];
+    react_1.default.useEffect(function () {
+        if (openDrawer === true && allDomain.length <= 0) {
+            setIsLoadingAllDomain(true);
+            service
+                .domainsGetAll()
+                .then(setAllDomain)
+                .finally(function () { return setIsLoadingAllDomain(false); });
+        }
+        else {
+            setIsLoadingAllDomain(false);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [openDrawer]);
+    var translationText = {
+        searchPlaceholder: t('Common.SearchPlaceholder'),
+        copyToClipboard: t('Common.Preview'),
+        other: t('Campaign.Type.Other'),
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    var handleSearch = (0, react_1.useCallback)((0, lodash_1.debounce)(setSearchDomainString, 300), []);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Menu, { id: "long-menu", anchorEl: anchorEl, keepMounted: true, open: open, onClose: handlePreviewClose, PaperProps: {
+            style: {
+                maxHeight: 48 * 4.5,
+                width: '25ch',
+            },
+        }, children: [loadingFlags ? ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { children: (0, jsx_runtime_1.jsx)(AWING_1.CircularProgress, {}) })) : ((domains && domains.map(function (domain) { return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { onClick: function (event) {
+                    handlePreviewClose(event);
+                    handlePreviewDomain(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: function () {
+                    toggleDrawer(false);
+                    handlePreviewClose({ stopPropagation: function () { } });
+                }, onClick: function (e) { return e.stopPropagation(); }, sx: {
+                    zIndex: function (theme) { return theme.zIndex.drawer * 10; },
+                }, children: isLoadingAllDomain ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                            width: function (t) { return t.spacing(60); },
+                        }, children: (0, jsx_runtime_1.jsx)(AWING_1.CircularProgress, {}) }) })) : ((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.jsx)(material_1.TextField, { fullWidth: true, placeholder: translationText.searchPlaceholder, inputProps: { 'aria-label': 'search' }, InputProps: {
+                                    startAdornment: (0, jsx_runtime_1.jsx)(icons_material_1.Search, {}),
+                                }, onChange: function (e) {
+                                    return handleSearch(e.target.value);
+                                } }) }), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), allDomain &&
+                            allDomain
+                                .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 handlePreviewDomain(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", onClick: function (e) {
+                                                    return handlePreviewDomain(e, domain.domainId);
+                                                }, children: (0, jsx_runtime_1.jsx)(icons_material_1.VisibilityOutlined, { fontSize: "small" }) }) }) })] }, domain.domainId)); })] })) })] }));
+};
+exports.default = PreviewCampaignContainer;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+interface DomainPreviewProps {
+    handlePreviewPage: (e: React.MouseEvent<HTMLSpanElement, any>) => void;
+    isSelectDomain?: boolean;
+}
+declare const DomainPreview: React.FC<DomainPreviewProps>;
+export default DomainPreview;

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

@@ -0,0 +1,10 @@
+"use strict";
+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 = function (_a) {
+    var handlePreviewPage = _a.handlePreviewPage, isSelectDomain = _a.isSelectDomain;
+    return isSelectDomain ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, { component: 'p', sx: { display: 'flex' }, children: [(0, jsx_runtime_1.jsx)(icons_material_1.VisibilityOutlined, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, { component: 'span', "aria-label": "more", "aria-controls": "long-menu", "aria-haspopup": "true", onClick: handlePreviewPage, sx: { height: '20px' }, children: (0, jsx_runtime_1.jsx)(icons_material_1.ArrowDropDown, { fontSize: "small" }) })] })) : ((0, jsx_runtime_1.jsx)(icons_material_1.VisibilityOutlined, {}));
+};
+exports.default = DomainPreview;

package/lib/ACM-AXN/GroupUser/Constants.d.ts

@@ -0,0 +1,7 @@
+export declare const CREATE_PATH = "Create";
+export declare const IMPORT_PATH = "Import";
+export declare const EDIT_PATH = "Edit";
+export declare const CLONE_PATH = "Clone";
+export declare const DEBOUNCE_TIME = 700;
+export declare const DEBOUNCE_TIME_500 = 500;
+export declare const DEBOUNCE_TIME_300 = 300;