frontend/src/modules/ListView/components/TableView/TableView.tsx - master - softailor/gridient

frontend/src/modules/ListView/components/TableView/TableView.tsx
113 строк3 KB
Jenkins
Auto add
18 фев 2026, 10:19
18 фев 2026, 10:191e6c4f8
import { FC, useEffect, useRef, useState } from "react";

import { TablePaginationConfig } from "antd";
import { ColumnType, FilterValue, SorterResult } from "antd/es/table/interface";
import { useNavigate } from "react-router-dom";

import { FieldType } from "consts";
import { SortItem } from "models";
import { useGetElementsQuery } from "services";
import { Table } from "ui";

import { getViewData } from "../../utils";
import { useListViewContext } from "../ListViewContext";

import { getTableColumns } from "./utils";

import "./TableView.scss";

type TableRowData = {
  key: string;
  ItemId: string;
};

export const TableView: FC = () => {
  const navigate = useNavigate();

  const { listId, currentView, filters, selectedUserFilter } = useListViewContext();

  const [pagination, setPagination] = useState<TablePaginationConfig>({
    defaultPageSize: 10,
    current: 1,
    showSizeChanger: true,
    pageSizeOptions: ["10", "30", "50", "100"],
    showTotal: (total: number) => `Всего записей: ${total}`,
  });

  const [sorting, setSorting] = useState<SortItem | null>(null);
  const prevListIdRef = useRef<number | undefined>(listId);

  // Сбрасываем пагинацию и сортировку при изменении listId
  useEffect(() => {
    if (prevListIdRef.current !== listId) {
      // eslint-disable-next-line react-hooks/set-state-in-effect
      setPagination((prev) => ({ ...prev, current: 1 }));

      setSorting(null);
      prevListIdRef.current = listId;
    }
  }, [listId]);

  const tableFilters = filters.length > 0 ? filters : selectedUserFilter?.filterValue || [];

  const { data, isLoading } = useGetElementsQuery(
    {
      listId,
      skip: (pagination.pageSize ?? 10) * (pagination.current! - 1),
      take: pagination.pageSize ?? 10,
      filters: tableFilters,
      sorting,
    },
    {
      skip: !listId,
    },
  );

  const handleTableChange = (
    paginationConfig: TablePaginationConfig,
    _: Record<string, FilterValue | null>,
    sorter: SorterResult<TableRowData> | SorterResult<TableRowData>[],
  ) => {
    const sorterResult = Array.isArray(sorter) ? sorter[0] : sorter;

    if (sorterResult && sorterResult.field) {
      setSorting({
        sortOrder: sorterResult.order ?? null,
        sortField: sorterResult.field.toString(),
        fieldType:
          (sorterResult.column as ColumnType<TableRowData> & { fieldType?: FieldType })
            ?.fieldType ?? null,
      });
    } else {
      setSorting(null);
    }

    setPagination({
      ...pagination,
      current: paginationConfig.current,
      pageSize: paginationConfig.pageSize,
    });
  };

  const tableColumns = currentView
    ? getTableColumns(
        [...currentView.fields].sort((a, b) => (a.viewOrder ?? 0) - (b.viewOrder ?? 0)),
      )
    : [];

  return (
    <Table<TableRowData>
      dataSource={getViewData(data?.values)}
      columns={tableColumns}
      loading={isLoading}
      pagination={{ ...pagination, total: data?.total }}
      onChange={handleTableChange}
      scroll={{ x: "auto" }}
      onRow={(record: TableRowData) => {
        return {
          onClick: () => navigate(`${record.key}`),
        };
      }}
    />
  );
};