template navigation design : kdk

ng6-seed/src/app/template/template.routing.ts

@@ -1,15 +1,14 @@
 import { Routes } from '@angular/router';
 import { QuestionsModule } from './questions/questions.module';
-
+import { TemplatesModule } from './templates/templates.module';
 export const TemplateRoutes: Routes = [{
   path: '',
   children:[{
     path:'questions',
     loadChildren:'./questions/questions.module#QuestionsModule'
-  },
-  // {
-  //   path:'templates',
-  //   loadChildren:'./templates/templates.module#TemplatesModule'
-  // }
+  },{
+    path:'templates',
+    loadChildren:'./templates/templates.module#TemplatesModule'
+  }
 ]
 }]

ng6-seed/src/app/template/templates/templates-list/edit/templates.edit.component.html

@@ -1,2 +1,56 @@
-<button>Back To List</button>
-<h3>Template Edit Component</h3>
+<mat-card style="padding: 6px;">
+    <div class="ml-xs mr-xs" style="width: 100%;" fxLayout="row" fxLayoutAlign="center">
+        <h2 mat-dialog-title style="width: 50%;">{{pageTitle}}</h2>
+        <div style="width: 20%;"></div>
+        <div style="width: 30%;text-align:right;">
+            <button mat-raised-button mat-icon-button color="primary" class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"
+                (click)="backToList()"><mat-icon>close</mat-icon></button>
+        </div>
+    </div>
+    <form (submit)="onSubmit()">
+        <mat-card style="padding: 6px;">
+                <div fxLayout="row wrap" fxLayoutGap="32px" fxLayoutAlign="flex-start">
+                <mat-form-field class="ml-xs">
+                        <input matInput placeholder="Template Name">
+                        <mat-error *ngIf="submitted && f.pan.hasError('required')" class="mat-text-warn">You must Include Pan Number.</mat-error>
+                    </mat-form-field>
+                </div> 
+        </mat-card>
+    </form>
+    <button mat-raised-button (click)="isLinear = !isLinear" id="toggle-linear">
+  {{!isLinear ? 'Enable linear mode' : 'Disable linear mode'}}
+</button>
+<mat-vertical-stepper [linear]="isLinear" #stepper>
+  <mat-step [stepControl]="firstFormGroup">
+    <form [formGroup]="firstFormGroup">
+      <ng-template matStepLabel>Fill out your name</ng-template>
+      <mat-form-field>
+        <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
+      </mat-form-field>
+      <div>
+        <button mat-button matStepperNext>Next</button>
+      </div>
+    </form>
+  </mat-step>
+  <mat-step [stepControl]="secondFormGroup">
+    <form [formGroup]="secondFormGroup">
+      <ng-template matStepLabel>Fill out your address</ng-template>
+      <mat-form-field>
+        <input matInput placeholder="Address" formControlName="secondCtrl" required>
+      </mat-form-field>
+      <div>
+        <button mat-button matStepperPrevious>Back</button>
+        <button mat-button matStepperNext>Next</button>
+      </div>
+    </form>
+  </mat-step>
+  <mat-step>
+    <ng-template matStepLabel>Done</ng-template>
+    You are now done.
+    <div>
+      <button mat-button matStepperPrevious>Back</button>
+      <button mat-button (click)="stepper.reset()">Reset</button>
+    </div>
+  </mat-step>
+</mat-vertical-stepper>
+</mat-card>

ng6-seed/src/app/template/templates/templates-list/edit/templates.edit.component.ts

@@ -1,9 +1,12 @@
-import { Component, ViewChild, OnInit } from '@angular/core';
+import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core';
 import { MatPaginator, MatSort, MatTableDataSource, MatDialog, PageEvent } from '@angular/material';
 import { FormGroup, FormControl, FormBuilder } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
 import { DataSource } from '@angular/cdk/table';
 import { Observable } from 'rxjs/Observable';
 
+import { TemplateListComponent } from './../templates.list.component';
+
 /*
 * Template Edit component
 * : kdk
@@ -12,13 +15,27 @@ import { Observable } from 'rxjs/Observable';
   selector: 'app-list',
   templateUrl: './templates.edit.component.html'
 })
-export class TemplateEditComponent implements OnInit {
+export class TemplateEditComponent implements OnInit, OnDestroy {
+  public pageTitle: string = "Edit Template"; 
 
-
-  constructor() {
+  constructor( private route: ActivatedRoute,
+    private router: Router,
+    private templateListComponent : TemplateListComponent) {
   }
 
   ngOnInit() {
+    this.templateListComponent.showListView(false);
+  }
+
+  backToList(){
+    this.templateListComponent.showListView(true);
+    this.router.navigate([ '../../' ], { relativeTo: this.route });
+  }
+
+  ngOnDestroy(): void {
+    //Called once, before the instance is destroyed.
+    //Add 'implements OnDestroy' to the class.
+    this.templateListComponent.showListView(true);
   }
 
 }

ng6-seed/src/app/template/templates/templates-list/templates.list.component.html

@@ -1,7 +1,11 @@
 <div *ngIf="listView">
-<h3>Template List Component</h3>
+<mat-form-field fxFlex="0 1 auto" class="ml-xs">
+                            <input matInput [(ngModel)]="names" placeholder="Contact Person">
+                            <!--<mat-error *ngIf="submitted && f.contact_person.hasError('required')" class="mat-text-warn">You must Include Contact Person.</mat-error>-->
+                        </mat-form-field>
+
 <button (click)="goToEdit()">Edit</button>
 </div>
-<div *ngIf="!listView">
+<div>
 <router-outlet></router-outlet>	
 </div>

ng6-seed/src/app/template/templates/templates-list/templates.list.component.ts

@@ -1,5 +1,6 @@
-import { Component, ViewChild, OnInit } from '@angular/core';
+import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core';
 import { MatPaginator, MatSort, MatTableDataSource, MatDialog, PageEvent } from '@angular/material';
+import { ActivatedRoute, Router } from '@angular/router';
 import { FormGroup, FormControl, FormBuilder } from '@angular/forms';
 import { DataSource } from '@angular/cdk/table';
 import { Observable } from 'rxjs/Observable';
@@ -12,21 +13,35 @@ import { Observable } from 'rxjs/Observable';
   selector: 'app-list',
   templateUrl: './templates.list.component.html'
 })
-export class TemplateListComponent implements OnInit {
+export class TemplateListComponent implements OnInit, OnDestroy {
   public listView: boolean = true;
-  constructor() {
+  public names: string;
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router) {
+      // this.names = 'dinesh';
   }
 
   ngOnInit() {
     //   alert(1);
+    alert();
+    this.listView = true;
   }
 
   goToEdit(){
+      this.router.navigate([ '../list/edit', '1' ], { relativeTo: this.route });
       this.listView = false;
   }
 
-  ngAfterViewInit(){
+  showListView(status: boolean){
     //   alert(2);
+    this.listView = status;
+  }
+
+  ngOnDestroy(): void {
+    //Called once, before the instance is destroyed.
+    //Add 'implements OnDestroy' to the class.
+    alert();
   }
 
 }

ng6-seed/src/app/template/templates/templates.module.ts

@@ -12,7 +12,7 @@ import {
   MatProgressBarModule,MatDialogModule, MatSortModule,
   MatToolbarModule,MatSelectModule,
   MatListModule, MatMenuModule,
-  MatCheckboxModule
+  MatCheckboxModule, MatStepperModule
 } from '@angular/material';
 import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -86,6 +86,7 @@ const customNotifierOptions: NotifierOptions = {
     MatButtonModule,MatTableModule,MatPaginatorModule,
     MatProgressBarModule,MatDialogModule, MatSortModule,
     MatToolbarModule,MatSelectModule,MatListModule, MatMenuModule,
+    MatStepperModule,
     MatSlideToggleModule,
     MatCheckboxModule,
     FormsModule, 

ng6-seed/src/app/template/templates/templates.routing.ts

@@ -14,10 +14,14 @@ const routes: Routes = [
     component: TemplatesComponent,
     children: [
        {
+            path: '',
+            pathMatch: 'full',
+            redirectTo: 'list'
+        },{
 		       path: 'list',
 		       component: TemplateListComponent,
            children: [{
-              path: 'edit',
+              path: 'edit/:question-id',
 		          component: TemplateEditComponent,
            }]
 		   }