Merge pull request #28 from BananasDev0/RD-63

Rd 63

src/components/ExpandableCard.jsx

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import { Card, CardContent, CardActions, CardHeader, Collapse, IconButton } from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { styled } from '@mui/material/styles';
+
+const ExpandMore = styled((props) => {
+  const { ...other } = props;
+  return <IconButton {...other} />;
+})(({ theme, expand }) => ({
+  transform: !expand ? 'rotate(0deg)' : 'rotate(180deg)',
+  marginLeft: 'auto',
+  transition: theme.transitions.create('transform', {
+    duration: theme.transitions.duration.shortest,
+  }),
+}));
+
+const ExpandableCard = ({ title, children }) => {
+  const [expanded, setExpanded] = useState(false);
+
+  const handleExpandClick = () => {
+    setExpanded(!expanded);
+  };
+
+  return (
+    <Card sx={{ maxWidth: '95%', margin: 'auto', mt: 2 }}>
+      <CardHeader title={title} />
+      <CardActions disableSpacing>
+        <ExpandMore
+          expand={expanded}
+          onClick={handleExpandClick}
+          aria-expanded={expanded}
+          aria-label="mostrar más"
+        >
+          <ExpandMoreIcon />
+        </ExpandMore>
+      </CardActions>
+      <Collapse in={expanded} timeout="auto" unmountOnExit>
+        <CardContent>
+          {children}
+        </CardContent>
+      </Collapse>
+    </Card>
+  );
+};
+
+export default ExpandableCard;

src/pages/Products/ProductDialog/PriceManager.jsx

@@ -0,0 +1,77 @@
+import { useState } from 'react';
+import {
+  Button, Table, TableBody, TableCell, TableHead, TableRow, TextField, IconButton, Typography, Box
+} from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import ExpandableCard from '../../../components/ExpandableCard';
+
+const PriceManager = () => {
+  const [prices, setPrices] = useState([]);
+  const [description, setDescription] = useState('');
+  const [cost, setCost] = useState('');
+
+  const handleAddPrice = () => {
+    if (!description || !cost) return;
+    setPrices([...prices, { description, cost: Number(cost) }]);
+    setDescription('');
+    setCost('');
+  };
+
+  const handleDeletePrice = (index) => {
+    const updatedPrices = prices.filter((_, i) => i !== index);
+    setPrices(updatedPrices);
+  };
+
+  return (
+    <ExpandableCard title="Precios del Producto">
+      <Typography gutterBottom variant="body2" component="p" sx={{ mb: 2 }}>
+        Agrega y gestiona los precios.
+      </Typography>
+      <Box sx={{ mb: 2 }}>
+        <TextField
+          label="Descripción"
+          variant="outlined"
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          fullWidth
+          sx={{ mb: 1 }}
+        />
+        <TextField
+          label="Costo"
+          type="number"
+          variant="outlined"
+          value={cost}
+          onChange={(e) => setCost(e.target.value)}
+          fullWidth
+        />
+        <Button onClick={handleAddPrice} variant="contained" sx={{ mt: 2 }}>
+          Agregar Precio
+        </Button>
+      </Box>
+      <Table size="small">
+        <TableHead>
+          <TableRow>
+            <TableCell>Descripción</TableCell>
+            <TableCell align="right">Costo</TableCell>
+            <TableCell align="right">Acciones</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {prices.map((price, index) => (
+            <TableRow key={index}>
+              <TableCell>{price.description}</TableCell>
+              <TableCell align="right">{price.cost}</TableCell>
+              <TableCell align="right">
+                <IconButton onClick={() => handleDeletePrice(index)} size="large">
+                  <DeleteIcon />
+                </IconButton>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </ExpandableCard>
+  );
+};
+
+export default PriceManager;

src/pages/Products/ProductDialog/ProductBasicInfo.jsx

@@ -0,0 +1,51 @@
+import { Box, Grid, FormControl, InputLabel, Select, MenuItem, Typography } from "@mui/material";
+import ImageUpload from "./ImageUpload";
+
+const ProductBasicInfo = ({ productTypeValue, onProductTypeChange, ProductForm }) => {
+
+    const handleProductTypeChange = (event) => {
+        onProductTypeChange(event.target.value);
+    };
+
+    const ProductImageSection = () => <Box sx={{ paddingTop: 2 }}>
+        <Typography variant="h6" component="h2" sx={{ textAlign: 'center', marginBottom: 2 }}>
+            Imagen del Producto
+        </Typography>
+        <ImageUpload onFileSelected={(file) => {
+            // Maneja el archivo seleccionado aquí
+            console.log(file);
+        }} />
+    </Box>;
+
+    const InputProductSelector = () => <FormControl fullWidth sx={{ mt: 4 }}>
+        <InputLabel id="product-type-label">Tipo de Producto</InputLabel>
+        <Select
+            labelId="product-type-label"
+            id="product-type"
+            value={productTypeValue}
+            label="Tipo de Producto"
+            onChange={handleProductTypeChange}
+        >
+            <MenuItem value="radiator">Radiador</MenuItem>
+            <MenuItem value="cap/fan">Tapa/Ventilador</MenuItem>
+            <MenuItem value="accessory">Accesorio</MenuItem>
+        </Select>
+    </FormControl>;
+
+    return (
+        <Box sx={{ p: 2 }} id='dialog-content'>
+            <Grid container spacing={2}>
+                <Grid item xs={12} md={7} sx={{ display: 'flex', flexDirection: 'column' }}>
+                    <InputProductSelector />
+                    <ProductForm />
+                </Grid>
+
+                <Grid item xs={12} md={5}>
+                    <ProductImageSection />
+                </Grid>
+            </Grid>
+        </Box>
+    );
+};
+
+export default ProductBasicInfo;

src/pages/Products/ProductDialog/ProductDetails.jsx

@@ -0,0 +1,14 @@
+import PriceManager from './PriceManager';
+import ProviderManager from './ProviderManager';
+
+const ProductDetails = () => {
+
+  return (
+    <>
+      <PriceManager/>
+      <ProviderManager />
+    </>
+  );
+};
+
+export default ProductDetails;

src/pages/Products/ProductDialog/ProductDialog.jsx

@@ -1,17 +1,25 @@
-
-import { Dialog, Button, AppBar, Toolbar, IconButton, Typography} from "@mui/material";
-import Slide from '@mui/material/Slide';
-import React from "react";
+import React, { useState } from 'react';
+import { Dialog, Button, AppBar, Toolbar, IconButton, Typography, Slide } from "@mui/material";
 import CloseIcon from '@mui/icons-material/Close';
-import ProductDialogContent from "./DialogContent";
+import RadiatorFlow from './RadiatorFlow';
 
-const Transition = React.forwardRef(function Transition(props,
-    ref
-) {
+const Transition = React.forwardRef(function Transition(props, ref) {
     return <Slide direction="up" ref={ref} {...props} />;
 });
 
+const totalSteps = 3; // Asumiendo 3 pasos para el ejemplo
+
 const ProductDialog = ({ open, onClose }) => {
+    const [productType, setProductType] = useState('');
+    const [activeStep, setActiveStep] = useState(0);
+
+    const handleNext = () => {
+        setActiveStep((prevActiveStep) => prevActiveStep + 1);
+    };
+
+    const handleBack = () => {
+        setActiveStep((prevActiveStep) => Math.max(prevActiveStep - 1, 0));
+    };
 
     return (
         <Dialog
@@ -34,13 +42,26 @@ const ProductDialog = ({ open, onClose }) => {
                     <Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div">
                         Agregar Producto
                     </Typography>
-                    <Button autoFocus color="inherit" onClick={onClose}>
-                        Guardar
-                    </Button>
+                    {activeStep > 0 && (
+                        <Button color="inherit" onClick={handleBack}>
+                            Atrás
+                        </Button>
+                    )}
+                    {activeStep < totalSteps - 1 ? (
+                        <Button autoFocus color="inherit" onClick={handleNext}>
+                            Siguiente
+                        </Button>
+                    ) : (
+                        <Button autoFocus color="inherit" onClick={() => {
+                            onClose(); // Posiblemente quieras manejar la lógica de guardar antes de cerrar
+                            console.log(productType);
+                        }}>
+                            Guardar
+                        </Button>
+                    )}
                 </Toolbar>
             </AppBar>
-            <ProductDialogContent/>
-
+            <RadiatorFlow onProductTypeChange={setProductType} productTypeValue={productType} index={activeStep}/>
         </Dialog>
     );
 };

src/pages/Products/ProductDialog/ProviderManager.jsx

@@ -0,0 +1,20 @@
+import { Typography, Box } from '@mui/material';
+import ExpandableCard from '../../../components/ExpandableCard';
+
+const ProviderManager = () => {
+  // Aquí iría el estado y la lógica para manejar proveedores si fuera necesario
+  // Por ahora, el componente está preparado pero no implementa funcionalidad específica
+
+  return (
+    <ExpandableCard title="Proveedores">
+      <Typography gutterBottom variant="body2" component="p" sx={{ mb: 2 }}>
+        Añade y gestiona tus proveedores.
+      </Typography>
+      <Box sx={{ mb: 2 }}>
+      </Box>
+      {/* Aquí iría la lógica para listar y gestionar proveedores */}
+    </ExpandableCard>
+  );
+};
+
+export default ProviderManager;

src/pages/Products/ProductDialog/RadiatorFlow.jsx

@@ -0,0 +1,25 @@
+import RadiatorForm from '../Forms/RadiatorForm';
+import ProductBasicInfo from './ProductBasicInfo';
+import ProductDetails from './ProductDetails';
+
+const RadiatorFlow = (props) => {
+    let ComponentToRender = null;
+
+    // Using switch to determine which component to render based on props.index
+    switch (props.index) {
+        case 0:
+            ComponentToRender = <ProductBasicInfo ProductForm={RadiatorForm} {...props}/>;
+            break;
+        // case 1, case 2, etc., can be added here for additional steps
+        default:
+            ComponentToRender = <ProductDetails/>;
+    }
+
+    return (
+        <div>
+            {ComponentToRender}
+        </div>
+    );
+};
+
+export default RadiatorFlow;