-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: Update ProductDialogContext and ProviderProduct constructor
- Loading branch information
Showing
6 changed files
with
253 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,232 @@ | ||
| import { Typography, Box } from '@mui/material'; | ||
| import { useState, useEffect } from 'react'; | ||
| import { | ||
| Button, Table, TableBody, TableCell, TableHead, TableRow, TextField, IconButton, Typography, Grid, | ||
| Modal, Box, Card, CardContent | ||
| } from '@mui/material'; | ||
| import DeleteIcon from '@mui/icons-material/Delete'; | ||
| import ExpandableCard from '../../../components/ExpandableCard'; | ||
| import CustomSelectWithAdd from '../../../components/CustomSelectWithAdd'; | ||
| import { useProductDialogContext } from './ProductDialogContext'; | ||
| import { getAll, createProvider } from '../../../services/ProviderService'; | ||
| import { useSnackbar } from '../../../components/SnackbarContext'; | ||
| import { modifyAndClone } from '../../../util/generalUtils'; | ||
| import Provider from '../../../models/Provider'; | ||
|
|
||
| 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 | ||
| const ProviderDetailModal = ({ open, onClose, provider }) => ( | ||
| <Modal | ||
| open={open} | ||
| onClose={onClose} | ||
| aria-labelledby="modal-modal-title" | ||
| aria-describedby="modal-modal-description" | ||
| > | ||
| <Box sx={{ | ||
| position: 'absolute', | ||
| top: '50%', | ||
| left: '50%', | ||
| transform: 'translate(-50%, -50%)', | ||
| width: 400, | ||
| p: 4, | ||
| }}> | ||
| <Card> | ||
| <CardContent> | ||
| <Typography variant="h5" component="div" sx={{ marginBottom: 2 }}> | ||
| Detalles del Proveedor | ||
| </Typography> | ||
| <Typography variant="body2" color="text.secondary" gutterBottom> | ||
| <strong>Nombre:</strong> {provider?.name} | ||
| </Typography> | ||
| <Typography variant="body2" color="text.secondary" gutterBottom> | ||
| <strong>Teléfono:</strong> {provider?.phoneNumber} | ||
| </Typography> | ||
| <Typography variant="body2" color="text.secondary" gutterBottom> | ||
| <strong>Dirección:</strong> {provider?.address} | ||
| </Typography> | ||
| <Typography variant="body2" color="text.secondary" gutterBottom> | ||
| <strong>Comentarios:</strong> {provider?.comments} | ||
| </Typography> | ||
| <Button variant="contained" onClick={onClose} style={{ marginTop: 2 }}>Cerrar</Button> | ||
| </CardContent> | ||
| </Card> | ||
| </Box> | ||
| </Modal> | ||
| ); | ||
|
|
||
| const ProviderManagerDisplay = ({ | ||
| product, | ||
| providers, | ||
| selectedProvider, | ||
| price, | ||
| handleProviderChange, | ||
| handlePriceChange, | ||
| handleAddProvider, | ||
| handleDeleteProvider, | ||
| handleOnProviderAdded, | ||
| handleProviderClick, | ||
| editable | ||
| }) => ( | ||
| <ExpandableCard title="Proveedores"> | ||
| <Typography gutterBottom variant="body2" component="p" sx={{ mb: 2 }}> | ||
| {editable ? 'Añade y gestiona los proveedores del producto.' : ''} | ||
| </Typography> | ||
| {editable && ( | ||
| <> | ||
| <Grid container spacing={2} sx={{ mb: 2 }}> | ||
| <Grid item xs={12} sm={6}> | ||
| <CustomSelectWithAdd | ||
| elements={providers} | ||
| label="Proveedor" | ||
| selectedItem={selectedProvider} | ||
| setSelectedItem={handleProviderChange} | ||
| onItemAdded={handleOnProviderAdded} | ||
| dialogFields={[ | ||
| { name: 'name', label: 'Nombre del Proveedor', type: 'text', required: true }, | ||
| { name: 'phoneNumber', label: 'Número de Teléfono', type: 'tel' }, | ||
| { name: 'address', label: 'Dirección', type: 'text' }, | ||
| { name: 'comments', label: 'Comentarios', type: 'text' }, | ||
| ]} | ||
| /> | ||
| </Grid> | ||
| <Grid item xs={12} sm={6}> | ||
| <TextField | ||
| label="Precio de Compra" | ||
| type="number" | ||
| value={price} | ||
| onChange={handlePriceChange} | ||
| fullWidth | ||
| /> | ||
| </Grid> | ||
| </Grid> | ||
| <Button onClick={handleAddProvider} variant="contained" sx={{ mt: 2 }} disabled={!selectedProvider || !price}> | ||
| Agregar Proveedor | ||
| </Button> | ||
| </> | ||
| )} | ||
| <Table size="small" sx={{ mt: 4 }}> | ||
| <TableHead> | ||
| <TableRow> | ||
| <TableCell>Proveedor</TableCell> | ||
| <TableCell align="right">Precio de Compra</TableCell> | ||
| {editable && <TableCell align="right">Acciones</TableCell>} | ||
| </TableRow> | ||
| </TableHead> | ||
| <TableBody> | ||
| {product.providers && product.providers.map((providerProduct, index) => ( | ||
| <TableRow | ||
| key={index} | ||
| onClick={() => handleProviderClick(providerProduct.provider)} | ||
| sx={{ cursor: 'pointer', '&:hover': { backgroundColor: 'rgba(0, 0, 0, 0.04)' } }} | ||
| > | ||
| <TableCell>{providerProduct.provider.name}</TableCell> | ||
| <TableCell align="right">{providerProduct.price.cost}</TableCell> | ||
| {editable && ( | ||
| <TableCell align="right"> | ||
| <IconButton | ||
| onClick={(e) => { | ||
| e.stopPropagation(); | ||
| handleDeleteProvider(index); | ||
| }} | ||
| aria-label="delete" | ||
| > | ||
| <DeleteIcon /> | ||
| </IconButton> | ||
| </TableCell> | ||
| )} | ||
| </TableRow> | ||
| ))} | ||
| </TableBody> | ||
| </Table> | ||
| </ExpandableCard> | ||
| ); | ||
|
|
||
| const ProviderManager = ({ editable = true }) => { | ||
| const [providers, setProviders] = useState([]); | ||
| const [selectedProvider, setSelectedProvider] = useState(null); | ||
| const [price, setPrice] = useState(''); | ||
| const [modalOpen, setModalOpen] = useState(false); | ||
| const [selectedModalProvider, setSelectedModalProvider] = useState(null); | ||
| const { openSnackbar } = useSnackbar(); | ||
| const { product, handleSetProduct } = useProductDialogContext(); | ||
|
|
||
| useEffect(() => { | ||
| const fetchProviders = async () => { | ||
| try { | ||
| const response = await getAll(); | ||
| if (response && response.providers) { | ||
| setProviders(response.providers); | ||
| } | ||
| } catch (error) { | ||
| openSnackbar(`Error al obtener los proveedores: ${error.message}`, 'error'); | ||
| } | ||
| }; | ||
| fetchProviders(); | ||
| }, []); | ||
|
|
||
| const handleProviderChange = (provider) => { | ||
| setSelectedProvider(provider); | ||
| }; | ||
|
|
||
| const handlePriceChange = (event) => { | ||
| setPrice(event.target.value); | ||
| }; | ||
|
|
||
| const handleAddProvider = () => { | ||
| if (selectedProvider && price) { | ||
| const newProviderProduct = { | ||
| providerId: selectedProvider.id, | ||
| provider: selectedProvider, | ||
| price: { | ||
| cost: parseFloat(price), | ||
| description: `Precio de compra de ${selectedProvider.name}` | ||
| } | ||
| }; | ||
| handleSetProduct(modifyAndClone(product, 'providers', [...(product.providers || []), newProviderProduct])); | ||
| setSelectedProvider(null); | ||
| setPrice(''); | ||
| } | ||
| }; | ||
|
|
||
| const handleDeleteProvider = (index) => { | ||
| const newProviders = product.providers.filter((_, i) => i !== index); | ||
| handleSetProduct(modifyAndClone(product, 'providers', newProviders)); | ||
| }; | ||
|
|
||
| const handleOnProviderAdded = async (providers, newProviderData) => { | ||
| try { | ||
| const newProvider = await createProvider(new Provider(newProviderData)); | ||
| setProviders([...providers, newProvider]); | ||
| return newProvider.id; | ||
| } catch (error) { | ||
| openSnackbar(`Error al crear el proveedor: ${error.message}`, 'error'); | ||
| } | ||
| }; | ||
|
|
||
| const handleProviderClick = (provider) => { | ||
| setSelectedModalProvider(provider); | ||
| setModalOpen(true); | ||
| }; | ||
|
|
||
| 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> | ||
| <> | ||
| <ProviderManagerDisplay | ||
| product={product} | ||
| providers={providers} | ||
| selectedProvider={selectedProvider} | ||
| price={price} | ||
| handleProviderChange={handleProviderChange} | ||
| handlePriceChange={handlePriceChange} | ||
| handleAddProvider={handleAddProvider} | ||
| handleDeleteProvider={handleDeleteProvider} | ||
| handleOnProviderAdded={handleOnProviderAdded} | ||
| handleProviderClick={handleProviderClick} | ||
| editable={editable} | ||
| /> | ||
| <ProviderDetailModal | ||
| open={modalOpen} | ||
| onClose={() => setModalOpen(false)} | ||
| provider={selectedModalProvider} | ||
| /> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default ProviderManager; | ||
| export { ProviderManager as default, ProviderManagerDisplay }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters