import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid"; import { ruRU } from "@mui/x-data-grid/locales"; import { languageStore, MEDIA_TYPE_LABELS, mediaStore } from "@shared"; import { useEffect, useState } from "react"; import { observer } from "mobx-react-lite"; import { Eye, Trash2, Minus } from "lucide-react"; import { useNavigate } from "react-router-dom"; import { DeleteModal } from "@widgets"; import { Box, CircularProgress } from "@mui/material"; export const MediaListPage = observer(() => { const { media, getMedia, deleteMedia } = mediaStore; 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 fetchMedia = async () => { setIsLoading(true); await getMedia(); setIsLoading(false); }; fetchMedia(); }, [language]); const columns: GridColDef[] = [ { field: "media_name", headerName: "Название", flex: 1, renderCell: (params: GridRenderCellParams) => { return (
{params.value ? ( params.value ) : ( )}
); }, }, { field: "media_type", headerName: "Тип", width: 200, flex: 1, renderCell: (params: GridRenderCellParams) => { return (
{params.value ? ( MEDIA_TYPE_LABELS[ params.row.media_type as keyof typeof MEDIA_TYPE_LABELS ] ) : ( )}
); }, }, { field: "actions", headerName: "Действия", width: 200, align: "center", headerAlign: "center", renderCell: (params: GridRenderCellParams) => { return (
); }, }, ]; const rows = media.map((media) => ({ id: media.id, media_name: media.media_name, media_type: media.media_type, })); return ( <>
0 ? 1 : 0 }} >
{ setIds(Array.from(newSelection.ids) as string[]); }} hideFooter localeText={ruRU.components.MuiDataGrid.defaultProps.localeText} slots={{ noRowsOverlay: () => ( {isLoading ? : "Нет медиафайлов"} ), }} />
{ if (rowId) { deleteMedia(rowId.toString()); getMedia(); } setIsDeleteModalOpen(false); setRowId(null); }} onCancel={() => { setIsDeleteModalOpen(false); setRowId(null); }} /> { await Promise.all(ids.map((id) => deleteMedia(id))); getMedia(); setIsBulkDeleteModalOpen(false); setIds([]); }} onCancel={() => { setIsBulkDeleteModalOpen(false); }} /> ); });