general-library-union 3.3.2 → 3.3.4

package/src/app/core/componentes/tabla-general/tabla-general.component.ts

@@ -0,0 +1,96 @@
+import {
+  AfterContentInit,
+  AfterViewInit,
+  Component,
+  ContentChildren,
+  EventEmitter,
+  HostListener,
+  Input,
+  OnInit,
+  Output,
+  QueryList,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core';
+import { PrimeTemplate } from 'primeng/api';
+import { Table, TableModule } from 'primeng/table';
+import { TableColumn } from '../../modelos/table-column.model';
+import { CommonModule, DatePipe, TitleCasePipe } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { PaginatorModule } from 'primeng/paginator';
+
+@Component({
+  selector: 'app-tabla-general',
+  imports: [TableModule, TitleCasePipe, DatePipe, TranslateModule, CommonModule, PaginatorModule],
+    standalone: true,
+    templateUrl: './tabla-general.component.html',
+  styleUrls: ['./tabla-general.component.scss'],
+})
+export class TablaGeneralComponent implements OnInit, AfterContentInit, AfterViewInit {
+  @Input() dataKey: string;
+
+  @Input() value: any[] = [];
+
+  @Input() columns: TableColumn[] = [];
+
+  @Input() rows: number;
+
+  @Input() totalRecords: number;
+
+  @Input() loading: boolean;
+
+  @Input() ocultarFraccionador: boolean;
+
+  @Output() onLoad: EventEmitter<any> = new EventEmitter<any>();
+
+  @Output() onRowSelect: EventEmitter<any> = new EventEmitter<any>();
+
+  @ContentChildren(PrimeTemplate) templates: QueryList<PrimeTemplate>;
+
+  @ViewChild(Table) table: Table;
+
+  headerTemplate: TemplateRef<any>;
+  bodyTemplate: TemplateRef<any>;
+  rowExpansionTemplate: TemplateRef<any>;
+
+  showFrozen: boolean = false;
+  minTableWidth: number = 200;
+
+  constructor() { }
+
+  ngOnInit(): void {
+    this.minTableWidth = this.columns.reduce((acc, column) => {
+      return acc + column.width;
+    }, 0);
+  }
+
+  ngAfterContentInit(): void {
+    this.templates.forEach((item) => {
+      switch (item.getType()) {
+        case 'header':
+          this.headerTemplate = item.template;
+          break;
+        case 'body':
+          this.bodyTemplate = item.template;
+          break;
+      }
+    });
+  }
+
+  ngAfterViewInit(): void {
+    setTimeout(() => this._shouldFreezeTable());
+  }
+
+  @HostListener('window:resize')
+  onResize() {
+    this._shouldFreezeTable();
+  }
+
+  _shouldFreezeTable() {
+    this.showFrozen = this.table.tableViewChild.nativeElement.parentElement.clientWidth < this.minTableWidth;
+  }
+
+  parseDate(obj) {
+    return new Date(obj);
+  }
+}

package/src/app/core/core.module.ts

@@ -0,0 +1,22 @@
+import { ModuleWithProviders, NgModule } from '@angular/core';
+ 
+
+@NgModule({
+  declarations: [
+  ],
+  imports: [
+  ],
+  providers: [
+  ],
+  exports: [
+  ],
+})
+export class CoreModule {
+  public static forRoot(): ModuleWithProviders<any> {
+    return {
+      ngModule: CoreModule,
+      providers: [
+      ],
+    };
+  }
+}

package/src/app/core/errores/authentication.error.ts

@@ -0,0 +1,6 @@
+export class AuthenticationError extends Error {
+  constructor(message) {
+    super(message);
+    this.name = this.constructor.name;
+  }
+}

package/src/app/core/modelos/error-response.model.ts

@@ -0,0 +1,9 @@
+export interface ErrorResponseModel {
+  mensaje: string;
+  codigo: string;
+  tipo: string;
+  errorCode: string;
+  causa: string;
+  traza: string;
+  accion: string;
+}

package/src/app/core/modelos/table-column.model.ts

@@ -0,0 +1,10 @@
+export interface TableColumn {
+  field: string;
+  header: string;
+  isFrozen?: boolean;
+  width?: number;
+  flexGrow?: number;
+  canOrder?: boolean;
+  values?: { [key: string]: string };
+  formatDate?: boolean;
+}

package/src/app/core/modelos/user.model.ts

@@ -0,0 +1,6 @@
+export class UserLoginCredentials {
+  login: string;
+  clave: string;
+  aplicacion: string;
+  base: string;
+}

package/src/app/core/plantilla-general/plantilla-general.template.html

@@ -0,0 +1,139 @@
+<div
+  class="layout-wrapper p-input-filled layout-menu-static layout-menu-light layout-topbar-dark"
+  [ngClass]="{'layout-menu-active': menuActive,
+              'layout-menu-mobile-active': mobileMenuActive,
+              'layout-topbar-mobile-active': mobileTopbarActive }"
+>
+ <!--INICIO TOPBAR-->
+ <div class="layout-topbar shadow-4">
+  <div class="layout-topbar-left">
+    <a class="layout-topbar-logo">{{ nombreEmpresa | uppercase }}</a>
+
+    <a class="layout-menu-button shadow-6" (click)="onMenuButtonClick($event)" pRipple>
+      <i class="pi pi-chevron-right"></i>
+    </a>
+
+    <a class="layout-topbar-mobile-button" (click)="onTopbarMobileButtonClick($event)" pRipple>
+      <i class="pi pi-ellipsis-v fs-large"></i>
+    </a>
+  </div>
+
+  <div class="layout-topbar-right" [ngClass]="{ 'layout-topbar-mobile-active': mobileTopbarActive }">
+    <div class="layout-topbar-actions-left"></div>
+
+    <div class="layout-topbar-actions-right">
+      <ul class="layout-topbar-items">
+        <li class="layout-topbar-item layout-search-item">
+          <a class="layout-topbar-action rounded-circle" (click)="onTopbarItemClick($event, 'search')" pRipple>
+            <i class="pi pi-search fs-large"></i>
+          </a>
+
+          <div
+            class="layout-search-panel p-inputgroup"
+            [@topbarActionPanelAnimation]="'visible'"
+            *ngIf="search"
+            (@topbarActionPanelAnimation.done)="onSearchAnimationEnd($event)">
+            <span class="p-inputgroup-addon"><i class="pi pi-search"></i></span>
+            <p-autoComplete
+              #searchInput
+              placeholder="Buscar una tarea..."
+              (click)="searchClick = true"
+              [dropdown]="false"
+              [(ngModel)]="tareaSeleccionadas"
+              [suggestions]="tareasFiltradas"
+              (completeMethod)="filterTarea($event)"
+              (onSelect)="tareaSeleccion()"
+              field="descripcion"
+              styleClass="w-full h-full"
+            >
+            </p-autoComplete>
+            <span class="p-inputgroup-addon">
+              <button
+                pButton
+                pRipple
+                type="button"
+                icon="pi pi-times"
+                class="p-button-rounded p-button-text p-button-plain"
+                (click)="searchClick = false"
+              ></button>
+            </span>
+          </div>
+        </li>
+
+        <li class="layout-topbar-item app">
+          <a class="layout-topbar-action rounded-circle" (click)="onTopbarItemClick($event, 'modules')" pRipple>
+            <i class="pi pi-table fs-large"></i>
+          </a>
+
+          <div
+            class="layout-topbar-action-panel shadow-6"
+            [@topbarActionPanelAnimation]="'visible'"
+            *ngIf="activeTopbarItem === 'modules'"
+          >
+            <div class="grid grid-nogutter">
+              <div class="layout-topbar-action-item col-4" *ngFor="let modulo of modulosDisponibles">
+                <a class="flex align-items-center text-color" href="/inicio"  pRipple (click)="cambioModulo(modulo, true)">
+                  <i class="action app-bgcolor">
+                    <img [src]="'assets/modulos/' + modulo.icono" /> 
+                  </i>
+                  <span style="font-size: 10px; text-align: left">{{ modulo.descripcion }}</span>
+                </a>
+              </div>
+            </div>
+          </div>
+        </li>
+
+        <li class="layout-topbar-item">
+          <a
+            class="layout-topbar-action flex flex-row justify-content-center align-items-center px-2 rounded-circle"
+            (click)="onTopbarItemClick($event, 'profile')"
+            pRipple
+          >
+            <img src="" alt="avatar" style="width: 32px; height: 32px" />
+          </a>
+
+          <ul
+            class="layout-topbar-action-panel shadow-6"
+            [@topbarActionPanelAnimation]="'visible'"
+            *ngIf="activeTopbarItem === 'profile'"
+          >
+            <li class="layout-topbar-action-item">
+              <a class="flex flex-row align-items-center" pRipple (click)="salir()">
+                <i class="pi pi-power-off mr-2"></i>
+                <span>Logout</span>
+              </a>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+ <!--FIN TOPBAR-->
+  <!--<div class="menu-wrapper" (click)="menuClick = true">
+    <div class="layout-menu-container">
+     
+    </div>
+  </div>
+  <p-sidebar [(visible)]="menuClick">
+    <app-menu [modulo]="modulo"></app-menu>
+  </p-sidebar>
+
+  <div class="layout-main">
+    <app-breadcrumb></app-breadcrumb>
+    <app-carga-breadcrumb></app-carga-breadcrumb>
+
+    <div class="layout-content">
+      <div class="grid">
+        <div class="col-12">
+          <div class="us-main-content card p-3">
+            <router-outlet></router-outlet>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <app-footer></app-footer>
+  </div>
+</div>-->

package/src/app/core/plantilla-general/plantilla-general.template.scss

@@ -0,0 +1,37 @@
+@import "../../../styles/sass/variables";
+@import "../../../styles/sass/mixins";
+
+.us-main-content {
+    min-height: calc(100vh - 190px);
+}
+
+//@import "variables";
+//@import "mixins";
+.p-inputgroup button.p-button-rounded {
+    border-radius: 50%;
+}
+
+.layout-topbar .layout-topbar-right .layout-topbar-actions-right .layout-topbar-items .layout-topbar-item.app {
+    .layout-topbar-action-panel {
+        min-width: 35rem;
+        box-shadow: 0px 0px 20px hsla(var(--color-h), 100%, 35%, 0.4) !important;
+
+
+        .app-bgcolor {
+            background: var(--color-400);
+            flex: 0 0 42px;
+
+            img {
+                width: 20px;
+            }
+
+            + span {
+                padding-left: 0.6rem;
+            }
+        }
+    }
+
+    .layout-topbar-action-item:hover {
+        background: hsla(var(--color-h) 100% 60%/0.18);
+    }
+}

package/src/app/core/plantilla-general/plantilla-general.template.ts

@@ -0,0 +1,233 @@
+import { AfterViewInit, Component, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { AuthService } from '../../core/servicios/auth.service';
+import { MenuService } from '../..//core/servicios/menu.service';
+import { StorageService } from '../../core/servicios/storage.service';
+import { PrimeNGConfig } from 'primeng/api';
+import { Subscription } from 'rxjs';
+import { ModulosModel } from '../../seguridad/modelos/ModulosModel';
+import { TareasModel } from '../../seguridad/modelos/TareasModel';
+import { AutoComplete, AutoCompleteModule } from 'primeng/autocomplete';
+import { trigger, style, transition, animate, AnimationEvent } from '@angular/animations';
+import { CargarControlFuncionalidadService } from '../servicios/cargar-control-funcionalidad.service';
+import { UtilsService } from '../servicios/utils.service';
+import { StyleClassModule } from 'primeng/styleclass';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { AppSidebarComponent } from '../../layout/app.sidebar.component';
+import { AppTopbarComponent } from '../../layout/app.topbar.component';
+import { AppFooterComponent } from '../../layout/app.footer.component';
+import { AppRightMenuComponent } from '../../layout/app.rightmenu.component';
+import { AppBreadcrumbComponent } from '../../layout/app.breadcrumb.component';
+@Component({
+  selector: 'app-plantilla-general',
+    imports: [StyleClassModule, CommonModule, AutoCompleteModule, FormsModule, AppSidebarComponent, AppBreadcrumbComponent, AppTopbarComponent, AppRightMenuComponent,AppFooterComponent], 
+    standalone: true,
+    templateUrl: './plantilla-general.template.html',
+  styleUrls: ['./plantilla-general.template.scss'],
+  animations: [
+    trigger('topbarActionPanelAnimation', [
+      transition(':enter', [
+        style({ opacity: 0, transform: 'scaleY(0.8)' }),
+        animate('.12s cubic-bezier(0, 0, 0.2, 1)', style({ opacity: 1, transform: '*' })),
+      ]),
+      transition(':leave', [animate('.1s linear', style({ opacity: 0 }))]),
+    ]),
+  ],
+})
+export class PlantillaGeneralTemplate implements OnInit, AfterViewInit, OnDestroy {
+  modulo: string;
+  intervalId: number;
+  menuActive: boolean = true;
+  mobileMenuActive: boolean = false;
+  mobileTopbarActive: boolean = false;
+  menuClick: boolean = false;
+  topbarItemClick: boolean = false;
+  activeTopbarItem: string = '';
+  search: boolean = false;
+  searchClick: boolean = false;
+
+  documentClickListener!: () => void;
+
+  nombreEmpresa: string = '1 - Unión Soluciones';
+  modulosDisponibles: ModulosModel[] = new Array();
+  tareaSeleccionadas: TareasModel;
+  tareasFiltradas: TareasModel[];
+
+  @ViewChild('searchInput') searchInputViewChild!: AutoComplete;
+
+
+  constructor(
+    private primeConfig: PrimeNGConfig,
+    private renderer: Renderer2,
+    private menuService: MenuService,
+    private authService: AuthService,
+    private router: Router,
+    private storage: StorageService,
+    private activatedRoute: ActivatedRoute,
+    private utilsService: UtilsService,
+    private storageService: StorageService,
+    private controlFuncionalidad: CargarControlFuncionalidadService
+  ) {}
+
+  /**
+   * Activa ripple de PrimeNG para las animaciones de los botones
+   */
+  ngOnInit(): void {
+    this.modulosDisponibles = JSON.parse(this.storage.getItem('modulos'));
+    this.activatedRoute.data.subscribe((v) =>{ 
+      //this.modulosDisponibles = v['modulosDisponibles']
+      this.primeConfig.ripple = true;
+      this.modulo = this.storage.getItem('moduloSeleccionado')
+    });
+  }
+
+  /**
+   * Después de crear la vista y sub-vistas inicializa las tareas y eventos básicos como
+   * el timer de sesión, cargar el menú y eventos del html para ocultar menús.
+   */
+  ngAfterViewInit(): void {
+    this.documentClickListener = this.renderer.listen('body', 'click', () => {
+      if (!this.topbarItemClick) {
+        this.activeTopbarItem = '';
+      }
+
+      if (!this.menuClick) {
+        if (this.mobileMenuActive) {
+          this.mobileMenuActive = false;
+        }
+      }
+
+      if (!this.searchClick) {
+        this.search = false;
+      }
+
+      this.searchClick = false;
+      this.topbarItemClick = false;
+      this.menuClick = false;
+      this.modulo = this.storage.getItem('moduloSeleccionado')
+      let moduloSeleccionado: ModulosModel = new ModulosModel(this.modulo, '');
+      this.cambioModulo(moduloSeleccionado, false)
+    });
+
+    this.menuService.loadTareas().subscribe(() => {
+      setTimeout(() => {
+        this.menuService.setTareasDelModulo(this.modulo);
+      });
+    });
+
+    // Cada 5 minutos verifica que el token no haya expirado
+    this.intervalId = window.setInterval(() => {
+      if (!this.authService.isTokenValid()) {
+        this.authService.deleteToken();
+        if (window.location.href.toString().includes('admonPortal')) {
+          this.router.navigateByUrl(this.utilsService.obtenerBase() + '/admonPortal/timeout');
+        } else {
+          this.router.navigateByUrl(this.utilsService.obtenerBase() + '/timeout');
+        }
+      }
+    }, 300_000);
+  }
+
+  /**
+   * Limpia el componente de las subscripciones
+   */
+  ngOnDestroy(): void {
+    clearInterval(this.intervalId);
+  }
+
+  /**
+   * Muestra/Esconte el menú principal de navegación
+   * @param event
+   */
+  onMenuButtonClick(event: { preventDefault: () => void }): void {
+    this.menuActive = !this.menuActive;
+    this.menuClick = true;
+
+    if (this._isMobile()) {
+      this.mobileMenuActive = !this.mobileMenuActive;
+    }
+
+    event.preventDefault();
+  }
+
+  /**
+   * Si el sitio esta en móviles, muestra/esconde el menú de la barra superior (los tres puntos)
+   * @param event
+   */
+  onTopbarMobileButtonClick(event: { preventDefault: () => void }): void {
+    this.mobileTopbarActive = !this.mobileTopbarActive;
+    event.preventDefault();
+  }
+
+  /**
+   * Muestra/Esconde los menus emergentes de la barra superior (Buscar, Módulos y Perfil).
+   * @param event
+   * @param item
+   */
+  onTopbarItemClick(event: { preventDefault: () => void }, item: string): void {
+    this.topbarItemClick = true;
+
+    if (this.activeTopbarItem === item) {
+      this.activeTopbarItem = '';
+    } else {
+      this.activeTopbarItem = item;
+    }
+
+    if (item === 'search') {
+      this.search = !this.search;
+      this.searchClick = !this.searchClick;
+    }
+
+    event.preventDefault();
+  }
+
+  /**
+   * Si la pantalla tiene un ancho menor o igual a 991 es un dispositivo móvil.
+   * @returns boolean
+   */
+  private _isMobile(): boolean {
+    return window.innerWidth <= 991;
+  }
+
+  onSearchAnimationEnd(event: AnimationEvent) {
+    switch (event.toState) {
+      case 'visible':
+        //this.searchInputViewChild.f;
+        break;
+    }
+  }
+
+  salir() {
+    this.authService.deleteToken();
+    this.controlFuncionalidad.eliminarFuncionalidades();
+    this.router.navigateByUrl(this.utilsService.obtenerBase() + '/login');
+  }
+
+  cambioModulo(modulo: ModulosModel, navegar: boolean): void {
+    this.storageService.setItem('moduloSeleccionado', modulo.llave)
+    this.menuService.setTareasDelModulo(modulo.llave);
+    if (navegar){
+      this.router.navigateByUrl( this.utilsService.obtenerBase() + '/inicio');
+    }
+  }
+
+  filterTarea(event) {
+    const filtered: TareasModel[] = [];
+    let tareas: TareasModel[] = this.storageService.getItem('__tareas') != null ? JSON.parse(this.storageService.getItem('__tareas')) : '';
+    const query = event.query;
+    for (let i = 0; i < tareas.length; i++) {
+      const country = tareas[i];
+      if (country.descripcion.toLowerCase().includes(query.toLowerCase())) {
+        filtered.push(country);
+      }
+    }
+    this.tareasFiltradas = filtered;
+  }
+
+  tareaSeleccion() {
+    if (this.tareaSeleccionadas != null) {
+      this.router.navigate([this.utilsService.obtenerBase() +  this.tareaSeleccionadas.urlprincipal.replace(/.jsf/, '')]);
+    }
+  }
+}