awing-library 2.1.16-beta → 2.1.18-beta

package/README.md

@@ -35,32 +35,17 @@ yarn build
 -   Step 2: Tạo link thư viện
 
 ```shell
+yarn build
 yarn link
-```
--   Tạo Link react
-
-```shell
 cd node_modules/react
 yarn link
-```
-
--   Tạo Link react-dom
-
-```shell
+cd ../..
 cd node_modules/react-dom
 yarn link
-```
-
--   Tạo Link @mui/material
-
-```shell
+cd ../..
 cd node_modules/@mui/material
 yarn link
-```
-
--   Tạo Link @mui/styles
-
-```shell
+cd ../../..
 cd node_modules/@mui/styles
 yarn link
 ```

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabSubCampaign/AdList.js

@@ -60,6 +60,9 @@ var Utils_1 = require("../../Utils");
 var Helpers_1 = require("../../../../Utils/Helpers");
 var Context_1 = require("../../../../Context");
 var Recoils_1 = require("../Recoils");
+var DomainPreview_1 = __importDefault(require("../../../../ACM-AXN/DomainPreview"));
+var Constant_1 = require("../../../../ACM-AXN/Campaign/Constant");
+var PreviewButton_1 = __importDefault(require("../../../../ACM-AXN/DomainPreview/PreviewButton"));
 function AdList(props) {
     var onCreate = props.onCreate, onChange = props.onChange, onDelete = props.onDelete, onAdsValidChange = props.onAdsValidChange;
     var t = (0, react_i18next_1.useTranslation)().t;
@@ -70,11 +73,18 @@ function AdList(props) {
     var _c = (0, recoil_1.useRecoilState)(atoms_1.adOpenState), adOpen = _c[0], setAdOpen = _c[1];
     var copiedAd = (0, recoil_1.useRecoilValue)(atoms_1.copiedAdState);
     var hasClassC = (0, recoil_1.useRecoilValue)((0, atoms_1.checkGroupsClassCState)(adSelected.map(function (x) { return x.subCampaignId; })));
+    var _d = (0, react_1.useState)({
+        welcomeId: '',
+        loginId: '',
+        domainIds: [],
+    }), previewId = _d[0], setPreviewId = _d[1];
+    var _e = react_1.default.useState(), anchorEl = _e[0], setAnchorEl = _e[1];
+    var open = Boolean(anchorEl);
     // valid theo cấu trúc { [campaignGroupId]: { [adId]: boolean } }
-    var _d = (0, react_1.useState)({}), adsValid = _d[0], setAdsValid = _d[1];
-    var _e = (0, react_1.useState)(false), isAdvancedDrawerOpen = _e[0], setIsAdvancedDrawerOpen = _e[1];
-    var _f = (0, recoil_1.useRecoilState)(Recoils_1.weightState), weightProps = _f[0], setWeightState = _f[1];
-    var _g = (0, react_1.useState)(false), isMultiEditDrawerOpen = _g[0], setIsMultiEditDrawerOpen = _g[1];
+    var _f = (0, react_1.useState)({}), adsValid = _f[0], setAdsValid = _f[1];
+    var _g = (0, react_1.useState)(false), isAdvancedDrawerOpen = _g[0], setIsAdvancedDrawerOpen = _g[1];
+    var _h = (0, recoil_1.useRecoilState)(Recoils_1.weightState), weightProps = _h[0], setWeightState = _h[1];
+    var _j = (0, react_1.useState)(false), isMultiEditDrawerOpen = _j[0], setIsMultiEditDrawerOpen = _j[1];
     (0, react_1.useEffect)(function () {
         var newAdValid = {};
         ads.forEach(function (ad) {
@@ -219,6 +229,33 @@ function AdList(props) {
         advanced: t('Campaign.Advanced'),
         delete: t('Common.Delete'),
     };
+    /**
+     * Hàm khi xem preview
+     */
+    var handlePreview = function (e, ad, doaminId) {
+        e.stopPropagation();
+        var url = "".concat(Constant_1.Constants.CAPTIVE_DOMAIN, "/").concat(Constant_1.Constants.PAGE_LOGIN_PREVIEW, "?loginId=").concat(ad.loginId, "&isNetworkCampaign=false");
+        if (ad.welcomeId.length)
+            url += "&welcomeId=".concat(ad.welcomeId);
+        if (doaminId)
+            url += "&doaminId=".concat(doaminId);
+        window.open(url, '_blank');
+    };
+    var handlePreviewPage = function (e, ad) {
+        var _a, _b;
+        e.stopPropagation();
+        setPreviewId({
+            welcomeId: ad.welcomeId,
+            loginId: ad.loginId,
+            domainIds: (_b = (_a = ad.places) === null || _a === void 0 ? void 0 : _a.map(function (x) { return x.domainId; })) !== null && _b !== void 0 ? _b : [],
+        });
+        setAnchorEl(e.currentTarget);
+    };
+    var handlePreviewClose = function (event) {
+        event.stopPropagation();
+        setPreviewId({});
+        setAnchorEl(null);
+    };
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [weightProps.isOpen && ((0, jsx_runtime_1.jsx)(Weight_1.default, {})), (0, jsx_runtime_1.jsxs)(material_1.TableContainer, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h4", sx: {
                             padding: function (theme) { return theme.spacing(2); },
                             fontSize: '16px!important',
@@ -261,6 +298,7 @@ function AdList(props) {
                                                     }, onChange: handleMultiUpdate })), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: translationText.delete, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: function () {
                                                             return handleMultiDelete(adSelected);
                                                         }, "aria-label": "delete", children: (0, jsx_runtime_1.jsx)(Delete_1.default, { fontSize: "small" }) }) })] })), (0, jsx_runtime_1.jsx)(material_1.TableCell, { align: "right", children: onCreate && ((0, jsx_runtime_1.jsxs)(material_1.ButtonGroup, { variant: "outlined", color: "error", children: [(0, jsx_runtime_1.jsx)(material_1.Button, { startIcon: (0, jsx_runtime_1.jsx)(Add_1.default, {}), onClick: function () { return handleAddAd(); }, children: t('Common.Create') }), copiedAd !== undefined && ((0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", "aria-label": "paste", onClick: function () { return handleAddAd(true); }, children: (0, jsx_runtime_1.jsx)(Assignment_1.default, {}) }))] })) })] }) }), (0, jsx_runtime_1.jsx)(material_1.TableBody, { children: ads.map(function (ad, idx) {
+                                    var _a;
                                     var isOpen = adOpen !== undefined &&
                                         adOpen.adId === ad.id &&
                                         adOpen.subCampaignId === ad.campaignGroupId;
@@ -270,7 +308,9 @@ function AdList(props) {
                                     };
                                     return ((0, jsx_runtime_1.jsx)(AdRow_1.default, { ad: ad, onChange: function (adSetStateAction) {
                                             return onChange([adDefine], adSetStateAction);
-                                        }, onChangeStatus: function (status) {
+                                        }, previewButton: (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { "aria-label": "preview", onClick: function (e) {
+                                                    handlePreview(e, ad);
+                                                }, disabled: !((_a = ad.loginId) === null || _a === void 0 ? void 0 : _a.length), sx: { borderRadius: '15%' }, children: (0, jsx_runtime_1.jsx)(DomainPreview_1.default, { handlePreviewPage: function (e) { return handlePreviewPage(e, ad); }, isSelectDomain: Boolean(service.domainsGetAll) }) }) }), onChangeStatus: function (status) {
                                             return handleChangeAdStatus(ad, status);
                                         }, onDelete: function () {
                                             return handleMultiDelete([adDefine]);
@@ -302,6 +342,10 @@ function AdList(props) {
                                                     ]);
                                             });
                                         } }, idx));
-                                }) })] })] })] }));
+                                }) })] })] }), open &&
+                (0, jsx_runtime_1.jsx)(PreviewButton_1.default, { anchorEl: anchorEl, open: open, domainIds: previewId.domainIds, handlePreviewClose: handlePreviewClose, handlePreviewDomain: function (event, domainId) {
+                        handlePreview(event, ads.find(function (x) { return x.loginId === previewId.loginId; }), domainId);
+                        // handlePreview(previewId, domainId)
+                    }, service: service })] }));
 }
 exports.default = AdList;

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabSubCampaign/AdRow.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { AdDetailProps } from './AdDetail';
 type AdRowProps = AdDetailProps & {
     /**
@@ -24,6 +25,10 @@ type AdRowProps = AdDetailProps & {
      * Trạng thái lỗi hay không của quảng cáo
      */
     error?: boolean;
+    /**
+     * Preview Button
+     */
+    previewButton: React.ReactNode;
 };
 export default function AdRow(props: AdRowProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabSubCampaign/AdRow.js

@@ -62,7 +62,6 @@ var react_1 = __importStar(require("react"));
 var react_i18next_1 = require("react-i18next");
 var recoil_1 = require("recoil");
 var material_1 = require("@mui/material");
-var Visibility_1 = __importDefault(require("@mui/icons-material/Visibility"));
 var KeyboardArrowDown_1 = __importDefault(require("@mui/icons-material/KeyboardArrowDown"));
 var KeyboardArrowUp_1 = __importDefault(require("@mui/icons-material/KeyboardArrowUp"));
 var CheckCircle_1 = __importDefault(require("@mui/icons-material/CheckCircle"));
@@ -87,27 +86,16 @@ var AWING_1 = require("../../../../AWING");
 var Constant_1 = require("../../Constant");
 var Recoils_1 = require("../Recoils");
 function AdRow(props) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d;
     var t = (0, react_i18next_1.useTranslation)().t;
-    var ad = props.ad, onChange = props.onChange, onDelete = props.onDelete, open = props.open, onToggle = props.onToggle, isSelected = props.isSelected, onCheck = props.onCheck, error = props.error, other = __rest(props, ["ad", "onChange", "onDelete", "open", "onToggle", "isSelected", "onCheck", "error"]);
+    var ad = props.ad, onChange = props.onChange, onDelete = props.onDelete, open = props.open, onToggle = props.onToggle, isSelected = props.isSelected, onCheck = props.onCheck, error = props.error, previewButton = props.previewButton, other = __rest(props, ["ad", "onChange", "onDelete", "open", "onToggle", "isSelected", "onCheck", "error", "previewButton"]);
     var service = (0, Hooks_1.default)().service;
     var setCopiedAd = (0, recoil_1.useSetRecoilState)(atoms_1.copiedAdState);
     var setWeightState = (0, recoil_1.useSetRecoilState)(Recoils_1.weightState);
-    var _f = (0, react_1.useState)(false), openCopiedMessage = _f[0], setOpenCopiedMessage = _f[1];
-    var _g = (0, react_1.useState)(false), showTheSource = _g[0], setShowTheSource = _g[1];
-    var _h = (0, react_1.useState)(false), isAdvancedDrawerOpen = _h[0], setIsAdvancedDrawerOpen = _h[1];
-    var _j = (0, react_1.useState)(false), isWeightDrawerOpen = _j[0], setIsWeightDrawerOpen = _j[1];
+    var _e = (0, react_1.useState)(false), openCopiedMessage = _e[0], setOpenCopiedMessage = _e[1];
+    var _f = (0, react_1.useState)(false), showTheSource = _f[0], setShowTheSource = _f[1];
+    var _g = (0, react_1.useState)(false), isAdvancedDrawerOpen = _g[0], setIsAdvancedDrawerOpen = _g[1];
     var isClassC = (0, recoil_2.useRecoilValue)((0, atoms_2.checkGroupsClassCState)([ad.campaignGroupId]));
-    /**
-     * Hàm khi xem preview
-     */
-    var handlePreview = function (e) {
-        e.stopPropagation();
-        var url = "".concat(Constant_1.Constants.CAPTIVE_DOMAIN, "/").concat(Constant_1.Constants.PAGE_LOGIN_PREVIEW, "?loginId=").concat(ad.loginId, "&isNetworkCampaign=false");
-        if (ad.welcomeId.length)
-            url += "&welcomeId=".concat(ad.welcomeId);
-        window.open(url, '_blank');
-    };
     var translationText = {
         preview: t('Common.Preview'),
         copy: t('Common.Copy'),
@@ -147,7 +135,7 @@ function AdRow(props) {
                                                 Constant_1.Constants.CAMPAIGN_EDIT_PAGE,
                                                 Enum_1.PAGE_CODES.PageCodeWelcome,
                                                 ad.welcomeId,
-                                            ].join('/'), children: (_d = ad.welcomePage) === null || _d === void 0 ? void 0 : _d.title }) })] }))] }), (0, jsx_runtime_1.jsxs)(material_1.TableCell, { sx: { padding: function (theme) { return theme.spacing(0, 2); } }, align: "right", children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: translationText.preview, children: (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { "aria-label": "preview", onClick: handlePreview, disabled: !((_e = ad.loginId) === null || _e === void 0 ? void 0 : _e.length), children: (0, jsx_runtime_1.jsx)(Visibility_1.default, { fontSize: "small" }) }) }) }), (0, jsx_runtime_1.jsx)(AWING_1.Actions, { menus: __spreadArray([
+                                            ].join('/'), children: (_d = ad.welcomePage) === null || _d === void 0 ? void 0 : _d.title }) })] }))] }), (0, jsx_runtime_1.jsxs)(material_1.TableCell, { sx: { padding: function (theme) { return theme.spacing(0, 2); } }, align: "right", children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: translationText.preview, children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: previewButton }) }), (0, jsx_runtime_1.jsx)(AWING_1.Actions, { menus: __spreadArray([
                                     {
                                         icon: (0, jsx_runtime_1.jsx)(FileCopyOutlined_1.default, {}),
                                         action: function () {

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,165 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var icons_material_1 = require("@mui/icons-material");
+var react_1 = __importDefault(require("react"));
+var react_i18next_1 = require("react-i18next");
+var styles_1 = require("@mui/styles");
+var AWING_1 = require("../../AWING");
+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 (domainIds.length && open === true) {
+            service
+                .domainsGetByIds(domainIds)
+                .then(setDomains)
+                .finally(function () { return setLoadingFlags(false); });
+        }
+        else
+            setLoadingFlags(false);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [domainIds, open]);
+    react_1.default.useEffect(function () {
+        if (!domainIds.length) {
+            setOpenDrawer(true);
+            // handlePreviewClose({stopPropagation: () => {}} as any)
+        }
+    }, [domainIds]);
+    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); });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [openDrawer]);
+    var translationText = {
+        searchPlaceholder: t('Common.SearchPlaceholder'),
+        copyToClipboard: t('Common.Preview'),
+        other: t('Campaign.Type.Other'),
+    };
+    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, size: 'small', sx: {
+                                    '& fieldset': {
+                                        border: 'none!important'
+                                    }
+                                }, inputProps: { 'aria-label': 'search' }, InputProps: {
+                                    startAdornment: (0, jsx_runtime_1.jsx)(icons_material_1.Search, {}),
+                                }, onChange: function (e) {
+                                    return setSearchDomainString(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

@@ -1,2 +1,7 @@
-declare const index: () => import("react/jsx-runtime").JSX.Element;
-export default index;
+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

@@ -1,7 +1,10 @@
 "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" }));
+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 = index;
+exports.default = DomainPreview;

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

@@ -29,6 +29,8 @@ var Helpers_1 = require("../../Utils/Helpers");
 var Constant_1 = require("./Constant");
 var Context_2 = __importDefault(require("./Context"));
 var enums_1 = require("./enums");
+var DomainPreview_1 = __importDefault(require("../../ACM-AXN/DomainPreview"));
+var PreviewButton_1 = __importDefault(require("../../ACM-AXN/DomainPreview/PreviewButton"));
 var PageContainer = function () {
     var _a;
     var _b = (0, Context_2.default)(), pageCode = _b.pageCode, service = _b.service, domainId = _b.domainId, CONFIGS = _b.configs;
@@ -42,16 +44,18 @@ var PageContainer = function () {
     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) {
+    var handlePreviewPage = function (e, id) {
         e.stopPropagation();
+        setPreviewId(id);
         setAnchorEl(e.currentTarget);
     };
     var prevQuery = (0, react_1.useRef)({});
-    var _k = (0, react_1.useState)({
+    var _l = (0, react_1.useState)({
         items: [],
         totalItemCount: 0,
-    }), pageList = _k[0], setPage = _k[1];
+    }), pageList = _l[0], setPage = _l[1];
     var columnDefinitions = (0, react_1.useMemo)(function () { return [
         {
             field: 'stt',
@@ -92,6 +96,10 @@ var PageContainer = function () {
             },
         },
     ]; }, [t]);
+    var handlePreviewClose = function (event) {
+        event.stopPropagation();
+        setAnchorEl(null);
+    };
     (0, react_1.useLayoutEffect)(function () {
         setDirectories([]);
         setInit(true);
@@ -149,86 +157,72 @@ 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 handlePreview = function (id, domainId) {
         var url = "".concat(CONFIGS.CAPTIVE_DOMAIN, "/").concat(CONFIGS.PAGE_LOGIN_PREVIEW, "?loginId=").concat(id, "&domainId=").concat(domainId, "&isNetworkCampaign=false");
         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)(material_1.Box, { sx: {
+    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 })); }),
-                },
-            ], 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, {}),
-                    // 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'
-                            : 'unset',
+        }, 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.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: 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.pageConstants.IMPORT_PAGE);
+                    }, 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;

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

@@ -12,11 +12,15 @@ var Helpers_1 = require("../../../Utils/Helpers");
 var Context_1 = __importDefault(require("../Context"));
 var enums_1 = require("../enums");
 var react_i18next_1 = require("react-i18next");
+var DomainPreview_1 = __importDefault(require("../../../ACM-AXN/DomainPreview"));
+var PreviewButton_1 = __importDefault(require("../../../ACM-AXN/DomainPreview/PreviewButton"));
 var DrawerAction = function (_a) {
     var type = _a.type;
     var pageId = (0, react_router_dom_1.useParams)().pageId;
     var _b = (0, Context_1.default)(), pageCode = _b.pageCode, CONFIGS = _b.configs, domainId = _b.domainId, service = _b.service;
     var _c = react_1.default.useState(false), loadingExport = _c[0], setLoadingExport = _c[1];
+    var _d = react_1.default.useState(), anchorEl = _d[0], setAnchorEl = _d[1];
+    var open = Boolean(anchorEl);
     var t = (0, react_i18next_1.useTranslation)().t;
     var handleExport = function () {
         setLoadingExport(true);
@@ -27,10 +31,23 @@ var DrawerAction = function (_a) {
         })
             .finally(function () { return setLoadingExport(false); });
     };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [pageCode === enums_1.PageCode.Lgn && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t('Campaign.Preview'), children: (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", color: "secondary", onClick: function (e) {
-                            e.stopPropagation();
-                            var url = "".concat(CONFIGS.CAPTIVE_DOMAIN, "/").concat(CONFIGS.PAGE_LOGIN_PREVIEW, "?loginId=").concat(pageId, "&domainId=").concat(domainId, "&isNetworkCampaign=false");
-                            window.open(url, '_blank');
-                        }, children: (0, jsx_runtime_1.jsx)(icons_material_1.VisibilityOutlined, {}) }) })), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t('Common.Export'), children: (0, jsx_runtime_1.jsx)(material_1.Button, { disabled: loadingExport, variant: "outlined", color: "secondary", style: { margin: '0px 16px' }, onClick: handleExport, children: (0, jsx_runtime_1.jsx)(icons_material_1.GetAppOutlined, {}) }) })] }) }));
+    var handlePreviewClose = function (event) {
+        event.stopPropagation();
+        setAnchorEl(null);
+    };
+    var handlePreview = function (domainId) {
+        var url = "".concat(CONFIGS.CAPTIVE_DOMAIN, "/").concat(CONFIGS.PAGE_LOGIN_PREVIEW, "?loginId=").concat(pageId, "&domainId=").concat(domainId, "&isNetworkCampaign=false");
+        window.open(url, '_blank');
+    };
+    var handlePreviewPage = function (e) {
+        e.stopPropagation();
+        setAnchorEl(e.currentTarget);
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { children: [pageCode === enums_1.PageCode.Lgn && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t('Campaign.Preview'), children: (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", color: "secondary", onClick: function (e) {
+                                handlePreview(domainId || CONFIGS.DEFAULT_PREVIEW_DOMAIN_ID);
+                            }, children: (0, jsx_runtime_1.jsx)(DomainPreview_1.default, { handlePreviewPage: handlePreviewPage, isSelectDomain: Boolean(service.domainsGetAll) }) }) })), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t('Common.Export'), children: (0, jsx_runtime_1.jsx)(material_1.Button, { disabled: loadingExport, variant: "outlined", color: "secondary", style: { margin: '0px 16px' }, onClick: handleExport, children: (0, jsx_runtime_1.jsx)(icons_material_1.GetAppOutlined, {}) }) })] }), open &&
+                (0, jsx_runtime_1.jsx)(PreviewButton_1.default, { anchorEl: anchorEl, open: open, domainIds: [], handlePreviewClose: handlePreviewClose, handlePreviewDomain: function (event, domainId) {
+                        handlePreview(domainId);
+                    }, service: service })] }));
 };
 exports.default = DrawerAction;

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

@@ -60,7 +60,7 @@ var ViewInfo = function (_a) {
     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 = JSON.parse(localStorage.getItem(Constant_1.PAGE_LOGIN_DIRECTORY_SELECTED) || '{]')[Array.isArray(domainId) ? 'awingPge' : domainId];
+        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');

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

@@ -110,6 +110,12 @@ export interface SystemPhysicalObject {
     name: string;
     path: string;
 }
+export interface IDomain {
+    domainId: string;
+    name: string | undefined;
+    rateSharing: number;
+    description: string | undefined;
+}
 export interface PageService {
     directoriesGetByObjectTypeCode: (type: DirectoryRoot) => Promise<Directory[]>;
     pagesPaging: (searchString?: string, pageSize?: number, pageIndex?: number, directoryId?: string) => Promise<PagesPaging>;
@@ -138,6 +144,8 @@ export interface PageService {
     pagesPut: (id: string, body: PageModel) => Promise<void>;
     pagesGet: (id: string) => Promise<PageModel>;
     pagesClone: (id: string) => Promise<PageModel>;
+    domainsGetAll?: () => Promise<IDomain[]>;
+    domainsGetByIds?: (body: string[]) => Promise<IDomain[]>;
 }
 export interface PageProps {
     service: PageService;

package/lib/AWING/DataGrid/index.js

@@ -254,7 +254,10 @@ var DataGrid = function (props) {
                                                                     opacity: isShouldHide
                                                                         ? 0
                                                                         : 1,
-                                                                }, sx: actionDef.sx, children: actionDef.icon }) }, "".concat(id, "-").concat(actIdx)));
+                                                                }, sx: __assign(__assign({}, actionDef.sx), { borderRadius: '15%' }), children: typeof actionDef.icon ===
+                                                                    'function'
+                                                                    ? actionDef.icon({ id: id, row: row, idx: idx, order: calcOrder(idx) })
+                                                                    : actionDef.icon }) }, "".concat(id, "-").concat(actIdx)));
                                                     }) }))] }), id));
                                     }), spanningRowsPosition == 'bottom' && spanningRows] })] }), !rows.length && (0, jsx_runtime_1.jsx)(NoData_1.default, {})] }), onPageIndexChange && onPageSizeChange && ((0, jsx_runtime_1.jsx)(Pagination_1.default, { rowsPerPageOptions: rowsPerPageOptions, colSpan: 3, count: totalOfRows, rowsPerPage: pageSize, page: pageIndex, SelectProps: {
                     inputProps: { 'aria-label': 'rows per page' },

package/lib/AWING/DataGrid/interface.d.ts

@@ -49,7 +49,12 @@ export interface RowActionDefinition {
     /**
      * Icon của button action
      */
-    icon: ReactNode;
+    icon: ReactNode | React.FunctionComponent<{
+        id: string;
+        row: DataObject;
+        idx: number;
+        order: number;
+    }>;
     /**
      * Nội dung hiển thị trên tooltip
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "awing-library",
-  "version": "2.1.16-beta",
+  "version": "2.1.18-beta",
   "description": "",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -78,7 +78,7 @@
     "build-storybook": "storybook build",
     "build": "npm run clean && tsc && tsc-alias && npm run copy",
     "copy": "cp -r ./src/Assets/ ./lib/Assets",
-    "build:watch": "concurrently --kill-others \"tsc -w\" \"tsc-alias -w\""
+    "build:watch": "tsc && (concurrently \"tsc -w\" \"tsc-alias -w\")"
   },
   "prettier": {
     "trailingComma": "es5",