| Info |
|---|
Todos los componentes han sido diseñados para trabajar armoniosamente juntos, como partes de un todo mayor. Es por esto que cada componente deber ser integrado y construido siguiendo nuestros lineamientos de usabilidady guías de construcción. Toda esta información se encuentra en la página Lineamientos de construcción de nuestro sistema de diseño. Además se debe tener en consideración la accesibilidad en el uso de la tipografía y la accesibilidad del color. |
La construcción del planificador de recursos se basó en el código de Full Calendarel 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
Detalle subtarea
Interacciones
Hover nueva orden de trabajo
Hover nueva sub tarea
Hover información tarea
Componentes asociados
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
