postnet-front/src/modules/Table/Table.jsx

import React, { useCallback, useRef, useState } from "react";
import { Collapse, Empty, Table as AntdTable } from "antd";
import "./Table.css";
import { useQuery } from "@tanstack/react-query";
import { api } from "../../api";
import parse from "wellknown";
import { useMap } from "react-map-gl";
import { usePointSelection } from "../../stores/usePointSelection";
import { useFilters } from "../../stores/useFilters";

const columns = [
  {
    title: "Id",
    dataIndex: "id",
    key: "id",
    width: "20px",
    ellipsis: true,
  },
  {
    title: "Статус",
    dataIndex: "status",
    key: "status",
    width: "120px",
    ellipsis: true,
  },
  {
    title: "Категория",
    dataIndex: "category",
    key: "category",
    width: "120px",
    ellipsis: true,
  },
  {
    title: "Прогноз",
    dataIndex: "prediction",
    key: "prediction",
    width: "120px",
    ellipsis: true,
  },
  {
    title: "Зрелость",
    dataIndex: "age",
    key: "age",
    width: "120px",
    ellipsis: true,
  },
  {
    title: "План",
    dataIndex: "plan",
    key: "plan",
    width: "120px",
    ellipsis: true,
  },
  {
    title: "Факт",
    dataIndex: "fact",
    key: "fact",
    width: "120px",
    ellipsis: true,
  },
  {
    title: "Дельта",
    dataIndex: "delta",
    key: "delta",
    width: "120px",
    ellipsis: true,
  },
  {
    title: "АО",
    dataIndex: "okrug",
    key: "okrug",
    width: "120px",
    ellipsis: true,
  },
  {
    title: "Район",
    dataIndex: "rayon",
    key: "rayon",
    width: "120px",
    ellipsis: true,
  },
];

const PAGE_SIZE = 30;

export const Table = React.memo(({ height = 200 }) => {
  const { map } = useMap();
  const tableRef = useRef(null);
  const [page, setPage] = useState(1);

  const { filters } = useFilters();
  const { include, selection, exclude } = usePointSelection();

  const { data } = useQuery(
    ["table", page, filters],
    async () => {
      const { data } = await api.get(
        `/api/placement_points?page=${page}&page_size=${PAGE_SIZE}&prediction=${filters.prediction}`
      );

      return data;
    },
    { keepPreviousData: true }
  );

  const SCROLL = {
    y: `${height}px`,
    x: "max-content",
  };

  const handlePageChange = useCallback((page) => setPage(page), []);

  const getSelectedRowKeys = () => {
    const ids = data?.results.map((item) => item.id) ?? [];
    return [
      ...ids.filter((id) => !selection.excluded.has(id)),
      ...selection.included,
    ];
  };

  const rowSelection = {
    selectedRowKeys: getSelectedRowKeys(),
    onSelect: (record, selected) => {
      const { id } = record;
      if (selected) {
        include(id);
      } else {
        exclude(id);
      }
    },
  };

  return (
    <div className="w-screen">
      <Collapse>
        <Collapse.Panel key="1" header="Таблица атрибутов">
          <AntdTable
            ref={tableRef}
            className="table"
            size="small"
            // rowSelection={rowSelection}
            locale={{ emptyText: <Empty description="Нет данных" /> }}
            // loading={isLoading}
            pagination={{
              pageSize: PAGE_SIZE,
              hideOnSinglePage: true,
              current: page,
              onChange: handlePageChange,
              total: data?.count,
              showSizeChanger: false,
              position: "bottomCenter",
            }}
            dataSource={data?.results}
            columns={columns}
            rowKey="id"
            scroll={SCROLL}
            sticky={true}
            onRow={(record) => {
              return {
                onClick: () => {
                  const geometry = parse(record.geometry);
                  // const feature = {
                  //   properties: record,
                  //   geometry,
                  // };
                  map.flyTo({
                    center: [geometry.coordinates[0], geometry.coordinates[1]],
                    zoom: 15,
                    speed: 5,
                  });
                },
              };
            }}
            rowSelection={rowSelection}
          />
        </Collapse.Panel>
      </Collapse>
    </div>
  );
});