Commit c0106a38 authored by guillecxb's avatar guillecxb
Browse files

delete params and categories

parent 6537dc43

capif_frontend/src/components/ConfigCapif.js

+63 −4
Original line number Diff line number Diff line 
import React, { useEffect, useState } from 'react';

import { useQuery, useMutation } from '@tanstack/react-query';

import { getConfiguration, updateConfigParam, replaceConfiguration, addCategoryConfiguration, addParamConfiguration } from 'src/configs/apiService';

import { getConfiguration, updateConfigParam, replaceConfiguration, addCategoryConfiguration, addParamConfiguration, removeConfigParam, removeConfigCategory } from 'src/configs/apiService';

import {

  Grid,

  Card,
@@ -9,6 +9,7 @@ import { 
  CardContent,

  TextField,

  Button,

  IconButton,

  Accordion,

  AccordionSummary,

  AccordionDetails,
@@ -20,6 +21,7 @@ import { 
} from '@mui/material';

import DownloadIcon from '@mui/icons-material/Download';

import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

import DeleteIcon from '@mui/icons-material/Delete';

import Ajv from 'ajv';



const ajv = new Ajv();
@@ -265,6 +267,42 @@ const ConfigCapif = () => { 
  };





  // Estado para el diálogo de confirmación

  const [openConfirmDialog, setOpenConfirmDialog] = useState(false);

  const [deleteTarget, setDeleteTarget] = useState({ type: '', path: '' });



  // Mutaciones

  const removeParamMutation = useMutation({

    mutationFn: removeConfigParam,

    onSuccess: () => refetch(),

  });



  const removeCategoryMutation = useMutation({

    mutationFn: removeConfigCategory,

    onSuccess: () => refetch(),

  });



  // Función para abrir el diálogo antes de eliminar

  const handleOpenConfirmDialog = (type, path) => {

    setDeleteTarget({ type, path });

    setOpenConfirmDialog(true);

  };



  // Función para cerrar el diálogo

  const handleCloseConfirmDialog = () => {

    setOpenConfirmDialog(false);

    setDeleteTarget({ type: '', path: '' });

  };



  // Función para confirmar eliminación

  const handleConfirmDelete = () => {

    if (deleteTarget.type === 'param') {

      removeParamMutation.mutate({ param_path: deleteTarget.path });

    } else if (deleteTarget.type === 'category') {

      removeCategoryMutation.mutate({ category_name: deleteTarget.path });

    }

    handleCloseConfirmDialog();

  };

  



  return (
@@ -319,9 +357,12 @@ const ConfigCapif = () => { 
            {/* Accordions Dinámicos */}

            {editableConfig?.settings &&

              Object.entries(editableConfig.settings).map(([sectionKey, sectionValue]) => (

                  <Accordion disableGutters>

                  <Accordion key={sectionKey} disableGutters>

                    <AccordionSummary expandIcon={<ExpandMoreIcon />}>

                      <Typography variant="h6">{formatTitle(sectionKey.replace(/_/g, ' '))}</Typography>

                      <IconButton onClick={() => handleOpenConfirmDialog('category', sectionKey)} color="error">

                        <DeleteIcon fontSize="small"/>

                      </IconButton>

                    </AccordionSummary>

                    <AccordionDetails>

                      {sectionValue &&
@@ -337,6 +378,9 @@ const ConfigCapif = () => { 
                              onBlur={(e) => handleBlur(`settings.${sectionKey}.${key}`, e.target.value)}

                              onKeyDown={(e) => handleKeyDown(e, `settings.${sectionKey}.${key}`, e.target.value)}

                            />

                            <IconButton onClick={() => handleOpenConfirmDialog('param', `${sectionKey}.${key}`)} color="error">

                              <DeleteIcon fontSize="small"/>

                            </IconButton>

                          </Box>

                        ))}

                        <Box>
@@ -349,6 +393,7 @@ 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}>
@@ -419,6 +464,20 @@ const ConfigCapif = () => { 
            <Button onClick={handleAddSection} variant="contained" color="primary">Save</Button>

          </DialogActions>

        </Dialog>



        {/* Diálogo de Confirmación */}

        <Dialog open={openConfirmDialog} onClose={handleCloseConfirmDialog} fullWidth maxWidth="sm">

          <DialogTitle>Confirm Deletion</DialogTitle>

          <DialogContent>

            <Typography>

              Are you sure you want to delete {deleteTarget.type === 'category' ? "the category" : "the parameter"}: <b>{deleteTarget.path}</b>?

            </Typography>

          </DialogContent>

          <DialogActions>

            <Button onClick={handleCloseConfirmDialog} color="secondary">Cancel</Button>

            <Button onClick={handleConfirmDelete} variant="contained" color="error">Delete</Button>

          </DialogActions>

        </Dialog>

      </Grid>



      {/* Upload JSON Configuration */}

capif_frontend/src/components/ConfigRegister.js

+64 −5
Original line number Diff line number Diff line 
import React, { useEffect, useState } from 'react';

import { useQuery, useMutation } from '@tanstack/react-query';

import { getConfiguration, updateConfigParam, replaceConfiguration, addCategoryConfiguration, addParamConfiguration } from 'src/configs/apiService';

import { getRegisterConfiguration, updateRegisterConfigParam, replaceRegisterConfiguration, addRegisterCategoryConfiguration, addRegisterParamConfiguration } from 'src/configs/apiService';

import { getRegisterConfiguration, updateRegisterConfigParam, replaceRegisterConfiguration, addRegisterCategoryConfiguration, addRegisterParamConfiguration, removeRegisterConfigParam, removeRegisterConfigCategory } from 'src/configs/apiService';



import {

  Grid,
@@ -11,6 +10,7 @@ import { 
  CardContent,

  TextField,

  Button,

  IconButton,

  Accordion,

  AccordionSummary,

  AccordionDetails,
@@ -22,6 +22,7 @@ import { 
} from '@mui/material';

import DownloadIcon from '@mui/icons-material/Download';

import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

import DeleteIcon from '@mui/icons-material/Delete';

import Ajv from 'ajv';



const ajv = new Ajv();
@@ -261,6 +262,44 @@ const ConfigRegister = () => { 






  // Estado para el diálogo de confirmación

  const [openConfirmDialog, setOpenConfirmDialog] = useState(false);

  const [deleteTarget, setDeleteTarget] = useState({ type: '', path: '' });



  // Mutaciones

  const removeParamMutation = useMutation({

    mutationFn: removeRegisterConfigParam,

    onSuccess: () => refetch(),

  });



  const removeCategoryMutation = useMutation({

    mutationFn: removeRegisterConfigCategory,

    onSuccess: () => refetch(),

  });



  // Función para abrir el diálogo antes de eliminar

  const handleOpenConfirmDialog = (type, path) => {

    setDeleteTarget({ type, path });

    setOpenConfirmDialog(true);

  };



  // Función para cerrar el diálogo

  const handleCloseConfirmDialog = () => {

    setOpenConfirmDialog(false);

    setDeleteTarget({ type: '', path: '' });

  };



  // Función para confirmar eliminación

  const handleConfirmDelete = () => {

    if (deleteTarget.type === 'param') {

      removeParamMutation.mutate({ param_path: deleteTarget.path });

    } else if (deleteTarget.type === 'category') {

      removeCategoryMutation.mutate({ category_name: deleteTarget.path });

    }

    handleCloseConfirmDialog();

  };

  



  return (

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

      {/* Cuadro principal con datos generales y secciones desplegables */}
@@ -315,9 +354,12 @@ const ConfigRegister = () => { 
            {/* Accordions Dinámicos */}

            {editableConfig?.settings &&

              Object.entries(editableConfig.settings).map(([sectionKey, sectionValue]) => (

                  <Accordion disableGutters>

                  <Accordion key={sectionKey} disableGutters>

                    <AccordionSummary expandIcon={<ExpandMoreIcon />}>

                      <Typography variant="h6">{formatTitle(sectionKey.replace(/_/g, ' '))}</Typography>

                      <IconButton onClick={() => handleOpenConfirmDialog('category', sectionKey)} color="error">

                        <DeleteIcon fontSize="small"/>

                      </IconButton>

                    </AccordionSummary>

                    <AccordionDetails>

                      {sectionValue &&
@@ -333,6 +375,9 @@ const ConfigRegister = () => { 
                              onBlur={(e) => handleBlur(`settings.${sectionKey}.${key}`, e.target.value)}

                              onKeyDown={(e) => handleKeyDown(e, `settings.${sectionKey}.${key}`, e.target.value)}

                            />

                            <IconButton onClick={() => handleOpenConfirmDialog('param', `${sectionKey}.${key}`)} color="error">

                              <DeleteIcon fontSize="small"/>

                            </IconButton>

                          </Box>

                        ))}

                        <Box>
@@ -415,6 +460,20 @@ const ConfigRegister = () => { 
            <Button onClick={handleAddSection} variant="contained" color="primary">Save</Button>

          </DialogActions>

        </Dialog>



        {/* Diálogo de Confirmación */}

        <Dialog open={openConfirmDialog} onClose={handleCloseConfirmDialog} fullWidth maxWidth="sm">

          <DialogTitle>Confirm Deletion</DialogTitle>

          <DialogContent>

            <Typography>

              Are you sure you want to delete {deleteTarget.type === 'category' ? "the category" : "the parameter"}: <b>{deleteTarget.path}</b>?

            </Typography>

          </DialogContent>

          <DialogActions>

            <Button onClick={handleCloseConfirmDialog} color="secondary">Cancel</Button>

            <Button onClick={handleConfirmDelete} variant="contained" color="error">Delete</Button>

          </DialogActions>

        </Dialog>

      </Grid>



      {/* Upload JSON Configuration */}

capif_frontend/src/configs/apiService.js

+54 −0
Original line number Diff line number Diff line
@@ -473,6 +473,33 @@ export const addParamConfiguration = async ({ param_path, new_value }) => { 
  }

};



// Delete a specific config parameter inside a category

export const removeConfigParam = async ({ param_path }) => {

  try {

    const response = await axiosInstance.delete(`/configuration/remove-config-param`, {

      data: { param_path },

    });



    return response.data;

  } catch (error) {

    throw new Error(`Error removing config parameter: ${error.message}`);

  }

};



// Delete an entire category from settings

export const removeConfigCategory = async ({ category_name }) => {

  try {

    const response = await axiosInstance.delete(`/configuration/remove-config-category`, {

      data: { category_name },

    });



    return response.data;

  } catch (error) {

    throw new Error(`Error removing config category: ${error.message}`);

  }

};
@@ -535,3 +562,30 @@ export const addRegisterParamConfiguration = async ({ param_path, new_value }) = 
    throw new Error(`Error adding parameter configuration: ${error.message}`);

  }

};



// Delete a specific config parameter inside a category (Register)

export const removeRegisterConfigParam = async ({ param_path }) => {

  try {

    const response = await axiosInstance.delete(`/configuration/register/remove-config-param`, {

      data: { param_path },

    });



    return response.data;

  } catch (error) {

    throw new Error(`Error removing register config parameter: ${error.message}`);

  }

};



// Delete an entire category from settings (Register)

export const removeRegisterConfigCategory = async ({ category_name }) => {

  try {

    const response = await axiosInstance.delete(`/configuration/register/remove-config-category`, {

      data: { category_name },

    });



    return response.data;

  } catch (error) {

    throw new Error(`Error removing register config category: ${error.message}`);

  }

};