Planificación

La construcción del planificador de recursos se basó en el código de Full Calendar el cual nos dió el pie inicial para definir la estructura y funcionalidades de este componente.

La vista de planificación cuenta con varios módulos dentro del mismo.

• Filtros: los cuales son relacionados a las tareas, pero pueden ser modificados según la necesidad del negocio.

• Selector de tiempo: puedes seleccionar un rango de fechas, moverte entre días, y cambiar la manera de desplegar la información de día a semana.

• Planificador: vamos a descomponer las funcionalidades a continuación.

El planificador cuenta con dos niveles de profundidad, tareas y sub tareas asociadas, además del despliegue de información contempla iconos para ejecutar diferentes acciones.

• Información de la tarea: Nombre, Estatus, Ubicación, ID asociado, Hora.

• Información de la sub tarea: Tipo, Ubicación, Estatus, Hora.

• Caret down: cada tarea que tiene asociadas sub tareas mostrará este ícono para desplegar el detalle de las sub tareas asociadas.

• Icono de Información: donde se despliega información relacionada a la tarea (Numero de tarea, ID asociado, tipo de tarea, ubicación, etapa)

• Icono de Edición: Te muestra la vista de edición de esa tarea.

• Icono de Más: Es para agregar una tarea o sub tarea asociada dependiendo del nivel en el que se ubique.

Vista Planificación

Open

Detalle subtarea

Open

⬛ Link a Figma

Hover nueva orden de trabajo

Hover nueva sub tarea

Hover información tarea

La vista de planificación necesita integrar un selector de tiempo para fijar la información de la columna de las horas y sub tareas.

Además tiene la opción de poder ser filtrado con algunos parámetros.

Consideraciones de accesibilidad

• Estructuración de código y navegación para que los lectores de pantalla y los usuarios que solo usan el teclado puedan acceder a elementos en un orden lógico.

• Utilizar los roles de referencia en el código.

• Use SVG en lugar de bibliotecas de iconos de fuentes.

Selector de tiempo

Filtros