Function ModalTable

frontend/src/components/modalTable/index.tsx:13–456

({ columns, ifAllowNew,title, hangleFilterData,isShowNewCreateButton=true, ifOnlyId, defaultSelectedRowKeys, updatePrevButton,ifHideLeftHeader, ifHideFooter=false, dataSource, mode, ifSelect, onChildEvent, id, hasMore, onOpenDrawer, name, handleRecordsSelected }: TableProps)

import NoProject from '../../assets/img/NO_PROJECT.svg?react'
import { TableProps } from '../../constant/index'
function ModalTable({ columns, ifAllowNew,title, hangleFilterData,isShowNewCreateButton=true, ifOnlyId, defaultSelectedRowKeys, updatePrevButton,ifHideLeftHeader, ifHideFooter=false, dataSource, mode, ifSelect, onChildEvent, id, hasMore, onOpenDrawer, name, handleRecordsSelected }: TableProps) {
    const [selectedValue, setSelectedValue] = useState('id_search')
    const [inputValue, setInputValue] = useState('')
    const [scroll, setScroll] = useState({ x: 0, y: 0 });
    const [ifClickPageSizeLimit, setIfClickPageSizeLimit] = useState(false)
    const [flagPrev, setFlagPrev] = useState(false)
    const [originalDataSource, setOriginalDataSource] = useState<any[]>([]);
    const [flagNext, setFlagNext] = useState(false)
    const [nextButtonDisabled, setNextButtonDisabled] = useState(false)
    const [previousButtonDisabled, setPrevButtonDisabled] = useState(true)
    const [isFirstRender, setIsFirstRender] = useState(true);
    const [_filterConfig, setFilterConfig] = useState<any>({
        limit: 20,
        sort_field: 'created_timestamp',
    })
    const [enterPlaceHolder, setEnterPlaceHolder] = useState('Enter Name')
    const empty: Record<string, any> = {
        ['API Key']: <NoApikey style={{ width: '158px', height: '100px' }} />,
        assistant: <NoAssistant style={{ width: '158px', height: '100px' }} />,
        collection: <NoCollection style={{ width: '158px', height: '100px' }} />,
        model: <NoModel style={{ width: '158px', height: '100px' }} />,
        record: <NoRecord style={{ width: '158px', height: '100px' }} />,
        action: <NoTool style={{ width: '158px', height: '100px' }} />,
        plugin: <NoTool style={{ width: '158px', height: '100px' }} />,
        Invoice: <NoRecord style={{ width: '158px', height: '100px' }} />,
        project: <NoProject style={{ width: '158px', height: '100px' }} />,
    }
    const [selectedRowKeys, setSelectedRowKeys] = useState((defaultSelectedRowKeys && defaultSelectedRowKeys.length) ? defaultSelectedRowKeys : []);
    useEffect(() => {
        const updateScroll = () => {
            let tableContainer: HTMLElement | null = document.querySelector('.ant-table-container .ant-table-body table');
            let tableContainerH: HTMLElement | null = document.querySelector('.ant-table-container');
            let modalInnerTable: HTMLElement | null = document.querySelector('.modal-inner-table');
            let modalOpen = true;
            if (modalInnerTable) {
                modalOpen = getComputedStyle(modalInnerTable).display === 'none'
            }
            let elementsWithPrefix: any = document.querySelectorAll('[class*="_drawer-inner-table"]');
            let elementsWithPrefix1: any = document.querySelectorAll('[class*="_drawer-inner-chunk"]');
            let containerWidth = 0;
            let containerHeight = 0;
            if (!modalInnerTable && elementsWithPrefix.length === 0 && elementsWithPrefix1.length === 0) {
                setTimeout(() => {
                    if (!tableContainer) {
                        return
                    }
                    containerWidth = tableContainer.offsetWidth;

                    containerHeight = tableContainerH?.offsetHeight as any;
                    setScroll({
                        x: containerWidth,
                        y: containerHeight - 61
                    });
                }, 0)
            } else if (elementsWithPrefix.length !== 0 && elementsWithPrefix1.length === 0 && modalOpen) {

                setTimeout(() => {
                    let firstElement = elementsWithPrefix[0];