fix_api(fe): Fixed paginator

Javi111003 · Nov 23, 2024 · 19d5c72 · 19d5c72
1 parent 18c1915
commit 19d5c72
Show file tree

Hide file tree

Showing 9 changed files with 67 additions and 43 deletions.
diff --git a/frontend/src/app/modules/office/components/equipment/equipment.component.html b/frontend/src/app/modules/office/components/equipment/equipment.component.html
@@ -13,12 +13,11 @@
       (optionSelected)="handleOptionSelected($event)"
     >
   </app-autocomplete>
-  
+
   <div class="grid-item export-button">
-    <button type="button" class="btn btn-primary custom-button">Descargar PDF</button>
+    <app-button></app-button>
   </div>
 
-
   <!-- Contenedor de la Tabla -->
   <div class="grid-item table-container" *ngIf="showTable">
     <app-table

diff --git a/frontend/src/app/modules/office/components/equipment/equipment.component.ts b/frontend/src/app/modules/office/components/equipment/equipment.component.ts
@@ -9,7 +9,7 @@ import { MatPaginator } from '@angular/material/paginator';
   templateUrl: './equipment.component.html',
   styleUrls: ['./equipment.component.css']
 })
-export class EquipmentComponent implements OnInit, AfterViewInit {
+export class EquipmentComponent implements OnInit {
 
   constructor(private fb: FormBuilder) {
     this.form = this.fb.group({
@@ -25,7 +25,6 @@ export class EquipmentComponent implements OnInit, AfterViewInit {
   officeSelected: string = '';
   // Example data for the table
   dataSource: MatTableDataSource<any> = new MatTableDataSource([0]);
-  @ViewChild(MatPaginator) paginator: MatPaginator = [][0];
 
   // Table Columns
   displayedColumns: ConfigColumn[] = [
@@ -47,10 +46,6 @@ export class EquipmentComponent implements OnInit, AfterViewInit {
     this.getCenterList();
   }
 
-  ngAfterViewInit(): void {
-    this.dataSource.paginator = this.paginator;
-  }
-
   /**
    * Handles the change event of the first select control.
    * Resets the second select control and updates its options based on the selected center.
@@ -107,9 +102,7 @@ export class EquipmentComponent implements OnInit, AfterViewInit {
       { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },
       { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' },
     ];
-    this.dataSource = new MatTableDataSource(equipments);
-    this.dataSource.paginator = this.paginator;
-    console.log(this.dataSource);
+    this.dataSource.data = equipments;
   }
 
   /**

diff --git a/...d/src/app/modules/workCenter/components/total-consumption/total-consumption.component.css b/...d/src/app/modules/workCenter/components/total-consumption/total-consumption.component.css
@@ -5,5 +5,22 @@
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
-  justify-content: space-around;
+  justify-content: space-between;
+}
+.form-autocomplete {
+  width: 60%;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: space-between;
+  justify-items: left;
+}
+.form-buttons {
+  width: 18%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  position:relative;
+  top: 8px;
+  left: 0;
 }
diff --git a/.../src/app/modules/workCenter/components/total-consumption/total-consumption.component.html b/.../src/app/modules/workCenter/components/total-consumption/total-consumption.component.html
@@ -1,34 +1,36 @@
 <div class="form-total-consumption">
   <div class="form">
-    <app-autocomplete
-      [label]="'Centro de Trabajo'"
-      [options]="options"
-      (optionSelected)="handleOptionSelected($event)"
-    >
-    </app-autocomplete>
+    <div class="form-autocomplete">
+      <app-autocomplete
+        [label]="'Centro de Trabajo'"
+        [options]="options"
+        (optionSelected)="handleOptionSelected($event)"
+      >
+      </app-autocomplete>
 
-    <app-datepicker class="startDate"
-      [filter]="filterStartDate"
-      [label]="'Desde'"
-      (dateSelected)="handleDateSelected($event)"
-    ></app-datepicker>
+      <app-datepicker class="startDate"
+        [filter]="filterStartDate"
+        [label]="'Desde'"
+        (dateSelected)="handleDateSelected($event)"
+      ></app-datepicker>
 
-    <app-datepicker class="endDate"
-      [filter]="filterEndDate"
-      [label]="'Hasta'"
-    ></app-datepicker>
+      <app-datepicker class="endDate"
+        [filter]="filterEndDate"
+        [label]="'Hasta'"
+      ></app-datepicker>
+    </div>
 
-    <app-button
-      [label]="'Obtener'"
-      [function]="onClick.bind(this)"
-    >
-    </app-button>
+    <div class="form-buttons">
+      <app-button
+        [label]="'Consultar'"
+        [function]="onClick.bind(this)"
+      >
+      </app-button>
 
-    <app-button></app-button>
+      <app-button></app-button>
+    </div>
   </div>
 
-  <br>
-
   <div class="table" [class.hidden]="!isTableActive">
     <app-table
       [dataSource]="dataSource"

diff --git a/...nd/src/app/modules/workCenter/components/total-consumption/total-consumption.component.ts b/...nd/src/app/modules/workCenter/components/total-consumption/total-consumption.component.ts
@@ -95,11 +95,9 @@ export class TotalConsumptionComponent {
 
   handleDateSelected(date: Date) {
     this.receivedDate = date;
-    console.log('Fecha seleccionada:', this.receivedDate);
   }
 
   onClick() {
     this.isTableActive = !this.isTableActive;
-    console.log(this.isTableActive);
   }
 }
diff --git a/frontend/src/app/shared/components/table/paginator-modifier.component.ts b/frontend/src/app/shared/components/table/paginator-modifier.component.ts
@@ -0,0 +1,11 @@
+import { Injectable } from '@angular/core';
+import { MatPaginatorIntl } from '@angular/material/paginator';
+
+@Injectable()
+export class PaginatorModifierComponent extends MatPaginatorIntl {
+  override itemsPerPageLabel = 'Elementos por página';
+  override nextPageLabel = 'Siguiente';
+  override previousPageLabel = 'Anterior';
+  override firstPageLabel = 'Primera página';
+  override lastPageLabel = 'Última página';
+}
diff --git a/frontend/src/app/shared/components/table/table.component.html b/frontend/src/app/shared/components/table/table.component.html
@@ -18,5 +18,5 @@
     <tr mat-row *matRowDef="let row; columns: headings;"></tr>
   </table>
 
-  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator>
+  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users" showFirstLastButtons></mat-paginator>
 </div>
diff --git a/frontend/src/app/shared/components/table/table.component.ts b/frontend/src/app/shared/components/table/table.component.ts
@@ -1,8 +1,8 @@
 import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/core';
 
 import { MatTableDataSource } from '@angular/material/table';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
+import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
+import { PaginatorModifierComponent } from './paginator-modifier.component';
 
 export interface ConfigColumn {
   title: string;
@@ -12,7 +12,10 @@ export interface ConfigColumn {
 @Component({
   selector: 'app-table',
   templateUrl: './table.component.html',
-  styleUrl: './table.component.css'
+  styleUrl: './table.component.css',
+  providers: [
+    { provide: MatPaginatorIntl, useClass: PaginatorModifierComponent }
+  ],
 })
 export class TableComponent implements OnInit, AfterViewInit {
   @Input() dataSource: MatTableDataSource<any> = [][0];

diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts
@@ -15,13 +15,14 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { AsyncPipe } from '@angular/common';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatDatepickerModule } from '@angular/material/datepicker';
+import { PaginatorModifierComponent } from './components/table/paginator-modifier.component';
 
 @NgModule({
   declarations: [
     TableComponent,
     ButtonComponent,
     AutocompleteComponent,
-    DatepickerComponent
+    DatepickerComponent,
   ],
   imports: [
     CommonModule,