Inicio de filtros

src/app/entities/travel-list.ts

@@ -0,0 +1,6 @@
+import { Travel } from './travel';
+
+export interface TravelList {
+    totalTravels: number;
+    travels: Travel[];
+}

src/app/services/api.service.ts

@@ -11,11 +11,16 @@ import { ApiResponse } from '../entities/api-response';
 export class ApiService {
   constructor(private http: HttpClient) {}
 
-  call<T>(relativeUrl: string, parameters?: any[]): Observable<ApiResponse<T>> {
-    return this.http.get<ApiResponse<T>>(API_URL + relativeUrl).pipe(
-      retry(3), // retry a failed request up to 3 times
-      catchError(this.handleError) // then handle the error
-    );
+  call<T>(
+    relativeUrl: string,
+    params?: { [param: string]: string }
+  ): Observable<ApiResponse<T>> {
+    return this.http
+      .get<ApiResponse<T>>(API_URL + relativeUrl, { params })
+      .pipe(
+        retry(3), // retry a failed request up to 3 times
+        catchError(this.handleError) // then handle the error
+      );
   }
 
   private handleError(error: HttpErrorResponse): Observable<never> {

src/app/travel-list/travel-list.component.html

@@ -27,6 +27,20 @@
       }}</mat-cell>
     </ng-container>
 
+    <ng-container matColumnDef="origin">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Origin</mat-header-cell>
+      <mat-cell *matCellDef="let travel">{{
+        travel.origin
+      }}</mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="destination">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Destination</mat-header-cell>
+      <mat-cell *matCellDef="let travel">{{
+        travel.destination
+      }}</mat-cell>
+    </ng-container>
+
     <ng-container matColumnDef="description">
       <mat-header-cell *matHeaderCellDef>Description</mat-header-cell>
       <mat-cell class="description-cell" *matCellDef="let travel">{{
@@ -40,7 +54,7 @@
   </mat-table>
 
   <mat-paginator
-    [length]="10"
+    [length]=dataSource.totalTravels
     [pageSize]="3"
     [pageSizeOptions]="[3, 5, 10]"
   ></mat-paginator>

src/app/travel-list/travel-list.component.ts

@@ -17,7 +17,6 @@ import {
   delay,
 } from 'rxjs/operators';
 import { merge, fromEvent } from 'rxjs';
-import { Travel } from '../entities/travel';
 import { ApiService } from '../services/api.service';
 import { TravelsDataSource } from './travel-list.datasource';
 
@@ -29,7 +28,7 @@ import { TravelsDataSource } from './travel-list.datasource';
 export class TravelListComponent implements OnInit, AfterViewInit {
   dataSource: TravelsDataSource;
 
-  displayedColumns = ['driver', 'departureDate', 'description'];
+  displayedColumns = ['driver', 'departureDate', 'origin', 'destination', 'description'];
 
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
 

src/app/travel-list/travel-list.datasource.ts

@@ -3,14 +3,14 @@ import { Observable, BehaviorSubject, of } from 'rxjs';
 import { catchError, finalize } from 'rxjs/operators';
 import { ApiResponse } from '../entities/api-response';
 import { Travel } from '../entities/travel';
+import { TravelList } from '../entities/travel-list';
 import { ApiService } from '../services/api.service';
 
 export class TravelsDataSource implements DataSource<Travel> {
   private travelsSubject = new BehaviorSubject<Travel[]>([]);
-
   private loadingSubject = new BehaviorSubject<boolean>(false);
-
   public loading$ = this.loadingSubject.asObservable();
+  public totalTravels = 0;
 
   constructor(private apiService: ApiService) {}
 
@@ -23,13 +23,15 @@ export class TravelsDataSource implements DataSource<Travel> {
     this.loadingSubject.next(true);
 
     this.apiService
-      .call<Travel[]>('/travel/list')
+      .call<TravelList>('/travel/list', { filter })
       .pipe(
         catchError(() => of([])),
         finalize(() => this.loadingSubject.next(false))
       )
       .subscribe((res) => {
-        const data = (res as ApiResponse<Travel[]>).data;
+        const travelList = (res as ApiResponse<TravelList>).data;
+        const data = travelList.travels;
+        this.totalTravels = travelList.totalTravels;
         this.travelsSubject.next(data);
       });
   }