sigesp 1.1.55-20250722 → 1.1.56-20250722

package/projects/sigesp/src/lib/shared/components/catalogo/catalogo.component.html

@@ -0,0 +1,45 @@
+<div class="container">
+
+    <!-- HEADER DE EL COMPONENTE -->
+    <div class="header mainColor">
+        <!-- TÍTULO -->
+        <h2>{{dialogData.title}}</h2>
+        <!-- BTN CERRAR -->
+        <div class="close">
+            <div class="btn" (click)="closeDialog()">
+                <mat-icon>close</mat-icon>
+            </div>
+        </div>
+    </div>
+
+    <!-- BODY -->
+    <div class="body">
+        <!-- FILTER -->
+        <div class="filter">
+            <mat-form-field class="input">
+                <input type="text" matInput placeholder="Filtrar" (keyup)="filterTable($event)">
+            </mat-form-field>
+        </div>
+
+        <!-- TABLA -->
+        <div class="table-container">
+            <table mat-table [dataSource]="dataSource" matSort>
+                <!-- DATA -->
+                <ng-container *ngFor="let column of colunms;let i = index" [matColumnDef]="column">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header> 
+                        {{ (names[i] ? names[i] : column) | uppercase}} 
+                    </th>
+                    <td mat-cell *matCellDef="let row" (click)="closeDialog(row)">
+                        {{row[column]}} 
+                    </td>
+                </ng-container>
+    
+                <tr mat-header-row *matHeaderRowDef="colunms"></tr>
+                <tr mat-row *matRowDef="let row; columns: colunms;" class="row"></tr>
+            </table>
+        </div>
+        <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" showFirstLastButtons class="paginator"></mat-paginator>
+    </div>
+
+</div>
+ 

package/projects/sigesp/src/lib/shared/components/catalogo/catalogo.component.scss

@@ -0,0 +1,82 @@
+
+.container {
+
+    .header {
+        padding: 15px;
+        text-align: center;
+        border-radius: 5px 5px 0 0;
+        display: grid;
+        grid-template-columns: repeat(10, 10%);
+
+        h2 {
+            margin: 0;
+            grid-column: 1/10;
+            text-align: left;
+        }
+
+        .close {
+            grid-column: 10/11;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            .btn {
+                width: 30px;
+                height: 30px;
+                background: white;
+                border-radius: 50%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                cursor: pointer;
+
+                mat-icon {
+                    color: black;
+                }
+            }
+        }
+    }
+
+    .body {
+        padding: 15px;
+        margin-top: 10px;
+
+        .filter {
+
+            .input {
+                width: 100%;
+            }
+        }
+
+        .table-container {
+            max-height: 500px;
+            overflow: auto;
+
+            table {
+                width: 100%;
+    
+                .row {
+                    
+                    &:hover {
+                        background: #777;
+                        cursor: pointer;
+                    }
+                }
+    
+                td, th {
+                    padding: 5px 7.5px !important;
+                    &:first-child{
+                        padding-left: 24px !important;
+                    }
+                    &:last-child{
+                        padding-right: 24px !important;
+                    }
+                }
+            }
+        }
+
+        .paginator {
+            margin-top: 15px;
+        }
+    }
+}

package/projects/sigesp/src/lib/shared/components/catalogo/catalogo.component.ts

@@ -0,0 +1,71 @@
+import { Component, OnInit, ViewChild, Optional, Inject } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { MatDialogRef } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { ICatalogo } from '../../../core/interfaces/Catalogo';
+
+@Component({
+  selector: 'app-catalogo',
+  templateUrl: './catalogo.component.html',
+  styleUrls: ['./catalogo.component.scss']
+})
+export class CatalogoComponent implements OnInit {
+
+  @ViewChild(MatPaginator) paginator: MatPaginator; 
+  @ViewChild(MatSort) sort: MatSort;
+
+  public dataSource: MatTableDataSource<ICatalogo>;
+  public colunms: string[];
+  public names: string[] = [];
+
+  constructor(@Optional() private dialogRef: MatDialogRef<CatalogoComponent>,
+  @Optional() @Inject(MAT_DIALOG_DATA) public dialogData: ICatalogo) { }
+
+  ngOnInit() {
+    this.colunms = this.dialogData.columns
+    this.dataSource = new MatTableDataSource(this.dialogData.dataSource);
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+    if (this.dialogData.columnNames) {
+      this.names = this.dialogData.columnNames
+    }
+  }
+
+  ngAfterViewInit() {
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+  }
+
+  /**
+   * @description Filtra la tabla de proveedores
+   * @param filterValue Palabra clave para filtrar,
+   * @return void
+   * @author Miguel Ramírez
+   */
+  public filterTable(event: any): void {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+
+ 
+
+  /**
+   * @description Manda a cerrar el dialog
+   * @param data Data que se va a mandar de respuesta
+   * @return void
+   * @author Miguel Ramírez
+   */
+  public closeDialog(data?: any): void {
+      this.dialogRef.close((data) ? data : null);
+  }
+
+
+
+
+}

package/projects/sigesp/src/lib/shared/components/catalogo-doble-input/catalogo-doble-input.component.html

@@ -0,0 +1,57 @@
+<div class="container">
+
+  <!-- HEADER DE EL COMPONENTE -->
+  <div class="header mainColor">
+    <!-- TÍTULO -->
+    <h2>{{dialogData.title}}</h2>
+    <!-- BTN CERRAR -->
+    <div class="close">
+      <div class="btn" (click)="closeDialog()">
+        <mat-icon>close</mat-icon>
+      </div>
+    </div>
+  </div>
+
+  <!-- BODY -->
+  <div class="body">
+    <!-- FILTER -->
+    <div class="filter">
+      <mat-form-field class="input">
+      <input type="text" matInput 
+      placeholder="Filtrar por {{filterData[0].placeholder}}"
+      (keyup)="filterTable(first, $event)"
+      [(ngModel)]="first">
+      </mat-form-field>
+    </div>
+
+    <div class="filter">
+      <mat-form-field class="input">
+        <input type="text" matInput 
+        placeholder="Filtrar por {{filterData[1].placeholder}}"
+        (keyup)="filterTable(second, $event)"
+        [(ngModel)]="second">
+      </mat-form-field>
+    </div>
+
+    <!-- TABLA -->
+    <div class="table-container">
+      <table mat-table [dataSource]="dataSource" matSort>
+        <!-- DATA -->
+        <ng-container *ngFor="let column of colunms;let i = index" [matColumnDef]="column">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>
+              {{ (names[i] ? names[i] : column) | uppercase}}
+          </th>
+          <td mat-cell *matCellDef="let row" (click)="closeDialog(row)">
+              {{row[column]}}
+          </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="colunms"></tr>
+        <tr mat-row *matRowDef="let row; columns: colunms;" class="row"></tr>
+      </table>
+    </div>
+    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"  showFirstLastButtons class="paginator"></mat-paginator>
+  </div>
+
+</div>
+

package/projects/sigesp/src/lib/shared/components/catalogo-doble-input/catalogo-doble-input.component.scss

@@ -0,0 +1,82 @@
+
+.container {
+
+  .header {
+      padding: 15px;
+      text-align: center;
+      border-radius: 5px 5px 0 0;
+      display: grid;
+      grid-template-columns: repeat(10, 10%);
+
+      h2 {
+          margin: 0;
+          grid-column: 1/10;
+          text-align: left;
+      }
+
+      .close {
+          grid-column: 10/11;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          .btn {
+              width: 30px;
+              height: 30px;
+              background: white;
+              border-radius: 50%;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              cursor: pointer;
+
+              mat-icon {
+                  color: black;
+              }
+          }
+      }
+  }
+
+  .body {
+      padding: 15px;
+      margin-top: 10px;
+
+      .filter {
+
+          .input {
+              width: 100%;
+          }
+      }
+
+      .table-container {
+          max-height: 500px;
+          overflow: auto;
+
+          table {
+              width: 100%;
+
+              .row {
+
+                  &:hover {
+                      background: #777;
+                      cursor: pointer;
+                  }
+              }
+
+            td, th {
+                padding: 5px 7.5px !important;
+                &:first-child{
+                    padding-left: 24px !important;
+                }
+                &:last-child{
+                    padding-right: 24px !important;
+                }
+            }
+          }
+      }
+
+      .paginator {
+          margin-top: 15px;
+      }
+  }
+}

package/projects/sigesp/src/lib/shared/components/catalogo-doble-input/catalogo-doble-input.component.ts

@@ -0,0 +1,80 @@
+import { Component, OnInit, ViewChild, Optional, Inject } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { MatDialogRef } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { ICatalogo, filterData } from '../../../core/interfaces/Catalogo';
+import { CatalogoComponent } from '../catalogo/catalogo.component';
+
+@Component({
+  selector: 'app-catalogo-doble-input',
+  templateUrl: './catalogo-doble-input.component.html',
+  styleUrls: ['./catalogo-doble-input.component.scss']
+})
+export class CatalogoDobleInputComponent implements OnInit {
+
+  @ViewChild(MatPaginator) paginator: MatPaginator; 
+  @ViewChild(MatSort) sort: MatSort;
+
+  public dataSource: MatTableDataSource<any>;
+  public colunms: string[];
+  public names: string[] = [];
+  public filterData: filterData[] = [];
+  public first: string = '';
+  public second: string = '';
+
+  constructor(@Optional() private dialogRef: MatDialogRef<CatalogoComponent>,
+  @Optional() @Inject(MAT_DIALOG_DATA) public dialogData: ICatalogo) { }
+
+  ngOnInit() {
+    this.colunms = this.dialogData.columns
+    this.dataSource = new MatTableDataSource(this.dialogData.dataSource);
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+    this.filterData = this.dialogData.filterData
+    if (this.dialogData.columnNames) {
+      this.names = this.dialogData.columnNames
+    }   
+
+    this.dataSource.filterPredicate = (data, filter) => {
+      let f: string = data[this.filterData[0].property].toString().toLowerCase();
+      let s: string = data[this.filterData[1].property].toString().toLowerCase();
+      return (f.includes(this.first.toLowerCase()) && s.includes(this.second.toLowerCase()));
+    }
+
+  }
+
+  ngAfterViewInit() {
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+  }
+
+
+  /**
+   * @description Filtra la tabla de proveedores
+   * @param filterValue Palabra clave para filtrar,
+   * @return void
+   * @author Carlos Albornoz
+   */
+  public filterTable(filterValue: string, event: KeyboardEvent): void {
+    if (event.key !== 'Tab') {
+      this.dataSource.filter = filterValue.toLowerCase();  
+      if (this.dataSource.paginator) {
+        this.dataSource.paginator.firstPage();
+      }
+    }
+
+  }
+
+  /**
+   * @description Manda a cerrar el dialog
+   * @param data Data que se va a mandar de respuesta
+   * @return void
+   * @author Miguel Ramírez
+   */
+  public closeDialog(data?: any): void {
+      this.dialogRef.close((data) ? data : null);
+  }
+
+}

package/projects/sigesp/src/lib/shared/components/catalogo-estructuras/catalogo-estructuras.component.html

@@ -0,0 +1,121 @@
+<div class="container">
+
+    <!-- HEADER DE EL COMPONENTE -->
+    <div class="header mainColor">
+        <!-- TÍTULO -->
+        <h2>Catálogo Estructura Presupuestaria</h2>
+        <!-- BTN CERRAR -->
+        <div class="close" (click)="closeDialog()">
+            <div class="btn">
+                <mat-icon>close</mat-icon>
+            </div>
+        </div>
+    </div>
+
+    <!-- BODY -->
+    <div class="body">
+        <!-- FILTER -->
+        <div class="filter">
+            <mat-form-field class="input">
+                <input type="text" matInput placeholder="Filtrar" (keyup)="filterTable($event)">
+            </mat-form-field>
+        </div>
+
+        <!-- TABLA -->
+        <div class="table-container">
+            <table mat-table [dataSource]="dataSource" matSort>
+                <!-- columna 1 -->
+                <ng-container [matColumnDef]="colunms[0]">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header> 
+                        {{ colunms[0] | uppercase }} 
+                    </th>
+                    <td mat-cell *matCellDef="let element"> {{element.codigoEstructuraProgramaticaOne}} </td>
+                </ng-container>
+                <!-- columna 2 -->
+                <ng-container [matColumnDef]="colunms[1]">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header> 
+                        {{ colunms[1] | uppercase }} 
+                    </th>
+                    <td mat-cell *matCellDef="let element"> {{element.codigoEstructuraProgramaticaTwo}} </td>
+                </ng-container>
+
+                <!-- SI EL NÚMERO DE NIVELES ES MAYOR A 3 -->
+                <ng-container *ngIf="dialogData.configuration.nombresEstructuraPresupuestaria.length > 3">
+                    <!-- columna 3 -->
+                    <ng-container [matColumnDef]="colunms[2]">
+                        <th mat-header-cell *matHeaderCellDef mat-sort-header> 
+                            {{ colunms[2] | uppercase }} 
+                        </th>
+                        <td mat-cell *matCellDef="let element"> {{element.codigoEstructuraProgramaticaThree}} </td>
+                    </ng-container>
+                    <!-- columna 4 -->
+                    <ng-container [matColumnDef]="colunms[3]">
+                        <th mat-header-cell *matHeaderCellDef mat-sort-header> 
+                            {{ colunms[3] | uppercase }} 
+                        </th>
+                        <td mat-cell *matCellDef="let element"> {{element.codigoEstructuraProgramaticaFour}} </td>
+                    </ng-container>
+                    <!-- columna 5 -->
+                    <ng-container [matColumnDef]="colunms[4]">
+                        <th mat-header-cell *matHeaderCellDef mat-sort-header> 
+                            {{ colunms[4] | uppercase }} 
+                        </th>
+                        <td mat-cell *matCellDef="let element"> {{element.codigoEstructuraProgramatica}} </td>
+                    </ng-container>
+                    <!-- columna 6 -->
+                    <ng-container [matColumnDef]="colunms[5]">
+                        <th mat-header-cell *matHeaderCellDef mat-sort-header> 
+                            {{ colunms[5] | uppercase }} 
+                        </th>
+                        <td mat-cell *matCellDef="let element"> 
+                            {{ element.denominacionEstructuraProgramatica }} 
+                        </td>
+                    </ng-container>
+                    <!-- columna 7 -->
+                    <ng-container [matColumnDef]="colunms[6]">
+                        <th mat-header-cell *matHeaderCellDef mat-sort-header> 
+                            {{ colunms[6] | uppercase }} 
+                        </th>
+                        <td mat-cell *matCellDef="let element"> PROGRAMÁTICA </td>
+                    </ng-container>
+                </ng-container>
+
+                <!-- SI EL NÚMERO DE NIVELES ES MENOR A 3 -->
+                <ng-container *ngIf="dialogData.configuration.nombresEstructuraPresupuestaria.length <= 3">
+                    <!-- columna 3 -->
+                    <ng-container [matColumnDef]="colunms[2]">
+                        <th mat-header-cell *matHeaderCellDef mat-sort-header> 
+                            {{ colunms[2] | uppercase }} 
+                        </th>
+                        <td mat-cell *matCellDef="let element"> 
+                            {{element.codigoEstructuraProgramatica}} 
+                        </td>
+                    </ng-container>
+                    <!-- columna 4 -->
+                    <ng-container [matColumnDef]="colunms[5]">
+                        <th mat-header-cell *matHeaderCellDef mat-sort-header> 
+                            {{ colunms[3] | uppercase }} 
+                        </th>
+                        <td mat-cell *matCellDef="let element"> 
+                            {{ element.denominacionEstructuraProgramatica }} 
+                        </td>
+                    </ng-container>
+                    <!-- columna 5 -->
+                    <ng-container [matColumnDef]="colunms[6]">
+                        <th mat-header-cell *matHeaderCellDef mat-sort-header> 
+                            {{ colunms[4] | uppercase }} 
+                        </th>
+                        <td mat-cell *matCellDef="let element">
+                            {{ (element.estatusClasificacion == 'P') ? 'PROYECTO' : 'ACCIÓN' }}
+                        </td>
+                    </ng-container>
+                </ng-container>
+
+                <tr mat-header-row *matHeaderRowDef="colunms"></tr>
+                <tr mat-row *matRowDef="let row; columns: colunms;" class="row" (click)="closeDialog(row)"></tr>
+            </table>
+        </div>
+        <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" showFirstLastButtons class="paginator"></mat-paginator>
+    </div>
+
+</div>

package/projects/sigesp/src/lib/shared/components/catalogo-estructuras/catalogo-estructuras.component.scss

@@ -0,0 +1,81 @@
+.container {
+
+    .header {
+        padding: 15px;
+        text-align: center;
+        border-radius: 5px 5px 0 0;
+        display: grid;
+        grid-template-columns: repeat(10, 10%);
+
+        h2 {
+            margin: 0;
+            grid-column: 1/10;
+            text-align: left;
+        }
+
+        .close {
+            grid-column: 10/11;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            .btn {
+                width: 30px;
+                height: 30px;
+                background: white;
+                border-radius: 50%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                cursor: pointer;
+
+                mat-icon {
+                    color: black;
+                }
+            }
+        }
+    }
+
+    .body {
+        padding: 15px;
+        margin-top: 10px;
+
+        .filter {
+
+            .input {
+                width: 100%;
+            }
+        }
+
+        .table-container {
+            max-height: 500px;
+            overflow: auto;
+
+            table {
+                width: 100%;
+    
+                .row {
+                    
+                    &:hover {
+                        background: #777;
+                        cursor: pointer;
+                    }
+                }
+    
+                td, th {
+                    padding: 5px 7.5px !important;
+                    &:first-child{
+                        padding-left: 24px !important;
+                    }
+                    &:last-child{
+                        padding-right: 24px !important;
+                    }
+                }
+            }
+        }
+
+        .paginator {
+            margin-top: 15px;
+        }
+    }
+}

package/projects/sigesp/src/lib/shared/components/catalogo-estructuras/catalogo-estructuras.component.ts

@@ -0,0 +1,68 @@
+import { Component, OnInit, ViewChild, Optional, Inject } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { MatDialogRef } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MConfigurationSPG } from '../../../core/models/SPG/configurationSPG.model';
+
+
+@Component({
+  selector: 'app-catalogo-estructuras',
+  templateUrl: './catalogo-estructuras.component.html',
+  styleUrls: ['./catalogo-estructuras.component.scss']
+})
+export class CatalogoEstructurasComponent implements OnInit {
+
+  @ViewChild(MatPaginator, {static: true}) public paginator: MatPaginator;
+  @ViewChild(MatSort, {static: true}) public sort: MatSort;
+
+  public dataSource: MatTableDataSource<any[]>;
+  public colunms: string[];
+
+  constructor(@Optional() private dialogRef: MatDialogRef<CatalogoEstructurasComponent>,
+  @Optional() @Inject(MAT_DIALOG_DATA) public dialogData: IDialogData) { }
+
+  ngOnInit() {
+    const { nombresEstructuraPresupuestaria } = this.dialogData.configuration;
+    const [one, two, three, four, five] = nombresEstructuraPresupuestaria;
+    if (+this.dialogData.configuration.numerosNiveles > 3) {
+      this.colunms = [one, two, three, four, five, 'Denominación', 'Tipo'];
+    } else {
+      this.colunms = [one, two, three, 'Denominación', 'Tipo'];
+    }
+    this.dataSource = new MatTableDataSource(this.dialogData.data);
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+  }
+
+  /**
+   * @description Filtra la tabla de proveedores
+   * @param filterValue Palabra clave para filtrar,
+   * @return void
+   * @author Miguel Ramírez
+   */
+  public filterTable(filterValue: any): void {
+    this.dataSource.filter = filterValue.target.value.trim().toLowerCase();
+
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+
+  /**
+   * @description Manda a cerrar el dialog
+   * @param data Data que se va a mandar de respuesta
+   * @return void
+   * @author Miguel Ramírez
+   */
+  public closeDialog(data?: any): void {
+      this.dialogRef.close((data) ? data : null);
+  }
+
+}
+
+interface IDialogData {
+  data: any[],
+  configuration: MConfigurationSPG
+}