phx-react 1.3.1667 → 1.3.1668

package/dist/cjs/components/TableV6/TableV6.d.ts

@@ -0,0 +1,104 @@
+import React from 'react';
+import { ComplexAction } from '../types';
+import { IEmptyStateAction } from '../EmptyStateAction';
+import { SelectedButtonIcon } from '../TableV3/SelectedAction';
+import { ReadonlyURLSearchParams } from 'next/navigation';
+export interface MainTableV6Props {
+    paginationData: any;
+    isUnaccentSearchValue?: boolean;
+    sortData: any;
+    slectedTitle?: string | any;
+    selectedBtn?: Array<ComplexAction & {
+        icon?: SelectedButtonIcon;
+    }>;
+    pathname?: any;
+    list: {
+        keyResult: string;
+        query: string;
+    } | any;
+    thHeader: Array<any>;
+    thBody: Array<any>;
+    thBodyComponent?: object | any;
+    thBodyFilter?(): any;
+    editActionLink?: string;
+    search: {
+        enable: boolean;
+        keyResult: string;
+        query: string;
+    } | any;
+    selectedAllPeople?: {
+        enable: boolean;
+        title: string;
+        maxSelectedPeople?: number;
+        hideSelectedAction?: boolean;
+    } | any;
+    actionName?: any;
+    sort?: {
+        enable?: boolean;
+        defaultActive?: string;
+        sortList?: Array<any>;
+    } | any;
+    clickRow?: boolean;
+    clickType?: 'edit' | 'custom';
+    router: any;
+    setAggregate?: any;
+    sortSelectData?: any;
+    selectArray?: any;
+    pagination?: any;
+    routerCondition?: {
+        link: string;
+        conditionName: string;
+        conditionArray: Array<any>;
+    } | any;
+    onClick?(rowData: any): any;
+    thHeaderComponent?: any;
+    hidePagination?: boolean;
+    rowNumber?: number;
+    onChange?: any;
+    typeLoading?: {
+        type: 'page-with-table' | 'page-table-with-report' | 'table' | 'page-table-report-filter' | 'page-table-filter';
+        filterQty?: number;
+        reportQty?: number;
+    };
+    setHeaderLoading?: any;
+    directDetail?: {
+        enable: boolean;
+        onClick?(): any;
+    } | any;
+    filterLoading?: boolean;
+    fixedTableLayout?: boolean;
+    numericalOrder?: {
+        enable: boolean;
+        title: string | any;
+        disableSpacing?: boolean;
+        sticky?: boolean;
+    };
+    isQueryDataCenter?: boolean;
+    isQueryDevPortal?: boolean;
+    isSortEmpty?: boolean;
+    emptyStateAction?: IEmptyStateAction & {
+        enable: boolean;
+    };
+    isCustomHeaderSelected?: boolean;
+    disableSpacing?: {
+        disable: boolean;
+        indexStart: number;
+    };
+    border?: boolean;
+    isCenterText?: boolean;
+    searchValueData?(val: string): void;
+    stickyColumnNumber?: number;
+    getDataTable?(val: any): void;
+    stickyColumnNumberRight?: number;
+    isBackgroundReload?: boolean;
+    loaded?: (val: boolean) => void;
+    isResetPagination?: boolean;
+    tableKey?: string;
+    searchParams?: ReadonlyURLSearchParams;
+    completeState?: boolean;
+    completeStateTitle?: string;
+    completeStateDescription?: string;
+    type?: 'default' | 'in-card';
+    title?: string;
+}
+export declare function PHXTableV6({ actionName, clickRow, clickType, directDetail, editActionLink, filterLoading, fixedTableLayout, hidePagination, list, numericalOrder, onChange, onClick, pagination, paginationData, router, routerCondition, rowNumber, search, selectArray, selectedAllPeople, selectedBtn, setAggregate, setHeaderLoading, slectedTitle, sort, sortData, sortSelectData, thBody, thBodyComponent, thBodyFilter, thHeader, thHeaderComponent, typeLoading, isSortEmpty, emptyStateAction, isCustomHeaderSelected, isUnaccentSearchValue, disableSpacing, border, isCenterText, searchValueData, stickyColumnNumber, getDataTable, stickyColumnNumberRight, isBackgroundReload, loaded, isResetPagination, tableKey, searchParams, completeState, completeStateTitle, completeStateDescription, type, title, }: Readonly<MainTableV6Props>): React.JSX.Element;

package/dist/cjs/components/TableV6/TableV6.js

@@ -0,0 +1,521 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PHXTableV6 = PHXTableV6;
+const tslib_1 = require("tslib");
+const react_1 = require("@headlessui/react");
+const solid_1 = require("@heroicons/react/24/solid");
+const react_2 = tslib_1.__importStar(require("react"));
+const Button_1 = require("../Button");
+const EmptyRecord_1 = require("../EmptyRecord");
+const useDebounce_1 = tslib_1.__importDefault(require("../Func/useDebounce"));
+const Loading_1 = require("../Loading");
+const Skeleton_1 = require("../Skeleton");
+const types_1 = require("../types");
+const PHXGrpcClientV6_1 = require("../Func/GRPC/PHXGrpcClientV6");
+const sort_1 = tslib_1.__importDefault(require("../TableV3/sort"));
+const RowTable_1 = require("../TableV3/RowTable");
+const PaginaitonSelectedV5_1 = tslib_1.__importDefault(require("../TableV5/PaginaitonSelectedV5"));
+const PaginationV5_1 = tslib_1.__importDefault(require("../TableV5/PaginationV5"));
+const EmptyStateAction_1 = require("../EmptyStateAction");
+const HeaderTable_1 = tslib_1.__importDefault(require("../TableV3/HeaderTable"));
+const SelectedAction_1 = tslib_1.__importDefault(require("../TableV3/SelectedAction"));
+const helpers_1 = require("../../helpers/helpers");
+const useStickyLeft_1 = require("../TableVertical/useStickyLeft");
+const CompleteState_1 = require("../CompleteState");
+const EmptySearch_1 = require("../EmptySearch");
+function PHXTableV6({ actionName, clickRow = true, clickType = 'edit', directDetail, editActionLink, filterLoading = false, fixedTableLayout = true, hidePagination, 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', title, }) {
+    const checkbox = (0, react_2.useRef)();
+    const [checked, setChecked] = (0, react_2.useState)(false);
+    const [indeterminate, setIndeterminate] = (0, react_2.useState)(false);
+    const [isMainLoading, setIsMainLoading] = (0, react_2.useState)(true);
+    const [dataTable, setDataTable] = (0, react_2.useState)([]);
+    const [selectedPeople, setSelectedPeople] = (0, react_2.useState)([]);
+    const [isSearchLoading, setIsSearchLoading] = (0, react_2.useState)(false);
+    const [searchDataResult, setSearchDataResult] = (0, react_2.useState)([]);
+    const [pagi, setPagi] = (0, react_2.useState)(0);
+    const [numericalOderInPage, setNumericalOderInPage] = (0, react_2.useState)(0);
+    const [count, setCount] = (0, react_2.useState)(0);
+    const timKiemPlacholder = 'Tìm kiếm';
+    const [activeMenu, setActiveMenu] = (0, react_2.useState)(sort === null || sort === void 0 ? void 0 : sort.defaultActive);
+    const [isSelectSort, setIsSelectSort] = (0, react_2.useState)(false);
+    const [isSort, setIsSort] = (0, react_2.useState)(false);
+    const [isSortLoading, setIsSortLoading] = (0, react_2.useState)(false);
+    const [numberOfFetchData, setNumberOfFetchData] = (0, react_2.useState)(0);
+    const [pageInfo, setPageInfo] = (0, react_2.useState)();
+    const [afterRecord, setAfterRecord] = (0, react_2.useState)('');
+    const [beforeRecord, setBeforeRecord] = (0, react_2.useState)('');
+    const numericalOrderDefault = {
+        ...numericalOrder,
+        sticky: !!stickyColumnNumber,
+    };
+    // @ts-ignore
+    const params = new URLSearchParams(searchParams);
+    const [searchValue, setSearchValue] = (0, react_2.useState)(params.get(`search-${tableKey}`) || '');
+    const [isSearch, setIsSearch] = (0, react_2.useState)(!!params.get(`search-${tableKey}`));
+    const entries = Object.fromEntries(params.entries());
+    const [rowQuantity, setRowQuantity] = (0, react_2.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] = (0, react_2.useState)(false);
+    (0, react_2.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 } = (0, useStickyLeft_1.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 } = (0, useStickyLeft_1.useStickyRights)(stickyColumnNumberRight, dataTable);
+    const queryHidePagi = list.query
+        ? list.query.replace(/first\s*:\s*\d+\s*,?|last\s*:\s*\d+\s*,?|after\s*:\s*\d+\s*,?|before\s*:\s*\d+\s*,?/g, '')
+        : '';
+    const queryWithNextPage = (after) => list.query
+        ? list.query
+            .replace(/first\s*:\s*\d+/g, `first: ${rowQuantity}`)
+            .replace(/\bafter\b\s*:\s*(["']).*?\1/g, after ? `after: "${after}"` : '')
+            .replace(/last\s*:\s*\d+/g, '')
+            .replace(/\bbefore\b\s*:\s*(["']).*?\1/g, '')
+        : '';
+    const queryWithPrevPage = (before) => list.query
+        ? list.query
+            .replace(/last\s*:\s*\d+/g, `last: ${rowQuantity}`)
+            .replace(/\bbefore\b\s*:\s*(["']).*?\1/g, before ? `before: "${before}"` : '')
+            .replace(/first\s*:\s*\d+/g, '')
+            .replace(/\bafter\b\s*:\s*(["']).*?\1/g, '')
+        : '';
+    const dataQuery = (after, before) => {
+        switch (true) {
+            case hidePagination:
+                return queryHidePagi;
+            case !!afterRecord:
+                return queryWithNextPage(after);
+            case !!beforeRecord:
+                return queryWithPrevPage(before);
+            default:
+                return queryWithNextPage('');
+        }
+    };
+    const { enable: enableEmptyStateAction, ...emptyStateActionAttribute } = emptyStateAction;
+    const filterQuery = (query, value) => {
+        const formatValue = isUnaccentSearchValue ? (0, helpers_1.unaccentValue)(value) : value;
+        return query.replace(/%@value%/g, `${formatValue}`);
+    };
+    const searchQuery = search && search.query ? filterQuery(search.query, searchValue.trim()) : '';
+    const searchQueryHidePagi = searchQuery
+        .replace(/last\s*:\s*\d+/g, '')
+        .replace(/\bbefore\b\s*:\s*(["']).*?\1/g, '')
+        .replace(/first\s*:\s*\d+/g, '')
+        .replace(/\bafter\b\s*:\s*(["']).*?\1/g, '');
+    const searchQueryWithNextPage = (after) => searchQuery
+        .replace(/first\s*:\s*\d+/g, `first: ${rowQuantity}`)
+        .replace(/\bafter\b\s*:\s*(["']).*?\1/g, after ? `after: "${after}"` : '')
+        .replace(/last\s*:\s*\d+/g, '')
+        .replace(/\bbefore\b\s*:\s*(["']).*?\1/g, '');
+    const searchQueryWithPrevPage = (before) => searchQuery
+        .replace(/last\s*:\s*\d+/g, `last: ${rowQuantity}`)
+        .replace(/\bbefore\b\s*:\s*(["']).*?\1/g, before ? `before: "${before}"` : '')
+        .replace(/first\s*:\s*\d+/g, '')
+        .replace(/\bafter\b\s*:\s*(["']).*?\1/g, '');
+    const searchDataQuery = (after, before) => {
+        switch (true) {
+            case hidePagination:
+                return searchQueryHidePagi;
+            case !!afterRecord:
+                return searchQueryWithNextPage(after);
+            case !!beforeRecord:
+                return searchQueryWithPrevPage(before);
+            default:
+                return searchQueryWithNextPage('');
+        }
+    };
+    const fetchSearchData = async () => {
+        try {
+            const variables = (search === null || search === void 0 ? void 0 : search.persistedId)
+                ? {
+                    ...search === null || search === void 0 ? void 0 : search.variables,
+                    first: rowQuantity,
+                    after: afterRecord,
+                }
+                : {};
+            const queryFn = PHXGrpcClientV6_1.PHXClientQueryV6;
+            return queryFn({
+                query: searchDataQuery(afterRecord, beforeRecord),
+                variables,
+                persistedId: search === null || search === void 0 ? void 0 : search.persistedId,
+                schemaGroup: search === null || search === void 0 ? void 0 : search.schemaGroup,
+            });
+        }
+        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] = (0, react_2.useState)(false);
+    const [previousValue, setPreviousValue] = (0, react_2.useState)(params.get(`search-${tableKey}`) || '');
+    const [currentPage, setCurrentPage] = (0, react_2.useState)(1);
+    const handleChangePage = (page) => {
+        if (page > 0 && page <= Math.ceil(count / rowQuantity)) {
+            setIsChangePageLoading(true);
+            setCurrentPage(page);
+            setPagi(page - 1);
+            paginationData(page - 1);
+        }
+    };
+    (0, react_2.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 ? (0, helpers_1.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);
+        setAfterRecord('');
+        setBeforeRecord('');
+        if (replaceSensitiveValue !== previousValue) {
+            setPreviousValue(replaceSensitiveValue);
+        }
+        if (replaceSensitiveValue.trim().length === 0) {
+            setSearchDataResult(dataTable);
+        }
+        params.set(`search-${tableKey}`, value);
+        params.set(`pagi-${tableKey}`, '1');
+        params.delete(`after-${tableKey}`);
+        params.delete(`before-${tableKey}`);
+        router.push(`?${params + ''}`, { scroll: false });
+    }
+    const debouncedSearch = (0, useDebounce_1.default)(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;
+        setCount(data[dataTable].totalCount);
+        if (setAggregate) {
+            setAggregate(data[dataTable].totalCount);
+        }
+        if (previousValue !== searchValue) {
+            setCurrentPage(1);
+        }
+        setSearchDataResult(data[dataTable].nodes);
+        setIsSearchLoading(false);
+        setIsChangeRowQty(false);
+        setIsChangePageLoading(false);
+        setNumericalOderInPage(pagi);
+        // khi search sẽ reset những row đã select
+        // setSelectedPeople([]);
+    };
+    const paginationWithApplyUrl = () => {
+        let currentPagination = 1;
+        let afterParams = '';
+        let beforeParams = '';
+        if (!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;
+            afterParams = (entries === null || entries === void 0 ? void 0 : entries[`after-${tableKey}`]) ? (entries === null || entries === void 0 ? void 0 : entries[`after-${tableKey}`]) || '' : '';
+            beforeParams = (entries === null || entries === void 0 ? void 0 : entries[`before-${tableKey}`]) ? (entries === null || entries === void 0 ? void 0 : entries[`before-${tableKey}`]) || '' : '';
+        }
+        if (!isChangePageLoading && !hidePagination && !isChangeRowQty) {
+            setCurrentPage(currentPagination);
+            setPagi(currentPagination - 1);
+            paginationData(currentPagination - 1);
+            setAfterRecord(afterParams);
+            setBeforeRecord(beforeParams);
+        }
+        return { currentPagination, afterParams, beforeParams };
+    };
+    const queryData = async () => {
+        let query = dataQuery(afterRecord, beforeRecord);
+        const { afterParams, beforeParams, currentPagination } = paginationWithApplyUrl();
+        if (!isChangePageLoading) {
+            query = dataQuery(afterParams, beforeParams);
+        }
+        try {
+            const variables = (list === null || list === void 0 ? void 0 : list.persistedId)
+                ? {
+                    ...list === null || list === void 0 ? void 0 : list.variables,
+                    first: rowQuantity,
+                    after: !isChangePageLoading ? afterParams : afterRecord,
+                }
+                : {};
+            const queryFn = PHXGrpcClientV6_1.PHXClientQueryV6;
+            const data = getData(searchValue
+                ? await fetchSearchData()
+                : await queryFn({
+                    query,
+                    variables,
+                    persistedId: list === null || list === void 0 ? void 0 : list.persistedId,
+                    schemaGroup: list === null || list === void 0 ? void 0 : list.schemaGroup,
+                }));
+            if (!data)
+                return;
+            if (!isBackgroundReload || (numberOfFetchData === 0 && isBackgroundReload)) {
+                setIsMainLoading(true);
+            }
+            const dataTable = list.keyResult;
+            bindDataToTable(data[dataTable].nodes);
+            setCount(data[dataTable].totalCount);
+            setPageInfo(data[dataTable].pageInfo);
+            if (setAggregate) {
+                setAggregate(data[dataTable].totalCount);
+            }
+            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);
+        }
+    };
+    (0, react_2.useEffect)(() => {
+        if (!searchValue || numberOfFetchData === 0 || !(search === null || search === void 0 ? void 0 : search.enable)) {
+            queryData();
+        }
+        else if (debouncedSearch) {
+            handleSearch();
+        }
+    }, [pagi, debouncedSearch]);
+    (0, react_2.useEffect)(() => {
+        if (!isNaN(Number(pagination))) {
+            setCurrentPage(Number(pagination) + 1);
+        }
+    }, [pagination]);
+    (0, react_2.useEffect)(() => {
+        if (dataTable) {
+            setIsSortLoading(false);
+        }
+        if (getDataTable && dataTable.length) {
+            getDataTable(dataTable);
+        }
+    }, [dataTable]);
+    (0, react_2.useEffect)(() => {
+        if ((!isChangePageLoading && filterLoading && !isSortLoading) || isChangeRowQty) {
+            queryData();
+            if (!isBackgroundReload || (numberOfFetchData === 0 && isBackgroundReload)) {
+                setIsMainLoading(true);
+            }
+            setSelectedPeople([]);
+        }
+        if (search && search.enable && isChangePageLoading) {
+            setIsSearchLoading(true);
+        }
+    }, [list, afterRecord, beforeRecord, rowQuantity]);
+    (0, react_2.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);
+        }
+    };
+    return (react_2.default.createElement(react_2.default.Fragment, null,
+        isMainLoading ? (react_2.default.createElement(Skeleton_1.PHXSkeleton, { filterQty: typeLoading === null || typeLoading === void 0 ? void 0 : typeLoading.filterQty, reportQty: typeLoading === null || typeLoading === void 0 ? void 0 : typeLoading.reportQty, type: typeLoading.type })) : (react_2.default.createElement(react_2.default.Fragment, null,
+            title && react_2.default.createElement("div", { className: 'mb-4 text-sm font-semibold leading-5 text-gray-900' }, title),
+            react_2.default.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_2.default.createElement("div", { className: 'flex flex-col' },
+                    (dataTable.length > 0 ||
+                        (dataTable.length === 0 && isSearch) ||
+                        (dataTable.length === 0 && isSelectSort) ||
+                        (dataTable.length === 0 && isSort) ||
+                        (dataTable.length === 0 && (sort === null || sort === void 0 ? void 0 : sort.enable))) && (react_2.default.createElement("div", { className: (0, types_1.classNames)(isSortEmpty && dataTable.length === 0 && !isSearch ? 'hidden' : 'min-w-full align-middle', (sort && sort.enable) || (search && search.enable) ? 'min-h-11' : '') },
+                        react_2.default.createElement(react_1.Transition, { as: react_2.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_2.default.createElement("div", { className: (0, types_1.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_2.default.createElement("div", { className: 'relative mr-2 w-11/12' },
+                                    react_2.default.createElement("input", { autoFocus: true, className: 'block w-full rounded-lg border-transparent bg-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_2.default.createElement("div", { className: 'flex w-14 justify-center pt-1' }, isSearchLoading ? react_2.default.createElement(Loading_1.PHXSpinner, null) : null),
+                                react_2.default.createElement("div", null,
+                                    react_2.default.createElement("button", { className: 'inline-flex items-center rounded-lg border-gray-300 px-2 py-1 text-xs font-medium text-gray-700 hover:bg-gray-200', onClick: () => {
+                                            setIsSearch(false);
+                                            searchSetValue('');
+                                            params.delete(`search-${tableKey}`);
+                                            router.push(`?${params + ''}`, { scroll: false });
+                                        }, type: 'button' }, "Cancel")))),
+                        react_2.default.createElement("div", { className: (0, types_1.classNames)((sort && sort.enable) || (search && search.enable)
+                                ? `flex flex-row items-center rounded-tl-lg rounded-tr-lg 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_2.default.createElement(react_2.default.Fragment, null,
+                                react_2.default.createElement(sort_1.default, { activeMenu: activeMenu, className: 'w-11/12', isSearch: isSearch, onChange: sortOnChange, onChangeSelect: sortSelectOnchange, selectArray: selectArray, sortList: sort.sortList }),
+                                react_2.default.createElement("div", { className: 'flex justify-center lg:w-14' }, isSortLoading ? react_2.default.createElement(Loading_1.PHXSpinner, null) : null))) : null,
+                            !isSearch && (search === null || search === void 0 ? void 0 : search.enable) && (react_2.default.createElement("div", { className: 'mr-3 flex justify-center' }, isChangePageLoading ? react_2.default.createElement(Loading_1.PHXSpinner, null) : null)),
+                            search && search.enable && (react_2.default.createElement("div", { className: 'rounded-lg bg-white' }, !isSearch && (react_2.default.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_2.default.createElement(solid_1.MagnifyingGlassIcon, { className: 'h-4 w-4' })))))))),
+                    dataTable.length > 0 || isSearch ? (react_2.default.createElement("div", { className: 'relative' }, searchDataResult.length > 0 && !isMainLoading ? (react_2.default.createElement("div", { className: '-my-2 overflow-x-auto' },
+                        react_2.default.createElement("div", { className: (0, types_1.classNames)('min-w-full pb-2 align-middle ring-black ring-opacity-5', (search && search.enable) || (sort && sort.enable) ? '' : 'pt-0.5') },
+                            react_2.default.createElement("div", { className: (0, types_1.classNames)('relative overflow-auto', (search && search.enable) || (sort && sort.enable)
+                                    ? 'ring-1 ring-black ring-opacity-5'
+                                    : 'mt-1.5') },
+                                react_2.default.createElement(react_2.default.Fragment, null, selectedAllPeople && selectedAllPeople.enable ? (react_2.default.createElement(react_2.default.Fragment, null, selectedPeople.length > 0 && selectedAllPeople.title && (react_2.default.createElement("div", { className: 'absolute left-12 top-4 flex h-fit items-center space-x-3 bg-gray-50 sm:left-16' },
+                                    react_2.default.createElement(Button_1.PHXButton, { onClick: actionClickAll, secondary: true, size: 'micro' }, selectedAllPeople.title))))) : null),
+                                react_2.default.createElement("table", { className: (0, types_1.classNames)('min-w-full divide-y divide-gray-300', fixedTableLayout ? 'table-fixed' : '', (search && search.enable) || (sort && sort.enable) ? 'border-t' : '') },
+                                    thHeaderComponent ? (react_2.default.createElement(react_2.default.Fragment, null, selectedAllPeople && selectedAllPeople.enable && isCustomHeaderSelected ? (react_2.default.createElement(react_2.default.Fragment, null, thHeaderComponent(react_2.default.createElement("th", { className: 'relative w-12 rounded-lg px-6 py-2.5 sm:w-16 sm:px-8', scope: 'col' },
+                                        react_2.default.createElement("input", { ref: checkbox, checked: checked, className: 'absolute left-4 top-1/2 -mt-2 block h-4 w-4 rounded border-[0.5px] border-gray-500 text-indigo-800 hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent sm:left-6', onChange: toggleAll, type: 'checkbox' }))))) : (react_2.default.createElement(react_2.default.Fragment, null, thHeaderComponent)))) : (react_2.default.createElement("thead", null,
+                                        react_2.default.createElement(HeaderTable_1.default, { border: border, checkbox: checkbox, checked: checked, disableSpacing: disableSpacing, isCenterText: isCenterText, numericalOrder: 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_2.default.createElement("tbody", { className: 'divide-y divide-gray-200' }, searchValue === ''
+                                        ? dataTable.map((item, index) => (
+                                        // @ts-ignore
+                                        react_2.default.createElement("tr", { key: item.rowId, className: (0, types_1.classNames)(clickRow && !funcItemReadOnly ? 'hover:cursor-pointer hover:bg-gray-50' : '', renderInclude(item) && !(item === null || item === void 0 ? void 0 : item.entered_school) && (selectedAllPeople === null || selectedAllPeople === void 0 ? void 0 : selectedAllPeople.enable)
+                                                ? 'bg-gray-50'
+                                                : '', funcItemReadOnly && clickType === 'custom'
+                                                ? funcItemReadOnly(item)
+                                                    ? ''
+                                                    : 'hover:cursor-pointer hover:bg-gray-50'
+                                                : ''), onClick: () => {
+                                                if (clickRow) {
+                                                    if (routerCondition) {
+                                                        // eslint-disable-next-line no-unused-expressions
+                                                        checkConditionRouter(item)
+                                                            ? router.push(`${routerCondition.link}${item.rowId}`)
+                                                            : router.push(`${editActionLink}${item.rowId}`);
+                                                    }
+                                                    else if (clickType === 'edit') {
+                                                        router.push(`${editActionLink}${item.rowId}`);
+                                                    }
+                                                    else {
+                                                        // @ts-ignore
+                                                        onClickItem(item);
+                                                    }
+                                                }
+                                            } }, thBody.map((bodyItem, bodyIndex) => (react_2.default.createElement(RowTable_1.RowTable, { key: bodyIndex, bodyIndex: bodyIndex, border: border, brSetSelectedPeople: brSetSelectedPeople, directDetail: directDetail, disableSpacing: disableSpacing, editActionLink: editActionLink, isCenterText: isCenterText, itemBody: item, numericalOrder: {
+                                                ...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_2.default.createElement("tr", { key: item.rowId, className: (0, types_1.classNames)(clickRow && !funcItemReadOnly ? 'hover:cursor-pointer hover:bg-gray-50' : '', renderInclude(item) && !(item === null || item === void 0 ? void 0 : item.entered_school) && (selectedAllPeople === null || selectedAllPeople === void 0 ? void 0 : selectedAllPeople.enable)
+                                                ? 'bg-gray-50'
+                                                : '', funcItemReadOnly && clickType === 'custom'
+                                                ? funcItemReadOnly(item)
+                                                    ? ''
+                                                    : 'hover:cursor-pointer hover:bg-gray-50'
+                                                : '', hidePagination && index === searchDataResult.length - 1 && 'rounded-bl-lg'), onClick: () => {
+                                                if (clickRow) {
+                                                    if (routerCondition) {
+                                                        // eslint-disable-next-line no-unused-expressions
+                                                        checkConditionRouter(item)
+                                                            ? router.push(`${routerCondition.link}${item.rowId}`)
+                                                            : router.push(`${editActionLink}${item.rowId}`);
+                                                    }
+                                                    else if (clickType === 'edit') {
+                                                        router.push(`${editActionLink}${item.rowId}`);
+                                                    }
+                                                    else {
+                                                        // @ts-ignore
+                                                        onClickItem(item);
+                                                    }
+                                                }
+                                            } }, thBody.map((bodyItem, bodyIndex) => (react_2.default.createElement(RowTable_1.RowTable, { key: bodyIndex, bodyIndex: bodyIndex, border: border, brSetSelectedPeople: brSetSelectedPeople, directDetail: directDetail, disableSpacing: disableSpacing, editActionLink: editActionLink, isCenterText: isCenterText, itemBody: item, numericalOrder: {
+                                                ...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_2.default.createElement(EmptySearch_1.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_2.default.createElement(react_2.default.Fragment, null, enableEmptyStateAction ? react_2.default.createElement(EmptyStateAction_1.PHXEmptyStateAction, { ...emptyStateActionAttribute }) : react_2.default.createElement(EmptyRecord_1.PHXEmptyRecord, null))) : (react_2.default.createElement(react_2.default.Fragment, null, enableEmptyStateAction ? (react_2.default.createElement(EmptyStateAction_1.PHXEmptyStateAction, { ...emptyStateActionAttribute })) : completeState ? (react_2.default.createElement(CompleteState_1.PHXCompleteState, { title: completeStateTitle || 'Hoàn tất duyệt đơn!', description: completeStateDescription || 'Tất cả đơn đăng ký đã được duyệt.' })) : (react_2.default.createElement(EmptyRecord_1.PHXEmptyRecord, null))))),
+                dataTable.length > 0 && !hidePagination && (react_2.default.createElement("div", { className: 'flex items-center justify-between rounded-lg rounded-tl-none rounded-tr-none border-t border-gray-200 bg-[#F9FAFB] py-2 pl-7 pr-2' },
+                    react_2.default.createElement(PaginaitonSelectedV5_1.default, { rowQuantity: rowQuantity, setIsChangeRowQty: setIsChangeRowQty, setRowQuantity: setRowQuantity, router: router, searchParams: params, tableKey: tableKey, setCurrentPage: setCurrentPage, setPagi: setPagi, paginationData: paginationData, setAfterRecord: setAfterRecord, setBeforeRecord: setBeforeRecord }),
+                    react_2.default.createElement(PaginationV5_1.default, { count: count, currentPage: currentPage, handleChangePage: handleChangePage, pagination: pagination, router: router, rowQuantity: rowQuantity, totalPages: Math.ceil(count / rowQuantity), searchParams: params, tableKey: tableKey, setAfterRecord: setAfterRecord, setBeforeRecord: setBeforeRecord, pageInfo: pageInfo })))))),
+        (selectedAllPeople === null || selectedAllPeople === void 0 ? void 0 : selectedAllPeople.enable) && !(selectedAllPeople === null || selectedAllPeople === void 0 ? void 0 : selectedAllPeople.hideSelectedAction) && (react_2.default.createElement(SelectedAction_1.default, { selectedBtn: selectedBtn, selectedPeople: selectedPeople, slectedTitle: slectedTitle, toggleAll: toggleAll }))));
+}
+//# sourceMappingURL=TableV6.js.map