awing-library 2.1.2-beta → 2.1.2-stage

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

@@ -0,0 +1,235 @@
+"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");
+/* eslint-disable testing-library/no-wait-for-side-effects */
+require("@testing-library/jest-dom/extend-expect");
+var react_1 = require("@testing-library/react");
+var Router_1 = require("../../AWING/Router");
+var CreateOrEdit_1 = __importDefault(require("./CreateOrEdit"));
+// Mock useParam
+var groupId = 'groupId123';
+jest.mock('AWING/Router', function () { return (__assign(__assign({}, jest.requireActual('AWING/Router')), { useParams: jest.fn(), Routes: function (props) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.children });
+    }, Route: function (props) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.element });
+    } })); });
+// Mock Axios client
+var groupInfo = {
+    group: {
+        groupId: '10',
+        name: 'Administrators',
+        description: 'Quản trị hệ thống',
+    },
+    userIds: ['1029', '1118', '1523'],
+};
+var userList = [
+    {
+        userId: '1029',
+        name: 'tester',
+        description: '',
+        username: 'test',
+        gender: 1,
+        image: null,
+    },
+    {
+        userId: '1118',
+        name: 'tester 1',
+        description: null,
+        username: 'test1',
+        gender: 1,
+        image: null,
+    },
+    {
+        userId: '1523',
+        name: 'Lê Thế Phong',
+        description: '',
+        username: 'phonglt@awing.vn',
+        gender: 1,
+        image: null,
+    },
+];
+var clientMethod = {
+    groupsGet: function () { return Promise.resolve(groupInfo); },
+    usersGet: function () { return Promise.resolve(userList); },
+    groupsPut: function (groupId, businessUnitdata) {
+        return Promise.resolve();
+    },
+    groupsPost: function (businessUnitdata) { return Promise.resolve(); },
+};
+jest.mock('Commons/UseAxiosProvider', function () { return ({
+    __esModule: true,
+    default: function () { return ({
+        client: {
+            groupsGet: jest.fn(function () { return Promise.resolve(clientMethod.groupsGet()); }),
+            usersGet: jest.fn(function () { return Promise.resolve(clientMethod.usersGet()); }),
+            groupsPut: jest.fn(function (groupId, businessUnitdata) {
+                return Promise.resolve(clientMethod.groupsPut(groupId, businessUnitdata));
+            }),
+            groupsPost: jest.fn(function (businessUnitdata) {
+                return Promise.resolve(clientMethod.groupsPost(businessUnitdata));
+            }),
+        },
+    }); },
+}); });
+// 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 Drawer
+jest.mock('Commons/Components/ClassicDrawer', function () { return function (props) { return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("button", { "data-testid": "onSubmit", onClick: props.onSubmit, children: "submit" }), props.children] })); }; });
+// Mock DataForm
+jest.mock('AWING', function () { return ({
+    DataForm: function (props) {
+        props.fields.forEach(function (element) {
+            if (element === null || element === void 0 ? void 0 : element.onValidate) {
+                element === null || element === void 0 ? void 0 : element.onValidate();
+            }
+        });
+        return ((0, jsx_runtime_1.jsxs)("div", { "data-testid": "DataForm", children: [(0, jsx_runtime_1.jsx)("p", { children: JSON.stringify(props.oldValue) }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "onUpdate", onClick: function () {
+                        props.onUpdate({
+                            name: 'name',
+                            description: 'description',
+                        });
+                    } })] }));
+    },
+}); });
+// Mock UserComponent
+jest.mock('./User/UserComponent', function () { return function (props) { return ((0, jsx_runtime_1.jsx)("div", { children: JSON.stringify(props.rows) })); }; });
+jest.mock('./User/SearchUser', function () { return function (props) { return ((0, jsx_runtime_1.jsx)("button", { onClick: function () {
+        props.onChangeAddUser([userList[1].userId]);
+    }, "data-testid": "onChangeAddUser" })); }; });
+describe('GroupUser CreateOrEdit component', function () {
+    beforeEach(function () {
+        ;
+        Router_1.useParams.mockReturnValue({ groupId: '' });
+    });
+    var renderUi = function () {
+        return (0, react_1.render)((0, jsx_runtime_1.jsx)(Router_1.BrowserRouter, { children: (0, jsx_runtime_1.jsx)(CreateOrEdit_1.default, {}) }));
+    };
+    it('render without crash', function () {
+        renderUi();
+    });
+    it('render with data', function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    ;
+                    Router_1.useParams.mockReturnValue({ groupId: groupId });
+                    renderUi();
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            expect(react_1.screen.getByText(JSON.stringify(groupInfo.group))).toBeInTheDocument();
+                        })];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            expect(react_1.screen.getByText(JSON.stringify(userList))).toBeInTheDocument();
+                        })];
+                case 2:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('trigger onChangeAddUser', 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('onChangeAddUser'));
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            expect(react_1.screen.getByText(JSON.stringify([userList[1]]))).toBeInTheDocument();
+                        })];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('trigger handleSubmit-create', function () {
+        var groupsPostSpy = jest.spyOn(clientMethod, 'groupsPost');
+        renderUi();
+        react_1.fireEvent.click(react_1.screen.getByTestId('onChangeAddUser'));
+        react_1.fireEvent.click(react_1.screen.getByTestId('onUpdate'));
+        react_1.fireEvent.click(react_1.screen.getByTestId('onSubmit'));
+        expect(groupsPostSpy).toHaveBeenCalledWith({
+            group: { description: 'description', name: 'name' },
+            userIds: ['1118'],
+        });
+    });
+    it('trigger handleSubmit-edit', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var groupsPutSpy;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    ;
+                    Router_1.useParams.mockReturnValue({ groupId: groupId });
+                    groupsPutSpy = jest.spyOn(clientMethod, 'groupsPut');
+                    renderUi();
+                    react_1.fireEvent.click(react_1.screen.getByTestId('onChangeAddUser'));
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            react_1.fireEvent.click(react_1.screen.getByTestId('onUpdate'));
+                            react_1.fireEvent.click(react_1.screen.getByTestId('onSubmit'));
+                            return expect(groupsPutSpy).toHaveBeenCalledWith(groupId, {
+                                group: {
+                                    description: 'description',
+                                    name: 'name',
+                                    groupId: '10',
+                                },
+                                userIds: ['1029', '1118', '1523'],
+                            });
+                        })];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { GroupUserProps } from "./Types";
+export declare const groupUserPropsContext: import("react").Context<GroupUserProps>;
+declare const useGroupUserProps: () => GroupUserProps;
+export default useGroupUserProps;

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.groupUserPropsContext = void 0;
+var react_1 = require("react");
+var react_2 = require("react");
+exports.groupUserPropsContext = (0, react_1.createContext)({});
+var useGroupUserProps = function () {
+    var props = (0, react_2.useContext)(exports.groupUserPropsContext);
+    return (0, react_2.useMemo)(function () {
+        return props;
+    }, [props]);
+};
+exports.default = useGroupUserProps;

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

@@ -0,0 +1,31 @@
+import { IUser } from "../../ACM-AXN/User/Types";
+export interface IPagedList_1OfGroup {
+    items?: IGroup[] | undefined;
+    pageCount?: number;
+    totalItemCount?: number;
+    pageNumber?: number;
+    pageSize?: number;
+    hasPreviousPage?: boolean;
+    hasNextPage?: boolean;
+}
+interface IGroupUserService {
+    groupsPaging: (searchString: string | undefined, searchId: number | undefined, pageIndex: number | undefined, pageSize: number | undefined) => Promise<IPagedList_1OfGroup>;
+    groupsDelete: (id: string) => Promise<void>;
+    groupsGet: (id: string) => Promise<IGroupModel>;
+    usersGet: () => Promise<IUser[]>;
+    groupsPut: (id: string, data: IGroupModel) => Promise<void>;
+    groupsPost: (data: IGroupModel) => Promise<void>;
+}
+export interface GroupUserProps {
+    service: IGroupUserService;
+}
+export interface IGroupModel {
+    group: IGroup;
+    userIds: string[];
+}
+export interface IGroup {
+    groupId: string;
+    name: string;
+    description: string;
+}
+export {};

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/ACM-AXN/GroupUser/User/SearchUser.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { DataObject } from '../../../AWING';
+interface SearchUserProps {
+    onChangeAddUser: (ids: any) => void;
+    listUserId: string[];
+    users: DataObject[];
+}
+declare const SearchUser: React.FC<SearchUserProps>;
+export default SearchUser;

package/lib/ACM-AXN/GroupUser/User/SearchUser.js

@@ -0,0 +1,63 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+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 ClassicDrawer_1 = __importDefault(require("../../../Commons/Components/ClassicDrawer"));
+var AWING_1 = require("../../../AWING");
+var lodash_1 = require("lodash");
+var react_1 = require("react");
+var react_i18next_1 = require("react-i18next");
+var SearchUser = function (props) {
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var listUserId = props.listUserId, users = props.users, onChangeAddUser = props.onChangeAddUser;
+    var _a = (0, react_1.useState)([]), usersSearchResult = _a[0], setUsersSearchResult = _a[1];
+    var _b = (0, react_1.useState)([]), selectedIds = _b[0], setSelectedIs = _b[1];
+    var handleFilterByFieldName = function (list, newSearchString, fieldName) {
+        var result = list;
+        if (newSearchString.length) {
+            result = list.filter(function (item) {
+                return item[fieldName]
+                    .toLowerCase()
+                    .includes(newSearchString.toLowerCase());
+            });
+        }
+        return result.filter(function (item) { return !listUserId.includes(item.userId); });
+    };
+    var handleChangeUserList = function (e) {
+        var userId = e.currentTarget.dataset.userid;
+        var newUserIds = selectedIds.slice();
+        if (e.target.checked) {
+            setSelectedIs(__spreadArray(__spreadArray([], newUserIds, true), [userId], false));
+        }
+        else {
+            newUserIds = (0, lodash_1.filter)(newUserIds, function (id) { return id !== userId; });
+            setSelectedIs(newUserIds);
+        }
+    };
+    var handleSearch = function (searchString) {
+        var newUsersSearchResult = handleFilterByFieldName(users, searchString, 'username');
+        setUsersSearchResult(newUsersSearchResult);
+    };
+    var handleSubmit = function () { return Promise.resolve(onChangeAddUser(selectedIds)); };
+    return ((0, jsx_runtime_1.jsx)(ClassicDrawer_1.default, { title: t('UserGroup.AddUserGroupButton'), onSubmit: handleSubmit, confirmExit: false, disableButtonSubmit: !selectedIds.length, childrenWrapperStyle: { padding: 0 }, children: (0, jsx_runtime_1.jsx)(material_1.Grid, { container: true, sx: { flexGrow: 1, padding: function (theme) { return theme.spacing(3); } }, children: (0, jsx_runtime_1.jsx)(AWING_1.Page, { actions: (0, jsx_runtime_1.jsx)(AWING_1.SearchBox, { onSearch: function (searchType, searchString) {
+                        handleSearch(searchString);
+                    } }), caption: '', children: (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, component: material_1.Paper, sx: { p: 3, width: '100%', position: 'relative' }, children: usersSearchResult.length > 0 ? ((0, jsx_runtime_1.jsx)(material_1.Grid, { container: true, sx: { marginTop: '24px' }, children: usersSearchResult.map(function (user, key) { return ((0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 12, sm: 6, md: 4, lg: 3, children: (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { inputProps: {
+                                        'data-userid': user.userId,
+                                        name: user.userId,
+                                    }, "data-userid": user.userId, color: "primary", checked: (0, lodash_1.some)(selectedIds, function (id) {
+                                        return id === user.userId;
+                                    }), onChange: handleChangeUserList, value: user.userId }), label: user.username }) }, key)); }) })) : ((0, jsx_runtime_1.jsx)(AWING_1.NoData, {})) }) }) }) }));
+};
+exports.default = SearchUser;

package/lib/ACM-AXN/GroupUser/User/SearchUser.test.d.ts

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

package/lib/ACM-AXN/GroupUser/User/SearchUser.test.js

@@ -0,0 +1,140 @@
+"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 SearchUser_1 = __importDefault(require("./SearchUser"));
+var userIds = ['1029', '1118'];
+var userList = [
+    {
+        userId: '1029',
+        name: 'tester',
+        description: '',
+        username: 'test',
+        gender: 1,
+        image: null,
+    },
+    {
+        userId: '1029a',
+        name: 'tester2',
+        description: '',
+        username: 'test2',
+        gender: 1,
+        image: null,
+    },
+    {
+        userId: '1118',
+        name: 'tester 1',
+        description: null,
+        username: 'test1',
+        gender: 1,
+        image: null,
+    },
+    {
+        userId: '1523',
+        name: 'Lê Thế Phong',
+        description: '',
+        username: 'phonglt@awing.vn',
+        gender: 1,
+        image: null,
+    },
+];
+// 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 Drawer
+jest.mock('Commons/Components/ClassicDrawer', function () { return function (props) {
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("button", { "data-testid": "onSubmit", onClick: props.onSubmit, children: "submit" }), props.children] }));
+}; });
+// Mock SearchBox
+jest.mock('AWING', function () { return ({
+    SearchBox: function (props) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { "data-testid": "onSearch", onClick: function () {
+                    props.onSearch('', 'phonglt');
+                }, children: "onSearch" }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "onClearSearch", onClick: function () {
+                    props.onSearch('', '');
+                }, children: "onClearSearch" })] })); },
+}); });
+var mockFn = {
+    onChangeAddUser: function (id) { },
+};
+var onChangeAddUser = jest.fn(function (id) { return mockFn.onChangeAddUser(id); });
+describe('GroupUser/SearchUser', function () {
+    var renderUi = function () {
+        return (0, react_1.render)((0, jsx_runtime_1.jsx)(SearchUser_1.default, { listUserId: userIds, users: userList, onChangeAddUser: onChangeAddUser }));
+    };
+    it('render without crash', function () {
+        renderUi();
+    });
+    it('handle search', function () {
+        renderUi();
+        react_1.fireEvent.click(react_1.screen.getByTestId('onSearch'));
+        expect(react_1.screen.getByText('phonglt@awing.vn')).toBeInTheDocument();
+        expect(react_1.screen.queryByText('test2')).toBeNull();
+        react_1.fireEvent.click(react_1.screen.getByTestId('onClearSearch'));
+        expect(react_1.screen.getByText('test2')).toBeInTheDocument();
+    });
+    it('handle change user', function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            renderUi();
+            react_1.fireEvent.click(react_1.screen.getByTestId('onSearch'));
+            // check phonglt@awing.vn
+            react_1.fireEvent.click(react_1.screen.getByText('phonglt@awing.vn'));
+            react_1.fireEvent.click(react_1.screen.getByTestId('onSubmit'));
+            expect(onChangeAddUser).toHaveBeenCalledWith(['1029', '1118', '1523']);
+            // un check phonglt@awing.vn
+            react_1.fireEvent.click(react_1.screen.getByText('phonglt@awing.vn'));
+            react_1.fireEvent.click(react_1.screen.getByTestId('onSubmit'));
+            expect(onChangeAddUser).toHaveBeenCalledWith(['1029', '1118']);
+            return [2 /*return*/];
+        });
+    }); });
+});

package/lib/ACM-AXN/GroupUser/User/UserComponent.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { DataObject } from '../../../AWING';
+import { IGroupModel } from '../Types';
+interface UserComponentProps {
+    rows: DataObject[];
+    onChangeAddUser: (ids: IGroupModel['userIds']) => void;
+}
+declare const UserComponent: React.FC<UserComponentProps>;
+export default UserComponent;

package/lib/ACM-AXN/GroupUser/User/UserComponent.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var Helpers_1 = require("../../../Utils/Helpers");
+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 Context_1 = require("../../../Context");
+var Constant_1 = require("../../../ACM-AXN/Common/Constant");
+var UserComponent = function (_a) {
+    var rows = _a.rows, onChangeAddUser = _a.onChangeAddUser;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var appHelper = (0, Context_1.useAwing)().appHelper;
+    var _b = (0, react_1.useTransition)(), startTransition = _b[1];
+    var _c = (0, react_1.useState)([]), gridUser = _c[0], setGridUser = _c[1];
+    var _d = (0, react_1.useState)(true), trigger = _d[0], setTrigger = _d[1];
+    var _e = (0, react_1.useState)({
+        pageIndex: 0,
+        pageSize: 10,
+    }), queryParams = _e[0], setQueryParams = _e[1];
+    (0, react_1.useLayoutEffect)(function () {
+        if (trigger) {
+            setGridUser(rows);
+            setTrigger(false);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [rows]);
+    var handleDelete = function (id) {
+        startTransition(function () {
+            setTrigger(true);
+            onChangeAddUser(rows
+                .filter(function (item) { return item.userId !== id; })
+                .map(function (item) { return item.userId; }));
+        });
+        return Promise.resolve();
+    };
+    var handleChangeParams = (0, react_1.useCallback)(function (params) {
+        setGridUser(rows.filter(function (row) {
+            return [row.name, row.username].join(" ").includes(params.searchString.trim());
+        }));
+        setQueryParams({
+            pageIndex: params.pageIndex,
+            pageSize: params.pageSize,
+        });
+    }, [rows]);
+    return ((0, jsx_runtime_1.jsx)(material_1.Grid, { container: true, sx: {
+            flexGrow: 1,
+            padding: function (theme) { return theme.spacing(3); },
+            paddingTop: 0,
+        }, children: (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, component: material_1.Paper, sx: {
+                p: 3,
+                width: '100%',
+                position: 'relative',
+                '& h1.MuiTypography-root': { fontSize: '1rem' },
+            }, children: (0, jsx_runtime_1.jsx)(PageManagement_1.PageManagement, { title: t('UserGroup.TitleUserGroup'), getRowId: function (obj) { return obj.userId; }, columns: [
+                    {
+                        field: '#',
+                        headerName: '#',
+                        width: 100,
+                        valueGetter: function (_unUse, idx, stt) { return stt; },
+                    },
+                    {
+                        field: 'username',
+                        headerName: t('Common.Username'),
+                    },
+                    {
+                        field: 'name',
+                        headerName: t('Common.Name'),
+                    },
+                ], totalOfRows: gridUser.length, rows: (0, Helpers_1.offlinePaginate)(gridUser, queryParams.pageIndex, queryParams.pageSize), customActions: (0, jsx_runtime_1.jsx)(material_1.Button, { component: Router_1.Link, variant: "outlined", color: "secondary", sx: function (theme) { return ({
+                        backgroundColor: theme.palette.action.hover,
+                        '&:hover': {
+                            backgroundColor: theme.palette.secondary.main,
+                            border: '1px solid lightgray',
+                        },
+                        color: theme.palette.text.primary,
+                        border: '1px solid lightgray',
+                        marginLeft: theme.spacing(2),
+                    }); }, to: Constant_1.Constants.ADD_USER_TO_GROUP, children: t('UserGroup.AddUserGroupButton') }), onChangeQueryInput: handleChangeParams, onDelete: handleDelete, confirmDelete: appHelper.confirm, loading: false }) }) }));
+};
+exports.default = UserComponent;

package/lib/ACM-AXN/GroupUser/User/UserComponent.test.d.ts

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