updated react-openapi

2026-06-17 21:03:08 +05:30
parent cd89eb4c88
commit 0a668cf98d
64 changed files with 2412 additions and 2921 deletions
--- a/react-openapi/src/components/ResourceDetail.tsx
+++ b/react-openapi/src/components/ResourceDetail.tsx
@@ -0,0 +1,97 @@
+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);
+  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>
+  );
+}