A la hora de visualizar mi resultado en la columna "Precio x Total" necesito poder aplicar el valor de % (% ganancia Repuesto). Actualmente se esta visualizando el valor total como unidad * precio.
Aqui estan las dos funciones referidas al "Precio x Total":
const handleChange = (event, field, index, sectionIndex) => {
const { value } = event.target;
setSections((prevSections) => {
const newSections = [...prevSections];
newSections[sectionIndex][index] = {
...newSections[sectionIndex][index],
[field]: value
};
if (field === 'unidad' || field === 'precio') {
newSections[sectionIndex][index].precioTotal = calculatePrecioTotal(
newSections[sectionIndex][index].unidad,
newSections[sectionIndex][index].precio
);
}
return newSections;
});
};
const calculatePrecioTotal = (unidad, precio) => {
const parsedUnidad = parseInt(unidad);
const parsedPrecio = parseFloat(precio);
if (isNaN(parsedUnidad) || isNaN(parsedPrecio)) {
return '';
}
return (parsedUnidad * parsedPrecio).toFixed(2);
};
Aqui tengo mi estado incial para la tabla:
const initialData = [
{ tipo: null, unidad: 0, precio: '', precioTotal: '' },
{ tipo: null, unidad: 0, precio: '', precioTotal: '' },
{ tipo: null, unidad: 0, precio: '', precioTotal: '' }
];
Aqui mis estados iniciales de la App:
const [editingRow, setEditingRow] = useState({ sectionIndex: -1, index: -1 });
const [sections, setSections] = useState([[...initialData]]);
const [trabajo, setTrabajo] = useState('');
const [porcentajeGanancia, setPorcentajeGanancia] = useState(0);
const [trabajos, setTrabajos] = useState([[trabajo]]);
const [ganancias, setGanancias] = useState([[porcentajeGanancia]]);
Aqui el resto de mis funciones:
const handleEdit = (index, sectionIndex) => {
setEditingRow({ index, sectionIndex });
};
const handleSave = (index, sectionIndex) => {
setEditingRow({ sectionIndex: -1, index: -1 });
};
const handleAddLine = (sectionIndex) => {
setSections((prevSections) => {
const newSections = [...prevSections];
newSections[sectionIndex] = [...newSections[sectionIndex], { ...initialData[0] }];
return newSections;
});
};
const handleDeleteLine = (index, sectionIndex) => {
setSections((prevSections) => {
const newSections = [...prevSections];
newSections[sectionIndex] = newSections[sectionIndex].filter((_, i) => i !== index);
return newSections;
});
};
const handleAddSection = () => {
setSections((prevSections) => [...prevSections, [...initialData]]);
setTrabajos((prevTrabajos) => [...prevTrabajos, [""]]);
setGanancias((prevGanancias) => [...prevGanancias, [""]]);
};
const handleDeleteSection = (sectionIndex) => {
setSections((prevSections) => {
const newSections = [...prevSections];
newSections.splice(sectionIndex, 1);
return newSections;
});
setTrabajos((prevTrabajos) => {
const newTrabajos = [...prevTrabajos];
newTrabajos.splice(sectionIndex, 1);
return newTrabajos;
});
setGanancias((prevGanancias) => {
const newGanancias = [...prevGanancias];
newGanancias.splice(sectionIndex, 1);
return newGanancias;
});
};
const handleTrabajoSectionChange = (event, sectionIndex, fieldIndex) => {
const { value } = event.target;
setTrabajos((prevTrabajos) => {
const newTrabajos = [...prevTrabajos];
newTrabajos[sectionIndex][fieldIndex] = value;
return newTrabajos;
});
};
const handleGananciaSectionChange = (event, sectionIndex, fieldIndex) => {
const { value } = event.target;
setGanancias((prevGanancias) => {
const newGanancias = [...prevGanancias];
newGanancias[sectionIndex][fieldIndex] = parseFloat(value);
return newGanancias;
});
};
Y aqui todo el retorno de mi App funcion:
return (
<Box pl={50} pt={4} className="bg-[#ffffff90]">
<Box display="flex" alignItems="center" mb={2}>
<SaveIcon fontSize="large" color="primary" />
<Typography variant="h4" align="left" ml={2} className='text-[#707070]'>
Generar Presupuesto
</Typography>
</Box>
<Typography variant="h6" mb={4} fontSize={18} className='text-[#707070]'>
Para generar un presupuesto correctamente es necesario mantener actualizados nuestros
</Typography>
<Divider textAlign="left" sx={{ width: "90%",color: "gray", marginBottom:"2rem", fontSize: "1.6rem", fontFamily: "sans-serif"}}>
2 - Trabajo a Realizar
</Divider>
{sections.map((section, sectionIndex) => (
<TableContainer key={sectionIndex}>
<Grid container spacing={2} mt={1}>
<Grid item xs={12} sm={3}>
<TextField
fullWidth
label="Trabajo a realizar"
value={trabajos[sectionIndex][0]}
onChange={(event) => handleTrabajoSectionChange(event, sectionIndex, 0)}
variant="outlined"
/>
</Grid>
<Grid item xs={12} sm={3}>
<TextField
fullWidth
label="% ganancia repuestos"
type="number"
value={ganancias[sectionIndex][0] || ""}
onChange={(event) => handleGananciaSectionChange(event, sectionIndex, 0)}
variant="outlined"
/>
</Grid>
</Grid>
<Typography variant="h6" gutterBottom className={classes.title}>
<BookmarkBorder sx={{ paddingRight: "10px", color: "#1976d2", fontSize: "1.7rem" }} />
{sectionIndex + 1}) {trabajos[sectionIndex][0] || ""}
</Typography>
<Table sx={{ maxWidth: "75vw"}}>
<TableHead>
<TableRow>
<TableCell>Tipo</TableCell>
<TableCell>Unidad</TableCell>
<TableCell>Precio (c/u)</TableCell>
<TableCell>Precio X Total</TableCell>
<TableCell>Acciones</TableCell>
</TableRow>
</TableHead>
<TableBody>
{section.map((row, index) => (
<TableRow key={index}>
<TableCell>
{editingRow.sectionIndex === sectionIndex && editingRow.index === index ? (
<Select
value={row.tipo || ''}
onChange={(event) => handleChange(event, 'tipo', index, sectionIndex)}
>
<MenuItem value="" disabled>
Elegir Tipo de Trabajo
</MenuItem>
{tipoOptions.map((option) => (
<MenuItem key={option} value={option}>
{option}
</MenuItem>
))}
</Select>
) : (
<span className={row.tipo === null ? classes.defaultValue : ''}>
{row.tipo || initialData[0].tipo || 'Elegir Tipo de Trabajo'}
</span>
)}
</TableCell>
<TableCell>
{editingRow.sectionIndex === sectionIndex && editingRow.index === index ? (
<TextField
type="number"
value={row.unidad !== 0 ? row.unidad : ''}
onChange={(event) => handleChange(event, 'unidad', index, sectionIndex)}
/>
) : (
<span className={row.unidad ? '' : classes.defaultValue}>
{row.unidad || initialData[0].unidad}
</span>
)}
</TableCell>
<TableCell>
{editingRow.sectionIndex === sectionIndex && editingRow.index === index ? (
<TextField
type="number"
value={row.precio}
onChange={(event) => handleChange(event, 'precio', index, sectionIndex)}
/>
) : (
`$ ${row.precio}`
)}
</TableCell>
<TableCell>${row.precioTotal}</TableCell>
<TableCell>
{editingRow.sectionIndex === sectionIndex && editingRow.index === index ? (
<Save onClick={() => handleSave(index, sectionIndex)} className={classes.saveCell} />
) : (
<Edit onClick={() => handleEdit(index, sectionIndex)} className={classes.editableCell} />
)}
<Delete onClick={() => handleDeleteLine(index, sectionIndex)} className={classes.deleteCell} />
</TableCell>
</TableRow>
))}
<TableRow>
<TableCell colSpan={5}>
<IconButton onClick={() => handleAddLine(sectionIndex)}>
<Add sx={{ color: "#1976d2"}}/>
</IconButton>
</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
))}
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "end", paddingRight: "10rem"}}>
<Button onClick={handleAddSection} variant="outlined" sx={{ mt: 6, ml: 5, mb: 4 }}>
<Add /> Agregar Sección
</Button>
<Button onClick={confirmDeleteSection} variant="outlined" sx={{ mt: 6, ml: 2, mb: 4, color: '#AF1A1A' }}>
<Delete /> Eliminar Sección
</Button>
</Box>
</Box>
);
Tambien estoy disparando Sweetalert2 para la creacion y eliminacion de nuevas secciones de trabajo pero no es importante para este cambio que quiero realizar.