diff --git a/src/components/ExpandableCard.jsx b/src/components/ExpandableCard.jsx new file mode 100644 index 0000000..9e88c15 --- /dev/null +++ b/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 ; +})(({ 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 ( + + + + + + + + + + {children} + + + + ); +}; + +export default ExpandableCard; diff --git a/src/pages/Products/ProductDialog/DialogContent.jsx b/src/pages/Products/ProductDialog/DialogContent.jsx deleted file mode 100644 index 9224d0d..0000000 --- a/src/pages/Products/ProductDialog/DialogContent.jsx +++ /dev/null @@ -1,55 +0,0 @@ -import { Box, Grid, FormControl, InputLabel, Select, MenuItem, Typography } from "@mui/material"; -import RadiatorForm from '../Forms/RadiatorForm'; -import { useState } from "react"; -import ImageUpload from "./ImageUpload"; - -const ProductDialogContent = () => { - const [productType, setProductType] = useState(''); - - const handleProductTypeChange = (event) => { - setProductType(event.target.value); - }; - - return ( - - - {/* Columna izquierda con el selector de tipo de producto y el formulario de radiador */} - - - Tipo de Producto - - - {/* Incluye el formulario de radiador aquí */} - - - - - {/* Columna derecha vacía por ahora */} - - - - Imagen del Producto - - { - // Maneja el archivo seleccionado aquí - console.log(file); - }} /> - - - - - - ); -}; - -export default ProductDialogContent; diff --git a/src/pages/Products/ProductDialog/PriceManager.jsx b/src/pages/Products/ProductDialog/PriceManager.jsx new file mode 100644 index 0000000..fd6b515 --- /dev/null +++ b/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 ( + + + Agrega y gestiona los precios. + + + setDescription(e.target.value)} + fullWidth + sx={{ mb: 1 }} + /> + setCost(e.target.value)} + fullWidth + /> + + + + + + Descripción + Costo + Acciones + + + + {prices.map((price, index) => ( + + {price.description} + {price.cost} + + handleDeletePrice(index)} size="large"> + + + + + ))} + +
+ + ); +}; + +export default PriceManager; diff --git a/src/pages/Products/ProductDialog/ProductBasicInfo.jsx b/src/pages/Products/ProductDialog/ProductBasicInfo.jsx new file mode 100644 index 0000000..379ec83 --- /dev/null +++ b/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 = () => + + Imagen del Producto + + { + // Maneja el archivo seleccionado aquí + console.log(file); + }} /> + ; + + const InputProductSelector = () => + Tipo de Producto + + ; + + return ( + + + + + + + + + + + + + ); +}; + +export default ProductBasicInfo; diff --git a/src/pages/Products/ProductDialog/ProductDetails.jsx b/src/pages/Products/ProductDialog/ProductDetails.jsx new file mode 100644 index 0000000..7df6a87 --- /dev/null +++ b/src/pages/Products/ProductDialog/ProductDetails.jsx @@ -0,0 +1,14 @@ +import PriceManager from './PriceManager'; +import ProviderManager from './ProviderManager'; + +const ProductDetails = () => { + + return ( + <> + + + + ); +}; + +export default ProductDetails; diff --git a/src/pages/Products/ProductDialog/ProductDialog.jsx b/src/pages/Products/ProductDialog/ProductDialog.jsx index a296ba9..fc8b163 100644 --- a/src/pages/Products/ProductDialog/ProductDialog.jsx +++ b/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 ; }); +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 ( { Agregar Producto - + {activeStep > 0 && ( + + )} + {activeStep < totalSteps - 1 ? ( + + ) : ( + + )} - - + ); }; diff --git a/src/pages/Products/ProductDialog/ProviderManager.jsx b/src/pages/Products/ProductDialog/ProviderManager.jsx new file mode 100644 index 0000000..21133ae --- /dev/null +++ b/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 ( + + + Añade y gestiona tus proveedores. + + + + {/* Aquí iría la lógica para listar y gestionar proveedores */} + + ); +}; + +export default ProviderManager; diff --git a/src/pages/Products/ProductDialog/RadiatorFlow.jsx b/src/pages/Products/ProductDialog/RadiatorFlow.jsx new file mode 100644 index 0000000..cc728d9 --- /dev/null +++ b/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 = ; + break; + // case 1, case 2, etc., can be added here for additional steps + default: + ComponentToRender = ; + } + + return ( +
+ {ComponentToRender} +
+ ); +}; + +export default RadiatorFlow;