feat: add action class to connect the api mongo - getAll

2025-06-24 21:08:22 -06:00
parent 31600e5f1b
commit 03022206ae
5 changed files with 255 additions and 0 deletions
--- a/src/private/mongo/AddOrEditAdminForm.jsx
+++ b/src/private/mongo/AddOrEditAdminForm.jsx
@@ -0,0 +1,93 @@
+import { useEffect, useState } from 'react';
+import {
+    Box,
+    Button,
+    TextField,
+    Typography,
+    Paper,
+    MenuItem
+} from '@mui/material';
+
+export default function AddOrEditAdminForm({ onAdd, initialData, onCancel }) {
+    const [formData, setFormData] = useState({
+        name: '',
+        description: '',
+        status: 'Active'
+    });
+
+    useEffect(() => {
+        if (initialData) {
+            setFormData(initialData);
+        } else {
+            setFormData({
+                name: '',
+                description: '',
+                status: 'Active'
+            });
+        }
+    }, [initialData]);
+
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+        setFormData((prev) => ({
+            ...prev,
+            [name]: value
+        }));
+    };
+
+    const handleSubmit = () => {
+        if (onAdd) {
+            onAdd(formData);
+        }
+    };
+
+    return (
+        <Box sx={{ px: 2, py: 3 }}>
+            <Paper elevation={0} sx={{ bgcolor: '#f9f9f9', p: 2, borderRadius: 2 }}>
+                <Typography variant="h6" gutterBottom>
+                    Item details
+                </Typography>
+
+                <TextField
+                    fullWidth
+                    label="Name"
+                    name="name"
+                    value={formData.name}
+                    onChange={handleChange}
+                    margin="normal"
+                />
+
+                <TextField
+                    fullWidth
+                    label="Description"
+                    name="description"
+                    value={formData.description}
+                    onChange={handleChange}
+                    margin="normal"
+                />
+
+                <TextField
+                    select
+                    fullWidth
+                    label="Status"
+                    name="status"
+                    value={formData.status}
+                    onChange={handleChange}
+                    margin="normal"
+                >
+                    <MenuItem value="Active">Active</MenuItem>
+                    <MenuItem value="Inactive">Inactive</MenuItem>
+                </TextField>
+
+                <Box display="flex" justifyContent="flex-end" gap={1} mt={3}>
+                    <Button onClick={onCancel} className="button-transparent">
+                        Cancel
+                    </Button>
+                    <Button variant="contained" onClick={handleSubmit} className="button-gold">
+                        Save
+                    </Button>
+                </Box>
+            </Paper>
+        </Box>
+    );
+}