sigesp 1.0.16-20240818 → 1.0.18-20240821

package/src/lib/shared/components/confirm/confirm.component.scss

@@ -0,0 +1,37 @@
+
+.container {
+
+    .header {
+        padding: 15px;
+        border-radius: 5px 5px 0 0;
+        margin-bottom: 15px;
+
+        h2 {
+            margin: 0;
+        }
+    }
+
+    .body {
+        margin: 20px 15px 40px 15px;
+
+        .message {
+            margin: 0;
+            font-size: 17px;
+            color: gray;
+        }
+    }
+
+    .buttons {
+        margin: 15px;
+        display: flex;
+        justify-content: flex-end;
+
+        button {
+            font-size: 17px;
+        }
+
+        .cancel {
+            margin-right: 10px;
+        }
+    }
+}

package/src/lib/shared/components/confirm/confirm.component.ts

@@ -0,0 +1,32 @@
+import { Component, OnInit, Inject, Optional } from '@angular/core';
+
+import { MatDialogRef } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-confirm',
+  templateUrl: './confirm.component.html',
+  styleUrls: ['./confirm.component.scss']
+})
+export class ConfirmComponent implements OnInit {
+
+  constructor(@Optional() private dialogRef: MatDialogRef<ConfirmComponent>,
+  @Optional() @Inject(MAT_DIALOG_DATA) public dialogData: ConfirmData) { }
+
+  ngOnInit() {
+  }
+
+  /**
+   * @description Manda a cerrar la modal
+   * @param resp Respuesta de la modal
+   */
+  closeDialog(resp: boolean): void {
+    this.dialogRef.close(resp);
+  }
+
+}
+
+interface ConfirmData {
+  title: string,
+  message: string
+}

package/src/lib/shared/components/icon/icon.component.html

@@ -0,0 +1,6 @@
+<mat-icon [ngStyle]="{ 
+    'font-size': size,
+    'color': color
+ }">
+ {{ name }}
+</mat-icon>

package/src/lib/shared/components/icon/icon.component.scss

@@ -0,0 +1,22 @@
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(./flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}

package/src/lib/shared/components/icon/icon.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'icon-m',
+  templateUrl: './icon.component.html',
+  styleUrls: ['./icon.component.scss']
+})
+export class IconComponent implements OnInit {
+
+  @Input() public name: string;
+  @Input() public size: string;
+  @Input() public color: string;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

package/src/lib/shared/components/table-select/table-select.component.html

@@ -0,0 +1,73 @@
+<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)="cancelDialog()">
+                <icon-m [name]="'close'" [color]="'black'"></icon-m>
+            </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>
+
+                <!-- CHECKS -->
+                <ng-container matColumnDef="select">
+                    <th mat-header-cell *matHeaderCellDef>
+                        <mat-checkbox (change)="$event ? masterToggle() : null"
+                        [disabled]="getFilter()" color="primary"
+                        [checked]="selection.hasValue() && isAllSelected()"                       
+                        [indeterminate]="selection.hasValue() && !isAllSelected()"
+                        [aria-label]="checkboxLabel()"
+                        ></mat-checkbox>
+                    </th>
+                    <td mat-cell *matCellDef="let row">
+                        <mat-checkbox (click)="$event.stopPropagation()"
+                        (change)="$event ? selection.toggle(row) : null"
+                        [checked]="selection.isSelected(row)" color="primary"
+                        [aria-label]="checkboxLabel(row)"></mat-checkbox>
+                    </td>
+                </ng-container>
+
+                <!-- DATA -->
+                <ng-container *ngFor="let column of columnsAux; 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"> 
+                        {{row[column]}} 
+                    </td>
+                </ng-container>
+
+                <tr mat-header-row *matHeaderRowDef="columns"></tr>
+                <tr mat-row *matRowDef="let row; columns: columns;"
+                (click)="selection.toggle(row)">
+                </tr>
+            </table>
+            
+            <mat-paginator 
+                [pageSizeOptions]="[5, 10, 25, 100]" 
+                showFirstLastButtons class="paginator">
+            </mat-paginator>
+        </div>
+
+        <div class="buttons">
+            <button mat-raised-button color="primary" 
+            [disabled]="selection.selected.length==0"
+            (click)="closeDialog()">Aceptar</button>
+        </div>
+    </div>
+</div>

package/src/lib/shared/components/table-select/table-select.component.scss

@@ -0,0 +1,86 @@
+
+.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;
+
+                Icon {
+                    display: flex;
+                }
+            }
+        }
+    }
+
+    .body {
+        padding: 15px;
+        margin-top: 10px;
+
+        .filter {
+
+            .input {
+                width: 100%;
+            }
+        }
+
+        .table-container {
+
+            table {
+                width: 100%;
+    
+                .row {
+                    
+                    &:hover {
+                        background: #777;
+                        cursor: pointer;
+                    }
+                }
+    
+                .mat-cell {
+                    padding-right: 5px!important;
+                    padding-top: 5px!important;
+                    padding-bottom: 5px!important;
+                }
+            }
+        }
+
+        .paginator {
+            margin-top: 15px;
+        }
+
+        .buttons {
+            display: flex;
+            justify-content: flex-end;
+            padding: 10px;
+
+            button {
+                font-size: 17px;
+            }
+        }
+    }
+}

package/src/lib/shared/components/table-select/table-select.component.ts

@@ -0,0 +1,102 @@
+import { Component,Optional, Inject, ViewChild, AfterViewInit } 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 { SelectionModel } from '@angular/cdk/collections';
+
+@Component({
+  selector: 'app-table-select',
+  templateUrl: './table-select.component.html',
+  styleUrls: ['./table-select.component.scss']
+})
+export class TableSelectComponent implements AfterViewInit {
+
+  @ViewChild(MatPaginator) paginator: MatPaginator; 
+  @ViewChild(MatSort) sort: MatSort;
+
+  columns: string[] = ['select'];
+  columnsAux: string[];
+  data: any[];
+  dataSource: MatTableDataSource<any>;
+  selection: SelectionModel<any> = new SelectionModel<any>(true, []);
+  selections: any[] = [];
+  names: string[] = [];
+  loaded: boolean = false;
+  //disableMasterToggle: boolean = false;
+
+  constructor(@Optional() private dialogRef: MatDialogRef<TableSelectComponent>,
+  @Optional() @Inject(MAT_DIALOG_DATA) public dialogData: ISelect) { 
+    
+    this.columns.push(...dialogData.columns);
+    this.columnsAux = dialogData.columns;
+    this.data = dialogData.dataSource;
+    this.dataSource = new MatTableDataSource(this.data);
+    if (this.dialogData.columnNames) {
+      this.names = this.dialogData.columnNames
+    }
+  //  this.disableMasterToggle = this.dialogData.disableMasterToggle
+  }
+  
+
+
+  ngAfterViewInit() {
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+  }
+ 
+
+  isAllSelected() {
+      const numSelected = this.selection.selected.length;
+      const numRows = this.dataSource.data.length;
+      return numSelected === numRows;
+  }
+
+  masterToggle() {    
+      this.isAllSelected() ?
+      this.selection.clear() :
+      this.dataSource.data.forEach(row => this.selection.select(row));
+  } 
+
+  checkboxLabel(row?: any): string {
+    if (!row) {
+      return `${this.isAllSelected() ? 'select' : 'deselect'} all`;
+    }
+    return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.position + 1}`;
+  }
+
+  closeDialog(): void {
+    this.dialogRef.close(this.selection.selected);
+  }
+
+  cancelDialog(): void {
+    this.dialogRef.close(null);
+  }
+
+  public filterTable(event: any): void {
+    this.selection.clear(); //nuevo 
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();   
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+
+  public getFilter(){
+    if(this.dataSource.filter!=''){
+      return false;
+    }else{     
+      return true;
+    }
+  } 
+
+}
+
+interface ISelect {
+  columns: string[],
+  dataSource: any[],
+  title: string,
+  columnNames?: string[],
+ // disableMasterToggle: boolean
+}

package/src/lib/shared/material/customPaginator.ts

@@ -0,0 +1,22 @@
+import {MatPaginatorIntl} from '@angular/material/paginator';
+
+export class customPaginator extends MatPaginatorIntl { 
+    itemsPerPageLabel = 'Items por Página'; 
+    nextPageLabel  = 'Siguiente'; 
+    previousPageLabel = 'Previa'; 
+    firstPageLabel = "Primera Página";
+    lastPageLabel = "Última Página"
+
+    getRangeLabel = function (page, pageSize, length) { 
+        if (length === 0 || pageSize === 0) { 
+             return '0 de ' + length; 
+        } 
+        length = Math.max(length, 0); 
+        const startIndex = page * pageSize; 
+        //Si el índice de inicio excede la longitud de la lista, no intente 
+        //arreglar el índice final hasta el final
+        const endIndex = startIndex < length ?
+        Math.min(startIndex + pageSize, length) :  startIndex + pageSize; 
+        return startIndex + 1 + ' - ' + endIndex + ' de ' + length; 
+    }; 
+} 

package/src/lib/shared/material/material.module.ts

@@ -0,0 +1,144 @@
+import { NgModule } from '@angular/core';
+
+import { CdkTableModule } from '@angular/cdk/table';
+import { CdkTreeModule } from '@angular/cdk/tree';
+import { MatMomentDateModule } from '@angular/material-moment-adapter';
+import { PortalModule } from '@angular/cdk/portal';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { A11yModule } from '@angular/cdk/a11y';
+import { CdkStepperModule } from '@angular/cdk/stepper';
+import { MatButtonModule} from '@angular/material/button';
+import { MatToolbarModule} from '@angular/material/toolbar';
+import { MatNativeDateModule} from '@angular/material/core';
+import { MatCommonModule} from '@angular/material/core';
+import { MatRippleModule} from '@angular/material/core'; 
+import { MatIconModule} from '@angular/material/icon';
+import { MatSidenavModule} from '@angular/material/sidenav';
+import { MatListModule} from '@angular/material/list';
+import { MatSelectModule} from '@angular/material/select';
+import { MatInputModule} from '@angular/material/input';
+import { MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import { MatDividerModule} from '@angular/material/divider';
+import { MatExpansionModule} from '@angular/material/expansion';
+import { MatPaginatorModule} from '@angular/material/paginator';
+import { MatSortModule} from '@angular/material/sort';
+import { MatAutocompleteModule} from '@angular/material/autocomplete';
+import { MatBadgeModule} from '@angular/material/badge';
+import { MatBottomSheetModule} from '@angular/material/bottom-sheet';
+import { MatButtonToggleModule} from '@angular/material/button-toggle';
+import { MatCardModule} from '@angular/material/card';
+import { MatCheckboxModule} from '@angular/material/checkbox';
+import { MatChipsModule} from '@angular/material/chips';
+import { MatStepperModule} from '@angular/material/stepper';
+import { MatDatepickerModule} from '@angular/material/datepicker';
+import { MatDialogModule} from '@angular/material/dialog';
+import { MatGridListModule} from '@angular/material/grid-list';
+import { MatMenuModule} from '@angular/material/menu';
+import { MatProgressBarModule} from '@angular/material/progress-bar';
+import { MatRadioModule} from '@angular/material/radio'; 
+import { MatSliderModule} from '@angular/material/slider';
+import { MatSlideToggleModule} from '@angular/material/slide-toggle';
+import { MatSnackBarModule} from '@angular/material/snack-bar';
+import { MatTableModule} from '@angular/material/table';
+import { MatTabsModule} from '@angular/material/tabs';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatTreeModule } from '@angular/material/tree';
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    A11yModule,
+    CdkStepperModule,
+    CdkTableModule,
+    CdkTreeModule,
+    DragDropModule,
+    MatAutocompleteModule,
+    MatBadgeModule,
+    MatBottomSheetModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatChipsModule,
+    MatCommonModule,
+    MatStepperModule,
+    MatDatepickerModule,
+    MatMomentDateModule,
+    MatDialogModule,
+    MatDividerModule,
+    MatExpansionModule,
+    MatGridListModule,
+    MatIconModule,
+    MatInputModule,
+    MatListModule,
+    MatMenuModule,
+    MatNativeDateModule,
+    MatPaginatorModule,
+    MatProgressBarModule,
+    MatProgressSpinnerModule,
+    MatRadioModule,
+    MatRippleModule,
+    MatSelectModule,
+    MatSidenavModule,
+    MatSliderModule,
+    MatSlideToggleModule,
+    MatSnackBarModule,
+    MatSortModule,
+    MatTableModule,
+    MatTabsModule,
+    MatToolbarModule,
+    MatTooltipModule,
+    MatTreeModule,
+    PortalModule,
+    ScrollingModule
+  ],
+  exports: [
+    A11yModule,
+    CdkStepperModule,
+    CdkTableModule,
+    CdkTreeModule,
+    DragDropModule,
+    MatAutocompleteModule,
+    MatBadgeModule,
+    MatBottomSheetModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatChipsModule,
+    MatCommonModule,
+    MatStepperModule,
+    MatDatepickerModule,
+    MatMomentDateModule,
+    MatDialogModule,
+    MatDividerModule,
+    MatExpansionModule,
+    MatGridListModule,
+    MatIconModule,
+    MatInputModule,
+    MatListModule,
+    MatMenuModule,
+    MatNativeDateModule,
+    MatPaginatorModule,
+    MatProgressBarModule,
+    MatProgressSpinnerModule,
+    MatRadioModule,
+    MatRippleModule,
+    MatSelectModule,
+    MatSidenavModule,
+    MatSliderModule,
+    MatSlideToggleModule,
+    MatSnackBarModule,
+    MatSortModule,
+    MatTableModule,
+    MatTabsModule,
+    MatToolbarModule,
+    MatTooltipModule,
+    MatTreeModule,
+    PortalModule,
+    ScrollingModule,
+  ],
+})
+export class CustonMaterialModule { }

package/src/lib/shared/pipes/iso-currency.pipe.ts

@@ -0,0 +1,44 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'iso'
+})
+export class IsoCurrencyPipe implements PipeTransform {
+
+  transform(
+    value: number, 
+    args: Arguments = {decimal:',', thousands:'.'}
+  ): string {
+    if (!args.decimal || args.decimal.trim() == '') {
+      args.decimal = ','
+    }
+    if (!args.thousands || args.thousands.trim() == '') {
+      args.thousands = '.'
+    }
+    if (value && args.decimal != args.thousands) {
+      let string = value.toString();
+      let sections: string[] = string.split('.');
+      let mainPart: string[] = this.splitStringFromEnd(sections[0], 3)
+      sections[0] = mainPart.join(args.thousands);
+      return sections.join(args.decimal)
+    } else {
+      return '';
+    }
+  }
+  
+  private splitStringFromEnd(customString, every): string[] {
+    var result = [], counter = every;
+    for (var i = counter; counter <= customString.length; counter += every) {
+      result.unshift(customString.substr(customString.length - counter, every))
+    }
+    var diff = counter - customString.length;
+    var remainder = every - diff;
+    if(remainder > 0) { result.unshift(customString.substr(0, remainder)) }
+    return result;
+  }
+
+}
+
+interface Arguments{
+  decimal?: string, thousands?: string
+}

package/src/lib/shared/shared.module.ts

@@ -0,0 +1,41 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CustonMaterialModule } from './material/material.module';
+import { CatalogoComponent } from './components/catalogo/catalogo.component';
+import { ConfirmComponent } from './components/confirm/confirm.component';
+import { IconComponent } from './components/icon/icon.component';
+import { TableSelectComponent } from './components/table-select/table-select.component';
+import { CatalogoEstructurasComponent } from './components/catalogo-estructuras/catalogo-estructuras.component';
+import { CatalogoDobleInputComponent } from './components/catalogo-doble-input/catalogo-doble-input.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { IsoCurrencyPipe } from './pipes/iso-currency.pipe';
+import { CurrencyService } from '../validation.service';
+
+@NgModule({
+    declarations: [
+        CatalogoComponent,
+        ConfirmComponent,
+        IconComponent,
+        TableSelectComponent,
+        CatalogoEstructurasComponent,
+        CatalogoDobleInputComponent,
+        IsoCurrencyPipe,
+    ],
+    imports: [
+        CommonModule,
+        CustonMaterialModule,
+        FormsModule
+    ],
+    exports: [
+        CatalogoComponent,
+        ConfirmComponent,
+        IconComponent,
+        TableSelectComponent,
+        CatalogoEstructurasComponent,
+        IsoCurrencyPipe
+    ],
+    providers: [
+        CurrencyService
+    ]
+})
+export class SharedModule { }