251 lines
8.8 KiB
TypeScript
251 lines
8.8 KiB
TypeScript
import * as React from 'react';
|
|
import {
|
|
Box,
|
|
Typography,
|
|
Button,
|
|
IconButton,
|
|
Link,
|
|
Tooltip,
|
|
Card,
|
|
CardContent,
|
|
CardActions,
|
|
Grid,
|
|
Menu,
|
|
MenuItem,
|
|
useMediaQuery,
|
|
useTheme,
|
|
Divider,
|
|
} from '@mui/material';
|
|
import {
|
|
DataGrid,
|
|
GridColDef,
|
|
GridActionsCellItem,
|
|
GridRenderCellParams,
|
|
} from '@mui/x-data-grid';
|
|
import EditIcon from '@mui/icons-material/Edit';
|
|
import DeleteIcon from '@mui/icons-material/Delete';
|
|
import VisibilityIcon from '@mui/icons-material/Visibility';
|
|
import MoreVertIcon from '@mui/icons-material/MoreVert';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { ResourceConfig } from '../types/config';
|
|
|
|
interface EnhancedTableProps {
|
|
config: ResourceConfig;
|
|
data: any[];
|
|
onEdit: (item: any) => void;
|
|
onDelete: (id: string) => void;
|
|
onCreate: () => void;
|
|
onNavigateToResource?: (resourceName: string, id: string) => void;
|
|
}
|
|
|
|
export default function EnhancedTable({
|
|
config,
|
|
data,
|
|
onEdit,
|
|
onDelete,
|
|
onCreate,
|
|
onNavigateToResource,
|
|
}: EnhancedTableProps) {
|
|
const theme = useTheme();
|
|
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
|
|
const navigate = useNavigate();
|
|
|
|
const columns: GridColDef[] = React.useMemo(() => {
|
|
const cols: GridColDef[] = Object.entries(config.fields).map(([key, field]) => {
|
|
const col: GridColDef = {
|
|
field: key,
|
|
headerName: field.label,
|
|
flex: 1,
|
|
minWidth: 150,
|
|
renderCell: (params: GridRenderCellParams) => <FieldRenderer params={params} field={field} fieldKey={key} config={config} onNavigate={onNavigateToResource} navigate={navigate} />
|
|
};
|
|
return col;
|
|
});
|
|
|
|
cols.push({
|
|
field: 'actions',
|
|
type: 'actions',
|
|
headerName: 'Actions',
|
|
width: 120,
|
|
getActions: (params) => [
|
|
<GridActionsCellItem
|
|
icon={<VisibilityIcon />}
|
|
label="View"
|
|
onClick={() => navigate(`/${config.name}/${params.id}`)}
|
|
/>,
|
|
<GridActionsCellItem
|
|
icon={<EditIcon />}
|
|
label="Edit"
|
|
onClick={() => navigate(`/${config.name}/edit/${params.id}`)}
|
|
/>,
|
|
<GridActionsCellItem
|
|
icon={<DeleteIcon />}
|
|
label="Delete"
|
|
onClick={() => onDelete(params.id as string)}
|
|
/>,
|
|
],
|
|
});
|
|
|
|
return cols;
|
|
}, [config, onDelete, navigate, onNavigateToResource]);
|
|
|
|
if (isMobile) {
|
|
return (
|
|
<Box>
|
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2, alignItems: 'center' }}>
|
|
<Typography variant="h5" sx={{ fontWeight: 'bold' }}>{config.pluralLabel}</Typography>
|
|
<Button variant="contained" color="primary" onClick={onCreate} size="small">
|
|
Add
|
|
</Button>
|
|
</Box>
|
|
<Grid container spacing={2}>
|
|
{data.map((row) => (
|
|
<Grid item xs={12} key={row[config.primaryKey] || Math.random()}>
|
|
<MobileCardRow
|
|
row={row}
|
|
config={config}
|
|
onEdit={onEdit}
|
|
onDelete={onDelete}
|
|
onNavigate={onNavigateToResource}
|
|
navigate={navigate}
|
|
/>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Box sx={{ width: '100%' }}>
|
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 3, alignItems: 'center' }}>
|
|
<Typography variant="h5" sx={{ fontWeight: 'bold' }}>{config.pluralLabel}</Typography>
|
|
<Button variant="contained" color="primary" onClick={onCreate}>
|
|
Add {config.label}
|
|
</Button>
|
|
</Box>
|
|
<DataGrid
|
|
rows={data || []}
|
|
columns={columns}
|
|
autoHeight
|
|
getRowId={(row) => {
|
|
const pk = config.primaryKey;
|
|
if (row[pk] !== undefined && row[pk] !== null) return row[pk];
|
|
const fallbackKeys = ['id', '_id', 'uuid', 'pk'];
|
|
for (const key of fallbackKeys) {
|
|
if (row[key] !== undefined && row[key] !== null) return row[key];
|
|
}
|
|
return `temp-id-${data.indexOf(row)}`;
|
|
}}
|
|
disableRowSelectionOnClick
|
|
initialState={{
|
|
pagination: {
|
|
paginationModel: { page: 0, pageSize: 10 },
|
|
},
|
|
}}
|
|
pageSizeOptions={[10, 25, 50]}
|
|
sx={{
|
|
border: 'none',
|
|
'& .MuiDataGrid-cell:focus': { outline: 'none' },
|
|
'& .MuiDataGrid-columnHeader:focus': { outline: 'none' },
|
|
}}
|
|
/>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
function MobileCardRow({ row, config, onDelete, onNavigate, navigate }: any) {
|
|
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
|
|
const open = Boolean(anchorEl);
|
|
const id = row[config.primaryKey];
|
|
|
|
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
|
|
setAnchorEl(event.currentTarget);
|
|
};
|
|
const handleClose = () => {
|
|
setAnchorEl(null);
|
|
};
|
|
|
|
return (
|
|
<Card variant="outlined" sx={{ borderRadius: 2 }}>
|
|
<CardContent sx={{ pb: 1 }}>
|
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
|
|
<Typography variant="subtitle1" sx={{ fontWeight: 'bold', color: 'primary.main' }}>
|
|
#{id}
|
|
</Typography>
|
|
<IconButton size="small" onClick={handleClick}>
|
|
<MoreVertIcon fontSize="small" />
|
|
</IconButton>
|
|
<Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
|
|
<MenuItem onClick={() => { handleClose(); navigate(`/${config.name}/${id}`); }}>View</MenuItem>
|
|
<MenuItem onClick={() => { handleClose(); navigate(`/${config.name}/edit/${id}`); }}>Edit</MenuItem>
|
|
<MenuItem onClick={() => { handleClose(); onDelete(id); }} sx={{ color: 'error.main' }}>Delete</MenuItem>
|
|
</Menu>
|
|
</Box>
|
|
<Divider sx={{ mb: 2 }} />
|
|
<Grid container spacing={1}>
|
|
{Object.entries(config.fields).slice(0, 5).map(([key, field]: [string, any]) => (
|
|
<Grid item xs={6} key={key}>
|
|
<Typography variant="caption" color="text.secondary" sx={{ display: 'block' }}>
|
|
{field.label}
|
|
</Typography>
|
|
<Typography variant="body2" sx={{ fontWeight: 500, wordBreak: 'break-all' }}>
|
|
<FieldRenderer params={{ value: row[key], row }} field={field} fieldKey={key} config={config} onNavigate={onNavigate} navigate={navigate} isMobile />
|
|
</Typography>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
</CardContent>
|
|
<CardActions sx={{ justifyContent: 'flex-end', px: 2, pb: 2 }}>
|
|
<Button size="small" onClick={() => navigate(`/${config.name}/${id}`)}>View Details</Button>
|
|
</CardActions>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
function FieldRenderer({ params, field, fieldKey, config, onNavigate, navigate, isMobile }: any) {
|
|
const value = params.value;
|
|
const isPk = fieldKey === config.primaryKey;
|
|
|
|
if (field.formatter) return field.formatter(value);
|
|
|
|
if (field.relation && value) {
|
|
const relationId = typeof value === 'object' ? (value.id || value._id || value.pk) : value;
|
|
const displayValue = typeof value === "object" ?
|
|
((field?.displayField && (value as Record<string, any>)[field.displayField]) || (value as any).id || (value as any)._id || (value as any).pk) : value;
|
|
|
|
if (relationId) {
|
|
return (
|
|
<Link component="button" variant="body2" sx={{ fontWeight: 'inherit', textAlign: 'left' }} onClick={(e) => { e.stopPropagation(); onNavigate?.(field.relation!, String(relationId)); }}>
|
|
{displayValue}
|
|
</Link>
|
|
);
|
|
}
|
|
}
|
|
|
|
if (field.type === 'array' && Array.isArray(value)) {
|
|
if (field.displayField) {
|
|
return value.map((item) => (typeof item === 'object' ? item[field.displayField!] : item)).filter(Boolean).join(', ');
|
|
}
|
|
return `${value.length} items`;
|
|
}
|
|
|
|
if (field.type === 'object' && value) {
|
|
if (field.displayField && value[field.displayField]) return value[field.displayField];
|
|
return isMobile ? 'Object' : JSON.stringify(value);
|
|
}
|
|
|
|
if (field.type === 'boolean') return value ? 'Yes' : 'No';
|
|
if (field.type === 'datetime' || field.type === 'date') return value ? new Date(value).toLocaleString() : '';
|
|
|
|
if (isPk && !isMobile) {
|
|
return (
|
|
<Link component="button" variant="body2" sx={{ fontWeight: 'inherit' }} onClick={(e) => { e.stopPropagation(); navigate(`/${config.name}/${params.row[config.primaryKey]}`); }}>
|
|
{value}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
return value;
|
|
}
|