181 lines
4.3 KiB
TypeScript
181 lines
4.3 KiB
TypeScript
import React, { useEffect, useMemo } from "react";
|
|
import { type GridColDef } from "@mui/x-data-grid";
|
|
import {
|
|
DeleteButton,
|
|
EditButton,
|
|
List,
|
|
ShowButton,
|
|
useDataGrid,
|
|
} from "@refinedev/mui";
|
|
import { Stack, Typography } from "@mui/material";
|
|
import { CustomDataGrid } from "../../components/CustomDataGrid";
|
|
import { localeText } from "../../locales/ru/localeText";
|
|
import { cityStore } from "../../store/CityStore";
|
|
import { observer } from "mobx-react-lite";
|
|
import { languageStore } from "../../store/LanguageStore";
|
|
|
|
export const StationList = observer(() => {
|
|
const { city_id } = cityStore;
|
|
const { language } = languageStore;
|
|
|
|
const { dataGridProps } = useDataGrid({
|
|
resource: "station",
|
|
meta: {
|
|
headers: {
|
|
"Accept-Language": language,
|
|
},
|
|
},
|
|
filters: {
|
|
permanent: [
|
|
{
|
|
field: "cityID",
|
|
operator: "eq",
|
|
value: city_id === "0" ? null : city_id,
|
|
},
|
|
],
|
|
},
|
|
});
|
|
|
|
const columns = React.useMemo<GridColDef[]>(
|
|
() => [
|
|
{
|
|
field: "id",
|
|
headerName: "ID",
|
|
type: "number",
|
|
minWidth: 70,
|
|
display: "flex",
|
|
align: "left",
|
|
headerAlign: "left",
|
|
},
|
|
{
|
|
field: "name",
|
|
headerName: "Название",
|
|
type: "string",
|
|
minWidth: 300,
|
|
display: "flex",
|
|
align: "left",
|
|
headerAlign: "left",
|
|
flex: 1,
|
|
},
|
|
{
|
|
field: "system_name",
|
|
headerName: "Системное название",
|
|
type: "string",
|
|
minWidth: 200,
|
|
display: "flex",
|
|
align: "left",
|
|
headerAlign: "left",
|
|
flex: 1,
|
|
},
|
|
{
|
|
field: "direction",
|
|
headerName: "Направление",
|
|
type: "boolean",
|
|
minWidth: 200,
|
|
display: "flex",
|
|
|
|
renderCell: ({ value }) => (
|
|
<Typography style={{ color: value ? "#48989f" : "#7f6b58" }}>
|
|
{value ? "прямой" : "обратный"}
|
|
</Typography>
|
|
),
|
|
},
|
|
{
|
|
field: "latitude",
|
|
headerName: "Широта",
|
|
type: "number",
|
|
minWidth: 150,
|
|
display: "flex",
|
|
align: "left",
|
|
headerAlign: "left",
|
|
},
|
|
{
|
|
field: "longitude",
|
|
headerName: "Долгота",
|
|
type: "number",
|
|
minWidth: 150,
|
|
display: "flex",
|
|
align: "left",
|
|
headerAlign: "left",
|
|
},
|
|
{
|
|
field: "city_id",
|
|
headerName: "ID города",
|
|
type: "number",
|
|
minWidth: 120,
|
|
display: "flex",
|
|
align: "left",
|
|
headerAlign: "left",
|
|
},
|
|
{
|
|
field: "offset_x",
|
|
headerName: "Смещение (X)",
|
|
type: "number",
|
|
minWidth: 120,
|
|
display: "flex",
|
|
align: "left",
|
|
headerAlign: "left",
|
|
},
|
|
{
|
|
field: "offset_y",
|
|
headerName: "Смещение (Y)",
|
|
type: "number",
|
|
minWidth: 120,
|
|
display: "flex",
|
|
align: "left",
|
|
headerAlign: "left",
|
|
},
|
|
// {
|
|
// field: "description",
|
|
// headerName: "Описание",
|
|
// type: "string",
|
|
// display: "flex",
|
|
// align: "left",
|
|
// headerAlign: "left",
|
|
// flex: 1,
|
|
// },
|
|
{
|
|
field: "actions",
|
|
headerName: "Действия",
|
|
cellClassName: "station-actions",
|
|
align: "right",
|
|
headerAlign: "center",
|
|
minWidth: 120,
|
|
display: "flex",
|
|
sortable: false,
|
|
filterable: false,
|
|
disableColumnMenu: true,
|
|
renderCell: function render({ row }) {
|
|
return (
|
|
<>
|
|
<EditButton hideText recordItemId={row.id} />
|
|
<ShowButton hideText recordItemId={row.id} />
|
|
<DeleteButton
|
|
hideText
|
|
confirmTitle="Вы уверены?"
|
|
recordItemId={row.id}
|
|
/>
|
|
</>
|
|
);
|
|
},
|
|
},
|
|
],
|
|
[]
|
|
);
|
|
|
|
return (
|
|
<List key={city_id}>
|
|
<Stack gap={2.5}>
|
|
<CustomDataGrid
|
|
{...dataGridProps}
|
|
columns={columns}
|
|
languageEnabled
|
|
localeText={localeText}
|
|
getRowId={(row: any) => row.id}
|
|
hasCoordinates
|
|
/>
|
|
</Stack>
|
|
</List>
|
|
);
|
|
});
|