general-library-union 3.3.2 → 3.3.4

package/src/app/core/componentes/breadcrumb/breadcrumb.component.html

@@ -0,0 +1,6 @@
+<div class="layout-breadcrumb-container flex justify-content-between align-items-center shadow-1">
+  <p-breadcrumb [model]="items" [home]="home" styleClass="layout-breadcrumb pl-4 py-2"></p-breadcrumb>
+  <div class="layout-breadcrumb-buttons flex align-items-center pr-3">
+    <button pButton pRipple type="button" icon="pi pi-power-off" class="p-button-rounded p-button-text p-button-plain mr-1"></button>
+  </div>
+</div>

package/src/app/core/componentes/breadcrumb/breadcrumb.component.ts

@@ -0,0 +1,39 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { MenuItem } from 'primeng/api';
+import { MenuService } from '../../../core/servicios/menu.service';
+import { UtilsService } from '../../servicios/utils.service';
+import { BreadcrumbModule } from 'primeng/breadcrumb';
+
+@Component({
+  selector: 'app-breadcrumb',
+    imports: [BreadcrumbModule],
+    standalone: true,
+    templateUrl: './breadcrumb.component.html',
+  styleUrls: ['./breadcrumb.component.scss'],
+})
+export class BreadcrumbComponent implements OnInit, OnDestroy {
+  subscription: Subscription;
+  items: MenuItem[];
+  home: MenuItem;
+
+  constructor(private menuService: MenuService, public utilsService: UtilsService) {}
+
+  ngOnInit(): void {
+    this.subscription = this.menuService.breadcrumb.subscribe((items) => {
+      this.items = items;
+    });
+    if (window.location.href.toString().includes('admonPortal')) {
+      this.home = { icon: 'pi pi-home', routerLink: '/'+ this.utilsService.obtenerBase() + '/admonPortal/inicio' };
+    } else {
+      this.home = { icon: 'pi pi-home', routerLink: '/'+ this.utilsService.obtenerBase() + '/inicio' };
+    }
+    
+  }
+
+  ngOnDestroy(): void {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
+  }
+}

package/src/app/core/componentes/carga-breadcrumb/carga-breadcrumb.component.html

@@ -0,0 +1 @@
+<p-progressBar *ngIf="isLoading" mode="indeterminate" [style]="{'height': '3px'}"> </p-progressBar>

package/src/app/core/componentes/carga-breadcrumb/carga-breadcrumb.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { LoadingService } from '../../servicios/loading.service';
+import { ProgressBarModule } from 'primeng/progressbar';
+
+@Component({
+  selector: 'app-carga-breadcrumb',
+    imports: [ProgressBarModule],
+    standalone: true,
+    templateUrl: './carga-breadcrumb.component.html',
+  styleUrls: ['./carga-breadcrumb.component.scss']
+})
+export class CargaBreadcrumbComponent implements OnInit {
+
+  isLoading: boolean = false;
+  private loadingSubscription: Subscription;
+
+  constructor(private loadingService:LoadingService) { }
+
+  ngOnInit(): void {
+    this.loadingSubscription = this.loadingService.loadingBreadCrumb.subscribe(status =>
+      this.isLoading = status
+    )
+  }
+
+  ngOnDestroy(): void {
+    if(this.loadingSubscription){
+      this.loadingSubscription.unsubscribe();
+    }
+  }
+}

package/src/app/core/componentes/carga-pantalla-completa/carga-pantalla-completa.component.html

@@ -0,0 +1,9 @@
+<div *ngIf="isLoading" class="progress-spinner">
+  <div class="splash-screen">
+    <div class="splash-loader-container">
+      <svg class="splash-loader" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
+        <circle class="splash-path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
+      </svg>
+    </div>
+  </div>
+</div>

package/src/app/core/componentes/carga-pantalla-completa/carga-pantalla-completa.component.scss

@@ -0,0 +1,28 @@
+.progress-spinner {
+  position: fixed;
+  z-index: 999;
+  height: 2em;
+  width: 2em;
+  overflow: show;
+  margin: auto;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+/* Transparent Overlay */
+.progress-spinner:before {
+content: '';
+display: block;
+position: fixed;
+top: 0;
+left: 0;
+width: 100%;
+height: 100%;
+background-color: rgba(0,0,0,0.53);
+}
+
+.splash-screen{
+  background: transparent !important;
+}

package/src/app/core/componentes/carga-pantalla-completa/carga-pantalla-completa.component.ts

@@ -0,0 +1,32 @@
+import { Component, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { LoadingService } from '../../servicios/loading.service';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-carga-pantalla-completa',
+  imports: [CommonModule],
+    standalone: true,
+    templateUrl: './carga-pantalla-completa.component.html',
+  styleUrls: ['./carga-pantalla-completa.component.scss']
+})
+export class CargaPantallaCompletaComponent implements OnInit {
+
+  public isLoading: boolean;
+  loadingSubscription: Subscription;
+
+  constructor(private loadingService: LoadingService) { }
+
+  ngOnInit(): void {
+    this.loadingSubscription = this.loadingService.loadingFullScreen.subscribe(
+      state => this.isLoading = state
+    )
+  }
+
+  ngOnDestroy(): void {
+    if(this.loadingSubscription){
+      this.loadingSubscription.unsubscribe();
+    }
+  }
+
+}

package/src/app/core/componentes/filtro-general/filtro-general.component.html

@@ -0,0 +1,36 @@
+<div class="flex justify-content-start align-items-center">
+  <div class="flex align-items-center">
+    <h4 class="m-0 mr-2 text-black-alpha-90">Filtros</h4>
+    <button
+      pButton
+      pRipple
+      type="button"
+      icon="pi pi-filter"
+      class="p-button-rounded p-button-outlined"
+      (click)="abrirPanel($event)"
+    ></button>
+  </div>
+  <div class="ml-3">
+    <p-chip
+      pTooltip="{{chip.labelMostrar.length > 25 ? chip.labelMostrar : ''}}" 
+      tooltipPosition="top"
+      *ngFor="let chip of chips"
+      [label]="chip.header + ': ' + (chip.labelMostrar.length > 25 ? chip.labelMostrar.substring(0, 25) + '...' : chip.labelMostrar)"
+      styleClass="m-1"
+      [removable]="chip.disabled ? false : true"
+      (onRemove)="removeChip(chip)"
+    ></p-chip>
+  </div>
+</div>
+
+<p-overlayPanel #op (onHide)="onHide()" [dismissable]="false" [showCloseIcon]="true">
+  <div class="grid p-input-filled">
+    <form [formGroup]="filterForm" class="p-fluid col-12">
+      <ng-container *ngTemplateOutlet="inputFilters; context: { $implicit: filterForm }"></ng-container>
+      <div class="flex justify-content-end mt-2 align-items-center">
+        <button pButton pRipple (click)="aplicarFiltros()" class="ml-2">{{'link_aplicar' | translate}}</button>
+        <button pButton pRipple (click)="limpiarFiltros()" icon="glyphicons glyphicons-cleaning" class="p-button-rounded p-button-outlined ml-2"></button>
+      </div>
+    </form>
+  </div>
+</p-overlayPanel>

package/src/app/core/componentes/filtro-general/filtro-general.component.scss

@@ -0,0 +1,3 @@
+.grid .flex button:last-child {
+    width: auto;
+}

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

@@ -0,0 +1,218 @@
+import { CommonModule, DatePipe } from '@angular/common';
+import {
+  Component,
+  ContentChild,
+  EventEmitter,
+  Input,
+  OnInit,
+  Optional,
+  Output,
+  SkipSelf,
+  TemplateRef,
+  ViewChild,
+  inject,
+  Renderer2,
+  ElementRef} from '@angular/core';
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { ButtonModule } from 'primeng/button';
+import { ChipModule } from 'primeng/chip';
+import { Dialog } from 'primeng/dialog';
+import { OverlayPanel, OverlayPanelModule } from 'primeng/overlaypanel';
+import { TooltipModule } from 'primeng/tooltip';
+import { UtilsService } from '../../servicios/utils.service';
+
+@Component({
+  selector: 'app-filtro-general',
+  imports: [ChipModule, OverlayPanelModule, ReactiveFormsModule, TranslateModule, ButtonModule, FormsModule, CommonModule, TooltipModule],
+  standalone: true,
+  templateUrl: './filtro-general.component.html',
+  styleUrls: ['./filtro-general.component.scss'],
+})
+export class FiltroGeneralComponent implements OnInit {
+  @ViewChild('op') overlayPanel: any;
+
+  @Input() filtros: any[];
+
+  @Input() datatable;
+
+  @Output() metodoRegresar = new EventEmitter();
+  @Output() metodoRegresarAdicional = new EventEmitter();
+
+  @ViewChild(OverlayPanel) panel: OverlayPanel;
+  public eventoPanel;
+  @ContentChild(TemplateRef) inputFilters: TemplateRef<any>;
+
+  filterForm: FormGroup = new FormGroup({});
+
+  chips: any[] = [];
+
+  isApply: boolean = false;
+
+  private clickListener: Function | null = null;
+
+  private renderer = inject(Renderer2);
+  private elRef = inject(ElementRef);
+  private dialog = inject(Dialog, { optional: true, self: true });
+
+  constructor(private utilsService: UtilsService) { }
+
+  ngOnInit(): void {
+    if (this.filtros === undefined) {
+    } else {
+      this.filtros.forEach((control) => {
+        this.filterForm.addControl(control.field, new FormControl());
+      });
+    }
+  }
+
+  onHide() {
+    if (!this.isApply) {
+      this.filtros.forEach((filtro) => {
+        const chipActive = this.chips.find(
+          (chip) => chip.field === filtro.field
+        );
+        this.filterForm.get(filtro.field).setValue(chipActive?.value);
+      });
+    }
+    this.isApply = false;
+  }
+
+  abrirPanel(event): void {
+    this.eventoPanel = event;
+    this.panel.show(event);
+    this.showOverlay(this.overlayPanel, event)
+  }
+
+  limpiarFiltros() {
+    this.isApply = false;
+    this.chips = [];
+    //Se mantiene los filtros tipo disabled true
+    var controlesParaMantener = [];
+    var valores = {};
+    for (let valor of this.filtros) {
+      if (valor.disabled) {
+        controlesParaMantener.push(valor.field);
+      }
+    }
+    controlesParaMantener.forEach(control => {
+      valores[control] = this.filterForm.get(control)?.value;
+    });
+    this.filterForm.reset(valores);
+    this._updateFilters();
+  }
+
+  aplicarFiltros() {
+    this.isApply = true;
+    this.panel.hide();
+    this.chips = [];
+    this._updateFilters();
+  }
+
+  removeChip(chip) {
+    this._updateFilters(chip);
+  }
+
+  _updateFilters(chip?: any): void {
+    const filters = {};
+    this.filtros.forEach((filtro) => {
+      if (chip?.field !== filtro.field) {
+        const value = this.filterForm.get(filtro.field).value;
+        if (value) {
+          filters[filtro.field] = { value: value, matchMode: filtro.matchMode };
+
+          if (!chip) {
+            if (Array.isArray(value)) {
+              var mostrar = '';
+              for (let i = 0; i < value.length; i++) {
+                if (i > 0) {
+                  mostrar = mostrar + ' - '
+                }
+                if (value[i] instanceof Date) {
+                  mostrar = mostrar + new DatePipe('en-US').transform(value[i], 'dd/MM/yyyy')
+                } else {
+                  mostrar = mostrar + value[i]
+                }
+              }
+              this.chips.push({
+                field: filtro.field,
+                value: value,
+                label: filtro.values ? filtro.values(value) : value,
+                header: filtro.header,
+                disabled: filtro.disabled,
+                labelMostrar: mostrar
+              });
+            } else {
+              this.chips.push({
+                field: filtro.field,
+                value: value,
+                label: filtro.values ? filtro.values(value) : value,
+                header: filtro.header,
+                disabled: filtro.disabled,
+                labelMostrar: filtro.formatDate
+                  ? new DatePipe('en-US').transform(value, 'dd/MM/yyyy')
+                  : filtro.values
+                    ? filtro.values(value)
+                    : value,
+                formatDate: filtro.formatDate,
+              });
+            }
+          }
+        }
+      } else {
+        this.chips = this.chips.filter((chip) => chip.field !== filtro.field);
+        this.filterForm.get(filtro.field).setValue(null);
+      }
+    });
+    if (this.datatable) {
+      if (this.datatable.table?.filters) {
+        this.datatable.table.filters = filters;
+        this.datatable.table._filter();
+      } else {
+        this.datatable.filters = filters;
+        this.datatable._filter();
+      }
+    } else {
+      this.metodoRegresar.emit(filters);
+    }
+
+    if (this.metodoRegresarAdicional) {
+      this.metodoRegresarAdicional.emit(filters);
+    }
+  }
+
+  //listener del overlay @autor Jesus-Ramirez
+  showOverlay(op: any, event: Event) {
+    this.clickListener = null
+    // Mostrar el overlay panel
+    op.show(event); //muestra el overlay-panel
+    if (this.dialog) /* Si el overlay está dentro de un p-dialog, usa el método de ocultar al perder el foco*/ {
+      // Eliminar cualquier listener anterior
+      if (this.clickListener) {
+        this.clickListener();
+      }
+      //  adicionar listener para cerrar el overlay al hacer clic fuera de él
+      this.clickListener = this.renderer.listen('document', 'click', (clickEvent: Event) =>  {
+        const clickedInsideOverlay = this.elRef.nativeElement.contains(clickEvent.target);
+        if (!clickedInsideOverlay) {
+          op.hide();
+          this.removeClickListener(); // remueve el overlay
+        }
+      });
+    }
+    this.utilsService.sleep(500).then(data => {
+      this.utilsService.resizeWindowIFrame();
+    })
+  }
+
+  removeClickListener() {
+    if (this.clickListener) {
+      this.clickListener();
+      this.clickListener = null;
+    }
+  }
+
+  ngOnDestroy() {
+    this.removeClickListener();
+  }
+}

package/src/app/core/componentes/footer/footer.component.html

@@ -0,0 +1,13 @@
+<div class="layout-footer flex align-items-center p-3 shadow-2">
+  <img id="footer-logo" [id]="'logoImg'" [src]="'assets/images/logo-union-simple.png'" alt="ultima-footer-logo" />
+  <img id="footer-logo" [id]="'logoName'" [src]=" 'assets/images/texto-union-soluciones.png'" alt="ultima-footer-logo" />
+  <button
+    pButton
+    pRipple
+    type="button"
+    icon="pi pi-facebook fs-large"
+    class="p-button-rounded p-button-text p-button-plain ml-auto mr-2"
+  ></button>
+  <button pButton pRipple  
+  type="button" icon="pi pi-twitter fs-large" class="p-button-rounded p-button-text p-button-plain mr-2"></button>
+</div>

package/src/app/core/componentes/footer/footer.component.scss

@@ -0,0 +1,3 @@
+img {
+    height: 40px;
+}

package/src/app/core/componentes/footer/footer.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  
+    standalone: true,
+    templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.scss']
+})
+export class FooterComponent implements OnInit {
+
+  constructor() {}
+
+  ngOnInit(): void {
+  }
+
+  cambiarColor(color){
+  }
+
+}