awing-library 2.1.13-beta → 2.1.13

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) {
+                    setAllDomain(res);
+                    setDomains(res.slice(0, 5));
+                })
+                    .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)(jsx_runtime_1.Fragment, { children: [(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;

package/lib/ACM-AXN/GroupUser/Constants.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEBOUNCE_TIME_300 = exports.DEBOUNCE_TIME_500 = exports.DEBOUNCE_TIME = exports.CLONE_PATH = exports.EDIT_PATH = exports.IMPORT_PATH = exports.CREATE_PATH = void 0;
+exports.CREATE_PATH = 'Create';
+exports.IMPORT_PATH = 'Import';
+exports.EDIT_PATH = 'Edit';
+exports.CLONE_PATH = 'Clone';
+exports.DEBOUNCE_TIME = 700;
+exports.DEBOUNCE_TIME_500 = 500;
+exports.DEBOUNCE_TIME_300 = 300;

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

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

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

@@ -0,0 +1,55 @@
+"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 PageManagement_1 = require("../../AWING/PageManagement");
+var react_1 = require("react");
+var react_i18next_1 = require("react-i18next");
+var Router_1 = require("../../AWING/Router");
+var Constants_1 = require("./Constants");
+var Context_1 = require("../../Context");
+var Hooks_1 = __importDefault(require("./Hooks"));
+var GroupUserContainer = function () {
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var service = (0, Hooks_1.default)().service;
+    var _a = (0, Context_1.useAwing)().appHelper, confirm = _a.confirm, snackbar = _a.snackbar;
+    var navigate = (0, Router_1.useNavigate)();
+    var _b = (0, react_1.useState)(true), loading = _b[0], setLoading = _b[1];
+    var _c = (0, react_1.useState)(), userGroups = _c[0], setUserGroups = _c[1];
+    var handleNavigate = function () {
+        navigate(Constants_1.CREATE_PATH);
+    };
+    var getUserGroups = (0, react_1.useCallback)(function (queryParams) {
+        setLoading(true);
+        service
+            .groupsPaging(queryParams.searchString, undefined, queryParams.pageIndex, queryParams.pageSize)
+            .then(setUserGroups)
+            .finally(function () {
+            setLoading(false);
+        });
+    }, [service]);
+    var handleDelete = function (id) {
+        return service.groupsDelete(id).then(function () { return snackbar('success'); });
+    };
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(PageManagement_1.PageManagement, { title: t('UserGroup.Title'), onChangeQueryInput: getUserGroups, getRowId: function (obj) { return obj.groupId; }, columns: [
+                {
+                    field: '#',
+                    headerName: '#',
+                    width: 100,
+                    valueGetter: function (_unUse, idx, stt) { return stt; },
+                },
+                {
+                    field: 'name',
+                    headerName: t('Common.GroupName'),
+                },
+                {
+                    field: 'description',
+                    headerName: t('Common.Description'),
+                },
+            ], loading: loading, rows: (userGroups === null || userGroups === void 0 ? void 0 : userGroups.items) || [], onCreateButtonClick: handleNavigate, onRowClick: function (id) {
+                navigate([Constants_1.EDIT_PATH, id].join('/'));
+            }, totalOfRows: userGroups === null || userGroups === void 0 ? void 0 : userGroups.totalItemCount, onDelete: handleDelete, confirmDelete: confirm }) }));
+};
+exports.default = GroupUserContainer;

package/lib/ACM-AXN/GroupUser/Container.test.d.ts

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

package/lib/ACM-AXN/GroupUser/Container.test.js

@@ -0,0 +1,210 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __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");
+require("@testing-library/jest-dom/extend-expect");
+var react_1 = require("@testing-library/react");
+var Router_1 = require("../../AWING/Router");
+var Container_1 = __importDefault(require("./Container"));
+var Constants_1 = require("./Constants");
+var items = [
+    {
+        groupId: '10',
+        name: 'Administrators',
+        description: 'Quản trị hệ thống',
+    },
+    {
+        groupId: '1543',
+        name: 'Advance Users',
+        description: null,
+    },
+    {
+        groupId: '5755448572239982608',
+        name: 'AWING_ADS DELI',
+        description: null,
+    },
+];
+var clientMethod = {
+    groupsPaging: function () {
+        return Promise.resolve({
+            items: items,
+            totalItemCount: items === null || items === void 0 ? void 0 : items.length,
+        });
+    },
+    groupsDelete: function () { return function (_id) { }; },
+};
+// Mock AWING/Router
+jest.mock('AWING/Router', function () { return (__assign(__assign({}, jest.requireActual('AWING/Router')), { useLocation: jest.fn() })); });
+// Mock Axios client
+jest.mock('Commons/UseAxiosProvider', function () { return ({
+    __esModule: true,
+    default: function () { return ({
+        client: {
+            groupsPaging: jest.fn(function () {
+                var _param = [];
+                for (var _i = 0; _i < arguments.length; _i++) {
+                    _param[_i] = arguments[_i];
+                }
+                return Promise.resolve(clientMethod.groupsPaging());
+            }),
+            groupsDelete: jest.fn(function (_id) {
+                return Promise.resolve(clientMethod.groupsDelete());
+            }),
+        },
+    }); },
+}); });
+// Mock i18next
+jest.mock('react-i18next', function () { return (__assign(__assign({}, jest.requireActual('react-i18next')), { useTranslation: function () { return ({ t: jest.fn(function (key) { return key; }) }); } })); });
+// Mock PageManagement
+jest.mock('AWING/PageManagement', function () { return ({
+    PageManagement: function (props) {
+        props.onChangeQueryInput({
+            searchString: '',
+            pageIndex: 0,
+            pageSize: 10,
+        });
+        return ((0, jsx_runtime_1.jsxs)("div", { children: [props.columns
+                    .filter(function (item) { return item.valueGetter; })
+                    .map(function (getter, idx) { return ((0, jsx_runtime_1.jsx)("span", { children: getter.valueGetter(items[0], idx) }, idx)); }), (0, jsx_runtime_1.jsx)("span", { "data-testid": "rowid", children: props.getRowId(items[0]) }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "Rowclick", onClick: function () {
+                        props.onRowClick(items[0].groupId);
+                    }, children: "Rowclick" }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "CreateBtn", onClick: props.onCreateButtonClick, children: "CreateBtn" }), (0, jsx_runtime_1.jsx)("button", { onClick: function () {
+                        props.onChangeQueryInput({
+                            pageIndex: 1,
+                            pageSize: 10,
+                        });
+                    }, children: "ChangeInput" }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "onDelete", onClick: function () {
+                        props.onDelete('onDelete');
+                    }, children: "Remove Btn" }), (0, jsx_runtime_1.jsx)("p", { children: JSON.stringify(props.rows) }), (0, jsx_runtime_1.jsxs)("span", { children: ["totalItemCount:", props.totalOfRows] })] }));
+    },
+}); });
+var renderUi = function () {
+    return (0, react_1.render)((0, jsx_runtime_1.jsx)(Router_1.BrowserRouter, { children: (0, jsx_runtime_1.jsx)(Container_1.default, {}) }));
+};
+describe('User Container Component', function () {
+    it('renders without crashing', function () {
+        renderUi();
+    });
+    it('render state', function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    renderUi();
+                    expect(react_1.screen.getByTestId('CreateBtn')).toBeInTheDocument();
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            expect(react_1.screen.getByText(JSON.stringify(items))).toBeInTheDocument();
+                        })];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            expect(react_1.screen.getByText("totalItemCount:".concat(items.length))).toBeInTheDocument();
+                        })];
+                case 2:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('get rowid', function () {
+        renderUi();
+        expect(react_1.screen.getByText(items[0].groupId)).toBeInTheDocument();
+    });
+    it('Change queryInput', function () {
+        var groupsPagingSpy = jest.spyOn(clientMethod, 'groupsPaging');
+        renderUi();
+        react_1.fireEvent.click(react_1.screen.getByText('ChangeInput'));
+        expect(groupsPagingSpy).toBeCalled();
+    });
+    it('Trigger Create button', function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    renderUi();
+                    react_1.fireEvent.click(react_1.screen.getByTestId('CreateBtn'));
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            return expect(window.location.href).toContain(['http://localhost', Constants_1.CREATE_PATH].join('/'));
+                        })];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('Row click', function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    renderUi();
+                    react_1.fireEvent.click(react_1.screen.getByTestId('Rowclick'));
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            return expect(window.location.href).toContain([
+                                'http://localhost',
+                                Constants_1.EDIT_PATH,
+                                items[0].groupId,
+                            ].join('/'));
+                        })];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('Delete group', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var groupsDeleteSpy;
+        return __generator(this, function (_a) {
+            groupsDeleteSpy = jest.spyOn(clientMethod, 'groupsDelete');
+            renderUi();
+            react_1.fireEvent.click(react_1.screen.getByTestId('onDelete'));
+            expect(groupsDeleteSpy).toBeCalled();
+            return [2 /*return*/];
+        });
+    }); });
+});

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const CreateOrEdit: React.FC;
+export default CreateOrEdit;

package/lib/ACM-AXN/GroupUser/CreateOrEdit.js

@@ -0,0 +1,91 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var ClassicDrawer_1 = __importDefault(require("../../Commons/Components/ClassicDrawer"));
+var AWING_1 = require("../../AWING");
+var react_1 = require("react");
+var react_i18next_1 = require("react-i18next");
+var Router_1 = require("../../AWING/Router");
+var UserComponent_1 = __importDefault(require("./User/UserComponent"));
+var SearchUser_1 = __importDefault(require("./User/SearchUser"));
+var Hooks_1 = __importDefault(require("./Hooks"));
+var Constants_1 = require("../../ACM-AXN/User/Constants");
+var CreateOrEdit = function () {
+    var _a;
+    var groupId = (0, Router_1.useParams)().groupId;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var service = (0, Hooks_1.default)().service;
+    var _b = (0, react_1.useState)(false), confirmExit = _b[0], setConfirmExit = _b[1];
+    var _c = (0, react_1.useState)(false), isValid = _c[0], setValid = _c[1];
+    var _d = (0, react_1.useState)([]), users = _d[0], setUsers = _d[1];
+    var _e = (0, react_1.useState)({
+        userIds: [],
+        group: { name: '', description: '' },
+    }), businessUnitdata = _e[0], setBusinessUnitData = _e[1];
+    var _f = (0, react_1.useState)(true), loading = _f[0], setloading = _f[1];
+    (0, react_1.useEffect)(function () {
+        setloading(true);
+        Promise.all([
+            groupId
+                ? service.groupsGet(groupId).then(setBusinessUnitData)
+                : Promise.resolve(),
+            service.usersGet().then(setUsers),
+        ]).finally(function () {
+            setloading(false);
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    var handleUpdate = (0, react_1.useCallback)(function (obj, formValid, fieldUpdate) {
+        setConfirmExit(Boolean(fieldUpdate));
+        setValid(formValid);
+        setBusinessUnitData(function (prev) {
+            return (__assign(__assign({}, prev), { group: __assign(__assign({}, prev === null || prev === void 0 ? void 0 : prev.group), obj) }));
+        });
+    }, []);
+    var handleSubmit = (0, react_1.useCallback)(function () {
+        if (groupId) {
+            return service.groupsPut(groupId, businessUnitdata);
+        }
+        return service.groupsPost(businessUnitdata);
+    }, [businessUnitdata, service, groupId]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ClassicDrawer_1.default, { title: "".concat(t(['UserGroup', groupId ? 'Edit' : 'Create'].join('.'))).concat(groupId ? ": ".concat((_a = businessUnitdata.group) === null || _a === void 0 ? void 0 : _a.name) : '', "\n                   "), onSubmit: handleSubmit, isLoadingButtonSubmit: false, disableButtonSubmit: !isValid, confirmExit: confirmExit, childrenWrapperStyle: { padding: 0 }, children: loading ? ((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.DataForm, { caption: t('UserGroup.TitleUserGroupInfo'), fields: [
+                                {
+                                    fieldName: 'name',
+                                    type: 'text',
+                                    label: t('Common.GroupName'),
+                                    required: true,
+                                },
+                                {
+                                    fieldName: 'description',
+                                    type: 'text-area',
+                                    label: t('Common.Description'),
+                                    onValidate: function () { return true; },
+                                },
+                            ], oldValue: businessUnitdata === null || businessUnitdata === void 0 ? void 0 : businessUnitdata.group, onUpdate: handleUpdate }), (0, jsx_runtime_1.jsx)(UserComponent_1.default, { rows: users.filter(function (user) { var _a; return (_a = businessUnitdata === null || businessUnitdata === void 0 ? void 0 : businessUnitdata.userIds) === null || _a === void 0 ? void 0 : _a.includes(user.userId); }), onChangeAddUser: function (userIds) {
+                                setBusinessUnitData(function (prev) { return (__assign(__assign({}, prev), { userIds: userIds })); });
+                            } })] })) }), (0, jsx_runtime_1.jsx)(Router_1.Routes, { children: (0, jsx_runtime_1.jsx)(Router_1.Route, { path: Constants_1.ADD_USER_TO_GROUP, element: (0, jsx_runtime_1.jsx)(SearchUser_1.default, { onChangeAddUser: function (userIds) {
+                            setBusinessUnitData(function (prev) {
+                                console.log('prev', prev);
+                                // return {
+                                //     ...prev,
+                                //     userIds: [...prev.userIds, ...userIds],
+                                // }
+                                return prev;
+                            });
+                        }, listUserId: (businessUnitdata === null || businessUnitdata === void 0 ? void 0 : businessUnitdata.userIds) || [], users: users }) }, Constants_1.ADD_USER_TO_GROUP) })] }));
+};
+exports.default = CreateOrEdit;

package/lib/ACM-AXN/GroupUser/CreateOrEdit.test.d.ts

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