react-ecosistema-unp 1.7.25 → 1.7.27

package/README.md

@@ -59,4 +59,56 @@ npm install react-ecosistema-unp@latest
 
 <br>
 
-* [Estilos]()
+* [Estilos]()
+
+# Usabilidad: Selección de Filas en la Tabla
+
+La función de selección de filas permite al usuario seleccionar una o varias filas en la tabla y agrupar visualmente aquellas que comparten el mismo valor de `tipoMesa`, posicionándolas inmediatamente debajo de la fila seleccionada.
+
+## ¿Cuándo se activa esta función?
+
+La agrupación automática de filas por `tipoMesa` solo se activa cuando se cumplen **ambas** condiciones:
+
+- Se pasa la prop `enableRowSelection` al componente de tabla.
+- Se define la prop `onSelectionChange`, que recibe el array de identificadores seleccionados.
+
+## Props requeridas
+
+| Prop                | Tipo         | Descripción                                                                 |
+|---------------------|--------------|-----------------------------------------------------------------------------|
+| `enableRowSelection`| `boolean`    | Habilita la selección de filas.                                             |
+| `onSelectionChange` | `(ids: string[]) => void` | Callback que recibe los ids de las filas seleccionadas.         |
+
+## Comportamiento
+
+1. Al seleccionar una fila, todas las filas con el mismo valor en la columna `tipoMesa` se agrupan y se posicionan inmediatamente debajo de la fila seleccionada.
+2. Si se seleccionan varias filas de diferentes `tipoMesa`, cada grupo se posiciona debajo de la primera fila seleccionada de su tipo.
+3. La selección se realiza por el identificador único de la fila (`numeroRegistro`), lo que garantiza que la selección se mantenga aunque el orden de las filas cambie.
+4. No se generan duplicados: cada fila aparece solo una vez en la tabla.
+5. El reordenamiento solo ocurre cuando ambas props están presentes; de lo contrario, la tabla mantiene su orden original.
+
+## Ejemplo de uso
+
+```tsx
+import { TablaRegistros } from '.../lib/tables';
+
+const columns = [
+	// ...definición de columnas...
+];
+
+const [selectedIds, setSelectedIds] = useState<string[]>([]);
+
+<TablaRegistros
+	columns={columns}
+	data={data}
+	enableRowSelection
+	onSelectionChange={setSelectedIds}
+	// ...otros props...
+/>;
+```
+
+## Notas adicionales
+
+- El identificador único de cada fila debe estar en la propiedad `numeroRegistro`.
+- El comportamiento de agrupación es transparente para el usuario y no requiere configuración adicional.
+- Si se desea desactivar la agrupación, basta con omitir alguna de las props requeridas.

package/dist/lib/utils/Url.d.ts

@@ -1,9 +1,8 @@
-export declare const urlBase = "https://ecosistemapruebas.unp.gov.co";
-export declare const urlRequest = "https://ecosistemapruebas.unp.gov.co/api-eiunp";
+export declare const urlBase = "https://ecosistema.unp.gov.co";
 export declare const urlMedidasEmergencia = "/sistema/medidas-emergencia";
 export declare const urlActaReunion = "/sistema/acta-reunion";
 export declare const urlSolicitudViatico = "/sistema/solicitud-viaticos";
-export declare const urlCertificadoLaboral = "/sg/gc/certificados-inicio";
+export declare const urlCertificadoLaboral = "/sg/gc/certificado";
 export declare const urlHome = "/sitema/inicio";
 export declare const urlAuthLocal = "http://localhost:8000/";
 export declare const urlAuthDev = "https://ecosistemadesarrollo.unp.gov.co/";

package/dist/tables/tabla-registros/tabla/Tabla.js

@@ -1,6 +1,6 @@
 import { jsx as s, jsxs as d } from "react/jsx-runtime";
-import S, { useState as m, useEffect as X } from "react";
-import { v as Y, w as Z } from "../../../index-DDjnZyBf.js";
+import X, { useState as m, useEffect as Y } from "react";
+import { v as Z, w as S } from "../../../index-DDjnZyBf.js";
 import { a as w, b as ee, c as te, d as re } from "../../../index-D3WseyJh.js";
 import { T as se } from "../../../Table-C5ydZooy.js";
 import { F as oe, a as ie } from "../../../FormGroup-BLpFcIN5.js";
@@ -10,10 +10,10 @@ import '../../../assets/Tabla.css';const ue = ({
   displayedData: f,
   // tableData,
   hasMoreData: x,
-  setHasMoreData: z,
-  visibleData: I,
-  setVisibleData: D,
-  handleCellClick: O,
+  setHasMoreData: I,
+  visibleData: D,
+  setVisibleData: O,
+  handleCellClick: P,
   totalDias: v,
   isShared: b,
   //
@@ -25,33 +25,33 @@ import '../../../assets/Tabla.css';const ue = ({
   onSelectionChange: C,
   enableRowSelection: h = !1,
   // Indicador para aumentar la selección de casos por gestionar
-  extendedSelection: P,
+  extendedSelection: _,
   cellSelectionColor: U
 }) => {
   const [l, V] = m({
     key: null,
     direction: null
-  }), [c, W] = m([]), [y, _] = m(null), [k, B] = m(null);
-  X(() => {
+  }), [c, W] = m([]), [y, B] = m(null), [k, A] = m(null);
+  Y(() => {
     C == null || C(c);
   }, [c]);
   const $ = (e, o) => {
-    const r = k || H, i = r.findIndex((p) => p.numeroRegistro === e);
+    const r = k || j, i = r.findIndex((p) => p.numeroRegistro === e);
     if (i === -1) return;
     const n = r[i], t = c.includes(e);
     let a = [];
     if (t)
-      a = c.filter((p) => p !== e), a.length === 0 && (B(null), _(null));
+      a = c.filter((p) => p !== e), a.length === 0 && (A(null), B(null));
     else if (c.length === 0) {
-      a = [e], _(n.tipoMesa);
-      const p = n.tipoMesa, K = r.filter((g) => g.tipoMesa === p && g.numeroRegistro !== e), j = r.filter((g) => g.tipoMesa !== p), E = r.findIndex((g) => g.numeroRegistro === e), L = j.slice(0, E), Q = j.slice(E);
-      B([...L, n, ...K, ...Q]);
+      a = [e], B(n.tipoMesa);
+      const p = n.tipoMesa, K = r.filter((g) => g.tipoMesa === p && g.numeroRegistro !== e), E = r.filter((g) => g.tipoMesa !== p), z = r.findIndex((g) => g.numeroRegistro === e), L = E.slice(0, z), Q = E.slice(z);
+      A([...L, n, ...K, ...Q]);
     } else {
       if (y && n.tipoMesa !== y) return;
       a = [...c, e];
     }
     W(a);
-  }, A = { i: 0 }, G = (e) => {
+  }, G = { i: 0 }, H = (e) => {
     if (v) {
       const o = e / v * 100;
       return o <= 25 ? { backgroundColor: "#3AB34A", color: "#FFFFFF" } : o <= 50 ? { backgroundColor: "#F8EB10", color: "#000000" } : o <= 75 ? { backgroundColor: "#F79122", color: "#000000" } : { backgroundColor: "#E91720", color: "#FFFFFF" };
@@ -59,16 +59,16 @@ import '../../../assets/Tabla.css';const ue = ({
     return { backgroundColor: "transparent", color: "inherit" };
   }, q = (e) => {
     const { scrollTop: o, clientHeight: r, scrollHeight: i } = e.currentTarget;
-    i - o <= r + 50 && x && D((n) => {
+    i - o <= r + 50 && x && O((n) => {
       const t = n + 5;
-      return t >= f.length && z(!1), Math.min(t, f.length);
+      return t >= f.length && I(!1), Math.min(t, f.length);
     });
   }, J = (e) => {
     V((o) => ({
       key: e,
       direction: o.key === e && o.direction === "asc" ? "desc" : "asc"
     }));
-  }, H = (() => {
+  }, j = (() => {
     if (!l.key) return f;
     if (b) {
       const [e, o] = f.reduce(
@@ -84,7 +84,7 @@ import '../../../assets/Tabla.css';const ue = ({
       const r = e[l.key], i = o[l.key];
       return typeof r == "number" && typeof i == "number" ? l.direction === "asc" ? r - i : i - r : typeof r == "string" && typeof i == "string" ? l.direction === "asc" ? r.localeCompare(i) : i.localeCompare(r) : 0;
     });
-  })(), F = k || (l.direction === "asc" || l.direction === "desc" ? H : f);
+  })(), F = k || (l.direction === "asc" || l.direction === "desc" ? j : f);
   return /* @__PURE__ */ s("div", { className: "table_container", children: /* @__PURE__ */ s("div", { className: "table-scroll", onScroll: q, children: /* @__PURE__ */ d(se, { striped: !0, hover: !0, children: [
     /* @__PURE__ */ d("thead", { children: [
       /* @__PURE__ */ d("tr", { children: [
@@ -132,11 +132,11 @@ import '../../../assets/Tabla.css';const ue = ({
       ] })
     ] }),
     /* @__PURE__ */ d("tbody", { children: [
-      F.slice(0, I).map((e, o) => {
+      F.slice(0, D).map((e, o) => {
         let r = !1;
-        b ? e.estadoRegistro === "en_gestion" ? r = !0 : e.estadoRegistro === "por_gestionar" && A.i < (P ? 60 : 25) && (r = !0, A.i++) : r = !0;
+        b ? e.estadoRegistro === "en_gestion" ? r = !0 : e.estadoRegistro === "por_gestionar" && (!_ && G.i < 60 ? (r = !0, G.i++) : _ && (r = !0)) : r = !0;
         const i = h && y != null && e.tipoMesa !== y, n = c.includes(e.numeroRegistro);
-        return /* @__PURE__ */ d(S.Fragment, { children: [
+        return /* @__PURE__ */ d(X.Fragment, { children: [
           /* @__PURE__ */ d(
             "tr",
             {
@@ -156,13 +156,13 @@ import '../../../assets/Tabla.css';const ue = ({
                     onClick: (t) => {
                       t.stopPropagation(), i || $(e.numeroRegistro);
                     },
-                    children: n ? /* @__PURE__ */ s(re, { size: 18, style: { color: "#505050ff" } }) : /* @__PURE__ */ s(Y, { size: 18, style: { color: "#505050ff" } })
+                    children: n ? /* @__PURE__ */ s(re, { size: 18, style: { color: "#505050ff" } }) : /* @__PURE__ */ s(Z, { size: 18, style: { color: "#505050ff" } })
                   }
                 ),
                 u.map((t, a) => /* @__PURE__ */ s(
                   "td",
                   {
-                    onClick: () => r ? O(t, e) : {},
+                    onClick: () => r ? P(t, e) : {},
                     style: {
                       cursor: (t.hasModal || t.redirectTo) && r ? "pointer" : "default",
                       "--cell-selection-bg-color": U || void 0
@@ -182,10 +182,10 @@ import '../../../assets/Tabla.css';const ue = ({
                               padding: "8px",
                               borderRadius: "100px",
                               width: "40px",
-                              backgroundColor: G(
+                              backgroundColor: H(
                                 e.diasHabiles
                               ).backgroundColor,
-                              color: G(
+                              color: H(
                                 e.diasHabiles
                               ).color
                             },
@@ -210,7 +210,7 @@ import '../../../assets/Tabla.css';const ue = ({
             fontWeight: "600",
             color: o % 2 === 0 ? "#365072" : "#303D50",
             backgroundColor: o % 2 === 0 ? "#fefefe" : "#f9fafa"
-          }, children: /* @__PURE__ */ s(Z, { style: { fontSize: "1.3rem" } }) }) }) })
+          }, children: /* @__PURE__ */ s(S, { style: { fontSize: "1.3rem" } }) }) }) })
         ] }, o);
       }),
       x && /* @__PURE__ */ s("tr", { children: /* @__PURE__ */ s("td", { colSpan: u.length, className: "text-center", children: "Cargando más datos..." }) })

package/dist/utils/Url.js

@@ -1,14 +1,13 @@
-const t = "https://ecosistemapruebas.unp.gov.co", s = "https://ecosistemapruebas.unp.gov.co/api-eiunp", o = "/sistema/medidas-emergencia", c = "/sistema/acta-reunion", e = "/sistema/solicitud-viaticos", i = "/sg/gc/certificados-inicio", a = "/sitema/inicio", u = "http://localhost:8000/", n = "https://ecosistemadesarrollo.unp.gov.co/", r = "https://ecosistemapruebas.unp.gov.co/", l = "https://ecosistema.unp.gov.co/";
+const t = "https://ecosistema.unp.gov.co", o = "/sistema/medidas-emergencia", s = "/sistema/acta-reunion", c = "/sistema/solicitud-viaticos", e = "/sg/gc/certificado", i = "/sitema/inicio", a = "http://localhost:8000/", u = "https://ecosistemadesarrollo.unp.gov.co/", n = "https://ecosistemapruebas.unp.gov.co/", r = "https://ecosistema.unp.gov.co/";
 export {
-  c as urlActaReunion,
-  n as urlAuthDev,
-  u as urlAuthLocal,
-  l as urlAuthProd,
-  r as urlAuthTest,
+  s as urlActaReunion,
+  u as urlAuthDev,
+  a as urlAuthLocal,
+  r as urlAuthProd,
+  n as urlAuthTest,
   t as urlBase,
-  i as urlCertificadoLaboral,
-  a as urlHome,
+  e as urlCertificadoLaboral,
+  i as urlHome,
   o as urlMedidasEmergencia,
-  s as urlRequest,
-  e as urlSolicitudViatico
+  c as urlSolicitudViatico
 };

package/package.json

@@ -2,7 +2,7 @@
   "name": "react-ecosistema-unp",
   "author": "Ecosistema de Información - Unidad Nacional de Protección",
   "private": false,
-  "version": "1.7.25",
+  "version": "1.7.27",
   "type": "module",
   "exports": {
     ".": {