From 1ffb87c90d8bbc79ddf8b24477c4eb6cee4afb4e Mon Sep 17 00:00:00 2001 From: Eneko Nieto Date: Mon, 1 Feb 2021 00:26:45 +0100 Subject: [PATCH] Create travel --- src/app/app.module.ts | 10 ++++++- src/app/app.routes.ts | 10 +++---- .../edit-travel/edit-travel.component.ts | 2 +- src/app/pages/home/home.component.html | 4 +-- src/app/pages/home/home.component.ts | 4 +-- .../new-travel/new-travel.component.html | 2 +- .../pages/new-travel/new-travel.component.ts | 19 ++++++++++---- src/app/pages/travel/travel.component.ts | 3 +-- src/app/services/api.service.ts | 26 ++++++++++++++++++- src/app/views/list/list.component.ts | 13 +++++----- src/app/views/list/list.datasource.ts | 6 ++--- .../travel-form/travel-form.component.ts | 5 +++- 12 files changed, 73 insertions(+), 31 deletions(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f26ae28..4456eff 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -25,10 +25,18 @@ import { NewTravelComponent } from './pages/new-travel/new-travel.component'; import { MatDatepickerModule } from '@angular/material/datepicker'; import { NgxMatMomentModule } from '@angular-material-components/moment-adapter'; +const ROUTING_OPTIONS: ExtraOptions = { + // preloadingStrategy: CustomPreloadingStrategy, + useHash: false, + initialNavigation: 'enabled', + relativeLinkResolution: 'legacy' + }; + + @NgModule({ imports: [ BrowserModule, - RouterModule.forRoot(APP_ROUTES), + RouterModule.forRoot(APP_ROUTES, ROUTING_OPTIONS), FormsModule, ReactiveFormsModule, HttpClientModule, diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 65386d4..3f2002c 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -5,11 +5,11 @@ import { NewTravelComponent } from './pages/new-travel/new-travel.component'; import { TravelComponent } from './pages/travel/travel.component'; export let APP_ROUTES: Routes = [ - // { - // path: '/', - // redirectTo: 'home', - // pathMatch: 'full' - // }, + { + path: '', + redirectTo: 'home', + pathMatch: 'full' + }, { path: 'home', component: HomeComponent diff --git a/src/app/pages/edit-travel/edit-travel.component.ts b/src/app/pages/edit-travel/edit-travel.component.ts index d791b37..07d8043 100644 --- a/src/app/pages/edit-travel/edit-travel.component.ts +++ b/src/app/pages/edit-travel/edit-travel.component.ts @@ -24,7 +24,7 @@ export class EditTravelComponent implements OnInit { this.route.queryParams.subscribe(params => { const travelId = this.route.snapshot.paramMap.get('id') as unknown as TravelId; - this.apiService.call(PUBLIC_API_URL + '/travel', { travelId }) + this.apiService.getTravel(travelId) .subscribe(res => { if (res.success) { this.travel = res.data; diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html index f2223fa..bb5a243 100644 --- a/src/app/pages/home/home.component.html +++ b/src/app/pages/home/home.component.html @@ -1,10 +1,10 @@ Mis viajes + [apiCall]="myTravelsApiCall"> Logueate para ver tus viajes

Viajes disponibles

- + \ No newline at end of file diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts index bf0a9f2..fc9fb15 100644 --- a/src/app/pages/home/home.component.ts +++ b/src/app/pages/home/home.component.ts @@ -21,8 +21,8 @@ export class HomeComponent implements OnInit { 'destination', 'description', ]; - urlTravels = 'http://localhost:8080/api/public/list'; - urlMyTravels = 'http://localhost:8080/api/travel/listusertravels'; + travelsApiCall = this.apiService.getTravels; + myTravelsApiCall = this.apiService.getMyTravels; constructor( private route: ActivatedRoute, diff --git a/src/app/pages/new-travel/new-travel.component.html b/src/app/pages/new-travel/new-travel.component.html index f875e13..9226192 100644 --- a/src/app/pages/new-travel/new-travel.component.html +++ b/src/app/pages/new-travel/new-travel.component.html @@ -1,4 +1,4 @@

Nuevo viaje

- +
\ No newline at end of file diff --git a/src/app/pages/new-travel/new-travel.component.ts b/src/app/pages/new-travel/new-travel.component.ts index daedd30..a398339 100644 --- a/src/app/pages/new-travel/new-travel.component.ts +++ b/src/app/pages/new-travel/new-travel.component.ts @@ -1,8 +1,6 @@ import { Component, OnInit, ViewChild } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; import { TravelFormComponent } from 'src/app/views/travel-form/travel-form.component'; -import { PUBLIC_API_URL } from '../../app.config'; -import { Travel, TravelId } from '../../entities/travel'; +import { Travel } from '../../entities/travel'; import { ApiService } from '../../services/api.service'; @Component({ @@ -16,11 +14,22 @@ export class NewTravelComponent implements OnInit { @ViewChild(TravelFormComponent, { static: true }) form: TravelFormComponent; constructor( - private apiService: ApiService, - private route: ActivatedRoute + private apiService: ApiService ) { } ngOnInit(): void { this.travel = new Travel(); } + + createTravel(travel: Travel): void { + this.apiService.createTravel(travel) + .subscribe(res => { + if (res.success) { + console.log('Travel created'); + } + else { + console.error('Error creating travel: ' + res.error); + } + }); + } } diff --git a/src/app/pages/travel/travel.component.ts b/src/app/pages/travel/travel.component.ts index c385666..3bd002e 100644 --- a/src/app/pages/travel/travel.component.ts +++ b/src/app/pages/travel/travel.component.ts @@ -1,6 +1,5 @@ import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; -import { PUBLIC_API_URL } from '../../app.config'; import { Travel, TravelId } from '../../entities/travel'; import { ApiService } from '../../services/api.service'; @@ -23,7 +22,7 @@ export class TravelComponent implements OnInit { this.route.queryParams.subscribe(params => { this.travelId = this.route.snapshot.paramMap.get('id') as unknown as TravelId; - this.apiService.call(PUBLIC_API_URL + '/travel', { travelId: this.travelId }) + this.apiService.getTravel(this.travelId) .subscribe(res => { if (res.success) { this.travel = res.data; diff --git a/src/app/services/api.service.ts b/src/app/services/api.service.ts index 1d47790..9756f9a 100644 --- a/src/app/services/api.service.ts +++ b/src/app/services/api.service.ts @@ -3,6 +3,11 @@ import { HttpClient, HttpErrorResponse } from '@angular/common/http'; import { Observable, throwError } from 'rxjs'; import { catchError, retry } from 'rxjs/operators'; import { ApiResponse } from '../entities/api-response'; +import { Travel, TravelId } from '../entities/travel'; +import { PUBLIC_API_URL, TRAVEL_API_URL } from '../app.config'; +import { ListDto } from '../entities/list-dto'; + +export type ApiCall = (params?: { [param: string]: any }) => (Observable>>); @Injectable({ providedIn: 'root', @@ -10,7 +15,26 @@ import { ApiResponse } from '../entities/api-response'; export class ApiService { constructor(private http: HttpClient) {} - call( + // Las llamadas al API son arrow-functions para capturar el parámetro this en la definición + // y no en la ejecución. + + getTravel = (travelId: TravelId) => { + return this.callApi(PUBLIC_API_URL + '/travel', { travelId }); + } + + getTravels = (params?: { [param: string]: any }) => { + return this.callApi>(PUBLIC_API_URL + '/list', params); + } + + getMyTravels = (params?: { [param: string]: any }) => { + return this.callApi>(TRAVEL_API_URL + '/listusertravels', params); + } + + createTravel = (travel: Travel) => { + return this.callApi(TRAVEL_API_URL + '/create', { travel }); + } + + private callApi( url: string, params?: { [param: string]: any } ): Observable> { diff --git a/src/app/views/list/list.component.ts b/src/app/views/list/list.component.ts index f10a698..bce4c3b 100644 --- a/src/app/views/list/list.component.ts +++ b/src/app/views/list/list.component.ts @@ -6,16 +6,15 @@ import { Input, OnInit, Output, - ViewChild, + ViewChild } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; import { MatPaginator } from '@angular/material/paginator'; import { MatSort } from '@angular/material/sort'; +import { ActivatedRoute } from '@angular/router'; +import { fromEvent, merge } from 'rxjs'; import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators'; -import { merge, fromEvent, Observable, Subscriber } from 'rxjs'; -import { ApiService } from '../../services/api.service'; +import { ApiCall, ApiService } from '../../services/api.service'; import { ListDataSource } from './list.datasource'; -import { emit } from 'process'; @Component({ selector: 'app-list', @@ -28,7 +27,7 @@ export class ListComponent implements OnInit, AfterViewInit { @Output() rowClick: EventEmitter = new EventEmitter(); @Input() displayedColumns: string[]; - @Input() url: string; + @Input() apiCall: ApiCall; @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; @ViewChild(MatSort, { static: true }) sort: MatSort; @@ -37,7 +36,7 @@ export class ListComponent implements OnInit, AfterViewInit { constructor(private route: ActivatedRoute, private apiService: ApiService) {} ngOnInit(): void { - this.dataSource = new ListDataSource(this.apiService, this.url); + this.dataSource = new ListDataSource(this.apiCall); this.load(); } diff --git a/src/app/views/list/list.datasource.ts b/src/app/views/list/list.datasource.ts index e0e6167..60a85dc 100644 --- a/src/app/views/list/list.datasource.ts +++ b/src/app/views/list/list.datasource.ts @@ -3,7 +3,7 @@ import { Observable, BehaviorSubject, of, throwError } from 'rxjs'; import { catchError, finalize } from 'rxjs/operators'; import { ApiResponse } from '../../entities/api-response'; import { ListDto } from '../../entities/list-dto'; -import { ApiService } from '../../services/api.service'; +import { ApiCall, ApiService } from '../../services/api.service'; export class ListDataSource implements DataSource { private listSubject = new BehaviorSubject([]); @@ -11,7 +11,7 @@ export class ListDataSource implements DataSource { public loading$ = this.loadingSubject.asObservable(); public total = 0; - constructor(private apiService: ApiService, private url: string) { } + constructor(private apiCall: ApiCall) { } load( filter: string, @@ -22,7 +22,7 @@ export class ListDataSource implements DataSource { ): void { this.loadingSubject.next(true); - this.apiService.call>(this.url, { + this.apiCall({ filter, sortColumn, sortAscending, diff --git a/src/app/views/travel-form/travel-form.component.ts b/src/app/views/travel-form/travel-form.component.ts index 343aacc..e6060bb 100644 --- a/src/app/views/travel-form/travel-form.component.ts +++ b/src/app/views/travel-form/travel-form.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { Travel } from 'src/app/entities/travel'; @Component({ @@ -7,6 +7,8 @@ import { Travel } from 'src/app/entities/travel'; styleUrls: ['./travel-form.component.css'] }) export class TravelFormComponent implements OnInit { + @Output() travelSubmitted: EventEmitter = new EventEmitter(); + @Input() travel: Travel; submitted = false; minDate = new Date(); @@ -18,5 +20,6 @@ export class TravelFormComponent implements OnInit { onSubmit(): void { this.submitted = true; + this.travelSubmitted.emit(this.travel); } }