feat: adding the edit button and logic

2025-06-04 19:59:34 -06:00
parent cef04888c6
commit 70afbd4b45
2 changed files with 89 additions and 79 deletions
--- a/src/private/AddOrEditProductForm.jsx
+++ b/src/private/AddOrEditProductForm.jsx
@@ -0,0 +1,98 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Button, TextField, Grid } from '@mui/material';
+
+export default function AddOrEditProductForm({ onAdd, initialData }) {
+  const [product, setProduct] = useState({
+    name: '',
+    price: '',
+    provider: '',
+    stock: '',
+    category: ''
+  });
+
+  useEffect(() => {
+    if (initialData) {
+      setProduct(initialData);
+    } else {
+      setProduct({
+        name: '',
+        price: '',
+        provider: '',
+        stock: '',
+        category: ''
+      });
+    }
+  }, [initialData]);
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setProduct((prev) => ({
+      ...prev,
+      [name]: name === 'price' || name === 'stock' ? Number(value) : value
+    }));
+  };
+
+  const handleSubmit = () => {
+    if (onAdd) {
+      onAdd(product);
+    }
+  };
+
+  return (
+    <Box mt={2}>
+      <TextField
+        fullWidth
+        label="Name"
+        name="name"
+        value={product.name}
+        onChange={handleChange}
+        margin="normal"
+      />
+      <TextField
+        fullWidth
+        label="Price"
+        name="price"
+        type="number"
+        value={product.price}
+        onChange={handleChange}
+        margin="normal"
+      />
+      <Grid container spacing={2}>
+        <Grid item xs={6}>
+          <TextField
+            fullWidth
+            label="Provider"
+            name="provider"
+            value={product.provider}
+            onChange={handleChange}
+            margin="normal"
+          />
+        </Grid>
+        <Grid item xs={6}>
+          <TextField
+            fullWidth
+            label="Stock"
+            name="stock"
+            type="number"
+            value={product.stock}
+            onChange={handleChange}
+            margin="normal"
+          />
+        </Grid>
+      </Grid>
+      <TextField
+        fullWidth
+        label="Category"
+        name="category"
+        value={product.category}
+        onChange={handleChange}
+        margin="normal"
+      />
+      <Box display="flex" justifyContent="flex-end" mt={2}>
+        <Button variant="contained" onClick={handleSubmit}>
+          Save
+        </Button>
+      </Box>
+    </Box>
+  );
+}