pagamio-frontend-commons-lib/lib/dashboard-visuals/components/molecules/DataGrid.js

Pagamio library for Frontend reusable components like the form engine and table container

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ActionIcon, Tooltip } from '@mantine/core';
import { IconCopy } from '@tabler/icons-react';
import { useCallback, useMemo, useState } from 'react';
import { usePaginatedApiSWR } from '../../../api';
import PagamioTable from '../../../pagamio-table/data-table';
import { DashboardPaths } from '../../utils';
import Card from '../CardWrapper';
import ErrorState from '../ErrorState';
const DataGrid = ({ dataGridQuery, columns, searchInputPlaceHolder, searchKey, title, }) => {
    const [sortBy, setSortBy] = useState(undefined);
    const [sortDir, setSortDir] = useState(undefined);
    const [searchQuery, setSearchQuery] = useState('');
    const [currentPage, setCurrentPage] = useState(0);
    const [appliedSearchQuery, setAppliedSearchQuery] = useState('');
    const [itemsPerPage, setItemsPerPage] = useState(10);
    const url = DashboardPaths.PAGED;
    const defaultSortByData = { sortBy: 'asc' };
    const enhancedColumns = useMemo(() => {
        return columns.map((column) => {
            const extendedColumn = column;
            if (extendedColumn.enableCopy) {
                return {
                    ...extendedColumn,
                    // eslint-disable-next-line @typescript-eslint/naming-convention
                    Cell: ({ cell }) => (_jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx("span", { children: cell.getValue() }), _jsx(Tooltip, { label: "Copy", children: _jsx(ActionIcon, { size: "xs", onClick: () => navigator.clipboard.writeText(cell.getValue()), style: { marginLeft: 8 }, children: _jsx(IconCopy, { size: 16 }) }) })] })),
                };
            }
            if (extendedColumn.formattedCellElement) {
                return {
                    ...extendedColumn,
                    // eslint-disable-next-line @typescript-eslint/naming-convention
                    Cell: ({ row }) => {
                        return extendedColumn.formattedCellElement(row.original);
                    },
                };
            }
            return column;
        });
    }, [columns]);
    // Build the query parameters
    const queryParams = useMemo(() => {
        let resolvedSortDirection;
        if (sortDir) {
            resolvedSortDirection = sortDir === 'asc' ? 'ASC' : 'DESC';
        }
        else {
            resolvedSortDirection = dataGridQuery.sortDirection;
        }
        return JSON.stringify({
            ...dataGridQuery,
            filters: appliedSearchQuery
                ? { [searchKey]: appliedSearchQuery, ...dataGridQuery.filters }
                : dataGridQuery.filters,
            sortBy: sortBy ?? dataGridQuery.sortBy,
            sortDirection: resolvedSortDirection,
            page: currentPage,
            size: itemsPerPage,
        });
    }, [dataGridQuery, appliedSearchQuery, searchKey, sortBy, sortDir, currentPage, itemsPerPage]);
    // Use SWR for data fetching
    const { data: response, error, mutate, } = usePaginatedApiSWR([url, queryParams], {
        method: 'POST',
        body: queryParams,
    });
    const tableData = response?.content ?? [];
    const totalItems = response?.totalElements ?? 0;
    const totalPages = response?.totalPages ?? 0;
    const handleRetry = useCallback(() => {
        mutate().then();
    }, [mutate]);
    const handleSort = useCallback((sortKey, sortDirection) => {
        setSortBy(sortKey);
        setSortDir(sortDirection);
        setCurrentPage(0);
    }, []);
    const handleSearch = (e) => {
        setSearchQuery(e.target.value);
    };
    const handleSearchTable = () => {
        setAppliedSearchQuery(searchQuery);
        setCurrentPage(0);
    };
    const handlePageChange = (page) => {
        setCurrentPage(page);
    };
    const handleItemsPerPageChange = useCallback((pageIndex, pageSize) => {
        setItemsPerPage(pageSize);
        setCurrentPage(0);
    }, []);
    const handleClearFilters = useCallback(() => {
        setSearchQuery('');
        setAppliedSearchQuery('');
        setCurrentPage(0);
        setSortBy(undefined);
        setSortDir(undefined);
    }, []);
    const sortConfig = sortBy ? { sortBy, sortDir: sortDir } : defaultSortByData;
    const renderContent = () => {
        if (error) {
            return _jsx(ErrorState, { error: error, onRetry: handleRetry });
        }
        return (_jsx("div", { className: "mt-[19px]", children: _jsx(PagamioTable, { columns: enhancedColumns, data: tableData, addButton: false, rowCount: totalItems, searctInputPlaceHolder: searchInputPlaceHolder, pagination: {
                    enabled: true,
                    pageIndex: currentPage,
                    totalPages: totalPages,
                    onPageChange: handlePageChange,
                    pageSize: itemsPerPage,
                    itemsPerPage,
                    itemsPerPageOptions: [10, 20, 50],
                    onPaginationChange: handleItemsPerPageChange,
                }, sorting: {
                    multiSorting: false,
                    sortConfig: sortConfig,
                    onSort: handleSort,
                }, search: {
                    enabled: true,
                    searchQuery,
                    onSearch: handleSearch,
                }, handleSearchTable: handleSearchTable, onClearFilters: handleClearFilters, sortable: true, showApplyFilterButton: true, enableManualSorting: true, enableManualPagination: true, enablePagination: true, showClearFilters: true, exportable: true, enableGlobalFilters: false }) }));
    };
    return _jsx(Card, { title: title, children: renderContent() });
};
export default DataGrid;