UNPKG

phx-react

Version:

PHX REACT

403 lines 29.1 kB
'use client'; import { __assign, __awaiter, __generator, __spreadArray } from "tslib"; import { Transition } from '@headlessui/react'; import { Bars3CenterLeftIcon, MagnifyingGlassIcon } from '@heroicons/react/24/solid'; import React, { Fragment, useEffect, useLayoutEffect, useRef, useState } from 'react'; import EmptySearchResult from '../Table/EmptySearchResult'; import Pagination from '../Table/Pagination'; import { RowTable } from '../Table/RowTable'; import Sort from '../Table/sort'; 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 Cookies from 'js-cookie'; import { AUTH_TOKEN } from '../../utils/constants'; import PaginationSelected from '../Table/PaginaitonSelected'; import PHXClientQueryV3 from '../Func/clientQueryV3'; import PHXClientQueryDataCenterV3 from '../Func/clientQueryDataCenterV3'; export 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, editActionLink = _a.editActionLink, selectedBtn = _a.selectedBtn, slectedTitle = _a.slectedTitle, hidePagination = _a.hidePagination, list = _a.list, _d = _a.numericalOrder, numericalOrder = _d === void 0 ? { enable: false, title: 'STT' } : _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, isQueryDataCenter = _a.isQueryDataCenter; var checkbox = useRef(); var _j = useState(false), checked = _j[0], setChecked = _j[1]; var _k = useState(false), indeterminate = _k[0], setIndeterminate = _k[1]; var _l = useState(true), isMainLoading = _l[0], setIsMainLoading = _l[1]; var _m = useState([]), dataTable = _m[0], setDataTable = _m[1]; var _o = useState(''), searchValue = _o[0], setSearchValue = _o[1]; var _p = useState([]), selectedPeople = _p[0], setSelectedPeople = _p[1]; var _q = useState(false), isSearchLoading = _q[0], setIsSearchLoading = _q[1]; var _r = useState([]), searchDataResult = _r[0], setSearchDataResult = _r[1]; var _s = useState(0), pagi = _s[0], setPagi = _s[1]; var _t = useState(0), count = _t[0], setCount = _t[1]; var timKiemPlacholder = 'Tìm kiếm'; var _u = useState(false), isSearch = _u[0], setIsSearch = _u[1]; var _v = useState(sort === null || sort === void 0 ? void 0 : sort.defaultActive), activeMenu = _v[0], setActiveMenu = _v[1]; var _w = useState(false), isSelectSort = _w[0], setIsSelectSort = _w[1]; var _x = useState(false), isSort = _x[0], setIsSort = _x[1]; var _y = useState(false), isSortLoading = _y[0], setIsSortLoading = _y[1]; var _z = useState(rowNumber), rowQuantity = _z[0], setRowQuantity = _z[1]; var _0 = useState(false), isChangeRowQty = _0[0], setIsChangeRowQty = _0[1]; var queryHidePagi = list.query.replace(/limit\s*:\s*\d+\s*,?|offset\s*:\s*\d+\s*,?/g, ''); var queryWithLimitSelected = 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 getToken = function () { if (typeof window !== 'undefined') { var authTokenInfo_1 = Cookies.get(AUTH_TOKEN) && JSON.parse(Cookies.get(AUTH_TOKEN)); return 'Bearer' + ' ' + authTokenInfo_1.token; } else { return; } }; var authTokenInfo = getToken(); var filterQuery = function (query, value) { return query.replace(/%@value%/g, "\"\"%".concat(value, "%\"\"")); }; var searchQuery = search ? 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 __awaiter(_this, void 0, void 0, function () { var error_1; return __generator(this, function (_a) { switch (_a.label) { case 0: _a.trys.push([0, 5, , 6]); if (!isQueryDataCenter) return [3 /*break*/, 2]; return [4 /*yield*/, PHXClientQueryDataCenterV3({ query: searchDataQuery })]; case 1: return [2 /*return*/, _a.sent()]; case 2: return [4 /*yield*/, PHXClientQueryV3({ query: searchDataQuery })]; 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 = __spreadArray([], dataTable, true); setDataTable(data); setSearchDataResult(data); }; var _1 = useState(false), isChangePageLoading = _1[0], setIsChangePageLoading = _1[1]; var _2 = useState(''), previousValue = _2[0], setPreviousValue = _2[1]; var _3 = useState(1), currentPage = _3[0], setCurrentPage = _3[1]; var handleChangePage = function (page) { if (page > 0 && page <= Math.ceil(count / rowQuantity)) { setIsChangePageLoading(true); setCurrentPage(page); setPagi(page - 1); paginationData(page - 1); } }; 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 brSetSelectedPeople(value) { setSelectedPeople(value); } 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, ''); setSearchValue(replaceSensitiveValue); paginationData(0); if (replaceSensitiveValue !== previousValue) { setPreviousValue(replaceSensitiveValue); } if (replaceSensitiveValue.trim().length === 0) { setSearchDataResult(dataTable); } setCurrentPage(1); } var debouncedSearch = PHXUseDebounce(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 __awaiter(_this, void 0, void 0, function () { var data, _a, _b, dataTable, countPage; return __generator(this, function (_c) { switch (_c.label) { case 0: setIsSearchLoading(true); _a = getData; _b = authTokenInfo; if (!_b) return [3 /*break*/, 2]; return [4 /*yield*/, fetchSearchData()]; case 1: _b = (_c.sent()); _c.label = 2; case 2: data = _a.apply(void 0, [_b]); 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); // khi search sẽ reset những row đã select setSelectedPeople([]); return [2 /*return*/]; } }); }); }; var queryData = function () { return __awaiter(_this, void 0, void 0, function () { var data, _a, _b, dataTable_1, countPage, e_1; return __generator(this, function (_c) { switch (_c.label) { case 0: _c.trys.push([0, 5, , 6]); if (!authTokenInfo) return [2 /*return*/]; _a = getData; if (!isQueryDataCenter) return [3 /*break*/, 2]; return [4 /*yield*/, PHXClientQueryDataCenterV3({ query: dataQuery })]; case 1: _b = _c.sent(); return [3 /*break*/, 4]; case 2: return [4 /*yield*/, PHXClientQueryV3({ query: dataQuery })]; case 3: _b = _c.sent(); _c.label = 4; case 4: data = _a.apply(void 0, [_b]); if (!data) return [2 /*return*/]; 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); if (setAggregate) { setAggregate(data[countPage].aggregate.count); } return [3 /*break*/, 6]; case 5: e_1 = _c.sent(); console.log(e_1); return [3 /*break*/, 6]; case 6: return [2 /*return*/]; } }); }); }; useEffect(function () { if (searchValue === '') { queryData(); } else if (debouncedSearch) { handleSearch(); } }, [pagi, sort, debouncedSearch]); useEffect(function () { if (!isNaN(Number(pagination))) { setCurrentPage(Number(pagination) + 1); } }, [pagination]); useEffect(function () { if (dataTable) { setIsSortLoading(false); } }, [dataTable]); useEffect(function () { if ((!isChangePageLoading && filterLoading) || isChangeRowQty) { queryData(); setIsMainLoading(true); setSelectedPeople([]); } if (search && search.enable && isChangePageLoading) setIsSearchLoading(true); }, [list, queryWithLimitSelected]); 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, React.createElement("div", { className: 'rounded-lg bg-white shadow ring-1 ring-black ring-opacity-5' }, React.createElement("div", { className: 'flex flex-col' }, (dataTable.length > 0 || (dataTable.length === 0 && isSearch) || (dataTable.length === 0 && isSelectSort) || (dataTable.length === 0 && isSort)) && (React.createElement("div", { className: 'min-w-full align-middle' }, React.createElement(Transition, { as: 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.createElement("div", { className: 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' : '') }, React.createElement("div", { className: 'relative mr-2 w-11/12' }, React.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.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: function () { setIsSearch(false); setSearchValue(''); if (searchValue) { setSelectedPeople([]); } }, type: 'button' }, "Cancel")))), React.createElement("div", { className: classNames((sort && sort.enable) || (search && search.enable) ? "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') : '', isSearch && (!sort || !sort.enable) ? 'hidden' : '') }, 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 pt-1 lg:w-14' }, isSortLoading ? React.createElement(PHXSpinner, null) : null))) : null, !isSearch && (React.createElement("div", { className: 'flex justify-center' }, isChangePageLoading ? React.createElement(PHXSpinner, null) : null)), search && search.enable && (React.createElement("div", null, !isSearch && (React.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' }, React.createElement(MagnifyingGlassIcon, { className: 'mr-1 h-4 w-4' }), React.createElement(Bars3CenterLeftIcon, { className: 'h-4 w-4' })))))))), dataTable.length > 0 ? (React.createElement("div", null, 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 shadow 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(fixedTableLayout ? 'table-fixed' : '', (search && search.enable) || (sort && sort.enable) ? 'border-t' : '', // @ts-ignore thHeader.length < 5 ? "w-full ".concat((selectedPeople === null || selectedPeople === void 0 ? void 0 : selectedPeople.length) === 0 || selectedAllPeople.title ? 'divide-y divide-gray-300' : '') : "min-w-full ".concat((selectedPeople === null || selectedPeople === void 0 ? void 0 : selectedPeople.length) === 0 || selectedAllPeople.title ? 'divide-y divide-gray-300' : '')) }, selectedPeople.length > 0 && (React.createElement("div", { className: 'absolute top-0 min-w-full border-b bg-gray-50 px-2 py-1' }, React.createElement("div", { className: 'flex items-center justify-between' }, React.createElement("p", { className: 'mb-1 ml-14 text-xs font-medium text-gray-900' }, "\u0110\u00E3 ch\u1ECDn ", selectedPeople === null || selectedPeople === void 0 ? void 0 : selectedPeople.length, " ", slectedTitle), React.createElement("div", { className: 'flex justify-end gap-2' }, selectedBtn === null || selectedBtn === void 0 ? void 0 : selectedBtn.map(function (item, index) { return (React.createElement(PHXButton, { key: index, deleted: item.type === 'danger', onClick: function () { return item.onClick(selectedPeople); }, secondary: item.type === 'secondary', size: 'micro' }, item.content)); }))))), thHeaderComponent ? (thHeaderComponent) : (React.createElement("thead", null, React.createElement("tr", null, selectedAllPeople && selectedAllPeople.enable ? (React.createElement("th", { className: 'relative w-12 rounded-lg bg-gray-50 px-6 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' }), (selectedPeople === null || selectedPeople === void 0 ? void 0 : selectedPeople.length) > 0 && (React.createElement("div", { className: 'absolute w-[100px] h-[1px] left-0 bottom-0 bg-[#e5e7eb]' })))) : null, numericalOrder.enable && (React.createElement("th", { key: 'stt', className: 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)), thHeader.map(function (item, index) { return index === 0 ? (React.createElement("th", { key: index, className: 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.createElement("th", { key: index, className: 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)); })))), React.createElement("tbody", { className: 'divide-y divide-gray-200' }, searchValue === '' ? dataTable.map(function (item, index) { return ( // @ts-ignore React.createElement("tr", { key: item.id, className: 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 () { 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 onClick(item); } } } }, thBody.map(function (bodyItem, bodyIndex) { return (React.createElement(RowTable, { numericalOrder: __assign(__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 })); }))); }) : searchDataResult.map(function (item, index) { return ( // @ts-ignore React.createElement("tr", { key: item.id, className: 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 () { 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 onClick(item); } } } }, thBody.map(function (bodyItem, bodyIndex) { return (React.createElement(RowTable, { numericalOrder: __assign(__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.createElement(EmptySearchResult, null)))) : (dataTable.length === 0 && isSearch) || (dataTable.length === 0 && isSelectSort) || (dataTable.length === 0 && isSort) ? (React.createElement(EmptySearchResult, null)) : (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 }), React.createElement(Pagination, { pagination: pagination, rowQuantity: rowQuantity, count: count, currentPage: currentPage, handleChangePage: handleChangePage, totalPages: Math.ceil(count / rowQuantity) })))))))); } //# sourceMappingURL=TableV3.js.map