shared-lib-angular 1.0.0

package/src/lib/components/dashboard/dashboard.component.spec.ts

@@ -0,0 +1,255 @@
+/**
+ * DashboardComponent Unit Tests
+ * ==============================
+ * Pruebas unitarias para el componente de dashboard
+ */
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DashboardComponent, DashboardConfig } from './dashboard.component';
+import { AuthService } from '../../services/authentication.service';
+import { AuthorizationService } from '../../services/authorization.service';
+import { Router } from '@angular/router';
+import { BehaviorSubject, of } from 'rxjs';
+import { MenuHierarchyItem } from '../../models';
+
+describe('DashboardComponent', () => {
+  let component: DashboardComponent;
+  let fixture: ComponentFixture<DashboardComponent>;
+  let authServiceMock: jest.Mocked<Partial<AuthService>>;
+  let authzServiceMock: jest.Mocked<Partial<AuthorizationService>>;
+  let routerMock: jest.Mocked<Partial<Router>>;
+
+  const isAuthenticatedSubject = new BehaviorSubject<boolean>(true);
+
+  const mockMenuHierarchy: MenuHierarchyItem[] = [
+    {
+      id: '1',
+      label: 'Inicio',
+      icon: 'home',
+      route: '/home',
+      order: 1,
+      children: []
+    },
+    {
+      id: '2',
+      label: 'Configuración',
+      icon: 'settings',
+      route: '/settings',
+      order: 2,
+      children: [
+        {
+          id: '2.1',
+          label: 'Perfil',
+          icon: 'person',
+          route: '/settings/profile',
+          order: 1,
+          children: []
+        }
+      ]
+    }
+  ];
+
+  beforeEach(async () => {
+    authServiceMock = {
+      isAuthenticated$: isAuthenticatedSubject.asObservable(),
+      identityClaims: { name: 'Test User', email: 'test@example.com' },
+      getUserGroups: jest.fn().mockReturnValue(['admin-group']),
+      logout: jest.fn()
+    };
+
+    authzServiceMock = {
+      getMenuHierarchy: jest.fn().mockReturnValue(of(mockMenuHierarchy)),
+      hasChildren: jest.fn().mockImplementation((item) => item.children && item.children.length > 0)
+    };
+
+    routerMock = {
+      navigate: jest.fn().mockResolvedValue(true),
+      url: '/home'
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [DashboardComponent],
+      providers: [
+        { provide: AuthService, useValue: authServiceMock },
+        { provide: AuthorizationService, useValue: authzServiceMock },
+        { provide: Router, useValue: routerMock }
+      ]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DashboardComponent);
+    component = fixture.componentInstance;
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Inicialización', () => {
+    it('debería crear el componente', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('debería tener configuración por defecto', () => {
+      const config = component.getConfig();
+      expect(config.title).toBeDefined();
+      expect(config.logoUrl).toBeDefined();
+    });
+  });
+
+  describe('getConfig', () => {
+    it('debería retornar la configuración por defecto', () => {
+      const config = component.getConfig();
+      expect(config.title).toBe('Sistema de Gestión');
+      expect(config.showVersion).toBe(true);
+    });
+
+    it('debería mergear la configuración personalizada', () => {
+      const customConfig: Partial<DashboardConfig> = {
+        title: 'Mi Dashboard',
+        footerText: '© 2026 Mi Empresa'
+      };
+      component.config = customConfig;
+
+      const config = component.getConfig();
+      expect(config.title).toBe('Mi Dashboard');
+      expect(config.footerText).toBe('© 2026 Mi Empresa');
+    });
+  });
+
+  describe('ngOnInit', () => {
+    it('debería cargar la jerarquía de menú al iniciar', () => {
+      fixture.detectChanges();
+      expect(authzServiceMock.getMenuHierarchy).toHaveBeenCalled();
+    });
+  });
+
+  describe('toggleMobileMenu', () => {
+    it('debería alternar el estado del menú móvil', () => {
+      expect(component.isMobileMenuOpen).toBe(false);
+      
+      component.toggleMobileMenu();
+      expect(component.isMobileMenuOpen).toBe(true);
+      
+      component.toggleMobileMenu();
+      expect(component.isMobileMenuOpen).toBe(false);
+    });
+  });
+
+  describe('closeMobileMenu', () => {
+    it('debería cerrar el menú móvil', () => {
+      component.isMobileMenuOpen = true;
+      component.closeMobileMenu();
+      expect(component.isMobileMenuOpen).toBe(false);
+    });
+  });
+
+  describe('toggleUserPanel', () => {
+    it('debería alternar el panel de usuario', () => {
+      expect(component.isUserPanelOpen).toBe(false);
+      
+      component.toggleUserPanel();
+      expect(component.isUserPanelOpen).toBe(true);
+      
+      component.toggleUserPanel();
+      expect(component.isUserPanelOpen).toBe(false);
+    });
+  });
+
+  describe('toggleSubmenu', () => {
+    it('debería expandir un submenú', () => {
+      const menuItem = mockMenuHierarchy[1];
+      component.toggleSubmenu(menuItem);
+      expect(component.expandedMenus.has(menuItem.id)).toBe(true);
+    });
+
+    it('debería colapsar un submenú expandido', () => {
+      const menuItem = mockMenuHierarchy[1];
+      component.expandedMenus.add(menuItem.id);
+      
+      component.toggleSubmenu(menuItem);
+      expect(component.expandedMenus.has(menuItem.id)).toBe(false);
+    });
+  });
+
+  describe('isMenuExpanded', () => {
+    it('debería retornar true si el menú está expandido', () => {
+      const menuItem = mockMenuHierarchy[1];
+      component.expandedMenus.add(menuItem.id);
+      expect(component.isMenuExpanded(menuItem)).toBe(true);
+    });
+
+    it('debería retornar false si el menú no está expandido', () => {
+      const menuItem = mockMenuHierarchy[1];
+      expect(component.isMenuExpanded(menuItem)).toBe(false);
+    });
+  });
+
+  describe('navigateTo', () => {
+    it('debería navegar a la ruta especificada', () => {
+      component.navigateTo('/home');
+      expect(routerMock.navigate).toHaveBeenCalledWith(['/home']);
+    });
+
+    it('debería cerrar el menú móvil después de navegar', () => {
+      component.isMobileMenuOpen = true;
+      component.navigateTo('/home');
+      expect(component.isMobileMenuOpen).toBe(false);
+    });
+  });
+
+  describe('onLogout', () => {
+    it('debería llamar al método logout del AuthService', () => {
+      component.onLogout();
+      expect(authServiceMock.logout).toHaveBeenCalled();
+    });
+
+    it('debería cerrar el panel de usuario', () => {
+      component.isUserPanelOpen = true;
+      component.onLogout();
+      expect(component.isUserPanelOpen).toBe(false);
+    });
+  });
+
+  describe('getUserInitials', () => {
+    it('debería retornar las iniciales del nombre del usuario', () => {
+      const initials = component.getUserInitials();
+      expect(initials).toBe('TU'); // Test User
+    });
+
+    it('debería retornar "??" si no hay claims', () => {
+      authServiceMock.identityClaims = null;
+      const initials = component.getUserInitials();
+      expect(initials).toBe('??');
+    });
+  });
+
+  describe('Template rendering', () => {
+    beforeEach(() => {
+      fixture.detectChanges();
+    });
+
+    it('debería renderizar el header', () => {
+      const compiled = fixture.nativeElement;
+      const header = compiled.querySelector('.dashboard-header');
+      expect(header).toBeTruthy();
+    });
+
+    it('debería renderizar la navegación', () => {
+      const compiled = fixture.nativeElement;
+      const nav = compiled.querySelector('.dashboard-nav');
+      expect(nav).toBeTruthy();
+    });
+
+    it('debería renderizar el footer', () => {
+      const compiled = fixture.nativeElement;
+      const footer = compiled.querySelector('.dashboard-footer');
+      expect(footer).toBeTruthy();
+    });
+
+    it('debería renderizar el área de contenido', () => {
+      const compiled = fixture.nativeElement;
+      const content = compiled.querySelector('.dashboard-content');
+      expect(content).toBeTruthy();
+    });
+  });
+});

package/src/lib/components/dashboard/dashboard.component.ts

@@ -0,0 +1,286 @@
+import { Component, OnInit, HostListener, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { AuthService } from '../../services/authentication.service';
+import { AuthorizationService } from '../../services/authorization.service';
+import { MenuHierarchyItem } from '../../models/authorization.interface';
+import { VERSION } from '../../version';
+
+export interface DashboardConfig {
+  /** Application title displayed in the header */
+  title: string;
+  /** Optional subtitle */
+  subtitle?: string;
+  /** Logo URL */
+  logoUrl: string;
+  /** Logo alt text */
+  logoAlt: string;
+  /** Footer text */
+  footerText: string;
+  /** Whether to show the version in the footer */
+  showVersion: boolean;
+  /** Version string */
+  version: string;
+  /** Whether to show static menu items (Inicio, Página Ejemplo, Componentes UI) */
+  showStaticMenu: boolean;
+}
+
+const DEFAULT_DASHBOARD_CONFIG: DashboardConfig = {
+  title: 'Sistema',
+  logoUrl: 'assets/@dinafi/frmk/logo-mh.png',
+  logoAlt: 'Logo',
+  footerText: 'Ministerio de Hacienda, El Salvador',
+  showVersion: true,
+  version: VERSION,
+  showStaticMenu: true
+};
+
+@Component({
+  selector: 'lib-dashboard',
+  standalone: true,
+  imports: [CommonModule, RouterModule],
+  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.scss']
+})
+export class DashboardComponent implements OnInit {
+  @Input() config: Partial<DashboardConfig> = {};
+
+  userInfo: any = null;
+  userRoles: string[] = [];
+  menuHierarchy: MenuHierarchyItem[] = [];
+  isMenuOpen = false;
+  isLoadingMenu = false;
+  openMenuItems: Set<string> = new Set();
+  isUserPanelOpen = false;
+  isMobileMenuOpen = false;
+
+  private _mergedConfig: DashboardConfig = { ...DEFAULT_DASHBOARD_CONFIG };
+
+  constructor(
+    public authService: AuthService,
+    private readonly authorizationService: AuthorizationService
+  ) {}
+
+  ngOnInit(): void {
+    this._mergedConfig = {
+      ...DEFAULT_DASHBOARD_CONFIG,
+      ...this.config,
+      version: this.config.version || VERSION
+    };
+    this.loadUserInfo();
+    this.loadMenuHierarchy();
+  }
+
+  getConfig<K extends keyof DashboardConfig>(key: K): DashboardConfig[K] {
+    return this._mergedConfig[key];
+  }
+
+  get appVersion(): string {
+    return this._mergedConfig.version;
+  }
+
+  private loadUserInfo(): void {
+    this.userInfo = this.authService.identityClaims;
+    this.userRoles = this.authService.getUserRoles();
+  }
+
+  private loadMenuHierarchy(): void {
+    this.isLoadingMenu = true;
+    this.authorizationService.getMenuHierarchy().subscribe({
+      next: (menuItems) => {
+        this.menuHierarchy = this.buildHierarchicalMenu(menuItems);
+        this.isLoadingMenu = false;
+      },
+      error: (error) => {
+        console.error('Error loading menu hierarchy:', error);
+        this.menuHierarchy = [];
+        this.isLoadingMenu = false;
+      }
+    });
+  }
+
+  private buildHierarchicalMenu(flatItems: MenuHierarchyItem[]): MenuHierarchyItem[] {
+    const itemMap = new Map<string, MenuHierarchyItem>();
+    
+    flatItems.forEach(item => {
+      itemMap.set(item.path, { ...item, children: [] });
+    });
+
+    const rootItems: MenuHierarchyItem[] = [];
+    
+    flatItems.forEach(item => {
+      const currentItem = itemMap.get(item.path)!;
+      
+      if (item.level === 1) {
+        rootItems.push(currentItem);
+      } else {
+        const parent = this.findParent(item, flatItems);
+        if (parent) {
+          const parentItem = itemMap.get(parent.path);
+          if (parentItem?.children) {
+            parentItem.children.push(currentItem);
+          }
+        }
+      }
+    });
+
+    return rootItems;
+  }
+
+  private findParent(item: MenuHierarchyItem, allItems: MenuHierarchyItem[]): MenuHierarchyItem | null {
+    for (const potentialParent of allItems) {
+      if (potentialParent.level === item.level - 1 && 
+          item.path.startsWith(potentialParent.path) &&
+          item.path !== potentialParent.path) {
+        return potentialParent;
+      }
+    }
+    return null;
+  }
+
+  toggleMenuItem(itemId: string, item: MenuHierarchyItem): void {
+    const isCurrentlyOpen = this.openMenuItems.has(itemId);
+    
+    if (isCurrentlyOpen) {
+      this.closeMenuAndChildren(itemId);
+    } else {
+      this.closeSiblingMenus(item);
+      this.openMenuItems.add(itemId);
+    }
+  }
+
+  private closeMenuAndChildren(itemId: string): void {
+    this.openMenuItems.delete(itemId);
+    const itemsToClose = Array.from(this.openMenuItems).filter(id => id.startsWith(itemId + '-'));
+    itemsToClose.forEach(id => this.openMenuItems.delete(id));
+  }
+
+  private closeSiblingMenus(currentItem: MenuHierarchyItem): void {
+    if (currentItem.level === 1) {
+      const rootItems = this.getRootMenuItems();
+      rootItems.forEach(rootItem => {
+        if (rootItem.code !== currentItem.code) {
+          this.closeMenuAndChildren(rootItem.code);
+        }
+      });
+    } else {
+      const allItems = this.flattenMenuItems(this.menuHierarchy);
+      const parent = this.findParent(currentItem, allItems);
+      if (parent?.children) {
+        parent.children.forEach(sibling => {
+          if (sibling.code !== currentItem.code) {
+            this.closeMenuAndChildren(sibling.code);
+          }
+        });
+      }
+    }
+  }
+
+  private flattenMenuItems(items: MenuHierarchyItem[]): MenuHierarchyItem[] {
+    const flattened: MenuHierarchyItem[] = [];
+    
+    const flatten = (itemList: MenuHierarchyItem[]) => {
+      itemList.forEach(item => {
+        flattened.push(item);
+        if (item.children) {
+          flatten(item.children);
+        }
+      });
+    };
+    
+    flatten(items);
+    return flattened;
+  }
+
+  onMenuItemClick(event: Event, item: MenuHierarchyItem): void {
+    if (this.hasChildren(item)) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.toggleMenuItem(item.code, item);
+    }
+  }
+
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(event: Event): void {
+    const target = event.target as HTMLElement;
+    const navElement = target.closest('.dashboard-nav');
+    const userPanel = target.closest('.user-profile');
+    
+    if (!navElement) {
+      this.openMenuItems.clear();
+    }
+    
+    if (!userPanel) {
+      this.isUserPanelOpen = false;
+    }
+  }
+
+  toggleUserPanel(event: Event): void {
+    event.stopPropagation();
+    this.isUserPanelOpen = !this.isUserPanelOpen;
+  }
+
+  getUsername(): string {
+    if (!this.userInfo?.preferred_username) return 'usuario';
+    const username = this.userInfo.preferred_username;
+    const atIndex = username.indexOf('@');
+    return atIndex > 0 ? username.substring(0, atIndex) : username;
+  }
+
+  getUserFullName(): string {
+    return this.userInfo?.name || 'Usuario';
+  }
+
+  getDocument(): string {
+    return this.userInfo?.dui || 'N/A';
+  }
+
+  getInstitution(): string {
+    return this.userInfo?.direccion || 'N/A';
+  }
+
+  getDependency(): string {
+    return this.userInfo?.dependencia || 'N/A';
+  }
+
+  getRole(): string {
+    return this.userInfo?.cargo || 'N/A';
+  }
+
+  isMenuItemOpen(itemId: string): boolean {
+    return this.openMenuItems.has(itemId);
+  }
+
+  hasChildren(item: MenuHierarchyItem): boolean {
+    return !!(item.children && item.children.length > 0);
+  }
+
+  getRootMenuItems(): MenuHierarchyItem[] {
+    return this.menuHierarchy.filter(item => item.level === 1);
+  }
+
+  logoutAndRedirect(): void {
+    this.authService.logoutAndRedirect();
+  }
+
+  getUserInitials(): string {
+    if (!this.userInfo) return 'U';
+    
+    const name = this.userInfo.name || this.userInfo.preferred_username || 'Usuario';
+    const words = name.split(' ');
+    
+    if (words.length >= 2) {
+      return (words[0][0] + words[1][0]).toUpperCase();
+    } else {
+      return name.substring(0, 2).toUpperCase();
+    }
+  }
+
+  toggleMobileMenu(): void {
+    this.isMobileMenuOpen = !this.isMobileMenuOpen;
+  }
+
+  closeMobileMenu(): void {
+    this.isMobileMenuOpen = false;
+  }
+}

package/src/lib/components/index.ts

@@ -0,0 +1,2 @@
+export * from './login/login.component';
+export * from './dashboard/dashboard.component';

package/src/lib/components/login/login.component.html

@@ -0,0 +1,85 @@
+<div class="login-page" [ngStyle]="getCustomStyles()">
+  <div class="login-page__container">
+    <!-- Logo -->
+    <div class="login-page__logo">
+      <img 
+        [src]="getConfig('logoUrl')" 
+        [alt]="getConfig('logoAlt')" 
+        class="login-page__logo-img"
+        [style.width]="getConfig('logoWidth')"
+        [style.height]="getConfig('logoHeight')" />
+    </div>
+
+    <!-- Header -->
+    <div class="login-page__header">
+      <h1>{{ getConfig('title') }}</h1>
+      <p *ngIf="getConfig('subtitle')" class="subtitle">{{ getConfig('subtitle') }}</p>
+    </div>
+    
+    <!-- Login Form -->
+    <div *ngIf="(authService.isDoneLoading$ | async)" class="login-page__form">
+      <div *ngIf="!(authService.isAuthenticated$ | async)">
+        <!-- Status Message -->
+        <div *ngIf="statusMessage" class="auth-alert auth-alert--info">
+          <div class="auth-alert__content">
+            <p>{{ statusMessage }}</p>
+          </div>
+        </div>
+
+        <!-- Login Button -->
+        <button 
+          class="btn btn--primary btn--lg" 
+          (click)="login()" 
+          [disabled]="isLoggingIn"
+          [class.loading]="isLoggingIn">
+          {{ isLoggingIn ? 'Redirigiendo...' : getConfig('loginButtonText') }}
+        </button>
+
+        <!-- Footer -->
+        <div class="login-page__footer" *ngIf="getConfig('showFooter')">
+          <p *ngIf="getConfig('footerText'); else defaultFooter">
+            {{ getConfig('footerText') }}
+          </p>
+          <ng-template #defaultFooter>
+            <p>
+              Acceso seguro para usuarios de 
+              <strong>{{ getConfig('institutionName') }}</strong>
+            </p>
+          </ng-template>
+        </div>
+      </div>
+      
+      <!-- Already Authenticated -->
+      <div *ngIf="authService.isAuthenticated$ | async" class="auth-alert auth-alert--success">
+        <div class="auth-alert__content">
+          <h4>¡Sesión activa!</h4>
+          <p>Ya tienes una sesión iniciada en el sistema.</p>
+        </div>
+        
+        <div class="login-page__actions">
+          <button class="btn btn--primary btn--lg" (click)="goToDashboard()">
+            {{ getConfig('dashboardButtonText') }}
+          </button>
+          
+          <button 
+            *ngIf="getConfig('showLogoutButton')"
+            class="btn btn--secondary btn--lg" 
+            (click)="logout()">
+            {{ getConfig('logoutButtonText') }}
+          </button>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Loading State -->
+    <div *ngIf="!(authService.isDoneLoading$ | async)" class="auth-loading">
+      <div class="auth-loading__spinner"></div>
+      <p class="auth-loading__text">Procesando autenticación...</p>
+    </div>
+
+    <!-- Version -->
+    <div *ngIf="getConfig('showVersion')" class="login-page__version">
+      <span>v{{ getConfig('version') }}</span>
+    </div>
+  </div>
+</div>