Interfaz principal del modulo GDEL

sistema-mantenimiento-front/src/app/components/gdel/addo/addo.component.html

@@ -1,132 +0,0 @@
-<main class="main-container animated fadeIn" (window:resize)="onResize()">
-    <!-- REGRESAR A LA PANTALLA ANTERIOR -->
-    <!--     <nav id="navigation" class="btn-navigate mb-8">
-        <div class="prev-page prevent-select indigo_primary_background mat-elevation-z8" matRipple
-            [routerLink]="['/sam/acquisition']">
-            <mat-icon style="color: white;">arrow_back</mat-icon>
-            <div class="page-name ml-4">Menú de Adquisiciones</div>
-        </div>
-    </nav> -->
-    <mat-card class="mat-elevation-z8" style="width: 100%; height: 100%;">
-        <mat-card-title class="mat-card-title centre">Administración de Documentos</mat-card-title>
-        <mat-drawer-container class="example-container">
-            <mat-drawer mode="side" opened style="width: 15%;">
-                <div>
-                    <!-- TÍTULO -->
-                    <nav style="height: 56px; justify-content: space-between; padding: 0 10px; margin-bottom: 15px;">
-                        <div class="options-divider">
-                            <ul>
-                                <li class="container" *ngFor="let row of options;let i = index"
-                                    [ngClass]="{'active': clickedIndex == i}"
-                                    (click)="clickedIndex == i? clickedIndex = null : clickedIndex = i">
-                                    <mat-icon style="margin-right: 10px;">{{row.icon}}</mat-icon> {{row.items}}
-                                </li>
-                            </ul>
-                        </div>
-                    </nav>
-
-                    <div class="is-loading animated fadeIn fast" *ngIf="isLoading">
-                        <mat-spinner align="center"></mat-spinner>
-                        <h3>Cargando datos ...</h3>
-                    </div>
-
-                    <!-- ALERTA - CARGANDO FORMULARIOS -->
-                    <mat-progress-bar mode="indeterminate" *ngIf="isLoadingForm"></mat-progress-bar>
-                </div>
-            </mat-drawer>
-            <mat-drawer-content>
-                <div class="table-container" [hidden]="!(!isLoading && !hasError)" style="overflow: hidden;">
-                    <div class="actions-container">
-                        <mat-form-field appearance="outline"
-                            style="width:calc(85% - 8px);margin-right: 8px;box-sizing:border-box">
-                            <mat-label>Filtro</mat-label>
-                            <input matInput (keyup)="applyFilter($event)"
-                                placeholder="Escriba algo para iniciar una búsqueda" #input>
-                            <mat-icon matSuffix>search</mat-icon>
-                        </mat-form-field>
-                        <button mat-flat-button color="primary" style="width: 13%;">Registrar Documento</button>
-                    </div>
-                    <div class="table-content-container">
-                        <table mat-table [dataSource]="dataSource!" matSort style="width:100%">
-                            <ng-container matColumnDef="ID">
-                                <th mat-header-cell *matHeaderCellDef mat-sort-header>ID</th>
-                                <td mat-cell *matCellDef="let row">{{ row.ID }}</td>
-                            </ng-container>
-
-                            <ng-container matColumnDef="NOMBRE">
-                                <th mat-header-cell *matHeaderCellDef mat-sort-header>Nombre</th>
-                                <td mat-cell *matCellDef="let row">{{ row.NOMBRE }}</td>
-                            </ng-container>
-
-                            <ng-container matColumnDef="PROPIETARIO">
-                                <th mat-header-cell *matHeaderCellDef mat-sort-header>Propietario</th>
-                                <td mat-cell *matCellDef="let row">{{ row.PROPIETARIO }}</td>
-                            </ng-container>
-
-                            <ng-container matColumnDef="FERG">
-                                <th mat-header-cell *matHeaderCellDef mat-sort-header>Fecha de Registro</th>
-                                <td mat-cell *matCellDef="let row">{{ row.FERG }}</td>
-                            </ng-container>
-
-                            <ng-container matColumnDef="TAMANIO">
-                                <th mat-header-cell *matHeaderCellDef mat-sort-header>Tamaño</th>
-                                <td mat-cell *matCellDef="let row">{{ row.TAMANIO }}</td>
-                            </ng-container>
-
-                            <ng-container matColumnDef="ACCIONES">
-                                <th mat-header-cell *matHeaderCellDef>Acciones</th>
-                                <td mat-cell *matCellDef="let row">
-                                    <button mat-mini-fab color="primary" #tooltip="matTooltip"
-                                        matTooltip="Abrir Documento" class="btn-noshadow">
-                                        <mat-icon>open_in_new</mat-icon>
-                                    </button>
-                                    <button mat-mini-fab color="primary" #tooltip="matTooltip"
-                                        matTooltip="Descargar Documento" class="btn-noshadow">
-                                        <mat-icon>download</mat-icon>
-                                    </button><button mat-mini-fab color="primary" #tooltip="matTooltip"
-                                        matTooltip="Editar Documento" class="btn-noshadow">
-                                        <mat-icon>edit</mat-icon>
-                                    </button>
-                                    <!--                                 <button mat-mini-fab #tooltip="matTooltip"
-                                    matTooltip="{{ row.ESTATUS == 'Activo' ? 'Bloquear acceso' : 'Permitir acceso'}}"
-                                    [disabled]="row.ESTATUS == 'Eliminado'" class="btn-noshadow ml-4"
-                                    [ngClass]="{ amber_primary_background: row.ESTATUS != 'Eliminado' }">
-                                    <mat-icon
-                                        *ngIf="row.ESTATUS == 'Activo' || row.ESTATUS == 'Eliminado'">block</mat-icon>
-                                    <mat-icon *ngIf="row.ESTATUS == 'Inactivo'">check_circle</mat-icon>
-                                </button>
-                                <button mat-mini-fab #tooltip="matTooltip" matTooltip="Reasignar contraseña"
-                                    class="btn-noshadow ml-4" [disabled]="row.ESTATUS == 'Eliminado'"
-                                    [ngClass]="{ blue_dark_background: row.ESTATUS != 'Eliminado' }">
-                                    <mat-icon>lock</mat-icon>
-                                </button>
-                                <button mat-mini-fab #tooltip="matTooltip" matTooltip="Eliminar usuario"
-                                    class="btn-noshadow ml-4" [disabled]="row.ESTATUS == 'Eliminado'"
-                                    [ngClass]="{ red_primary_background: row.ESTATUS != 'Eliminado' }">
-                                    <mat-icon>delete</mat-icon>
-                                </button> -->
-                                </td>
-                            </ng-container>
-
-                            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
-
-                            <tr class="mat-row" *matNoDataRow>
-                                <td class="mat-cell" colspan="8" *ngIf="documents.length > 0">Ningún resultado coincide
-                                    con
-                                    su
-                                    búsqueda "{{ input.value }}"</td>
-                                <td class="mat-cell" colspan="8" *ngIf="documents.length == 0">No se encontraron
-                                    registros
-                                </td>
-                            </tr>
-
-                        </table>
-                    </div>
-                    <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]"
-                        aria-label="Selecciona la página de usuarios"></mat-paginator>
-                </div>
-            </mat-drawer-content>
-        </mat-drawer-container>
-    </mat-card>
-</main>

sistema-mantenimiento-front/src/app/components/gdel/addo/addo.component.ts

@@ -24,135 +24,26 @@ import { ResourcesService } from 'src/app/services/resources/resources.service';
   styleUrls: ['./addo.component.css'],
 })
 export class ADDOComponent implements AfterViewInit, OnInit {
-  public displayedColumns: string[] = [
-    'ID',
-    'NOMBRE',
-    'PROPIETARIO',
-    'FERG',
-    'TAMANIO',
-    'ACCIONES',
-  ];
-
-  public dataSource: MatTableDataSource<any>;
-  @ViewChild(MatPaginator) paginator!: MatPaginator;
-  @ViewChild(MatSort) sort!: MatSort;
-
-  public isLoading: boolean = false;
-  public isLoadingForm: boolean = false;
-  public active: number = 0;
-  public btnSmall: boolean = false;
-  public card_size = 'card-size-normal mat-elevation-z8';
-  public hasError: boolean = false;
-  public quantityCarArtitle: number;
-  public clickedIndex: any = 0;
-  public options = [
-    {
-      id: 1,
-      items: 'Mis documentos',
-      icon: 'local_library',
-    },
-    {
-      id: 2,
-      items: 'Compartidos Conmigo',
-      icon: 'group_add',
-    },
-    {
-      id: 3,
-      items: 'Papelera',
-      icon: 'delete',
-    },
-  ];
-  public documents: Array<any> = [];
-
+ 
   constructor(
     private _encService: EncService,
     private _resourcesServices: ResourcesService,
     private _dialog: MatDialog,
     private _router: Router
   ) {
-    this.dataSource = new MatTableDataSource();
-    this.quantityCarArtitle = null!;
+    
   }
 
   ngOnInit(): void {
-    this.onResize();
-    this.dataSource.data = [
-      {
-        ID: 1,
-        NOMBRE: 'Mis documentos',
-        PROPIETARIO: 'local_library',
-        FERG: 'local_library',
-        TAMANIO: 'local_library',
-      },
-      {
-        ID: 2,
-        NOMBRE: 'Mis documentos',
-        PROPIETARIO: 'local_library',
-        FERG: 'local_library',
-        TAMANIO: 'local_library',
-      },
-    ];
-    //this.getAllRequestLines();
+    
   }
 
   ngAfterViewInit(): void {
-    this.dataSource.paginator = this.paginator;
-    this.dataSource.sort = this.sort;
-  }
-
-  public async alert(type: string, dataElement: any = null) {
-    this.isLoadingForm = true;
-    let dataDialog: AlertData = {} as AlertData;
-    if (type === 'CANCEL') {
-      dataDialog = {
-        icon: 'warning',
-        title: 'Cancelar Solicitud',
-        description:
-          '¿Está seguro de cancelar la línea de solicitud de compra?',
-      };
-    }
-
-    // Se ejecuta la alerta
-    const dialogRef = this._dialog.open(AlertComponent, {
-      data: dataDialog,
-      disableClose: true,
-      width: '350px',
-    });
 
-    // Se obtiene la respuesta obtenida por la alerta
-    dialogRef.afterClosed().subscribe((result) => {
-      if (result && type === 'CANCEL') {
-        console.log(result);
-      }
-    });
-    this.isLoadingForm = false;
   }
 
   public goBack(steps: number) {
     window.history.go(steps * -1);
   }
 
-  applyFilter(event: Event) {
-    const filterValue = (event.target as HTMLInputElement).value;
-    this.dataSource!.filter = filterValue.trim().toLowerCase();
-
-    if (this.dataSource?.paginator) {
-      this.dataSource.paginator.firstPage();
-    }
-  }
-
-  // Método para reajustar la pantalla
-  public onResize() {
-    if (window.innerWidth <= 1400) {
-      this.btnSmall = true;
-      this.card_size = 'card-size-small';
-    } else if (window.innerWidth > 1400) {
-      this.btnSmall = false;
-      this.card_size = 'card-size-normal mat-elevation-z8';
-    }
-  }
-
-  selectTab(index: number) {
-    this.active = index;
-  }
 }

sistema-mantenimiento-front/src/app/components/gdel/gdel.component.css

@@ -0,0 +1,143 @@
+table {
+  width: 100%;
+}
+
+.alerts {
+  padding: 80px;
+}
+
+.example-container {
+  width: auto;
+  height: auto;
+  margin: 10px;
+  background: white;
+}
+.options-divider {
+  margin-top: 20px;
+  margin-left: -45px;
+}
+.btn-new-register {
+  height: auto !important;
+  margin-bottom: 22px;
+  font-size: 10pt;
+  box-shadow: none !important;
+}
+
+.action-register .btn-new-register {
+  width: auto !important;
+}
+
+.mat-mdc-unelevated-button > .mat-icon,
+.mat-mdc-raised-button > .mat-icon,
+.mat-mdc-outlined-button > .mat-icon {
+  width: 1.35rem;
+}
+
+/* Chat containers */
+.container {
+  border: 1px solid #dedede;
+  background-color: white;
+  border-radius: 20px;
+  padding: 10px;
+  align-content: center;
+  font-size: 10pt;
+}
+/* @media only screen and (max-width: 1300px) {
+    .container {
+      width: 20%;
+    }
+  } */
+
+/* Clear floats */
+.container::after {
+  content: "";
+  clear: both;
+  display: table;
+  align-content: center;
+}
+
+.container:hover {
+  background: #f0f0f0;
+  cursor: pointer;
+}
+
+.mat-options {
+  width: 15% !important;
+}
+
+.active {
+  background: #e9f0fe;
+}
+
+.maticon-drawer {
+  margin-right: 10px;
+}
+
+ul {
+  display: block;
+  height: inherit;
+}
+
+ul li {
+  display: flex;
+  margin: 5px auto;
+  /*   word-wrap: break-word; */
+  /*   text-overflow: ellipsis */
+}
+
+ul li a {
+  display: block;
+  height: inherit;
+  text-decoration: none;
+  color: white;
+  transition: all 300ms;
+}
+
+@media only screen and (max-width: 1405px) {
+  ul li {
+    width: 50% !important;
+    justify-content: center;
+  }
+  mat-drawer-content {
+    clear: both;
+  }
+
+  mat-drawer {
+    width: 10% !important;
+    overflow: hidden;
+  }
+  mat-icon {
+    margin-right: 0px !important;
+  }
+}
+
+@media only screen and (max-width: 1180px) {
+  ul li {
+    width: 50% !important;
+    justify-content: center;
+  }
+  .mat-options {
+    width: 15% !important;
+  }
+}
+
+@media only screen and (max-width: 1330px) {
+  mat-icon {
+    margin-right: 0px !important;
+    overflow: unset !important;
+  }
+  .maticon-drawer {
+    margin-right: 0px !important;
+    overflow: unset !important;
+  }
+}
+
+.mt-10 {
+  margin-top: 10px;
+}
+
+/* PDFTron */
+.webviewer {
+  width: 100%;
+  height: 100vh;
+}

sistema-mantenimiento-front/src/app/components/gdel/gdel.component.html

@@ -0,0 +1,202 @@
+<main class="main-container animated fadeIn" (window:resize)="onResize()">
+    <!-- REGRESAR A LA PANTALLA ANTERIOR -->
+    <header id="navigation" class="btn-navigate mb-8">
+        <div class="prev-page prevent-select indigo_primary_background mat-elevation-z8" matRipple
+            [routerLink]="['/sam/acquisition']">
+            <mat-icon style="color: white">arrow_back</mat-icon>
+            <div class="page-name ml-4">Menú de Adquisiciones</div>
+        </div>
+    </header>
+
+    <mat-card class="override-card override-elevation-z8">
+        <div #viewer class="webviewer" *ngIf="!visualice">
+
+        </div>
+        <section class="override-section" *ngIf="visualice">
+            <nav class="override-nav">
+                <mat-card-title class="mat-card-title centre">Administración de Documentos</mat-card-title>
+                <mat-drawer-container class="example-container">
+                    <mat-drawer mode="side" opened class="mat-options">
+                        <div>
+                            <nav
+                                style="height: 56px; justify-content: space-between; padding: 0 10px; margin-bottom: 20px;">
+                                <div class="options-divider">
+                                    <ul *ngIf="!ulOptSmall">
+                                        <li class="container" *ngFor="let row of options;let i = index"
+                                            [ngClass]="{'active': clickedIndex == i}"
+                                            (click)="clickedIndex == i? clickedIndex = null : clickedIndex = i">
+                                            <mat-icon class="maticon-drawer">{{row.icon}}</mat-icon> {{row.items}}
+                                        </li>
+                                    </ul>
+                                    <ul *ngIf="ulOptSmall">
+                                        <li class="container" *ngFor="let row of options;let i = index"
+                                            [ngClass]="{'active': clickedIndex == i}"
+                                            (click)="clickedIndex == i? clickedIndex = null : clickedIndex = i"
+                                            matTooltip="Registrar Nueva Línea">
+                                            <mat-icon class="maticon-drawer">{{row.icon}}</mat-icon>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </nav>
+                        </div>
+                    </mat-drawer>
+                    <mat-drawer-content>
+                        <div class="override-actions">
+                            <div class="mt-10">
+                                <mat-form-field appearance="outline" class="w-300p mr-8">
+                                    <mat-label>Buscador</mat-label>
+                                    <input matInput [(ngModel)]="txtBuscador" (keyup)="applyFilter($event,'INP')"
+                                        placeholder="Ingrese la palabra a buscar" />
+                                    <mat-icon *ngIf="txtBuscador.length === 0" matSuffix>search</mat-icon>
+                                    <mat-icon *ngIf="txtBuscador.length > 0" class="clickable"
+                                        matTooltip="Eliminar filtro" (click)="applyFilter('', 'EST')"
+                                        matSuffix>close</mat-icon>
+                                </mat-form-field>
+                            </div>
+                            <div class="override-buttons">
+                                <button mat-raised-button color="primary" matTooltip="Registrar Línea de Solicitud"
+                                    [routerLink]="['/sam/shopping']" [disabled]="isLoadingForm" *ngIf="!btnSmall"
+                                    class="override-no-shadow mr-10">
+                                    <mat-icon>add</mat-icon> Nuevo
+                                </button>
+                                <button mat-mini-fab color="primary" class="override-no-shadow mr-8"
+                                    [disabled]="isLoadingForm" *ngIf="btnSmall" matTooltip="Registrar Nueva Línea">
+                                    <mat-icon>add</mat-icon>
+                                </button>
+                                <button mat-mini-fab color="info" matTooltip="Actualizar Datos"
+                                    class="override-no-shadow mr-10">
+                                    <mat-icon>refresh</mat-icon>
+                                </button>
+                            </div>
+                        </div>
+                        <div>
+                            <div>
+                                <div class="is-loading animated fadeIn fast" *ngIf="isLoading">
+                                    <mat-spinner align="center"></mat-spinner>
+                                    <h3>Cargando datos ...</h3>
+                                </div>
+                                <mat-progress-bar mode="indeterminate" *ngIf="isLoadingForm"></mat-progress-bar>
+                            </div>
+                            <div class="override-table">
+                                <table mat-table [dataSource]="dataSource" matSort class="animated fadeIn"
+                                    [style.display]="isLoading ? 'none' : 'revert'"> <ng-container matColumnDef="ID">
+                                        <th mat-header-cell *matHeaderCellDef mat-sort-header>ID</th>
+                                        <td mat-cell *matCellDef="let row">{{ row.ID }} </td>
+                                    </ng-container>
+
+                                    <ng-container matColumnDef="NOMBRE">
+                                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Nombre</th>
+                                        <td mat-cell *matCellDef="let row">{{ row.NOMBRE }}</td>
+                                    </ng-container>
+
+                                    <ng-container matColumnDef="PROPIETARIO">
+                                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Propietario</th>
+                                        <td mat-cell *matCellDef="let row">{{ row.PROPIETARIO }}</td>
+                                    </ng-container>
+
+                                    <ng-container matColumnDef="FERG">
+                                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Fecha de Registro</th>
+                                        <td mat-cell *matCellDef="let row">{{ row.FERG }}</td>
+                                    </ng-container>
+
+                                    <ng-container matColumnDef="TAMANIO">
+                                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Tamaño</th>
+                                        <td mat-cell *matCellDef="let row">{{ row.TAMANIO }}</td>
+                                    </ng-container>
+
+                                    <!--                                     <ng-container matColumnDef="ACCIONES">
+                                        <th mat-header-cell *matHeaderCellDef>Acciones</th>
+                                        <td mat-cell *matCellDef="let row">
+                                            <button mat-mini-fab color="primary" #tooltip="matTooltip"
+                                                matTooltip="Abrir Documento" class="btn-noshadow">
+                                                <mat-icon>open_in_new</mat-icon>
+                                            </button>
+                                            <button mat-mini-fab color="primary" #tooltip="matTooltip"
+                                                matTooltip="Descargar Documento" class="btn-noshadow">
+                                                <mat-icon>download</mat-icon>
+                                            </button><button mat-mini-fab color="primary" #tooltip="matTooltip"
+                                                matTooltip="Editar Documento" class="btn-noshadow">
+                                                <mat-icon>edit</mat-icon>
+                                            </button>
+                                                                            <button mat-mini-fab #tooltip="matTooltip"
+                                                matTooltip="{{ row.ESTATUS == 'Activo' ? 'Bloquear acceso' : 'Permitir acceso'}}"
+                                                [disabled]="row.ESTATUS == 'Eliminado'" class="btn-noshadow ml-4"
+                                                [ngClass]="{ amber_primary_background: row.ESTATUS != 'Eliminado' }">
+                                                <mat-icon
+                                                    *ngIf="row.ESTATUS == 'Activo' || row.ESTATUS == 'Eliminado'">block</mat-icon>
+                                                <mat-icon *ngIf="row.ESTATUS == 'Inactivo'">check_circle</mat-icon>
+                                            </button>
+                                            <button mat-mini-fab #tooltip="matTooltip" matTooltip="Reasignar contraseña"
+                                                class="btn-noshadow ml-4" [disabled]="row.ESTATUS == 'Eliminado'"
+                                                [ngClass]="{ blue_dark_background: row.ESTATUS != 'Eliminado' }">
+                                                <mat-icon>lock</mat-icon>
+                                            </button>
+                                            <button mat-mini-fab #tooltip="matTooltip" matTooltip="Eliminar usuario"
+                                                class="btn-noshadow ml-4" [disabled]="row.ESTATUS == 'Eliminado'"
+                                                [ngClass]="{ red_primary_background: row.ESTATUS != 'Eliminado' }">
+                                                <mat-icon>delete</mat-icon>
+                                            </button> 
+                                        </td>
+                                    </ng-container> -->
+
+                                    <ng-container matColumnDef="ACCIONES">
+                                        <th mat-header-cell *matHeaderCellDef>Acciones</th>
+                                        <td mat-cell *matCellDef="let element">
+                                            <!-- BOTONES DE ACCIONES NORMALES -->
+                                            <div *ngIf="!btnSmall">
+                                                <button mat-mini-fab color="primary" class="override-no-shadow mr-4"
+                                                    matTooltip="Editar">
+                                                    <mat-icon>edit</mat-icon>
+                                                </button>
+                                                <button mat-mini-fab color="info" class="override-no-shadow mr-4"
+                                                    matTooltip="Descargar">
+                                                    <mat-icon>download</mat-icon>
+                                                </button>
+                                                <button mat-mini-fab color="warn" class="override-no-shadow mr-4"
+                                                    matTooltip="Abrir" (click)="openViewer()">
+                                                    <mat-icon>open_in_new</mat-icon>
+                                                </button>
+                                            </div>
+                                            <!-- BOTONES DE ACCIONES CON PANTALLA REDUCIDA -->
+                                            <div *ngIf="btnSmall">
+                                                <button mat-mini-fab color="primary" [matMenuTriggerFor]="menu"
+                                                    #menuTrigger matTooltip="Click para desplegar las opciones"
+                                                    class="override-no-shadow">
+                                                    <mat-icon>settings</mat-icon>
+                                                </button>
+                                                <mat-menu #menu="matMenu">
+                                                    <button mat-menu-item>
+                                                        <mat-icon>edit</mat-icon> Editar
+                                                    </button>
+                                                    <button mat-menu-item>
+                                                        <mat-icon>download</mat-icon> Descargar
+                                                    </button>
+                                                    <button mat-menu-item>
+                                                        <mat-icon>open_in_new</mat-icon> Abrrir
+                                                    </button>
+                                                </mat-menu>
+                                            </div>
+                                        </td>
+                                    </ng-container>
+
+                                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                                    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+
+                                    <tr class="mat-row" *matNoDataRow>
+                                        <td class="p-80 centre" colspan="12"><object data="assets/img/empty_data.svg"
+                                                width="300"></object>
+                                            <h2>Sin datos</h2>
+                                        </td>
+                                    </tr>
+
+                                </table>
+                            </div>
+                        </div>
+                    </mat-drawer-content>
+                </mat-drawer-container>
+            </nav>
+        </section>
+        <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]"
+            aria-label="Selecciona la página de usuarios"></mat-paginator>
+    </mat-card>
+</main>

sistema-mantenimiento-front/src/app/components/gdel/gdel.component.ts

@@ -7,7 +7,12 @@ import { MatTableDataSource } from '@angular/material/table';
 import { Router } from '@angular/router';
 import { lastValueFrom } from 'rxjs';
 import { AlertComponent } from 'src/app/components/resources/dialogs/alert/alert.component';
-import { ObjectGetRequest, RequestLines, ResponseDataRequestLines, ResponseRequestLines } from 'src/app/interfaces/acquisition-management/acquisition/order.interface';
+import {
+  ObjectGetRequest,
+  RequestLines,
+  ResponseDataRequestLines,
+  ResponseRequestLines,
+} from 'src/app/interfaces/acquisition-management/acquisition/order.interface';
 import { AlertData } from 'src/app/interfaces/alert.interface';
 import { OrderService } from 'src/app/services/acquisition-management/acquisition/order.service';
 import { EncService } from 'src/app/services/enc/enc.service';
@@ -16,34 +21,83 @@ import { ResourcesService } from 'src/app/services/resources/resources.service';
 @Component({
   selector: 'app-gdel',
   templateUrl: './gdel.component.html',
-  styleUrls: ['./gdel.component.css']
+  styleUrls: ['./gdel.component.css'],
 })
-export class GDELComponent  implements AfterViewInit, OnInit  {
-  public displayedColumns: Array<string> = ['ID','DESCRIPCION','CANTIDAD','FECHA','USUARIO','ESTADO','ACCIONES'];
-  public dataSource: MatTableDataSource<RequestLines>;
+export class GDELComponent implements AfterViewInit, OnInit {
+  public displayedColumns: Array<string>;
+
+  public dataSource: MatTableDataSource<any>;
   @ViewChild(MatPaginator) paginator!: MatPaginator;
   @ViewChild(MatSort) sort!: MatSort;
 
-  public isLoading: boolean = false;
-  public isLoadingForm: boolean = false;
-
-  public btnSmall: boolean = false;
-  public card_size = 'card-size-normal mat-elevation-z8';
-
-  public quantityCarArtitle: number;
+  public isLoading: boolean;
+  public isLoadingForm: boolean;
+  public active: number = 0;
+  public btnSmall: boolean;
+  public ulOptSmall: boolean;
+  public txtBuscador: string;
+  public clickedIndex: any = 0;
+  public options = [
+    {
+      id: 1,
+      items: 'Mis documentos',
+      icon: 'local_library',
+    },
+    {
+      id: 2,
+      items: 'Compartidos Conmigo',
+      icon: 'group_add',
+    },
+    {
+      id: 3,
+      items: 'Papelera',
+      icon: 'delete',
+    },
+  ];
+  public documents: Array<any> = [];
+  public visualice: boolean;
   constructor(
     private _encService: EncService,
-    private _orderService: OrderService,
     private _resourcesServices: ResourcesService,
     private _dialog: MatDialog,
-    private _router: Router,
+    private _router: Router
   ) {
+    this.displayedColumns = [
+      'ID',
+      'NOMBRE',
+      'PROPIETARIO',
+      'FERG',
+      'TAMANIO',
+      'ACCIONES',
+    ];
     this.dataSource = new MatTableDataSource();
-    this.quantityCarArtitle = null !;
-   }
+    this.isLoading = false;
+    this.isLoadingForm = false;
+    this.btnSmall = false;
+    this.ulOptSmall = false;
+    this.txtBuscador = '';
+    this.visualice = true;
+  }
 
   ngOnInit(): void {
     this.onResize();
+
+    this.dataSource.data = [
+      {
+        ID: 1,
+        NOMBRE: 'Mis documentos',
+        PROPIETARIO: 'local_library',
+        FERG: 'local_library',
+        TAMANIO: 'local_library',
+      },
+      {
+        ID: 2,
+        NOMBRE: 'Mis documentos',
+        PROPIETARIO: 'local_library',
+        FERG: 'local_library',
+        TAMANIO: 'local_library',
+      },
+    ];
     //this.getAllRequestLines();
   }
 
@@ -57,9 +111,10 @@ export class GDELComponent  implements AfterViewInit, OnInit  {
     let dataDialog: AlertData = {} as AlertData;
     if (type === 'CANCEL') {
       dataDialog = {
-        icon: "warning",
-        title: "Cancelar Solicitud",
-        description: "¿Está seguro de cancelar la línea de solicitud de compra?"
+        icon: 'warning',
+        title: 'Cancelar Solicitud',
+        description:
+          '¿Está seguro de cancelar la línea de solicitud de compra?',
       };
     }
 
@@ -73,6 +128,7 @@ export class GDELComponent  implements AfterViewInit, OnInit  {
     // Se obtiene la respuesta obtenida por la alerta
     dialogRef.afterClosed().subscribe((result) => {
       if (result && type === 'CANCEL') {
+        console.log(result);
       }
     });
     this.isLoadingForm = false;
@@ -83,22 +139,39 @@ export class GDELComponent  implements AfterViewInit, OnInit  {
   }
 
   // Método de filtrado de datos
-  public applyFilter(event: Event) {
-    const filterValue = (event.target as HTMLInputElement).value;
+  public applyFilter(event: any, type: string): void {
+    let filterValue: string;
+    if (type == 'INP') {
+      filterValue = (event.target as HTMLInputElement).value;
+    } else {
+      this.txtBuscador = event;
+      filterValue = event;
+    }
     this.dataSource.filter = filterValue.trim().toLowerCase();
     if (this.dataSource.paginator) {
       this.dataSource.paginator.firstPage();
     }
   }
 
-  // Método para reajustar la pantalla
-  public onResize() {
-    if (window.innerWidth <= 1400) {
-      this.btnSmall = true;
-      this.card_size = 'card-size-small';
-    } else if (window.innerWidth > 1400) {
-      this.btnSmall = false;
-      this.card_size = 'card-size-normal mat-elevation-z8';
-    }
+  public onResize(): void {
+    this.btnSmall = window.innerWidth <= 1405;
+    this.ulOptSmall = window.innerWidth <= 1405;
+  }
+
+  selectTab(index: number) {
+    this.active = index;
+  }
+
+  public openViewer() {
+    console.log('click');
+
+    this.visualice = false;
+  }
+  // Método para dar formato a las fechas y horas
+  public formatDate(dateRegister: string, dateUpdate: string | null): string {
+    let date: string = dateUpdate === null ? dateRegister : dateUpdate;
+    let arrDateTime: Array<string> = date.split(' ');
+    let arrDate: Array<string> = arrDateTime[0].split('-');
+    return `${arrDate[2]}-${arrDate[1]}-${arrDate[0]} ${arrDateTime[1]}`;
   }
 }

sistema-mantenimiento-front/src/app/components/template/template.component.html

@@ -361,7 +361,6 @@
                     <mat-panel-description>
                     </mat-panel-description>
                 </mat-expansion-panel-header>
-
             </mat-expansion-panel>
         </div>
         <div>