From 4957f8f07401853664883eccd11c93493b99e000 Mon Sep 17 00:00:00 2001
From: Eneko Nieto <eneko@baturamobile.com>
Date: Sat, 23 Jan 2021 00:46:17 +0100
Subject: [PATCH] Inicio de filtros

---
 src/app/entities/travel-list.ts                |  6 ++++++
 src/app/services/api.service.ts                | 15 ++++++++++-----
 src/app/travel-list/travel-list.component.html | 16 +++++++++++++++-
 src/app/travel-list/travel-list.component.ts   |  3 +--
 src/app/travel-list/travel-list.datasource.ts  | 10 ++++++----
 5 files changed, 38 insertions(+), 12 deletions(-)
 create mode 100644 src/app/entities/travel-list.ts

diff --git a/src/app/entities/travel-list.ts b/src/app/entities/travel-list.ts
new file mode 100644
index 0000000..0e1bcd8
--- /dev/null
+++ b/src/app/entities/travel-list.ts
@@ -0,0 +1,6 @@
+import { Travel } from './travel';
+
+export interface TravelList {
+    totalTravels: number;
+    travels: Travel[];
+}
\ No newline at end of file
diff --git a/src/app/services/api.service.ts b/src/app/services/api.service.ts
index 26c0eb1..958f758 100644
--- a/src/app/services/api.service.ts
+++ b/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> {
diff --git a/src/app/travel-list/travel-list.component.html b/src/app/travel-list/travel-list.component.html
index 82c343a..6d95bd4 100644
--- a/src/app/travel-list/travel-list.component.html
+++ b/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>
diff --git a/src/app/travel-list/travel-list.component.ts b/src/app/travel-list/travel-list.component.ts
index 4fb59f4..2683213 100644
--- a/src/app/travel-list/travel-list.component.ts
+++ b/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;
 
diff --git a/src/app/travel-list/travel-list.datasource.ts b/src/app/travel-list/travel-list.datasource.ts
index 54bdf09..e0346f8 100644
--- a/src/app/travel-list/travel-list.datasource.ts
+++ b/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);
       });
   }