phx-react
Version:
PHX REACT
495 lines • 34.2 kB
JavaScript
'use client';
import { Transition } from '@headlessui/react';
import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
import React, { Fragment, useEffect, useLayoutEffect, useRef, useState } from 'react';
import { PHXButton } from '../Button';
import { PHXEmptyRecord } from '../EmptyRecord';
import PHXUseDebounce from '../Func/useDebounce';
import { PHXSpinner } from '../Loading';
import { PHXSkeleton } from '../Skeleton';
import { classNames } from '../types';
import { PHXClientQueryV3, PHXClientQueryDataCenterV3, PHXClientQueryDevPortalV3 } from '../Func/GRPC/PHXGrpcClientV3';
import Sort from './sort';
import { RowTable } from './RowTable';
import PaginationSelected from './PaginaitonSelected';
import Pagination from './Pagination';
import { PHXEmptyStateAction } from '../EmptyStateAction';
import HeaderTable from './HeaderTable';
import SelectedAction from './SelectedAction';
import { unaccentValue } from '../../helpers/helpers';
import { useStickyLefts, useStickyRights } from '../TableVertical/useStickyLeft';
import { PHXCompleteState } from '../CompleteState';
import { PHXEmptySearch } from '../EmptySearch';
import { PHXUseDirectLink } from '../../hooks/direct-link';
export function PHXTableV3({ actionName, clickRow = true, clickType = 'edit', directDetail, editActionLink, filterLoading = false, fixedTableLayout = true, hidePagination, isQueryDataCenter, isQueryDevPortal, list, numericalOrder = {
enable: true,
title: 'STT',
disableSpacing: false,
sticky: false,
}, onChange, onClick, pagination, paginationData, router: routerDefault, routerCondition, rowNumber = 25, search, selectArray, selectedAllPeople, selectedBtn, setAggregate, setHeaderLoading, slectedTitle, sort, sortData, sortSelectData, thBody, thBodyComponent, thBodyFilter, thHeader, thHeaderComponent, typeLoading = { type: 'table' }, isSortEmpty = true, emptyStateAction = {
enable: false,
title: '',
description: '',
buttonContent: '',
buttonType: 'primary',
onAction: () => console.log('action'),
}, isCustomHeaderSelected = false, isUnaccentSearchValue = false, disableSpacing = { disable: false, indexStart: 0 }, border = false, isCenterText = false, searchValueData, stickyColumnNumber = 0, getDataTable, stickyColumnNumberRight = 0, isBackgroundReload = false, loaded, isResetPagination = false, tableKey = 'table', searchParams, completeState, completeStateTitle, completeStateDescription, type = 'default', title, replaceUrl = false, }) {
const checkbox = useRef();
const [checked, setChecked] = useState(false);
const [indeterminate, setIndeterminate] = useState(false);
const [isMainLoading, setIsMainLoading] = useState(true);
const [dataTable, setDataTable] = useState([]);
const [selectedPeople, setSelectedPeople] = useState([]);
const [isSearchLoading, setIsSearchLoading] = useState(false);
const [searchDataResult, setSearchDataResult] = useState([]);
const [pagi, setPagi] = useState(0);
const [numericalOderInPage, setNumericalOderInPage] = useState(0);
const [count, setCount] = useState(0);
const timKiemPlacholder = 'Tìm kiếm';
const [activeMenu, setActiveMenu] = useState(sort === null || sort === void 0 ? void 0 : sort.defaultActive);
const [isSelectSort, setIsSelectSort] = useState(false);
const [isSort, setIsSort] = useState(false);
const [isSortLoading, setIsSortLoading] = useState(false);
const [numberOfFetchData, setNumberOfFetchData] = useState(0);
// const [locationSearch, setLocationSearch] = useState(typeof window !== 'undefined' ? window.location.search : '')
const directLink = PHXUseDirectLink();
const routerPush = (link) => {
if (routerDefault) {
routerDefault.push(link);
return;
}
directLink(link);
};
const handleRouterQuery = (link) => {
const method = replaceUrl ? 'replace' : 'push';
if (routerDefault) {
routerDefault[method](link);
return;
}
directLink(link, { replace: replaceUrl });
};
const numericalOrderDefault = {
...numericalOrder,
sticky: !!stickyColumnNumber,
};
// @ts-ignore
const params = new URLSearchParams(searchParams) || new URLSearchParams(window.location.search);
const [searchValue, setSearchValue] = useState(params.get(`search-${tableKey}`) || '');
const [isSearch, setIsSearch] = useState(!!params.get(`search-${tableKey}`));
const entries = Object.fromEntries(params.entries());
const [rowQuantity, setRowQuantity] = useState((entries === null || entries === void 0 ? void 0 : entries[`row-${tableKey}`]) ? Number(entries === null || entries === void 0 ? void 0 : entries[`row-${tableKey}`]) : rowNumber);
const [isChangeRowQty, setIsChangeRowQty] = useState(false);
useEffect(() => {
if ((entries === null || entries === void 0 ? void 0 : entries[`row-${tableKey}`]) ? Number(entries === null || entries === void 0 ? void 0 : entries[`row-${tableKey}`]) !== rowQuantity : rowNumber !== rowQuantity) {
setRowQuantity((entries === null || entries === void 0 ? void 0 : entries[`row-${tableKey}`]) ? Number(entries === null || entries === void 0 ? void 0 : entries[`row-${tableKey}`]) : rowNumber);
if (!isChangeRowQty) {
setIsChangeRowQty(true);
}
}
}, [entries === null || entries === void 0 ? void 0 : entries[`row-${tableKey}`], rowNumber]);
const { lefts, refs } = useStickyLefts((numericalOrderDefault === null || numericalOrderDefault === void 0 ? void 0 : numericalOrderDefault.sticky) && selectedAllPeople && selectedAllPeople.enable
? stickyColumnNumber + 2
: (numericalOrderDefault === null || numericalOrderDefault === void 0 ? void 0 : numericalOrderDefault.sticky) || (selectedAllPeople && selectedAllPeople.enable)
? stickyColumnNumber + 1
: stickyColumnNumber, dataTable);
const { refs: refRights, rights } = useStickyRights(stickyColumnNumberRight, dataTable);
const queryHidePagi = list.query ? list.query.replace(/limit\s*:\s*\d+\s*,?|offset\s*:\s*\d+\s*,?/g, '') : '';
const queryWithLimitSelected = list.query
? list.query
.replace(/limit\s*:\s*\d+/g, `limit: ${rowQuantity}`)
.replace(/offset\s*:\s*\d+/g, `offset: ${pagination * rowQuantity}`)
: '';
const dataQuery = `
${hidePagination ? queryHidePagi : queryWithLimitSelected}
`;
const { enable: enableEmptyStateAction, ...emptyStateActionAttribute } = emptyStateAction;
const filterQuery = (query, value) => {
const formatValue = isUnaccentSearchValue ? unaccentValue(value) : value;
return query.replace(/%@value%/g, `""%${formatValue}%""`);
};
const searchQuery = search && search.query ? filterQuery(search.query, searchValue.trim()) : '';
const searchQueryHidePagi = searchQuery.replace(/limit\s*:\s*\d+\s*,?|offset\s*:\s*\d+\s*,?/g, '');
const searchQueryWithLimitSelected = searchQuery
.replace(/limit\s*:\s*\d+/g, `limit: ${rowQuantity}`)
.replace(/offset\s*:\s*\d+/g, `offset: ${pagination * rowQuantity}`);
const searchDataQuery = `
${hidePagination ? searchQueryHidePagi : searchQueryWithLimitSelected}
`;
const fetchSearchData = async () => {
try {
const variables = (search === null || search === void 0 ? void 0 : search.persistedId)
? {
...search === null || search === void 0 ? void 0 : search.variables,
limit: rowQuantity,
offset: pagination * rowQuantity,
}
: {};
const queryFn = isQueryDataCenter
? PHXClientQueryDataCenterV3
: isQueryDevPortal
? PHXClientQueryDevPortalV3
: PHXClientQueryV3;
return queryFn({
query: searchDataQuery,
variables,
persistedId: search === null || search === void 0 ? void 0 : search.persistedId,
});
}
catch (error) {
console.log(error);
return;
}
};
const getData = (result) => result.data;
const bindDataToTable = (dataTable) => {
// @ts-ignore
const data = [...dataTable];
setDataTable(data);
setSearchDataResult(data);
};
const [isChangePageLoading, setIsChangePageLoading] = useState(false);
const [previousValue, setPreviousValue] = useState(params.get(`search-${tableKey}`) || '');
const [currentPage, setCurrentPage] = useState(1);
const handleChangePage = (page) => {
if (page > 0 && page <= Math.ceil(count / rowQuantity)) {
setIsChangePageLoading(true);
setCurrentPage(page);
setPagi(page - 1);
paginationData(page - 1);
}
};
useLayoutEffect(() => {
const 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((item) => !(item === null || item === void 0 ? void 0 : item.entered_school)));
}
else {
setSelectedPeople(checked || indeterminate ? [] : dataTable.filter((item) => !(item === null || item === void 0 ? void 0 : item.entered_school)));
}
if (onChange) {
onChange(checked || indeterminate ? [] : dataTable.filter((item) => !(item === null || item === void 0 ? void 0 : item.entered_school)));
}
setChecked(!checked && !indeterminate);
setIndeterminate(false);
}
function searchSetValue(value) {
setSearchValue(value);
if (searchValueData) {
const formatValue = isUnaccentSearchValue ? unaccentValue(value.trim()) : value.trim();
searchValueData(formatValue);
}
}
function brSetSelectedPeople(value) {
const 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) {
const value = e.target.value;
// Loại bỏ ký tự "\" từ chuỗi
const replaceSensitiveValue = value.replace(/\\/g, '');
searchSetValue(replaceSensitiveValue);
paginationData(0);
setCurrentPage(1);
setPagi(0);
if (replaceSensitiveValue !== previousValue) {
setPreviousValue(replaceSensitiveValue);
}
if (replaceSensitiveValue.trim().length === 0) {
setSearchDataResult(dataTable);
}
params.set(`search-${tableKey}`, value);
params.set(`pagi-${tableKey}`, '1');
handleRouterQuery(`?${params + ''}`);
}
const debouncedSearch = PHXUseDebounce(searchValue, 300);
const sortOnChange = (item) => {
const isChangeSort = item.id !== activeMenu;
setIsSort(true);
sortData(item.field, item.sortDirection);
setActiveMenu(item.id);
if (isChangeSort) {
setIsSortLoading(true);
}
};
const sortSelectOnchange = (item, columnName) => {
const isChangeSort = item.id !== activeMenu;
setActiveMenu(item.id);
sortSelectData(item, columnName);
setIsSelectSort(true);
if (isChangeSort) {
setIsSortLoading(true);
}
};
const actionClickAll = () => {
actionName(selectedPeople, true);
};
const checkConditionRouter = (rowData) => {
if (routerCondition.conditionArray.some((item) => item === rowData[routerCondition.conditionName])) {
return true;
}
return false;
};
const handleSearch = async () => {
setIsSearchLoading(true);
const data = getData(await fetchSearchData());
const dataTable = search.keyResult;
const 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);
setIsChangePageLoading(false);
setNumericalOderInPage(pagi);
// khi search sẽ reset những row đã select
// setSelectedPeople([]);
};
const paginationWithApplyUrl = () => {
let currentPagination = 1;
if (typeof window !== 'undefined' && !isResetPagination && !isChangeRowQty) {
const entries = Object.fromEntries(params.entries());
currentPagination = (entries === null || entries === void 0 ? void 0 : entries[`pagi-${tableKey}`]) ? Number(entries === null || entries === void 0 ? void 0 : entries[`pagi-${tableKey}`]) || 1 : 1;
}
if (!isChangePageLoading && !hidePagination && !isChangeRowQty) {
setCurrentPage(currentPagination);
setPagi(currentPagination - 1);
paginationData(currentPagination - 1);
}
return currentPagination;
};
const queryData = async () => {
let query = dataQuery;
const currentPagination = paginationWithApplyUrl();
if (!isChangePageLoading) {
const queryWithCurrentPagination = list.query
? list.query
.replace(/limit\s*:\s*\d+/g, `limit: ${rowQuantity}`)
.replace(/offset\s*:\s*\d+/g, `offset: ${(currentPagination - 1) * rowQuantity}`)
: '';
query = hidePagination ? queryHidePagi : queryWithCurrentPagination;
}
try {
const variables = (list === null || list === void 0 ? void 0 : list.persistedId)
? {
...list === null || list === void 0 ? void 0 : list.variables,
limit: rowQuantity,
offset: !isChangePageLoading ? (currentPagination - 1) * rowQuantity : pagination * rowQuantity,
}
: {};
const queryFn = isQueryDataCenter
? PHXClientQueryDataCenterV3
: isQueryDevPortal
? PHXClientQueryDevPortalV3
: PHXClientQueryV3;
const data = getData(searchValue
? await fetchSearchData()
: await queryFn({
query,
variables,
persistedId: list === null || list === void 0 ? void 0 : list.persistedId,
}));
if (!data)
return;
if (!isBackgroundReload || (numberOfFetchData === 0 && isBackgroundReload)) {
setIsMainLoading(true);
}
const dataTable = list.keyResult;
const countPage = list.keyResult + '_aggregate';
bindDataToTable(data[dataTable]);
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);
if (!isChangePageLoading && !hidePagination && !isChangeRowQty) {
setNumericalOderInPage(currentPagination - 1);
}
else {
setNumericalOderInPage(pagi);
}
}
catch (e) {
console.log(e);
}
};
useEffect(() => {
if (!searchValue || numberOfFetchData === 0) {
queryData();
}
else if (debouncedSearch) {
handleSearch();
}
}, [pagi, debouncedSearch]);
useEffect(() => {
if (!isNaN(Number(pagination))) {
setCurrentPage(Number(pagination) + 1);
}
}, [pagination]);
useEffect(() => {
if (dataTable) {
setIsSortLoading(false);
}
if (getDataTable && dataTable.length) {
getDataTable(dataTable);
}
}, [dataTable]);
useEffect(() => {
if ((!isChangePageLoading && filterLoading && !isSortLoading) || isChangeRowQty) {
queryData();
if (!isBackgroundReload || (numberOfFetchData === 0 && isBackgroundReload)) {
setIsMainLoading(true);
}
setSelectedPeople([]);
}
if (search && search.enable && isChangePageLoading) {
setIsSearchLoading(true);
}
}, [list, queryWithLimitSelected, rowQuantity]);
useEffect(() => {
if (isSortLoading) {
queryData();
setSelectedPeople([]);
}
}, [sort]);
const funcItemReadOnly = thBodyComponent ? thBodyComponent === null || thBodyComponent === void 0 ? void 0 : thBodyComponent.readOnly : null;
const onClickItem = (item) => {
if (onClick && (!funcItemReadOnly || (funcItemReadOnly && !funcItemReadOnly(item)))) {
onClick(item);
}
};
const handleClickRow = (item) => {
if (routerCondition) {
const link = checkConditionRouter(item) ? `${routerCondition.link}${item.id}` : `${editActionLink}${item.id}`;
routerPush(link);
return;
}
if (clickType === 'edit') {
routerPush(`${editActionLink}${item.id}`);
return;
}
// @ts-ignore
onClickItem(item);
};
return (React.createElement(React.Fragment, null,
isMainLoading ? (React.createElement(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.createElement(React.Fragment, null,
title && React.createElement("div", { className: 'mb-4 text-sm font-semibold leading-5 text-gray-900' }, title),
React.createElement("div", { className: 'rounded-lg bg-white shadow-[0rem_.3125rem_.3125rem_-.15625rem_rgba(0,0,0,.03),0rem_.1875rem_.1875rem_-.09375rem_rgba(0,0,0,.02),0rem_.125rem_.125rem_-.0625rem_rgba(0,0,0,.02),0rem_.0625rem_.0625rem_-.03125rem_rgba(0,0,0,.03),0rem_.03125rem_.03125rem_0rem_rgba(0,0,0,.04),0rem_0rem_0rem_.0625rem_rgba(0,0,0,.06)] ring-1 ring-gray-200' },
React.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.createElement("div", { className: classNames(isSortEmpty && dataTable.length === 0 && !isSearch ? 'hidden' : 'min-w-full align-middle', (sort && sort.enable) || (search && search.enable) ? 'min-h-11' : '') },
React.createElement(Transition, { as: Fragment, enter: 'transition-[max-height,opacity] duration-300 ease-out overflow-hidden', enterFrom: 'max-h-0 opacity-0', enterTo: 'max-h-20 opacity-100', show: isSearch },
React.createElement("div", { className: classNames('flex flex-row items-center justify-center rounded-tl-lg rounded-tr-lg px-3 py-1 pl-5 ring-opacity-5', !sort || !sort.enable ? '' : '', searchDataResult.length === 0 && 'border-b', type === 'in-card' && 'bg-gray-50') },
React.createElement("div", { className: 'relative mr-2 w-11/12' },
React.createElement("input", { autoFocus: true, className: 'block w-full rounded-lg border-transparent bg-white py-1 text-xs hover:border hover:border-gray-500 focus:border-indigo-800 focus:bg-white focus:ring-indigo-800', id: 'search-value', name: 'search-value', onInput: searchChange, placeholder: timKiemPlacholder, type: 'text', value: searchValue })),
React.createElement("div", { className: 'flex w-14 justify-center pt-1' }, isSearchLoading ? React.createElement(PHXSpinner, null) : null),
React.createElement("div", null,
React.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: () => {
setIsSearch(false);
searchSetValue('');
params.delete(`search-${tableKey}`);
handleRouterQuery(`?${params + ''}`);
}, type: 'button' }, "Cancel")))),
React.createElement("div", { className: classNames((sort && sort.enable) || (search && search.enable)
? `flex flex-row items-center rounded-tl-lg rounded-tr-lg px-3 pl-8 ${sort && sort.enable
? `sm:justify-between ${dataTable.length === 0 || searchDataResult.length === 0 ? 'border-b' : ''}`
: 'sm:justify-end'} ${isSearch ? 'border-none py-1' : 'mb-2 py-1.5'}`
: '', isSearch && (!sort || !sort.enable) ? 'pointer-events-none opacity-0' : 'opacity-100', type === 'in-card' && 'bg-gray-50') },
sort && sort.enable ? (React.createElement(React.Fragment, null,
React.createElement(Sort, { activeMenu: activeMenu, className: 'w-11/12', isSearch: isSearch, onChange: sortOnChange, onChangeSelect: sortSelectOnchange, selectArray: selectArray, sortList: sort.sortList }),
React.createElement("div", { className: 'flex justify-center lg:w-14' }, isSortLoading ? React.createElement(PHXSpinner, null) : null))) : null,
!isSearch && (React.createElement("div", { className: 'mr-3 flex justify-center' }, isChangePageLoading ? React.createElement(PHXSpinner, null) : null)),
search && search.enable && (React.createElement("div", { className: 'rounded-lg bg-white' }, !isSearch && (React.createElement("button", { className: 'ml-1 flex rounded-lg 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: () => setIsSearch(true), type: 'button' },
React.createElement(MagnifyingGlassIcon, { className: 'h-4 w-4' })))))))),
dataTable.length > 0 || isSearch ? (React.createElement("div", { className: 'relative' }, searchDataResult.length > 0 && !isMainLoading ? (React.createElement("div", { className: '-my-2 overflow-x-auto' },
React.createElement("div", { className: classNames('min-w-full pb-2 align-middle ring-black ring-opacity-5', (search && search.enable) || (sort && sort.enable) ? '' : 'pt-0.5') },
React.createElement("div", { className: classNames('relative overflow-auto', (search && search.enable) || (sort && sort.enable)
? 'ring-1 ring-black ring-opacity-5'
: 'mt-1.5') },
React.createElement(React.Fragment, null, selectedAllPeople && selectedAllPeople.enable ? (React.createElement(React.Fragment, null, selectedPeople.length > 0 && selectedAllPeople.title && (React.createElement("div", { className: 'absolute left-12 top-4 flex h-fit items-center space-x-3 bg-gray-50 sm:left-16' },
React.createElement(PHXButton, { onClick: actionClickAll, secondary: true, size: 'micro' }, selectedAllPeople.title))))) : null),
React.createElement("table", { className: classNames('min-w-full divide-y divide-gray-300', fixedTableLayout ? 'table-fixed' : '', (search && search.enable) || (sort && sort.enable) ? 'border-t' : '') },
thHeaderComponent ? (React.createElement(React.Fragment, null, selectedAllPeople && selectedAllPeople.enable && isCustomHeaderSelected ? (React.createElement(React.Fragment, null, thHeaderComponent(React.createElement("th", { className: 'relative w-12 rounded-lg px-6 py-2.5 sm:w-16 sm:px-8', scope: 'col' },
React.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.createElement(React.Fragment, null, thHeaderComponent)))) : (React.createElement("thead", null,
React.createElement(HeaderTable, { border: border, checkbox: checkbox, checked: checked, disableSpacing: disableSpacing, isCenterText: isCenterText, numericalOrder: numericalOrderDefault, selectedAllPeople: selectedAllPeople, thHeader: thHeader, toggleAll: toggleAll, lefts: lefts, refs: refs, stickyColumnNumber: stickyColumnNumber, selectedPeople: selectedPeople, stickyColumnNumberRight: stickyColumnNumberRight, rights: rights, refRights: refRights, search: search, tableKey: tableKey }))),
React.createElement("tbody", { className: 'divide-y divide-gray-200' }, searchValue === ''
? dataTable.map((item, index) => (
// @ts-ignore
React.createElement("tr", { key: item.id, className: 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: () => {
if (clickRow) {
if (routerCondition) {
// eslint-disable-next-line no-unused-expressions
checkConditionRouter(item)
? routerPush(`${routerCondition.link}${item.id}`)
: routerPush(`${editActionLink}${item.id}`);
}
else if (clickType === 'edit') {
routerPush(`${editActionLink}${item.id}`);
}
else {
// @ts-ignore
onClickItem(item);
}
}
} }, thBody.map((bodyItem, bodyIndex) => (React.createElement(RowTable, { key: bodyIndex, bodyIndex: bodyIndex, border: border, brSetSelectedPeople: brSetSelectedPeople, directDetail: directDetail, disableSpacing: disableSpacing, editActionLink: editActionLink, isCenterText: isCenterText, itemBody: item, numericalOrder: {
...numericalOrderDefault,
order: numericalOderInPage * 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, tableKey: tableKey }))))))
: searchDataResult.map((item, index) => (
// @ts-ignore
React.createElement("tr", { key: item.id, className: 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: () => {
if (clickRow) {
handleClickRow(item);
}
} }, thBody.map((bodyItem, bodyIndex) => (React.createElement(RowTable, { key: bodyIndex, bodyIndex: bodyIndex, border: border, brSetSelectedPeople: brSetSelectedPeople, directDetail: directDetail, disableSpacing: disableSpacing, editActionLink: editActionLink, isCenterText: isCenterText, itemBody: item, numericalOrder: {
...numericalOrderDefault,
order: numericalOderInPage * 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, tableKey: tableKey })))))))))))) : (React.createElement(PHXEmptySearch, 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.createElement(React.Fragment, null, enableEmptyStateAction ? React.createElement(PHXEmptyStateAction, { ...emptyStateActionAttribute }) : React.createElement(PHXEmptyRecord, null))) : (React.createElement(React.Fragment, null, enableEmptyStateAction ? (React.createElement(PHXEmptyStateAction, { ...emptyStateActionAttribute })) : completeState ? (React.createElement(PHXCompleteState, { title: completeStateTitle || 'Hoàn tất duyệt đơn!', description: completeStateDescription || 'Tất cả đơn đăng ký đã được duyệt.' })) : (React.createElement(PHXEmptyRecord, null))))),
dataTable.length > 0 && !hidePagination && (React.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.createElement(PaginationSelected, { rowQuantity: rowQuantity, setIsChangeRowQty: setIsChangeRowQty, setRowQuantity: setRowQuantity, routerPush: handleRouterQuery, searchParams: params, tableKey: tableKey, setCurrentPage: setCurrentPage, setPagi: setPagi, paginationData: paginationData }),
React.createElement(Pagination, { count: count, currentPage: currentPage, handleChangePage: handleChangePage, pagination: pagination, routerPush: handleRouterQuery, rowQuantity: rowQuantity, totalPages: Math.ceil(count / rowQuantity), searchParams: params, tableKey: tableKey })))))),
(selectedAllPeople === null || selectedAllPeople === void 0 ? void 0 : selectedAllPeople.enable) && !(selectedAllPeople === null || selectedAllPeople === void 0 ? void 0 : selectedAllPeople.hideSelectedAction) && (React.createElement(SelectedAction, { selectedBtn: selectedBtn, selectedPeople: selectedPeople, slectedTitle: slectedTitle, toggleAll: toggleAll }))));
}
//# sourceMappingURL=TableV3.js.map