template master details view , listing design page : kdk

ng6-seed/src/app/template/service/templates/templates.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { TemplatesService } from './templates.service';
+
+describe('TemplatesService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: TemplatesService = TestBed.get(TemplatesService);
+    expect(service).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TemplatesService {
+
+  constructor() { }
+}

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

@@ -8,7 +8,10 @@ import {
   MatRadioModule, 
   MatButtonModule,MatTableModule,MatPaginatorModule,
   MatProgressBarModule,MatDialogModule, MatSortModule,
-  MatToolbarModule,MatSelectModule  } from '@angular/material';
+  MatToolbarModule,MatSelectModule,
+MatListModule, MatMenuModule,
+  MatCheckboxModule, MatStepperModule, MatTabsModule,
+  MatExpansionModule  } from '@angular/material';
 import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { FileUploadModule } from 'ng2-file-upload/ng2-file-upload';
@@ -44,6 +47,9 @@ import { MastersService } from './service/masters/masters.service';
     MatButtonModule,MatTableModule,MatPaginatorModule,
     MatProgressBarModule,MatDialogModule, MatSortModule,
     MatToolbarModule,MatSelectModule,
+    MatListModule, MatMenuModule,
+  MatCheckboxModule, MatStepperModule, MatTabsModule,
+  MatExpansionModule ,
     FormsModule,ReactiveFormsModule,
     // HttpClientModule,
   ],

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

@@ -0,0 +1,38 @@
+<form [formGroup]="_editTempCategoryFrom" (submit)="onSubmit()">
+    <div formArrayName="temp_category" class="example-full-width">
+        <mat-list role="list">
+            <mat-list-item style="margin: 2px 0;" *ngFor="let answ of _editTempCategoryFrom.controls.temp_category['controls']; let i=index ; let last = last;"
+                role="listitem">
+                <div [formGroupName]="i">
+                    <div fxLayout="row" fxLayoutWrap fxLayoutGap="5%" fxLayoutAlign="start center">
+                        <div fxFlex="0 1 auto" class="ml-xs">
+                            <mat-form-field>
+                                <mat-select placeholder="Category" formControlName="fk_category_id">
+                                    <mat-option *ngFor="let category of m_categoryList" [value]="category.fk_category_id">{{ category.name }}</mat-option>
+                                </mat-select>
+                                <!--<mat-error *ngIf="submitted && f.fk_category_id.hasError('required')" class="mat-text-warn">You must Select Lender Type.</mat-error>-->
+                            </mat-form-field>
+                        </div>
+                        <div fxFlex="0 1 auto" class="ml-xs">
+                            <mat-form-field style="width: 25%; text-align: center" appearance="outline">
+                                <input matInput formControlName="weightage">
+                            </mat-form-field> <span>%</span>
+                        </div>
+                        <div fxFlex="0 1 auto" class="ml-xs">
+                                <button *ngIf="_editTempCategoryFrom.controls.temp_category.controls.length > 1" (click)="removeLanguage(i)" mat-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
+                        
+                             </div>
+                        <div fxFlex="0 1 auto" class="ml-xs">
+                           <button  *ngIf="last" mat-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Add More" matTooltipPosition="above" (click)="addLanguage($event); false"><mat-icon>add</mat-icon></button>
+                       
+                        </div>
+                    </div>
+                </div>
+            </mat-list-item>
+        </mat-list>
+    </div>
+    <div class="row" style="text-align:right;">
+        <!--<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Reset" matTooltipPosition="above" type="reset"><mat-icon>settings_backup_restore</mat-icon></button>-->
+        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Save" matTooltipPosition="above" type="submit"><mat-icon>save</mat-icon></button>
+    </div>
+</form>

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

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

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

@@ -0,0 +1,103 @@
+import { Component, ViewChild, OnInit, OnDestroy, Input } from '@angular/core';
+import { MatPaginator, MatSort, MatTableDataSource, MatDialog, PageEvent } from '@angular/material';
+import { FormGroup, FormControl, FormBuilder, Validators , FormArray} from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { DataSource } from '@angular/cdk/table';
+import { Observable } from 'rxjs/Observable';
+
+@Component({
+  selector: 'app-template-edit-category',
+  templateUrl: './edit-category.component.html',
+  styleUrls: ['./edit-category.component.scss']
+})
+export class EditCategoryComponent implements OnInit, OnDestroy {
+
+  @Input() questionId: number;  
+
+  public _editTempCategoryFrom: FormGroup;
+  public submitted = false;
+  constructor(
+    private _formBuilder: FormBuilder,
+    public dialog: MatDialog) {
+  }
+
+
+  ngOnInit() {
+     this.initalLoadFormData();
+     if(this.categoryList.length > 0){
+       for (let val of this.categoryList) {
+        // alert(JSON.stringify(val));
+        let vals = val;
+        this.addLanguage(vals['fk_category_id'], vals['name'], vals['weightage'], null);
+      }
+     }
+  }
+
+  initalLoadFormData(){
+    this._editTempCategoryFrom = this._formBuilder.group({
+        temp_category: this._formBuilder.array([
+        // this.initAnswers(),
+      ])
+    })
+  }
+
+    // convenience getter for easy access to form fields
+  get f() { return this._editTempCategoryFrom.controls; }
+
+  public m_categoryList =  [{
+   fk_category_id: 1,
+   name: 'Category List 1',
+   weightage: 2,
+  },{
+   fk_category_id: 2,
+   name: 'Category List 2',
+   weightage: 5,
+  },{
+   fk_category_id: 3,
+   name: 'Category List 2',
+   weightage: 5,
+  }];
+
+  public categoryList = [{
+   fk_category_id: 1,
+   name: 'Category List 1',
+   weightage: 2,
+  },{
+   fk_category_id: 2,
+   name: 'Category List 2',
+   weightage: 5,
+  }];
+
+   // Dynamic Form field creation Functionality : START ===>
+  initAnswers(fk_cat_id, name, weightage) {
+    return this._formBuilder.group({
+        fk_category_id: [fk_cat_id, Validators.compose([Validators.required])],
+        name: [name, Validators.compose([Validators.required])],
+        weightage: [weightage, Validators.compose([Validators.required])],
+    });
+  }
+  addLanguage(fk_cat_id, name, weightage, e) {
+    const control = <FormArray>this._editTempCategoryFrom.controls['temp_category'];
+    control.push(this.initAnswers(fk_cat_id, name, weightage));
+  }
+  removeLanguage(i: number) {
+    const control = <FormArray>this._editTempCategoryFrom.controls['temp_category'];
+    control.removeAt(i);
+  }
+
+  // END ===>
+
+  
+  /** To Save/Edited Popup Data */
+  onSubmit() {
+    this.submitted = true;
+    // stop here if form is invalid
+  }
+
+  ngOnDestroy(): void {
+    //Called once, before the instance is destroyed.
+    //Add 'implements OnDestroy' to the class.
+  }
+
+
+}

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

@@ -0,0 +1,46 @@
+<form [formGroup]="_editTempLenderFrom" (submit)="onSubmit()">
+    <div formArrayName="temp_lender" class="example-full-width">
+        <div *ngFor="let answ of _editTempLenderFrom.controls.temp_lender['controls']; let i=index">
+            <div [formGroupName]="i">
+                <div fxLayout="row" fxLayoutWrap fxLayoutGap="0.5%" fxLayoutAlign="start center">
+                    <mat-form-field fxFlex="0 1 auto" class="ml-xs">
+                        <mat-select placeholder="Lender" formControlName="fk_lender_id">
+                            <mat-option *ngFor="let enti of entityOptions" [value]="enti.fk_lender_id">{{ enti.name }}</mat-option>
+                        </mat-select>
+                        <mat-error *ngIf="submitted && f.fk_lender_id.hasError('required')" class="mat-text-warn">You must Select Lender Type.</mat-error>
+                    </mat-form-field>
+
+                    <mat-form-field fxFlex="0 1 auto" class="ml-xs">
+                        <mat-select placeholder="Product" formControlName="fk_product_id">
+                            <mat-option *ngFor="let enti of entityOptions" [value]="enti.fk_product_id">{{ enti.name }}</mat-option>
+                        </mat-select>
+                        <mat-error *ngIf="submitted && f.fk_product_id.hasError('required')" class="mat-text-warn">You must Select Product.</mat-error>
+                    </mat-form-field>
+
+                    <mat-form-field fxFlex="0 1 auto" class="ml-xs">
+                        <mat-select placeholder="Catergory Segment" formControlName="fk_category_segment_id">
+                            <mat-option *ngFor="let enti of entityOptions" [value]="enti.fk_category_segment_id">{{ enti.name }}</mat-option>
+                        </mat-select>
+                        <mat-error *ngIf="submitted && f.fk_category_segment_id.hasError('required')" class="mat-text-warn">You must Select Category Segment.</mat-error>
+                    </mat-form-field>
+
+                    <!--<mat-form-field fxFlex="0 1 auto" class="ml-xs">
+                        <input matInput placeholder="Email" formControlName="contact_email">
+                    </mat-form-field>
+
+                    <mat-form-field fxFlex="0 1 auto" class="ml-xs">
+                        <input matInput placeholder="Mobile Number" formControlName="contact_mobile_no">
+                   </mat-form-field>-->
+                    <span *ngIf="_editTempLenderFrom.controls.temp_lender.controls.length > 1" (click)="removeLanguage(i)">
+                     <button mat-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
+                   </span>
+                </div>
+            </div>
+        </div>
+        <button mat-fab class="mr-1 mb-1" color="primary" matTooltip="Add More Contact Person" matTooltipPosition="above" (click)="addLanguage($event); false"><mat-icon>add</mat-icon></button>
+    </div>
+    <div class="row" style="text-align:right;">
+        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Reset" matTooltipPosition="above" type="reset"><mat-icon>settings_backup_restore</mat-icon></button>
+        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Save" matTooltipPosition="above" type="submit"><mat-icon>save</mat-icon></button>
+    </div>
+</form>

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

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

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

@@ -0,0 +1,74 @@
+import { Component, ViewChild, OnInit, OnDestroy, Input } from '@angular/core';
+import { MatPaginator, MatSort, MatTableDataSource, MatDialog, PageEvent } from '@angular/material';
+import { FormGroup, FormControl, FormBuilder, Validators , FormArray} from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { DataSource } from '@angular/cdk/table';
+import { Observable } from 'rxjs/Observable';
+
+@Component({
+  selector: 'app-template-edit-lender',
+  templateUrl: './edit-lender.component.html',
+  styleUrls: ['./edit-lender.component.scss']
+})
+export class EditLenderComponent implements OnInit {
+
+  
+  @Input() questionId: number;  
+
+  public _editTempLenderFrom: FormGroup;
+  public submitted = false;
+  constructor(
+    private _formBuilder: FormBuilder) {
+  }
+
+  ngOnInit() {
+     this._editTempLenderFrom = this._formBuilder.group({
+        temp_lender: this._formBuilder.array([
+        this.initAnswers(),
+      ])
+     })
+  }
+
+    // convenience getter for easy access to form fields
+  get f() { return this._editTempLenderFrom.controls; }
+
+
+  public entityOptions = [{
+   fk_lender_id: 1,
+   name: 'Lender1'
+  },{
+   fk_lender_id: 2,
+   name: 'Lender2'
+  }];
+
+   // Dynamic Form field creation Functionality : START ===>
+  initAnswers() {
+    return this._formBuilder.group({
+        fk_lender_id: ['', Validators.compose([Validators.required])],
+        fk_product_id: ['', Validators.compose([Validators.required])],
+        fk_category_segment_id: ['', Validators.compose([Validators.required])],
+    });
+  }
+  addLanguage(e) {
+    const control = <FormArray>this._editTempLenderFrom.controls['temp_lender'];
+    control.push(this.initAnswers());
+  }
+  removeLanguage(i: number) {
+    const control = <FormArray>this._editTempLenderFrom.controls['temp_lender'];
+    control.removeAt(i);
+  }
+
+  // END ===>
+
+  
+  /** To Save/Edited Popup Data */
+  onSubmit() {
+    this.submitted = true;
+    // stop here if form is invalid
+  }
+
+  ngOnDestroy(): void {
+    //Called once, before the instance is destroyed.
+    //Add 'implements OnDestroy' to the class.
+  }
+}

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

@@ -0,0 +1,100 @@
+<!--<form [formGroup]="_editTempCategoryFrom" (submit)="onSubmit()">
+    <div formArrayName="temp_category" class="example-full-width">
+        <mat-list role="list">
+            <mat-list-item style="margin: 2px 0;" *ngFor="let answ of _editTempCategoryFrom.controls.temp_category['controls']; let i=index ; let last = last;"
+                role="listitem">
+                <div [formGroupName]="i">
+                    <div fxLayout="row" fxLayoutWrap fxLayoutGap="5%" fxLayoutAlign="start center">
+                        <div fxFlex="0 1 auto" class="ml-xs">
+                            <mat-form-field>
+                                <mat-select placeholder="Category" formControlName="fk_category_id">
+                                    <mat-option *ngFor="let category of m_categoryList" [value]="category.fk_category_id">{{ category.name }}</mat-option>
+                                </mat-select>
+                           </mat-form-field>
+                        </div>
+                        <div fxFlex="0 1 auto" class="ml-xs">
+                            <mat-form-field style="width: 25%; text-align: center" appearance="outline">
+                                <input matInput formControlName="weightage">
+                            </mat-form-field> <span>%</span>
+                        </div>
+                        <div fxFlex="0 1 auto" class="ml-xs">
+                                <button *ngIf="_editTempCategoryFrom.controls.temp_category.controls.length > 1" (click)="removeLanguage(i)" mat-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
+                        
+                             </div>
+                        <div fxFlex="0 1 auto" class="ml-xs">
+                           <button  *ngIf="last" mat-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Add More" matTooltipPosition="above" (click)="addLanguage($event); false"><mat-icon>add</mat-icon></button>
+                       
+                        </div>
+                    </div>
+                </div>
+            </mat-list-item>
+        </mat-list>
+    </div>
+    <div class="row" style="text-align:right;">
+        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Save" matTooltipPosition="above" type="submit"><mat-icon>save</mat-icon></button>
+    </div>
+</form>-->
+<mat-card>
+    <mat-accordion>
+        <mat-expansion-panel>
+            <mat-expansion-panel-header>
+                <mat-panel-title>
+                    Category 1
+                </mat-panel-title>
+                <mat-panel-description>
+                    50%
+                </mat-panel-description>
+            </mat-expansion-panel-header>
+
+            <!--<mat-horizontal-stepper [linear]="isLinear" #stepper>
+                <mat-step [stepControl]="firstFormGroup">
+                    <form [formGroup]="firstFormGroup">
+                        <ng-template matStepLabel>Questions</ng-template>
+                        <mat-list role="list">
+  <mat-list-item role="listitem">Item 1</mat-list-item>
+  <hr>
+  <mat-list-item role="listitem">Item 2</mat-list-item>
+    <hr>
+  <mat-list-item role="listitem">Item 3</mat-list-item>
+    <hr>
+</mat-list>
+                        <div>
+                            <button mat-button matStepperNext>Next</button>
+                        </div>
+                    </form>
+                </mat-step>
+                <mat-step [stepControl]="secondFormGroup">
+                    <form [formGroup]="secondFormGroup">
+                        <ng-template matStepLabel>Answers</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-horizontal-stepper>-->
+        </mat-expansion-panel>
+        <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false">
+            <mat-expansion-panel-header>
+                <mat-panel-title>
+                    Category 2
+                </mat-panel-title>
+                <mat-panel-description>
+                    50%
+                </mat-panel-description>
+            </mat-expansion-panel-header>
+            <p>I'm visible because I am open</p>
+        </mat-expansion-panel>
+    </mat-accordion>
+</mat-card>

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

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

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

@@ -0,0 +1,104 @@
+import { Component, ViewChild, OnInit, OnDestroy, Input } from '@angular/core';
+import { MatPaginator, MatSort, MatTableDataSource, MatDialog, PageEvent } from '@angular/material';
+import { FormGroup, FormControl, FormBuilder, Validators , FormArray} from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { DataSource } from '@angular/cdk/table';
+import { Observable } from 'rxjs/Observable';
+
+@Component({
+  selector: 'app-template-edit-question-answer',
+  templateUrl: './edit-question-answer.component.html',
+  styleUrls: ['./edit-question-answer.component.scss']
+})
+export class EditQuestionAnswerComponent implements OnInit {
+
+  
+  @Input() questionId: number;  
+
+  public _editTempCategoryFrom: FormGroup;
+  public submitted = false;
+  public panelOpenState : boolean;
+  constructor(
+    private _formBuilder: FormBuilder,
+    public dialog: MatDialog) {
+  }
+
+
+  ngOnInit() {
+     this.initalLoadFormData();
+     if(this.categoryList.length > 0){
+       for (let val of this.categoryList) {
+        // alert(JSON.stringify(val));
+        let vals = val;
+        this.addLanguage(vals['fk_category_id'], vals['name'], vals['weightage'], null);
+      }
+     }
+  }
+
+  initalLoadFormData(){
+    this._editTempCategoryFrom = this._formBuilder.group({
+        temp_category: this._formBuilder.array([
+        // this.initAnswers(),
+      ])
+    })
+  }
+
+    // convenience getter for easy access to form fields
+  get f() { return this._editTempCategoryFrom.controls; }
+
+  public m_categoryList =  [{
+   fk_category_id: 1,
+   name: 'Category List 1',
+   weightage: 2,
+  },{
+   fk_category_id: 2,
+   name: 'Category List 2',
+   weightage: 5,
+  },{
+   fk_category_id: 3,
+   name: 'Category List 2',
+   weightage: 5,
+  }];
+
+  public categoryList = [{
+   fk_category_id: 1,
+   name: 'Category List 1',
+   weightage: 2,
+  },{
+   fk_category_id: 2,
+   name: 'Category List 2',
+   weightage: 5,
+  }];
+
+   // Dynamic Form field creation Functionality : START ===>
+  initAnswers(fk_cat_id, name, weightage) {
+    return this._formBuilder.group({
+        fk_category_id: [fk_cat_id, Validators.compose([Validators.required])],
+        name: [name, Validators.compose([Validators.required])],
+        weightage: [weightage, Validators.compose([Validators.required])],
+    });
+  }
+  addLanguage(fk_cat_id, name, weightage, e) {
+    const control = <FormArray>this._editTempCategoryFrom.controls['temp_category'];
+    control.push(this.initAnswers(fk_cat_id, name, weightage));
+  }
+  removeLanguage(i: number) {
+    const control = <FormArray>this._editTempCategoryFrom.controls['temp_category'];
+    control.removeAt(i);
+  }
+
+  // END ===>
+
+  
+  /** To Save/Edited Popup Data */
+  onSubmit() {
+    this.submitted = true;
+    // stop here if form is invalid
+  }
+
+  ngOnDestroy(): void {
+    //Called once, before the instance is destroyed.
+    //Add 'implements OnDestroy' to the class.
+  }
+
+}

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

@@ -1,56 +1,38 @@
+
 <mat-card style="padding: 6px;">
-    <div class="ml-xs mr-xs" style="width: 100%;" fxLayout="row" fxLayoutAlign="center">
+    <div fxLayout="row" fxLayoutAlign="end start">
-        <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">
+          <h6>Template Name</h6>
+          <hr>
+            <form (submit)="onSubmit()">
+              <div fxLayout="row" fxLayoutWrap fxLayoutGap="0.5%" fxLayoutAlign="start center">
                 <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-error *ngIf="submitted && f.pan.hasError('required')" class="mat-text-warn">You must Include Pan Number.</mat-error>-->
                 </mat-form-field>
+                <div>
+                  <button mat-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Reset" matTooltipPosition="above" type="reset"><mat-icon>settings_backup_restore</mat-icon></button>
+                  <button mat-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Save" matTooltipPosition="above" type="submit"><mat-icon>save</mat-icon></button>
                 </div>
+              </div> 
+            </form>
+        </mat-card>
+    <mat-card>
+    <mat-tab-group>
+      <mat-tab label="Lender Details">
+        <app-template-edit-lender [questionId]="question_id">
+          </app-template-edit-lender>
+      </mat-tab>
+      <mat-tab label="Category"> 
+        <app-template-edit-category [questionId]="question_id">
+        </app-template-edit-category> </mat-tab>
+      <mat-tab label="Questions / Answers"> 
+      <app-template-edit-question-answer [questionId]="question_id">
+      </app-template-edit-question-answer>
+       </mat-tab>
+    </mat-tab-group>
     </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

@@ -17,10 +17,13 @@ import { TemplateListComponent } from './../templates.list.component';
 })
 export class TemplateEditComponent implements OnInit, OnDestroy {
    public pageTitle: string = "Edit Template"; 
+  public question_id : number;
+  public submitted: boolean = false;
 
   constructor( private route: ActivatedRoute,
     private router: Router,
     private templateListComponent : TemplateListComponent) {
+      this.question_id = this.route.snapshot.params['question-id'];
   }
 
   ngOnInit() {
@@ -32,6 +35,12 @@ export class TemplateEditComponent implements OnInit, OnDestroy {
     this.router.navigate([ '../../' ], { relativeTo: this.route });
   }
 
+  /** To Save/Edited Popup Data */
+  onSubmit() {
+    this.submitted = true;
+    // stop here if form is invalid
+  }
+
   ngOnDestroy(): void {
     //Called once, before the instance is destroyed.
     //Add 'implements OnDestroy' to the class.

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

@@ -1,11 +1,73 @@
 <div *ngIf="listView">
-<mat-form-field fxFlex="0 1 auto" class="ml-xs">
+    <!--========================== Template List View-->
-                            <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>
+        <mat-card>
+            <mat-card class="mat-elevation-z1">
+                <div style="margin: 6px; padding: 4px;">
+                    <div class="p_title" style="font-size: 16px; font-style: bold;">Template Master</div>
+                    <div class="sub_title" style="font-size: 11px;">List of Templates</div>
                 </div>
+                <div fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutAlign="center none">
+                    <div fxFlex="80%">
+                        <!--<form [formGroup]="filterFormGroupCtrl">
+              <div fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutGap="0.5px" fxLayoutAlign="start none" style="padding: 6px;">
+  <mat-select placeholder="Category" formControlName="category">
+                <mat-option *ngFor="let cat of categories" [value]="cat.question_categroy_id" (click)="getQuestionsMasters()">
+                    {{cat.categroy_name}}
+                  </mat-option>
+                </mat-select>
+              </div>
+            </form>-->
+                    </div>
+                    <div fxFlex="20%">
+                        <button mat-stroked-button color="primary">Add New Template</button>
+                        <!--<button mat-stroked-button color="primary" (click)="addNewQuestion()">Add Questions</button>-->
+                    </div>
+                </div>
+            </mat-card>
+            <ng-container *ngIf="templateList.length > 0">
+                <div style="padding: 0 12px;">
+                    <mat-card class="product-card" *ngFor="let template of dataSource.connect() | async">
+                        <div fxLayout="row" fxLayoutAlign="start start" style="padding: 6px 2px;">
+
+                            <div fxFlex="90%" style="padding: 12px 8px;">
+
+                                <div fxLayout="row" fxLayoutWrap fxLayoutAlign="start center">
+                                    <div class="ml-xs" fxFlex="20%">
+                                       <b> {{ template.template_name }} </b>
+                                    </div>
+                                    <div class="ml-xs" fxFlex="80%">
+                                        <div *ngIf="template.lender_details.length > 0" class="text-line-limit">
+                                            <span *ngFor="let lender of template.lender_details ; let last = last"> {{lender.full_name}} - {{lender.product_name}} - {{lender.customer_segment_name}} <i *ngIf="!last">,</i></span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div fxFlex="10%">
+                                <button mat-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above" (click)="goToEdit(template.template_id)"><mat-icon>edit</mat-icon></button>
+                            </div>
+                        </div>
+                    </mat-card>
+                </div>
+            </ng-container>
+            <mat-card *ngIf="noQuesMasterRecrdFound">
+                <div class="no-record-found">No Record Found ... </div>
+            </mat-card>
+
+            <mat-paginator #paginator class="mat-elevation-z1" [length]="templateList.length" [pageIndex]="pageIndex" [pageSize]="pageSize"
+                [pageSizeOptions]="[5, 10, 25, 100]" (page)="pageEvent = $event; pageChange($event)">
+            </mat-paginator>
+        </mat-card>
+    </div>
+
+    <!--=================================== END-->
+
+</div>
+
 <div>
     <router-outlet></router-outlet>
 </div>
+
+
+<notifier-container></notifier-container>

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

@@ -0,0 +1,52 @@
+// mat table css
+
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.example-header {  
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+//   width: 100%;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
+}
+
+.text-line-limit {
+   text-overflow: ellipsis;
+   overflow: hidden;
+  //  white-space: nowrap;
+   display: -webkit-box;
+   line-height: 16px;     /* fallback */
+   max-height: 32px;      /* fallback */
+   -webkit-line-clamp: 2; /* number of lines to show */
+   -webkit-box-orient: vertical;
+   
+  // text-overflow: ellipsis;
+  // overflow: hidden; 
+  // width: 160px; 
+  // height: 1.2em; 
+  // white-space: nowrap;
+}
+
+.category-label {
+  padding: 2px 6px; 
+  background: #629cff; 
+  color: #fff;
+  box-shadow: 0 2px 3px #c8bbbb;
+}
+
+.no-record-found {
+  font-size: 18px;
+  color: #03a9f4;
+  padding : 12px 8px;
+}

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

@@ -11,25 +11,81 @@ import { Observable } from 'rxjs/Observable';
 */
 @Component({
   selector: 'app-list',
+  styleUrls: ['./templates.list.component.scss'],
   templateUrl: './templates.list.component.html'
 })
 export class TemplateListComponent implements OnInit, OnDestroy {
-  public listView: boolean = true;
+
+  public templateList = [];
+  public listView: boolean;
   public names: string;
+  public noTemplMasterRecrdFound: boolean = false;
+
+  // pagination variable details
+  length = 50;
+  pageIndex = 0;
+  pageSize = 10;
+  pageEvent: PageEvent;
+
+  // data source variable details
+  templateListData = null;
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+  displayedColumns = ['categroy_name', 'question', 'actions'];
+
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatSort) sort: MatSort;
+
   constructor(
     private route: ActivatedRoute,
     private router: Router) {
+      this.listView = true;
       // this.names = 'dinesh';
   }
 
   ngOnInit() {
-    //   alert(1);
-    alert();
     this.listView = true;
+    this.getTemplateMastersListDetails();
   }
  
-  goToEdit(){
+
-      this.router.navigate([ '../list/edit', '1' ], { relativeTo: this.route });
+ // get question master list details
+  getTemplateMastersListDetails() {
+    this.templateList = this.m_templateList.records;
+            this.templateListData =  this.m_templateList.records;
+            this.dataLength =  this.m_templateList.records.length;
+            this.dataSource.data = this.templateListData;
+
+    // this.noTemplMasterRecrdFound = false;
+    // this.search_cid = this.filterFormGroupCtrl.controls.category.value;
+    // console.log(this.search_cid + ", " + this.filterFormGroupCtrl);
+    // this.questionsService.getQuestionMasterDetails(this.search_cid).subscribe(
+    //   data => {
+    //     if (data) {
+    //       if (data.records) {
+    //         this.templateList = data.records;
+    //         this.templateListData = data.records;
+    //         this.dataLength = data.records.length;
+    //         this.dataSource.data = this.templateListData;
+    //       } else {
+    //         this.templateList = [];
+    //         this.dataLength = null;
+    //         this.noTemplMasterRecrdFound = true;
+    //       }
+    //     } else {
+    //       this.templateList = [];
+    //       this.dataLength = null;
+    //       this.noTemplMasterRecrdFound = true;
+    //     }
+    //   }
+    // )
+  }
+
+
+
+
+  goToEdit(template_id : number){
+      this.router.navigate([ '../list/edit', template_id ], { relativeTo: this.route });
       this.listView = false;
   }
 
@@ -41,7 +97,112 @@ export class TemplateListComponent implements OnInit, OnDestroy {
   ngOnDestroy(): void {
     //Called once, before the instance is destroyed.
     //Add 'implements OnDestroy' to the class.
-    alert();
+  }
+
+
+  public m_templateList = {    
+    "dataStatus": true,    
+    "status": 200,    
+    "records": 
+    [        
+      {            
+        "template_id": "1",            
+        "template_name": "sample dev template",            
+        "createdon": "28/09/2018",            
+        "fk_createdby": "1",            
+        "updatedon": null,            
+        "fk_updatedby": null,            
+        "isactive": "1",            
+        "createdby": "sriram v",            
+        "updatedby": null,            
+        "lender_details": []        
+      },        
+      {            
+        "template_id": "2",            
+        "template_name": "two template",            
+        "createdon": "28/09/2018",            
+        "fk_createdby": "1",            
+        "updatedon": null,            
+        "fk_updatedby": null,            
+        "isactive": "1",            
+        "createdby": "sriram v",            
+        "updatedby": null,            
+        "lender_details": []        
+      },        
+      {            
+        "template_id": "3",            
+        "template_name": "ABCD template redd",            
+        "createdon": "11/10/2018",            
+        "fk_createdby": "1",            
+        "updatedon": null,            
+        "fk_updatedby": null,            
+        "isactive": "1",            
+        "createdby": "sriram v",            
+        "updatedby": null,            
+        "lender_details": [                
+          {                    
+            "template_lender_map_id": "1",                    
+            "fk_template_id": "3",                    
+            "fk_lender_id": "1",                    
+            "full_name": "ICICIedited",                    
+            "short_name": "checkee",                    
+            "fk_product_id": "1",                    
+            "product_name": "Home Loan ",                    
+            "product_abbr": "HL",                   
+            "fk_customer_segment": "1",                    
+            "customer_segment_name": "Salaried Non Professional ",  
+            "customer_segment_abbr": "SNP",
+            "createdon": "11/10/2018",                    
+            "fk_createdby": "1",                    
+            "updatedon": null,                    
+            "isactive": "1",                    
+            "fk_updatedby": null,                    
+            "createdby": "sriram v",                    
+            "updatedby": null                
+          },                
+          {                    
+            "template_lender_map_id": "2",                    
+            "fk_template_id": "3",                    
+            "fk_lender_id": "1",                    
+            "full_name": "ICICIedited",                    
+            "short_name": "checkee",                    
+            "fk_product_id": "2",                    
+            "product_name": "Non Residential Premises Loans",                    
+            "product_abbr": "NRPL",                    
+            "fk_customer_segment": "2",                    
+            "customer_segment_name": "Salaried Professional ",                    
+            "customer_segment_abbr": "SP",                    
+            "createdon": "11/10/2018",                    
+            "fk_createdby": "1",                    
+            "updatedon": "11/10/2018",                    
+            "isactive": "1",                    
+            "fk_updatedby": null,                    
+            "createdby": "sriram v",                    
+            "updatedby": null                
+          },                
+          {                    
+            "template_lender_map_id": "2",                    
+            "fk_template_id": "3",                    
+            "fk_lender_id": "1",                    
+            "full_name": "ICICIedited",                    
+            "short_name": "checkee",                    
+            "fk_product_id": "2",                    
+            "product_name": "Non Residential Premises Loans",                    
+            "product_abbr": "NRPL",                    
+            "fk_customer_segment": "2",                    
+            "customer_segment_name": "Salaried Professional ",                    
+            "customer_segment_abbr": "SP",                    
+            "createdon": "11/10/2018",                    
+            "fk_createdby": "1",                    
+            "updatedon": "11/10/2018",                    
+            "isactive": "1",                    
+            "fk_updatedby": null,                    
+            "createdby": "sriram v",                    
+            "updatedby": null                
+          }             
+          ]        
+        }    
+        ]
 }
 
 }

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

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 @Component({
-  template: `<h2>Templates Master Details List</h2>
+  template: `
 	     <div>	
 	        <router-outlet></router-outlet>	
 	     </div>

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

@@ -12,7 +12,8 @@ import {
   MatProgressBarModule,MatDialogModule, MatSortModule,
   MatToolbarModule,MatSelectModule,
   MatListModule, MatMenuModule,
-  MatCheckboxModule, MatStepperModule
+  MatCheckboxModule, MatStepperModule, MatTabsModule,
+  MatExpansionModule
 } from '@angular/material';
 import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -24,6 +25,9 @@ import { TemplatesRouting } from './templates.routing';
 import { TemplatesComponent } from './templates.component';
 import { TemplateListComponent } from './templates-list/templates.list.component';
 import { TemplateEditComponent } from './templates-list/edit/templates.edit.component';
+import { EditCategoryComponent } from './templates-list/edit/edit-category/edit-category.component';
+import { EditLenderComponent } from './templates-list/edit/edit-lender/edit-lender.component';
+import { EditQuestionAnswerComponent } from './templates-list/edit/edit-question-answer/edit-question-answer.component';
 
 // import { QuestionsService } from './../service/questions/questions.service';
 /*
@@ -86,7 +90,9 @@ const customNotifierOptions: NotifierOptions = {
     MatButtonModule,MatTableModule,MatPaginatorModule,
     MatProgressBarModule,MatDialogModule, MatSortModule,
     MatToolbarModule,MatSelectModule,MatListModule, MatMenuModule,
+    MatExpansionModule,
     MatStepperModule,
+    MatTabsModule,
     MatSlideToggleModule,
     MatCheckboxModule,
     FormsModule, 
@@ -96,7 +102,10 @@ const customNotifierOptions: NotifierOptions = {
   declarations: [
     TemplatesComponent,
     TemplateListComponent,
-    TemplateEditComponent
+    TemplateEditComponent,
+    EditCategoryComponent,
+    EditLenderComponent,
+    EditQuestionAnswerComponent
       ],
       entryComponents: [
       ],