Merge pull request #6 from cloudnc/feat/create-from-new

feat(Demo): Adds ability to create new listing

src/app/app.module.ts

@@ -67,7 +67,13 @@ const MATERIAL_MODULES = [
     ReactiveFormsModule,
     ...MATERIAL_MODULES,
     RouterModule.forRoot([
-      { path: 'listings', children: [{ path: ':listingId', component: ListingComponent }] },
+      {
+        path: 'listings',
+        children: [
+          { path: ':listingId', component: ListingComponent },
+          { path: 'new', component: ListingComponent, pathMatch: 'full' },
+        ],
+      },
       { path: '**', pathMatch: 'full', redirectTo: '/' },
     ]),
     NgxSubFormModule,

src/app/main/listing/listing.component.html

@@ -6,21 +6,22 @@
   </mat-card-header>
   <div class="img-container">
     <img
+      *ngIf="listingForm.value?.listing?.imageUrl"
       mat-card-image
       [src]="listingForm.value?.listing?.imageUrl"
       alt="Photo of {{ listingForm.value?.listing?.title }}"
     />
   </div>
   <mat-card-content>
-    <mat-form-field>
-      <mat-select placeholder="Select listing type" [formControl]="selectListingType">
-        <mat-option *ngFor="let listingType of (ListingType | keyvalue)" [value]="listingType.value">
-          {{ listingType.value }}
-        </mat-option>
-      </mat-select>
-    </mat-form-field>
-
     <form [formGroup]="listingForm">
+      <mat-form-field>
+        <mat-select placeholder="Select listing type" formControlName="listingType">
+          <mat-option *ngFor="let listingType of (ListingType | keyvalue)" [value]="listingType.value">
+            {{ listingType.value }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+
       <div [ngSwitch]="selectListingType.value" ngxSubFormOptions>
         <app-droid-listing
           *ngSwitchCase="ListingType.DROID"

src/app/main/listing/listing.component.ts

@@ -1,10 +1,10 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { FormGroup, FormControl, Validators, AbstractControl } from '@angular/forms';
 import { ListingType, OneListing } from 'src/app/interfaces/listing.interface';
 import { ListingService } from 'src/app/services/listing.service';
 import { ActivatedRoute } from '@angular/router';
 import { map, takeUntil, tap, switchMap } from 'rxjs/operators';
-import { Subject } from 'rxjs';
+import { NEVER, of, Subject } from 'rxjs';
 
 @Component({
   selector: 'app-listing',
@@ -16,23 +16,31 @@ export class ListingComponent implements OnInit, OnDestroy {
 
   public ListingType = ListingType;
 
-  public selectListingType: FormControl = new FormControl();
-
   public listingForm: FormGroup = new FormGroup({
     listing: new FormControl(null, { validators: [Validators.required] }),
+    listingType: new FormControl(),
   });
 
+  public get selectListingType(): AbstractControl {
+    return this.listingForm.get('listingType');
+  }
+
   constructor(private route: ActivatedRoute, private listingService: ListingService) {}
 
   public ngOnInit(): void {
     this.route.paramMap
       .pipe(
         map(params => params.get('listingId')),
         takeUntil(this.onDestroy$),
-        switchMap(listingId => this.listingService.getOneListing(listingId)),
+        switchMap(listingId => {
+          if (listingId === 'new') {
+            return of(null);
+          }
+          return this.listingService.getOneListing(listingId);
+        }),
         tap(listing => {
           this.listingForm.get('listing').patchValue(listing);
-          this.selectListingType.patchValue(listing.listingType);
+          this.listingForm.get('listingType').patchValue(listing ? listing.listingType : null);
         }),
       )
       .subscribe();

src/app/main/listings/listings.component.html

@@ -39,3 +39,5 @@ <h4 mat-line>{{ listing.title }} ({{ listing.listingType }}) £{{ listing.price
     </p>
   </a>
 </mat-nav-list>
+
+<a mat-raised-button [routerLink]="['listings', 'new']" color="primary"> Create new </a>

src/app/services/listing.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { OneListing } from '../interfaces/listing.interface';
 import { hardCodedListings } from './listings.data';
-import { map } from 'rxjs/operators';
+import { map, tap } from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root',
@@ -31,6 +31,11 @@ export class ListingService {
   public getOneListing(id: string): Observable<OneListing> {
     return this.listings$.pipe(
       map(listings => listings.find(s => s.id === id)),
+      tap(listing => {
+        if (!listing) {
+          throw new Error('not found');
+        }
+      }),
       map(this.listingDeepCopy),
     );
   }