WhiteNightsAdminPanel/src/pages/route/list.tsx

import { type GridColDef } from "@mui/x-data-grid";
import { CustomDataGrid } from "../../components/CustomDataGrid";
import {
  DeleteButton,
  EditButton,
  List,
  ShowButton,
  useDataGrid,
} from "@refinedev/mui";
import { Button, Typography } from "@mui/material";
import React from "react";
import MapIcon from "@mui/icons-material/Map";

import { localeText } from "../../locales/ru/localeText";
import { useLink } from "@refinedev/core";
import { observer } from "mobx-react-lite";
import { languageStore, META_LANGUAGE } from "@stores";

export const RouteList = observer(() => {
  const Link = useLink();
  const { language } = languageStore;
  const { dataGridProps } = useDataGrid({
    resource: "route/",
    meta: META_LANGUAGE(language),
  });

  const columns = React.useMemo<GridColDef[]>(
    () => [
      {
        field: "id",
        headerName: "ID",
        type: "number",
        minWidth: 70,
        display: "flex",
        align: "left",
        headerAlign: "left",
      },
      {
        field: "carrier_id",
        headerName: "ID перевозчика",
        type: "number",
        minWidth: 150,
        display: "flex",
        align: "left",
        headerAlign: "left",
      },
      {
        field: "carrier",
        headerName: "Перевозчик",
        type: "string",
        minWidth: 150,
        display: "flex",
        align: "left",
        headerAlign: "left",
      },
      {
        field: "route_number",
        headerName: "Номер маршрута",
        type: "string",
        minWidth: 150,
        display: "flex",
        align: "left",
        flex: 1,
        headerAlign: "left",
      },
      {
        field: "route_sys_number",
        headerName: "Номер маршрута в Говорящем Городе",
        type: "string",
        minWidth: 120,
        display: "flex",

        align: "left",
        headerAlign: "left",
      },
      {
        field: "governor_appeal",
        headerName: "Обращение губернатора",
        type: "number",
        minWidth: 120,
        display: "flex",
        align: "left",
        headerAlign: "left",
      },
      {
        field: "scale_min",
        headerName: "Масштаб (мин)",
        type: "number",
        minWidth: 120,
        display: "flex",
        align: "left",
        headerAlign: "left",
      },
      {
        field: "scale_max",
        headerName: "Масштаб (макс)",
        type: "number",
        minWidth: 120,
        display: "flex",
        align: "left",
        headerAlign: "left",
      },
      {
        field: "rotate",
        headerName: "Поворот",
        type: "number",
        minWidth: 120,
        display: "flex",
        align: "left",
        headerAlign: "left",
      },
      {
        field: "center_latitude",
        headerName: "Центр. широта",
        type: "number",
        minWidth: 120,
        display: "flex",
        align: "left",
        headerAlign: "left",
      },
      {
        field: "center_longitude",
        headerName: "Центр. долгота",
        type: "number",
        minWidth: 120,
        display: "flex",
        align: "left",
        headerAlign: "left",
      },
      {
        field: "route_direction",
        headerName: "Направление маршрута",
        type: "boolean",
        display: "flex",
        flex: 1,
        align: "left",
        headerAlign: "left",
        minWidth: 120,
        renderCell: ({ value }) => (
          <Typography style={{ color: value ? "#48989f" : "#7f6b58" }}>
            {value ? "прямое" : "обратное"}
          </Typography>
        ),
      },
      {
        field: "actions",
        headerName: "Действия",
        cellClassName: "route-actions",
        align: "right",
        headerAlign: "center",
        minWidth: 160,
        display: "flex",
        sortable: false,
        filterable: false,
        disableColumnMenu: true,
        renderCell: function render({ row }) {
          return (
            <>
              <EditButton hideText recordItemId={row.id} />
              <Link to={`/route-preview/${row.id}`}>
                <Button sx={{ minWidth: 0 }}>
                  <MapIcon fontSize="small" />
                </Button>
              </Link>
              <ShowButton hideText recordItemId={row.id} />
              <DeleteButton
                hideText
                confirmTitle="Вы уверены?"
                recordItemId={row.id}
              />
            </>
          );
        },
      },
    ],
    []
  );

  return (
    <List>
      <CustomDataGrid
        {...dataGridProps}
        columns={columns}
        localeText={localeText}
        getRowId={(row: any) => row.id}
        languageEnabled
      />
    </List>
  );
});