## **Descripción/contexto**

Abordarmos la primera versión del plugin de Learning Paths con su pieza más atómica “módulos”.

En esta primera épica nos vamos a centrar en la “Creación y edición” mientras cerramos la definición de asignación y ejecución.

Los módulos son agrupaciones de actividades, contenidos y recursos multimedia, que pueden asignarse de forma conjunta y que conllevan dependencia/secuencialidad (opcional u obligatoria).

Si hay diferentes actividades puntuables dentro de un módulo, el módulo devolverá una nota media (de aquellas calificables) dentro de Scores, y será posible “expandir” el contenido para ver el detalle de cada una de estas puntuaciones (calificable y no-calificables).

El módulo modificará también el frontal del OnGoing, de manera que debemos poder anidar varias actividades/contenidos/recursos multi-media en dicho OnGoing.

## Prototipo de FIGMA

[https://www.figma.com/file/mgbCZ6EIOUurtNBFI7v9z3/%5BF003%5D-Learning-Paths-1.0---Modules?node-id=372%3A24571&t=yBO4S9NSNRbGtiZx-4](https://www.figma.com/file/mgbCZ6EIOUurtNBFI7v9z3/%5BF003%5D-Learning-Paths-1.0---Modules?node-id=372%3A24571&t=yBO4S9NSNRbGtiZx-4)

## Documentación de referencia/discovery

[Learning Paths 1.0 (Modules)](https://miro.com/app/board/uXjVPEd3ZtM=/?share_link_id=658088365985)

## Criterios de aceptación

### Caso de uso 1

Ruta: Menú> Recorridos educativos

Especificación:

- Se ha creado una sección en el menú llamada
- ES: Recorridos educativos
- EN: Learning Paths
- Icono: Hasta que tengamos la Librería de iconos de BB2. Usamos este en svg:

[modules_library_icon.svg](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/223a0df4-0510-4824-a03d-1f1eda9b7e4f/modules_library_icon.svg)

- Submenú:
- Librería de módulos (Empty si nunca se ha creado un módulo)
- Nuevo módulo

### Caso de uso 2

Ruta: Recorridos educativos > Nuevo módulo > Step 1

Especificación: Datos básicos está compuesto por los siguientes componentes:

- Header
- Icon: El mismo de la sección del menú
- Title: Nuevo Módulo
- Button: Guardar borrador
- Subheader
- Stepper horizontal con 3 pasos:
- Datos básicos
- Configuración
- Estructura
- Estados: Se mantiene activo el step actual para informar al usuario
- Body
- Datos básicos
- Nombre (obligatorio)
- Subtítulo (obligatorio)
- Descripción
- Portada
- Vista previa
- Color
- Imagen destacada
- Tags
- Footer: Button “Siguiente”

### Caso de uso 3

Ruta: Recorridos educativos > Nuevo módulo > Step 2

Especificación: Configuración está compuesto por los siguientes componentes:

- Header
- Icon: El mismo de la sección del menú
- Title: Nombre del módulo que el usuario ha introducido en el step 1.
- Button: Guardar borrador
- Subheader
- Stepper horizontal con 3 pasos:
- Datos básicos
- Configuración
- Estructura
- Estados: Se mantiene activo el step actual para informar al usuario
- Body
- Programa: Selector
- Alert message
- Icon alert
- Texto: Esta configuración filtrará los contenidos y actividades que podrás incluir en este módulo.
- Asignaturas
- Select: Asignatura
- Select: Nivel
- Button: Añadir
- Fila: Label con opciones añadidas + icon eliminar
- Toggle: Añadir otras asignaturas en las que colaboro
- Footer:
- Button left: “Anterior”
- Button right: “Siguiente”

### Caso de uso 4

Ruta: Recorridos educativos > Nuevo módulo > Step 3

Especificación: Estructura está compuesto por los siguientes componentes:

- Header
- Icon: El mismo de la sección del menú
- Title: Nombre del módulo que el usuario ha introducido en el step 1.
- Button: Guardar borrador
- Subheader
- Stepper horizontal con 3 pasos:
- Datos básicos
- Configuración
- Estructura
- Estados: Se mantiene activo el step actual para informar al usuario
- Body - Estados
- **Estado inicial o Empty state:**
- Título: “¡Empecemos a crear!”
- Descripción: “Añade recursos de la librería y ordénalos según desees que le aparezcan al estudiante.”
- Button: Icon “+” + Nuevo recurso
- **1 o más recursos añadidos:**
- Tipo: Listado
- Columnas:
- Recurso
- Preview Recurso
- Icono tipo de recurso
- Título del recurso + elipsis a partir de 40-48 caracteres
- Descripción del recurso + elipsis a partir de 40-48 caracteres
- Tipo
- Toggle:
- Activado: Obligatorio
- Se oculta en la última fila
- Desactivado: Opcional
- Acciones
- Para recursos tipo test: Editar > Abre drawer con la configuración de ese test
- Para resto de recursos: Sin acciones
- Acción principal: Icono “+” + Añadir recurso > Abre drawer de Library
- Footer:
- Button left: Anterior
- Button right:
- Publicar
- Disabled: No se han añadido recursos
- Hover: Añade 2 o más recursos para publicar
- Active: Se han añadido 2 o más recursos
- ~~Publicar y asignar:~~ Esta opción se incluye en otra tarea

[Learning Paths 1.0 - Modules - Asignación](https://www.notion.so/Learning-Paths-1-0-Modules-Asignaci-n-f6af40cd6fc847eeb3f6663aefe60423)

### Caso de uso 5

Ruta: Recorridos educativos > Nuevo módulo > Step 3 > Añadir recurso

Especificación: Al clicar sobre “Añadir recurso” en el paso 3 “Estructura”, se abre un drawer con lo siguiente:

- Título: Icon + Library
- Secciones (tabs)
- Librería
- Nuevo recurso
- Subsecciones
- Contenidos
- Actividades
- Multimedia
- Filtros
- Input: Buscador
- Select: Tipo de recurso
- Contenidos: Documentos
- Actividades: Test, tareas, encuestas
- Multimedia: Vídeo, audio…
- Vista: Listado
- Imagen destacada
- Icono tipo de recurso
- Nombre del recurso
- Footer: Sin acciones. El recurso se añade directamente al hacer clic sobre él.

### Caso de uso 6

Ruta: Recorridos educativos > Nuevo módulo > Guardar borrador

Especificación:

- El módulo se guarda correctamente
- Se muestra la card en Librería de módulos > Borradores

### Caso de uso 7

Ruta: Recorridos educativos > Nuevo módulo > Publicar

Especificación:

- El módulo se publica correctamente
- Se muestra la card en Librería de módulos > Publicados

### Caso de uso 8

Ruta: Recorridos educativos > Librería de módulos > Clic en una card

Especificación:

- Se abre el drawer con más detalle de la card
- Al clicar sobre editar el módulo se abre correctamente en el step 3 “Estructura” con los recursos cargados.
- Permite edición

### Especificaciones de DS/ Responsive

*Detalles de como funcionan nuevos componentes de Bubbles 2.0 o especificaciones de comportamientos de interacción/maquetación en pantallas grandes/pequeñas, etc…*

<aside>
🗒️ **INSTRUCCIONES PARA QA**
*Se incluyen instrucciones detalladas de cómo preparar el entorno para poder probar los criterios: que programa usar, con qué usuario, que debe crearse o asignarse, si se debe subir un recurso, etc…*

</aside>

## Tareas técnicas

- [ ] Tarea 1
- [ ] Tarea 2
- [ ] Tarea 3

## Dependencias

*Las dependencias deben estar mapeadas en la propiedad “pulgin dependency”, pero aquí debemos especificar qué dependencia tenemos a nivel técnico o funcional.*

## Bloqueos

*Por ejemplo los accesos a la API o un tema de infraestructura o actualizaciones de librerías que deben resolverse previamente.*

## Declaración de deuda técnica

- *Design System (A pelo > Bubbles 1.0 > Bubbles 2. 0)*
- *Performance/ Optimización*
- *Deuda de UX por degradación técnica*

## Documentación técnica y/o funcional en GitHub Pages

*Añadir aquí la URL de la/s páginas de GitHub pages*

---

---

## Definition of Ready

- [ ] **1.** Contiene las pantallas de Figma, con sus detalles y aclaraciones, así como todos los estados y el orden que va a ver el usuario.
- [ ] **2.** Las pantallas de Figma contienen las vistas de usuario y admin diferenciadas, detalle de permisos por perfil.
- [ ] **3.** 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.
- [ ] **4.** No tiene bloqueos que impidan su desarrollo, como por ejemplo acceso al servicio (API) si es desarrollo Backend.
- [ ] **5.** Si hay dependencias de otros plugins, están identificadas y resueltas.
- [ ] **6.** Las tareas tienen un tamaño.
- [ ] **7.** Puede ser probada por el QA durante el sprint.
- [ ] **8.** Se ha incluido documentación en MIRO de referencia.

## Definition of Done

- [ ] **1.** Todas las pruebas unitarias y funcionales están pasadas y OK
- [ ] **2.** Pruebas en dispositivos / navegadores pasadas y OK *(falta definirlo)*
- [ ] **3.** Pruebas de rendimiento pasadas y OK *(falta definirlo)*
- [ ] **4.** Componentes correctamente integrados desde StoryBook *(verificar si el componente es la versión Bubbles 2.0, documentar deuda técnica en caso contrario)*
- [ ] **5.** Casos borde (empty states, numerales, faltas de conexión, etc...) pasados y OK
- [ ] **6.** Todos los criterios de aceptación validados por QA
- [ ] **7.** Pruebas end to end, para validar que no hay errores por dependencias, pasadas y OK *(definir bien estas pruebas cuando hay más de un plugin implicado)*
- [ ] **8.** Se han incluido los eventos de Elasticsearch
- [ ] **9.** Se ha subido el código a Github
- [ ] **10.** Se ha creado la documentación técnica y subido al repositorio *(Docusaurus → GithubPages?)*

## Notas de la sesión de refinamiento

- Épicas con dependencia (se separan de esta épica)
- Se prioriza refactor del formulario de creación de assets antes de empezar esta épica
- Drawer con el refactor (3 tabs contenidos, actividades, multimedia)
- Refactor de asignables
- Deuda UI @Marta
- Drawer: Nueva versión MVP con selector de categorías
- Librería de módulos (y general): añadir selector “programa” y “asignatura”
- Refactor Configuración (step 1)