Actualización de tabla al eliminar un registro

src/components/Tabla.jsx

@@ -1,19 +1,18 @@
-import React from "react";
+import React, { forwardRef, useImperativeHandle } from "react";
 import { Table } from "antd";
 import { useModels, useSortColumns, usePagination } from "../hooks";
 import PropTypes from "prop-types";
 import { emptyRequest } from "../constants/requests";
 
-const Tabla = ({
+const Tabla = forwardRef(({
   nameURL = "",
   expand = "",
   extraParams = null,
   columns,
   order,
-  innerRef,
   scrollX = "80vw",
   ...props
-}) => {
+}, ref) => {
   const [columnsData, setColumnsData] = React.useState([]);
   const [request, setRequest] = React.useState(emptyRequest);
 
@@ -56,11 +55,9 @@ const Tabla = ({
     }
   }, [modelsPage, setTotal]);
 
-  if (innerRef) {
-    innerRef.current = {
-      refresh,
-    };
-  }
+  useImperativeHandle(ref, () => ({
+    refresh,
+  }));
 
   return (
     <Table
@@ -75,7 +72,7 @@ const Tabla = ({
       size="small"
     />
   );
-};
+});
 
 Tabla.propTypes = {
   nameURL: PropTypes.string.isRequired,

src/views/catalogos/estados/Estados.jsx

@@ -4,12 +4,12 @@ import { DeleteOutlined, PlusOutlined } from "@ant-design/icons";
 import { Tabla } from "../../../components";
 import { SimpleTableLayout } from "../../../components/layouts";
 import { ActionsButton } from "../../../components";
-import { isEllipsis } from "../../../utilities";
+import { isEllipsis, eliminarRegistro } from "../../../utilities";
 import { Link, useNavigate } from "react-router-dom";
 import Formulario from "./Formulario";
-import HttpService from "../../../services/httpService";
 
 const endPoint = "estado";
+const endPointEliminar = "estado/eliminar";
 
 const Estados = () => {
   let tablaRef = useRef(null);
@@ -50,49 +50,6 @@ const Estados = () => {
     </Link>
   );
 
-  const eliminarRegistro = (nombre, id, url, alTerminar) => {
-    if (!id) return;
-    Modal.confirm({
-      title: "Eliminar",
-      content: `¿Está seguro de eliminar "${nombre}"?`,
-      icon: <DeleteOutlined style={{ color: "#ff0000" }} />,
-      okText: "Eliminar",
-      okButtonProps: {
-        type: "primary",
-        danger: true,
-      },
-      cancelText: "Cancelar",
-      onOk: async () => {
-        try {
-          let body = { id: id };
-          if (typeof id === "object") {
-            body = id;
-          }
-          const res = await HttpService.delete(url, body);
-          if (res && res.status === 200) {
-            notification.success({
-              message: "Éxito",
-              description: res?.mensaje,
-            });
-            alTerminar && alTerminar();
-          } else if (res?.status === 400) {
-            notification.error({
-              message: "Atención",
-              description: res?.mensaje,
-            });
-          }
-        } catch (error) {
-          console.log(error);
-          notification.error({
-            message: "Error",
-            description: error,
-          });
-          return "error";
-        }
-      },
-    });
-  };
-
   const columns = [
     {
       title: "Acciones",
@@ -111,7 +68,7 @@ const Estados = () => {
             {
               label: "Eliminar",
               onClick: () => {
-                eliminarRegistro(item?.nombre, item?.id, endPoint+'/eliminar', () =>
+                eliminarRegistro(item?.nombre, item?.id, endPointEliminar, () =>
                   tablaRef?.current?.refresh()
                 );
               },
@@ -150,6 +107,7 @@ const Estados = () => {
         nameURL={endPoint}
         extraParams={buscarParams}
         scroll={{ x: "30vw" }}
+        ref={tablaRef}
       />
     </SimpleTableLayout>
   );

src/views/catalogos/finMovilizaciones/FinMovilizaciones.jsx

@@ -4,15 +4,15 @@ import { DeleteOutlined, PlusOutlined } from "@ant-design/icons";
 import { Tabla } from "../../../components";
 import { SimpleTableLayout } from "../../../components/layouts";
 import { ActionsButton } from "../../../components";
-import { isEllipsis } from "../../../utilities";
+import { isEllipsis, eliminarRegistro } from "../../../utilities";
 import { Link, useNavigate } from "react-router-dom";
 import Formulario from "./Formulario";
-import HttpService from "../../../services/httpService";
 
 const endPoint = "fin-movilizacion";
+const endPointEliminar = "fin-movilizacion/eliminar";
 
 const FinMovilizaciones = () => {
-  let tablaRef = useRef(null);
+  const tablaRef = useRef(null);
   const navigate = useNavigate();
   const [form] = Form.useForm();
   const [buscarParams, setBuscarParams] = useState({
@@ -50,48 +50,6 @@ const FinMovilizaciones = () => {
     </Link>
   );
 
-  const eliminarRegistro = (nombre, id, url, alTerminar) => {
-    if (!id) return;
-    Modal.confirm({
-      title: "Eliminar",
-      content: `¿Está seguro de eliminar "${nombre}"?`,
-      icon: <DeleteOutlined style={{ color: "#ff0000" }} />,
-      okText: "Eliminar",
-      okButtonProps: {
-        type: "primary",
-        danger: true,
-      },
-      cancelText: "Cancelar",
-      onOk: async () => {
-        try {
-          let body = { id: id };
-          if (typeof id === "object") {
-            body = id;
-          }
-          const res = await HttpService.delete(url, body);
-          if (res && res.status === 200) {
-            notification.success({
-              message: "Éxito",
-              description: res?.mensaje,
-            });
-            alTerminar && alTerminar();
-          } else if (res?.status === 400) {
-            notification.error({
-              message: "Atención",
-              description: res?.mensaje,
-            });
-          }
-        } catch (error) {
-          console.log(error);
-          notification.error({
-            message: "Error",
-            description: error,
-          });
-          return "error";
-        }
-      },
-    });
-  };
 
   const columns = [
     {
@@ -111,8 +69,8 @@ const FinMovilizaciones = () => {
             {
               label: "Eliminar",
               onClick: () => {
-                eliminarRegistro(item?.nombre, item?.id, endPoint+'/eliminar', () =>
-                  tablaRef?.current?.refresh()
+                eliminarRegistro(`${item.nombre}`, item.id, endPointEliminar, () =>
+                  tablaRef.current.refresh()
                 );
               },
               danger: true,
@@ -150,6 +108,7 @@ const FinMovilizaciones = () => {
         nameURL={endPoint}
         extraParams={buscarParams}
         scroll={{ x: "30vw" }}
+        ref={tablaRef}
       />
     </SimpleTableLayout>
   );

src/views/catalogos/municipios/Municipios.jsx

@@ -4,12 +4,12 @@ import { DeleteOutlined, PlusOutlined } from "@ant-design/icons";
 import { Tabla } from "../../../components";
 import { SimpleTableLayout } from "../../../components/layouts";
 import { ActionsButton } from "../../../components";
-import { isEllipsis } from "../../../utilities";
+import { isEllipsis, eliminarRegistro } from "../../../utilities";
 import { Link, useNavigate } from "react-router-dom";
 import Formulario from "./Formulario";
-import HttpService from "../../../services/httpService";
 
 const endPoint = "municipio";
+const endPointEliminar = "municipio/eliminar";
 
 const Municipios = () => {
   let tablaRef = useRef(null);
@@ -50,49 +50,6 @@ const Municipios = () => {
     </Link>
   );
 
-  const eliminarRegistro = (nombre, id, url, alTerminar) => {
-    if (!id) return;
-    Modal.confirm({
-      title: "Eliminar",
-      content: `¿Está seguro de eliminar "${nombre}"?`,
-      icon: <DeleteOutlined style={{ color: "#ff0000" }} />,
-      okText: "Eliminar",
-      okButtonProps: {
-        type: "primary",
-        danger: true,
-      },
-      cancelText: "Cancelar",
-      onOk: async () => {
-        try {
-          let body = { id: id };
-          if (typeof id === "object") {
-            body = id;
-          }
-          const res = await HttpService.delete(url, body);
-          if (res && res.status === 200) {
-            notification.success({
-              message: "Éxito",
-              description: res?.mensaje,
-            });
-            alTerminar && alTerminar();
-          } else if (res?.status === 400) {
-            notification.error({
-              message: "Atención",
-              description: res?.mensaje,
-            });
-          }
-        } catch (error) {
-          console.log(error);
-          notification.error({
-            message: "Error",
-            description: error,
-          });
-          return "error";
-        }
-      },
-    });
-  };
-
   const columns = [
     {
       title: "Acciones",
@@ -111,7 +68,7 @@ const Municipios = () => {
             {
               label: "Eliminar",
               onClick: () => {
-                eliminarRegistro(item?.nombre, item?.id, endPoint+'/eliminar', () =>
+                eliminarRegistro(item?.nombre, item?.id, endPointEliminar, () =>
                   tablaRef?.current?.refresh()
                 );
               },
@@ -151,6 +108,7 @@ const Municipios = () => {
         expand="estado"
         extraParams={buscarParams}
         scroll={{ x: "30vw" }}
+        ref={tablaRef}
       />
     </SimpleTableLayout>
   );

src/views/catalogos/productos/Productos.jsx

@@ -4,12 +4,12 @@ import { DeleteOutlined, PlusOutlined } from "@ant-design/icons";
 import { Tabla } from "../../../components";
 import { SimpleTableLayout } from "../../../components/layouts";
 import { ActionsButton } from "../../../components";
-import { isEllipsis } from "../../../utilities";
+import { isEllipsis, eliminarRegistro } from "../../../utilities";
 import { Link, useNavigate } from "react-router-dom";
 import Formulario from "./Formulario";
-import HttpService from "../../../services/httpService";
 
 const endPoint = "producto";
+const endPointEliminar = "producto/eliminar";
 
 const Productos = () => {
   let tablaRef = useRef(null);
@@ -50,49 +50,6 @@ const Productos = () => {
     </Link>
   );
 
-  const eliminarRegistro = (nombre, id, url, alTerminar) => {
-    if (!id) return;
-    Modal.confirm({
-      title: "Eliminar",
-      content: `¿Está seguro de eliminar "${nombre}"?`,
-      icon: <DeleteOutlined style={{ color: "#ff0000" }} />,
-      okText: "Eliminar",
-      okButtonProps: {
-        type: "primary",
-        danger: true,
-      },
-      cancelText: "Cancelar",
-      onOk: async () => {
-        try {
-          let body = { id: id };
-          if (typeof id === "object") {
-            body = id;
-          }
-          const res = await HttpService.delete(url, body);
-          if (res && res.status === 200) {
-            notification.success({
-              message: "Éxito",
-              description: res?.mensaje,
-            });
-            alTerminar && alTerminar();
-          } else if (res?.status === 400) {
-            notification.error({
-              message: "Atención",
-              description: res?.mensaje,
-            });
-          }
-        } catch (error) {
-          console.log(error);
-          notification.error({
-            message: "Error",
-            description: error,
-          });
-          return "error";
-        }
-      },
-    });
-  };
-
   const columns = [
     {
       title: "Acciones",
@@ -111,7 +68,7 @@ const Productos = () => {
             {
               label: "Eliminar",
               onClick: () => {
-                eliminarRegistro(item?.nombre, item?.id, endPoint+'/eliminar', () =>
+                eliminarRegistro(item?.nombre, item?.id, endPointEliminar, () =>
                   tablaRef?.current?.refresh()
                 );
               },
@@ -150,6 +107,7 @@ const Productos = () => {
         nameURL={endPoint}
         extraParams={buscarParams}
         scroll={{ x: "30vw" }}
+        ref={tablaRef}
       />
     </SimpleTableLayout>
   );

src/views/catalogos/tipoMovilizaciones/TipoMovilizaciones.jsx

@@ -4,12 +4,12 @@ import { DeleteOutlined, PlusOutlined } from "@ant-design/icons";
 import { Tabla } from "../../../components";
 import { SimpleTableLayout } from "../../../components/layouts";
 import { ActionsButton } from "../../../components";
-import { isEllipsis } from "../../../utilities";
+import { isEllipsis, eliminarRegistro } from "../../../utilities";
 import { Link, useNavigate } from "react-router-dom";
 import Formulario from "./Formulario";
-import HttpService from "../../../services/httpService";
 
 const endPoint = "tipo-movilizacion";
+const endPointEliminar = "tipo-movilizacion/eliminar";
 
 const TipoMovilizaciones = () => {
   let tablaRef = useRef(null);
@@ -50,49 +50,6 @@ const TipoMovilizaciones = () => {
     </Link>
   );
 
-  const eliminarRegistro = (nombre, id, url, alTerminar) => {
-    if (!id) return;
-    Modal.confirm({
-      title: "Eliminar",
-      content: `¿Está seguro de eliminar "${nombre}"?`,
-      icon: <DeleteOutlined style={{ color: "#ff0000" }} />,
-      okText: "Eliminar",
-      okButtonProps: {
-        type: "primary",
-        danger: true,
-      },
-      cancelText: "Cancelar",
-      onOk: async () => {
-        try {
-          let body = { id: id };
-          if (typeof id === "object") {
-            body = id;
-          }
-          const res = await HttpService.delete(url, body);
-          if (res && res.status === 200) {
-            notification.success({
-              message: "Éxito",
-              description: res?.mensaje,
-            });
-            alTerminar && alTerminar();
-          } else if (res?.status === 400) {
-            notification.error({
-              message: "Atención",
-              description: res?.mensaje,
-            });
-          }
-        } catch (error) {
-          console.log(error);
-          notification.error({
-            message: "Error",
-            description: error,
-          });
-          return "error";
-        }
-      },
-    });
-  };
-
   const columns = [
     {
       title: "Acciones",
@@ -111,7 +68,7 @@ const TipoMovilizaciones = () => {
             {
               label: "Eliminar",
               onClick: () => {
-                eliminarRegistro(item?.nombre, item?.id, endPoint+'/eliminar', () =>
+                eliminarRegistro(item?.nombre, item?.id, endPointEliminar, () =>
                   tablaRef?.current?.refresh()
                 );
               },
@@ -150,6 +107,7 @@ const TipoMovilizaciones = () => {
         nameURL={endPoint}
         extraParams={buscarParams}
         scroll={{ x: "30vw" }}
+        ref={tablaRef}
       />
     </SimpleTableLayout>
   );

src/views/condicionantes/Condicionantes.jsx

@@ -4,12 +4,12 @@ import { DeleteOutlined, PlusOutlined } from "@ant-design/icons";
 import { Tabla } from "../../components";
 import { SimpleTableLayout } from "../../components/layouts";
 import { ActionsButton } from "../../components";
-import { isEllipsis } from "../../utilities";
+import { isEllipsis, eliminarRegistro } from "../../utilities";
 import { Link, useNavigate } from "react-router-dom";
 import Formulario from "./Formulario";
-import HttpService from "../../services/httpService";
 
 const endPoint = "condicionante";
+const endPointEliminar = "condicionante/eliminar";
 
 const Condicionantes = () => {
   let tablaRef = useRef(null);
@@ -35,123 +35,80 @@ const Condicionantes = () => {
     },
   ], [navigate]);
 
-  const eliminarRegistro = useCallback((nombre, id, url, alTerminar) => {
-    if (!id) return;
-    Modal.confirm({
-      title: "Eliminar",
-      content: `¿Está seguro de eliminar "${nombre}"?`,
-      icon: <DeleteOutlined style={{ color: "#ff0000" }} />,
-      okText: "Eliminar",
-      okButtonProps: {
-        type: "primary",
-        danger: true,
-      },
-      cancelText: "Cancelar",
-      onOk: async () => {
-        try {
-          let body = { id: id };
-          if (typeof id === "object") {
-            body = id;
-          }
-          const res = await HttpService.delete(url, body);
-          if (res && res.status === 200) {
-            notification.success({
-              message: "Éxito",
-              description: res?.mensaje,
-            });
-            alTerminar && alTerminar();
-          } else if (res?.status === 400) {
-            notification.error({
-              message: "Atención",
-              description: res?.mensaje,
-            });
-          }
-        } catch (error) {
-          console.log(error);
-          notification.error({
-            message: "Error",
-            description: error,
-          });
-          return "error";
-        }
-      },
-    });
-  }, []);
+  const linkText = (value, row, key) => (
+    <Link
+      to={`/condicionantes/editar?id=${row.id}`}
+      style={{ color: "black" }}
+    >
+      {isEllipsis(columns, key) ? (
+        <Tooltip title={value}>{value}</Tooltip>
+      ) : (
+        value
+      )}
+    </Link>
+  );
 
-  const columns = useMemo(() => {
-    const linkText = (value, row, key) => (
-      <Link
-        to={`/condicionantes/editar?id=${row.id}`}
-        style={{ color: "black" }}
-      >
-        {isEllipsis(columns, key) ? (
-          <Tooltip title={value}>{value}</Tooltip>
-        ) : (
-          value
-        )}
-      </Link>
-    );
 
-    return [
-      {
-        title: "Acciones",
-        key: "id",
-        dataIndex: "id",
-        width: 100,
-        align: "center",
-        render: (_, item) => (
-          <ActionsButton
-            data={[
-              {
-                label: "Editar",
-                onClick: () =>
-                  navigate(`/condicionantes/editar?id=${item?.id}`),
-              },
-              {
-                label: "Eliminar",
-                onClick: () => {
-                  eliminarRegistro(item?.titulo, item?.id, endPoint + '/eliminar', () =>
-                    tablaRef?.current?.refresh()
-                  );
-                },
-                danger: true,
+
+  const columns = [
+    {
+      title: "Acciones",
+      key: "id",
+      dataIndex: "id",
+      width: 100,
+      align: "center",
+      render: (_, item) => (
+        <ActionsButton
+          data={[
+            {
+              label: "Editar",
+              onClick: () =>
+                navigate(`/condicionantes/editar?id=${item?.id}`),
+            },
+            {
+              label: "Eliminar",
+              onClick: () => {
+                eliminarRegistro(item?.titulo, item?.id, endPointEliminar, () =>
+                  tablaRef?.current?.refresh()
+                );
               },
-            ]}
-          />
-        ),
-      },
-      {
-        title: "Título",
-        key: "titulo",
-        dataIndex: "titulo",
-        render: linkText,
-      },
-      {
-        title: "Descripción",
-        key: "descripcion",
-        dataIndex: "descripcion",
-        render: linkText,
-      },
-      {
-        title: "Activa",
-        key: "activa",
-        dataIndex: "activa",
-        render: linkText,
-      },
-      {
-        title: "Editado por",
-        key: "editadoPor",
-        dataIndex: "editadoPor",
-        render: linkText,
-      },
-      {
-        title: "Fecha de Edición",
-        key: "fechaEdicion",
-        dataIndex: "fechaEdicion",
-        render: linkText,
-      }
-    ];
-  }, [eliminarRegistro, navigate]);
+              danger: true,
+            },
+          ]}
+        />
+      ),
+    },
+    {
+      title: "Título",
+      key: "titulo",
+      dataIndex: "titulo",
+      render: linkText,
+    },
+    {
+      title: "Descripción",
+      key: "descripcion",
+      dataIndex: "descripcion",
+      render: linkText,
+    },
+    {
+      title: "Activa",
+      key: "activa",
+      dataIndex: "activa",
+      render: linkText,
+    },
+    {
+      title: "Editado por",
+      key: "editadoPor",
+      dataIndex: "editadoPor",
+      render: linkText,
+    },
+    {
+      title: "Fecha de Edición",
+      key: "fechaEdicion",
+      dataIndex: "fechaEdicion",
+      render: linkText,
+    }
+  ];
 
   return (
     <SimpleTableLayout