CreaRack-SL

UI del preview de import Visio v2 — categorías por shape y renombrado inline

Vista limpiaEditar
Funcionalidadactivecreado Mon Jul 13#stencils#visio#import#frontend#ui#ux#polling#async

Descripción

Segunda entrega (PR 2/3) del plan de modernización del import de Visio, aprobado en s220.

El usuario ahora accede a una interfaz visual completa para importar y personalizar stencils desde ficheros modernos Visio (.vsdx / .vsd) sin abandone la página: el modal muestra progreso en tiempo real (spinner + polling asíncrono), previsualizaciones de cada shape, edición inline de nombres y asignación de categorías por shape (en lugar de una sola categoría global).

Lo que cambia

Frontend (UI)

Modal de import mejorado (static/js/editor/import_export.js):

  • Aceptación de .vsdx y .vsd además de .vssx/.vdx/.vss/.svg.
  • Polling asíncrono: cuando el backend responde status=processing, el modal entra en espera (spinner) y consulta GET /api/racks/visio/session/{id} cada 2.5 segundos hasta 4 minutos máximo. Si el usuario cierra el modal o arranca otra importación, la espera se cancela limpiamente.
  • Grid del preview v2:
    • Cada fila muestra miniatura del shape (SVG convertido o icono extraído; .vss diferidos indican “No preview”).
    • Nombre editable inline (input de texto, sin interferir con la selección de la fila).
    • Categoría por shape (input editable; vacío = categoría general del modal).
    • La fila completa selecciona/deselecciona; los inputs no la interfieren.

Estilos (static/css/components.css):

  • .import-item-preview: 48×40 px, flex-center, fondo #f5f5f5, borde fino.
  • .import-item-name-input, .import-item-category-input: inputs editable con padding/font-size estándar.
  • .import-processing + .import-processing-spinner: placeholder con spinner rotatorio (animación 0.8s) y texto explicativo.

Internacionalización:

  • Nuevos strings EN con t():
    • “Category (optional)”
    • “Category for this stencil”
    • “Category for this stencil. Empty = the category name above.”
    • “Converting Visio file… Large files can take a few minutes.”
    • “Conversion failed”
    • “Conversion timed out. Try again with a smaller file.”
    • “Stencil name”
    • “Imported %(count)s stencils into %(categories)s categories”
  • Catálogo ES actualizado a mano (entrada quirúrgica v1.49.1 + compilemessages verificado).

Backend (API)

Endpoint POST /api/racks/visio/confirm (racks/api/library_files.py):

  • Cambio de contrato: ya no espera category_name global (o lo ignora). Cada master en la lista masters viaja con su propio category.
  • Respuesta ampliada: cada stencil importado en imported[] ahora incluye el campo category individual.
  • El frontend agrupa por categoría sin recargar la página — cada shape puede ir a su propia carpeta.

Fix inmediato: reset del input Visio tras análisis, para permitir reelegir el mismo fichero si el polling fue abortado (cierre modal).

Tests

test_confirm_per_shape_categories (tests/api/test_visio_import_v2.py):

  • Verifica que confirm responde con category por item.
  • Stencils se crean en sus categorías respectivas (Cisco, APC, etc.), no en una sola.
  • Área Visio: 13/13 tests en Docker.

Arquitectura del flujo

Usuario sube .vsdx
    ↓
POST /api/visio/analyze (formData)
    ↓
  Backend inicia worker async → responde { session_id, status="processing", ... }
    ↓
Frontend renderiza spinner + inicia polling
    ↓
GET /api/racks/visio/session/{id} cada 2.5s
    ↓
Cuando status=done, renderiza grid con previews + inputs editable
    ↓
Usuario edita nombres y categorías, confirma
    ↓
POST /api/racks/visio/confirm (masters con category por item)
    ↓
Backend crea stencils en sus carpetas, responde { imported: [..., {id, name, category, ...}] }
    ↓
Frontend agrupa por category y añade al panel sin recargar

Límites conocidos

  • Conversión por página: un SVG por página del dibujo. El troceo fino por shape individual es una posible v2.
  • QA con ficheros reales: Cisco/APC/Schneider se valida en la tercera entrega (PR 3), que es puro QA con ficheros de verdad.

Cambios en dependencias

Ninguno. JavaScript vanilla (como el resto del editor), CSS puro, Django i18n estándar.

Impacto usuario

✅ El botón de importar ahora soporta .vsdx y .vsd (formatos modernos de Visio de Microsoft Office). ✅ Progreso visual mientras el servidor convierte ficheros grandes (spinner + estimación de tiempo). ✅ Previsualización de shapes con miniaturas extraídas automáticamente. ✅ Renombrado inline antes de importar (sin recargar la página). ✅ Categoría por shape — cada stencil puede ir a su propia carpeta, o dejar vacío para usar la categoría general.

Notas de desarrollo

  • Polling asincrónico: implementado con async/await + setTimeout. Reemplazo de la llamada síncrona anterior (v1.52.0 solo analizaba .vssx/.vdx/.vss).
  • Session ID: UUID generado en el backend, viaja en la respuesta de analyze y en cada consulta de estado.
  • Sanitización: el SVG de cada master sigue siendo sanitizado antes de persistir (herencia de v1.52.0 PR 1/3).
  • i18n quirúrgico: strings nuevos SOLO en este commit; reutilización de strings existentes donde fue posible.

Véase también

  • [[feature—stencils—visio-v2-motor-backend]]
  • [[concept—saas—multi-tenancy]]
  • [[entity—racks—endpoint—confirm-visio-import]]
  • [[entity—racks—endpoint—analyze-visio]]
  • [[entity—racks—model—stencil]]

Referenciado desde

Inicio
Yo