feat: Se realiza la implementacion de la paginacion para la consulta …

…de los periodos de los usuarios udistrital/sisifo_documentacion#145
udistrital · Aug 31, 2024 · 780c2b0 · 780c2b0
1 parent 4e3446e
commit 780c2b0
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 10 deletions.
diff --git a/src/app/modules/gestion-usuarios/consulta-usuarios/consulta-usuarios.component.html b/src/app/modules/gestion-usuarios/consulta-usuarios/consulta-usuarios.component.html
@@ -33,7 +33,7 @@
 				<mat-form-field class="form" appearance="fill" [style.width.%]="100" [formGroup]="formUsuarios">
 					<mat-label class="label">Documento de identidad</mat-label>
 					<input class="input" matInput #documentoInput formControlName="documento" required>
-						<button mat-icon-button matSuffix (click)="BuscarDocumento(documentoInput.value, 10, 0)">
+						<button mat-icon-button matSuffix (click)="IniciarPaginacion(); BuscarDocumento(documentoInput.value, 2, 0)">
 							<mat-icon>search</mat-icon>
 						</button>
 					<mat-error *ngIf="formUsuarios.get('documento')?.hasError('required')">
@@ -146,7 +146,7 @@
 			  <mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
 			  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
 			</table>
-			<mat-paginator [pageSizeOptions]="[4, 6]" showFirstLastButtons></mat-paginator>
+			<mat-paginator [pageSizeOptions]="[2, 6]" [length]="total" showFirstLastButtons></mat-paginator>
 		  </section>
 	</mat-card-content>
 </mat-card>
diff --git a/src/app/modules/gestion-usuarios/consulta-usuarios/consulta-usuarios.component.ts b/src/app/modules/gestion-usuarios/consulta-usuarios/consulta-usuarios.component.ts
@@ -55,6 +55,7 @@ export class UsuariosComponent implements OnInit {
   ];
   dataSource = new MatTableDataSource<UserData>([]);
   sistemaInformacion!: number;
+  total!: number;
 
   roles: string[] = ['Administrador', 'Usuario Estándar'];
 
@@ -78,20 +79,22 @@ export class UsuariosComponent implements OnInit {
     });
 
     this.sistemaInformacion = environment.SISTEMA_INFORMACION_ID;
-    this.PeriodosUsuario(this.sistemaInformacion, 4, 0);
+    this.PeriodosUsuario(this.sistemaInformacion, 2, 0);
 
     // Inicializamos el filtro con funciones predicadas personalizadas
     //this.dataSource.filterPredicate = this.customFilterPredicate();
-  }
 
-  ngAfterViewInit() {
-    this.dataSource.paginator = this.paginator;
+  }
 
-    this.paginator.page.subscribe(() => {
-      //this.PeriodosUsuario(this.sistemaInformacion, 3, this.paginator.pageIndex * this.paginator.pageSize);
+  ngAfterViewInit() {   
+    this.paginator.page.subscribe(() => {      
       const limit = this.paginator.pageSize;
       const offset = this.paginator.pageIndex * limit;
-      this.PeriodosUsuario(this.sistemaInformacion, limit, offset);
+      if (this.formUsuarios.get('documento')?.value) {
+        this.BuscarDocumento(this.formUsuarios.get('documento')?.value, limit, offset);
+      } else {
+        this.PeriodosUsuario(this.sistemaInformacion, limit, offset);
+      }
     });
   }
 
@@ -103,6 +106,10 @@ export class UsuariosComponent implements OnInit {
     }
   }
 
+  IniciarPaginacion() {
+    this.paginator.pageIndex = 0;
+  }
+
   PeriodosUsuario(sistema: number, limit: number, offset: number) {
     this.loading = true;
     this.autenticacionService
@@ -114,6 +121,7 @@ export class UsuariosComponent implements OnInit {
           this.loading = false;
           if (response.Success && response.Data && response.Data.length > 0) {
             this.dataSource.data = response.Data;
+            this.total = 7;
             this.cdr.detectChanges();
             console.log('data:', response.Data);
           } else {
@@ -136,7 +144,6 @@ export class UsuariosComponent implements OnInit {
       return;
     }
     this.loading = true;
-    console.log('documento:', documento);
 
     this.autenticacionService
       .getPeriodos(
@@ -147,6 +154,7 @@ export class UsuariosComponent implements OnInit {
           this.loading = false;
           if (response.Success && response.Data && response.Data.length > 0) {
             this.dataSource.data = response.Data;
+            this.total = 3;
             this.cdr.detectChanges();
             console.log('data:', response.Data);
           } else {