From dd379be164e9dfdf99768a50ce80aaa30eee7d56 Mon Sep 17 00:00:00 2001
From: Eneko Nieto <eneko@baturamobile.com>
Date: Sat, 30 Jan 2021 00:34:07 +0100
Subject: [PATCH] Beginning of travel form

---
 src/app/app.module.ts                         | 20 ++++++---
 src/app/app.routes.ts                         | 13 +++++-
 src/app/auth.config.ts                        |  2 +-
 src/app/entities/travel.ts                    |  8 ++--
 src/app/entities/{user.ts => user-info.ts}    |  2 +-
 .../edit-travel/edit-travel.component.css}    |  0
 .../edit-travel/edit-travel.component.html    |  4 ++
 .../edit-travel/edit-travel.component.spec.ts | 25 +++++++++++
 .../edit-travel/edit-travel.component.ts      | 35 +++++++++++++++
 src/app/{ => pages}/home/home.component.html  |  0
 src/app/{ => pages}/home/home.component.ts    |  4 +-
 .../{ => pages}/travel/travel.component.css   |  0
 .../{ => pages}/travel/travel.component.html  |  4 +-
 .../travel/travel.component.spec.ts           |  0
 .../{ => pages}/travel/travel.component.ts    |  6 +--
 src/app/views/header/header.component.css     |  0
 .../{ => views}/header/header.component.html  |  0
 .../header/header.component.spec.ts           |  0
 .../{ => views}/header/header.component.ts    |  2 +-
 src/app/{ => views}/list/list.component.css   |  0
 src/app/{ => views}/list/list.component.html  |  0
 src/app/{ => views}/list/list.component.ts    |  2 +-
 src/app/{ => views}/list/list.datasource.ts   | 38 +++++++++-------
 .../travel-form/travel-form.component.css     |  0
 .../travel-form/travel-form.component.html    | 44 +++++++++++++++++++
 .../travel-form/travel-form.component.spec.ts | 25 +++++++++++
 .../travel-form/travel-form.component.ts      | 21 +++++++++
 27 files changed, 215 insertions(+), 40 deletions(-)
 rename src/app/entities/{user.ts => user-info.ts} (76%)
 rename src/app/{header/header.component.css => pages/edit-travel/edit-travel.component.css} (100%)
 create mode 100644 src/app/pages/edit-travel/edit-travel.component.html
 create mode 100644 src/app/pages/edit-travel/edit-travel.component.spec.ts
 create mode 100644 src/app/pages/edit-travel/edit-travel.component.ts
 rename src/app/{ => pages}/home/home.component.html (100%)
 rename src/app/{ => pages}/home/home.component.ts (92%)
 rename src/app/{ => pages}/travel/travel.component.css (100%)
 rename src/app/{ => pages}/travel/travel.component.html (64%)
 rename src/app/{ => pages}/travel/travel.component.spec.ts (100%)
 rename src/app/{ => pages}/travel/travel.component.ts (84%)
 create mode 100644 src/app/views/header/header.component.css
 rename src/app/{ => views}/header/header.component.html (100%)
 rename src/app/{ => views}/header/header.component.spec.ts (100%)
 rename src/app/{ => views}/header/header.component.ts (95%)
 rename src/app/{ => views}/list/list.component.css (100%)
 rename src/app/{ => views}/list/list.component.html (100%)
 rename src/app/{ => views}/list/list.component.ts (97%)
 rename src/app/{ => views}/list/list.datasource.ts (55%)
 create mode 100644 src/app/views/travel-form/travel-form.component.css
 create mode 100644 src/app/views/travel-form/travel-form.component.html
 create mode 100644 src/app/views/travel-form/travel-form.component.spec.ts
 create mode 100644 src/app/views/travel-form/travel-form.component.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index b96499f..31d208b 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -3,20 +3,24 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { OAuthModule } from 'angular-oauth2-oidc';
 import { HttpClientModule } from '@angular/common/http';
+import { RouterModule, ExtraOptions } from '@angular/router';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { AppComponent } from './app.component';
 import { APP_ROUTES } from './app.routes';
 import { USER_API_URL, TRAVEL_API_URL } from './app.config';
-import { HomeComponent } from './home/home.component';
-import { TravelComponent } from './travel/travel.component';
 import { SharedModule } from './shared/shared.module';
-import { RouterModule, ExtraOptions } from '@angular/router';
 import { useHash } from '../flags';
-import { HeaderComponent } from './header/header.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { ListComponent } from './list/list.component';
 import { MaterialModule } from './material/material.module';
 
+import { HomeComponent } from './pages/home/home.component';
+import { TravelComponent } from './pages/travel/travel.component';
+import { EditTravelComponent } from './pages/edit-travel/edit-travel.component';
+
+import { HeaderComponent } from './views/header/header.component';
+import { ListComponent } from './views/list/list.component';
+import { TravelFormComponent } from './views/travel-form/travel-form.component';
+
 const ROUTING_OPTIONS: ExtraOptions = {
   // preloadingStrategy: CustomPreloadingStrategy,
   useHash,
@@ -44,8 +48,10 @@ const ROUTING_OPTIONS: ExtraOptions = {
     AppComponent,
     HomeComponent,
     TravelComponent,
+    EditTravelComponent,
     HeaderComponent,
-    ListComponent
+    ListComponent,
+    TravelFormComponent
   ],
   providers: [
     // (useHash) ? { provide: LocationStrategy, useClass: HashLocationStrategy } : [],
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index b447671..235b235 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,6 +1,7 @@
 import { Routes } from '@angular/router';
-import { HomeComponent } from './home/home.component';
-import { TravelComponent } from './travel/travel.component';
+import { EditTravelComponent } from './pages/edit-travel/edit-travel.component';
+import { HomeComponent } from './pages/home/home.component';
+import { TravelComponent } from './pages/travel/travel.component';
 
 export let APP_ROUTES: Routes = [
   {
@@ -16,6 +17,14 @@ export let APP_ROUTES: Routes = [
     path: 'travel/:id',
     component: TravelComponent
   },
+  {
+    path: 'travel/new',
+    component: EditTravelComponent
+  },
+  {
+    path: 'travel/:id/edit',
+    component: EditTravelComponent
+  },
   {
     path: '**',
     redirectTo: 'home'
diff --git a/src/app/auth.config.ts b/src/app/auth.config.ts
index 3416eab..be83559 100644
--- a/src/app/auth.config.ts
+++ b/src/app/auth.config.ts
@@ -37,7 +37,7 @@ export const authConfig: AuthConfig = {
 
   useSilentRefresh: useSilentRefreshForCodeFlow,
 
-  showDebugInformation: true,
+  showDebugInformation: false,
 
   sessionChecksEnabled: true,
   sessionCheckIntervall: 10000,
diff --git a/src/app/entities/travel.ts b/src/app/entities/travel.ts
index 3a00b50..5c51427 100644
--- a/src/app/entities/travel.ts
+++ b/src/app/entities/travel.ts
@@ -1,15 +1,15 @@
-import { User } from './user';
+import { UserInfo } from './user-info';
 
 export type TravelId = number;
 
 export interface Travel {
   id: Travel;
-  driver: User;
-  travelers: User[];
+  driverInfo: UserInfo;
+  travelersInfo: UserInfo[];
   departureDate: string;
   origin: string;
   destination: string;
-  availablePlaces: number;
+  places: number;
   description?: string;
   matrixRoomId: string;
 }
diff --git a/src/app/entities/user.ts b/src/app/entities/user-info.ts
similarity index 76%
rename from src/app/entities/user.ts
rename to src/app/entities/user-info.ts
index 5ec140a..0f268bf 100644
--- a/src/app/entities/user.ts
+++ b/src/app/entities/user-info.ts
@@ -1,6 +1,6 @@
 export type UserId = string;
 
-export interface User {
+export interface UserInfo {
     id: UserId;
     matrixId?: string;
     name: string;
diff --git a/src/app/header/header.component.css b/src/app/pages/edit-travel/edit-travel.component.css
similarity index 100%
rename from src/app/header/header.component.css
rename to src/app/pages/edit-travel/edit-travel.component.css
diff --git a/src/app/pages/edit-travel/edit-travel.component.html b/src/app/pages/edit-travel/edit-travel.component.html
new file mode 100644
index 0000000..3f4aad7
--- /dev/null
+++ b/src/app/pages/edit-travel/edit-travel.component.html
@@ -0,0 +1,4 @@
+<div>
+    <h1>Editar</h1>
+
+</div>
\ No newline at end of file
diff --git a/src/app/pages/edit-travel/edit-travel.component.spec.ts b/src/app/pages/edit-travel/edit-travel.component.spec.ts
new file mode 100644
index 0000000..928787b
--- /dev/null
+++ b/src/app/pages/edit-travel/edit-travel.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditTravelComponent } from './edit-travel.component';
+
+describe('EditTravelComponent', () => {
+  let component: EditTravelComponent;
+  let fixture: ComponentFixture<EditTravelComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ EditTravelComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditTravelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/pages/edit-travel/edit-travel.component.ts b/src/app/pages/edit-travel/edit-travel.component.ts
new file mode 100644
index 0000000..295e65b
--- /dev/null
+++ b/src/app/pages/edit-travel/edit-travel.component.ts
@@ -0,0 +1,35 @@
+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';
+
+@Component({
+  selector: 'app-edit-travel',
+  templateUrl: './edit-travel.component.html',
+  styleUrls: ['./edit-travel.component.css']
+})
+export class EditTravelComponent implements OnInit {
+  travel: Travel;
+
+  constructor(
+    private apiService: ApiService,
+    private route: ActivatedRoute
+  ) { }
+
+  ngOnInit(): void {
+    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 })
+        .subscribe(res => {
+          if (res.success) {
+            this.travel = res.data;
+          }
+          else {
+            console.error('Error getting travel ' + travelId + ': ' + res.error);
+          }
+        });
+    });
+  }
+}
diff --git a/src/app/home/home.component.html b/src/app/pages/home/home.component.html
similarity index 100%
rename from src/app/home/home.component.html
rename to src/app/pages/home/home.component.html
diff --git a/src/app/home/home.component.ts b/src/app/pages/home/home.component.ts
similarity index 92%
rename from src/app/home/home.component.ts
rename to src/app/pages/home/home.component.ts
index 3fc832c..bf0a9f2 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/pages/home/home.component.ts
@@ -1,8 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { OAuthService } from 'angular-oauth2-oidc';
 import { ActivatedRoute, Router } from '@angular/router';
-import { ApiService } from '../services/api.service';
-import { Travel } from '../entities/travel';
+import { ApiService } from '../../services/api.service';
+import { Travel } from '../../entities/travel';
 
 @Component({
   templateUrl: './home.component.html',
diff --git a/src/app/travel/travel.component.css b/src/app/pages/travel/travel.component.css
similarity index 100%
rename from src/app/travel/travel.component.css
rename to src/app/pages/travel/travel.component.css
diff --git a/src/app/travel/travel.component.html b/src/app/pages/travel/travel.component.html
similarity index 64%
rename from src/app/travel/travel.component.html
rename to src/app/pages/travel/travel.component.html
index 5c60dfb..046cea3 100644
--- a/src/app/travel/travel.component.html
+++ b/src/app/pages/travel/travel.component.html
@@ -3,11 +3,11 @@
         {{ travel.origin }} - {{ travel.destination }}
     </mat-card-title>
     <mat-card-subtitle>
-        {{ travel.departureDate }} Plazas libres: {{ travel.availablePlaces }}
+        {{ travel.departureDate }} Plazas: {{ travel.places - travel.travelersInfo.length }}/{{ travel.places }}
     </mat-card-subtitle>
     <mat-card-content>
         <p>ID: {{ travel.id }}</p>
-        <p>Conductor: {{ travel.driver.name }}</p><br>
+        <p>Conductor: {{ travel.driverInfo.name }}</p><br>
         <p>{{ travel.description }}</p>
     </mat-card-content>
 </mat-card>
\ No newline at end of file
diff --git a/src/app/travel/travel.component.spec.ts b/src/app/pages/travel/travel.component.spec.ts
similarity index 100%
rename from src/app/travel/travel.component.spec.ts
rename to src/app/pages/travel/travel.component.spec.ts
diff --git a/src/app/travel/travel.component.ts b/src/app/pages/travel/travel.component.ts
similarity index 84%
rename from src/app/travel/travel.component.ts
rename to src/app/pages/travel/travel.component.ts
index 8e0687d..95ff5c6 100644
--- a/src/app/travel/travel.component.ts
+++ b/src/app/pages/travel/travel.component.ts
@@ -1,8 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { Router, ActivatedRoute, ParamMap } from '@angular/router';
-import { PUBLIC_API_URL } from '../app.config';
-import { Travel, TravelId } from '../entities/travel';
-import { ApiService } from '../services/api.service';
+import { PUBLIC_API_URL } from '../../app.config';
+import { Travel, TravelId } from '../../entities/travel';
+import { ApiService } from '../../services/api.service';
 
 @Component({
   selector: 'app-travel',
diff --git a/src/app/views/header/header.component.css b/src/app/views/header/header.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/header/header.component.html b/src/app/views/header/header.component.html
similarity index 100%
rename from src/app/header/header.component.html
rename to src/app/views/header/header.component.html
diff --git a/src/app/header/header.component.spec.ts b/src/app/views/header/header.component.spec.ts
similarity index 100%
rename from src/app/header/header.component.spec.ts
rename to src/app/views/header/header.component.spec.ts
diff --git a/src/app/header/header.component.ts b/src/app/views/header/header.component.ts
similarity index 95%
rename from src/app/header/header.component.ts
rename to src/app/views/header/header.component.ts
index 007cc63..b8f8f11 100644
--- a/src/app/header/header.component.ts
+++ b/src/app/views/header/header.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { OAuthService } from 'angular-oauth2-oidc';
-import { authConfig } from '../auth.config';
+import { authConfig } from '../../auth.config';
 
 @Component({
   selector: 'app-header',
diff --git a/src/app/list/list.component.css b/src/app/views/list/list.component.css
similarity index 100%
rename from src/app/list/list.component.css
rename to src/app/views/list/list.component.css
diff --git a/src/app/list/list.component.html b/src/app/views/list/list.component.html
similarity index 100%
rename from src/app/list/list.component.html
rename to src/app/views/list/list.component.html
diff --git a/src/app/list/list.component.ts b/src/app/views/list/list.component.ts
similarity index 97%
rename from src/app/list/list.component.ts
rename to src/app/views/list/list.component.ts
index 937fb6e..f10a698 100644
--- a/src/app/list/list.component.ts
+++ b/src/app/views/list/list.component.ts
@@ -13,7 +13,7 @@ import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
 import { merge, fromEvent, Observable, Subscriber } from 'rxjs';
-import { ApiService } from '../services/api.service';
+import { ApiService } from '../../services/api.service';
 import { ListDataSource } from './list.datasource';
 import { emit } from 'process';
 
diff --git a/src/app/list/list.datasource.ts b/src/app/views/list/list.datasource.ts
similarity index 55%
rename from src/app/list/list.datasource.ts
rename to src/app/views/list/list.datasource.ts
index b52b062..e0e6167 100644
--- a/src/app/list/list.datasource.ts
+++ b/src/app/views/list/list.datasource.ts
@@ -1,9 +1,9 @@
 import { CollectionViewer, DataSource } from '@angular/cdk/collections';
-import { Observable, BehaviorSubject, of } from 'rxjs';
+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 { ApiResponse } from '../../entities/api-response';
+import { ListDto } from '../../entities/list-dto';
+import { 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 apiService: ApiService, private url: string) { }
 
   load(
     filter: string,
@@ -23,21 +23,27 @@ export class ListDataSource<T> implements DataSource<T> {
     this.loadingSubject.next(true);
 
     this.apiService.call<ListDto<T>>(this.url, {
-        filter,
-        sortColumn,
-        sortAscending,
-        pageIndex,
-        pageSize,
-      })
+      filter,
+      sortColumn,
+      sortAscending,
+      pageIndex,
+      pageSize,
+    })
       .pipe(
-        catchError(() => of([])),
+        catchError(() => throwError('Error al obtener datos de la lista.')),
         finalize(() => this.loadingSubject.next(false))
       )
       .subscribe((res) => {
-        const listDto = (res as ApiResponse<ListDto<T>>).data;
-        const list = listDto.list;
-        this.total = listDto.total;
-        this.listSubject.next(list);
+        const apiResponse = res as ApiResponse<ListDto<T>>;
+        if (apiResponse.success) {
+          const listDto = (res as ApiResponse<ListDto<T>>).data;
+          const list = listDto.list;
+          this.total = listDto.total;
+          this.listSubject.next(list);
+        }
+        else {
+          console.error('Error en list.datasource.ts: ' + apiResponse.error.code + ' ' + apiResponse.error.msg);
+        }
       });
   }
 
diff --git a/src/app/views/travel-form/travel-form.component.css b/src/app/views/travel-form/travel-form.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/views/travel-form/travel-form.component.html b/src/app/views/travel-form/travel-form.component.html
new file mode 100644
index 0000000..c7b0a20
--- /dev/null
+++ b/src/app/views/travel-form/travel-form.component.html
@@ -0,0 +1,44 @@
+<form (ngSubmit)="onSubmit()" #travelForm="ngForm">
+    <div>
+        <label for="origin">Origen</label>
+        <input type="text" id="origin" required [(ngModel)]="travel.origin" name="origin" #origin="ngModel">
+        <div [hidden]="origin.valid || origin.pristine" class="alert alert-danger">
+            El origen es obligatorio
+        </div>
+    </div>
+    
+    <div>
+        <label for="destination">Destino</label>
+        <input type="text" id="destination" required [(ngModel)]="travel.destination" name="destination" #destination="ngModel">
+        <div [hidden]="destination.valid || destination.pristine" class="alert alert-danger">
+            El destino es obligatorio
+        </div>
+    </div>
+    
+    <div>
+        <label for="places">Plazas</label>
+        <input type="number" id="places" required [(ngModel)]="travel.places" name="places" #places="ngModel">
+        <div [hidden]="places.valid || places.pristine" class="alert alert-danger">
+            El destino es obligatorio
+        </div>
+    </div>
+    
+    <div>
+        <label for="description">Descripción</label>
+        <input type="text" id="description" required [(ngModel)]="travel.description" name="description" #description="ngModel">
+    </div>
+
+
+
+    <!-- <div>
+        <label for="power">Hero Power</label>
+        <select id="power" required [(ngModel)]="model.power" name="power" #power="ngModel">
+            <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
+        </select>
+        <div [hidden]="power.valid || power.pristine" class="alert alert-danger">
+            Power is required
+        </div>
+    </div> -->
+
+    <button type="submit" class="btn btn-success" [disabled]="!travelForm.form.valid">Submit</button>
+</form>
\ No newline at end of file
diff --git a/src/app/views/travel-form/travel-form.component.spec.ts b/src/app/views/travel-form/travel-form.component.spec.ts
new file mode 100644
index 0000000..a74a42d
--- /dev/null
+++ b/src/app/views/travel-form/travel-form.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TravelFormComponent } from './travel-form.component';
+
+describe('TravelFormComponent', () => {
+  let component: TravelFormComponent;
+  let fixture: ComponentFixture<TravelFormComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TravelFormComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TravelFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/views/travel-form/travel-form.component.ts b/src/app/views/travel-form/travel-form.component.ts
new file mode 100644
index 0000000..d7393ff
--- /dev/null
+++ b/src/app/views/travel-form/travel-form.component.ts
@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+import { Travel } from 'src/app/entities/travel';
+
+@Component({
+  selector: 'app-travel-form',
+  templateUrl: './travel-form.component.html',
+  styleUrls: ['./travel-form.component.css']
+})
+export class TravelFormComponent implements OnInit {
+  travel: Travel;
+  submitted = false;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  onSubmit(): void {
+    this.submitted = true;
+  }
+}