phx-uikit 1.0.50 → 1.0.52
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/Func/clientMutationV3.d.ts +1 -2
- package/dist/cjs/components/Func/clientQueryV3.d.ts +1 -2
- package/dist/cjs/components/LoginV3/LoginV3.js +1 -1
- package/dist/cjs/components/LoginV3/LoginV3.js.map +1 -1
- package/dist/cjs/components/Notifications/Notifications.d.ts +1 -1
- package/dist/cjs/components/Notifications/Notifications.js +2 -5
- package/dist/cjs/components/Notifications/Notifications.js.map +1 -1
- package/dist/cjs/components/TableV3/TableV3.d.ts +69 -0
- package/dist/cjs/components/TableV3/TableV3.js +418 -0
- package/dist/cjs/components/TableV3/TableV3.js.map +1 -0
- package/dist/cjs/utils/email-service.d.ts +1 -2
- package/dist/esm/components/Func/clientMutationV3.d.ts +1 -2
- package/dist/esm/components/Func/clientQueryV3.d.ts +1 -2
- package/dist/esm/components/LoginV3/LoginV3.js +1 -1
- package/dist/esm/components/LoginV3/LoginV3.js.map +1 -1
- package/dist/esm/components/Notifications/Notifications.d.ts +1 -1
- package/dist/esm/components/Notifications/Notifications.js +2 -5
- package/dist/esm/components/Notifications/Notifications.js.map +1 -1
- package/dist/esm/components/TableV3/TableV3.d.ts +69 -0
- package/dist/esm/components/TableV3/TableV3.js +414 -0
- package/dist/esm/components/TableV3/TableV3.js.map +1 -0
- package/dist/esm/utils/email-service.d.ts +1 -2
- package/package.json +2 -1
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import axios from 'axios';
|
|
2
1
|
export default function PHXClientMutationV3({ query, variables, isDelay, }: {
|
|
3
2
|
query: string;
|
|
4
3
|
variables?: object;
|
|
5
4
|
isDelay?: boolean;
|
|
6
|
-
}): Promise<axios.AxiosResponse<any, any>>;
|
|
5
|
+
}): Promise<import("axios").AxiosResponse<any, any>>;
|
|
@@ -29,7 +29,7 @@ var PHXLoginV3 = function (props) {
|
|
|
29
29
|
switch (_a.label) {
|
|
30
30
|
case 0:
|
|
31
31
|
_a.trys.push([0, 3, , 4]);
|
|
32
|
-
return [4 /*yield*/, fetch("".concat(uri, "/authen/login"), {
|
|
32
|
+
return [4 /*yield*/, fetch("".concat(uri, "/authen/login-v3"), {
|
|
33
33
|
headers: {
|
|
34
34
|
'Content-Type': 'application/json'
|
|
35
35
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LoginV3.js","sourceRoot":"","sources":["../../../../src/components/LoginV3/LoginV3.tsx"],"names":[],"mappings":";;;;AAAA,qDAAkD;AAClD,mDAAyC;AACzC,kCAAmC;AACnC,oCAAqC;AACrC,oCAAqC;AACrC,mDAAkE;AAClE,yDAA8C;AAC9C,wFAAyD;AACzD,wCAAyC;AACzC,sEAAsC;AACtC,8EAAuD;AACvD,gEAA+B;AAUxB,IAAM,UAAU,GAAG,UAAC,KAAsB;IACvC,IAAA,IAAI,GAAgD,KAAK,KAArD,EAAE,MAAM,GAAwC,KAAK,OAA7C,EAAE,MAAM,GAAgC,KAAK,OAArC,EAAE,YAAY,GAAkB,KAAK,aAAvB,EAAE,WAAW,GAAK,KAAK,YAAV,CAAU;IAC3D,IAAA,KAA0B,IAAA,gBAAQ,EAAU,IAAI,CAAC,EAAhD,QAAQ,QAAA,EAAE,WAAW,QAA2B,CAAA;IACjD,IAAA,KAA8B,IAAA,gBAAQ,EAAU,KAAK,CAAC,EAArD,UAAU,QAAA,EAAE,aAAa,QAA4B,CAAA;IACtD,IAAA,KAAwB,IAAA,gBAAQ,EAAU,KAAK,CAAC,EAA/C,OAAO,QAAA,EAAE,UAAU,QAA4B,CAAA;IACtD,IAAM,aAAa,GAAG,IAAA,yBAAoB,GAAE,CAAA;IAE5C,IAAM,UAAU,GAAG,IAAA,wBAAM,EAAC,4BAA4B,EAAE,OAAO,CAAC,GAAG,CAAC,0BAA0B,CAAC,CAAA;IAEzF,IAAA,KAIF,IAAA,yBAAO,GAAE,EAHX,YAAY,kBAAA,EACZ,QAAQ,cAAA,EACK,MAAM,sBACR,CAAA;IAEb,IAAM,GAAG,GAAG,IAAA,wBAAM,EAAC,yBAAyB,EAAE,OAAO,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAA;IAElF,IAAM,YAAY,GAAG,UAAO,KAAa,EAAE,QAAgB;;;;;;oBAEtC,qBAAM,KAAK,CAAC,UAAG,GAAG,
|
|
1
|
+
{"version":3,"file":"LoginV3.js","sourceRoot":"","sources":["../../../../src/components/LoginV3/LoginV3.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
export interface NotificationsProps {
|
|
3
3
|
className?: string;
|
|
4
4
|
show?: boolean;
|
|
5
|
-
type?: 'add' | 'edit' | 'delete' | 'custom';
|
|
5
|
+
type?: 'add' | 'edit' | 'delete' | 'custom' | '';
|
|
6
6
|
customMessage?: string;
|
|
7
7
|
failure?: boolean;
|
|
8
8
|
onHide?: any;
|
|
@@ -27,9 +27,6 @@ var PHXNotifications = function (_a) {
|
|
|
27
27
|
}, [failure]);
|
|
28
28
|
var hideNotify = function () {
|
|
29
29
|
setNotify(false);
|
|
30
|
-
setTimeout(function () {
|
|
31
|
-
setIsFailure(false);
|
|
32
|
-
}, 200);
|
|
33
30
|
if (onHide) {
|
|
34
31
|
onHide();
|
|
35
32
|
}
|
|
@@ -43,12 +40,12 @@ var PHXNotifications = function (_a) {
|
|
|
43
40
|
: customMessage;
|
|
44
41
|
return (react_1["default"].createElement("div", { "aria-live": 'assertive', className: "absolute pointer-events-none inset-0 flex items-center px-4 py-6 sm:items-start sm:p-6 ".concat(className) },
|
|
45
42
|
react_1["default"].createElement("div", { className: 'fixed bottom-10 mr-8 flex w-[-webkit-fill-available] flex-col items-center' },
|
|
46
|
-
react_1["default"].createElement(react_2.Transition, { as: react_1.Fragment, enter: 'transform ease-out duration-500 transition', enterFrom: 'translate-y-2 opacity-0 sm:translate-y-0 sm:translate-y-10', enterTo: 'translate-y-0 opacity-
|
|
43
|
+
react_1["default"].createElement(react_2.Transition, { as: react_1.Fragment, enter: 'transform ease-out duration-500 transition', enterFrom: 'translate-y-2 opacity-0 sm:translate-y-0 sm:translate-y-10', enterTo: 'translate-y-0 opacity-500 sm:translate-y-0', leave: 'transition ease-in duration-500', leaveFrom: 'translate-y-0 opacity-500 sm:translate-y-0', leaveTo: 'translate-y-2 opacity-0 sm:translate-y-0 sm:translate-y-10', show: notify },
|
|
47
44
|
react_1["default"].createElement("div", { className: (0, types_1.classNames)('pointer-events-auto max-w-sm overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5', isFailure ? 'bg-red-600' : 'bg-indigo-800') },
|
|
48
45
|
react_1["default"].createElement("div", { className: 'p-3' },
|
|
49
46
|
react_1["default"].createElement("div", { className: 'flex items-center justify-between' },
|
|
50
47
|
react_1["default"].createElement("div", { className: 'ml-1' },
|
|
51
|
-
react_1["default"].createElement("p", { className: 'text-xs font-normal text-white' }, isFailure && type === 'custom' ? message : isFailure ? '
|
|
48
|
+
react_1["default"].createElement("p", { className: 'text-xs font-normal text-white' }, isFailure && type === 'custom' ? message : isFailure ? 'Lỗi, vui lòng thử lại sau' : message)),
|
|
52
49
|
react_1["default"].createElement("div", { className: 'ml-4 flex pt-0.5' },
|
|
53
50
|
react_1["default"].createElement("button", { className: 'inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500', onClick: function () { return hideNotify(); }, type: 'button' },
|
|
54
51
|
react_1["default"].createElement("span", { className: 'sr-only' }, "Close"),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Notifications.js","sourceRoot":"","sources":["../../../../src/components/Notifications/Notifications.tsx"],"names":[],"mappings":";;;;AAAA,qDAA4D;AAC5D,kCAAqC;AACrC,2CAA8C;AAC9C,mDAAqD;AAW9C,IAAM,gBAAgB,GAAG,UAAC,EAA6E;QAA3E,SAAS,eAAA,EAAE,IAAI,UAAA,EAAE,IAAI,UAAA,EAAE,MAAM,YAAA,EAAE,OAAO,aAAA,EAAE,aAAa,mBAAA;IAChF,IAAA,KAAsB,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAApC,MAAM,QAAA,EAAE,SAAS,QAAmB,CAAA;IACrC,IAAA,KAA4B,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAA1C,SAAS,QAAA,EAAE,YAAY,QAAmB,CAAA;IAEjD,IAAA,iBAAS,EAAC;QACR,aAAa;QACb,SAAS,CAAC,IAAI,CAAC,CAAA;IACjB,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,IAAA,iBAAS,EAAC;QACR,aAAa;QACb,IAAI,OAAO,EAAE;YACX,YAAY,CAAC,IAAI,CAAC,CAAA;SACnB;aAAM;YACL,UAAU,CAAC;gBACT,YAAY,CAAC,KAAK,CAAC,CAAA;YACrB,CAAC,EAAE,GAAG,CAAC,CAAA;SACR;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,IAAM,UAAU,GAAG;QACjB,SAAS,CAAC,KAAK,CAAC,CAAA;QAChB,
|
|
1
|
+
{"version":3,"file":"Notifications.js","sourceRoot":"","sources":["../../../../src/components/Notifications/Notifications.tsx"],"names":[],"mappings":";;;;AAAA,qDAA4D;AAC5D,kCAAqC;AACrC,2CAA8C;AAC9C,mDAAqD;AAW9C,IAAM,gBAAgB,GAAG,UAAC,EAA6E;QAA3E,SAAS,eAAA,EAAE,IAAI,UAAA,EAAE,IAAI,UAAA,EAAE,MAAM,YAAA,EAAE,OAAO,aAAA,EAAE,aAAa,mBAAA;IAChF,IAAA,KAAsB,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAApC,MAAM,QAAA,EAAE,SAAS,QAAmB,CAAA;IACrC,IAAA,KAA4B,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAA1C,SAAS,QAAA,EAAE,YAAY,QAAmB,CAAA;IAEjD,IAAA,iBAAS,EAAC;QACR,aAAa;QACb,SAAS,CAAC,IAAI,CAAC,CAAA;IACjB,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,IAAA,iBAAS,EAAC;QACR,aAAa;QACb,IAAI,OAAO,EAAE;YACX,YAAY,CAAC,IAAI,CAAC,CAAA;SACnB;aAAM;YACL,UAAU,CAAC;gBACT,YAAY,CAAC,KAAK,CAAC,CAAA;YACrB,CAAC,EAAE,GAAG,CAAC,CAAA;SACR;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,IAAM,UAAU,GAAG;QACjB,SAAS,CAAC,KAAK,CAAC,CAAA;QAChB,IAAI,MAAM,EAAE;YACV,MAAM,EAAE,CAAA;SACT;IACH,CAAC,CAAA;IAED,IAAM,OAAO,GACX,IAAI,KAAK,KAAK;QACZ,CAAC,CAAC,qBAAqB;QACvB,CAAC,CAAC,IAAI,KAAK,MAAM;YACjB,CAAC,CAAC,qBAAqB;YACvB,CAAC,CAAC,IAAI,KAAK,QAAQ;gBACnB,CAAC,CAAC,wBAAwB;gBAC1B,CAAC,CAAC,aAAa,CAAA;IAEnB,OAAO,CACL,uDACY,WAAW,EACrB,SAAS,EAAE,iGAA0F,SAAS,CAAE;QAEhH,0CAAK,SAAS,EAAC,4EAA4E;YAEzF,iCAAC,kBAAU,IACT,EAAE,EAAE,gBAAQ,EACZ,KAAK,EAAC,4CAA4C,EAClD,SAAS,EAAC,4DAA4D,EACtE,OAAO,EAAC,4CAA4C,EACpD,KAAK,EAAC,iCAAiC,EACvC,SAAS,EAAC,4CAA4C,EACtD,OAAO,EAAC,4DAA4D,EACpE,IAAI,EAAE,MAAM;gBAEZ,0CACE,SAAS,EAAE,IAAA,kBAAU,EACnB,oGAAoG,EACpG,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,eAAe,CAC3C;oBAED,0CAAK,SAAS,EAAC,KAAK;wBAClB,0CAAK,SAAS,EAAC,mCAAmC;4BAChD,0CAAK,SAAS,EAAC,MAAM;gCACnB,wCAAG,SAAS,EAAC,gCAAgC,IAC1C,SAAS,IAAI,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,OAAO,CAC3F,CACA;4BACN,0CAAK,SAAS,EAAC,kBAAkB;gCAC/B,6CACE,SAAS,EAAC,mEAAmE,EAC7E,OAAO,EAAE,cAAM,OAAA,UAAU,EAAE,EAAZ,CAAY,EAC3B,IAAI,EAAC,QAAQ;oCAEb,2CAAM,SAAS,EAAC,SAAS,YAAa;oCACtC,iCAAC,iBAAS,mBACI,MAAM,EAClB,SAAS,EAAE,IAAA,kBAAU,EAAC,oBAAoB,EAAE,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,eAAe,CAAC,GACvF,CACK,CACL,CACF,CACF,CACF,CACK,CACT,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAtFY,QAAA,gBAAgB,oBAsF5B"}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ComplexAction } from '../types';
|
|
3
|
+
export interface MainTableProps {
|
|
4
|
+
paginationData: any;
|
|
5
|
+
sortData: any;
|
|
6
|
+
slectedTitle?: string | any;
|
|
7
|
+
selectedBtn?: ComplexAction[];
|
|
8
|
+
pathname?: any;
|
|
9
|
+
list: {
|
|
10
|
+
keyResult: string;
|
|
11
|
+
query: string;
|
|
12
|
+
} | any;
|
|
13
|
+
thHeader: Array<any>;
|
|
14
|
+
thBody: Array<any>;
|
|
15
|
+
thBodyComponent?: object;
|
|
16
|
+
thBodyFilter?(): any;
|
|
17
|
+
editActionLink?: string;
|
|
18
|
+
search: {
|
|
19
|
+
enable: boolean;
|
|
20
|
+
keyResult: string;
|
|
21
|
+
query: string;
|
|
22
|
+
} | any;
|
|
23
|
+
selectedAllPeople?: {
|
|
24
|
+
enable: boolean;
|
|
25
|
+
title: string;
|
|
26
|
+
} | any;
|
|
27
|
+
actionName?: any;
|
|
28
|
+
sort?: {
|
|
29
|
+
enable?: boolean;
|
|
30
|
+
defaultActive?: string;
|
|
31
|
+
sortList?: Array<any>;
|
|
32
|
+
} | any;
|
|
33
|
+
clickRow?: boolean;
|
|
34
|
+
clickType?: 'edit' | 'custom';
|
|
35
|
+
router: any;
|
|
36
|
+
setAggregate?: any;
|
|
37
|
+
sortSelectData?: any;
|
|
38
|
+
selectArray?: any;
|
|
39
|
+
graphqlEndpoint?: string;
|
|
40
|
+
graphqlKey?: string;
|
|
41
|
+
pagination?: any;
|
|
42
|
+
routerCondition?: {
|
|
43
|
+
link: string;
|
|
44
|
+
conditionName: string;
|
|
45
|
+
conditionArray: Array<any>;
|
|
46
|
+
} | any;
|
|
47
|
+
onClick?(rowData: any): any;
|
|
48
|
+
thHeaderComponent?: any;
|
|
49
|
+
hidePagination?: boolean;
|
|
50
|
+
rowNumber?: number;
|
|
51
|
+
onChange?: any;
|
|
52
|
+
typeLoading?: {
|
|
53
|
+
type: 'page-with-table' | 'page-table-with-report' | 'table' | 'page-table-report-filter' | 'page-table-filter';
|
|
54
|
+
filterQty?: number;
|
|
55
|
+
reportQty?: number;
|
|
56
|
+
};
|
|
57
|
+
setHeaderLoading?: any;
|
|
58
|
+
directDetail?: {
|
|
59
|
+
enable: boolean;
|
|
60
|
+
onClick?(): any;
|
|
61
|
+
} | any;
|
|
62
|
+
filterLoading?: boolean;
|
|
63
|
+
fixedTableLayout?: boolean;
|
|
64
|
+
numericalOrder?: {
|
|
65
|
+
enable: boolean;
|
|
66
|
+
title: string | any;
|
|
67
|
+
};
|
|
68
|
+
}
|
|
69
|
+
export declare function PHXTable({ actionName, clickRow, clickType, editActionLink, graphqlEndpoint, selectedBtn, slectedTitle, hidePagination, list, numericalOrder, onChange, onClick, pagination, paginationData, router, routerCondition, rowNumber, search, selectArray, selectedAllPeople, setAggregate, setHeaderLoading, sort, sortData, sortSelectData, thBody, thBodyComponent, thBodyFilter, thHeader, thHeaderComponent, typeLoading, directDetail, filterLoading, fixedTableLayout, }: Readonly<MainTableProps>): React.JSX.Element;
|
|
@@ -0,0 +1,418 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
'use client';
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.PHXTable = void 0;
|
|
5
|
+
var tslib_1 = require("tslib");
|
|
6
|
+
var apollo_wrapper_1 = require("../../lib/apollo-wrapper");
|
|
7
|
+
var react_1 = require("@headlessui/react");
|
|
8
|
+
var solid_1 = require("@heroicons/react/24/solid");
|
|
9
|
+
var react_2 = tslib_1.__importStar(require("react"));
|
|
10
|
+
var EmptySearchResult_1 = tslib_1.__importDefault(require("../Table/EmptySearchResult"));
|
|
11
|
+
var Pagination_1 = tslib_1.__importDefault(require("../Table/Pagination"));
|
|
12
|
+
var RowTable_1 = require("../Table/RowTable");
|
|
13
|
+
var sort_1 = tslib_1.__importDefault(require("../Table/sort"));
|
|
14
|
+
var Button_1 = require("../Button");
|
|
15
|
+
var EmptyRecord_1 = require("../EmptyRecord");
|
|
16
|
+
var useDebounce_1 = tslib_1.__importDefault(require("../Func/useDebounce"));
|
|
17
|
+
var Loading_1 = require("../Loading");
|
|
18
|
+
var Skeleton_1 = require("../Skeleton");
|
|
19
|
+
var types_1 = require("../types");
|
|
20
|
+
var js_cookie_1 = tslib_1.__importDefault(require("js-cookie"));
|
|
21
|
+
var constants_1 = require("../../utils/constants");
|
|
22
|
+
var PaginaitonSelected_1 = tslib_1.__importDefault(require("../Table/PaginaitonSelected"));
|
|
23
|
+
var clientQueryV3_1 = tslib_1.__importDefault(require("../Func/clientQueryV3"));
|
|
24
|
+
function PHXTable(_a) {
|
|
25
|
+
var _this = this;
|
|
26
|
+
var actionName = _a.actionName, _b = _a.clickRow, clickRow = _b === void 0 ? true : _b, _c = _a.clickType, clickType = _c === void 0 ? 'edit' : _c, editActionLink = _a.editActionLink, graphqlEndpoint = _a.graphqlEndpoint, selectedBtn = _a.selectedBtn, slectedTitle = _a.slectedTitle, hidePagination = _a.hidePagination, list = _a.list, _d = _a.numericalOrder, numericalOrder = _d === void 0 ? {
|
|
27
|
+
enable: false,
|
|
28
|
+
title: 'STT'
|
|
29
|
+
} : _d, onChange = _a.onChange, onClick = _a.onClick, pagination = _a.pagination, paginationData = _a.paginationData, router = _a.router, routerCondition = _a.routerCondition, _e = _a.rowNumber, rowNumber = _e === void 0 ? 10 : _e, search = _a.search, selectArray = _a.selectArray, selectedAllPeople = _a.selectedAllPeople, setAggregate = _a.setAggregate, setHeaderLoading = _a.setHeaderLoading, sort = _a.sort, sortData = _a.sortData, sortSelectData = _a.sortSelectData, thBody = _a.thBody, thBodyComponent = _a.thBodyComponent, thBodyFilter = _a.thBodyFilter, thHeader = _a.thHeader, thHeaderComponent = _a.thHeaderComponent, _f = _a.typeLoading, typeLoading = _f === void 0 ? { type: 'table' } : _f, directDetail = _a.directDetail, _g = _a.filterLoading, filterLoading = _g === void 0 ? false : _g, _h = _a.fixedTableLayout, fixedTableLayout = _h === void 0 ? true : _h;
|
|
30
|
+
var checkbox = (0, react_2.useRef)();
|
|
31
|
+
var _j = (0, react_2.useState)(false), checked = _j[0], setChecked = _j[1];
|
|
32
|
+
var _k = (0, react_2.useState)(false), indeterminate = _k[0], setIndeterminate = _k[1];
|
|
33
|
+
var _l = (0, react_2.useState)(true), isMainLoading = _l[0], setIsMainLoading = _l[1];
|
|
34
|
+
var _m = (0, react_2.useState)([]), dataTable = _m[0], setDataTable = _m[1];
|
|
35
|
+
var _o = (0, react_2.useState)(''), searchValue = _o[0], setSearchValue = _o[1];
|
|
36
|
+
var _p = (0, react_2.useState)([]), selectedPeople = _p[0], setSelectedPeople = _p[1];
|
|
37
|
+
var _q = (0, react_2.useState)(false), isSearchLoading = _q[0], setIsSearchLoading = _q[1];
|
|
38
|
+
var _r = (0, react_2.useState)([]), searchDataResult = _r[0], setSearchDataResult = _r[1];
|
|
39
|
+
var _s = (0, react_2.useState)(0), pagi = _s[0], setPagi = _s[1];
|
|
40
|
+
var _t = (0, react_2.useState)(0), count = _t[0], setCount = _t[1];
|
|
41
|
+
var timKiemPlacholder = 'Tìm kiếm';
|
|
42
|
+
var _u = (0, react_2.useState)(false), isSearch = _u[0], setIsSearch = _u[1];
|
|
43
|
+
var _v = (0, react_2.useState)(sort === null || sort === void 0 ? void 0 : sort.defaultActive), activeMenu = _v[0], setActiveMenu = _v[1];
|
|
44
|
+
var _w = (0, react_2.useState)(false), isSelectSort = _w[0], setIsSelectSort = _w[1];
|
|
45
|
+
var _x = (0, react_2.useState)(false), isSort = _x[0], setIsSort = _x[1];
|
|
46
|
+
var _y = (0, react_2.useState)(false), isSortLoading = _y[0], setIsSortLoading = _y[1];
|
|
47
|
+
var _z = (0, react_2.useState)(rowNumber), rowQuantity = _z[0], setRowQuantity = _z[1];
|
|
48
|
+
var _0 = (0, react_2.useState)(false), isChangeRowQty = _0[0], setIsChangeRowQty = _0[1];
|
|
49
|
+
var queryHidePagi = list.query.replace(/limit\s*:\s*\d+\s*,?|offset\s*:\s*\d+\s*,?/g, '');
|
|
50
|
+
var queryWithLimitSelected = list.query
|
|
51
|
+
.replace(/limit\s*:\s*\d+/g, "limit: ".concat(rowQuantity))
|
|
52
|
+
.replace(/offset\s*:\s*\d+/g, "offset: ".concat(pagination * rowQuantity));
|
|
53
|
+
var dataQuery = "\n ".concat(hidePagination ? queryHidePagi : queryWithLimitSelected, "\n ");
|
|
54
|
+
var getToken = function () {
|
|
55
|
+
if (typeof window !== 'undefined') {
|
|
56
|
+
var authTokenInfo_1 = js_cookie_1["default"].get(constants_1.AUTH_TOKEN) && JSON.parse(js_cookie_1["default"].get(constants_1.AUTH_TOKEN));
|
|
57
|
+
return 'Bearer' + ' ' + authTokenInfo_1.token;
|
|
58
|
+
}
|
|
59
|
+
else {
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
var authTokenInfo = getToken();
|
|
64
|
+
var filterQuery = function (query, value) { return query.replace(/%@value%/g, "\"\"%".concat(value, "%\"\"")); };
|
|
65
|
+
var searchQuery = search ? filterQuery(search.query, searchValue.trim()) : '';
|
|
66
|
+
var searchQueryHidePagi = searchQuery.replace(/limit\s*:\s*\d+\s*,?|offset\s*:\s*\d+\s*,?/g, '');
|
|
67
|
+
var searchQueryWithLimitSelected = searchQuery
|
|
68
|
+
.replace(/limit\s*:\s*\d+/g, "limit: ".concat(rowQuantity))
|
|
69
|
+
.replace(/offset\s*:\s*\d+/g, "offset: ".concat(pagination * rowQuantity));
|
|
70
|
+
var searchDataQuery = "\n ".concat(hidePagination ? searchQueryHidePagi : searchQueryWithLimitSelected, "\n ");
|
|
71
|
+
var fetchSearchData = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
|
|
72
|
+
var error_1;
|
|
73
|
+
return tslib_1.__generator(this, function (_a) {
|
|
74
|
+
switch (_a.label) {
|
|
75
|
+
case 0:
|
|
76
|
+
_a.trys.push([0, 2, , 3]);
|
|
77
|
+
return [4 /*yield*/, (0, clientQueryV3_1["default"])({
|
|
78
|
+
query: searchDataQuery
|
|
79
|
+
})];
|
|
80
|
+
case 1: return [2 /*return*/, _a.sent()];
|
|
81
|
+
case 2:
|
|
82
|
+
error_1 = _a.sent();
|
|
83
|
+
console.log(error_1);
|
|
84
|
+
return [2 /*return*/];
|
|
85
|
+
case 3: return [2 /*return*/];
|
|
86
|
+
}
|
|
87
|
+
});
|
|
88
|
+
}); };
|
|
89
|
+
var remoteListSearchQuery = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
|
|
90
|
+
var res, error_2;
|
|
91
|
+
return tslib_1.__generator(this, function (_a) {
|
|
92
|
+
switch (_a.label) {
|
|
93
|
+
case 0:
|
|
94
|
+
_a.trys.push([0, 2, , 3]);
|
|
95
|
+
return [4 /*yield*/, (0, clientQueryV3_1["default"])({
|
|
96
|
+
query: searchDataQuery
|
|
97
|
+
})];
|
|
98
|
+
case 1:
|
|
99
|
+
res = _a.sent();
|
|
100
|
+
return [2 /*return*/, res];
|
|
101
|
+
case 2:
|
|
102
|
+
error_2 = _a.sent();
|
|
103
|
+
console.log(error_2);
|
|
104
|
+
return [2 /*return*/];
|
|
105
|
+
case 3: return [2 /*return*/];
|
|
106
|
+
}
|
|
107
|
+
});
|
|
108
|
+
}); };
|
|
109
|
+
var getData = function (option) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
|
|
110
|
+
var startTime, result, data, endTime, duration;
|
|
111
|
+
return tslib_1.__generator(this, function (_a) {
|
|
112
|
+
switch (_a.label) {
|
|
113
|
+
case 0:
|
|
114
|
+
startTime = performance.now();
|
|
115
|
+
return [4 /*yield*/, option()];
|
|
116
|
+
case 1:
|
|
117
|
+
result = _a.sent();
|
|
118
|
+
data = result.data;
|
|
119
|
+
endTime = performance.now();
|
|
120
|
+
duration = endTime - startTime;
|
|
121
|
+
if (!(duration < 100)) return [3 /*break*/, 3];
|
|
122
|
+
console.info('promise delay...');
|
|
123
|
+
return [4 /*yield*/, new Promise(function (r) { return setTimeout(r, 100); })];
|
|
124
|
+
case 2:
|
|
125
|
+
_a.sent();
|
|
126
|
+
_a.label = 3;
|
|
127
|
+
case 3: return [2 /*return*/, data];
|
|
128
|
+
}
|
|
129
|
+
});
|
|
130
|
+
}); };
|
|
131
|
+
var bindDataToTable = function (dataTable) {
|
|
132
|
+
// @ts-ignore
|
|
133
|
+
var data = tslib_1.__spreadArray([], dataTable, true);
|
|
134
|
+
setDataTable(data);
|
|
135
|
+
setSearchDataResult(data);
|
|
136
|
+
};
|
|
137
|
+
var _1 = (0, react_2.useState)(false), isChangePageLoading = _1[0], setIsChangePageLoading = _1[1];
|
|
138
|
+
var _2 = (0, react_2.useState)(''), previousValue = _2[0], setPreviousValue = _2[1];
|
|
139
|
+
var _3 = (0, react_2.useState)(1), currentPage = _3[0], setCurrentPage = _3[1];
|
|
140
|
+
var handleChangePage = function (page) {
|
|
141
|
+
if (page > 0 && page <= Math.ceil(count / rowQuantity)) {
|
|
142
|
+
setIsChangePageLoading(true);
|
|
143
|
+
setCurrentPage(page);
|
|
144
|
+
setPagi(page - 1);
|
|
145
|
+
paginationData(page - 1);
|
|
146
|
+
}
|
|
147
|
+
};
|
|
148
|
+
(0, react_2.useLayoutEffect)(function () {
|
|
149
|
+
var isIndeterminate = selectedPeople.length > 0 && selectedPeople.length < dataTable.length;
|
|
150
|
+
setChecked(selectedPeople.length === dataTable.length && dataTable.length > 0);
|
|
151
|
+
setIndeterminate(isIndeterminate);
|
|
152
|
+
// @ts-ignore
|
|
153
|
+
if (checkbox.current) {
|
|
154
|
+
checkbox.current.indeterminate = isIndeterminate;
|
|
155
|
+
}
|
|
156
|
+
}, [selectedPeople]);
|
|
157
|
+
function toggleAll() {
|
|
158
|
+
// @ts-ignore
|
|
159
|
+
if (searchValue) {
|
|
160
|
+
setSelectedPeople(checked || indeterminate ? [] : searchDataResult.filter(function (item) { return !(item === null || item === void 0 ? void 0 : item.entered_school); }));
|
|
161
|
+
}
|
|
162
|
+
else {
|
|
163
|
+
setSelectedPeople(checked || indeterminate ? [] : dataTable.filter(function (item) { return !(item === null || item === void 0 ? void 0 : item.entered_school); }));
|
|
164
|
+
}
|
|
165
|
+
if (onChange)
|
|
166
|
+
onChange(checked || indeterminate ? [] : dataTable.filter(function (item) { return !(item === null || item === void 0 ? void 0 : item.entered_school); }));
|
|
167
|
+
setChecked(!checked && !indeterminate);
|
|
168
|
+
setIndeterminate(false);
|
|
169
|
+
}
|
|
170
|
+
function brSetSelectedPeople(value) {
|
|
171
|
+
setSelectedPeople(value);
|
|
172
|
+
}
|
|
173
|
+
function renderInclude(person) {
|
|
174
|
+
// @ts-ignore
|
|
175
|
+
return selectedPeople.includes(person);
|
|
176
|
+
}
|
|
177
|
+
function searchChange(e) {
|
|
178
|
+
var value = e.target.value;
|
|
179
|
+
// Loại bỏ ký tự "\" từ chuỗi
|
|
180
|
+
var replaceSensitiveValue = value.replace(/\\/g, '');
|
|
181
|
+
setSearchValue(replaceSensitiveValue);
|
|
182
|
+
paginationData(0);
|
|
183
|
+
if (replaceSensitiveValue !== previousValue) {
|
|
184
|
+
setPreviousValue(replaceSensitiveValue);
|
|
185
|
+
}
|
|
186
|
+
if (replaceSensitiveValue.trim().length === 0) {
|
|
187
|
+
setSearchDataResult(dataTable);
|
|
188
|
+
}
|
|
189
|
+
setCurrentPage(1);
|
|
190
|
+
}
|
|
191
|
+
var debouncedSearch = (0, useDebounce_1["default"])(searchValue, 300);
|
|
192
|
+
var sortOnChange = function (item) {
|
|
193
|
+
var isChangeSort = item.id !== activeMenu;
|
|
194
|
+
setIsSort(true);
|
|
195
|
+
sortData(item.field, item.sortDirection);
|
|
196
|
+
setActiveMenu(item.id);
|
|
197
|
+
if (isChangeSort) {
|
|
198
|
+
setIsSortLoading(true);
|
|
199
|
+
}
|
|
200
|
+
};
|
|
201
|
+
var sortSelectOnchange = function (item, columnName) {
|
|
202
|
+
var isChangeSort = item.id !== activeMenu;
|
|
203
|
+
setActiveMenu(item.id);
|
|
204
|
+
sortSelectData(item, columnName);
|
|
205
|
+
setIsSelectSort(true);
|
|
206
|
+
if (isChangeSort) {
|
|
207
|
+
setIsSortLoading(true);
|
|
208
|
+
}
|
|
209
|
+
};
|
|
210
|
+
var actionClickAll = function () {
|
|
211
|
+
actionName(selectedPeople, true);
|
|
212
|
+
};
|
|
213
|
+
var checkConditionRouter = function (rowData) {
|
|
214
|
+
if (routerCondition.conditionArray.some(function (item) { return item === rowData[routerCondition.conditionName]; })) {
|
|
215
|
+
return true;
|
|
216
|
+
}
|
|
217
|
+
return false;
|
|
218
|
+
};
|
|
219
|
+
var handleSearch = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
|
|
220
|
+
var data, dataTable, countPage;
|
|
221
|
+
return tslib_1.__generator(this, function (_a) {
|
|
222
|
+
switch (_a.label) {
|
|
223
|
+
case 0:
|
|
224
|
+
setIsSearchLoading(true);
|
|
225
|
+
return [4 /*yield*/, getData(graphqlEndpoint && authTokenInfo ? remoteListSearchQuery : fetchSearchData)];
|
|
226
|
+
case 1:
|
|
227
|
+
data = _a.sent();
|
|
228
|
+
dataTable = search.keyResult;
|
|
229
|
+
countPage = search.keyResult + '_aggregate';
|
|
230
|
+
setCount(data[countPage].aggregate.count);
|
|
231
|
+
if (setAggregate) {
|
|
232
|
+
setAggregate(data[countPage].aggregate.count);
|
|
233
|
+
}
|
|
234
|
+
if (previousValue !== searchValue) {
|
|
235
|
+
setCurrentPage(1);
|
|
236
|
+
}
|
|
237
|
+
setSearchDataResult(data[dataTable]);
|
|
238
|
+
setIsSearchLoading(false);
|
|
239
|
+
setIsChangeRowQty(false);
|
|
240
|
+
// khi search sẽ reset những row đã select
|
|
241
|
+
setSelectedPeople([]);
|
|
242
|
+
return [2 /*return*/];
|
|
243
|
+
}
|
|
244
|
+
});
|
|
245
|
+
}); };
|
|
246
|
+
var queryData = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
|
|
247
|
+
var data, dataTable_1, countPage, e_1;
|
|
248
|
+
return tslib_1.__generator(this, function (_a) {
|
|
249
|
+
switch (_a.label) {
|
|
250
|
+
case 0:
|
|
251
|
+
_a.trys.push([0, 2, , 3]);
|
|
252
|
+
return [4 /*yield*/, getData(graphqlEndpoint && authTokenInfo ? dataQuery : dataQuery)];
|
|
253
|
+
case 1:
|
|
254
|
+
data = _a.sent();
|
|
255
|
+
if (!data)
|
|
256
|
+
return [2 /*return*/];
|
|
257
|
+
setIsMainLoading(true);
|
|
258
|
+
dataTable_1 = list.keyResult;
|
|
259
|
+
countPage = list.keyResult + '_aggregate';
|
|
260
|
+
bindDataToTable(data[dataTable_1]);
|
|
261
|
+
setCount(data[countPage].aggregate.count);
|
|
262
|
+
if (setAggregate) {
|
|
263
|
+
setAggregate(data[countPage].aggregate.count);
|
|
264
|
+
}
|
|
265
|
+
setIsMainLoading(false);
|
|
266
|
+
if (setHeaderLoading)
|
|
267
|
+
setHeaderLoading();
|
|
268
|
+
setIsSearchLoading(false);
|
|
269
|
+
setIsChangePageLoading(false);
|
|
270
|
+
setIsChangeRowQty(false);
|
|
271
|
+
if (setAggregate) {
|
|
272
|
+
setAggregate(data[countPage].aggregate.count);
|
|
273
|
+
}
|
|
274
|
+
return [3 /*break*/, 3];
|
|
275
|
+
case 2:
|
|
276
|
+
e_1 = _a.sent();
|
|
277
|
+
console.log(e_1);
|
|
278
|
+
return [3 /*break*/, 3];
|
|
279
|
+
case 3: return [2 /*return*/];
|
|
280
|
+
}
|
|
281
|
+
});
|
|
282
|
+
}); };
|
|
283
|
+
(0, react_2.useEffect)(function () {
|
|
284
|
+
if (searchValue === '') {
|
|
285
|
+
queryData();
|
|
286
|
+
}
|
|
287
|
+
else if (debouncedSearch) {
|
|
288
|
+
handleSearch();
|
|
289
|
+
}
|
|
290
|
+
}, [pagi, sort, debouncedSearch]);
|
|
291
|
+
(0, react_2.useEffect)(function () {
|
|
292
|
+
if (pagination) {
|
|
293
|
+
setCurrentPage(pagination + 1);
|
|
294
|
+
}
|
|
295
|
+
}, [pagination]);
|
|
296
|
+
(0, react_2.useEffect)(function () {
|
|
297
|
+
if (dataTable) {
|
|
298
|
+
setIsSortLoading(false);
|
|
299
|
+
}
|
|
300
|
+
}, [dataTable]);
|
|
301
|
+
(0, react_2.useEffect)(function () {
|
|
302
|
+
if ((!isChangePageLoading && filterLoading) || isChangeRowQty) {
|
|
303
|
+
queryData();
|
|
304
|
+
setIsMainLoading(true);
|
|
305
|
+
setSelectedPeople([]);
|
|
306
|
+
}
|
|
307
|
+
if (search && search.enable && isChangePageLoading)
|
|
308
|
+
setIsSearchLoading(true);
|
|
309
|
+
}, [list, queryWithLimitSelected]);
|
|
310
|
+
return (react_2["default"].createElement(apollo_wrapper_1.ApolloWrapper, null, isMainLoading ? (react_2["default"].createElement(Skeleton_1.PHXSkeleton, { filterQty: typeLoading === null || typeLoading === void 0 ? void 0 : typeLoading.filterQty, reportQty: typeLoading === null || typeLoading === void 0 ? void 0 : typeLoading.reportQty, type: typeLoading.type })) : (react_2["default"].createElement(react_2["default"].Fragment, null,
|
|
311
|
+
react_2["default"].createElement("div", { className: 'rounded-lg bg-white shadow ring-1 ring-black ring-opacity-5' },
|
|
312
|
+
react_2["default"].createElement("div", { className: 'flex flex-col' },
|
|
313
|
+
(dataTable.length > 0 ||
|
|
314
|
+
(dataTable.length === 0 && isSearch) ||
|
|
315
|
+
(dataTable.length === 0 && isSelectSort) ||
|
|
316
|
+
(dataTable.length === 0 && isSort)) && (react_2["default"].createElement("div", { className: 'min-w-full align-middle' },
|
|
317
|
+
react_2["default"].createElement(react_1.Transition, { as: react_2.Fragment, enter: 'transition-all duration-500 overflow-hidden', enterFrom: 'transform scale-95 opacity-0 h-0', enterTo: 'transform scale-100 opacity-100 h-full', leaveFrom: 'transform scale-100 opacity-100 h-full', leaveTo: 'transform scale-95 opacity-0 h-0', show: isSearch },
|
|
318
|
+
react_2["default"].createElement("div", { className: (0, types_1.classNames)('flex flex-row items-center justify-center rounded-tl-lg rounded-tr-lg border-b bg-white px-3 py-1 pl-5 ring-opacity-5', !sort || !sort.enable ? 'mb-2' : '') },
|
|
319
|
+
react_2["default"].createElement("div", { className: 'relative mr-2 w-11/12' },
|
|
320
|
+
react_2["default"].createElement("input", { autoFocus: true, className: 'block w-full rounded-lg border-transparent bg-transparent text-xs hover:bg-gray-100 focus:border-indigo-800 focus:bg-gray-100 focus:ring-indigo-800', id: 'search-value', name: 'search-value', onInput: searchChange, placeholder: timKiemPlacholder, type: 'text', value: searchValue })),
|
|
321
|
+
react_2["default"].createElement("div", { className: 'flex w-14 justify-center pt-1' }, isSearchLoading ? react_2["default"].createElement(Loading_1.PHXSpinner, null) : null),
|
|
322
|
+
react_2["default"].createElement("div", null,
|
|
323
|
+
react_2["default"].createElement("button", { className: 'inline-flex items-center rounded-lg border-gray-300 px-2 py-1 text-xs font-medium text-gray-700 hover:bg-gray-200', onClick: function () {
|
|
324
|
+
setIsSearch(false);
|
|
325
|
+
setSearchValue('');
|
|
326
|
+
if (searchValue) {
|
|
327
|
+
setSelectedPeople([]);
|
|
328
|
+
}
|
|
329
|
+
}, type: 'button' }, "Cancel")))),
|
|
330
|
+
react_2["default"].createElement("div", { className: (0, types_1.classNames)((sort && sort.enable) || (search && search.enable)
|
|
331
|
+
? "mb-2 flex flex-row items-center rounded-tl-lg rounded-tr-lg bg-white px-3 py-1.5 pl-8 ring-opacity-5 ".concat(sort && sort.enable ? 'sm:justify-between' : 'sm:justify-end')
|
|
332
|
+
: '', isSearch && (!sort || !sort.enable) ? 'hidden' : '') },
|
|
333
|
+
sort && sort.enable ? (react_2["default"].createElement(react_2["default"].Fragment, null,
|
|
334
|
+
react_2["default"].createElement(sort_1["default"], { activeMenu: activeMenu, className: 'w-11/12', isSearch: isSearch, onChange: sortOnChange, onChangeSelect: sortSelectOnchange, selectArray: selectArray, sortList: sort.sortList }),
|
|
335
|
+
react_2["default"].createElement("div", { className: 'flex justify-center pt-1 lg:w-14' }, isSortLoading ? react_2["default"].createElement(Loading_1.PHXSpinner, null) : null))) : null,
|
|
336
|
+
!isSearch && (react_2["default"].createElement("div", { className: 'flex justify-center' }, isChangePageLoading ? react_2["default"].createElement(Loading_1.PHXSpinner, null) : null)),
|
|
337
|
+
search && search.enable && (react_2["default"].createElement("div", null, !isSearch && (react_2["default"].createElement("button", { className: 'ml-1 flex rounded-lg bg-white px-2 py-1 text-xs font-normal text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 active:bg-gray-200 active:pb-[0.2rem] active:pt-[0.3rem] active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset] sm:ml-0', onClick: function () { return setIsSearch(true); }, type: 'button' },
|
|
338
|
+
react_2["default"].createElement(solid_1.MagnifyingGlassIcon, { className: 'mr-1 h-4 w-4' }),
|
|
339
|
+
react_2["default"].createElement(solid_1.Bars3CenterLeftIcon, { className: 'h-4 w-4' })))))))),
|
|
340
|
+
dataTable.length > 0 ? (react_2["default"].createElement("div", null, searchDataResult.length > 0 && !isMainLoading ? (react_2["default"].createElement("div", { className: '-my-2 overflow-x-auto' },
|
|
341
|
+
react_2["default"].createElement("div", { className: (0, types_1.classNames)('min-w-full pb-2 align-middle shadow ring-black ring-opacity-5', (search && search.enable) || (sort && sort.enable) ? '' : 'pt-0.5') },
|
|
342
|
+
react_2["default"].createElement("div", { className: (0, types_1.classNames)('relative overflow-auto', (search && search.enable) || (sort && sort.enable)
|
|
343
|
+
? 'ring-1 ring-black ring-opacity-5'
|
|
344
|
+
: 'mt-1.5') },
|
|
345
|
+
react_2["default"].createElement(react_2["default"].Fragment, null, selectedAllPeople && selectedAllPeople.enable ? (react_2["default"].createElement(react_2["default"].Fragment, null, selectedPeople.length > 0 && selectedAllPeople.title && (react_2["default"].createElement("div", { className: 'absolute left-12 top-4 flex h-fit items-center space-x-3 bg-gray-50 sm:left-16' },
|
|
346
|
+
react_2["default"].createElement(Button_1.PHXButton, { onClick: actionClickAll, secondary: true, size: 'micro' }, selectedAllPeople.title))))) : null),
|
|
347
|
+
react_2["default"].createElement("table", { className: (0, types_1.classNames)(fixedTableLayout ? 'table-fixed' : '', (search && search.enable) || (sort && sort.enable) ? 'border-t' : '',
|
|
348
|
+
// @ts-ignore
|
|
349
|
+
thHeader.length < 5
|
|
350
|
+
? "w-full ".concat((selectedPeople === null || selectedPeople === void 0 ? void 0 : selectedPeople.length) === 0 || selectedAllPeople.title
|
|
351
|
+
? 'divide-y divide-gray-300'
|
|
352
|
+
: '')
|
|
353
|
+
: "min-w-full ".concat((selectedPeople === null || selectedPeople === void 0 ? void 0 : selectedPeople.length) === 0 || selectedAllPeople.title
|
|
354
|
+
? 'divide-y divide-gray-300'
|
|
355
|
+
: '')) },
|
|
356
|
+
selectedPeople.length > 0 && (react_2["default"].createElement("div", { className: 'absolute top-0 min-w-full border-b bg-gray-50 px-2 py-1' },
|
|
357
|
+
react_2["default"].createElement("div", { className: 'flex items-center justify-between' },
|
|
358
|
+
react_2["default"].createElement("p", { className: 'mb-1 ml-14 text-xs font-medium text-gray-900' },
|
|
359
|
+
"\u0110\u00E3 ch\u1ECDn ", selectedPeople === null || selectedPeople === void 0 ? void 0 :
|
|
360
|
+
selectedPeople.length,
|
|
361
|
+
" ",
|
|
362
|
+
slectedTitle),
|
|
363
|
+
react_2["default"].createElement("div", { className: 'flex justify-end gap-2' }, selectedBtn === null || selectedBtn === void 0 ? void 0 : selectedBtn.map(function (item, index) { return (react_2["default"].createElement(Button_1.PHXButton, { key: index, deleted: item.type === 'danger', onClick: function () { return item.onClick(selectedPeople); }, secondary: item.type === 'secondary', size: 'micro' }, item.content)); }))))),
|
|
364
|
+
thHeaderComponent ? (thHeaderComponent) : (react_2["default"].createElement("thead", null,
|
|
365
|
+
react_2["default"].createElement("tr", null,
|
|
366
|
+
selectedAllPeople && selectedAllPeople.enable ? (react_2["default"].createElement("th", { className: 'relative w-12 rounded-lg bg-gray-50 px-6 sm:w-16 sm:px-8', scope: 'col' },
|
|
367
|
+
react_2["default"].createElement("input", { ref: checkbox, checked: checked, className: 'absolute left-4 top-1/2 -mt-2 block h-4 w-4 rounded border-[0.5px] border-gray-500 text-indigo-800 hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent sm:left-6', onChange: toggleAll, type: 'checkbox' }))) : null,
|
|
368
|
+
numericalOrder.enable && (react_2["default"].createElement("th", { key: 'stt', className: (0, types_1.classNames)('min-w-[135px] bg-gray-50 px-3 py-2 pl-8 text-left align-top text-xs font-medium text-gray-500'), scope: 'col' }, numericalOrder.title)),
|
|
369
|
+
thHeader.map(function (item, index) {
|
|
370
|
+
return index === 0 ? (react_2["default"].createElement("th", { key: index, className: (0, types_1.classNames)('min-w-[160px] rounded-lg bg-gray-50 px-3 py-2 pl-8 text-left align-top text-xs font-medium text-gray-500', selectedAllPeople && selectedAllPeople.enable ? '' : 'rounded-lg'), scope: 'col' }, item)) : (react_2["default"].createElement("th", { key: index, className: (0, types_1.classNames)('min-w-[135px] bg-gray-50 px-3 py-2 pl-8 text-left align-top text-xs font-medium text-gray-500', index === thHeader.length - 1 && 'rounded-lg'), scope: 'col' }, item));
|
|
371
|
+
})))),
|
|
372
|
+
react_2["default"].createElement("tbody", { className: 'divide-y divide-gray-200' }, searchValue === ''
|
|
373
|
+
? dataTable.map(function (item, index) { return (
|
|
374
|
+
// @ts-ignore
|
|
375
|
+
react_2["default"].createElement("tr", { key: item.id, className: (0, types_1.classNames)(clickRow ? 'hover:cursor-pointer hover:bg-gray-50' : '', renderInclude(item) && !(item === null || item === void 0 ? void 0 : item.entered_school) ? 'bg-gray-50' : ''), onClick: function () {
|
|
376
|
+
if (clickRow) {
|
|
377
|
+
if (routerCondition) {
|
|
378
|
+
// eslint-disable-next-line no-unused-expressions
|
|
379
|
+
checkConditionRouter(item)
|
|
380
|
+
? router.push("".concat(routerCondition.link).concat(item.id))
|
|
381
|
+
: router.push("".concat(editActionLink).concat(item.id));
|
|
382
|
+
}
|
|
383
|
+
else if (clickType === 'edit') {
|
|
384
|
+
router.push("".concat(editActionLink).concat(item.id));
|
|
385
|
+
}
|
|
386
|
+
else {
|
|
387
|
+
// @ts-ignore
|
|
388
|
+
onClick(item);
|
|
389
|
+
}
|
|
390
|
+
}
|
|
391
|
+
} }, thBody.map(function (bodyItem, bodyIndex) { return (react_2["default"].createElement(RowTable_1.RowTable, { numericalOrder: tslib_1.__assign(tslib_1.__assign({}, numericalOrder), { order: pagi * 10 + index + 1 }), key: bodyIndex, bodyIndex: bodyIndex, brSetSelectedPeople: brSetSelectedPeople, editActionLink: editActionLink, itemBody: item, onChange: onChange, selectedAllPeople: selectedAllPeople, selectedPeople: selectedPeople, thBody: thBody, thBodyComponent: thBodyComponent, thBodyFilter: thBodyFilter, directDetail: directDetail })); }))); })
|
|
392
|
+
: searchDataResult.map(function (item, index) { return (
|
|
393
|
+
// @ts-ignore
|
|
394
|
+
react_2["default"].createElement("tr", { key: item.id, className: (0, types_1.classNames)(clickRow ? 'hover:cursor-pointer hover:bg-gray-50' : '', renderInclude(item) && !(item === null || item === void 0 ? void 0 : item.entered_school) ? 'bg-gray-50' : ''), onClick: function () {
|
|
395
|
+
if (clickRow) {
|
|
396
|
+
if (routerCondition) {
|
|
397
|
+
// eslint-disable-next-line no-unused-expressions
|
|
398
|
+
checkConditionRouter(item)
|
|
399
|
+
? router.push("".concat(routerCondition.link).concat(item.id))
|
|
400
|
+
: router.push("".concat(editActionLink).concat(item.id));
|
|
401
|
+
}
|
|
402
|
+
else if (clickType === 'edit') {
|
|
403
|
+
router.push("".concat(editActionLink).concat(item.id));
|
|
404
|
+
}
|
|
405
|
+
else {
|
|
406
|
+
// @ts-ignore
|
|
407
|
+
onClick(item);
|
|
408
|
+
}
|
|
409
|
+
}
|
|
410
|
+
} }, thBody.map(function (bodyItem, bodyIndex) { return (react_2["default"].createElement(RowTable_1.RowTable, { numericalOrder: tslib_1.__assign(tslib_1.__assign({}, numericalOrder), { order: pagi * 10 + index + 1 }), key: bodyIndex, bodyIndex: bodyIndex, brSetSelectedPeople: brSetSelectedPeople, editActionLink: editActionLink, itemBody: item, selectedAllPeople: selectedAllPeople, selectedPeople: selectedPeople, thBody: thBody, thBodyComponent: thBodyComponent, thBodyFilter: thBodyFilter, directDetail: directDetail })); }))); }))))))) : (react_2["default"].createElement(EmptySearchResult_1["default"], null)))) : (dataTable.length === 0 && isSearch) ||
|
|
411
|
+
(dataTable.length === 0 && isSelectSort) ||
|
|
412
|
+
(dataTable.length === 0 && isSort) ? (react_2["default"].createElement(EmptySearchResult_1["default"], null)) : (react_2["default"].createElement(EmptyRecord_1.PHXEmptyRecord, null))),
|
|
413
|
+
dataTable.length > 0 && !hidePagination && (react_2["default"].createElement("div", { className: 'flex items-center justify-between rounded-lg rounded-tl-none rounded-tr-none border-t border-gray-200 bg-[#F9FAFB] py-2 pl-7 pr-2' },
|
|
414
|
+
react_2["default"].createElement(PaginaitonSelected_1["default"], { rowQuantity: rowQuantity, setIsChangeRowQty: setIsChangeRowQty, setRowQuantity: setRowQuantity }),
|
|
415
|
+
react_2["default"].createElement(Pagination_1["default"], { pagination: pagination, rowQuantity: rowQuantity, count: count, currentPage: currentPage, handleChangePage: handleChangePage, totalPages: Math.ceil(count / rowQuantity) }))))))));
|
|
416
|
+
}
|
|
417
|
+
exports.PHXTable = PHXTable;
|
|
418
|
+
//# sourceMappingURL=TableV3.js.map
|