import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid"; import { ruRU } from "@mui/x-data-grid/locales"; import { carrierStore, languageStore, vehicleStore } from "@shared"; import { useEffect, useState } from "react"; import { observer } from "mobx-react-lite"; import { Eye, Pencil, Trash2, Minus } from "lucide-react"; import { useNavigate } from "react-router-dom"; import { CreateButton, DeleteModal } from "@widgets"; import { VEHICLE_TYPES } from "@shared"; import { Box, CircularProgress } from "@mui/material"; export const VehicleListPage = observer(() => { const { vehicles, getVehicles, deleteVehicle } = vehicleStore; const { carriers, getCarriers } = carrierStore; const navigate = useNavigate(); const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); const [isBulkDeleteModalOpen, setIsBulkDeleteModalOpen] = useState(false); const [rowId, setRowId] = useState(null); const [ids, setIds] = useState([]); const [isLoading, setIsLoading] = useState(false); const { language } = languageStore; useEffect(() => { const fetchData = async () => { setIsLoading(true); await getVehicles(); await getCarriers(language); setIsLoading(false); }; fetchData(); }, [language]); const columns: GridColDef[] = [ { field: "tail_number", headerName: "Бортовой номер", flex: 1, renderCell: (params: GridRenderCellParams) => { return (
{params.value ? ( params.value ) : ( )}
); }, }, { field: "type", headerName: "Тип", flex: 1, renderCell: (params: GridRenderCellParams) => { return (
{params.value ? ( VEHICLE_TYPES.find((type) => type.value === params.row.type) ?.label || params.row.type ) : ( )}
); }, }, { field: "carrier", headerName: "Перевозчик", flex: 1, renderCell: (params: GridRenderCellParams) => { return (
{params.value ? ( params.value ) : ( )}
); }, }, { field: "city", headerName: "Город", flex: 1, renderCell: (params: GridRenderCellParams) => { return (
{params.value ? ( params.value ) : ( )}
); }, }, { field: "actions", headerName: "Действия", width: 200, align: "center", headerAlign: "center", renderCell: (params: GridRenderCellParams) => { return (
); }, }, ]; const rows = vehicles.data?.map((vehicle) => ({ id: vehicle.vehicle.id, tail_number: vehicle.vehicle.tail_number, type: vehicle.vehicle.type, carrier: vehicle.vehicle.carrier, city: carriers[language].data?.find( (carrier) => carrier.id === vehicle.vehicle.carrier_id )?.city, })); return ( <>

Транспортные средства

0 ? 1 : 0 }} >
{ setIds(Array.from(newSelection.ids) as number[]); }} hideFooter localeText={ruRU.components.MuiDataGrid.defaultProps.localeText} slots={{ noRowsOverlay: () => ( {isLoading ? ( ) : ( "Нет транспортных средств" )} ), }} />
{ if (rowId) { await deleteVehicle(rowId); } setIsDeleteModalOpen(false); setRowId(null); }} onCancel={() => { setIsDeleteModalOpen(false); setRowId(null); }} /> { await Promise.all(ids.map((id) => deleteVehicle(id))); getVehicles(); setIsBulkDeleteModalOpen(false); setIds([]); }} onCancel={() => { setIsBulkDeleteModalOpen(false); }} /> ); });