feature-layout contiene el armazón visual compartido de Nebula ERP: compone la navegación lateral, la cabecera, las migas de pan, el contenido de la ruta activa y el pie de página. También incluye el contenedor de pestañas y el Centro de Tareas.
| Carpeta / archivo | Responsabilidad |
|---|---|
layout/ |
Componente raíz nebula-layout; decide qué elementos del armazón se muestran y los acomoda alrededor del router-outlet. |
sidebar-wrapper/ |
Carga y presenta el menú del producto, sincroniza su selección con la ruta y permite contraer o expandir la navegación. |
topbar-wrapper/ |
Adapta la cabecera del kit: búsqueda global, perfil, idioma, tema, acceso a productos, fecha del sistema y Centro de Tareas. |
breadcrumb-wrapper/ |
Presenta las migas de pan, combinando los datos publicados por rutas y servicios de navegación. |
footer-wrapper/ |
Presenta el pie de página y resuelve la información de compañía, conexión, fecha e idioma. |
tab-container/ |
Componente de contenedor de pestañas para vistas que organizan contenido por pestaña. |
centro-tareas/ |
Bandeja de tareas en segundo plano y vista de detalle: ejecución, progreso, lotes, traza, órdenes y acciones permitidas. |
LayoutComponent (layout/layout.component.ts) crea el esqueleto que se ve en layout/layout.component.html:
SidebarWrapperComponent si la ruta permite el menú lateral.TopbarWrapperComponent si la ruta permite la cabecera y le pasa los estados de búsqueda, notificaciones, fecha y productos. El valor de actualización está fijado en false en esta plantilla.BreadcrumbWrapperComponent si corresponde.<router-outlet> y mantiene el pie de página debajo del contenido.El layout actualiza visibilidad, título, menú de perfil y migas al iniciar y al recibir cada NavigationEnd. Usa servicios compartidos para estado del menú, tema, autenticación, traducción y sincronización de navegación.
Los datos de la ruta (route.data) pueden definir showSidebar, showHeader, showBreadcrumb, showSearch, showNotifications, showRefresh y showSystemDate. Para los elementos de la cabecera que no tengan dato explícito, se aplican reglas derivadas de la URL:
/layout/company o /layout/products se consideran restringidas. En ellas se ocultan el sidebar, las migas y los elementos de búsqueda, notificaciones y actualización; el acceso a productos también se oculta.showRefresh)Nota: Esto fue definido en reunión con gerencia y arquitectura, el boton refresh no debe salir en el topbar.
El código actual calcula la visibilidad de actualización por ruta en LayoutComponent: inicializa la señal showRefresh en false y, al iniciar o navegar.
Sin embargo, ese valor calculado ya no se propaga al encabezado:
layout/layout.component.html pasa [showRefresh]="false" a app-topbar-wrapper.topbar-wrapper/topbar-wrapper.component.ts declara @Input() showRefresh = false.topbar-wrapper/topbar-wrapper.component.html también pasa [showRefresh]="false" a lib-header, sin usar el input recibido.Resultado actual: el botón de actualización está oculto en todas las rutas. Los valores de route.data.showRefresh y el cálculo por URL siguen existiendo, pero no afectan lo que muestra el encabezado debido a esos dos enlaces fijos en false.
Antes el enlace del layout enviaba el valor calculado con [showRefresh]="showRefresh()"; el cambio actual lo fija en false. Para volver a habilitar la visibilidad dinámica habría que propagar el valor del layout al wrapper y que el wrapper use su input en lib-header (por ejemplo, [showRefresh]="showRefresh"). Esta sección describe el comportamiento actual; no implica que el botón deba reactivarse.
La cabecera envuelve HeaderComponent de nebula-ui-kit. Incluye búsqueda global con resultados navegables, notificaciones, alternancia de tema, selección de idioma y menú de perfil. El menú puede mostrar la presentación de perfil 3.0 con identidad, compañía, ambiente y acciones. En su slot de acciones monta app-bandeja-tareas con @defer (on idle) para diferir su carga hasta que el navegador quede libre.
El wrapper del sidebar carga el menú de navegación, adapta etiquetas e iconos, sincroniza la ruta seleccionada y gestiona cambios de producto, idioma y ruta. Su estado expandido se comparte mediante SidebarStateService.
El wrapper combina los tramos proporcionados por las rutas con el paso de navegación actual; resuelve etiquetas e iconos por módulo y modo de vista.
El wrapper obtiene el nombre de compañía desde el almacenamiento de sesión o los datos del usuario, comprueba la conexión y escucha cambios de ruta, almacenamiento e idioma para mantener los datos presentados actualizados. El layout usa la variante login en rutas de inicio de sesión y default en las demás.
tab-container/ reúne la implementación visual y lógica del contenedor de pestañas del feature. La configuración concreta de cada pantalla depende del módulo que lo utilice.
CentroTareasComponent ofrece cuatro pestañas: en ejecución, terminadas, fallidas y canceladas. Consulta hasta 50 tareas por pestaña, presenta una lista y el detalle de la tarea elegida, y habilita pausar, reanudar, cancelar, reintentar o descargar según las capacidades devueltas por el registro. El detalle incluye progreso, log, lotes, traza y órdenes.
El centro refresca sus datos al entrar con el parámetro ?tarea=<jobId>, después de enviar una orden y cada cinco segundos mientras haya tareas en ejecución. La bandeja compacta de la cabecera es un componente separado y se carga de forma diferida.
src/lib/layout/layout.component.ts y layout.component.htmlsrc/lib/topbar-wrapper/topbar-wrapper.component.ts y topbar-wrapper.component.htmlsrc/lib/sidebar-wrapper/sidebar-wrapper.component.tssrc/lib/breadcrumb-wrapper/breadcrumb-wrapper.component.tssrc/lib/footer-wrapper/footer-wrapper.component.tssrc/lib/tab-container/tab-container.component.tssrc/lib/centro-tareas/centro-tareas.component.ts y centro-tareas.layout.ts