Commit 9b037953 authored by guillecxb's avatar guillecxb
Browse files

add section working

parent 0bf7600d

capif_frontend/src/components/ConfigCapif.js

+91 −0
Original line number Diff line number Diff line
@@ -84,6 +84,10 @@ const ConfigCapif = () => { 
  const [newParamName, setNewParamName] = useState('');

  const [newParamValue, setNewParamValue] = useState('');



  const [openSectionDialog, setOpenSectionDialog] = useState(false);

  const [newSectionName, setNewSectionName] = useState('');

  const [newSectionParams, setNewSectionParams] = useState([{ key: '', value: '' }]);



  useEffect(() => {

    if (configData) {

      setEditableConfig(configData);
@@ -213,6 +217,50 @@ const ConfigCapif = () => { 
  };





  const handleOpenSectionDialog = () => setOpenSectionDialog(true);

  const handleCloseSectionDialog = () => {

    setOpenSectionDialog(false);

    setNewSectionName('');

    setNewSectionParams([{ key: '', value: '' }]);

  };



  const handleAddSection = () => {

    if (!newSectionName.trim() || newSectionParams.some(p => !p.key.trim())) {

      alert("Debes ingresar un nombre para la sección y al menos un parámetro.");

      return;

    }



    const categoryValues = newSectionParams.reduce((acc, param) => {

      acc[param.key] = param.value;

      return acc;

    }, {});



    addCategoryMutation.mutate({ category_name: newSectionName, category_values: categoryValues });

  };



  const handleParamChange = (index, field, value) => {

    setNewSectionParams(prevParams => {

      const updatedParams = [...prevParams];

      updatedParams[index][field] = value;

      return updatedParams;

    });

  };



  const handleAddParamField = () => {

    setNewSectionParams(prevParams => [...prevParams, { key: '', value: '' }]);

  };



  const addCategoryMutation = useMutation({

    mutationFn: addCategoryConfiguration,

    onSuccess: () => {

      refetch();

      setOpenSectionDialog(false);

      setNewSectionName('');

      setNewSectionParams([{ key: '', value: '' }]);

    },

  });





  return (

    <Grid container spacing={3} marginTop={2}>

      {/* Cuadro principal con datos generales y secciones desplegables */}
@@ -283,6 +331,12 @@ const ConfigCapif = () => { 
                    </AccordionDetails>

                  </Accordion>

              ))}

              {/* Botón para añadir nueva sección */}

              <Box display="flex" justifyContent="flex-end" mt={5}>

                <Button variant="contained" color="primary" onClick={handleOpenSectionDialog}>

                  Add New Configuration Section

                </Button>

              </Box>

          </CardContent>

        </Card>
@@ -310,6 +364,43 @@ const ConfigCapif = () => { 
            <Button onClick={handleAddConfig} variant="contained" color="primary">Guardar</Button>

          </DialogActions>

        </Dialog>



        {/* Dialog para añadir nueva sección */}

        <Dialog open={openSectionDialog} onClose={handleCloseSectionDialog} fullWidth maxWidth="sm">

          <DialogTitle>Añadir nueva sección</DialogTitle>

          <DialogContent>

            <TextField

              label="Nombre de la sección"

              fullWidth

              sx={{ mt: 2 }}

              value={newSectionName}

              onChange={(e) => setNewSectionName(e.target.value)}

            />



            {newSectionParams.map((param, index) => (

              <Box key={index} display="flex" gap={2} mt={2}>

                <TextField

                  label="Nombre del parámetro"

                  fullWidth

                  value={param.key}

                  onChange={(e) => handleParamChange(index, 'key', e.target.value)}

                />

                <TextField

                  label="Valor"

                  fullWidth

                  value={param.value}

                  onChange={(e) => handleParamChange(index, 'value', e.target.value)}

                />

              </Box>

            ))}



            <Button onClick={handleAddParamField} sx={{ mt: 2 }}>Añadir parámetro</Button>

          </DialogContent>

          <DialogActions>

            <Button onClick={handleCloseSectionDialog} color="secondary">Cancelar</Button>

            <Button onClick={handleAddSection} variant="contained" color="primary">Guardar</Button>

          </DialogActions>

        </Dialog>

      </Grid>



      {/* Upload JSON Configuration */}