From 94eba7aefaba76c9d9c6a68d2b5d1c5fa35fa7a3 Mon Sep 17 00:00:00 2001 From: Eneko Nieto Date: Sun, 24 Jan 2021 01:34:17 +0100 Subject: [PATCH] Order and pagination in travel list --- src/app/app.config.ts | 13 +- src/app/app.module.ts | 11 +- src/app/app.routes.ts | 13 -- src/app/entities/flight.ts | 7 - .../alt-flight-card.component.html | 17 --- .../alt-flight.card.component.ts | 16 --- .../alt-flight-card/flight-list.ts | 26 ---- .../flight-booking.component.html | 10 -- .../flight-booking.component.ts | 8 -- .../flight-booking/flight-booking.module.ts | 37 ------ .../flight-booking/flight-booking.routes.ts | 34 ----- .../flight-card/flight-card.component.html | 21 --- .../flight-card/flight.card.component.ts | 16 --- .../flight-edit/flight-edit.component.ts | 57 -------- .../flight-search-reactive.component.css | 11 -- .../flight-search-reactive.component.html | 94 ------------- .../flight-search-reactive.component.ts | 76 ----------- .../flight-search/flight-search.component.css | 11 -- .../flight-search.component.html | 123 ------------------ .../flight-search/flight-search.component.ts | 56 -------- .../passenger-search.component.ts | 18 --- .../flight-booking/services/flight.service.ts | 35 ----- .../flight-history.component.ts | 13 -- src/app/services/api.service.ts | 5 +- src/app/travel-list/travel-list.component.ts | 27 ++-- src/app/travel-list/travel-list.datasource.ts | 12 +- 26 files changed, 38 insertions(+), 729 deletions(-) delete mode 100644 src/app/entities/flight.ts delete mode 100644 src/app/flight-booking/alt-flight-card/alt-flight-card.component.html delete mode 100644 src/app/flight-booking/alt-flight-card/alt-flight.card.component.ts delete mode 100644 src/app/flight-booking/alt-flight-card/flight-list.ts delete mode 100644 src/app/flight-booking/flight-booking.component.html delete mode 100644 src/app/flight-booking/flight-booking.component.ts delete mode 100644 src/app/flight-booking/flight-booking.module.ts delete mode 100644 src/app/flight-booking/flight-booking.routes.ts delete mode 100644 src/app/flight-booking/flight-card/flight-card.component.html delete mode 100644 src/app/flight-booking/flight-card/flight.card.component.ts delete mode 100644 src/app/flight-booking/flight-edit/flight-edit.component.ts delete mode 100644 src/app/flight-booking/flight-search-reactive/flight-search-reactive.component.css delete mode 100644 src/app/flight-booking/flight-search-reactive/flight-search-reactive.component.html delete mode 100644 src/app/flight-booking/flight-search-reactive/flight-search-reactive.component.ts delete mode 100644 src/app/flight-booking/flight-search/flight-search.component.css delete mode 100644 src/app/flight-booking/flight-search/flight-search.component.html delete mode 100644 src/app/flight-booking/flight-search/flight-search.component.ts delete mode 100644 src/app/flight-booking/passenger-search/passenger-search.component.ts delete mode 100644 src/app/flight-booking/services/flight.service.ts delete mode 100644 src/app/flight-history/flight-history.component.ts diff --git a/src/app/app.config.ts b/src/app/app.config.ts index 848f8d3..7c1ce85 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -1,3 +1,10 @@ -export const API_BASE_URL = 'http://localhost:8080'; -export const API_RELATIVE_PATH = '/api'; -export const API_URL = API_BASE_URL + API_RELATIVE_PATH; +export const API_BASE_URL = 'http://localhost:8080/api'; + +const PUBLIC_API_RELATIVE_PATH = '/public'; +export const PUBLIC_API_URL = API_BASE_URL + PUBLIC_API_RELATIVE_PATH; + +const USER_API_RELATIVE_PATH = '/user'; +export const USER_API_URL = API_BASE_URL + USER_API_RELATIVE_PATH; + +const TRAVEL_API_RELATIVE_PATH = '/travel'; +export const TRAVEL_API_URL = API_BASE_URL + TRAVEL_API_RELATIVE_PATH; diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 337c3b1..e9f2a5f 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -6,8 +6,7 @@ import { HttpClientModule } from '@angular/common/http'; import { AppComponent } from './app.component'; import { APP_ROUTES } from './app.routes'; -import { API_URL } from './app.config'; -import { FlightHistoryComponent } from './flight-history/flight-history.component'; +import { USER_API_URL, TRAVEL_API_URL } from './app.config'; import { HomeComponent } from './home/home.component'; import { SharedModule } from './shared/shared.module'; import { RouterModule, ExtraOptions } from '@angular/router'; @@ -37,7 +36,7 @@ const ROUTING_OPTIONS: ExtraOptions = { SharedModule.forRoot(), OAuthModule.forRoot({ resourceServer: { - allowedUrls: [API_URL], + allowedUrls: [USER_API_URL, TRAVEL_API_URL], sendAccessToken: true, }, }), @@ -46,21 +45,19 @@ const ROUTING_OPTIONS: ExtraOptions = { MatTableModule, MatPaginatorModule, MatSortModule, - MatProgressSpinnerModule + MatProgressSpinnerModule, ], declarations: [ AppComponent, HomeComponent, - FlightHistoryComponent, HeaderComponent, - TravelListComponent + TravelListComponent, ], providers: [ // (useHash) ? { provide: LocationStrategy, useClass: HashLocationStrategy } : [], // {provide: AuthConfig, useValue: authConfig }, // { provide: OAuthStorage, useValue: localStorage }, // { provide: ValidationHandler, useClass: JwksValidationHandler }, - // { provide: BASE_URL, useValue: 'http://localhost:8080' } ], bootstrap: [AppComponent], }) diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 18b3e07..92a4be5 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -1,6 +1,5 @@ import { Routes } from '@angular/router'; import { HomeComponent } from './home/home.component'; -import { FlightHistoryComponent } from './flight-history/flight-history.component'; export let APP_ROUTES: Routes = [ { @@ -12,18 +11,6 @@ export let APP_ROUTES: Routes = [ path: 'home', component: HomeComponent }, - { - path: 'flight-booking', - loadChildren: () => - import('./flight-booking/flight-booking.module').then( - mod => mod.FlightBookingModule - ) - }, - { - path: 'history', - component: FlightHistoryComponent, - outlet: 'aux' - }, { path: '**', redirectTo: 'home' diff --git a/src/app/entities/flight.ts b/src/app/entities/flight.ts deleted file mode 100644 index 4a758f6..0000000 --- a/src/app/entities/flight.ts +++ /dev/null @@ -1,7 +0,0 @@ -export interface Flight { - id: number; // int + double - from: string; - to: string; - date: string; - // JSON: ISO-String 2016-12-24T17:00:00.000+01:00 -} diff --git a/src/app/flight-booking/alt-flight-card/alt-flight-card.component.html b/src/app/flight-booking/alt-flight-card/alt-flight-card.component.html deleted file mode 100644 index a284039..0000000 --- a/src/app/flight-booking/alt-flight-card/alt-flight-card.component.html +++ /dev/null @@ -1,17 +0,0 @@ -
-

{{ item.from }} - {{ item.to }}

-

Flugnr. #{{ item.id }}

-

Datum: {{ item.date | date: 'dd.MM.yyyy HH:mm' }}

- -

- -

-
diff --git a/src/app/flight-booking/alt-flight-card/alt-flight.card.component.ts b/src/app/flight-booking/alt-flight-card/alt-flight.card.component.ts deleted file mode 100644 index 5bfa1e1..0000000 --- a/src/app/flight-booking/alt-flight-card/alt-flight.card.component.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core'; -import { Flight } from '../../entities/flight'; - -@Component({ - selector: 'alt-flight-card', - templateUrl: 'alt-flight-card.component.html' -}) -export class AltFlightCardComponent { - @Input() item: Flight; - @Input() selected: boolean; - @Output() selectedChange = new EventEmitter(); - - select() { - this.selectedChange.emit(true); - } -} diff --git a/src/app/flight-booking/alt-flight-card/flight-list.ts b/src/app/flight-booking/alt-flight-card/flight-list.ts deleted file mode 100644 index 2dda665..0000000 --- a/src/app/flight-booking/alt-flight-card/flight-list.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { Component, Input, Output, EventEmitter } from '@angular/core'; -import { Flight } from '../../entities/flight'; -@Component({ - selector: 'flight-list', - template: ` -
-
- - -
-
- ` -}) -export class FlightListComponent { - @Input() flights: Flight[] = []; - @Input() selectedFlight: Flight; - @Output() selectedFlightChange = new EventEmitter(); - - change(f: Flight) { - this.selectedFlightChange.emit(f); - } -} diff --git a/src/app/flight-booking/flight-booking.component.html b/src/app/flight-booking/flight-booking.component.html deleted file mode 100644 index 038e991..0000000 --- a/src/app/flight-booking/flight-booking.component.html +++ /dev/null @@ -1,10 +0,0 @@ -
- -
- -
- -
diff --git a/src/app/flight-booking/flight-booking.component.ts b/src/app/flight-booking/flight-booking.component.ts deleted file mode 100644 index 100a6c8..0000000 --- a/src/app/flight-booking/flight-booking.component.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { Component } from '@angular/core'; -import { FlightService } from './services/flight.service'; - -@Component({ - selector: 'flight-booking', - templateUrl: './flight-booking.component.html' -}) -export class FlightBookingComponent {} diff --git a/src/app/flight-booking/flight-booking.module.ts b/src/app/flight-booking/flight-booking.module.ts deleted file mode 100644 index 9c1f501..0000000 --- a/src/app/flight-booking/flight-booking.module.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { NgModule } from '@angular/core'; -import { FlightSearchComponent } from './flight-search/flight-search.component'; -import { FlightCardComponent } from './flight-card/flight.card.component'; -import { AltFlightCardComponent } from './alt-flight-card/alt-flight.card.component'; -import { FlightListComponent } from './alt-flight-card/flight-list'; -import { PassengerSearchComponent } from './passenger-search/passenger-search.component'; -import { FlightEditComponent } from './flight-edit/flight-edit.component'; -import { FlightSearchReactiveComponent } from './flight-search-reactive/flight-search-reactive.component'; -import { CommonModule } from '@angular/common'; -import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { SharedModule } from '../shared/shared.module'; -import { FlightBookingRouterModule } from './flight-booking.routes'; -import { FlightBookingComponent } from './flight-booking.component'; -import { FlightService } from './services/flight.service'; - -@NgModule({ - imports: [ - CommonModule, // ngFor - FormsModule, - ReactiveFormsModule, - SharedModule, - FlightBookingRouterModule - ], - declarations: [ - FlightSearchComponent, - FlightCardComponent, - AltFlightCardComponent, - FlightListComponent, - FlightSearchReactiveComponent, - PassengerSearchComponent, - FlightEditComponent, - FlightBookingComponent - ], - providers: [FlightService], - exports: [] -}) -export class FlightBookingModule {} diff --git a/src/app/flight-booking/flight-booking.routes.ts b/src/app/flight-booking/flight-booking.routes.ts deleted file mode 100644 index 8e7ad7c..0000000 --- a/src/app/flight-booking/flight-booking.routes.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { Routes, RouterModule } from '@angular/router'; -import { FlightSearchComponent } from './flight-search/flight-search.component'; -import { PassengerSearchComponent } from './passenger-search/passenger-search.component'; -import { FlightEditComponent } from './flight-edit/flight-edit.component'; -import { FlightBookingComponent } from './flight-booking.component'; -import { AuthGuard } from '../shared/auth/auth.guard'; -import { LeaveComponentGuard } from '../shared/deactivation/LeaveComponentGuard'; - -const FLIGHT_BOOKING_ROUTES: Routes = [ - { - path: '', - component: FlightBookingComponent, - canActivate: [AuthGuard], - children: [ - { - path: 'flight-search', - component: FlightSearchComponent - }, - { - path: 'passenger-search', - component: PassengerSearchComponent - }, - { - path: 'flight-edit/:id', - component: FlightEditComponent, - canDeactivate: [LeaveComponentGuard] - } - ] - } -]; - -export let FlightBookingRouterModule = RouterModule.forChild( - FLIGHT_BOOKING_ROUTES -); diff --git a/src/app/flight-booking/flight-card/flight-card.component.html b/src/app/flight-booking/flight-card/flight-card.component.html deleted file mode 100644 index 8502674..0000000 --- a/src/app/flight-booking/flight-card/flight-card.component.html +++ /dev/null @@ -1,21 +0,0 @@ -
-

{{ item.from }} - {{ item.to }}

-

Flugnr. #{{ item.id }}

-

Datum: {{ item.date | date: 'dd.MM.yyyy HH:mm' }}

- -

- - - -

-
diff --git a/src/app/flight-booking/flight-card/flight.card.component.ts b/src/app/flight-booking/flight-card/flight.card.component.ts deleted file mode 100644 index 34a8b1d..0000000 --- a/src/app/flight-booking/flight-card/flight.card.component.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core'; -import { Flight } from '../../entities/flight'; - -@Component({ - selector: 'flight-card', - templateUrl: './flight-card.component.html' -}) -export class FlightCardComponent { - @Input() item: Flight; - @Input() selectedItem: Flight; - @Output() selectedItemChange = new EventEmitter(); - - select() { - this.selectedItemChange.emit(this.item); - } -} diff --git a/src/app/flight-booking/flight-edit/flight-edit.component.ts b/src/app/flight-booking/flight-edit/flight-edit.component.ts deleted file mode 100644 index c01310d..0000000 --- a/src/app/flight-booking/flight-edit/flight-edit.component.ts +++ /dev/null @@ -1,57 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; - -@Component({ - template: ` -

Flight Edit!

-

Hier könnte auch der Datensatz mit der Id {{ id }} stehen!

- -
-
- Daten wurden nicht gespeichert! Trotzdem Maske verlassen? -
-
- Ja - Nein -
-
- ` -}) -export class FlightEditComponent implements OnInit { - public id: string; - - constructor(private route: ActivatedRoute) { - route.params.subscribe(p => { - this.id = p['id']; - }); - } - - ngOnInit() {} - - exitWarning = { - show: false, - resolve: null - }; - - decide(decision: boolean) { - this.exitWarning.show = false; - this.exitWarning.resolve(decision); - } - - canDeactivate() { - this.exitWarning.show = true; - return new Promise(resolve => { - this.exitWarning.resolve = resolve; - }); - } -} diff --git a/src/app/flight-booking/flight-search-reactive/flight-search-reactive.component.css b/src/app/flight-booking/flight-search-reactive/flight-search-reactive.component.css deleted file mode 100644 index 58741db..0000000 --- a/src/app/flight-booking/flight-search-reactive/flight-search-reactive.component.css +++ /dev/null @@ -1,11 +0,0 @@ -input.ng-valid { - border-left-style: solid; - border-left-color: forestgreen; - border-left-width: 5px; -} - -input.ng-invalid { - border-left-style: solid; - border-left-color: hotpink; - border-left-width: 5px; -} diff --git a/src/app/flight-booking/flight-search-reactive/flight-search-reactive.component.html b/src/app/flight-booking/flight-search-reactive/flight-search-reactive.component.html deleted file mode 100644 index 2ca31e6..0000000 --- a/src/app/flight-booking/flight-search-reactive/flight-search-reactive.component.html +++ /dev/null @@ -1,94 +0,0 @@ -

Flight Search (Reactive) !

- - - -
-

Dynamisches Formular

-
- - -
- -

Statisches Formular

- -
- - - -
- Validierungsfehler. Bitte prüfen Sie Ihre Eingaben. -
- -
- Diese Stadt wird nicht angefolgen -
- -
- Dieses Feld ist ein Pflichtfeld -
-
- -
- - -
-
- -
-
- - - -
-
- - - - - - -
-
- - - -
- 
-Warenkorb
-----------------------
-{{ selectedFlight | json }}
-
-
diff --git a/src/app/flight-booking/flight-search-reactive/flight-search-reactive.component.ts b/src/app/flight-booking/flight-search-reactive/flight-search-reactive.component.ts deleted file mode 100644 index 9c97d85..0000000 --- a/src/app/flight-booking/flight-search-reactive/flight-search-reactive.component.ts +++ /dev/null @@ -1,76 +0,0 @@ -import { Component } from '@angular/core'; -import { Flight } from '../../entities/flight'; -import { FlightService } from '../services/flight.service'; -import { - FormGroup, - FormBuilder, - Validators, - AbstractControl -} from '@angular/forms'; -import { CityValidatorDirective } from '../../shared/validation/city.validator'; - -@Component({ - selector: 'flight-search-reactive', - templateUrl: 'flight-search-reactive.component.html', - providers: [FlightService], - styleUrls: ['flight-search-reactive.component.css'] -}) -export class FlightSearchReactiveComponent { - public flights: Array = []; - public selectedFlight: Flight; - - public filter: FormGroup; - - public formDesc = []; - - constructor(private flightService: FlightService, private fb: FormBuilder) { - this.formDesc.push({ - label: 'Von', - name: 'from' - }); - - this.formDesc.push({ - label: 'Nach', - name: 'to' - }); - - this.filter = fb.group({ - from: [ - 'Graz', - [ - Validators.required, - Validators.minLength(3), - (c: AbstractControl): any => { - if (c.value != 'Graz' && c.value != 'Hamburg') { - return { - city: true - }; - } - return {}; - } - ] - ], - to: ['Hamburg'] - }); - - this.filter.valueChanges.subscribe(e => { - console.debug('formular geändert', e); - }); - - this.filter.controls['from'].valueChanges.subscribe(e => { - console.debug('from geändert', e); - }); - } - - public select(f: Flight): void { - this.selectedFlight = f; - } - - public search(): void { - var value = this.filter.value; - - this.flightService.find(value.from, value.to); - - // .map(function(resp) { return resp.json() }) - } -} diff --git a/src/app/flight-booking/flight-search/flight-search.component.css b/src/app/flight-booking/flight-search/flight-search.component.css deleted file mode 100644 index 58741db..0000000 --- a/src/app/flight-booking/flight-search/flight-search.component.css +++ /dev/null @@ -1,11 +0,0 @@ -input.ng-valid { - border-left-style: solid; - border-left-color: forestgreen; - border-left-width: 5px; -} - -input.ng-invalid { - border-left-style: solid; - border-left-color: hotpink; - border-left-width: 5px; -} diff --git a/src/app/flight-booking/flight-search/flight-search.component.html b/src/app/flight-booking/flight-search/flight-search.component.html deleted file mode 100644 index 5c6291f..0000000 --- a/src/app/flight-booking/flight-search/flight-search.component.html +++ /dev/null @@ -1,123 +0,0 @@ -

Flight Search!

- - - -
-
- Rund-Flüge sind nicht möglich. -
- -
- - - -
- Validierungsfehler. Bitte prüfen Sie Ihre Eingaben. - 
-            {{ f.controls.from?.errors | json }}
-
-
- -
- Async-City: Die Stadt wird gerade wegen eines Unwetters nicht angeflogen. -
- -
- - Validierung wird ausgeführt. Bitte etwas warten! - -
- -
- Dieses Feld ist ein Pflichtfeld. -
- -
- Diese Stadt wird nicht angeflogen. -
- -
- Bitte erfassen Sie min. 3 Zeichen. -
-
- Bitte nur Buchstaben erfassen. -
-
- -
- - -
-
- -
-
- - - -
-
- - - - -
-
- - - -
- 
-Warenkorb
-----------------------
-{{ selectedFlight | json }}
-
-
- - diff --git a/src/app/flight-booking/flight-search/flight-search.component.ts b/src/app/flight-booking/flight-search/flight-search.component.ts deleted file mode 100644 index b14de22..0000000 --- a/src/app/flight-booking/flight-search/flight-search.component.ts +++ /dev/null @@ -1,56 +0,0 @@ -import { Component } from '@angular/core'; -import { OAuthService } from 'angular-oauth2-oidc'; -import { Flight } from '../../entities/flight'; -import { FlightService } from '../services/flight.service'; - -@Component({ - selector: 'flight-search', - templateUrl: './flight-search.component.html', - styleUrls: ['./flight-search.component.css'] -}) -export class FlightSearchComponent { - public from: string = 'Graz'; - public to: string = ''; - public selectedFlight: Flight; - - constructor( - private flightService: FlightService, - private oauthService: OAuthService - ) { - console.debug('access-token', this.oauthService.getAccessToken()); - } - - // cmp.flights - public get flights() { - return this.flightService.flights; - } - - public select(f: Flight): void { - this.selectedFlight = f; - } - - public search(): void { - this.flightService.find(this.from, this.to); - - // .map(function(resp) { return resp.json() }) - } - - refresh() { - this.oauthService.oidc = true; - - if ( - !this.oauthService.useSilentRefresh && - this.oauthService.responseType === 'code' - ) { - this.oauthService - .refreshToken() - .then(info => console.debug('refresh ok', info)) - .catch(err => console.error('refresh error', err)); - } else { - this.oauthService - .silentRefresh() - .then(info => console.debug('silent refresh ok', info)) - .catch(err => console.error('silent refresh error', err)); - } - } -} diff --git a/src/app/flight-booking/passenger-search/passenger-search.component.ts b/src/app/flight-booking/passenger-search/passenger-search.component.ts deleted file mode 100644 index 794b19b..0000000 --- a/src/app/flight-booking/passenger-search/passenger-search.component.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { OAuthService } from 'angular-oauth2-oidc'; - -@Component({ - template: ` -

PassengerSearch

-

Platzhalter-Seite. Hier könnte auch Ihre Werbung stehen ;-)

-

- ` -}) -export class PassengerSearchComponent implements OnInit { - constructor(private oauthService: OAuthService) {} - ngOnInit() {} - - refresh() { - this.oauthService.silentRefresh(); - } -} diff --git a/src/app/flight-booking/services/flight.service.ts b/src/app/flight-booking/services/flight.service.ts deleted file mode 100644 index 0667830..0000000 --- a/src/app/flight-booking/services/flight.service.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { Injectable, Inject } from '@angular/core'; -import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'; -import { API_URL } from '../../app.config'; -import { Observable } from 'rxjs'; -import { Flight } from '../../entities/flight'; -import { OAuthService } from 'angular-oauth2-oidc'; - -@Injectable() -export class FlightService { - constructor( - private oauthService: OAuthService, - private http: HttpClient - ) {} - - public flights: Array = []; - - find(from: string, to: string): void { - let url = API_URL + '/flight'; - let headers = new HttpHeaders().set('Accept', 'application/json'); - //.set('Authorization', 'Bearer ' + this.oauthService.getAccessToken()); - - let params = new HttpParams().set('from', from).set('to', to); - - this.http - .get(url, { headers, params }) - .subscribe( - flights => { - this.flights = flights; - }, - err => { - console.warn('status', err.status); - } - ); - } -} diff --git a/src/app/flight-history/flight-history.component.ts b/src/app/flight-history/flight-history.component.ts deleted file mode 100644 index 2c7cf8d..0000000 --- a/src/app/flight-history/flight-history.component.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - template: ` -

Flight History

-
    -
  • Graz - Hamburg
    • -
  • Hamburg - Frankfurt
    • -
  • Frankfurt - Graz
    • -
- ` -}) -export class FlightHistoryComponent {} diff --git a/src/app/services/api.service.ts b/src/app/services/api.service.ts index 958f758..38969a6 100644 --- a/src/app/services/api.service.ts +++ b/src/app/services/api.service.ts @@ -2,7 +2,6 @@ import { Injectable } from '@angular/core'; import { HttpClient, HttpErrorResponse } from '@angular/common/http'; import { Observable, throwError } from 'rxjs'; import { catchError, retry } from 'rxjs/operators'; -import { API_URL } from '../app.config'; import { ApiResponse } from '../entities/api-response'; @Injectable({ @@ -12,11 +11,11 @@ export class ApiService { constructor(private http: HttpClient) {} call( - relativeUrl: string, + url: string, params?: { [param: string]: string } ): Observable> { return this.http - .get>(API_URL + relativeUrl, { params }) + .get>(url, { params }) .pipe( retry(3), // retry a failed request up to 3 times catchError(this.handleError) // then handle the error diff --git a/src/app/travel-list/travel-list.component.ts b/src/app/travel-list/travel-list.component.ts index 2683213..c809984 100644 --- a/src/app/travel-list/travel-list.component.ts +++ b/src/app/travel-list/travel-list.component.ts @@ -8,14 +8,7 @@ import { import { ActivatedRoute } from '@angular/router'; import { MatPaginator } from '@angular/material/paginator'; import { MatSort } from '@angular/material/sort'; -import { MatTableDataSource } from '@angular/material/table'; -import { - debounceTime, - distinctUntilChanged, - startWith, - tap, - delay, -} from 'rxjs/operators'; +import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators'; import { merge, fromEvent } from 'rxjs'; import { ApiService } from '../services/api.service'; import { TravelsDataSource } from './travel-list.datasource'; @@ -28,7 +21,13 @@ import { TravelsDataSource } from './travel-list.datasource'; export class TravelListComponent implements OnInit, AfterViewInit { dataSource: TravelsDataSource; - displayedColumns = ['driver', 'departureDate', 'origin', 'destination', 'description']; + displayedColumns = [ + 'driver', + 'departureDate', + 'origin', + 'destination', + 'description', + ]; @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; @@ -36,10 +35,7 @@ export class TravelListComponent implements OnInit, AfterViewInit { @ViewChild('input', { static: true }) input: ElementRef; - constructor( - private route: ActivatedRoute, - private apiService: ApiService - ) {} + constructor(private route: ActivatedRoute, private apiService: ApiService) {} ngOnInit(): void { this.dataSource = new TravelsDataSource(this.apiService); @@ -69,9 +65,10 @@ export class TravelListComponent implements OnInit, AfterViewInit { loadTravels(): void { this.dataSource.loadTravels( this.input.nativeElement.value, - this.sort.direction, + this.sort.active, + this.sort.direction === 'asc', this.paginator.pageIndex, - this.paginator.pageSize + this.paginator.pageSize ? this.paginator.pageSize : 3 ); } } diff --git a/src/app/travel-list/travel-list.datasource.ts b/src/app/travel-list/travel-list.datasource.ts index e0346f8..d75e21a 100644 --- a/src/app/travel-list/travel-list.datasource.ts +++ b/src/app/travel-list/travel-list.datasource.ts @@ -1,6 +1,7 @@ import { CollectionViewer, DataSource } from '@angular/cdk/collections'; import { Observable, BehaviorSubject, of } from 'rxjs'; import { catchError, finalize } from 'rxjs/operators'; +import { PUBLIC_API_URL } from '../app.config'; import { ApiResponse } from '../entities/api-response'; import { Travel } from '../entities/travel'; import { TravelList } from '../entities/travel-list'; @@ -16,14 +17,21 @@ export class TravelsDataSource implements DataSource { loadTravels( filter: string, - sortDirection: string, + sortColumn: string, + sortAscending: boolean, pageIndex: number, pageSize: number ): void { this.loadingSubject.next(true); this.apiService - .call('/travel/list', { filter }) + .call(PUBLIC_API_URL + '/list', { + filter, + sortColumn, + sortAscending: String(sortAscending), + pageIndex: String(pageIndex), + pageSize: String(pageSize), + }) .pipe( catchError(() => of([])), finalize(() => this.loadingSubject.next(false))