Buscar en la documentación

Personalizar el dashboard

Mover, estirar, quitar y agregar widgets en un borrador, guardarlo por persona en el servidor o volver al diseño original.

2 min de lecturaVer en GitHub

En portátil y monitor, el botón “Personalizar” convierte el dashboard en un editor sobre una grilla de 12 columnas. Todo se hace en un borrador: nada cambia en el servidor hasta pulsar Guardar. En tablet y celular no se edita; los widgets se acomodan solos en el orden guardado, y un ícono de información junto al título lo explica.

Diagrama4 carriles · 12 pasos · 1 salidas de error
GuardarRestaurarCancelarSíNoPulsa Personalizar1Mueve, estira,quita o agregawidgets2Aplica las reglasal borrador3¿Qué hace alterminar?4Descarta elborrador5Confirma y envíaDELETE/dashboard/layout6Borra las filas dela persona7Muestra el diseñooriginal8Envía PUT/dashboard/layout9¿Diseño válidopara su rol?10Responde 422 conel widgetReemplaza su diseño11Sale del modoedición con eldiseño nuevo12
Los números coinciden con el paso a paso. En pantallas pequeñas el diagrama se desliza de lado.

Paso a paso

  1. PersonaPulsa Personalizar

    Aparece una barra fija con Agregar widget, Restaurar original, Cancelar y Guardar. Los widgets siguen mostrando datos reales, pero sin poder pulsarlos (inert).

  2. PersonaMueve, estira, quita o agrega widgets

    Arrastrando por la agarradera o desde el menú ⋯ de cada widget (también con teclado). La medida (columnas × filas) aparece solo mientras se estira.

  3. NavegadorAplica las reglas al borrador

    Reglas puras en layoutEditing.ts: mover intercambia con el vecino, estirar respeta los topes de cada widget, todo se compacta hacia arriba y un widget agregado va al final con su tamaño original. Las cifras siguen al borrador.

  4. Persona¿Qué hace al terminar?
  5. NavegadorDescarta el borrador

    Si hubo cambios, pide confirmación. Salir de la página o cerrar la pestaña con cambios también la pide.

  6. NavegadorConfirma y envía DELETE /dashboard/layout
  7. Base de datosBorra las filas de la persona

    Sin filas, la persona ve el diseño original del catálogo (in_default_layout).

  8. NavegadorMuestra el diseño original
  9. NavegadorEnvía PUT /dashboard/layout

    Con cada widget, su lugar (x, y, ancho, alto) y si está visible.

  10. API¿Diseño válido para su rol?

    Cada widget permitido para su rol, sin repetidos, dentro de las 12 columnas, con su tamaño entre los topes y sin encimarse con otro.

  11. Base de datosReemplaza su diseño

    Una fila por widget en user_dashboard_widgets (clave compuesta persona + widget). Un widget oculto conserva su lugar para cuando se vuelva a agregar.

  12. NavegadorSale del modo edición con el diseño nuevo

Si la ventana se angosta por debajo del tamaño de portátil mientras se edita, aparece un aviso y el borrador se conserva hasta que vuelva a caber.

Qué ve la persona en cada error

CódigoHTTPCuándoMensaje en pantalla
WIDGET_NOT_AVAILABLE422El diseño trae un widget que su cuenta ya no puede usarUno de los widgets ya no está disponible para tu cuenta. Recarga la página para ver tu dashboard actual.
WIDGET_DUPLICATED422Un widget aparece dos vecesUn widget quedó repetido en el diseño. Recarga la página y vuelve a acomodarlo.
WIDGET_OUT_OF_GRID422Un widget se sale de las 12 columnasUn widget quedó fuera del espacio del dashboard. Muévelo dentro de la grilla e inténtalo de nuevo.
WIDGET_SIZE_OUT_OF_RANGE422Un widget pasa de sus topesUn widget quedó más grande o más pequeño de lo permitido. Ajusta su tamaño e inténtalo de nuevo.
WIDGETS_OVERLAP422Dos widgets se encimanDos widgets quedaron uno encima del otro. Sepáralos e inténtalo de nuevo.

Con el editor del navegador estos errores no deberían ocurrir: la API los revisa porque es la única garantía.

Dónde está en el código