Guía de Usuario: Reordenamiento de Pestañas de Workspace mediante Drag and Drop¶

Tabla de Contenidos¶

Introducción
Características Principales
Cómo Usar el Drag and Drop
Configuración de Usuario
Casos de Uso
Preguntas Frecuentes
Solución de Problemas

Introducción¶

El Netsocs Dashboard ahora incluye funcionalidad de reordenamiento de pestañas mediante arrastrar y soltar (drag and drop). Esta característica le permite personalizar el orden de sus workspaces (espacios de trabajo) de manera visual e intuitiva, organizándolos según su preferencia o flujo de trabajo.

¿Qué son las pestañas de workspace?¶

Las pestañas de workspace son las pestañas ubicadas en la parte superior del dashboard que le permiten navegar entre diferentes espacios de trabajo. Cada workspace puede contener widgets, configuraciones y vistas personalizadas.

Estado inicial de las pestañas

Características Principales¶

✨ Funcionalidades¶

Reordenamiento Visual: Arrastre y suelte pestañas para reorganizarlas
Sincronización Automática: El nuevo orden se guarda automáticamente en el backend
Pestaña Home Fija: La pestaña "Home" permanece fija y no se puede mover
Feedback Visual: Indicadores visuales durante el proceso de arrastre
Persistencia: El orden se mantiene entre sesiones
Control de Usuario: Opción para bloquear/desbloquear el drag and drop

🎯 Beneficios¶

Productividad Mejorada: Organice sus workspaces en el orden que más le convenga
Personalización: Adapte la interfaz a su flujo de trabajo específico
Eficiencia: Acceda más rápidamente a sus workspaces más utilizados

Cómo Usar el Drag and Drop¶

Paso 1: Identifique las Pestañas de Workspace¶

En la parte superior del dashboard, verá las pestañas de workspace:

Home: Pestaña del dashboard principal (NO se puede mover)
workspace-2, workspace-1, etc.: Sus espacios de trabajo personalizados (SÍ se pueden mover)

Paso 2: Arrastrar una Pestaña¶

Posicione el cursor sobre la pestaña que desea mover
- El cursor cambiará a un ícono de "mover" (✋) indicando que la pestaña es arrastrable
Haga clic y mantenga presionado el botón izquierdo del mouse sobre la pestaña
Arrastre la pestaña hacia la izquierda o derecha a la posición deseada
- Verá una animación visual que muestra el movimiento
- Las otras pestañas se reorganizarán automáticamente

Paso 3: Soltar la Pestaña¶

Suelte el botón del mouse cuando la pestaña esté en la posición deseada
- La pestaña se colocará en su nueva posición
- Verá un mensaje "Reordering..." indicando que se está guardando el cambio
- El nuevo orden se sincronizará automáticamente con el servidor

Ejemplo Visual del Proceso¶

Estado Inicial:
┌──────┬─────────────┬─────────────┐
│ Home │ workspace-2 │ workspace-1 │
└──────┴─────────────┴─────────────┘

Usuario arrastra "workspace-1" hacia la izquierda:
┌──────┬─────────────┬─────────────┐
│ Home │ workspace-2 │ [workspace-1] →
└──────┴─────────────┴─────────────┘

Estado Final:
┌──────┬─────────────┬─────────────┐
│ Home │ workspace-1 │ workspace-2 │
└──────┴─────────────┴─────────────┘

⚠️ Nota Importante: Pestaña "Home"¶

La pestaña "Home" está fija y NO se puede mover. Esto es por diseño, ya que el Home es el dashboard principal y debe permanecer siempre en la primera posición para facilitar la navegación.

Indicadores visuales de la pestaña Home:

Cursor normal (no cambia a ícono de "mover")
No responde a intentos de arrastre
Siempre permanece en la primera posición

Configuración de Usuario¶

Acceso a la Configuración¶

Para acceder a las opciones de configuración relacionadas con las pestañas:

Haga clic en el botón de menú (ícono de tres barras ☰) ubicado en la esquina superior derecha del dashboard
Seleccione "View settings" del menú desplegable
Se abrirá el panel de Configuración de Usuario

Opción: Bloquear Drag and Drop de Pestañas¶

En el panel de configuración, encontrará la siguiente opción:

🔒 Block Workspace Tabs Drag and Drop¶

Descripción: Prevenir el reordenamiento de pestañas de workspace mediante arrastrar y soltar

Ubicación: Panel de configuración de usuario → Sección "Block Workspace Tabs Drag and Drop"

Cómo funciona:

Desactivado (predeterminado): Las pestañas son arrastrables y se pueden reordenar libremente
Activado: Las pestañas están bloqueadas y no se pueden mover

¿Cuándo usar esta opción?¶

✅ Active el bloqueo si:

Tiene un orden específico y no desea cambios accidentales
Comparte su dispositivo con otros usuarios
Prefiere un layout estático y consistente
Trabaja en un entorno donde los cambios no son deseables

❌ Mantenga el bloqueo desactivado si:

Necesita reorganizar frecuentemente sus workspaces
Está experimentando con diferentes configuraciones
Su flujo de trabajo cambia regularmente

Cómo Activar/Desactivar el Bloqueo¶

Acceda al panel de Configuración de Usuario (ver sección anterior)
Localice la opción "Block Workspace Tabs Drag and Drop"
- Verá un ícono de candado (🔒) junto al título
- Descripción: "Prevent reordering workspace tabs by dragging"
Haga clic en el switch para alternar entre:
- Activado (switch a la derecha, color activo): Drag and drop bloqueado
- Desactivado (switch a la izquierda, color gris): Drag and drop habilitado
El cambio se guarda automáticamente y se aplica de inmediato
Cierre el panel de configuración

Efecto del Bloqueo¶

Cuando el bloqueo está activado:

El cursor sobre las pestañas muestra el ícono normal (no el ícono de "mover")
No se puede iniciar el arrastre de pestañas
Las pestañas mantienen su posición fija
El orden existente se conserva

Cuando el bloqueo está desactivado:

El cursor sobre las pestañas muestra el ícono de "mover" (✋)
Se puede arrastrar y soltar pestañas libremente
El reordenamiento funciona normalmente

Casos de Uso¶

Caso 1: Organización por Prioridad¶

Escenario: María trabaja con 5 workspaces diferentes y quiere tener los más importantes al inicio.

Solución:

María arrastra "Monitoreo Principal" a la segunda posición (después de Home)
Coloca "Alarmas" en la tercera posición
Los workspaces menos utilizados quedan al final

Resultado: Acceso rápido a los workspaces críticos sin necesidad de hacer scroll o buscar.

Caso 2: Organización por Flujo de Trabajo¶

Escenario: Juan sigue un proceso secuencial en su trabajo diario.

Solución:

Organiza los workspaces en orden cronológico de uso:
- Home
- "Revisión Matutina"
- "Operaciones"
- "Cierre Diario"

Resultado: Navegación natural siguiendo el flujo de trabajo del día.

Caso 3: Organización por Departamento¶

Escenario: Ana gestiona múltiples áreas y quiere agrupar por departamento.

Solución:

Agrupa los workspaces relacionados:
- Home
- "Seguridad - Acceso"
- "Seguridad - Alarmas"
- "Operaciones - Logística"
- "Operaciones - Mantenimiento"

Resultado: Organización lógica que facilita la gestión de múltiples áreas.

Caso 4: Bloqueo para Entorno Compartido¶

Escenario: Un centro de control tiene una configuración óptima que no debe cambiar.

Solución:

El administrador organiza los workspaces en el orden óptimo
Activa la opción "Block Workspace Tabs Drag and Drop"
Todos los operadores ven el mismo orden consistente

Resultado: Prevención de cambios accidentales y consistencia en el equipo.

Preguntas Frecuentes¶

¿Por qué no puedo mover la pestaña "Home"?¶

R: La pestaña "Home" está diseñada para permanecer siempre en la primera posición como punto de referencia principal del dashboard. Esto garantiza que siempre tenga un punto de partida conocido y consistente.

¿Se guarda automáticamente el nuevo orden?¶

R: Sí, cada vez que reorganiza las pestañas, el nuevo orden se guarda automáticamente en el servidor. Verá un mensaje "Reordering..." durante el proceso de guardado.

¿El orden se mantiene si cierro sesión?¶

R: Sí, el orden de las pestañas es persistente y se mantiene entre sesiones. Cuando vuelva a iniciar sesión, verá las pestañas en el mismo orden que las dejó.

¿Qué pasa si múltiples usuarios comparten la misma cuenta?¶

R: Cada usuario tiene su propio orden de pestañas asociado a su perfil. Si comparte una cuenta, el último orden guardado será el que vean todos los usuarios de esa cuenta.

¿Puedo deshacer un cambio de orden?¶

R: Puede reorganizar las pestañas tantas veces como desee. Simplemente arrastre la pestaña de vuelta a su posición anterior.

¿Funciona el drag and drop en dispositivos táctiles?¶

R: La funcionalidad está optimizada principalmente para uso con mouse. En dispositivos táctiles, puede funcionar con gestos de arrastrar, pero la experiencia puede variar según el dispositivo.

¿Qué pasa si hay un error al guardar el orden?¶

R: Si ocurre un error de red o del servidor al guardar el orden, el sistema automáticamente revierte las pestañas a su orden anterior y muestra un mensaje de error en la consola. Puede intentar reorganizar nuevamente cuando la conexión se restablezca.

¿Hay un límite en la cantidad de pestañas que puedo tener?¶

R: No hay un límite estricto impuesto por la funcionalidad de drag and drop, pero un número muy grande de pestañas puede afectar la usabilidad de la interfaz.

¿Puedo reorganizar pestañas en dispositivos móviles?¶

R: La interfaz está diseñada principalmente para uso en desktop. En dispositivos móviles, se recomienda usar el dashboard en modo landscape (horizontal) para una mejor experiencia.

Solución de Problemas¶

Problema: El cursor no cambia a ícono de "mover"¶

Posibles causas y soluciones:

La pestaña "Home" está seleccionada
- ✅ Solución: La pestaña Home no es arrastrable por diseño. Intente con otras pestañas.
El drag and drop está bloqueado
- ✅ Solución: Verifique en la configuración de usuario si la opción "Block Workspace Tabs Drag and Drop" está activada. Desactívela si desea habilitar el arrastre.
Problema de caché del navegador
- ✅ Solución: Recargue la página con Ctrl+F5 (Windows) o Cmd+Shift+R (Mac)

Problema: La pestaña vuelve a su posición original después de soltarla¶

Posibles causas y soluciones:

Error de conexión con el servidor
- ✅ Solución: Verifique su conexión a internet y vuelva a intentar
Error del servidor al guardar
- ✅ Solución: Revise la consola del navegador (F12) para ver mensajes de error. Contacte al administrador si persiste.
Permisos insuficientes
- ✅ Solución: Verifique que su cuenta tenga permisos para modificar la configuración de workspace.

Problema: El mensaje "Reordering..." permanece visible indefinidamente¶

Posibles causas y soluciones:

Problema de red
- ✅ Solución: Recargue la página. Si el problema persiste, verifique su conexión a internet.
Error del servidor
- ✅ Solución: Espere unos segundos y recargue la página. El orden debería reflejar el último estado guardado exitosamente.

Problema: Las pestañas aparecen en diferente orden en otro dispositivo¶

Posibles causas y soluciones:

Sincronización pendiente
- ✅ Solución: Recargue la página en el otro dispositivo para obtener la configuración más reciente.
Cuentas diferentes
- ✅ Solución: Verifique que esté usando la misma cuenta de usuario en ambos dispositivos.

Problema: No puedo encontrar la opción de configuración¶

Posible causa y solución:

No puede localizar el menú de configuración
- ✅ Solución: Busque el botón con ícono de tres barras (☰) en la esquina superior derecha del dashboard. Haga clic y seleccione "View settings".

¿Necesita más ayuda?¶

Si continúa experimentando problemas:

Consulte los logs del navegador: Presione F12 para abrir las herramientas de desarrollo y revise la pestaña "Console" para mensajes de error.
Limpie la caché del navegador: A veces, datos antiguos en caché pueden causar comportamientos inesperados.
Contacte al administrador del sistema: Proporcione detalles específicos sobre el problema, incluyendo:
- Navegador y versión utilizada
- Pasos para reproducir el problema
- Mensajes de error (si los hay)
- Capturas de pantalla del problema

Resumen de Teclas y Acciones¶

Acción	Método
Mover una pestaña	Click + Arrastrar
Cancelar arrastre	Soltar fuera del área de pestañas
Acceder a configuración	Menú (☰) → "View settings"
Bloquear drag and drop	Configuración → Toggle "Block Workspace Tabs Drag and Drop"
Recargar página	Ctrl+R (Windows) / Cmd+R (Mac)
Recargar sin caché	Ctrl+F5 (Windows) / Cmd+Shift+R (Mac)

Notas Técnicas¶

Compatibilidad de Navegadores¶

La funcionalidad de drag and drop está soportada en:

✅ Chrome 90+
✅ Firefox 88+
✅ Edge 90+
✅ Safari 14+

Requisitos¶

Conexión a internet activa para guardar cambios
Permisos de usuario adecuados
JavaScript habilitado en el navegador

Rendimiento¶

El reordenamiento es optimista: la UI se actualiza inmediatamente
La sincronización con el servidor ocurre en segundo plano
Si hay un error de red, el orden se revierte automáticamente

Conclusión¶

La funcionalidad de drag and drop para pestañas de workspace le proporciona un control total sobre la organización de su interfaz en Netsocs Dashboard. Use esta característica para optimizar su flujo de trabajo y mejorar su productividad diaria.

Recuerde:

🏠 La pestaña "Home" siempre permanece fija
💾 Los cambios se guardan automáticamente
🔒 Puede bloquear el drag and drop si lo necesita
🔄 El orden persiste entre sesiones

Documentación generada para Netsocs Dashboard v2.0.0 Última actualización: Diciembre 2025