98 lines
3.0 KiB
TypeScript
98 lines
3.0 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
import {
|
|
Box,
|
|
Typography,
|
|
Button,
|
|
Paper,
|
|
Grid,
|
|
CircularProgress,
|
|
} from "@mui/material";
|
|
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
|
|
import EditIcon from "@mui/icons-material/Edit";
|
|
import type { ResourceConfig } from "../types";
|
|
import { useResource } from "../context/useResource";
|
|
import { useAppContext } from "../context/AppContext";
|
|
import { DetailFieldRenderer, applyDisplayFormat } from "./fields";
|
|
|
|
interface ResourceDetailProps {
|
|
resource: ResourceConfig;
|
|
basePath: string;
|
|
}
|
|
|
|
export function ResourceDetail({ resource, basePath }: ResourceDetailProps) {
|
|
const navigate = useNavigate();
|
|
const { id } = useParams();
|
|
const crud = useResource(resource.name);
|
|
const { resources: allResources } = useAppContext();
|
|
const [data, setData] = useState<any>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
if (id) {
|
|
setLoading(true);
|
|
crud
|
|
.get(id)
|
|
.then(setData)
|
|
.catch(() => navigate(`${basePath}/${resource.name}`))
|
|
.finally(() => setLoading(false));
|
|
}
|
|
}, [id]);
|
|
|
|
if (loading) {
|
|
return (
|
|
<Box sx={{ display: "flex", justifyContent: "center", py: 8 }}>
|
|
<CircularProgress />
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
if (!data) {
|
|
return (
|
|
<Typography variant="body1" color="text.secondary" sx={{ py: 4 }}>
|
|
Record not found
|
|
</Typography>
|
|
);
|
|
}
|
|
|
|
const visibleFields = resource.orderedFields.filter((f) => !f.hidden?.detail);
|
|
|
|
return (
|
|
<Box>
|
|
<Box sx={{ display: "flex", alignItems: "center", gap: 1, mb: 3 }}>
|
|
<Button startIcon={<ArrowBackIcon />} onClick={() => navigate(`${basePath}/${resource.name}`)}>
|
|
Back
|
|
</Button>
|
|
<Typography variant="h5" fontWeight={700} sx={{ flex: 1 }}>
|
|
{applyDisplayFormat(data, resource.displayFormat)}
|
|
</Typography>
|
|
{resource.operations.update && (
|
|
<Button variant="contained" startIcon={<EditIcon />} onClick={() => navigate(`${basePath}/${resource.name}/${id}/edit`)}>
|
|
Edit
|
|
</Button>
|
|
)}
|
|
</Box>
|
|
|
|
<Paper variant="outlined" sx={{ p: 3 }}>
|
|
<Grid container spacing={2}>
|
|
{visibleFields.map((field) => {
|
|
let value = data[field.name];
|
|
let fmt = resource.displayFormat;
|
|
if (field.fk && typeof value === "object") {
|
|
const targetRes = allResources.find((r) => r.name === field.fk!.resource);
|
|
fmt = targetRes!.displayFormat;
|
|
} else if (field.refSchema && !field.fk && typeof value === "object") {
|
|
fmt = field.inlineDisplayFormat ?? resource.displayFormat;
|
|
}
|
|
return (
|
|
<Grid item xs={12} sm={6} md={4} key={field.name}>
|
|
<DetailFieldRenderer field={field} value={value} displayFormat={fmt} />
|
|
</Grid>
|
|
);
|
|
})}
|
|
</Grid>
|
|
</Paper>
|
|
</Box>
|
|
);
|
|
}
|