navigation

src_generic/components/GenericForm.tsx

@@ -22,6 +22,8 @@ interface GenericFormProps {
   onSave: (data: any) => Promise<void>;
   onCancel: () => void;
   loading?: boolean;
+  readOnly?: boolean;
+  onEditClick?: () => void;
 }
 
 import { ConfigContext } from '../App';
@@ -32,6 +34,8 @@ export default function GenericForm({
   onSave,
   onCancel,
   loading: saving,
+  readOnly = false,
+  onEditClick,
 }: GenericFormProps) {
   initialData = initialData || {};
   const [formData, setFormData] = React.useState(initialData);
@@ -39,18 +43,25 @@ export default function GenericForm({
   const appConfig = React.useContext(ConfigContext);
 
   const handleChange = (key: string, value: any) => {
+    if (readOnly) return;
     setFormData((prev: any) => ({ ...prev, [key]: value }));
   };
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
+    if (readOnly) return;
     onSave(formData);
   };
 
+  const getTitle = () => {
+    if (readOnly) return `View ${config.label}`;
+    return initialData[config.primaryKey] ? `Edit ${config.label}` : `New ${config.label}`;
+  };
+
   return (
     <Box component="form" onSubmit={handleSubmit} sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
       <Typography variant="h5">
-        {initialData[config.primaryKey] ? `Edit ${config.label}` : `New ${config.label}`}
+        {getTitle()}
       </Typography>
       <Divider />
 
@@ -61,7 +72,7 @@ export default function GenericForm({
           field={field}
           value={formData[key]}
           onChange={(val: any) => handleChange(key, val)}
-          disabled={field.readOnly}
+          disabled={readOnly || field.readOnly}
           uploadFile={uploadFile}
           uploading={uploading}
           baseUrl={appConfig?.baseUrl || ""}
@@ -70,11 +81,17 @@ export default function GenericForm({
 
       <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2, mt: 4 }}>
         <Button variant="outlined" onClick={onCancel} disabled={saving}>
-          Cancel
-        </Button>
-        <Button variant="contained" type="submit" loading={saving} disabled={saving || uploading}>
-          Save {config.label}
+          {readOnly ? 'Back to List' : 'Cancel'}
         </Button>
+        {readOnly ? (
+            <Button variant="contained" color="primary" onClick={onEditClick}>
+                Edit {config.label}
+            </Button>
+        ) : (
+            <Button variant="contained" type="submit" loading={saving} disabled={saving || uploading}>
+              Save {config.label}
+            </Button>
+        )}
       </Box>
     </Box>
   );