Create travel

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,

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

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<Travel>(PUBLIC_API_URL + '/travel', { travelId })
+      this.apiService.getTravel(travelId)
         .subscribe(res => {
           if (res.success) {
             this.travel = res.data;

src/app/pages/home/home.component.html

@@ -1,10 +1,10 @@
 <mat-card>
   <mat-card-title>Mis viajes</mat-card-title>
   <app-list *ngIf="logged" (rowClick)="travelClicked($event)" [displayedColumns]="displayedColumns"
-    [url]="urlMyTravels"></app-list>
+    [apiCall]="myTravelsApiCall"></app-list>
   <mat-card-content *ngIf="!logged">Logueate para ver tus viajes</mat-card-content>
 </mat-card>
 
 <h3>Viajes disponibles</h3>
-<app-list (rowClick)="travelClicked($event)" [displayedColumns]="displayedColumns" [url]="urlTravels">
+<app-list (rowClick)="travelClicked($event)" [displayedColumns]="displayedColumns" [apiCall]="travelsApiCall">
 </app-list>

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,

src/app/pages/new-travel/new-travel.component.html

@@ -1,4 +1,4 @@
 <div>
     <h1>Nuevo viaje</h1>
-    <app-travel-form [travel]="travel"></app-travel-form>
+    <app-travel-form (travelSubmitted)="createTravel($event)" [travel]="travel"></app-travel-form>
 </div>

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);
+      }
+    });
+  }
 }

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<Travel>(PUBLIC_API_URL + '/travel', { travelId: this.travelId })
+      this.apiService.getTravel(this.travelId)
         .subscribe(res => {
           if (res.success) {
             this.travel = res.data;

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<T> = (params?: { [param: string]: any }) => (Observable<ApiResponse<ListDto<T>>>);
 
 @Injectable({
   providedIn: 'root',
@@ -10,7 +15,26 @@ import { ApiResponse } from '../entities/api-response';
 export class ApiService {
   constructor(private http: HttpClient) {}
 
-  call<T>(
+  // 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<Travel>(PUBLIC_API_URL + '/travel', { travelId });
+  }
+
+  getTravels = (params?: { [param: string]: any }) => {
+    return this.callApi<ListDto<Travel>>(PUBLIC_API_URL + '/list', params);
+  }
+
+  getMyTravels = (params?: { [param: string]: any }) => {
+    return this.callApi<ListDto<Travel>>(TRAVEL_API_URL + '/listusertravels', params);
+  }
+
+  createTravel = (travel: Travel) => {
+    return this.callApi<void>(TRAVEL_API_URL + '/create', { travel });
+  }
+
+  private callApi<T>(
     url: string,
     params?: { [param: string]: any }
   ): Observable<ApiResponse<T>> {

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<T> implements OnInit, AfterViewInit {
   @Output() rowClick: EventEmitter<T> = new EventEmitter();
 
   @Input() displayedColumns: string[];
-  @Input() url: string;
+  @Input() apiCall: ApiCall<T>;
 
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
   @ViewChild(MatSort, { static: true }) sort: MatSort;
@@ -37,7 +36,7 @@ export class ListComponent<T> 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();
   }
 

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<T> implements DataSource<T> {
   private listSubject = new BehaviorSubject<T[]>([]);
@@ -11,7 +11,7 @@ export class ListDataSource<T> implements DataSource<T> {
   public loading$ = this.loadingSubject.asObservable();
   public total = 0;
 
-  constructor(private apiService: ApiService, private url: string) { }
+  constructor(private apiCall: ApiCall<T>) { }
 
   load(
     filter: string,
@@ -22,7 +22,7 @@ export class ListDataSource<T> implements DataSource<T> {
   ): void {
     this.loadingSubject.next(true);
 
-    this.apiService.call<ListDto<T>>(this.url, {
+    this.apiCall({
       filter,
       sortColumn,
       sortAscending,

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<Travel> = 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);
   }
 }