navigation and reactive form

package.json

@@ -49,5 +49,8 @@
     "ts-node": "~7.0.0",
     "tslint": "~5.11.0",
     "typescript": "~3.2.2"
-  }
+  },
+  "browserslist": [
+    "last 1 chrome versions"
+  ]
 }

src/app/app-routing.module.ts

@@ -1,10 +1,10 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-import { AddAgentComponent } from './screens/add-agent/add-agent.component';
+import { AddAgentComponent } from './views/add-agent/add-agent.component';
 
 const routes: Routes = [
-  { path: 'add-agent', component: AddAgentComponent }
+  { path: 'add-agent', component: AddAgentComponent },
 ];
 
 @NgModule({

src/app/app.component.html

@@ -1 +1,26 @@
-<router-outlet></router-outlet>
+<mat-sidenav-container class="sidenav-container">
+    <mat-sidenav #drawer class="sidenav" fixedInViewport="true"
+        [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
+        [mode]="(isHandset$ | async) ? 'over' : 'side'"
+        [opened]="!(isHandset$ | async)">
+      <mat-toolbar>Menu</mat-toolbar>
+      <mat-nav-list>
+        <a mat-list-item routerLink="/add-agent">Add Agent</a>
+      </mat-nav-list>
+    </mat-sidenav>
+    <mat-sidenav-content>
+      <mat-toolbar color="primary">
+        <button
+          type="button"
+          aria-label="Toggle sidenav"
+          mat-icon-button
+          (click)="drawer.toggle()"
+          *ngIf="isHandset$ | async">
+          <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
+        </button>
+        <span>reciprocity-tracker-angular</span>
+      </mat-toolbar>
+      <router-outlet></router-outlet>
+    </mat-sidenav-content>
+  </mat-sidenav-container>
+

src/app/app.component.ts

@@ -1,4 +1,7 @@
 import { Component } from '@angular/core';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'app-root',
@@ -7,4 +10,11 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'reciprocity-tracker-angular';
+
+  isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
+  .pipe(
+    map(result => result.matches)
+  );
+
+  constructor(private breakpointObserver: BreakpointObserver) {}
 }

src/app/app.module.ts

@@ -1,25 +1,29 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { AddAgentComponent } from './screens/add-agent/add-agent.component';
+import { AddAgentComponent } from './views/add-agent/add-agent.component';
 
 import {
   MatButtonModule,
   MatInputModule,
   MatFormFieldModule,
   MatListModule,
+  MatToolbarModule,
+  MatSidenavModule,
+  MatIconModule,
+  MatCardModule, MatSelectModule, MatRadioModule,
 } from '@angular/material';
-
+import { LayoutModule } from '@angular/cdk/layout';
 @NgModule({
   declarations: [
     AppComponent,
-    AddAgentComponent
+    AddAgentComponent,
   ],
   imports: [
     BrowserModule,
@@ -31,6 +35,14 @@ import {
     MatFormFieldModule,
     FormsModule,
     MatListModule,
+    LayoutModule,
+    MatToolbarModule,
+    MatSidenavModule,
+    MatIconModule,
+    MatCardModule,
+    MatSelectModule,
+    MatRadioModule,
+    ReactiveFormsModule,
   ],
   bootstrap: [AppComponent]
 })

src/app/views/add-agent/add-agent.component.html

@@ -0,0 +1,23 @@
+<form [formGroup]="agent" novalidate (ngSubmit)="onSubmit(agent)">
+  <mat-card class="shipping-card">
+    <mat-card-header>
+      <mat-card-title>Add Agent</mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+      <div class="row">
+        <div class="col">
+          <mat-form-field class="full-width">
+            <input matInput placeholder="Name" formControlName="name">
+          </mat-form-field>
+        </div>
+      </div>
+    </mat-card-content>
+    <mat-card-actions>
+      <button mat-raised-button color="primary" type="submit">Submit</button>
+    </mat-card-actions>
+  </mat-card>
+</form>
+
+<mat-nav-list>
+  <mat-list-item role="listitem" *ngFor="let agent of agents$ | async"> {{ agent | json }} </mat-list-item>
+</mat-nav-list>

src/app/screens/add-agent/add-agent.component.ts → src/app/views/add-agent/add-agent.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { StateService } from '../../state.service';
-import { NgForm } from '@angular/forms';
+import { FormBuilder, Validators } from '@angular/forms';
 import { Agent } from 'reciprocity-tracker-state-actor/lib/interfaces';
 
 import cuid from 'cuid';
@@ -14,19 +14,22 @@ import { map } from 'rxjs/operators';
   styleUrls: ['./add-agent.component.scss'],
 })
 export class AddAgentComponent implements OnInit {
-  agents$: Observable<Agent[]>;
+  agent = this.fb.group({
+    name: ['', [Validators.required]],
+  });
+  agents$ = this.stateService.state$.pipe(
+    map((state: any) => state.agents || []),
+  );
 
   constructor(
     private stateService: StateService,
-  ) {
-    this.agents$ = this.stateService.state$.pipe(
-      map((state: any) => state.agents || []),
-    );
-  }
+    private fb: FormBuilder,
+  ) {}
 
-  onSubmit(form: NgForm) {
-    if (form.valid) {
-      this.stateService.actions.addAgent({ id: cuid(), name: form.value.name });
+  onSubmit({ value, valid }: { value: object, valid: boolean }) {
+    console.log(value);
+    if (valid) {
+      this.stateService.actions.addAgent({ id: cuid(), ...value });
     }
   }