0

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.

2
  • Hola Lucio, bienvenido a Stack Overflow en español. Recuerda realizar el recorrido de bienvenida y revisar Cómo preguntar. Deberías simplificar más tu pregunta y poner solo el código relevante a ella. Dices: "necesito poder aplicar el valor de % (% ganancia Repuesto)". Que es ganancia respuesto? como se debería calcular? donde quieres mostrar eso? cual es el problema que tienes? no sabes como calcularla? no sabes como mostrarla? simplifica mas tu problema. No ayuda mucho que pongas 5 bloques largos de código y no expliques bien cual es realmente tu problema. Saludos
    – Pipe
    Commented el 29 jun. 2023 a las 13:37
  • Puedes leer ejemplo mínimo verificable
    – Pipe
    Commented el 29 jun. 2023 a las 13:58

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.