Organizacion

Ruta: /teacher/organization · Atajo: g o · Sidebar: Organizacion

La pagina de Organizacion contiene el gestor de etiquetas (tags) y el gestor de categorias de clase del profesor. Las etiquetas se usan para clasificar templates, recursos, sesiones y servicios. Las categorias son las columnas del tablero Kanban en Mi Material.

---

Que hay

Gestor de etiquetas

Cabecera:

• Titulo “Etiquetas” + descripcion
• Boton “Importar de biblioteca” (icono Download)
• Boton ”+ Nueva etiqueta” (icono Plus)
• Boton ”+ Nuevo grupo” — crea un grupo inline con input de nombre y Enter/Escape

Grupos de etiquetas

Las etiquetas se pueden organizar en grupos. Los grupos se gestionan desde la cabecera con un boton “Nuevo grupo” que abre un input inline.

Selector de grupo en edicion: Al editar una etiqueta (inline o en sheet), aparece un selector de grupo que incluye:

• Dropdown con todos los grupos existentes
• Opcion “Sin grupo”
• Opcion “Crear nuevo grupo” — input inline para crear un grupo sobre la marcha sin salir del editor

Esto permite clasificar etiquetas en agrupaciones logicas (ej: “Skills”, “Temas”, “Niveles”).

Buscador de etiquetas: Input con icono Search encima de la tabla. Filtro client-side case-insensitive por nombre. Si no hay resultados para la busqueda, se muestra mensaje “Sin resultados para «…»”. El buscador solo aparece cuando hay al menos una etiqueta.

Tabla de etiquetas (vista agrupada):

Las etiquetas se muestran agrupadas visualmente por groupName. Cada grupo tiene un header con nombre en mayusculas, badge de conteo, y separador superior. Las etiquetas sin grupo se muestran al final sin header.

Cada fila muestra:

• Checkbox de seleccion (individual + “seleccionar todas”)
• Icono GripVertical (drag handle funcional — reordenacion con dnd-kit)
• Emoji del tag (si tiene icon)
• Punto de color (background color con 15% opacity)
• Nombre de la etiqueta
• Columna “Usos” — conteo total de usos del tag (templates + recursos + sesiones + servicios), con tooltip desglosado al hover
• Boton editar (lapiz) — o doble-click en la fila
• Boton borrar (papelera)
• Hover: fila se resalta
• Seleccionada: fondo primary-50

Reordenacion drag-and-drop: Integrado con dnd-kit via SortableTagRow. Al soltar una fila, se llama POST /teacher/tags/reorder con el nuevo orden de IDs. La mutacion usa useReorderTags (campo tagIds, HTTP PATCH, query key ['tags']).

Modo seleccion multiple: Cuando hay tags seleccionados, aparece barra flotante con:

• Badge de conteo (“3 etiquetas”)
• Boton “Cambiar color” — abre color picker para aplicar el mismo color a todos los tags seleccionados de una sola vez
• Boton rojo “Eliminar”
• Boton gris “Cancelar”

Estado vacio: Icono Tags + “Sin etiquetas” + boton ”+ Nueva etiqueta”

Edicion inline

Hacer doble-click en una fila o pulsar el boton lapiz activa la edicion inline dentro de la propia fila. La fila cambia a mostrar:

1. Color picker — <input type="color"> con circulo de preview y icono de paleta
2. Emoji picker — componente <EmojiPicker> con 11 categorias (smileys, hands, animals, nature, food, activities, travel, objects, education, symbols, flags), busqueda y toggle on/off
3. Input de nombre — Enter para guardar, Escape para cancelar
4. Selector de grupo — <InlineGroupSelect> dropdown con grupos existentes, opcion “Sin grupo”, y opcion “Crear nuevo grupo” con input inline
5. Botones — Check (guardar) y X (cancelar)

Al guardar se llama PATCH /teacher/tags/:id con { name, color, icon, groupName }.

Crear/Editar etiqueta (Sheet)

El formulario de creacion (Sheet lateral) incluye:

• Nombre (requerido)
• Emoji — <EmojiPicker> identico al de edicion inline
• Color (input type=color + hex display + preview badge)
• Grupo — selector inline con creacion sobre la marcha
• Boton “Guardar” (deshabilitado si nombre vacio)

Deteccion de duplicados: case-insensitive, devuelve flag _duplicate sin error.

Merge de tags

Desde el menu de acciones de una etiqueta (tres puntos) o desde la barra de seleccion multiple, el profesor puede fusionar dos etiquetas similares (ej. “Gramatica” y “gramatica”):

• Se elige el tag “fuente” (el que desaparece) y el tag “destino” (el que se conserva)
• El backend reasigna todas las referencias de junction tables (template_tags, resource_tags, session_tags, service_tags) al tag destino
• El tag fuente se soft-delete tras el merge
• Se muestra ConfirmDialog con un resumen de los usos que seran reasignados

Importar presets de etiquetas (Biblioteca multiidioma)

Sheet con biblioteca de presets organizada por idioma y subcategorias. Cada tag incluye emoji y color predefinido.

Selector de idioma (dropdown en la cabecera):

Idioma	Subcategorias
Espanol (default)	Destrezas (7), Actividades (8), Examenes (5), Tematicas (7)
Ingles	Skills (7), Activities (8), Exams (5), Topics (7)
Frances	Competences, Activites, Examens, Themes
Portugues	Habilidades, Atividades, Exames, Temas

Busqueda — Input de busqueda que filtra tags por nombre dentro del idioma activo (case-insensitive).

Cada subcategoria es colapsable con:

• Checkbox “seleccionar grupo completo”
• Badge de progreso: “2/8 imported”
• Checkboxes individuales por tag (con emoji + color + nombre)
• Tags ya importados marcados con icono CheckCircle2 + “Ya importado” (strikethrough, deshabilitados)

Footer sticky con boton “Importar N seleccionadas” y boton “Importar todos los grupos” que selecciona y envia todos los tags de todos los grupos en una sola accion (excluye los ya importados).

Al importar, las etiquetas se crean con el groupName de la subcategoria (ej: “Destrezas”, “Actividades”).

---

Gestor de categorias de clase

Bloque CategoryManager debajo del gestor de etiquetas. Las categorias son las columnas del tablero Kanban en Mi Material (tabla class_categories).

Cabecera:

• Titulo “Categorias” + descripcion
• Boton “Importar de biblioteca” (icono Download)
• Boton ”+ Nueva categoria” (icono Plus)

Tabla de categorias:

• Icono GripVertical (drag handle funcional — reordenacion con dnd-kit)
• Punto de color (background color)
• Nombre de la categoria
• Boton editar (lapiz)
• Boton borrar (papelera)

Reordenacion drag-and-drop: Mismo patron que tags. Al soltar, llama POST /teacher/class-categories/reorder con categoryIds en el nuevo orden.

Estado vacio: Icono equivalente + “Sin categorias” + boton ”+ Nueva categoria”

Crear/Editar categoria (Sheet)

• Nombre (requerido)
• Color (color picker identico al de etiquetas)
• Boton “Guardar” (deshabilitado si nombre vacio)

Importar presets de categorias

Sheet con 3 grupos de presets predefinidos:

Grupo	Categorias	Ejemplo
mcer_levels	6	A1, A2, B1, B2, C1, C2
themes	6	Conversacion, Gramatica, Vocabulario…
dele_levels	6	DELE A2, DELE B1, DELE B2…

La importacion de categorias importa el grupo completo (no permite seleccion individual de items dentro del grupo, a diferencia de los presets de tags).

---

Que falta

Feature	Descripcion	Estado	Implementado
Cambio de color en masa	La barra de seleccion multiple incluye un boton “Cambiar color” que aplica el mismo color a todos los tags seleccionados	✅	Batch 3
Importacion de multiples grupos a la vez	Boton “Importar todos los grupos” en el footer del sheet de presets	✅	Batch 3
Merge de tags	Fusion de dos etiquetas via menu de acciones o seleccion multiple	✅	Batch 3
Tag icons (emoji)	Emoji picker con 11 categorias, busqueda, toggle on/off. Cada tag puede tener un emoji ademas del color	✅	Batch 4
Edicion inline	Doble-click o lapiz activa edicion in-place (nombre, color, emoji, grupo) sin abrir Sheet	✅	Batch 4
Biblioteca multiidioma	Presets en 4 idiomas (ES/EN/FR/PT) con subcategorias, busqueda y badge de progreso	✅	Batch 4
Vista agrupada	Tags se muestran agrupados visualmente por groupName con headers y separadores	✅	Batch 4

---

Que falla

No hay bugs conocidos en esta pagina.

---

Referencia tecnica

Archivos clave

Archivo	Proposito
apps/app/src/routes/teacher/organization.lazy.tsx	Pagina completa (tag manager + category manager)
apps/app/src/components/organization/CategoryManager.tsx	Componente de categorias con CRUD y dnd-kit
apps/api/src/routes/teacher/tags.ts	Rutas HTTP de tags
apps/api/src/services/scheduling/tag-service.ts	CRUD + presets + reorder
apps/api/src/routes/teacher/class-categories.ts	Rutas HTTP de categorias
apps/api/src/services/scheduling/class-category-service.ts	CRUD + presets + reorder categorias

API — Tags

Endpoint	Metodo	Proposito
/teacher/tags	GET	Lista de tags (ordenados por sortOrder) — incluye campo usageCount por tag
/teacher/tags/presets	GET	Presets con marca “ya importado”. Query param: language (spanish/english/french/portuguese)
/teacher/tags	POST	Crear tag (name, color, icon, groupName)
/teacher/tags/:id	PATCH	Editar tag
/teacher/tags/:id	DELETE	Soft-delete tag
/teacher/tags/bulk-delete	POST	Borrado multiple
/teacher/tags/bulk-update-color	POST	Cambiar color en masa ({ tagIds, color })
/teacher/tags/reorder	POST	Reordenar tags (campo tagIds)
/teacher/tags/import-preset	POST	Importar desde preset ({ presetKey: "spanish.skills", tagNames?: [...] })
/teacher/tags/merge	POST	Fusionar dos tags ({ sourceTagId, targetTagId })

Shape de usageCount (campo opcional en cada tag del listado):

interface TagUsageCount {
  templates: number;  // usos en template_tags
  resources: number;  // usos en resource_tags
  sessions: number;   // usos en session_tags
  services: number;   // usos en service_tags
  total: number;      // suma de los cuatro
}

El dialog de confirmacion de borrado individual usa usageCount para mostrar un mensaje detallado cuando total > 0: “Esta etiqueta se usa en N templates, N recursos, N sesiones y N servicios.” Si total === 0, el dialog muestra solo el nombre sin aviso adicional.

API — Categorias

Endpoint	Metodo	Proposito
/teacher/class-categories	GET/POST	Lista/crear categorias
/teacher/class-categories/:id	PATCH/DELETE	Editar/borrar
/teacher/class-categories/reorder	POST	Reordenar categorias (campo categoryIds)
/teacher/class-categories/import-preset	POST	Importar presets (solo acepta presetKey: mcer_levels, themes, dele_levels)

Diferencias entre presets de categorias y tags

Los presets de categorias tienen 3 grupos (mcer_levels: 6, themes: 6, dele_levels: 6) a diferencia de los tags que tienen 4 idiomas x 3-4 subcategorias (~60+ presets con emoji y color). Ademas, la importacion de categorias no soporta filtrado por nombres individuales — se importa el grupo completo. En tags, el endpoint permite seleccionar etiquetas individuales dentro de un grupo.

Queries (TanStack Query)

useQuery({ queryKey: ['tags'], queryFn: ... })
useQuery({ queryKey: ['tag-presets'], queryFn: ..., enabled: importSheetOpen })
useQuery({ queryKey: ['class-categories'], queryFn: ... })
useQuery({ queryKey: ['category-presets'], queryFn: ..., enabled: importSheetOpen })

Invalidaciones adicionales

Las operaciones de borrado de tags (DELETE /teacher/tags/:id y POST /teacher/tags/bulk-delete) tambien invalidan la query ['lesson-templates'], ya que los templates referencian tags via junction table template_tags y el listado de templates incluye sus tagIds.