Work in New/Edit travel

src/app/app.module.ts

@@ -20,6 +20,7 @@ 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';
+import { NewTravelComponent } from './pages/new-travel/new-travel.component';
 
 const ROUTING_OPTIONS: ExtraOptions = {
   // preloadingStrategy: CustomPreloadingStrategy,
@@ -51,7 +52,8 @@ const ROUTING_OPTIONS: ExtraOptions = {
     EditTravelComponent,
     HeaderComponent,
     ListComponent,
-    TravelFormComponent
+    TravelFormComponent,
+    NewTravelComponent
   ],
   providers: [
     // (useHash) ? { provide: LocationStrategy, useClass: HashLocationStrategy } : [],

src/app/app.routes.ts

@@ -1,6 +1,7 @@
 import { Routes } from '@angular/router';
 import { EditTravelComponent } from './pages/edit-travel/edit-travel.component';
 import { HomeComponent } from './pages/home/home.component';
+import { NewTravelComponent } from './pages/new-travel/new-travel.component';
 import { TravelComponent } from './pages/travel/travel.component';
 
 export let APP_ROUTES: Routes = [
@@ -14,12 +15,12 @@ export let APP_ROUTES: Routes = [
     component: HomeComponent
   },
   {
-    path: 'travel/:id',
-    component: TravelComponent
+    path: 'travel/new',
+    component: NewTravelComponent
   },
   {
-    path: 'travel/new',
-    component: EditTravelComponent
+    path: 'travel/:id',
+    component: TravelComponent
   },
   {
     path: 'travel/:id/edit',

src/app/entities/travel.ts

@@ -2,14 +2,16 @@ import { UserInfo } from './user-info';
 
 export type TravelId = number;
 
-export interface Travel {
-  id: Travel;
-  driverInfo: UserInfo;
-  travelersInfo: UserInfo[];
-  departureDate: string;
-  origin: string;
-  destination: string;
-  places: number;
-  description?: string;
-  matrixRoomId: string;
+export class Travel {
+  constructor(
+    public id: TravelId = -1,
+    public driverInfo: UserInfo = null,
+    public travelersInfo: UserInfo[] = null,
+    public departureDate: string = '',
+    public origin: string = '',
+    public destination: string = '',
+    public places: number = 0,
+    public matrixRoomId: string = '',
+    public description?: string
+  ) { }
 }

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

@@ -1,4 +1,4 @@
 <div>
-    <h1>Editar</h1>
-
+    <h1>Editar viaje</h1>
+    <app-travel-form></app-travel-form>
 </div>

src/app/pages/edit-travel/edit-travel.component.ts

@@ -1,5 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+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 { ApiService } from '../../services/api.service';
@@ -12,6 +13,8 @@ import { ApiService } from '../../services/api.service';
 export class EditTravelComponent implements OnInit {
   travel: Travel;
 
+  @ViewChild(TravelFormComponent, { static: true }) form: TravelFormComponent;
+
   constructor(
     private apiService: ApiService,
     private route: ActivatedRoute

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

@@ -0,0 +1,4 @@
+<div>
+    <h1>Nuevo viaje</h1>
+    <app-travel-form [travel]="travel"></app-travel-form>
+</div>

src/app/pages/new-travel/new-travel.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NewTravelComponent } from './new-travel.component';
+
+describe('NewTravelComponent', () => {
+  let component: NewTravelComponent;
+  let fixture: ComponentFixture<NewTravelComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ NewTravelComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NewTravelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,26 @@
+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 { ApiService } from '../../services/api.service';
+
+@Component({
+  selector: 'app-new-travel',
+  templateUrl: './new-travel.component.html',
+  styleUrls: ['./new-travel.component.css']
+})
+export class NewTravelComponent implements OnInit {
+  travel: Travel;
+
+  @ViewChild(TravelFormComponent, { static: true }) form: TravelFormComponent;
+
+  constructor(
+    private apiService: ApiService,
+    private route: ActivatedRoute
+  ) { }
+
+  ngOnInit(): void {
+    this.travel = new Travel();
+  }
+}

src/app/pages/travel/travel.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { Router, ActivatedRoute, ParamMap } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 import { PUBLIC_API_URL } from '../../app.config';
 import { Travel, TravelId } from '../../entities/travel';
 import { ApiService } from '../../services/api.service';

src/app/views/travel-form/travel-form.component.html

@@ -6,15 +6,16 @@
             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">
+        <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">
@@ -22,10 +23,11 @@
             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">
+        <input type="text" id="description" required [(ngModel)]="travel.description" name="description"
+            #description="ngModel">
     </div>
 
 

src/app/views/travel-form/travel-form.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { Travel } from 'src/app/entities/travel';
 
 @Component({
@@ -7,7 +7,7 @@ import { Travel } from 'src/app/entities/travel';
   styleUrls: ['./travel-form.component.css']
 })
 export class TravelFormComponent implements OnInit {
-  travel: Travel;
+  @Input() travel: Travel;
   submitted = false;
 
   constructor() { }