Implementación componente tabla en microcliente de formularios dinámicos - parte 2

edwargl7 commented 5 days ago

Se requiere continuar con la prueba de concepto del componente iniciada en la Issue #166. Agregando la posibilidad de contar con una acción que permita cambiar de posición los registros basado en el indice del registro en la lista.

Sub Tareas

[x] Implementación de acción de reorganizar posiciones de los registros.
[x] Evaluar la parametrización para el manejo de acciones personalizadas.

Criterios de aceptación

[x] Documentación avances en la implementación y resultados de las pruebas realizadas.

Requerimientos

No aplica

Definition of Ready - DoR

[x] Está refinada y estimada en puntos de historia por el equipo.
[x] Incluye la descripción y criterios de aceptación, con el detalle funcional y especificaciones técnicas, de forma entendible por cualquier miembro del equipo.
[x] No tiene bloqueos que impidan su ejecución.
[x] Las dependencias están identificadas y resueltas.
[x] Puede ser probada dentro del Sprint.

Definition of Done - DoD - Desarrollo

[ ] Desarrollo en local.
[ ] Push en Feature.
[ ] Pruebas locales (funcionales).
[ ] PR a Develop.
[ ] Criterios de aceptación cumplidos.
[ ] Documentación de issue realizada.
[ ] Aprobada por SM/Líder técnico.

CristianCGutierrezG commented 4 days ago

Para implementar el cambio de posición, se optó por la opción 5 planteada en la issue #174.

Paginado con opción de elegir cambio de posición por número de índice:

Se agregó una nueva columna editable para cambiar el orden de las filas.
Para ver el cambio en la estructura del array, se imprime temporalmente en la consola.

https://github.com/user-attachments/assets/596c21ea-e7cf-4a97-aee9-a851c4cc5290

CristianCGutierrezG commented 3 days ago

Cambios para el reordenamiento de filas

Ahora, al realizar un cambio, se actualiza automáticamente toda la fila.
El sistema también reconoce cuando se añaden nuevas filas y actualiza su orden de manera correcta.

CristianCGutierrezG commented 3 days ago

Implementación con Drag-and-Drop

Se ha implementado una segunda opción para el cambio de posición de las filas utilizando la funcionalidad de drag-and-drop con la librería @angular/cdk/drag-drop.

Esta opción ofrece una experiencia de reordenamiento más intuitiva y agradable

https://github.com/user-attachments/assets/6355c590-ecdc-49c7-9b15-fd86de770772

CristianCGutierrezG commented 2 days ago

Parametrización de acciones con campos de tipo Button

Parametrización donde las acciones se definen a través de campos de tipo Button.

"campos":[
{
    "nombre": "eliminar",
    "etiqueta": "eliminar",
    "tipo": "button",
    "deshabilitado": false,
    "parametros": {
        "verbo": "eliminar",
        "url": "http//ruta_del_servico",
        "parametro_id": "elemento a eliminar"
    }
},
{
    "nombre": "editar",
    "etiqueta": "editar",
    "tipo": "button",
    "deshabilitado": false,
    "parametros": {
        "verbo": "editar",
        "url": "http//ruta_del_servico",
        "parametro_id": "elemento a editar"
    }
}
]

Se realiza un implementación para tratar de generar estas acciones de manera dinamica, agreganto la siguiente funcion:

Inconveniente: Esta configuración presenta una limitación cuando se requiere definir otros botones que no estén relacionados directamente con las acciones de la tabla.

edwargl7 commented 1 day ago

{ "nombre":"eliminar", "etiqueta":"eliminar", "tipo":"button", "deshabilitado":false, "parametros":{ "verbo":"DELETE", -> "POST", "PUT", "GET" "url":"http//ruta_del_servico", "parametro_id":"elemento a eliminar" } }

edwargl7 commented 1 day ago

Icono ya no se usaría para disminuir la complejidad en la configuración.Aporte de @CristianCGutierrezG

CristianCGutierrezG commented 1 day ago

Json actual que construye el componente lista

{
    "nombre": "Formulario dinamico prueba",
    "tipo": "stepper",
    "secciones": [
        {
            "nombre": "Información Personal",
            "campos": [
                {
                    "nombre": "nombre",
                    "descripcion": "Nombre del usuario",
                    "etiqueta": "Nombre",
                    "tipo": "text",
                    "placeholder": "Escriba aquí su nombre",
                    "deshabilitado": false,
                    "validaciones": [
                        {
                            "tipo": "requerido",
                            "valor": ""
                        },
                        {
                            "tipo": "maxLength",
                            "valor": 15
                        }
                    ]
                },
                {
                    "nombre": "apellidos",
                    "etiqueta": "Apellidos",
                    "tipo": "text",
                    "valor": "Valor por default",
                    "deshabilitado": true,
                    "validaciones": [
                        {
                            "tipo": "requerido",
                            "valor": ""
                        }
                    ]
                }
            ]
        },
        {
            "nombre": "Información Personal",
            "tipo": "lista",
            "url": "https://acd917f8-c4c4-4438-9c06-fef9da1ed3fa.mock.pstmn.io/dynamic_select",
            "campos": [
                {
                    "nombre": "nombre",
                    "descripcion": "Nombre del usuario",
                    "etiqueta": "Nombre",
                    "tipo": "text",
                    "placeholder": "Escriba aquí su nombre",
                    "deshabilitado": false,
                    "validaciones": [
                        {
                            "tipo": "requerido",
                            "valor": ""
                        },
                        {
                            "tipo": "maxLength",
                            "valor": 15
                        }
                    ]
                },
                {
                    "nombre": "apellidos",
                    "etiqueta": "Apellidos",
                    "tipo": "text",
                    "valor": "Valor por default",
                    "deshabilitado": true,
                    "validaciones": [
                        {
                            "tipo": "requerido",
                            "valor": ""
                        }
                    ]
                },
                {
                    "nombre": "nickname",
                    "etiqueta": "Nickname",
                    "tipo": "text",
                    "valor": "tunick",
                    "deshabilitado": false,
                    "validaciones": [
                        {
                            "tipo": "requerido",
                            "valor": ""
                        }
                    ]
                },
                {
                    "nombre": "email",
                    "etiqueta": "Correo Electrónico",
                    "tipo": "email",
                    "placeholder": "Ex. pat@example.com",
                    "deshabilitado": false,
                    "validaciones": [
                        {
                            "tipo": "requerido",
                            "valor": ""
                        },
                        {
                            "tipo": "email",
                            "valor": ""
                        }
                    ]
                },
                {
                    "nombre": "edad",
                    "etiqueta": "Edad",
                    "tipo": "number",
                    "deshabilitado": false,
                    "validaciones": [
                        {
                            "tipo": "requerido",
                            "valor": ""
                        },
                        {
                            "tipo": "min",
                            "valor": "18"
                        },
                        {
                            "tipo": "max",
                            "valor": "65"
                        }
                    ]
                },
                {
                    "nombre": "eliminar",
                    "etiqueta": "eliminar",
                    "tipo": "button",
                    "deshabilitado": false,
                    "parametros": {
                        "verbo": "eliminar",
                        "url": "http//ruta_del_servico",
                        "parametro_id": "elemento a eliminar"
                    }
                },
                {
                    "nombre": "editar",
                    "etiqueta": "editar",
                    "tipo": "button",
                    "deshabilitado": false,
                    "parametros": {
                        "verbo": "editar",
                        "url": "http//ruta_del_servico",
                        "parametro_id": "elemento a editar"
                    }
                }
            ]
        }
    ]
}

edwargl7 commented 1 day ago

Añadir botón de añadir actividades en la vista de consulta del plan

CristianCGutierrezG commented 1 day ago

Reunión sobre parametrización en el componente Lista

Se discutieron dos opciones para la parametrización de las acciones relacionadas con el componente Lista:

1. Reajustar secciones y componentes por sección

Reajustar la lógica para que, al construir el formulario, se tenga en cuenta cuándo una sección es hija de otra.
Separar la lógica del modal y la tabla en dos componentes distintos, de manera que, según lista.tipo, se renderice uno u otro:
- El componente modal se usaría para manejar solicitudes PUT y POST.
- El componente tabla se encargaría de acceder y mostrar los campos, así como de gestionar las acciones DELETE y GET.

Inconvenientes:

La lógica de los formularios dinámicos se vuelve más compleja.
La parametrización y relación entre secciones aún no está clara, como en casos donde un modal sirve para completar la información de una tabla.

2. Componente Lista/Tabla separado del componente de formularios dinámicos

Mantener la lógica de la tabla de auditoría como parte del sistema Sisifo, permitiendo al usuario seleccionar qué formulario desea editar y gestionarlo individualmente:
- Editar información básica
- Editar actividades
Dejar los formularios dinámicos para crear formularios básicos, y reservar la lógica especializada (como el cargue masivo) únicamente en Sisifo.

Inconvenientes:

Revisar cómo actualizar los campos de las tabla visualizadas en Sisifo, si se deja la logica de los formularios de forma independiente.
Reajustar la lógica de los formularios.

udistrital / sisifo_documentacion