As a L&D manager, I can filter information in the list of all the education benefits assigned to a GAPster
Historia de Usuario
Como Encargado del área de L&D,
quiero filtrar el listado de todos los beneficios otorgados a GAPsters
de modo que pueda encontrar la información específica de una persona o departamento
Criterio de Aceptación
- Se debe de mostrar la información de la lista con el orden y el filtrado según lo que retorna el API
- La tabla no realiza ninguna acción al darle click o similar
- En cada línea de la tabla hay un botón para editar y/o borrar un registro nuevo (no hace nada por ahora).
- La paginación de la información no forma parte de esta tarea
- El filtrado de la información se tiene que hacer en el frontend pues el endpoint no efectua ninguna accion semejante (solo retorna toda la información encontrada)
- El texto digitado en el campo de búsqueda únicamente busca en la información del departamento (también llamado área) y en el nombre de la persona. El resto de espacios de la tabla no pueden utilizarse para buscar información.
- El filtrado se realiza luego que se ha digitado 3 caracteres
- Al digitarse cualquier caracter aparece un botón de "clear" al lado de la barra de filtro para eliminar el filtro escrito
Recursos:
- URL del API endpoint para la lista de beneficios otorgados: GET https://up0tbmtu7h.execute-api.us-east-1.amazonaws.com/Prod/api/1/education_benefits
- Guía de diseño: http://products-style-guide.s3-website-us-east-1.amazonaws.com/?path=/story/style-guide--forms
- Respuesta de ejemplo del API:
{
"data":[
{
"id": "8d346337-1e14-4b23-8752-f4a2c6b03ee2",
"status": 1,
"type": 1,
"employee_id": "828b925e-e96a-4b93-9128-c260950c7b2b",
"updated_at": "2022-01-11T20:12:04.806222+00:00",
"created_at": "2022-01-11T20:12:04.806222+00:00",
"education_area_id": "d747e78c-ba1b-46a1-8d14-057394d94b5d",
"currency": "USD",
"employee": {
"email": "rrodriguez@growthaccelerationpartners.com",
"id": "828b925e-e96a-4b93-9128-c260950c7b2b",
"full_name": "Rodrigo Rodriguez Ramirez"
},
"comments": "Comments updated",
"description": "Updated description",
"date": "2021-01-30",
"budget": 300.0,
"education_area": {
"id": "d747e78c-ba1b-46a1-8d14-057394d94b5d",
"name": "certifications"
}
}
]
}Notas
- La imagen de debajo es para fines ilustrativos y para usar de guía. A nivel general, lo más importante es que el diseño de la tabla coincida con el diseño de la guía de diseño.
