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)

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:

• Checkbox de seleccion (individual + “seleccionar todas”)
• Icono GripVertical (drag handle funcional — reordenacion con dnd-kit)
• Punto de color (background color)
• Nombre de la etiqueta
• Columna “Usos” — conteo total de usos del tag (templates + recursos + sesiones + servicios), alineada a la derecha
• Boton editar (lapiz)
• 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”

Crear/Editar etiqueta (Sheet)

• Nombre (requerido)
• Color (input type=color + hex display + preview badge)
• 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

Sheet con 4 grupos de presets predefinidos:

Grupo	Etiquetas	Ejemplo
Skills	7	Gramatica, Vocabulario, Pronunciacion…
Activity Types	8	Juegos, Conversacion, Debate…
Exam Prep	5	DELE, SIELE, AP Spanish…
Topics	7	Cultura, Viajes, Negocios…

Cada grupo es colapsable con:

• Checkbox “seleccionar grupo completo”
• Checkboxes individuales por tag
• Tags ya importados marcados con “Ya importado” (deshabilitados, 50% opacidad)

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).

---

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	Los tags solo tienen color. Podrian tener un icono asociado ademas del color	Implementado ✅

---

Que falla

No hay bugs conocidos en esta pagina.

---

Referencia tecnica

Archivos clave

Archivo	Proposito
apps/web/src/routes/teacher/organization.lazy.tsx	Pagina completa (tag manager + category manager)
apps/web/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”
/teacher/tags	POST	Crear tag
/teacher/tags/:id	PATCH	Editar tag
/teacher/tags/:id	DELETE	Soft-delete tag
/teacher/tags/bulk-delete	POST	Borrado multiple
/teacher/tags/reorder	POST	Reordenar tags (campo tagIds)
/teacher/tags/import-preset	POST	Importar desde preset

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 grupos (skills: 7, activity_types: 8, exam_prep: 5, topics: 7). 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.