phx-react 1.3.1578 → 1.3.1579

package/dist/esm/components/TableV3/TableV3.js

@@ -1,5 +1,4 @@
 'use client';
-import { __assign, __awaiter, __generator, __rest, __spreadArray } from "tslib";
 import { Transition } from '@headlessui/react';
 import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
 import React, { Fragment, useEffect, useLayoutEffect, useRef, useState } from 'react';
@@ -21,114 +20,120 @@ import { unaccentValue } from '../../helpers/helpers';
 import { useStickyLefts, useStickyRights } from '../TableVertical/useStickyLeft';
 import { PHXCompleteState } from '../CompleteState';
 import { PHXEmptySearch } from '../EmptySearch';
-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, 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, isQueryDevPortal = _a.isQueryDevPortal, list = _a.list, _f = _a.numericalOrder, numericalOrder = _f === void 0 ? {
-        enable: true,
-        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 ? 25 : _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, completeState = _a.completeState, completeStateTitle = _a.completeStateTitle, completeStateDescription = _a.completeStateDescription, _w = _a.type, type = _w === void 0 ? 'default' : _w;
-    var checkbox = useRef();
-    var _x = useState(false), checked = _x[0], setChecked = _x[1];
-    var _y = useState(false), indeterminate = _y[0], setIndeterminate = _y[1];
-    var _z = useState(true), isMainLoading = _z[0], setIsMainLoading = _z[1];
-    var _0 = useState([]), dataTable = _0[0], setDataTable = _0[1];
-    var _1 = useState([]), selectedPeople = _1[0], setSelectedPeople = _1[1];
-    var _2 = useState(false), isSearchLoading = _2[0], setIsSearchLoading = _2[1];
-    var _3 = useState([]), searchDataResult = _3[0], setSearchDataResult = _3[1];
-    var _4 = useState(0), pagi = _4[0], setPagi = _4[1];
-    var _5 = useState(0), numericalOderInPage = _5[0], setNumericalOderInPage = _5[1];
-    var _6 = useState(0), count = _6[0], setCount = _6[1];
-    var timKiemPlacholder = 'Tìm kiếm';
-    var _7 = useState(sort === null || sort === void 0 ? void 0 : sort.defaultActive), activeMenu = _7[0], setActiveMenu = _7[1];
-    var _8 = useState(false), isSelectSort = _8[0], setIsSelectSort = _8[1];
-    var _9 = useState(false), isSort = _9[0], setIsSort = _9[1];
-    var _10 = useState(false), isSortLoading = _10[0], setIsSortLoading = _10[1];
-    var _11 = useState(0), numberOfFetchData = _11[0], setNumberOfFetchData = _11[1];
+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, 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', }) {
+    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 : '')
-    var numericalOrderDefault = __assign(__assign({}, numericalOrder), { sticky: !!stickyColumnNumber });
+    const numericalOrderDefault = {
+        ...numericalOrder,
+        sticky: !!stickyColumnNumber,
+    };
     // @ts-ignore
-    var params = new URLSearchParams(searchParams) || new URLSearchParams(window.location.search);
-    var _12 = useState(params.get("search-".concat(tableKey)) || ''), searchValue = _12[0], setSearchValue = _12[1];
-    var _13 = useState(!!params.get("search-".concat(tableKey))), isSearch = _13[0], setIsSearch = _13[1];
-    var entries = Object.fromEntries(params.entries());
-    var _14 = 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 = _14[0], setRowQuantity = _14[1];
-    var _15 = useState(false), isChangeRowQty = _15[0], setIsChangeRowQty = _15[1];
-    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);
+    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-".concat(tableKey)], rowNumber]);
-    var _16 = useStickyLefts((numericalOrderDefault === null || numericalOrderDefault === void 0 ? void 0 : numericalOrderDefault.sticky) && selectedAllPeople && selectedAllPeople.enable
+    }, [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), lefts = _16.lefts, refs = _16.refs;
-    var _17 = useStickyRights(stickyColumnNumberRight, dataTable), refRights = _17.refs, rights = _17.rights;
-    var queryHidePagi = list.query ? list.query.replace(/limit\s*:\s*\d+\s*,?|offset\s*:\s*\d+\s*,?/g, '') : '';
-    var queryWithLimitSelected = list.query
+            : 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: ".concat(rowQuantity))
-            .replace(/offset\s*:\s*\d+/g, "offset: ".concat(pagination * rowQuantity))
+            .replace(/limit\s*:\s*\d+/g, `limit: ${rowQuantity}`)
+            .replace(/offset\s*:\s*\d+/g, `offset: ${pagination * rowQuantity}`)
         : '';
-    var dataQuery = "\n    ".concat(hidePagination ? queryHidePagi : queryWithLimitSelected, "\n  ");
-    var enableEmptyStateAction = emptyStateAction.enable, emptyStateActionAttribute = __rest(emptyStateAction, ["enable"]);
-    var filterQuery = function (query, value) {
-        var formatValue = isUnaccentSearchValue ? unaccentValue(value) : value;
-        return query.replace(/%@value%/g, "\"\"%".concat(formatValue, "%\"\""));
+    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}%""`);
     };
-    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 __awaiter(_this, void 0, void 0, function () {
-        var variables, queryFn;
-        return __generator(this, function (_a) {
-            try {
-                variables = (search === null || search === void 0 ? void 0 : search.persistedId)
-                    ? __assign(__assign({}, search === null || search === void 0 ? void 0 : search.variables), { limit: rowQuantity, offset: pagination * rowQuantity }) : {};
-                queryFn = isQueryDataCenter
-                    ? PHXClientQueryDataCenterV3
-                    : isQueryDevPortal
-                        ? PHXClientQueryDevPortalV3
-                        : PHXClientQueryV3;
-                return [2 /*return*/, queryFn({
-                        query: searchDataQuery,
-                        variables: variables,
-                        persistedId: search === null || search === void 0 ? void 0 : search.persistedId,
-                    })];
-            }
-            catch (error) {
-                console.log(error);
-                return [2 /*return*/];
-            }
-            return [2 /*return*/];
-        });
-    }); };
-    var getData = function (result) { return result.data; };
-    var bindDataToTable = function (dataTable) {
+    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
-        var data = __spreadArray([], dataTable, true);
+        const data = [...dataTable];
         setDataTable(data);
         setSearchDataResult(data);
     };
-    var _18 = useState(false), isChangePageLoading = _18[0], setIsChangePageLoading = _18[1];
-    var _19 = useState(params.get("search-".concat(tableKey)) || ''), previousValue = _19[0], setPreviousValue = _19[1];
-    var _20 = useState(1), currentPage = _20[0], setCurrentPage = _20[1];
-    var handleChangePage = function (page) {
+    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);
@@ -136,8 +141,8 @@ export function PHXTableV3(_a) {
             paginationData(page - 1);
         }
     };
-    useLayoutEffect(function () {
-        var isIndeterminate = selectedPeople.length > 0 && selectedPeople.length < dataTable.length;
+    useLayoutEffect(() => {
+        const isIndeterminate = selectedPeople.length > 0 && selectedPeople.length < dataTable.length;
         setChecked(selectedPeople.length === dataTable.length && dataTable.length > 0);
         setIndeterminate(isIndeterminate);
         // @ts-ignore
@@ -148,13 +153,13 @@ export function PHXTableV3(_a) {
     function toggleAll() {
         // @ts-ignore
         if (searchValue) {
-            setSelectedPeople(checked || indeterminate ? [] : searchDataResult.filter(function (item) { return !(item === null || item === void 0 ? void 0 : item.entered_school); }));
+            setSelectedPeople(checked || indeterminate ? [] : searchDataResult.filter((item) => !(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); }));
+            setSelectedPeople(checked || indeterminate ? [] : dataTable.filter((item) => !(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); }));
+            onChange(checked || indeterminate ? [] : dataTable.filter((item) => !(item === null || item === void 0 ? void 0 : item.entered_school)));
         }
         setChecked(!checked && !indeterminate);
         setIndeterminate(false);
@@ -162,12 +167,12 @@ export function PHXTableV3(_a) {
     function searchSetValue(value) {
         setSearchValue(value);
         if (searchValueData) {
-            var formatValue = isUnaccentSearchValue ? unaccentValue(value.trim()) : value.trim();
+            const formatValue = isUnaccentSearchValue ? 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
+        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) {
@@ -175,9 +180,9 @@ export function PHXTableV3(_a) {
         return selectedPeople.includes(person);
     }
     function searchChange(e) {
-        var value = e.target.value;
+        const value = e.target.value;
         // Loại bỏ ký tự "\" từ chuỗi
-        var replaceSensitiveValue = value.replace(/\\/g, '');
+        const replaceSensitiveValue = value.replace(/\\/g, '');
         searchSetValue(replaceSensitiveValue);
         paginationData(0);
         setCurrentPage(1);
@@ -188,13 +193,13 @@ export function PHXTableV3(_a) {
         if (replaceSensitiveValue.trim().length === 0) {
             setSearchDataResult(dataTable);
         }
-        params.set("search-".concat(tableKey), value);
-        params.set("pagi-".concat(tableKey), '1');
-        router.push("?".concat(params + ''), { scroll: false });
+        params.set(`search-${tableKey}`, value);
+        params.set(`pagi-${tableKey}`, '1');
+        router.push(`?${params + ''}`, { scroll: false });
     }
-    var debouncedSearch = PHXUseDebounce(searchValue, 300);
-    var sortOnChange = function (item) {
-        var isChangeSort = item.id !== activeMenu;
+    const debouncedSearch = PHXUseDebounce(searchValue, 300);
+    const sortOnChange = (item) => {
+        const isChangeSort = item.id !== activeMenu;
         setIsSort(true);
         sortData(item.field, item.sortDirection);
         setActiveMenu(item.id);
@@ -202,8 +207,8 @@ export function PHXTableV3(_a) {
             setIsSortLoading(true);
         }
     };
-    var sortSelectOnchange = function (item, columnName) {
-        var isChangeSort = item.id !== activeMenu;
+    const sortSelectOnchange = (item, columnName) => {
+        const isChangeSort = item.id !== activeMenu;
         setActiveMenu(item.id);
         sortSelectData(item, columnName);
         setIsSelectSort(true);
@@ -211,48 +216,40 @@ export function PHXTableV3(_a) {
             setIsSortLoading(true);
         }
     };
-    var actionClickAll = function () {
+    const actionClickAll = () => {
         actionName(selectedPeople, true);
     };
-    var checkConditionRouter = function (rowData) {
-        if (routerCondition.conditionArray.some(function (item) { return item === rowData[routerCondition.conditionName]; })) {
+    const checkConditionRouter = (rowData) => {
+        if (routerCondition.conditionArray.some((item) => item === rowData[routerCondition.conditionName])) {
             return true;
         }
         return false;
     };
-    var handleSearch = function () { return __awaiter(_this, void 0, void 0, function () {
-        var data, _a, dataTable, countPage;
-        return __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);
-                    setIsChangePageLoading(false);
-                    setNumericalOderInPage(pagi);
-                    return [2 /*return*/];
-            }
-        });
-    }); };
-    var paginationWithApplyUrl = function () {
-        var currentPagination = 1;
+    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) {
-            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;
+            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);
@@ -261,83 +258,69 @@ export function PHXTableV3(_a) {
         }
         return currentPagination;
     };
-    var queryData = function () { return __awaiter(_this, void 0, void 0, function () {
-        var query, currentPagination, queryWithCurrentPagination, variables, queryFn, data, _a, _b, dataTable_1, countPage, e_1;
-        return __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]);
-                    variables = (list === null || list === void 0 ? void 0 : list.persistedId)
-                        ? __assign(__assign({}, list === null || list === void 0 ? void 0 : list.variables), { limit: rowQuantity, offset: !isChangePageLoading ? (currentPagination - 1) * rowQuantity : pagination * rowQuantity }) : {};
-                    queryFn = isQueryDataCenter
-                        ? PHXClientQueryDataCenterV3
-                        : isQueryDevPortal
-                            ? PHXClientQueryDevPortalV3
-                            : PHXClientQueryV3;
-                    _a = getData;
-                    if (!searchValue) return [3 /*break*/, 3];
-                    return [4 /*yield*/, fetchSearchData()];
-                case 2:
-                    _b = _c.sent();
-                    return [3 /*break*/, 5];
-                case 3: return [4 /*yield*/, queryFn({
-                        query: query,
-                        variables: variables,
-                        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);
-                    if (!isChangePageLoading && !hidePagination && !isChangeRowQty) {
-                        setNumericalOderInPage(currentPagination - 1);
-                    }
-                    else {
-                        setNumericalOderInPage(pagi);
-                    }
-                    return [3 /*break*/, 7];
-                case 6:
-                    e_1 = _c.sent();
-                    console.log(e_1);
-                    return [3 /*break*/, 7];
-                case 7: return [2 /*return*/];
+    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);
             }
-        });
-    }); };
-    useEffect(function () {
+            else {
+                setNumericalOderInPage(pagi);
+            }
+        }
+        catch (e) {
+            console.log(e);
+        }
+    };
+    useEffect(() => {
         if (!searchValue || numberOfFetchData === 0) {
             queryData();
         }
@@ -345,12 +328,12 @@ export function PHXTableV3(_a) {
             handleSearch();
         }
     }, [pagi, debouncedSearch]);
-    useEffect(function () {
+    useEffect(() => {
         if (!isNaN(Number(pagination))) {
             setCurrentPage(Number(pagination) + 1);
         }
     }, [pagination]);
-    useEffect(function () {
+    useEffect(() => {
         if (dataTable) {
             setIsSortLoading(false);
         }
@@ -358,7 +341,7 @@ export function PHXTableV3(_a) {
             getDataTable(dataTable);
         }
     }, [dataTable]);
-    useEffect(function () {
+    useEffect(() => {
         if ((!isChangePageLoading && filterLoading && !isSortLoading) || isChangeRowQty) {
             queryData();
             if (!isBackgroundReload || (numberOfFetchData === 0 && isBackgroundReload)) {
@@ -370,14 +353,14 @@ export function PHXTableV3(_a) {
             setIsSearchLoading(true);
         }
     }, [list, queryWithLimitSelected, rowQuantity]);
-    useEffect(function () {
+    useEffect(() => {
         if (isSortLoading) {
             queryData();
             setSelectedPeople([]);
         }
     }, [sort]);
-    var funcItemReadOnly = thBodyComponent ? thBodyComponent === null || thBodyComponent === void 0 ? void 0 : thBodyComponent.readOnly : null;
-    var onClickItem = function (item) {
+    const funcItemReadOnly = thBodyComponent ? thBodyComponent === null || thBodyComponent === void 0 ? void 0 : thBodyComponent.readOnly : null;
+    const onClickItem = (item) => {
         if (onClick && (!funcItemReadOnly || (funcItemReadOnly && !funcItemReadOnly(item)))) {
             onClick(item);
         }
@@ -397,22 +380,22 @@ export function PHXTableV3(_a) {
                                     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: function () {
+                                    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-".concat(tableKey));
-                                            router.push("?".concat(params + ''), { scroll: false });
+                                            params.delete(`search-${tableKey}`);
+                                            router.push(`?${params + ''}`, { scroll: false });
                                         }, 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 ".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')
+                                ? `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: function () { return setIsSearch(true); }, type: 'button' },
+                            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') },
@@ -426,7 +409,7 @@ export function PHXTableV3(_a) {
                                         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(function (item, index) { return (
+                                        ? 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'
@@ -434,24 +417,27 @@ export function PHXTableV3(_a) {
                                                 ? funcItemReadOnly(item)
                                                     ? ''
                                                     : 'hover:cursor-pointer hover:bg-gray-50'
-                                                : ''), onClick: function () {
+                                                : ''), onClick: () => {
                                                 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));
+                                                            ? router.push(`${routerCondition.link}${item.id}`)
+                                                            : router.push(`${editActionLink}${item.id}`);
                                                     }
                                                     else if (clickType === 'edit') {
-                                                        router.push("".concat(editActionLink).concat(item.id));
+                                                        router.push(`${editActionLink}${item.id}`);
                                                     }
                                                     else {
                                                         // @ts-ignore
                                                         onClickItem(item);
                                                     }
                                                 }
-                                            } }, thBody.map(function (bodyItem, bodyIndex) { return (React.createElement(RowTable, { key: bodyIndex, bodyIndex: bodyIndex, border: border, brSetSelectedPeople: brSetSelectedPeople, directDetail: directDetail, disableSpacing: disableSpacing, editActionLink: editActionLink, isCenterText: isCenterText, itemBody: item, numericalOrder: __assign(__assign({}, 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(function (item, index) { return (
+                                            } }, 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'
@@ -459,26 +445,29 @@ export function PHXTableV3(_a) {
                                                 ? funcItemReadOnly(item)
                                                     ? ''
                                                     : 'hover:cursor-pointer hover:bg-gray-50'
-                                                : '', hidePagination && index === searchDataResult.length - 1 && 'rounded-bl-lg'), onClick: function () {
+                                                : '', hidePagination && index === searchDataResult.length - 1 && 'rounded-bl-lg'), onClick: () => {
                                                 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));
+                                                            ? router.push(`${routerCondition.link}${item.id}`)
+                                                            : router.push(`${editActionLink}${item.id}`);
                                                     }
                                                     else if (clickType === 'edit') {
-                                                        router.push("".concat(editActionLink).concat(item.id));
+                                                        router.push(`${editActionLink}${item.id}`);
                                                     }
                                                     else {
                                                         // @ts-ignore
                                                         onClickItem(item);
                                                     }
                                                 }
-                                            } }, thBody.map(function (bodyItem, bodyIndex) { return (React.createElement(RowTable, { key: bodyIndex, bodyIndex: bodyIndex, border: border, brSetSelectedPeople: brSetSelectedPeople, directDetail: directDetail, disableSpacing: disableSpacing, editActionLink: editActionLink, isCenterText: isCenterText, itemBody: item, numericalOrder: __assign(__assign({}, 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) ||
+                                            } }, 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, __assign({}, emptyStateActionAttribute)) : React.createElement(PHXEmptyRecord, null))) : (React.createElement(React.Fragment, null, enableEmptyStateAction ? (React.createElement(PHXEmptyStateAction, __assign({}, 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 && (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, router: router, searchParams: params, tableKey: tableKey, setCurrentPage: setCurrentPage, setPagi: setPagi, paginationData: paginationData }),
                     React.createElement(Pagination, { count: count, currentPage: currentPage, handleChangePage: handleChangePage, pagination: pagination, router: router, rowQuantity: rowQuantity, totalPages: Math.ceil(count / rowQuantity), searchParams: params, tableKey: tableKey })))))),