phx-react
Version:
PHX REACT
503 lines • 40.8 kB
JavaScript
"use strict";
'use client';
exports.__esModule = true;
exports.PHXTableV3 = void 0;
var tslib_1 = require("tslib");
var react_1 = require("@headlessui/react");
var solid_1 = require("@heroicons/react/24/solid");
var react_2 = tslib_1.__importStar(require("react"));
var Button_1 = require("../Button");
var EmptyRecord_1 = require("../EmptyRecord");
var useDebounce_1 = tslib_1.__importDefault(require("../Func/useDebounce"));
var Loading_1 = require("../Loading");
var Skeleton_1 = require("../Skeleton");
var types_1 = require("../types");
var clientQueryV3_1 = tslib_1.__importDefault(require("../Func/clientQueryV3"));
var clientQueryDataCenterV3_1 = tslib_1.__importDefault(require("../Func/clientQueryDataCenterV3"));
var sort_1 = tslib_1.__importDefault(require("./sort"));
var RowTable_1 = require("./RowTable");
var EmptySearchResult_1 = tslib_1.__importDefault(require("./EmptySearchResult"));
var PaginaitonSelected_1 = tslib_1.__importDefault(require("./PaginaitonSelected"));
var Pagination_1 = tslib_1.__importDefault(require("./Pagination"));
var EmptyStateAction_1 = require("../EmptyStateAction");
var HeaderTable_1 = tslib_1.__importDefault(require("./HeaderTable"));
var SelectedAction_1 = tslib_1.__importDefault(require("./SelectedAction"));
var helpers_1 = require("../../helpers/helpers");
var useStickyLeft_1 = require("../TableVertical/useStickyLeft");
function PHXTableV3(_a) {
var _this = this;
var actionName = _a.actionName, _b = _a.clickRow, clickRow = _b === void 0 ? true : _b, _c = _a.clickType, clickType = _c === void 0 ? 'edit' : _c, directDetail = _a.directDetail, editActionLink = _a.editActionLink, _d = _a.filterLoading, filterLoading = _d === void 0 ? false : _d, _e = _a.fixedTableLayout, fixedTableLayout = _e === void 0 ? true : _e, hidePagination = _a.hidePagination, isQueryDataCenter = _a.isQueryDataCenter, list = _a.list, _f = _a.numericalOrder, numericalOrder = _f === void 0 ? {
enable: false,
title: 'STT',
disableSpacing: false,
sticky: false
} : _f, onChange = _a.onChange, onClick = _a.onClick, pagination = _a.pagination, paginationData = _a.paginationData, router = _a.router, routerCondition = _a.routerCondition, _g = _a.rowNumber, rowNumber = _g === void 0 ? 10 : _g, search = _a.search, selectArray = _a.selectArray, selectedAllPeople = _a.selectedAllPeople, selectedBtn = _a.selectedBtn, setAggregate = _a.setAggregate, setHeaderLoading = _a.setHeaderLoading, slectedTitle = _a.slectedTitle, sort = _a.sort, sortData = _a.sortData, sortSelectData = _a.sortSelectData, thBody = _a.thBody, thBodyComponent = _a.thBodyComponent, thBodyFilter = _a.thBodyFilter, thHeader = _a.thHeader, thHeaderComponent = _a.thHeaderComponent, _h = _a.typeLoading, typeLoading = _h === void 0 ? { type: 'table' } : _h, _j = _a.isSortEmpty, isSortEmpty = _j === void 0 ? true : _j, _k = _a.emptyStateAction, emptyStateAction = _k === void 0 ? {
enable: false,
title: '',
description: '',
buttonContent: '',
buttonType: 'primary',
onAction: function () { return console.log('action'); }
} : _k, _l = _a.isCustomHeaderSelected, isCustomHeaderSelected = _l === void 0 ? false : _l, _m = _a.isUnaccentSearchValue, isUnaccentSearchValue = _m === void 0 ? false : _m, _o = _a.disableSpacing, disableSpacing = _o === void 0 ? { disable: false, indexStart: 0 } : _o, _p = _a.border, border = _p === void 0 ? false : _p, _q = _a.isCenterText, isCenterText = _q === void 0 ? false : _q, searchValueData = _a.searchValueData, _r = _a.stickyColumnNumber, stickyColumnNumber = _r === void 0 ? 0 : _r, getDataTable = _a.getDataTable, _s = _a.stickyColumnNumberRight, stickyColumnNumberRight = _s === void 0 ? 0 : _s, _t = _a.isBackgroundReload, isBackgroundReload = _t === void 0 ? false : _t, loaded = _a.loaded, _u = _a.isResetPagination, isResetPagination = _u === void 0 ? false : _u, _v = _a.tableKey, tableKey = _v === void 0 ? 'table' : _v, searchParams = _a.searchParams;
var checkbox = (0, react_2.useRef)();
var _w = (0, react_2.useState)(false), checked = _w[0], setChecked = _w[1];
var _x = (0, react_2.useState)(false), indeterminate = _x[0], setIndeterminate = _x[1];
var _y = (0, react_2.useState)(true), isMainLoading = _y[0], setIsMainLoading = _y[1];
var _z = (0, react_2.useState)([]), dataTable = _z[0], setDataTable = _z[1];
var _0 = (0, react_2.useState)(''), searchValue = _0[0], setSearchValue = _0[1];
var _1 = (0, react_2.useState)([]), selectedPeople = _1[0], setSelectedPeople = _1[1];
var _2 = (0, react_2.useState)(false), isSearchLoading = _2[0], setIsSearchLoading = _2[1];
var _3 = (0, react_2.useState)([]), searchDataResult = _3[0], setSearchDataResult = _3[1];
var _4 = (0, react_2.useState)(0), pagi = _4[0], setPagi = _4[1];
var _5 = (0, react_2.useState)(0), count = _5[0], setCount = _5[1];
var timKiemPlacholder = 'Tìm kiếm';
var _6 = (0, react_2.useState)(false), isSearch = _6[0], setIsSearch = _6[1];
var _7 = (0, react_2.useState)(sort === null || sort === void 0 ? void 0 : sort.defaultActive), activeMenu = _7[0], setActiveMenu = _7[1];
var _8 = (0, react_2.useState)(false), isSelectSort = _8[0], setIsSelectSort = _8[1];
var _9 = (0, react_2.useState)(false), isSort = _9[0], setIsSort = _9[1];
var _10 = (0, react_2.useState)(false), isSortLoading = _10[0], setIsSortLoading = _10[1];
var _11 = (0, react_2.useState)(0), numberOfFetchData = _11[0], setNumberOfFetchData = _11[1];
// const [locationSearch, setLocationSearch] = useState(typeof window !== 'undefined' ? window.location.search : '')
var params = new URLSearchParams(searchParams) || new URLSearchParams(window.location.search);
var entries = Object.fromEntries(params.entries());
var _12 = (0, react_2.useState)((entries === null || entries === void 0 ? void 0 : entries["row-".concat(tableKey)]) ? Number(entries === null || entries === void 0 ? void 0 : entries["row-".concat(tableKey)]) : rowNumber), rowQuantity = _12[0], setRowQuantity = _12[1];
var _13 = (0, react_2.useState)(false), isChangeRowQty = _13[0], setIsChangeRowQty = _13[1];
(0, react_2.useEffect)(function () {
if ((entries === null || entries === void 0 ? void 0 : entries["row-".concat(tableKey)]) ? Number(entries === null || entries === void 0 ? void 0 : entries["row-".concat(tableKey)]) !== rowQuantity : rowNumber !== rowQuantity) {
setRowQuantity((entries === null || entries === void 0 ? void 0 : entries["row-".concat(tableKey)]) ? Number(entries === null || entries === void 0 ? void 0 : entries["row-".concat(tableKey)]) : rowNumber);
if (!isChangeRowQty) {
setIsChangeRowQty(true);
}
}
}, [entries === null || entries === void 0 ? void 0 : entries["row-".concat(tableKey)], rowNumber]);
// useEffect(() => {
// if (typeof window !== 'undefined') {
// if (isResetPagination && window.location.search !== locationSearch) {
// params.set(`pagi-${tableKey}`, '1')
// router?.push(`?${params + ''}`)
// }
// setLocationSearch(window.location.search)
// }
// }, [window.location.search, isResetPagination])
var _14 = (0, useStickyLeft_1.useStickyLefts)((numericalOrder === null || numericalOrder === void 0 ? void 0 : numericalOrder.sticky) && selectedAllPeople && selectedAllPeople.enable
? stickyColumnNumber + 2
: (numericalOrder === null || numericalOrder === void 0 ? void 0 : numericalOrder.sticky) || (selectedAllPeople && selectedAllPeople.enable)
? stickyColumnNumber + 1
: stickyColumnNumber, dataTable), lefts = _14.lefts, refs = _14.refs;
var _15 = (0, useStickyLeft_1.useStickyRights)(stickyColumnNumberRight, dataTable), refRights = _15.refs, rights = _15.rights;
var queryHidePagi = list.query ? list.query.replace(/limit\s*:\s*\d+\s*,?|offset\s*:\s*\d+\s*,?/g, '') : '';
var queryWithLimitSelected = list.query
? list.query
.replace(/limit\s*:\s*\d+/g, "limit: ".concat(rowQuantity))
.replace(/offset\s*:\s*\d+/g, "offset: ".concat(pagination * rowQuantity))
: '';
var dataQuery = "\n ".concat(hidePagination ? queryHidePagi : queryWithLimitSelected, "\n ");
var enableEmptyStateAction = emptyStateAction.enable, emptyStateActionAttribute = tslib_1.__rest(emptyStateAction, ["enable"]);
var filterQuery = function (query, value) {
var formatValue = isUnaccentSearchValue ? (0, helpers_1.unaccentValue)(value) : value;
return query.replace(/%@value%/g, "\"\"%".concat(formatValue, "%\"\""));
};
var searchQuery = search && search.query ? filterQuery(search.query, searchValue.trim()) : '';
var searchQueryHidePagi = searchQuery.replace(/limit\s*:\s*\d+\s*,?|offset\s*:\s*\d+\s*,?/g, '');
var searchQueryWithLimitSelected = searchQuery
.replace(/limit\s*:\s*\d+/g, "limit: ".concat(rowQuantity))
.replace(/offset\s*:\s*\d+/g, "offset: ".concat(pagination * rowQuantity));
var searchDataQuery = "\n ".concat(hidePagination ? searchQueryHidePagi : searchQueryWithLimitSelected, "\n ");
var fetchSearchData = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
var error_1;
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0:
_a.trys.push([0, 5, , 6]);
if (!isQueryDataCenter) return [3 /*break*/, 2];
return [4 /*yield*/, (0, clientQueryDataCenterV3_1["default"])({
query: searchDataQuery,
variables: (search === null || search === void 0 ? void 0 : search.persistedId)
? tslib_1.__assign(tslib_1.__assign({}, search === null || search === void 0 ? void 0 : search.variables), { limit: rowQuantity, offset: pagination * rowQuantity }) : {},
persistedId: search === null || search === void 0 ? void 0 : search.persistedId
})];
case 1: return [2 /*return*/, _a.sent()];
case 2: return [4 /*yield*/, (0, clientQueryV3_1["default"])({
query: searchDataQuery,
variables: (search === null || search === void 0 ? void 0 : search.persistedId)
? tslib_1.__assign(tslib_1.__assign({}, search === null || search === void 0 ? void 0 : search.variables), { limit: rowQuantity, offset: pagination * rowQuantity }) : {},
persistedId: search === null || search === void 0 ? void 0 : search.persistedId
})];
case 3: return [2 /*return*/, _a.sent()];
case 4: return [3 /*break*/, 6];
case 5:
error_1 = _a.sent();
console.log(error_1);
return [2 /*return*/];
case 6: return [2 /*return*/];
}
});
}); };
var getData = function (result) { return result.data; };
var bindDataToTable = function (dataTable) {
// @ts-ignore
var data = tslib_1.__spreadArray([], dataTable, true);
setDataTable(data);
setSearchDataResult(data);
};
var _16 = (0, react_2.useState)(false), isChangePageLoading = _16[0], setIsChangePageLoading = _16[1];
var _17 = (0, react_2.useState)(''), previousValue = _17[0], setPreviousValue = _17[1];
var _18 = (0, react_2.useState)(1), currentPage = _18[0], setCurrentPage = _18[1];
var handleChangePage = function (page) {
if (page > 0 && page <= Math.ceil(count / rowQuantity)) {
setIsChangePageLoading(true);
setCurrentPage(page);
setPagi(page - 1);
paginationData(page - 1);
}
};
(0, react_2.useLayoutEffect)(function () {
var isIndeterminate = selectedPeople.length > 0 && selectedPeople.length < dataTable.length;
setChecked(selectedPeople.length === dataTable.length && dataTable.length > 0);
setIndeterminate(isIndeterminate);
// @ts-ignore
if (checkbox.current) {
checkbox.current.indeterminate = isIndeterminate;
}
}, [selectedPeople]);
function toggleAll() {
// @ts-ignore
if (searchValue) {
setSelectedPeople(checked || indeterminate ? [] : searchDataResult.filter(function (item) { return !(item === null || item === void 0 ? void 0 : item.entered_school); }));
}
else {
setSelectedPeople(checked || indeterminate ? [] : dataTable.filter(function (item) { return !(item === null || item === void 0 ? void 0 : item.entered_school); }));
}
if (onChange) {
onChange(checked || indeterminate ? [] : dataTable.filter(function (item) { return !(item === null || item === void 0 ? void 0 : item.entered_school); }));
}
setChecked(!checked && !indeterminate);
setIndeterminate(false);
}
function searchSetValue(value) {
setSearchValue(value);
if (searchValueData) {
var formatValue = isUnaccentSearchValue ? (0, helpers_1.unaccentValue)(value.trim()) : value.trim();
searchValueData(formatValue);
}
}
function brSetSelectedPeople(value) {
var maxSelectedPeople = (selectedAllPeople === null || selectedAllPeople === void 0 ? void 0 : selectedAllPeople.maxSelectedPeople) || 0; // loại bỏ item cũ, chỉ giữ lại số item mới nhất, nếu mặc định là 0 thì giữ nguyên mảng gốc
setSelectedPeople(value.slice(-maxSelectedPeople));
}
function renderInclude(person) {
// @ts-ignore
return selectedPeople.includes(person);
}
function searchChange(e) {
var value = e.target.value;
// Loại bỏ ký tự "\" từ chuỗi
var replaceSensitiveValue = value.replace(/\\/g, '');
searchSetValue(replaceSensitiveValue);
paginationData(0);
if (replaceSensitiveValue !== previousValue) {
setPreviousValue(replaceSensitiveValue);
}
if (replaceSensitiveValue.trim().length === 0) {
setSearchDataResult(dataTable);
}
setCurrentPage(1);
}
var debouncedSearch = (0, useDebounce_1["default"])(searchValue, 300);
var sortOnChange = function (item) {
var isChangeSort = item.id !== activeMenu;
setIsSort(true);
sortData(item.field, item.sortDirection);
setActiveMenu(item.id);
if (isChangeSort) {
setIsSortLoading(true);
}
};
var sortSelectOnchange = function (item, columnName) {
var isChangeSort = item.id !== activeMenu;
setActiveMenu(item.id);
sortSelectData(item, columnName);
setIsSelectSort(true);
if (isChangeSort) {
setIsSortLoading(true);
}
};
var actionClickAll = function () {
actionName(selectedPeople, true);
};
var checkConditionRouter = function (rowData) {
if (routerCondition.conditionArray.some(function (item) { return item === rowData[routerCondition.conditionName]; })) {
return true;
}
return false;
};
var handleSearch = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
var data, _a, dataTable, countPage;
return tslib_1.__generator(this, function (_b) {
switch (_b.label) {
case 0:
setIsSearchLoading(true);
_a = getData;
return [4 /*yield*/, fetchSearchData()];
case 1:
data = _a.apply(void 0, [_b.sent()]);
dataTable = search.keyResult;
countPage = search.keyResult + '_aggregate';
setCount(data[countPage].aggregate.count);
if (setAggregate) {
setAggregate(data[countPage].aggregate.count);
}
if (previousValue !== searchValue) {
setCurrentPage(1);
}
setSearchDataResult(data[dataTable]);
setIsSearchLoading(false);
setIsChangeRowQty(false);
return [2 /*return*/];
}
});
}); };
var paginationWithApplyUrl = function () {
var currentPagination = 1;
if (typeof window !== 'undefined' && !isResetPagination && !isChangeRowQty) {
var entries_1 = Object.fromEntries(params.entries());
currentPagination = (entries_1 === null || entries_1 === void 0 ? void 0 : entries_1["pagi-".concat(tableKey)]) ? Number(entries_1 === null || entries_1 === void 0 ? void 0 : entries_1["pagi-".concat(tableKey)]) || 1 : 1;
}
if (!isChangePageLoading && !hidePagination && !isChangeRowQty) {
setCurrentPage(currentPagination);
setPagi(currentPagination - 1);
paginationData(currentPagination - 1);
}
return currentPagination;
};
var queryData = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
var query, currentPagination, queryWithCurrentPagination, data, _a, _b, dataTable_1, countPage, e_1;
return tslib_1.__generator(this, function (_c) {
switch (_c.label) {
case 0:
query = dataQuery;
currentPagination = paginationWithApplyUrl();
if (!isChangePageLoading) {
queryWithCurrentPagination = list.query
? list.query
.replace(/limit\s*:\s*\d+/g, "limit: ".concat(rowQuantity))
.replace(/offset\s*:\s*\d+/g, "offset: ".concat((currentPagination - 1) * rowQuantity))
: '';
query = hidePagination ? queryHidePagi : queryWithCurrentPagination;
}
_c.label = 1;
case 1:
_c.trys.push([1, 6, , 7]);
_a = getData;
if (!isQueryDataCenter) return [3 /*break*/, 3];
return [4 /*yield*/, (0, clientQueryDataCenterV3_1["default"])({
query: query,
variables: (list === null || list === void 0 ? void 0 : list.persistedId)
? tslib_1.__assign(tslib_1.__assign({}, list === null || list === void 0 ? void 0 : list.variables), { limit: rowQuantity, offset: !isChangePageLoading ? (currentPagination - 1) * rowQuantity : pagination * rowQuantity }) : {},
persistedId: list === null || list === void 0 ? void 0 : list.persistedId
})];
case 2:
_b = _c.sent();
return [3 /*break*/, 5];
case 3: return [4 /*yield*/, (0, clientQueryV3_1["default"])({
query: query,
variables: (list === null || list === void 0 ? void 0 : list.persistedId)
? tslib_1.__assign(tslib_1.__assign({}, list === null || list === void 0 ? void 0 : list.variables), { limit: rowQuantity, offset: !isChangePageLoading ? (currentPagination - 1) * rowQuantity : pagination * rowQuantity }) : {},
persistedId: list === null || list === void 0 ? void 0 : list.persistedId
})];
case 4:
_b = _c.sent();
_c.label = 5;
case 5:
data = _a.apply(void 0, [_b]);
if (!data)
return [2 /*return*/];
if (!isBackgroundReload || (numberOfFetchData === 0 && isBackgroundReload)) {
setIsMainLoading(true);
}
dataTable_1 = list.keyResult;
countPage = list.keyResult + '_aggregate';
bindDataToTable(data[dataTable_1]);
setCount(data[countPage].aggregate.count);
if (setAggregate) {
setAggregate(data[countPage].aggregate.count);
}
setIsMainLoading(false);
if (setHeaderLoading)
setHeaderLoading();
setIsSearchLoading(false);
setIsChangePageLoading(false);
setIsChangeRowQty(false);
setNumberOfFetchData(numberOfFetchData + 1);
loaded === null || loaded === void 0 ? void 0 : loaded(true);
return [3 /*break*/, 7];
case 6:
e_1 = _c.sent();
console.log(e_1);
return [3 /*break*/, 7];
case 7: return [2 /*return*/];
}
});
}); };
(0, react_2.useEffect)(function () {
if (searchValue === '') {
queryData();
}
else if (debouncedSearch) {
handleSearch();
}
}, [pagi, debouncedSearch]);
(0, react_2.useEffect)(function () {
if (!isNaN(Number(pagination))) {
setCurrentPage(Number(pagination) + 1);
}
}, [pagination]);
(0, react_2.useEffect)(function () {
if (dataTable) {
setIsSortLoading(false);
}
if (getDataTable && dataTable.length) {
getDataTable(dataTable);
}
}, [dataTable]);
(0, react_2.useEffect)(function () {
if ((!isChangePageLoading && filterLoading && !isSortLoading) || isChangeRowQty) {
queryData();
if (!isBackgroundReload || (numberOfFetchData === 0 && isBackgroundReload)) {
setIsMainLoading(true);
}
setSelectedPeople([]);
}
if (search && search.enable && isChangePageLoading) {
setIsSearchLoading(true);
}
}, [list, queryWithLimitSelected, rowQuantity]);
(0, react_2.useEffect)(function () {
if (isSortLoading) {
queryData();
setSelectedPeople([]);
}
}, [sort]);
var funcItemReadOnly = thBodyComponent ? thBodyComponent === null || thBodyComponent === void 0 ? void 0 : thBodyComponent.readOnly : null;
var onClickItem = function (item) {
if (onClick && (!funcItemReadOnly || (funcItemReadOnly && !funcItemReadOnly(item)))) {
onClick(item);
}
};
return (react_2["default"].createElement(react_2["default"].Fragment, 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,
react_2["default"].createElement("div", { className: 'rounded-lg border border-gray-300 border-opacity-70 bg-white shadow-sm' },
react_2["default"].createElement("div", { className: 'flex flex-col' },
(dataTable.length > 0 ||
(dataTable.length === 0 && isSearch) ||
(dataTable.length === 0 && isSelectSort) ||
(dataTable.length === 0 && isSort) ||
(dataTable.length === 0 && (sort === null || sort === void 0 ? void 0 : sort.enable))) && (react_2["default"].createElement("div", { className: (0, types_1.classNames)(isSortEmpty && dataTable.length === 0 ? 'hidden' : 'min-w-full align-middle') },
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 },
react_2["default"].createElement("div", { className: (0, types_1.classNames)('flex flex-row items-center justify-center rounded-tl-lg rounded-tr-lg bg-white px-3 py-1 pl-5 ring-opacity-5', !sort || !sort.enable ? 'mb-2' : '', searchDataResult.length === 0 && 'border-b') },
react_2["default"].createElement("div", { className: 'relative mr-2 w-11/12' },
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 })),
react_2["default"].createElement("div", { className: 'flex w-14 justify-center pt-1' }, isSearchLoading ? react_2["default"].createElement(Loading_1.PHXSpinner, null) : null),
react_2["default"].createElement("div", null,
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 () {
setIsSearch(false);
searchSetValue('');
// if (searchValue) {
// setSelectedPeople([]);
// }
}, type: 'button' }, "Cancel")))),
react_2["default"].createElement("div", { className: (0, types_1.classNames)((sort && sort.enable) || (search && search.enable)
? "flex flex-row items-center rounded-tl-lg rounded-tr-lg bg-white px-3 pl-8 ".concat(sort && sort.enable
? "sm:justify-between ".concat(dataTable.length === 0 || searchDataResult.length === 0 ? 'border-b' : '')
: 'sm:justify-end', " ").concat(isSearch ? 'border-none py-1' : 'mb-2 py-1.5')
: '', isSearch && (!sort || !sort.enable) ? 'hidden' : '') },
sort && sort.enable ? (react_2["default"].createElement(react_2["default"].Fragment, null,
react_2["default"].createElement(sort_1["default"], { activeMenu: activeMenu, className: 'w-11/12', isSearch: isSearch, onChange: sortOnChange, onChangeSelect: sortSelectOnchange, selectArray: selectArray, sortList: sort.sortList }),
react_2["default"].createElement("div", { className: 'flex justify-center lg:w-14' }, isSortLoading ? react_2["default"].createElement(Loading_1.PHXSpinner, null) : null))) : null,
!isSearch && (react_2["default"].createElement("div", { className: 'mr-3 flex justify-center' }, isChangePageLoading ? react_2["default"].createElement(Loading_1.PHXSpinner, null) : null)),
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 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' },
react_2["default"].createElement(solid_1.MagnifyingGlassIcon, { className: 'h-4 w-4' })))))))),
dataTable.length > 0 ? (react_2["default"].createElement("div", { className: 'relative' },
selectedPeople.length > 0 && (selectedAllPeople === null || selectedAllPeople === void 0 ? void 0 : selectedAllPeople.enable) && (react_2["default"].createElement(SelectedAction_1["default"], { search: search, selectedBtn: selectedBtn, selectedPeople: selectedPeople, slectedTitle: slectedTitle, sort: sort, checkbox: checkbox, checked: checked, toggleAll: toggleAll })),
searchDataResult.length > 0 && !isMainLoading ? (react_2["default"].createElement("div", { className: '-my-2 overflow-x-auto' },
react_2["default"].createElement("div", { className: (0, types_1.classNames)('min-w-full pb-2 align-middle ring-black ring-opacity-5', (search && search.enable) || (sort && sort.enable) ? '' : 'pt-0.5') },
react_2["default"].createElement("div", { className: (0, types_1.classNames)('relative overflow-auto', (search && search.enable) || (sort && sort.enable)
? 'ring-1 ring-black ring-opacity-5'
: 'mt-1.5') },
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' },
react_2["default"].createElement(Button_1.PHXButton, { onClick: actionClickAll, secondary: true, size: 'micro' }, selectedAllPeople.title))))) : null),
react_2["default"].createElement("table", { className: (0, types_1.classNames)(fixedTableLayout ? 'table-fixed' : '', (search && search.enable) || (sort && sort.enable) ? 'border-t' : '',
// @ts-ignore
thHeader.length < 5
? "min-w-full ".concat((selectedPeople === null || selectedPeople === void 0 ? void 0 : selectedPeople.length) === 0 ||
selectedAllPeople.title ||
!(selectedAllPeople === null || selectedAllPeople === void 0 ? void 0 : selectedAllPeople.enable)
? 'divide-y divide-gray-300'
: '')
: "min-w-full ".concat((selectedPeople === null || selectedPeople === void 0 ? void 0 : selectedPeople.length) === 0 ||
selectedAllPeople.title ||
!(selectedAllPeople === null || selectedAllPeople === void 0 ? void 0 : selectedAllPeople.enable)
? 'divide-y divide-gray-300'
: '')) },
thHeaderComponent ? (react_2["default"].createElement(react_2["default"].Fragment, null, selectedAllPeople && selectedAllPeople.enable && isCustomHeaderSelected ? (react_2["default"].createElement(react_2["default"].Fragment, null, thHeaderComponent(react_2["default"].createElement("th", { className: 'relative w-12 rounded-lg px-6 py-2.5 sm:w-16 sm:px-8', scope: 'col' },
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' }))))) : (react_2["default"].createElement(react_2["default"].Fragment, null, thHeaderComponent)))) : (react_2["default"].createElement("thead", null,
react_2["default"].createElement(HeaderTable_1["default"], { border: border, checkbox: checkbox, checked: checked, disableSpacing: disableSpacing, isCenterText: isCenterText, numericalOrder: numericalOrder, selectedAllPeople: selectedAllPeople, thHeader: thHeader, toggleAll: toggleAll, lefts: lefts, refs: refs, stickyColumnNumber: stickyColumnNumber, selectedPeople: selectedPeople, stickyColumnNumberRight: stickyColumnNumberRight, rights: rights, refRights: refRights, search: search }))),
react_2["default"].createElement("tbody", { className: 'divide-y divide-gray-200' }, searchValue === ''
? dataTable.map(function (item, index) { return (
// @ts-ignore
react_2["default"].createElement("tr", { key: item.id, className: (0, types_1.classNames)(clickRow && !funcItemReadOnly ? 'hover:cursor-pointer hover:bg-gray-50' : '', renderInclude(item) && !(item === null || item === void 0 ? void 0 : item.entered_school) && (selectedAllPeople === null || selectedAllPeople === void 0 ? void 0 : selectedAllPeople.enable)
? 'bg-gray-50'
: '', funcItemReadOnly && clickType === 'custom'
? funcItemReadOnly(item)
? ''
: 'hover:cursor-pointer hover:bg-gray-50'
: ''), onClick: function () {
if (clickRow) {
if (routerCondition) {
// eslint-disable-next-line no-unused-expressions
checkConditionRouter(item)
? router.push("".concat(routerCondition.link).concat(item.id))
: router.push("".concat(editActionLink).concat(item.id));
}
else if (clickType === 'edit') {
router.push("".concat(editActionLink).concat(item.id));
}
else {
// @ts-ignore
onClickItem(item);
}
}
} }, thBody.map(function (bodyItem, bodyIndex) { return (react_2["default"].createElement(RowTable_1.RowTable, { key: bodyIndex, bodyIndex: bodyIndex, border: border, brSetSelectedPeople: brSetSelectedPeople, directDetail: directDetail, disableSpacing: disableSpacing, editActionLink: editActionLink, isCenterText: isCenterText, itemBody: item, numericalOrder: tslib_1.__assign(tslib_1.__assign({}, numericalOrder), { order: pagi * rowQuantity + index + 1 }), onChange: onChange, selectedAllPeople: selectedAllPeople, selectedPeople: selectedPeople, thBody: thBody, thBodyComponent: thBodyComponent, thBodyFilter: thBodyFilter, lefts: lefts, stickyColumnNumber: stickyColumnNumber, stickyColumnNumberRight: stickyColumnNumberRight, rights: rights, hidePagination: hidePagination, dataTableAggregate: dataTable.length, itemIndex: index })); }))); })
: searchDataResult.map(function (item, index) { return (
// @ts-ignore
react_2["default"].createElement("tr", { key: item.id, className: (0, types_1.classNames)(clickRow && !funcItemReadOnly ? 'hover:cursor-pointer hover:bg-gray-50' : '', renderInclude(item) && !(item === null || item === void 0 ? void 0 : item.entered_school) && (selectedAllPeople === null || selectedAllPeople === void 0 ? void 0 : selectedAllPeople.enable)
? 'bg-gray-50'
: '', funcItemReadOnly && clickType === 'custom'
? funcItemReadOnly(item)
? ''
: 'hover:cursor-pointer hover:bg-gray-50'
: '', hidePagination && index === searchDataResult.length - 1 && 'rounded-bl-lg'), onClick: function () {
if (clickRow) {
if (routerCondition) {
// eslint-disable-next-line no-unused-expressions
checkConditionRouter(item)
? router.push("".concat(routerCondition.link).concat(item.id))
: router.push("".concat(editActionLink).concat(item.id));
}
else if (clickType === 'edit') {
router.push("".concat(editActionLink).concat(item.id));
}
else {
// @ts-ignore
onClickItem(item);
}
}
} }, thBody.map(function (bodyItem, bodyIndex) { return (react_2["default"].createElement(RowTable_1.RowTable, { key: bodyIndex, bodyIndex: bodyIndex, border: border, brSetSelectedPeople: brSetSelectedPeople, directDetail: directDetail, disableSpacing: disableSpacing, editActionLink: editActionLink, isCenterText: isCenterText, itemBody: item, numericalOrder: tslib_1.__assign(tslib_1.__assign({}, numericalOrder), { order: pagi * rowQuantity + index + 1 }), onChange: onChange, selectedAllPeople: selectedAllPeople, selectedPeople: selectedPeople, thBody: thBody, thBodyComponent: thBodyComponent, thBodyFilter: thBodyFilter, lefts: lefts, stickyColumnNumber: stickyColumnNumber, stickyColumnNumberRight: stickyColumnNumberRight, rights: rights, hidePagination: hidePagination, dataTableAggregate: searchDataResult.length, itemIndex: index })); }))); }))))))) : (react_2["default"].createElement(EmptySearchResult_1["default"], null)))) : (dataTable.length === 0 && isSearch) ||
(dataTable.length === 0 && isSelectSort) ||
(dataTable.length === 0 && isSort) ||
(dataTable.length === 0 && (sort === null || sort === void 0 ? void 0 : sort.enable)) ? (react_2["default"].createElement(react_2["default"].Fragment, null, enableEmptyStateAction ? react_2["default"].createElement(EmptyStateAction_1.PHXEmptyStateAction, tslib_1.__assign({}, emptyStateActionAttribute)) : react_2["default"].createElement(EmptyRecord_1.PHXEmptyRecord, null))) : (react_2["default"].createElement(react_2["default"].Fragment, null, enableEmptyStateAction ? react_2["default"].createElement(EmptyStateAction_1.PHXEmptyStateAction, tslib_1.__assign({}, emptyStateActionAttribute)) : react_2["default"].createElement(EmptyRecord_1.PHXEmptyRecord, null)))),
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' },
react_2["default"].createElement(PaginaitonSelected_1["default"], { rowQuantity: rowQuantity, setIsChangeRowQty: setIsChangeRowQty, setRowQuantity: setRowQuantity, router: router, searchParams: params, tableKey: tableKey, setCurrentPage: setCurrentPage, setPagi: setPagi, paginationData: paginationData }),
react_2["default"].createElement(Pagination_1["default"], { count: count, currentPage: currentPage, handleChangePage: handleChangePage, pagination: pagination, router: router, rowQuantity: rowQuantity, totalPages: Math.ceil(count / rowQuantity), searchParams: params, tableKey: tableKey }))))))));
}
exports.PHXTableV3 = PHXTableV3;
//# sourceMappingURL=TableV3.js.map