merge : kms

ng6-seed/package-lock.json

@@ -4352,12 +4352,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "1.0.0",
             "concat-map": "0.0.1"
@@ -4372,17 +4374,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -4499,7 +4504,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4511,6 +4517,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "1.0.1"
           }
@@ -4525,6 +4532,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "1.1.11"
           }
@@ -4532,12 +4540,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "5.1.1",
             "yallist": "3.0.2"
@@ -4556,6 +4566,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -4636,7 +4647,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4648,6 +4660,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1.0.2"
           }
@@ -4769,6 +4782,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "1.1.0",
             "is-fullwidth-code-point": "1.0.0",
@@ -7321,6 +7335,14 @@
         }
       }
     },
+    "ngx-viewer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ngx-viewer/-/ngx-viewer-1.0.1.tgz",
+      "integrity": "sha512-9nYfxsxco/x8zLjdVOAhi4SFMZhSgtHBGTmcns9ebQn5nCBwHbk9O62K5ZIWkfOElr9ey1KA+DmppH32YGkXEA==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@@ -10703,6 +10725,11 @@
         "extsprintf": "1.3.0"
       }
     },
+    "viewerjs": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/viewerjs/-/viewerjs-1.3.1.tgz",
+      "integrity": "sha512-FBO2pN5XKx2yYpfZpQFSI89GhN4PvIhI2gCyahTsLzIUQzKIIRTQyAOMG5Dey7rgMMGU+JsmpfL2q/eARiB7Dg=="
+    },
     "vm-browserify": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz",

ng6-seed/package.json

@@ -58,6 +58,7 @@
     "ngx-mat-daterange-picker": "^1.1.4",
     "ngx-mat-select-search": "^1.3.1",
     "ngx-perfect-scrollbar": "5.0.0-7",
+    "ngx-viewer": "^1.0.1",
     "perfect-scrollbar": "^1.3.0",
     "quill": "^1.2.0",
     "rxjs": "^6.3.1",
@@ -67,6 +68,7 @@
     "sortablejs": "^1.6.0",
     "sweetalert2": "^7.28.4",
     "tether": "^1.4.0",
+    "viewerjs": "^1.3.1",
     "zone.js": "^0.8.26"
   },
   "devDependencies": {

ng6-seed/src/app/dashboard/dashboard.component.html

@@ -1,4 +1,4 @@
-<div class="pad-wrap">   
+<div class="pad-wrap" [style.minHeight]="'100%'">   
         <div fxFlex.gt-sm="100" fxFlex.gt-xs="100" fxFlex="100">
         <mat-card style="min-height: 90%;">                     
                 <mat-card-title>

ng6-seed/src/app/dashboard/dashboard.component.scss

@@ -20,6 +20,7 @@ li
    //float:left;
 }
 
+ 
 .example-full-width {
   width: 95%;
 }

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/add-pd/add-pd.component.html

@@ -21,12 +21,21 @@
                                     <mat-option>
                                             Select
                                             </mat-option>
-                                <mat-option *ngFor="let LL of lenderList" [value]="LL.entity_id" >
+                                    <mat-option  (click)="selectedLender(LL)" *ngFor="let LL of lenderList" [value]="LL.entity_id" >
                                     {{LL.full_name}}
                                     </mat-option>
                             </mat-select>
-                        <!-- <mat-error *ngIf="pdMain.fk_lender_id.hasError('required')" class="mat-text-warn">Lender Name Required.</mat-error> -->
+                            </mat-form-field>
-    
+                              <mat-form-field style="width: 32%">
+                            <mat-select placeholder="Branch"  formControlName="pd_branch_id">
+                                    <!-- (selectionChange)="getBillingDetails(pdMain.fk_lender_id.value)" -->
+                                    <mat-option>
+                                            Select
+                                            </mat-option>
+                                    <mat-option *ngFor="let LB of lenderBranchList" [value]="LB.entity_lender_branch_id" >
+                                    {{LB.branch_name}}
+                                    </mat-option>
+                            </mat-select>
                             </mat-form-field>
         
             <mat-form-field style="width: 32%">

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/add-pd/add-pd.component.ts

@@ -25,6 +25,7 @@ export class AddPdComponent implements OnInit, OnDestroy {
   productList:any;
   subProductList:any;
   lenderList:any;
+  lenderBranchList: any;
   customerSegmentList:any;
   stateList:any;
   cityList:any;
@@ -62,6 +63,7 @@ export class AddPdComponent implements OnInit, OnDestroy {
   loadFormData(){
     this._PDtriggerForm = this._fb.group({
       fk_lender_id: [null],
+      pd_branch_id: [null],
       lender_applicant_id: [null, Validators.compose([Validators.required])],
       lender_contact_person: [null, Validators.compose([Validators.required])],
       lender_contact_mobile: [null, Validators.compose([Validators.required,Validators.minLength(10),Validators.maxLength(12),Validators.required,Validators.pattern('^[0-9]*$')])],
@@ -92,6 +94,14 @@ export class AddPdComponent implements OnInit, OnDestroy {
 });
   }
 
+  selectedLender(lender){
+    // console.log(JSON.stringify(lender));
+    // alert(JSON.stringify(lender['branches ']));
+    this.lenderBranchList = lender['branches'];
+    this._PDtriggerForm.controls.pd_branch_id.setValue(null);
+    
+  }
+
   getLenderList(){
     this._pd.getLenderDetails().subscribe(
       data => {
@@ -358,6 +368,7 @@ export class AddPdComponent implements OnInit, OnDestroy {
         let pd_details:any={
           "fk_lender_id":formValue.fk_lender_id,
           "lender_applicant_id":formValue.lender_applicant_id,
+          "pd_branch_id":formValue.pd_branch_id,
           "pd_contact_person":formValue.lender_contact_person,
           "pd_contact_mobileno":formValue.lender_contact_mobile,
           "fk_product_id":formValue.fk_product_id,

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/all-pd/all-pd.component.html

@@ -1,58 +1,135 @@
-    <mat-card-content>
+<mat-card-content>
-        <mat-table [dataSource]="dataSourceTab1" matSort *ngIf="PdListData.length > 0" >
+    <mat-expansion-panel [(expanded)]="xpandStatus">
+        <mat-expansion-panel-header>
+            <mat-panel-title class="text-xs-left">
+                <h6 class="mt-0">
+                    <mat-icon>filter_list</mat-icon> Filter</h6>
+            </mat-panel-title>
+
+        </mat-expansion-panel-header>
+        <mat-list class="m-gap p-gap">
+            <div [formGroup]="searchForm">
+                <mat-form-field style="width:40%">
+                    <mat-select multiple formControlName="pd_type" placeholder="PD Type">
+                        <mat-option *ngFor="let type of PDType" [value]="type.pd_type_id">{{type.type_name}}</mat-option>
+                    </mat-select>
+                </mat-form-field> &nbsp; &nbsp;
+                <mat-form-field style="width:40%">
+                    <mat-select multiple formControlName="pd_status" placeholder="PD Status">
+                        <mat-option *ngFor="let status of pdStatus" [value]="status.pd_status_name">{{status.pd_status_name}}</mat-option>
+                    </mat-select>
+                </mat-form-field>
+                <mat-form-field style="width:40%">
+                    <input matInput [matDatepicker]="picker" (blur)="checkDate($event)" formControlName="pd_from_date" placeholder="Choose a From date">
+                    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+                    <mat-datepicker #picker></mat-datepicker>
+                </mat-form-field> &nbsp; &nbsp;
+                <mat-form-field style="width:40%">
+                    <input matInput [matDatepicker]="picker1" [min]="searchForm.get('pd_from_date').value" formControlName="pd_to_date" placeholder="Choose a todate">
+                    <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
+                    <mat-datepicker #picker1></mat-datepicker>
+                </mat-form-field>
+                <mat-form-field style="width:25%">
+                    <mat-select multiple formControlName="pd_products" placeholder="Products">
+                        <mat-option *ngFor="let pro of PRODUCTS" [value]="pro.product_id">{{pro.name}}</mat-option>
+                    </mat-select>
+                </mat-form-field> &nbsp; &nbsp;
+                <mat-form-field style="width:25%">
+                    <mat-select multiple formControlName="pd_city" placeholder="City">
+                        <mat-option *ngFor="let city of CITY" [value]="city.city_id">{{city.name}}</mat-option>
+                    </mat-select>
+                </mat-form-field> &nbsp; &nbsp;
+                <mat-form-field style="width:25%">
+                        <mat-select multiple formControlName="pd_lender" placeholder="Lender Name">
+                                <mat-option *ngFor="let ent of ENTITY" [value]="ent.entity_id">{{ent.full_name}}</mat-option>
+                            </mat-select>
+                      </mat-form-field> 
+                    <mat-form-field style="width:40%">
+                        <input matInput type="text" formControlName="pd_name" placeholder="Applicant Name">
+                    </mat-form-field> &nbsp; &nbsp;
+                    <mat-form-field style="width:40%">
+                            <input matInput type="text" formControlName="pd_applicant_id" placeholder="Applicant Id">
+                        </mat-form-field>
+                <br/>
+                <button type="button" mat-raised-button mat-icon-button (click)="searchItem()" matTooltip="Add More Additional Requirements"
+                    matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary" type="button">
+                    <mat-icon>search</mat-icon>
+                </button>
+            </div>
+        </mat-list>
+
+    </mat-expansion-panel>
+    <br/>
+    <mat-table [dataSource]="dataSourceTab1" matSort *ngIf="PdListData.length > 0">
 
         <ng-container matColumnDef="PDType">
 
             <mat-cell fxFlex="15" class="cell" *matCellDef="let details;" style="justify-content:flex-end">
 
-                      <div *ngIf="details.fk_pd_type != null" [ngClass]="(details.fk_pd_type=='1')?'fullPD':(details.fk_pd_type=='2')?'smartPD':'telePD'" class="mr-1 mb-1 hover-icon commonPDType"
+                <div *ngIf="details.fk_pd_type != null" [ngClass]="(details.fk_pd_type=='1')?'fullPD':(details.fk_pd_type=='2')?'smartPD':'telePD'"
-                      [matTooltip]="details.pd_type_name" matTooltipPosition="above"><strong style="font-size:3rem;">{{(details.pd_type_name | slice:0:1)}}</strong></div>
+                    class="mr-1 mb-1 hover-icon commonPDType" [matTooltip]="details.pd_type_name" matTooltipPosition="above">
+                    <strong style="font-size:3rem;">{{(details.pd_type_name | slice:0:1)}}</strong>
+                </div>
 
             </mat-cell>
         </ng-container>
         <ng-container matColumnDef="Name">
             <mat-cell class="cell" *matCellDef="let details;">
-                    <span *ngIf="details.applicat_details" mat-line><b>{{details.applicat_details[0].applicant_name}}</b></span><br> 
+                <span *ngIf="details.applicat_details" mat-line>
-                    <span class="fontsize"> {{details.lender_applicant_id}}</span> <span class="fontsize" *ngIf="details.customer_segment_abbr">-({{details.customer_segment_abbr}} )</span>
+                    <b>{{details.applicat_details[0].applicant_name}}</b>
+                </span>
+                <br>
+                <span class="fontsize"> {{details.lender_applicant_id}}</span>
+                <span class="fontsize" *ngIf="details.customer_segment_abbr">-({{details.customer_segment_abbr}} )</span>
             </mat-cell>
         </ng-container>
         <ng-container matColumnDef="Lenderid">
             <mat-cell class="cell" *matCellDef="let details">
-                    <span *ngIf="details.lender_full_name" mat-line> {{details.lender_full_name}} </span><br>
+                <span *ngIf="details.lender_full_name" mat-line> {{details.lender_full_name}} </span>
-                    <span *ngIf="details.product_abbr" mat-line class="fontsize"> {{details.product_abbr}}/{{details.subproduct_abbr}}</span> <br>
+                <br>
-                   <span *ngIf="details.loan_amount" class="fontsize"><i class="fa-1x fa fa-rupee"></i> {{details.loan_amount}}</span>
+                <span *ngIf="details.product_abbr" mat-line class="fontsize"> {{details.product_abbr}}/{{details.subproduct_abbr}}</span>
+                <br>
+                <span *ngIf="details.loan_amount" class="fontsize">
+                    <i class="fa-1x fa fa-rupee"></i> {{details.loan_amount}}</span>
             </mat-cell>
         </ng-container>
         <ng-container matColumnDef="Address">
             <mat-cell class="cell" *matCellDef="let details;">
-                     <span matTooltip="Initiated Date" matTooltipPosition="above" >{{details.pd_date_of_initiation}}</span><br>
+                <span matTooltip="Initiated Date" matTooltipPosition="above">{{details.pd_date_of_initiation}}</span>
-                    <span class="fontsize" *ngIf="details.city_name"> <i class="fa-1x fa fa-map-marker"> </i> {{details.city_name}}-{{details.pincode}}  </span> 
+                <br>
+                <span class="fontsize" *ngIf="details.city_name">
+                    <i class="fa-1x fa fa-map-marker"> </i> {{details.city_name}}-{{details.pincode}} </span>
             </mat-cell>
         </ng-container>
         <ng-container matColumnDef="Status">
             <mat-cell class="cell center" *matCellDef="let details;">
                 <span *ngIf="details.pd_status!='QC_COMPLETED'"> {{details.pd_status}}</span>
-                    <span *ngIf="details.pd_status=='QC_COMPLETED'"> QC COMPLETED</span><br>
+                <span *ngIf="details.pd_status=='QC_COMPLETED'"> QC COMPLETED</span>
-                    <span class="fontsize" *ngIf="details.pd_status!='SCHEDULED' &&  details.pd_status!='QC_COMPLETED'"  [matTooltip]="details.pd_status | titlecase"  matTooltipPosition="above" >{{ (details.updatedon)? (details.updatedon | slice:0:10):(details.updatedon) }}
+                <br>
+                <span class="fontsize" *ngIf="details.pd_status!='SCHEDULED' &&  details.pd_status!='QC_COMPLETED'" [matTooltip]="details.pd_status | titlecase"
+                    matTooltipPosition="above">{{ (details.updatedon)? (details.updatedon | slice:0:10):(details.updatedon) }}
                 </span>
-                    <span class="fontsize" *ngIf="details.pd_status=='QC_COMPLETED'"  matTooltip="QC Completed"  matTooltipPosition="above" >{{ (details.updatedon)? (details.updatedon | slice:0:10):(details.updatedon) }}
+                <span class="fontsize" *ngIf="details.pd_status=='QC_COMPLETED'" matTooltip="QC Completed" matTooltipPosition="above">{{ (details.updatedon)? (details.updatedon | slice:0:10):(details.updatedon) }}
                 </span>
-                    <span class="fontsize" *ngIf="details.pd_status=='SCHEDULED'"  [matTooltip]="details.pd_status | titlecase"  matTooltipPosition="above" >{{details.scheduled_on}}
+                <span class="fontsize" *ngIf="details.pd_status=='SCHEDULED'" [matTooltip]="details.pd_status | titlecase" matTooltipPosition="above">{{details.scheduled_on}}
                 </span>
             </mat-cell>
         </ng-container>
         <ng-container matColumnDef="Action">
             <mat-cell class="cell center" *matCellDef="let details;">
-                      <button mat-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" color="primary" (click)="viewPD(details.pd_id)" matTooltip="View" 
+                <button mat-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" color="primary" (click)="viewPD(details.pd_id)"
-                      matTooltipPosition="above"><mat-icon>visibility</mat-icon></button>
+                    matTooltip="View" matTooltipPosition="above">
+                    <mat-icon>visibility</mat-icon>
+                </button>
             </mat-cell>
         </ng-container>
         <mat-row style="align-items: normal !important;" *matRowDef="let row; columns: displayedColumns;">
         </mat-row>
     </mat-table>
 
-    </mat-card-content>
+</mat-card-content>
 
-      <mat-paginator *ngIf="!recordStatus" #paginator class="mat-elevation-z1" [length]="PdListData.length" [pageIndex]="pageIndex" [pageSize]="pageSize"
+<mat-paginator *ngIf="!recordStatus" #paginator class="mat-elevation-z1" [length]="PdListData.length" [pageIndex]="pageIndex"
-      [pageSizeOptions]="[5, 10, 25,50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
+    [pageSize]="pageSize" [pageSizeOptions]="[5, 10, 25,50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
-    </mat-paginator>      
+</mat-paginator>
+<notifier-container></notifier-container>

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/all-pd/all-pd.component.ts

@@ -1,6 +1,9 @@
 import { Component,ViewChild, OnInit, ViewEncapsulation, Input, Output, EventEmitter, OnDestroy, AfterViewInit, OnChanges, SimpleChanges } from '@angular/core';
 import { PdTrigerService } from './../../../pd-service/pd-triger.service';
 import { MatPaginator, MatSort, MatTableDataSource, PageEvent } from '@angular/material';
+import { FormGroup, FormBuilder } from '@angular/forms';
+import { DatePipe } from '@angular/common';
+import { NotifierService } from 'angular-notifier';
 
 @Component({
   selector: 'app-all-pd',
@@ -11,6 +14,16 @@ import { MatPaginator, MatSort, MatTableDataSource, PageEvent } from '@angular/m
 })
 
 export class AllPdComponent implements OnInit, OnChanges {
+  xpandStatus: boolean = false;
+  PRODUCTS: any;
+  ENTITY: any;
+  CITY: any;
+  tempStore = new MatTableDataSource();
+  PDType: any;
+  pdStatus: any;
+  searchForm:FormGroup;
+  pipe = new DatePipe('en-US');
+  public notifier : NotifierService;
   recordStatus: boolean;
   errorMessage:any[]=[];
   tabStatus:string="ALL";
@@ -34,12 +47,26 @@ export class AllPdComponent implements OnInit, OnChanges {
   pageSize = 10;
   pageEvent: PageEvent;
 
-  constructor(private _pd: PdTrigerService) { 
+  constructor(private _pd: PdTrigerService,private _fb:FormBuilder) { 
+
+        this.searchForm = this._fb.group(
+          {
+            pd_type:[null],
+            pd_status:[null],
+            pd_from_date:[null],
+            pd_to_date:[null],
+            pd_city:[null],
+            pd_products:[null],
+            pd_lender:[null],
+            pd_name:[null],
+            pd_applicant_id:[null],
+          });
     }
 
   ngOnInit() {
     this.recordStatus=false;
    // this.loadPDDetails();
+   this.getcommonDropDown();
   }
   ngAfterViewInit() {
     this.dataSourceTab1.paginator = this.paginator;
@@ -65,7 +92,7 @@ export class AllPdComponent implements OnInit, OnChanges {
             this.PdListData = data.records;
             this.dataLengthTab1 = data.records.length;
             this.dataSourceTab1.data = this.PdListData;
-            
+            this.tempStore.data = this.PdListData;
           }
           else{
             this.PdListData=[];
@@ -87,4 +114,89 @@ export class AllPdComponent implements OnInit, OnChanges {
     return word[0].toUpperCase() + word.substr(1).toLowerCase();
   }
 
+  /**
+   * Common Search
+   * sriram
+   */
+
+  getcommonDropDown()
+  {
+    this._pd.getAllMasterDatas('PDSTATUS').subscribe(res=>
+      {
+        if(res.dataStatus==true)
+        {
+          this.pdStatus = res.records.filter(status=>status.isactive==1);
+        }
+      });
+
+      this._pd.getAllMasterDatas('PDTYPE').subscribe(res=>
+        {
+          if(res.dataStatus==true)
+          {
+            this.PDType = res.records.filter(type=>type.isactive==1);
+          }
+        });
+
+      this._pd.getAllMasterDatas('CITY').subscribe(res=>
+        {
+          if(res.dataStatus==true)
+          {
+            this.CITY = res.records.filter(city=>city.isactive==1);
+          }
+        });
+        this._pd.getAllMasterDatas('ENTITY').subscribe(res=>
+          {
+            if(res.dataStatus==true)
+            {
+              this.ENTITY = res.records.filter(ent=>ent.isactive==1);
+            }
+          });
+          this._pd.getAllMasterDatas('PRODUCTS').subscribe(res=>
+            {
+              if(res.dataStatus==true)
+              {
+                this.PRODUCTS = res.records.filter(pro=>pro.isactive==1);
+              }
+            });
+          
+  }
+  checkDate(e)
+  {
+      console.log(e);
+  }
+  searchItem()
+  {
+
+    if(this.searchForm.value.pd_type !=null)
+    {
+
+    }else
+    {
+      this.searchForm.value.pd_type = [];
+    }
+
+    if(this.searchForm.value.pd_status !=null)
+    {
+
+    }else
+    {
+      this.searchForm.value.pd_status = [];
+    }
+
+    this.searchForm.value.pd_from_date = this.pipe.transform(this.searchForm.value.pd_from_date,'yyyy-MM-dd');
+    this.searchForm.value.pd_to_date = this.pipe.transform(this.searchForm.value.pd_to_date,'yyyy-MM-dd');
+      console.log(JSON.stringify(this.searchForm.value));
+    this._pd.overAllSearchFormDetails(this.searchForm.value).subscribe(res=>
+      {
+        this.xpandStatus = false;
+        if(res['dataStatus']==true)
+        {
+            this.dataSourceTab1 = res['records'];
+        }else{
+          // this.notifier.notify('warning', 'No Records Found');
+            this.dataSourceTab1 = this.tempStore;
+        }
+      })
+  }
+
 }

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/completed-pd/completed-pd.component.html

@@ -1,4 +1,66 @@
 <mat-card-content>
+
+        <mat-expansion-panel>
+                <mat-expansion-panel-header>
+                  <mat-panel-title class="text-xs-left">
+                   <h6 class="mt-0"><mat-icon>filter_list</mat-icon> Filter</h6>
+                  </mat-panel-title>
+                
+                </mat-expansion-panel-header>
+                <mat-list class="m-gap p-gap">
+                        <div [formGroup]="searchForm">
+                                <mat-form-field style="width:40%">
+                                        <mat-select multiple formControlName="pd_type" placeholder="PD Type">
+                                            <mat-option *ngFor="let type of PDType" [value]="type.pd_type_id">{{type.type_name}}</mat-option>
+                                        </mat-select>
+                                    </mat-form-field> &nbsp; &nbsp;
+                                    <mat-form-field style="width:40%">
+                                        <mat-select multiple formControlName="pd_status" placeholder="PD Status">
+                                            <mat-option *ngFor="let status of pdStatus" [value]="status.pd_status_name">{{status.pd_status_name}}</mat-option>
+                                        </mat-select>
+                                    </mat-form-field>
+                                    <mat-form-field style="width:40%">
+                                        <input matInput [matDatepicker]="picker" (blur)="checkDate($event)" formControlName="pd_from_date" placeholder="Choose a From date">
+                                        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+                                        <mat-datepicker #picker></mat-datepicker>
+                                    </mat-form-field> &nbsp; &nbsp;
+                                    <mat-form-field style="width:40%">
+                                        <input matInput [matDatepicker]="picker1" [min]="searchForm.get('pd_from_date').value" formControlName="pd_to_date" placeholder="Choose a todate">
+                                        <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
+                                        <mat-datepicker #picker1></mat-datepicker>
+                                    </mat-form-field>
+                                    <mat-form-field style="width:25%">
+                                        <mat-select multiple formControlName="pd_products" placeholder="Products">
+                                            <mat-option *ngFor="let pro of PRODUCTS" [value]="pro.product_id">{{pro.name}}</mat-option>
+                                        </mat-select>
+                                    </mat-form-field> &nbsp; &nbsp;
+                                    <mat-form-field style="width:25%">
+                                        <mat-select multiple formControlName="pd_city" placeholder="City">
+                                            <mat-option *ngFor="let city of CITY" [value]="city.city_id">{{city.name}}</mat-option>
+                                        </mat-select>
+                                    </mat-form-field> &nbsp; &nbsp;
+                                    <mat-form-field style="width:25%">
+                                            <mat-select multiple formControlName="pd_lender" placeholder="Lender Name">
+                                                    <mat-option *ngFor="let ent of ENTITY" [value]="ent.entity_id">{{ent.full_name}}</mat-option>
+                                                </mat-select>
+                                          </mat-form-field> 
+                                        <mat-form-field style="width:40%">
+                                            <input matInput type="text" formControlName="pd_name" placeholder="Applicant Name">
+                                        </mat-form-field> &nbsp; &nbsp;
+                                        <mat-form-field style="width:40%">
+                                                <input matInput type="text" formControlName="pd_applicant_id" placeholder="Applicant Id">
+                                            </mat-form-field>
+                                            <br/>
+                                          <button type="button" mat-raised-button mat-icon-button (click)="searchItem()"
+                        matTooltip="Add More Additional Requirements"  matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary" type="button">
+                            <mat-icon>search</mat-icon>
+                        </button>
+                              </div>
+                  </mat-list>
+               
+              </mat-expansion-panel>
+              <br/>
+
         <mat-table [dataSource]="dataSourceTab4" matSort *ngIf="completedPdListData.length > 0" >
     
                 <ng-container matColumnDef="PDType">

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/completed-pd/completed-pd.component.ts

@@ -1,6 +1,8 @@
 import { Component,ViewChild, OnInit, ViewEncapsulation, Input, Output, EventEmitter, OnDestroy, AfterViewInit, OnChanges, SimpleChanges } from '@angular/core';
 import { PdTrigerService } from './../../../pd-service/pd-triger.service';
 import { MatPaginator, MatSort, MatTableDataSource, PageEvent } from '@angular/material';
+import { FormGroup, FormBuilder } from '@angular/forms';
+import { DatePipe } from '@angular/common';
 
 @Component({
   selector: 'app-completed-pd',
@@ -11,11 +13,23 @@ import { MatPaginator, MatSort, MatTableDataSource, PageEvent } from '@angular/m
 })
 
 export class CompletedPdComponent implements OnInit, OnChanges {
+  xpandStatus: boolean = false;
+  PRODUCTS: any;
+  CITY: any;
+  ENTITY: any;
+  PDType: any;
+  pdStatus: any;
   recordStatus: boolean;
   errorMessage:any[]=[];
   tabStatus:string="COMPLETED";
+  pipe = new DatePipe('en-US');  
+  
   public dataLengthTab4: number;
   public dataSourceTab4 = new MatTableDataSource();
+  tempStore = new MatTableDataSource();
+
+  searchForm:FormGroup;
+  
   displayedColumns = ['PDType','Name','Lenderid','Address','Status','Action'];
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
@@ -33,12 +47,26 @@ export class CompletedPdComponent implements OnInit, OnChanges {
   pageSize = 10;
   pageEvent: PageEvent;
 
-  constructor(private _pd: PdTrigerService) { 
+  constructor(private _pd: PdTrigerService,public _fb:FormBuilder) { 
+
+    this.searchForm = this._fb.group(
+      {
+        pd_type:[null],
+        pd_status:[null],
+        pd_from_date:[null],
+        pd_to_date:[null],
+        pd_city:[null],
+        pd_products:[null],
+        pd_lender:[null],
+        pd_name:[null],
+        pd_applicant_id:[null],
+      });
     }
 
   ngOnInit() {
     this.recordStatus=false;
    // this.loadPDDetails();
+   this.getcommonDropDown();
   }
   ngAfterViewInit() {
     this.dataSourceTab4.paginator = this.paginator;
@@ -63,7 +91,7 @@ export class CompletedPdComponent implements OnInit, OnChanges {
             this.completedPdListData = data.records;
             this.dataLengthTab4 = data.records.length;
             this.dataSourceTab4.data = this.completedPdListData;
-            
+            this.tempStore.data
           }
           else{
             this.completedPdListData=[];
@@ -85,6 +113,94 @@ export class CompletedPdComponent implements OnInit, OnChanges {
     return word[0].toUpperCase() + word.substr(1).toLowerCase();
   }
 
+
+  /**
+   * Common Search
+   * sriram
+   */
+
+  getcommonDropDown()
+  {
+    this._pd.getAllMasterDatas('PDSTATUS').subscribe(res=>
+      {
+        if(res.dataStatus==true)
+        {
+          this.pdStatus = res.records.filter(status=>status.isactive==1 && status.pd_status_name==this.tabStatus);
+          // this.searchForm.controls['pd_status'].setValue(this.pdStatus[0]);
+        }
+      });
+
+      this._pd.getAllMasterDatas('PDTYPE').subscribe(res=>
+        {
+          if(res.dataStatus==true)
+          {
+            this.PDType = res.records.filter(type=>type.isactive==1);
+          }
+        });
+
+        this._pd.getAllMasterDatas('CITY').subscribe(res=>
+          {
+            if(res.dataStatus==true)
+            {
+              this.CITY = res.records.filter(city=>city.isactive==1);
+            }
+          });
+          this._pd.getAllMasterDatas('ENTITY').subscribe(res=>
+            {
+              if(res.dataStatus==true)
+              {
+                this.ENTITY = res.records.filter(ent=>ent.isactive==1);
+              }
+            });
+            this._pd.getAllMasterDatas('PRODUCTS').subscribe(res=>
+              {
+                if(res.dataStatus==true)
+                {
+                  this.PRODUCTS = res.records.filter(pro=>pro.isactive==1);
+                }
+              });
+  }
+
+  checkDate(e)
+  {
+      console.log(e);
+  }
+  searchItem()
+  {
+
+    if(this.searchForm.value.pd_type !=null)
+    {
+
+    }else
+    {
+      this.searchForm.value.pd_type = [];
+    }
+
+    if(this.searchForm.value.pd_status !=null)
+    {
+
+    }else
+    {
+      this.searchForm.value.pd_status = [];
+    }
+
+    this.searchForm.value.pd_from_date = this.pipe.transform(this.searchForm.value.pd_from_date,'yyyy-MM-dd');
+    this.searchForm.value.pd_to_date = this.pipe.transform(this.searchForm.value.pd_to_date,'yyyy-MM-dd');
+    
+    this._pd.overAllSearchFormDetails(this.searchForm.value).subscribe(res=>
+      {
+        this.xpandStatus = false;
+        
+        if(res['dataStatus']==true)
+        {
+            this.dataSourceTab4 = res['records'];
+        }else{
+          // this.notifier.notify('warning', 'No Records Found');
+            this.dataSourceTab4 = this.tempStore;
+        }
+      })
+  }
+
 }
 
 

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/inprogress-pd/inprogress-pd.component.html

@@ -1,4 +1,64 @@
 <mat-card-content>
+        <mat-expansion-panel [(expanded)]="xpandStatus">
+                <mat-expansion-panel-header >
+                  <mat-panel-title class="text-xs-left">
+                   <h6 class="mt-0"><mat-icon>filter_list</mat-icon> Filter</h6>
+                  </mat-panel-title>
+                
+                </mat-expansion-panel-header>
+                <mat-list class="m-gap p-gap">
+                        <div [formGroup]="searchForm">
+                                <mat-form-field style="width:40%">
+                                        <mat-select multiple formControlName="pd_type" placeholder="PD Type">
+                                            <mat-option *ngFor="let type of PDType" [value]="type.pd_type_id">{{type.type_name}}</mat-option>
+                                        </mat-select>
+                                    </mat-form-field> &nbsp; &nbsp;
+                                    <mat-form-field style="width:40%">
+                                        <mat-select multiple formControlName="pd_status" placeholder="PD Status">
+                                            <mat-option *ngFor="let status of pdStatus" [value]="status.pd_status_name">{{status.pd_status_name}}</mat-option>
+                                        </mat-select>
+                                    </mat-form-field>
+                                    <mat-form-field style="width:40%">
+                                        <input matInput [matDatepicker]="picker" (blur)="checkDate($event)" formControlName="pd_from_date" placeholder="Choose a From date">
+                                        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+                                        <mat-datepicker #picker></mat-datepicker>
+                                    </mat-form-field> &nbsp; &nbsp;
+                                    <mat-form-field style="width:40%">
+                                        <input matInput [matDatepicker]="picker1" [min]="searchForm.get('pd_from_date').value" formControlName="pd_to_date" placeholder="Choose a todate">
+                                        <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
+                                        <mat-datepicker #picker1></mat-datepicker>
+                                    </mat-form-field>
+                                    <mat-form-field style="width:25%">
+                                        <mat-select multiple formControlName="pd_products" placeholder="Products">
+                                            <mat-option *ngFor="let pro of PRODUCTS" [value]="pro.product_id">{{pro.name}}</mat-option>
+                                        </mat-select>
+                                    </mat-form-field> &nbsp; &nbsp;
+                                    <mat-form-field style="width:25%">
+                                        <mat-select multiple formControlName="pd_city" placeholder="City">
+                                            <mat-option *ngFor="let city of CITY" [value]="city.city_id">{{city.name}}</mat-option>
+                                        </mat-select>
+                                    </mat-form-field> &nbsp; &nbsp;
+                                    <mat-form-field style="width:25%">
+                                            <mat-select multiple formControlName="pd_lender" placeholder="Lender Name">
+                                                    <mat-option *ngFor="let ent of ENTITY" [value]="ent.entity_id">{{ent.full_name}}</mat-option>
+                                                </mat-select>
+                                          </mat-form-field> 
+                                        <mat-form-field style="width:40%">
+                                            <input matInput type="text" formControlName="pd_name" placeholder="Applicant Name">
+                                        </mat-form-field> &nbsp; &nbsp;
+                                        <mat-form-field style="width:40%">
+                                                <input matInput type="text" formControlName="pd_applicant_id" placeholder="Applicant Id">
+                                            </mat-form-field>
+                                          <br/>
+                                          <button type="button" mat-raised-button mat-icon-button (click)="searchItem()"
+                        matTooltip="Add More Additional Requirements"  matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary" type="button">
+                            <mat-icon>search</mat-icon>
+                        </button>
+                              </div>
+                  </mat-list>
+               
+              </mat-expansion-panel>
+              <br/>
         <mat-table [dataSource]="dataSourceTab2" matSort *ngIf="progressPdListData.length > 0" >
             <ng-container matColumnDef="PDType">
                 <mat-cell fxFlex="15" class="cell" style="text-align: center" *matCellDef="let details;"> 

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/inprogress-pd/inprogress-pd.component.ts

@@ -1,6 +1,8 @@
 import { Component,ViewChild, OnInit, ViewEncapsulation, Input, Output, EventEmitter, OnDestroy, AfterViewInit, OnChanges, SimpleChanges } from '@angular/core';
 import { PdTrigerService } from './../../../pd-service/pd-triger.service';
 import { MatPaginator, MatSort, MatTableDataSource, PageEvent } from '@angular/material';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { DatePipe } from '@angular/common';
 
 @Component({
   selector: 'app-inprogress-pd',
@@ -9,11 +11,19 @@ import { MatPaginator, MatSort, MatTableDataSource, PageEvent } from '@angular/m
   encapsulation: ViewEncapsulation.None
 })
 export class InprogressPdComponent implements OnInit, OnChanges {
+  xpandStatus: boolean = false;
+  PRODUCTS: any;
+  ENTITY: any;
+  CITY: any;
+  PDType: any;
+  pdStatus: any;
   recordStatus: boolean;
   errorMessage:any[]=[];
   tabStatus:string="INPROGRESS";
+  pipe = new DatePipe('en-US');    
   public dataLengthTab2: number;
   public dataSourceTab2 = new MatTableDataSource();
+  tempStore = new MatTableDataSource();
   displayedColumns = ['PDType','Name','Lenderid','Address','Status','Action'];
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
@@ -30,13 +40,27 @@ export class InprogressPdComponent implements OnInit, OnChanges {
   pageIndex = 0;
   pageSize = 10;
   pageEvent: PageEvent;
+  searchForm:FormGroup;
+  constructor(private _pd: PdTrigerService,public _fb:FormBuilder) { 
 
-  constructor(private _pd: PdTrigerService) { 
+    this.searchForm = this._fb.group(
+      {
+        pd_type:[null],
+        pd_status:[null],
+        pd_from_date:[null],
+        pd_to_date:[null],
+        pd_city:[null],
+        pd_products:[null],
+        pd_lender:[null],
+        pd_name:[null],
+        pd_applicant_id:[null],
+      });
     }
 
   ngOnInit() {
     this.recordStatus=false;
    // this.loadPDDetails();
+   this.getcommonDropDown();
   }
   ngAfterViewInit() {
     this.dataSourceTab2.paginator = this.paginator;
@@ -61,7 +85,7 @@ export class InprogressPdComponent implements OnInit, OnChanges {
             this.progressPdListData = data.records;
             this.dataLengthTab2 = data.records.length;
             this.dataSourceTab2.data = this.progressPdListData;
-            
+            this.tempStore.data = this.progressPdListData; 
           }
           else{
             this.progressPdListData=[];
@@ -82,4 +106,89 @@ export class InprogressPdComponent implements OnInit, OnChanges {
     return word[0].toUpperCase() + word.substr(1).toLowerCase();
   }
 
+
+  /**
+   * Common Search
+   * sriram
+   */
+
+  getcommonDropDown()
+  {
+    this._pd.getAllMasterDatas('PDSTATUS').subscribe(res=>
+      {
+        if(res.dataStatus==true)
+        {
+          this.pdStatus = res.records.filter(status=>status.isactive==1 && status.pd_status_name == this.tabStatus);          
+        }
+        // this.searchForm.controls['pd_status'].setValue(this.pdStatus[0]);
+      });
+
+      this._pd.getAllMasterDatas('PDTYPE').subscribe(res=>
+        {
+          if(res.dataStatus==true)
+          {
+            this.PDType = res.records.filter(type=>type.isactive==1);
+          }
+        });
+
+        this._pd.getAllMasterDatas('CITY').subscribe(res=>
+          {
+            if(res.dataStatus==true)
+            {
+              this.CITY = res.records.filter(city=>city.isactive==1);
+            }
+          });
+          this._pd.getAllMasterDatas('ENTITY').subscribe(res=>
+            {
+              if(res.dataStatus==true)
+              {
+                this.ENTITY = res.records.filter(ent=>ent.isactive==1);
+              }
+            });
+            this._pd.getAllMasterDatas('PRODUCTS').subscribe(res=>
+              {
+                if(res.dataStatus==true)
+                {
+                  this.PRODUCTS = res.records.filter(pro=>pro.isactive==1);
+                }
+              });
+  }
+  checkDate(e)
+  {
+      console.log(e);
+  }
+  searchItem()
+  {
+
+    if(this.searchForm.value.pd_type !=null)
+    {
+
+    }else
+    {
+      this.searchForm.value.pd_type = [];
+    }
+
+    if(this.searchForm.value.pd_status !=null)
+    {
+
+    }else
+    {
+      this.searchForm.value.pd_status = [];
+    }
+
+    this.searchForm.value.pd_from_date = this.pipe.transform(this.searchForm.value.pd_from_date,'yyyy-MM-dd');
+    this.searchForm.value.pd_to_date = this.pipe.transform(this.searchForm.value.pd_to_date,'yyyy-MM-dd');
+    
+    this._pd.overAllSearchFormDetails(this.searchForm.value).subscribe(res=>
+      {
+        this.xpandStatus = false;
+        if(res['dataStatus']==true)
+        {
+            this.dataSourceTab2 = res['records'];
+        }else{
+          // this.notifier.notify('warning', 'No Records Found');
+            this.dataSourceTab2 = this.tempStore;
+        }
+      })
+  }
 }

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/list-pd.component.html

@@ -7,8 +7,8 @@
             </mat-form-field>
       </div>
       <div fxFlex="50" class="pb-0 text-sm-right">
-              <button mat-fab  color="primary" (click)="viewMapPdDetails()" class="mr-1 mb-1" matTooltip="Map view" matTooltipPosition="above"><mat-icon>map</mat-icon></button> 
+              <button mat-fab (click)="viewMapPdDetails()" class="mr-1 mb-1 hover-icon" matTooltip="Map view" matTooltipPosition="above"><mat-icon>map</mat-icon></button> 
-              <button mat-fab color="primary" (click)="addPdDetails()" class="mr-1 mb-1" matTooltip="Add PD" matTooltipPosition="above"><mat-icon>add</mat-icon></button>
+              <button mat-fab (click)="addPdDetails()" class="mr-1 mb-1 hover-icon" matTooltip="Add PD" matTooltipPosition="above"><mat-icon>add</mat-icon></button>
       </div>
     </div>
     <mat-card>

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/list-pd.component.scss

@@ -21,3 +21,7 @@
 .mat-tab-label-active{
      color: red !important;
  } 
+ .mat-fab.mat-accent{
+     color:red !important;
+     background-color: #fff !important;
+ }

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/map-pd-view/map-pd-view.component.html

@@ -1,5 +1,5 @@
 
-<div fxLayout="row">
+<div fxLayout="row" [style.minHeight]="'100%'">
     <div  fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">
         <div *ngIf="!noRecordFound" class="ml-xs mr-xs" style="width: 95%;">
             <mat-form-field dividerColor="primary" class="ml-xs mr-xs" style="width: 24%;">
@@ -10,7 +10,7 @@
        
       <div>
           <div    style="text-align:right;position:absolute;z-index:2;right:1px">
-             <button mat-fab color="primary" matTooltip="Close" matTooltipPosition="above" (click)="goList()"><mat-icon>close</mat-icon></button>
+             <button mat-fab class="hover-icon" matTooltip="Close" matTooltipPosition="above" (click)="goList()"><mat-icon>close</mat-icon></button>
             </div>
             <div fxFlex="row">
             <div   fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="30" fxFlex.lg="30" fxFlex.xl="30">

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/pd-report/pd-report.component.html

@@ -43,20 +43,35 @@
                 </div>
             </mat-tab>
             <mat-tab label="PD Report">
-                <div>
-                    <div style="text-align: left; margin: 12px;" class="mb-1">
-                        <button mat-raised-button color="primary" *ngIf="generateBtn" (click)="generateNewPDReport()">Generate Report</button>
-                        <button mat-raised-button color="accent" *ngIf="reGenerateBtn" (click)="reGeneratePFReport()">Re-generate Report</button>
-                    </div>
                 <div *ngIf="reGenerateBtn">
-                    <div style="text-align: right;">
+                
-                        <mat-select style="width: 50%;" placeholder="Select PD Version" >
+
-                            <mat-option>--</mat-option>
+
-                            <mat-option *ngFor="let pd of pdReportVersionList" (click)="changeVersion(pd)" >
+<mat-card >
-                            {{ pd.doc_name }} <span *ngIf="pd.is_latest == 1" [style.color]="'green'">( Current Version )</span>
+    
-                            </mat-option>
+    <mat-card-content>
-                        </mat-select>
+            
-                    </div>
+        <mat-sidenav-container class="app-inner background-none shadow-none mail-db">
+             <button matTooltip="Menu" matTooltipPosition="above" (click)="mailnav.toggle()" color="primary" fxHide="false" fxshow.gt-sm mat-icon-button  mat-raised-button>
+                    <mat-icon style="color: white;">short_text</mat-icon>
+                </button>
+            <mat-sidenav #mailnav [mode]="isOver() ? 'over' : 'side'" [opened]="!isOver()" class="mail-sidebar pl-xs pr-xs">
+                <mat-card style="text-align:center;"> <button mat-raised-button color="red" *ngIf="reGenerateBtn" (click)="reGeneratePFReport()" style="padding: 0 58px !important;">Re-generate Report</button></mat-card>
+               <button mat-menu-item *ngFor="let pd of pdReportVersionList" [ngClass]="{'active': selectedItem == item}" (click)="changeVersion(pd)" style="font-size: 0.9em !important;height:6% !important;line-height: normal !important;">              
+              {{ pd.doc_name }}<span *ngIf="pd.is_latest == 1" [style.color]="'green'">( Current Version )</span><br>
+              <span style="color:rgba(117, 115, 115, 0.87)!important;font-size:13px !important;">{{pd.createdby}}</span><br>
+              <span style="color:rgba(117, 115, 115, 0.87)!important;font-size:13px !important;">{{pd.createdon}}</span>
+              <hr>
+
+           </button>
+           
+            </mat-sidenav>
+            
+             
+            <div class="main-content" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">
+                
+                <figure>    
+               
                     <div *ngIf="latestPDDetails">
                         <div style="margin: 12px;
                             background: #ddd;
@@ -64,16 +79,38 @@
                             <div style="text-align: right;" class="mb-1">
                                 <button mat-raised-button mat-icon-button class="hover-icon  " type="button" matTooltip="Edit" matTooltipPosition="above"
                                    *ngIf="latestPDDetails.is_latest == 1" (click)="addNewQuestion()"><mat-icon>edit</mat-icon></button>
-                            <button mat-stroked-button  *ngIf="latestPDDetails.is_latest == 0" (click)="changeDocumentEdit()">Enable Editable</button>
+                            <button mat-stroked-button  *ngIf="latestPDDetails.is_latest == 0" (click)="changeDocumentEdit()">Restore</button>
                             </div>
-                            <div>
+                            <div *ngIf="reGenerateBtn">
                                 <pdf-viewer [src]="latestPDDetails.doc_uri" [original-size]="false" [page]="1">
                                 </pdf-viewer>
                             </div>
+                           
+                        </div>
+                    </div>
+                     
+                </figure>                               
+            </div>
+        </mat-sidenav-container>
+
+    </mat-card-content>
+</mat-card>
+</div>
+              
+                   
+                    <div *ngIf="generateBtn">
+                    <div fxLayout="row wrap">
+                        <div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px"  fxLayoutGap.xs="0" style="padding: 10%;">
+                        <div fxFlex="100">                            
+                            <h5 style="text-align:center;color: black;"> {{message}}</h5>
+                            <div style="text-align:center;">
+                                <button mat-raised-button color="primary" *ngIf="generateBtn" (click)="generateNewPDReport()">Generate Report</button>
                             </div>
                             </div>
                         </div>
                         </div>
+                    </div>
+              
             </mat-tab>
         </mat-tab-group>
     </mat-card-content>

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/pd-report/pd-report.component.scss

@@ -0,0 +1,119 @@
+@import "./../../../../../assets/styles/scss/components/messages";
+:host {
+  margin-left: -5px;
+  margin-right: -5px;
+  margin-top: -5px;
+  display: block;
+}
+:host /deep/ {
+    mat-sidenav {
+        width: 267px;
+    }
+    .mat-sidenav-content {
+        padding: 0;
+        
+    }
+    @media (min-width: 959px) {
+        .mat-sidenav-side {
+            background-color: transparent;
+            box-shadow: none!important;
+        }
+        
+    }
+}
+.mat-menu-item-active {
+    color: red !important;
+}
+.mat-expansion-panel-header-description {
+    color: rgba(0, 0, 0, 87);
+}
+.mat-card-content {
+  background-color: white;
+}
+.mat-card-actions {
+  background-color: white;
+}
+
+.text-ellipsis {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.custm-list-item {
+  cursor: pointer;
+}
+
+
+$base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
+$product-bg-color-hover: rgba(103, 58, 183, 0.7);
+.p-list-main {
+    background: white;
+    margin: auto;
+    position: relative;
+    overflow: hidden !important;
+    border-radius: 10px 10px 10px 10px;
+    box-shadow: $base-card-box-shadow;
+    transform: scale(0.95);
+    transition: box-shadow 0.5s, transform 0.5s;
+    &:hover {
+        transform: scale(1);
+        box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
+    }
+    .p-list {
+        position: relative;
+        .top {
+            height: 100%;
+            width: 100%;
+            //      background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center; 
+            -webkit-background-size: 100%;
+            -moz-background-size: 100%;
+            -o-background-size: 100%;
+            background-size: 100%;
+        }
+        .bottom {
+            width: 200%;
+            height: 15%;
+            transition: transform 0.5s;
+            h1 {
+                margin: 0;
+                padding: 0;
+            }
+            p {
+                margin: 0;
+                padding: 0;
+            }
+            .left {
+                height: 100%;
+                width: 50%;
+                background: #f4f4f4;
+                position: relative;
+                float: left;
+                .details {
+                    padding: 5px;
+                    float: left;
+                    // width: calc(70% - 40px);
+                }
+               
+            }
+            .right {
+                width: 50%;
+                background: #A6CDDE;
+                color: white;
+                float: right;
+                height: 200%;
+                overflow: hidden;
+                .details {
+                    padding: 20px;
+                    float: right;
+                    width: calc(70% - 40px);
+                }
+               
+             
+            }
+        }
+    }
+   
+}
+ 
+

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/pd-report/pd-report.component.ts

@@ -32,6 +32,7 @@ export class PdReportComponent implements OnInit {
   // public src;
   pdReportRecords:any;
   latestPDDetails: any;
+  message:any;
 
   private notifier: NotifierService;
   constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
@@ -52,6 +53,36 @@ export class PdReportComponent implements OnInit {
     this.listPDComponent.showListView(false);
     this.getPdReportDetails();
     this.getPdReportVersionList();
+     // start
+
+        // end
+        const elemSidebar = <HTMLElement>document.querySelector('.app-inner .mail-sidebar');
+        const elemContent = <HTMLElement>document.querySelector('.app-inner .main-content');
+
+        if (window.matchMedia(`(min-width: 1560px)`).matches && !this.isMac()) {
+            // Ps.initialize(elemSidebar, { wheelSpeed: 2, suppressScrollX: true });
+            // Ps.initialize(elemContent, { wheelSpeed: 2, suppressScrollX: true });
+        }
+
+        // this.loadTemplates(this.startPD);
+        // this.next = 1;
+        // this.previous = 2;
+  }
+
+
+    isMac(): boolean {
+        let bool = false;
+        if (navigator.platform.toUpperCase().indexOf('MAC') >= 0 || navigator.platform.toUpperCase().indexOf('IPAD') >= 0) {
+            bool = true;
+        }
+        return bool;
+    }
+
+
+
+
+    isOver(): boolean {
+        return window.matchMedia(`(max-width: 1560px)`).matches;
     }
 
   reGeneratePFReport(){
@@ -97,6 +128,7 @@ export class PdReportComponent implements OnInit {
             } else {
               // this.reGenerateBtn = true;
               this.generateBtn = true;
+              this.message= data.msg;
             }
     }, err=> {
 
@@ -139,6 +171,7 @@ export class PdReportComponent implements OnInit {
 
   changeVersion(pd : any): void {
     this.latestPDDetails = pd;
+    console.log(this.latestPDDetails);
   }
 
   changeDocumentEdit() : void{

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/qc-completed-pd/qc-completed-pd.component.html

@@ -1,4 +1,64 @@
 <mat-card-content>
+        <mat-expansion-panel [(expanded)]="xpandStatus">
+                <mat-expansion-panel-header>
+                  <mat-panel-title class="text-xs-left">
+                   <h6 class="mt-0"><mat-icon>filter_list</mat-icon> Filter</h6>
+                  </mat-panel-title>
+                
+                </mat-expansion-panel-header>
+                <mat-list class="m-gap p-gap">
+                        <div [formGroup]="searchForm">
+                        <mat-form-field style="width:40%">
+                                <mat-select multiple formControlName="pd_type" placeholder="PD Type">
+                                        <mat-option *ngFor="let type of PDType" [value]="type.pd_type_id">{{type.type_name}}</mat-option>
+                                    </mat-select>
+                              </mat-form-field> &nbsp; &nbsp;
+                              <mat-form-field style="width:40%">
+                                    <mat-select multiple formControlName="pd_status" placeholder="PD Status">
+                                            <mat-option *ngFor="let status of pdStatus" [value]="status.pd_status_name">{{status.pd_status_name}}</mat-option>
+                                        </mat-select>
+                                  </mat-form-field> 
+                                  <mat-form-field style="width:40%">
+                                        <input matInput [matDatepicker]="picker"  (blur)="checkDate($event)" formControlName="pd_from_date" placeholder="Choose a From date">
+                                        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+                                        <mat-datepicker #picker></mat-datepicker>
+                                      </mat-form-field>&nbsp; &nbsp;
+                                      <mat-form-field style="width:40%">
+                                            <input matInput [matDatepicker]="picker1"  [min]="searchForm.get('pd_from_date').value"formControlName="pd_to_date" placeholder="Choose a todate">
+                                            <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
+                                            <mat-datepicker #picker1></mat-datepicker>
+                                          </mat-form-field>
+                                          <mat-form-field style="width:25%">
+                                                <mat-select multiple formControlName="pd_products" placeholder="Products">
+                                                    <mat-option *ngFor="let pro of PRODUCTS" [value]="pro.product_id">{{pro.name}}</mat-option>
+                                                </mat-select>
+                                            </mat-form-field> &nbsp; &nbsp;
+                                            <mat-form-field style="width:25%">
+                                                <mat-select multiple formControlName="pd_city" placeholder="City">
+                                                    <mat-option *ngFor="let city of CITY" [value]="city.city_id">{{city.name}}</mat-option>
+                                                </mat-select>
+                                            </mat-form-field> &nbsp; &nbsp;
+                                            <mat-form-field style="width:25%">
+                                                    <mat-select multiple formControlName="pd_lender" placeholder="Lender Name">
+                                                            <mat-option *ngFor="let ent of ENTITY" [value]="ent.entity_id">{{ent.full_name}}</mat-option>
+                                                        </mat-select>
+                                                  </mat-form-field> 
+                                                <mat-form-field style="width:40%">
+                                                    <input matInput type="text" formControlName="pd_name" placeholder="Applicant Name">
+                                                </mat-form-field> &nbsp; &nbsp;
+                                                <mat-form-field style="width:40%">
+                                                        <input matInput type="text" formControlName="pd_applicant_id" placeholder="Applicant Id">
+                                                    </mat-form-field>
+                                          <br/>
+                                          <button type="button" mat-raised-button mat-icon-button (click)="searchItem()"
+                        matTooltip="Add More Additional Requirements"  matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary" type="button">
+                            <mat-icon>search</mat-icon>
+                        </button>
+                              </div>
+                  </mat-list>
+               
+              </mat-expansion-panel>
+              <br/>
   <mat-table [dataSource]="dataSourceTab5" matSort *ngIf="qcCompletedPdListData.length > 0" >
         <ng-container matColumnDef="PDType">
             <mat-cell fxFlex="15" class="cell" style="text-align: center" *matCellDef="let details;"> 

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/qc-completed-pd/qc-completed-pd.component.ts

@@ -1,6 +1,8 @@
-import { Component,ViewChild, OnInit, ViewEncapsulation, Input, Output, EventEmitter, OnDestroy, AfterViewInit, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, ViewChild, OnInit, ViewEncapsulation, Input, Output, EventEmitter, OnDestroy, AfterViewInit, OnChanges, SimpleChanges } from '@angular/core';
 import { PdTrigerService } from './../../../pd-service/pd-triger.service';
 import { MatPaginator, MatSort, MatTableDataSource, PageEvent } from '@angular/material';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { DatePipe } from '@angular/common';
 
 @Component({
   selector: 'app-qc-completed-pd',
@@ -11,12 +13,22 @@ import { MatPaginator, MatSort, MatTableDataSource, PageEvent } from '@angular/m
 })
 
 export class QcCompletedPdComponent implements OnInit, OnChanges {
+  xpandStatus: boolean = false;
+  PRODUCTS: any;
+  ENTITY: any;
+  CITY: any;
+  PDType: any;
+  pdStatus: any;
   recordStatus: boolean;
-  errorMessage:any[]=[];
+  errorMessage: any[] = [];
-  tabStatus:string="QC_COMPLETED";
+  tabStatus: string = "QC_COMPLETED";
+  pipe = new DatePipe('en-US');
+
   public dataLengthTab5: number;
   public dataSourceTab5 = new MatTableDataSource();
-  displayedColumns = ['PDType','Name','Lenderid','Address','Status','Action'];
+  tempStore = new MatTableDataSource();
+  searchForm: FormGroup;
+  displayedColumns = ['PDType', 'Name', 'Lenderid', 'Address', 'Status', 'Action'];
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
@@ -25,7 +37,7 @@ export class QcCompletedPdComponent implements OnInit, OnChanges {
   @Output() loadPdView = new EventEmitter<string>();
 
   // data source variable details
-  qcCompletedPdListData:any[] = [];
+  qcCompletedPdListData: any[] = [];
 
   // pagination variable details
   length = 50;
@@ -33,12 +45,26 @@ export class QcCompletedPdComponent implements OnInit, OnChanges {
   pageSize = 10;
   pageEvent: PageEvent;
 
-  constructor(private _pd: PdTrigerService) { 
+  constructor(private _pd: PdTrigerService, public _fb: FormBuilder) {
+
+    this.searchForm = this._fb.group(
+      {
+        pd_type: [null],
+        pd_status: [null],
+        pd_from_date: [null],
+        pd_to_date: [null],
+        pd_city: [null],
+        pd_products: [null],
+        pd_lender: [null],
+        pd_name: [null],
+        pd_applicant_id: [null],
+      });
   }
 
   ngOnInit() {
-    this.recordStatus=false;
+    this.recordStatus = false;
     // this.loadPDDetails();
+    this.getcommonDropDown();
   }
   ngAfterViewInit() {
     this.dataSourceTab5.paginator = this.paginator;
@@ -51,9 +77,9 @@ export class QcCompletedPdComponent implements OnInit, OnChanges {
     filteredText = filteredText ? filteredText.trim() : filteredText;
     filteredText = filteredText ? filteredText.toLowerCase() : filteredText;
     this.dataSourceTab5.filter = filteredText;
-} 
+  }
 
-// load inprogress pd list
+  // load inprogress pd list
 
   loadPDDetails() {
     this._pd.getTabStatusPdDetails(this.tabStatus)
@@ -63,27 +89,93 @@ export class QcCompletedPdComponent implements OnInit, OnChanges {
             this.qcCompletedPdListData = data.records;
             this.dataLengthTab5 = data.records.length;
             this.dataSourceTab5.data = this.qcCompletedPdListData;
-            
+            this.tempStore.data = this.qcCompletedPdListData;
           }
-          else{
+          else {
-            this.qcCompletedPdListData=[];
+            this.qcCompletedPdListData = [];
-            this.dataLengthTab5= null;
+            this.dataLengthTab5 = null;
-            this.recordStatus=true;
+            this.recordStatus = true;
           }
-        }, error => this.errorMessage = <any> error);
+        }, error => this.errorMessage = <any>error);
   }
   pageChange(e) {
     console.log(e);
   }
-  viewPD(pdid:string){
+  viewPD(pdid: string) {
     this.loadPdView.next(pdid);
 
   }
-  titleCaseWord(word:string) {
+  titleCaseWord(word: string) {
     if (!word) return word;
     return word[0].toUpperCase() + word.substr(1).toLowerCase();
   }
 
+  /**
+   * Common Search
+   * sriram
+   */
+
+  getcommonDropDown() {
+    this._pd.getAllMasterDatas('PDSTATUS').subscribe(res => {
+      if (res.dataStatus == true) {
+        this.pdStatus = res.records.filter(status => status.isactive == 1 && status.pd_status_name == this.tabStatus);
+        // this.searchForm.controls['pd_status'].setValue(this.pdStatus[0]);
+      }
+    });
+
+    this._pd.getAllMasterDatas('PDTYPE').subscribe(res => {
+      if (res.dataStatus == true) {
+        this.PDType = res.records.filter(type => type.isactive == 1);
+      }
+    });
+    this._pd.getAllMasterDatas('CITY').subscribe(res => {
+      if (res.dataStatus == true) {
+        this.CITY = res.records.filter(city => city.isactive == 1);
+      }
+    });
+    this._pd.getAllMasterDatas('ENTITY').subscribe(res => {
+      if (res.dataStatus == true) {
+        this.ENTITY = res.records.filter(ent => ent.isactive == 1);
+      }
+    });
+    this._pd.getAllMasterDatas('PRODUCTS').subscribe(res => {
+      if (res.dataStatus == true) {
+        this.PRODUCTS = res.records.filter(pro => pro.isactive == 1);
+      }
+    });
+  }
+  checkDate(e) {
+    console.log(e);
+  }
+  searchItem() {
+
+    if (this.searchForm.value.pd_type != null) {
+
+    } else {
+      this.searchForm.value.pd_type = [];
+    }
+
+    if (this.searchForm.value.pd_status != null) {
+
+    } else {
+      this.searchForm.value.pd_status = [];
+    }
+
+    this.searchForm.value.pd_from_date = this.pipe.transform(this.searchForm.value.pd_from_date, 'yyyy-MM-dd');
+    this.searchForm.value.pd_to_date = this.pipe.transform(this.searchForm.value.pd_to_date, 'yyyy-MM-dd');
+
+    this._pd.overAllSearchFormDetails(this.searchForm.value).subscribe(res => {
+      this.xpandStatus = false;
+      if (res['dataStatus'] == true) {
+        this.dataSourceTab5 = res['records'];
+      } else {
+        console.log('else');
+        // this.notifier.notify('warning', 'No Records Found');
+        this.dataSourceTab5 = this.tempStore;
+      }
+    })
+  }
+
 }
 
 

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/scheduled-pd/scheduled-pd.component.html

@@ -1,4 +1,64 @@
 <mat-card-content>
+        <mat-expansion-panel [(expanded)]="xpandStatus">
+                <mat-expansion-panel-header>
+                  <mat-panel-title class="text-xs-left">
+                   <h6 class="mt-0"><mat-icon>filter_list</mat-icon> Filter</h6>
+                  </mat-panel-title>
+                
+                </mat-expansion-panel-header>
+                <mat-list class="m-gap p-gap">
+                        <div [formGroup]="searchForm">
+                        <mat-form-field style="width:40%">
+                                <mat-select multiple formControlName="pd_type" placeholder="PD Type">
+                                        <mat-option *ngFor="let type of PDType" [value]="type.pd_type_id">{{type.type_name}}</mat-option>
+                                    </mat-select>
+                              </mat-form-field> &nbsp; &nbsp;
+                              <mat-form-field style="width:40%">
+                                    <mat-select multiple formControlName="pd_status" placeholder="PD Status">
+                                            <mat-option *ngFor="let status of pdStatus" [value]="status.pd_status_name">{{status.pd_status_name}}</mat-option>
+                                        </mat-select>
+                                  </mat-form-field> 
+                                  <mat-form-field style="width:40%">
+                                        <input matInput [matDatepicker]="picker"  (blur)="checkDate($event)" formControlName="pd_from_date" placeholder="Choose a From date">
+                                        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+                                        <mat-datepicker #picker></mat-datepicker>
+                                      </mat-form-field> &nbsp; &nbsp;
+                                      <mat-form-field style="width:40%">
+                                            <input matInput [matDatepicker]="picker1"  [min]="searchForm.get('pd_from_date').value"formControlName="pd_to_date" placeholder="Choose a todate">
+                                            <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
+                                            <mat-datepicker #picker1></mat-datepicker>
+                                          </mat-form-field>
+                                          <mat-form-field style="width:25%">
+                                                <mat-select multiple formControlName="pd_products" placeholder="Products">
+                                                    <mat-option *ngFor="let pro of PRODUCTS" [value]="pro.product_id">{{pro.name}}</mat-option>
+                                                </mat-select>
+                                            </mat-form-field> &nbsp; &nbsp;
+                                            <mat-form-field style="width:25%">
+                                                <mat-select multiple formControlName="pd_city" placeholder="City">
+                                                    <mat-option *ngFor="let city of CITY" [value]="city.city_id">{{city.name}}</mat-option>
+                                                </mat-select>
+                                            </mat-form-field> &nbsp; &nbsp;
+                                            <mat-form-field style="width:25%">
+                                                    <mat-select multiple formControlName="pd_lender" placeholder="Lender Name">
+                                                            <mat-option *ngFor="let ent of ENTITY" [value]="ent.entity_id">{{ent.full_name}}</mat-option>
+                                                        </mat-select>
+                                                  </mat-form-field> 
+                                                <mat-form-field style="width:40%">
+                                                    <input matInput type="text" formControlName="pd_name" placeholder="Applicant Name">
+                                                </mat-form-field> &nbsp; &nbsp;
+                                                <mat-form-field style="width:40%">
+                                                        <input matInput type="text" formControlName="pd_applicant_id" placeholder="Applicant Id">
+                                                    </mat-form-field>
+                                          <br/>
+                                          <button type="button" mat-raised-button mat-icon-button (click)="searchItem()"
+                        matTooltip="Add More Additional Requirements"  matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary" type="button">
+                            <mat-icon>search</mat-icon>
+                        </button>
+                              </div>
+                  </mat-list>
+               
+              </mat-expansion-panel>
+              <br/>
         <mat-table [dataSource]="dataSourceTab3" matSort *ngIf="scheduledPdListData.length > 0" >
                 <ng-container matColumnDef="PDType">
                     <mat-cell fxFlex="15" class="cell" style="text-align: center" *matCellDef="let details;"> 

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/scheduled-pd/scheduled-pd.component.ts

@@ -1,6 +1,8 @@
 import { Component,ViewChild, OnInit, ViewEncapsulation, Input, Output, EventEmitter, OnDestroy, AfterViewInit, OnChanges, SimpleChanges } from '@angular/core';
 import { PdTrigerService } from './../../../pd-service/pd-triger.service';
 import { MatPaginator, MatSort, MatTableDataSource, PageEvent } from '@angular/material';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { DatePipe } from '@angular/common';
 
 @Component({
   selector: 'app-scheduled-pd',
@@ -9,11 +11,20 @@ import { MatPaginator, MatSort, MatTableDataSource, PageEvent } from '@angular/m
   encapsulation: ViewEncapsulation.None
 })
 export class ScheduledPdComponent implements OnInit, OnChanges {
+  xpandStatus: boolean = false;
+  PRODUCTS: any;
+  ENTITY: any;
+  CITY: any;
+  PDType: any;
+  pdStatus: any;
   recordStatus: boolean;
   errorMessage:any[]=[];
   tabStatus:string="SCHEDULED";
+  pipe = new DatePipe('en-US');  
+  searchForm:FormGroup;
   public dataLengthTab3: number;
   public dataSourceTab3 = new MatTableDataSource();
+  tempStore = new MatTableDataSource();
   displayedColumns = ['PDType','Name','Lenderid','Address','Status','Action'];
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
@@ -31,12 +42,26 @@ export class ScheduledPdComponent implements OnInit, OnChanges {
   pageSize = 10;
   pageEvent: PageEvent;
 
-  constructor(private _pd: PdTrigerService) { 
+  constructor(private _pd: PdTrigerService,public _fb:FormBuilder) { 
+
+    this.searchForm = this._fb.group(
+      {
+        pd_type:[null],
+        pd_status:[null],
+        pd_from_date:[null],
+        pd_to_date:[null],
+        pd_city:[null],
+        pd_products:[null],
+        pd_lender:[null],
+        pd_name:[null],
+        pd_applicant_id:[null],
+      });
     }
 
   ngOnInit() {
     this.recordStatus=false;
    // this.loadPDDetails();
+   this.getcommonDropDown();
   }
   ngAfterViewInit() {
     this.dataSourceTab3.paginator = this.paginator;
@@ -61,6 +86,7 @@ export class ScheduledPdComponent implements OnInit, OnChanges {
             this.scheduledPdListData = data.records;
             this.dataLengthTab3 = data.records.length;
             this.dataSourceTab3.data = this.scheduledPdListData;
+            this.tempStore.data = this.scheduledPdListData
             
           }
           else{
@@ -81,7 +107,89 @@ export class ScheduledPdComponent implements OnInit, OnChanges {
     if (!word) return word;
     return word[0].toUpperCase() + word.substr(1).toLowerCase();
   }
+/**
+   * Common Search
+   * sriram
+   */
 
+  getcommonDropDown()
+  {
+    this._pd.getAllMasterDatas('PDSTATUS').subscribe(res=>
+      {
+        if(res.dataStatus==true)
+        {
+          this.pdStatus = res.records.filter(status=>status.isactive==1 && status.pd_status_name==this.tabStatus);
+          // this.searchForm.controls['pd_status'].setValue(this.pdStatus[0]);
+        }
+      });
+
+      this._pd.getAllMasterDatas('PDTYPE').subscribe(res=>
+        {
+          if(res.dataStatus==true)
+          {
+            this.PDType = res.records.filter(type=>type.isactive==1);
+          }
+        });
+        this._pd.getAllMasterDatas('CITY').subscribe(res=>
+          {
+            if(res.dataStatus==true)
+            {
+              this.CITY = res.records.filter(city=>city.isactive==1);
+            }
+          });
+          this._pd.getAllMasterDatas('ENTITY').subscribe(res=>
+            {
+              if(res.dataStatus==true)
+              {
+                this.ENTITY = res.records.filter(ent=>ent.isactive==1);
+              }
+            });
+            this._pd.getAllMasterDatas('PRODUCTS').subscribe(res=>
+              {
+                if(res.dataStatus==true)
+                {
+                  this.PRODUCTS = res.records.filter(pro=>pro.isactive==1);
+                }
+              });
+  }
+  checkDate(e)
+  {
+      console.log(e);
+  }
+  searchItem()
+  {
+
+    if(this.searchForm.value.pd_type !=null)
+    {
+
+    }else
+    {
+      this.searchForm.value.pd_type = [];
+    }
+
+    if(this.searchForm.value.pd_status !=null)
+    {
+
+    }else
+    {
+      this.searchForm.value.pd_status = [];
+    }
+
+    this.searchForm.value.pd_from_date = this.pipe.transform(this.searchForm.value.pd_from_date,'yyyy-MM-dd');
+    this.searchForm.value.pd_to_date = this.pipe.transform(this.searchForm.value.pd_to_date,'yyyy-MM-dd');
+    
+    this._pd.overAllSearchFormDetails(this.searchForm.value).subscribe(res=>
+      {
+        this.xpandStatus = false;
+        if(res['dataStatus']==true)
+        {
+            this.dataSourceTab3 = res['records'];
+        }else{
+          // this.notifier.notify('warning', 'No Records Found');
+            this.dataSourceTab3 = this.tempStore;
+        }
+      })
+  }
 
 }
 

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.html

@@ -22,7 +22,7 @@
                     
                                     <mat-form-field>    
                                                        <!-- <input matInput placeholder="Name" formControlName="name_ans" type="text" required> -->
-                                        <input matInput placeholder="Address" formControlName="address" required>
+                                        <input matInput placeholder="Address" formControlName="address" required autocomplete="off">
                         
                                     </mat-form-field>
 
@@ -35,7 +35,7 @@
                                     </mat-form-field>
                                             
                                     <mat-form-field *ngIf="addressForm.controls['address_type'].value == 12">
-                                        <input matInput placeholder="Address Type Others" formControlName="address_type_others">
+                                        <input matInput placeholder="Address Type Others" formControlName="address_type_others" autocomplete="off">
                                     </mat-form-field>
                                              
                                     <mat-form-field>        
@@ -48,7 +48,7 @@
                                             
                                     <mat-form-field *ngIf="addressForm.controls.locality.value == 'Others'">
                                                     <input matInput placeholder="Specify Locality"
-                                                           formControlName="locality_others">
+                                                           formControlName="locality_others" autocomplete="off">
                                     </mat-form-field>
                                     
                                     <mat-form-field style="width: 30%">
@@ -87,11 +87,11 @@
                                     </mat-form-field>
                                     
                                     <mat-form-field *ngIf="addressForm.controls['address_ownership'].value == 4 " style="width: 38%">
-                                        <input matInput placeholder="Specify Other Ownership" formControlName="other_ownership">
+                                        <input matInput placeholder="Specify Other Ownership" formControlName="other_ownership" autocomplete="off">
                                     </mat-form-field>
 
                                     <mat-form-field *ngIf="addressForm.controls['address_ownership'].value == 3 " style="width: 38%">
-                                        <input matInput placeholder="What is the monthly rent paid?" formControlName="rent_amt">
+                                        <input matInput placeholder="What is the monthly rent paid?" formControlName="rent_amt" autocomplete="off">
                                     </mat-form-field>
 
                                     <mat-form-field style="width: 42%">
@@ -102,35 +102,39 @@
                                         </mat-select>
                                     </mat-form-field>
                                                 
-                                    <mat-form-field *ngIf="addressForm.controls['bussiness_activity'].value == 'yes'" style="width: 100%">
+                                     <!-- <mat-form-field *ngIf="addressForm.controls['bussiness_activity'].value == 'yes'" style="width: 100%"> -->
                                             <!-- <mat-select placeholder="Bussiness Type" formControlName="bussiness_address_type">
                                                 <mat-option value="{{m_addressType.address_type_id}}"
                                                                     *ngFor="let m_addressType of addressData">{{m_addressType.address_type}}
                                                 </mat-option>
                                             </mat-select> -->
-                                            <mat-select placeholder="Type of Premises" formControlName="bussiness_address_type" multiple>
+                                            <!-- <mat-select placeholder="Type of Premises" formControlName="bussiness_address_type" multiple>
                                                 <mat-option  *ngFor="let m_addressType of addressData"  [value]="m_addressType.address_type_id" (onSelectionChange)="SelectedPremises($event)" > {{m_addressType.address_type}} </mat-option>
                                             </mat-select>
-                                    </mat-form-field>
+                                    </mat-form-field> -->
+                                    <p>Type of Premises</p>
+                                    <div fxLayout="row wrap" class="example-section"  *ngIf="addressForm.controls['bussiness_activity'].value == 'yes'">
+                                            <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25" *ngFor="let at of addressData;let i = index;"> <!---- [formGroupName]="i"> -->
+                                                <mat-checkbox class="example-margin" color="primary" [value]="at.address_type_id" (change)="SelectedPremises($event)" [checked]="at.status==1 ? true:false">{{at.address_type}}</mat-checkbox>
+                                            </div>
+                                    </div>
                                                         
                                     <mat-form-field *ngIf="PremisesOtherFlag == true" style="width: 40%">
-                                        <input matInput placeholder="Specify Other Premises Type" formControlName="bussiness_address_type_others">
+                                        <input matInput placeholder="Specify Other Premises Type" formControlName="bussiness_address_type_others"  (change)="otherValueset()" autocomplete="off">
                                     </mat-form-field>
-                                    <mat-card formArrayName="premises">
+                                    <span formArrayName="additional_premises">
                                         <div 
-                                        *ngFor="let item of addressForm.controls.premises['controls']; let i = index;" [formGroupName]="i">
+                                        *ngFor="let item of addressForm.controls.additional_premises['controls']; let i = index;" [formGroupName]="i">
+                                      
+                                                <p>{{i+1}} . {{PremisesLabel[i]}}</p>
                                                 
-                                                <mat-card-header>
-                                                  <mat-card-title>{{i+1}} . {{PremisesLabel[i]}}</mat-card-title>
-                                                </mat-card-header>
-                                                <mat-card-content>
                                                       <mat-form-field style="width: 40%;">
                                                               <input matInput placeholder="Number Of Additional Units"
-                                                                     formControlName="no_of_additional_units">
+                                                                     formControlName="no_of_additional_units" autocomplete="off">
                                                       </mat-form-field>
                                                       <mat-form-field *ngIf="item.get('no_of_additional_units').value > 2" style="width: 40%;">
 
-                                                              <mat-select  placeholder="City" formControlName="premises_city"> <!--multiple (selectionChange)="relationChanged($event)"> -->
+                                                              <mat-select  placeholder="City" formControlName="premises_city" multiple > <!-- (selectionChange)="relationChanged($event)"> -->
                                                                   <mat-option *ngFor="let CL of cityData" [value]="CL.city_id">
                                                                       {{CL.name}}
                                                                   </mat-option>
@@ -148,18 +152,17 @@
                                                       
                                                       <!-- <mat-form-field *ngIf="addressForm.controls['premises_ownership'].value == 4 "> -->
                                                       <mat-form-field *ngIf="item.get('premises_ownership').value == 4" style="width: 40%;">
-                                                          <input matInput placeholder="Specify Other Ownership" formControlName="premises_ownership_others">
+                                                          <input matInput placeholder="Specify Other Ownership" formControlName="premises_ownership_others" autocomplete="off">
                                                       </mat-form-field>
                                                       <mat-form-field *ngIf="item.get('premises_ownership').value == 3" style="width: 40%;">
-                                                        <input matInput placeholder="What is the monthly rent paid?" formControlName="premises_rent_amt">
+                                                        <input matInput placeholder="What is the monthly rent paid?" formControlName="premises_rent_amt" autocomplete="off">
                                                     </mat-form-field>
                                                       <mat-form-field>
                                                               <input matInput placeholder="Remarks"
-                                                                      formControlName="premises_remarks" style="width: 65%;">
+                                                                      formControlName="premises_remarks" style="width: 65%;" autocomplete="off">
                                                       </mat-form-field>
-                                                </mat-card-content>
                                               </div>
-                                            </mat-card>      
+                                            </span>      
                                     <!--- Don't Remove To replace atlast of the PD Completion and creating new form (Neighbourhood check) --
                                     <mat-card>
                                         <mat-card-header>
@@ -236,110 +239,95 @@
             
         <mat-tab label="Docs">
                       <ng-template matTabContent>
-                                                        <div fxLayout="row wrap">
+                           <div fxLayout="row wrap" style="padding:20px;">
-                                                                <div fxFlex="25" class="m-gap p-gap">
+                                <div fxFlex="100">
-                                                                    <div class="p-list-main mb-2">
+                                  <div fxFlex="20" class="m-gap p-gap">
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
                                           <div class="p-list">                                                                           
-                    
+                                            <div class="top"> <img src="https://picsum.photos/2000/1500/?random=1" alt="Image 1"></div>   
-                                                                            <div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
-                                                                            <div class="bottom">
-                                                                                <div class="left">
-                                                                                    <div class="details">
-                                                                                        <small>Nivi SKM</small>
-                                                                                        <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                    </div>
-                                                                                    <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                    </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                                </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                <div fxFlex="25" class="m-gap p-gap">
-                                                                        <div class="p-list-main mb-2">
                                           <div class="p-list">
-                        
+                                              <div class="top"> <img src="https://picsum.photos/2000/1500/?random=2" alt="Image 2"></div>                                                    
-                                                                                <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                <div class="bottom">
-                                                                                    <div class="left">
-                                                                                        <div class="details">
-                                                                                            <small>Nivi SKM</small>
-                                                                                            <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                        </div>
-                                                                                        <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                        </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                                    </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                    <div fxFlex="25" class="m-gap p-gap">
-                                                                            <div class="p-list-main mb-2">
                                           <div class="p-list">  
-                            
+                                              <div class="top"><img src="https://picsum.photos/2000/1500/?random=3" alt="Image 3"></div>                                                          
-                                                                                    <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                    <div class="bottom">
-                                                                                        <div class="left">
-                                                                                            <div class="details">
-                                                                                                <small>Nivi SKM</small>
-                                                                                                <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                            </div>
-                                                                                            <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>  
-                                                                            </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                                        </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                        <div fxFlex="25" class="m-gap p-gap">
-                                                                                <div class="p-list-main mb-2">
                                           <div class="p-list">
-                                
+                                              <div class="top"> <img src="https://picsum.photos/2000/1500/?random=2" alt="Image 2"></div>                                                    
-                                                                                        <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                        <div class="bottom">
-                                                                                            <div class="left">
-                                                                                                <div class="details">
-                                                                                                    <small>Nivi SKM</small>
-                                                                                                    <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                                </div>
-                                                                                                <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                                </div>
+                                    <div fxFlex="20" class="m-gap p-gap">
-                                                                            </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                            <div fxFlex="25" class="m-gap p-gap">
-                                                                                    <div class="p-list-main mb-2">
                                           <div class="p-list">  
-                                    
+                                              <div class="top"><img src="https://picsum.photos/2000/1500/?random=3" alt="Image 3"></div>                                                          
-                                                                                            <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                            <div class="bottom">
-                                                                                                <div class="left">
-                                                                                                    <div class="details">
-                                                                                                        <small>Nivi SKM</small>
-                                                                                                        <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                                    </div>
-                                                                                                    <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                                    </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                                                </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                                <div fxFlex="25" class="m-gap p-gap">
-                                                                                        <div class="p-list-main mb-2">
                                           <div class="p-list">                                                                           
-                                        
+                                            <div class="top"> <img src="https://picsum.photos/2000/1500/?random=1" alt="Image 1"></div>   
-                                                                                                <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                                <div class="bottom">
-                                                                                                    <div class="left">
-                                                                                                        <div class="details">
-                                                                                                            <small>Nivi SKM</small>
-                                                                                                            <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                                        </div>
-                                                                                                        <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
                                 </div>
+                                <div fxFlex="row">
+                                   <div fxFlex="100" class="m-gap p-gap">
+                                          <div fxLayout="row" fxLayoutWrap="wrap">
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                          </div>
+                                            <div fxLayout="row" fxLayoutWrap="wrap">
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                          </div>                                    
+                                   </div>
                                 </div>                                 
-                    
                               </div>
                                             
                              </ng-template>

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.ts

@@ -50,12 +50,13 @@ export class AddressComponent implements OnInit {
     ownerShipData:any = [];
     cityData:any = [];
     
-    
-    
     z = 0;
 
     formPremisesArray: any = [];
-    relativeNames2: any = [];
+    formPremisesCityArray: any = [];
+    additional_premises: any=[];
+    bussiness_address_type: any=[];
+    tempArr: any[];
     //neighbourStatusData:any=["Yes","No"];
     //applicantOwnerData:any=["Yes","No","Dont Know"];
 
@@ -96,13 +97,15 @@ export class AddressComponent implements OnInit {
         this.getMasterDetails('RESIDENCEOWNERSHIP',6);
         this.getMasterDetails('CITY',7);
         this.initAddressForm();
+    
         let params: any = {};
         params.pd_id = this.pdid;
         params.pd_form_id = '5';
+    
         this._pd.retriveForm(params).subscribe(data => {
             console.log('data', data);
             //const control = <FormArray>this.addressForm.controls['neighbourhood'];
-            const control = <FormArray>this.addressForm.controls['premises'];
+            const additionalPremisesControl = <FormArray>this.addressForm.controls['additional_premises'];
            if(data.status == 200) {
             //    var result = Object.keys(data.records.neighbourhood).map(function (key) {
             //        return data.records.neighbourhood[key];
@@ -111,6 +114,7 @@ export class AddressComponent implements OnInit {
                this.addressForm.controls.address.setValue(data.records.address);
                this.addressForm.controls.pd_location.setValue(data.records.pd_location);
                this.addressForm.controls.address_type.setValue(data.records.address_type);
+               
                if(data.records.address_type == 12) {
                 this.addressForm.controls.address_type_others.setValue(data.records.address_type_others);
                }
@@ -122,44 +126,79 @@ export class AddressComponent implements OnInit {
                this.addressForm.controls.other_ownership.setValue(data.records.other_ownership);
                this.addressForm.controls.rent_amt.setValue(data.records.rent_amt);
                this.addressForm.controls.bussiness_activity.setValue(data.records.bussiness_activity);
-               if(data.records.bussiness_activity == 'yes') {
-                let selectedMembers  = Object.keys(data.records.bussiness_address_type).map(function (key) {
-                    return data.records.bussiness_address_type[key];
-                });
                
-                let enduse: any = [];
+            //    if(data.records.bussiness_activity == 'yes') {
-                let existPremises: any =[];
                    
-                selectedMembers.forEach(val => {
+            //     this.bussiness_address_type = [];
-                    enduse.push(val.premises);
-                    existPremises.push(val);
-                });
 
-                this.formPremisesArray = existPremises;
+            //     this.bussiness_address_type = (Object.keys(data.records.bussiness_address_type).map(function(key)
+            //     {   
+            //       return data.records.bussiness_address_type[key].premises_types;
+            //     }))
 
-                this.addressForm.controls.bussiness_address_type.setValue(enduse);
+            //     // console.log(bussiness_address_type);
                   
-                var result = Object.keys(data.records.premises).map(function (key) {
-                   return data.records.premises[key];
-                });
 
-                if (result.length == 0) {
+            //         let selectedPremisesDBData  = Object.keys(data.records.bussiness_address_type).map(function (key) {
-                    control.push(this.createPremises());
+            //                                         return data.records.bussiness_address_type[key];
-                } else {
+            //                                     });
-                    result.forEach(datas => {
+
-                        control.push(this.createPremises());
+            //         let enduse: any = [];
-                    });
+            //         let existPremises: any =[];
+
+            //         selectedPremisesDBData.forEach(val => {
+            //             enduse.push(val.premises_types);
+            //             existPremises.push(val);
+            //         });
+
+            //         this.formPremisesArray = existPremises;
+                    
+
+            //         this.addressForm.controls.bussiness_address_type.setValue(enduse);
+            
+            //         var additionalPremisesResult = Object.keys(data.records.additional_premises).map(function (key) {
+            //             return data.records.additional_premises[key];
+            //         });
+
+            //         this.additional_premises = additionalPremisesResult;
+
+            //         if (additionalPremisesResult.length == 0) {
+            //             additionalPremisesControl.push(this.createPremises());
+            //         } else {
+            //                 additionalPremisesResult.forEach(datas => {            
+            //                     additionalPremisesControl.push(this.createPremises());
+            //                 });                    
+            //         }
+
+            
+            //         if(data.records.bussiness_address_type == 12) {
+            //             this.addressForm.controls.bussiness_address_type_others.setValue(data.records.bussiness_address_type_others);
+            //         }
+            //    }
+
+            if(data.records.bussiness_activity == 'yes' && data.records.bussiness_address_type !=null) {
+                let that = this;
+                this.bussiness_address_type = [];
+  
+                this.bussiness_address_type = (Object.keys(data.records.bussiness_address_type).map(function(key)
+                {   
+                  return data.records.bussiness_address_type[key].premises_types;
+                }))
+                
+                this.additional_premises = Object.keys(data.records.additional_premises).map(function(key)
+                {
+                    return data.records.additional_premises[key];
+                })
+                 
                }
+               console.log(this.bussiness_address_type);
+               console.log(this.additional_premises);
                
-                this.addressForm.controls['premises'].setValue(result);
+               this.selectedValue(this.bussiness_address_type,this.additional_premises);
-                
-                if(data.records.bussiness_address_type == 12) {
-                    this.addressForm.controls.bussiness_address_type_others.setValue(data.records.bussiness_address_type_others);
-                }
-               }
                if (data.records.locality_others) {
                    this.addressForm.controls.locality_others.setValue(data.records.locality_others);
                }
+
             //    if (result.length == 0) {
             //        control.push(this.createNeighbour());
             //    } else {
@@ -173,6 +212,7 @@ export class AddressComponent implements OnInit {
            }
         });
     }
+
     public initAddressForm(): void {
         this.addressForm = this.fb.group({
             address: ['', Validators.compose([Validators.required])],
@@ -191,7 +231,7 @@ export class AddressComponent implements OnInit {
             bussiness_activity:[''],
             bussiness_address_type:[''],
             bussiness_address_type_others: [''],
-            premises: this.fb.array([])
+            additional_premises: this.fb.array([])
         });
         this.address = this.addressForm.controls['address'];
         this.addressType = this.addressForm.controls['address_type'];
@@ -251,6 +291,25 @@ export class AddressComponent implements OnInit {
             })
         });
     }
+    public viewerOptions: any = {
+  navbar: false,
+  toolbar: {
+    zoomIn: 4,
+    zoomOut: 4,
+    oneToOne: 4,
+    reset: 4,
+    prev: 4,
+    play: {
+      show: 4,
+      size: 'large',
+    },
+    next: 4,
+    rotateLeft: 4,
+    rotateRight: 4,
+    flipHorizontal: 4,
+    flipVertical: 4,
+  }
+};
     /*221118 review doc s.no 3.f
     addNeighbour() {
         const control = <FormArray>this.addressForm.controls['neighbourhood'];
@@ -297,37 +356,54 @@ export class AddressComponent implements OnInit {
                 records.bussiness_address_type_others = this.addressForm.controls.bussiness_address_type_others.value;
             }
         }
+        this.addressForm.controls.additional_premises.value.forEach((val,index)=>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
+            {
+                console.log(val);
 
-        records.premises = this.addressForm.controls.premises.value;
+                if(val.premises_city != ''){
+                    this.formPremisesCityArray = [];
+                        val.premises_city.forEach(option => {
+                            this.formPremisesCityArray.push({additional_premises_city: option});
+                            this.addressForm.controls.additional_premises.value[index].premises_city = this.formPremisesCityArray;
+                            // console.log(val);                                                                                                                                                           
+                    });
+                }
+                else{
+                    this.formPremisesCityArray = [];
                         
-        console.log(this.addressForm.controls.premises.value);
+                            this.addressForm.controls.additional_premises.value[index].premises_city = null;
                     
+                }
+            });
+            
+        records.additional_premises = this.addressForm.controls.additional_premises.value;
+        // console.log(this.formPremisesCityArray);
+        // console.log(this.addressForm.controls.premises.value);
         records.pdid = this.pdid;
         records.formid = '5';
         // records.fk_createdby = '250';
         console.log('params', records);
+
         this._pd.saveForm(records).subscribe(data => {
             console.log('data', data);
             this.notifier.notify('success', 'Saved Successfully.');
-
             }, error => {
                 this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
         });
     }
 
-    relationChanged(event) {
+    // relationChanged(event) {
-        this.relativeNames2 = [];
+    //     this.formPremisesCityArray = [];
-        event.value.forEach(option => {
+    //     event.value.forEach(option => {
-            this.relativeNames2.push({city: option});
+    //         this.formPremisesCityArray.push({city: option});
-        });
+    //     });
-    }
+    // }
-
     SelectedPremises($event){
 
         let premisesData = $event.source.value;
+        console.log(premisesData);
           
-        
+        if($event.checked === true ){
-        if($event.source._selected === true ){
       
             //this.formPremisesArray.push({member: $event.source.value});
             //this.selectedSegmentDatas.push(CustomerSegmentName.name);            
@@ -335,46 +411,183 @@ export class AddressComponent implements OnInit {
       
             //console.log(this.formPremisesArray);
       
-            this.formPremisesArray.push({premises: $event.source.value});
+            this.formPremisesArray.push({premises_types: $event.source.value});
-
-            //console.log(this.formPremisesArray);
-            
-            let array = this.addressData.filter(data => data.address_type_id == premisesData);
       
+            console.log(this.formPremisesArray);
+            const control = <FormArray>this.addressForm.controls['additional_premises'];
+            let array = this.addressData.filter(data => data.address_type_id == premisesData)[0];
+            console.log(array);
             if(premisesData == 12){
                 this.PremisesOtherFlag = true;
-                this.PremisesLabel[this.z] = this.addressForm.get('bussiness_address_type_others').value;
+                // this.PremisesLabel[this.z] = this.pdQuestionAddress.get('bussiness_address_type_others').value;
+                 control.push(this.createPremises());
+                
             }
             else{
-                this.PremisesLabel[this.z] = array[0].address_type;
+                this.PremisesLabel[this.z] = array.address_type;
+            control.push(this.createPremises());
+                
             }
+            console.log(this.PremisesLabel);
             this.z++;
       
             
-            const control = <FormArray>this.addressForm.controls['premises'];
+            
-            control.push(this.createPremises());
       
       
             
           }
-          else if($event.source._selected === false ){   
+          else if($event.checked === false ){   
-            
-            console.log('false',premisesData);
-            
             
             if(premisesData == 12){
                 this.PremisesOtherFlag = false;
             }
-
+            console.log(this.formPremisesArray);
-            const control = <FormArray>this.addressForm.controls['neighbourhood'];
+            let index = this.formPremisesArray.findIndex(form=>form.premises_types== $event.source.value);
-            control.removeAt(this.z);
+            console.log(index);
+            const control = <FormArray>this.addressForm.controls['additional_premises'];
+            control.removeAt(index); 
+            this.PremisesLabel.splice(index,1);     
+            console.log(this.z);
             this.z--;
-            //let index = this.selectedSegmentDatas.indexOf(CustomerSegmentName.name);
-            //this.selectedSegmentDatas.splice(index,1);
           }
       
         }
       
+    getCity(e)
+  { 
+    this.cityData = [];
+        e.forEach(val=>
+          {
+              this.cityData.push({additional_premises_city:val});
+          });
+          console.log(this.cityData);
+  }
+  otherValueset()
+  {
+    let z = this.z;
+    this.PremisesLabel[z-1] = this.addressForm.get('bussiness_address_type_others').value;    
+  }
+//   checkaddress(value)
+//   {
+//     // console.log(value);
+//     if(value=="OTHERS")
+//     {
+//       this.addressRemarksAccess = true;
+//     }else
+//     {
+//       this.addressRemarksAccess = false;
+//     }
+//   }
+
+
+    // SelectedPremises($event){
+    //     console.log('event',$event);
+
+    //     let premisesData = $event.source.value;
+        
+        
+    //     if($event.source._selected === true ){
+
+    //         //this.formPremisesArray.push({member: $event.source.value});
+    //         //this.selectedSegmentDatas.push(CustomerSegmentName.name);            
+    //         //console.log('true',premisesData);
+
+    //         //console.log(this.formPremisesArray);
+
+    //         this.formPremisesArray.push({premises_types: $event.source.value});
+
+    //         //console.log(this.formPremisesArray);
+            
+    //         let array = this.addressData.filter(data => data.address_type_id == premisesData);
+    
+    //         if(premisesData == 12){
+    //             this.PremisesOtherFlag = true;
+    //             this.PremisesLabel[this.z] = this.addressForm.get('bussiness_address_type_others').value;
+    //         }
+    //         else{
+    //             this.PremisesLabel[this.z] = array[0].address_type;
+    //         }
+    //         this.z++;
+    
+            
+    //         const control = <FormArray>this.addressForm.controls['additional_premises'];
+    //         control.push(this.createPremises());
+    
+    
+            
+    //       }
+    //       else if($event.source._selected === false ){   
+            
+    //         console.log('false',premisesData);
+            
+            
+    //         if(premisesData == 12){
+    //             this.PremisesOtherFlag = false;
+    //         }
+
+    //         const control = <FormArray>this.addressForm.controls['additional_premises'];
+    //         control.removeAt(this.z);
+    //         this.z--;
+    //         //let index = this.selectedSegmentDatas.indexOf(CustomerSegmentName.name);
+    //         //this.selectedSegmentDatas.splice(index,1);
+    //       }
+    
+    //     }
+
+        selectedValue(e,data)
+        {
+            console.log('501 function',);
+            console.log('inside function in bussiness_address_type,',e);
+            console.log('inside function in this.additional_premises,',data);
+          
+          let premisesData = e ;
+           this.tempArr = [];
+           let that = this;
+           this.addressData = Object.keys(this.addressData).map(function(key)
+           {
+               that.addressData[key].status = 0;
+              return that.addressData[key];
+           })
+           console.log(this.addressData);
+          premisesData.forEach((val,index)=>
+              {
+                 console.log(val);
+                this.z++;
+                // console.log(this.addressTypes);
+                this.formPremisesArray.push({premises_types: val});
+    
+                  this.tempArr.push(this.addressData.filter(add=>add.address_type_id==val)[0]);
+                  
+                  this.PremisesLabel[index] = this.tempArr[index].address_type;
+                 
+                if(data[index] !==undefined && data[index].premises_ownership < 2 ){
+                  data[index].premises_city = Object.keys(data[index].premises_city).map(function(key)
+                  {
+                        return data[index].premises_city[key].additional_premises_city;
+                  });
+                }
+                  this.addressData.forEach(data=>
+                    {
+                      if(data.address_type_id == val)
+                      {
+                        data.status = 1;
+                      }
+                    });
+                  
+              });
+              
+              const control = <FormArray>this.addressForm.controls['additional_premises'] as FormArray;
+             
+              //  control.removeAt(0);
+              this.tempArr.forEach((item,index)=>
+              {  
+                  control.push(this.createPremises());
+              });
+                
+              this.addressForm.controls['additional_premises'].setValue(data);
+        }
+    
     validateAllFormFields(formGroup: FormGroup) {
         Object.keys(formGroup.controls).forEach(field => {
             const control = formGroup.get(field);

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/assessed-income.component.html

@@ -280,112 +280,98 @@
                         </mat-tab>
                         <mat-tab label="Docs">
                           <ng-template matTabContent>
-                                                            <div fxLayout="row wrap">
+                              <div ngxViewer>
-                                                                    <div fxFlex="25" class="m-gap p-gap">
+                                     <div fxLayout="row wrap" style="padding:20px;">
-                                                                        <div class="p-list-main mb-2">
+                                <div fxFlex="100">
+                                  <div fxFlex="20" class="m-gap p-gap">
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
                                           <div class="p-list">                                                                           
-                        
+                                            <div class="top"> <img src="https://picsum.photos/2000/1500/?random=1" alt="Image 1"></div>   
-                                                                                <div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
-                                                                                <div class="bottom">
-                                                                                    <div class="left">
-                                                                                        <div class="details">
-                                                                                            <small>Nivi SKM</small>
-                                                                                            <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                        </div>
-                                                                                        <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                        </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                                    </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                    <div fxFlex="25" class="m-gap p-gap">
-                                                                            <div class="p-list-main mb-2">
                                           <div class="p-list">
-                            
+                                              <div class="top"> <img src="https://picsum.photos/2000/1500/?random=2" alt="Image 2"></div>                                                    
-                                                                                    <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                    <div class="bottom">
-                                                                                        <div class="left">
-                                                                                            <div class="details">
-                                                                                                <small>Nivi SKM</small>
-                                                                                                <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                            </div>
-                                                                                            <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                            </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                                        </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                        <div fxFlex="25" class="m-gap p-gap">
-                                                                                <div class="p-list-main mb-2">
                                           <div class="p-list">  
-                                
+                                              <div class="top"><img src="https://picsum.photos/2000/1500/?random=3" alt="Image 3"></div>                                                          
-                                                                                        <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                        <div class="bottom">
-                                                                                            <div class="left">
-                                                                                                <div class="details">
-                                                                                                    <small>Nivi SKM</small>
-                                                                                                    <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                                </div>
-                                                                                                <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>  
-                                                                                </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                                            </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                            <div fxFlex="25" class="m-gap p-gap">
-                                                                                    <div class="p-list-main mb-2">
                                           <div class="p-list">
-                                    
+                                              <div class="top"> <img src="https://picsum.photos/2000/1500/?random=2" alt="Image 2"></div>                                                    
-                                                                                            <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                            <div class="bottom">
-                                                                                                <div class="left">
-                                                                                                    <div class="details">
-                                                                                                        <small>Nivi SKM</small>
-                                                                                                        <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                                    </div>
-                                                                                                    <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                                    </div>
+                                    <div fxFlex="20" class="m-gap p-gap">
-                                                                                </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                                <div fxFlex="25" class="m-gap p-gap">
-                                                                                        <div class="p-list-main mb-2">
                                           <div class="p-list">  
-                                        
+                                              <div class="top"><img src="https://picsum.photos/2000/1500/?random=3" alt="Image 3"></div>                                                          
-                                                                                                <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                                <div class="bottom">
-                                                                                                    <div class="left">
-                                                                                                        <div class="details">
-                                                                                                            <small>Nivi SKM</small>
-                                                                                                            <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                                        </div>
-                                                                                                        <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                                        </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                                                    </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                                    <div fxFlex="25" class="m-gap p-gap">
-                                                                                            <div class="p-list-main mb-2">
                                           <div class="p-list">                                                                           
-                                            
+                                            <div class="top"> <img src="https://picsum.photos/2000/1500/?random=1" alt="Image 1"></div>   
-                                                                                                    <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                                    <div class="bottom">
-                                                                                                        <div class="left">
-                                                                                                            <div class="details">
-                                                                                                                <small>Nivi SKM</small>
-                                                                                                                <!-- <p>{{docs.pd_document_name}}</p> -->
                                           </div>
-                                                                                                            <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                      </div>
+                                  </div>
+                                </div>
+                                <div fxFlex="row">
+                                   <div fxFlex="100" class="m-gap p-gap">
+                                          <div fxLayout="row" fxLayoutWrap="wrap">
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                          </div>
+                                            <div fxLayout="row" fxLayoutWrap="wrap">
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
                                               </div>
                                           </div>                                    
                                    </div>
                                 </div>                                 
                               </div>    
-                        
                               </div>                                            
-                                                
                                  </ng-template>
                         </mat-tab>
                       

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/assessed-income.component.scss

@@ -48,6 +48,9 @@ tr.mat-footer-row {
     mat-form-field {
       margin: 0 2%;
     }
+     ::ng-deep .cdk-global-overlay-wrapper{
+        justify-content: center !important;
+}
     $base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
   $product-bg-color-hover: rgba(103, 58, 183, 0.7);
   .p-list-main {

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/assessed-income.component.ts

@@ -53,7 +53,25 @@ salesMonthWiseExpandedItems: any=[]
       this.notifier = notifier;
       this.form_id = 16;
     }
-
+public viewerOptions: any = {
+  navbar: false,
+  toolbar: {
+    zoomIn: 4,
+    zoomOut: 4,
+    oneToOne: 4,
+    reset: 4,
+    prev: 4,
+    play: {
+      show: 4,
+      size: 'large',
+    },
+    next: 4,
+    rotateLeft: 4,
+    rotateRight: 4,
+    flipHorizontal: 4,
+    flipVertical: 4,
+  }
+};
   ngOnInit() {
    
     this.initAssessedIncomeForm();

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assets-info/assets-info.component.html

@@ -14,7 +14,307 @@
 
 
         <mat-tab-group>
-                <mat-tab label="Questions">
+            <mat-tab label="Business Asset Questions">
+                <ng-template matTabContent>
+                      <div fxLayout="row wrap">
+                              <div fxFlex="100">
+                                <mat-card style="min-height: 550px;">
+                                  <mat-card-content>
+                                      <div fxLayout="row" fxLayoutAlign="start none">
+                                        <div formArrayName="business_assets_details" fxFill>
+                                          <div *ngFor="let sup of _assetsQuesFrom.controls.business_assets_details['controls']; let i=index">
+                                            <mat-card>
+                                              <mat-card-content>
+                                                <div [formGroupName]="i">
+                                                  <div fxLayout="row wrap" fxLayoutGap="5px" fxLayoutAlign="start none">
+                                                    <mat-form-field style="width:100%">
+                                                      <mat-select (selectionChange)="selectedAssetsType($event, i,2)" placeholder="Assets Type" formControlName="business_assets_mode" requried>
+                                                        <mat-option *ngFor="let asset of m_assets_type" [value]="asset.id">{{ asset.name }}</mat-option>
+                                                      </mat-select>
+                                                    </mat-form-field>
+                                                  </div>
+                                                        <!--Desction Dynamic details: START-->
+                                                             <div formArrayName="business_details" class="example-full-width">
+                                                                <!--Property-->
+                                                                <div *ngIf="sup.get('business_assets_mode').value == 1 ">
+                                                                  <div fxLayout="row" fxLayoutGap="2px" fxLayoutAlign="start none">
+                                                                    <div *ngFor="let detail of sup['controls'].business_details['controls']; let s = index">
+                                                                      <div [formGroupName]="s">
+                                                                        <div>
+                                                                          <mat-form-field style="width:100%">
+                                                                            <mat-select placeholder="Property Type" formControlName="property_type" required>
+                                                                              <mat-option *ngFor="let prop of m_propertyType" [value]="prop.id">{{ prop.name }}</mat-option>
+                                                                            </mat-select>
+                                                                          </mat-form-field>
+                                                                        </div>
+                                                                        <div>
+                                                                          <mat-form-field *ngIf="detail.get('property_type').value == 5">
+                                                                              <input matInput placeholder="Other Property Type" formControlName="other_property_type" autocomplete="off">
+                                                                            </mat-form-field>
+                                                                        </div>
+                                                                      </div>
+                                                                    </div>
+                                                                  </div>
+                                                                </div>
+                                                                <!--Four Wheeler-->
+                                                                <div *ngIf="sup.get('business_assets_mode').value == 2">
+                                                                  <div fxLayout="row" fxLayoutGap="2px" fxLayoutAlign="start none">
+                                                                    <div *ngFor="let detail of sup['controls'].business_details['controls']; let s = index">
+                                                                      <div [formGroupName]="s">
+                                                                        <div>
+                                                                          <mat-form-field class="ml-xs example-full-width">
+                                                                            <input matInput placeholder="Manufacturer, Model" formControlName="manufacturer_model_four_weeler" required autocomplete="off">
+                                                                          </mat-form-field>
+                                                                        </div>
+                                                                      </div>
+                                                                    </div>
+                                                                  </div>
+                                                                </div>
+                                                                <!--Two Wheeler-->
+                                                                <div *ngIf="sup.get('business_assets_mode').value == 3">
+                                                                  <div fxLayout="row" fxLayoutGap="2px" fxLayoutAlign="start none">
+                                                                    <div *ngFor="let detail of sup['controls'].business_details['controls']; let s = index">
+                                                                      <div [formGroupName]="s">
+                                                                        <div>
+                                                                          <mat-form-field class="ml-xs example-full-width">
+                                                                            <input matInput placeholder="Manufacturer, Model" formControlName="manufacturer_model_two_weeler" required autocomplete="off">
+                                                                          </mat-form-field>
+                                                                        </div>
+                                                                      </div>
+                                                                    </div>
+                                                                  </div>
+                                                                </div>
+                                                                <!--Consumer Durable-->
+                                                                <div *ngIf="sup.get('business_assets_mode').value == 5">
+                                                                  <div fxLayout="row" fxLayoutGap="2px" fxLayoutAlign="start none">
+                                                                    <div *ngFor="let detail of sup['controls'].business_details['controls']; let s = index">
+                                                                      <div [formGroupName]="s">
+                                                                        <div>
+                                                                          <mat-form-field class="ml-xs example-full-width">
+                                                                            <input matInput placeholder="Description" formControlName="consumer_durable_description" required>
+                                                                          </mat-form-field>
+                                                                        </div>
+                                                                      </div>
+                                                                    </div>
+                                                                  </div>
+                                                                </div>
+                                                                <!--Insurance-->
+                                                                <div *ngIf="sup.get('business_assets_mode').value == 6">
+                                                                  <div fxFill>
+                                                                    <div *ngFor="let detail of sup['controls'].business_details['controls']; let s = index">
+                                                                      <div [formGroupName]="s">
+                                                                        <div fxLayout="row wrap" fxLayoutGap="2px" fxLayoutAlign="start none">
+                                                                          <div fxFlex="33">
+                                                                            <mat-form-field class="ml-xs example-full-width">
+                                                                              <input matInput placeholder="Premium Paid" formControlName="premium_paid" required (keypress)="keyPress($event)" autocomplete="off">
+                                                                            </mat-form-field>
+                                                                          </div>
+                                                                          <div fxFlex="33">
+                                                                            <mat-form-field>
+                                                                              <mat-select placeholder="Frequency" formControlName="frequency_mode" required>
+                                                                                <mat-option *ngFor="let freqn of m_freqOfPurchase" [value]="freqn.frequency_id">{{ freqn.name }}</mat-option>
+                                                                              </mat-select>
+                                                                            </mat-form-field>
+                                                                          </div>
+                                                                          <div fxFlex="33">
+                                                                            <mat-form-field class="ml-xs example-full-width">
+                                                                              <input matInput placeholder="Sum Assured" formControlName="sum_assured" required (keypress)="keyPress($event)" autocomplete="off">
+                                                                            </mat-form-field>
+                                                                          </div>
+                                                                        </div>
+                                                                        <div fxLayout="row wrap" fxLayoutGap="2px" fxLayoutAlign="start none">
+                                                                          <div fxFlex="33">
+                                                                            <mat-form-field class="ml-xs example-full-width">
+                                                                              <input matInput placeholder="Members Covered" formControlName="members_coverd" required autocomplete="off">
+                                                                            </mat-form-field>
+                                                                          </div>
+                                                                        </div>
+                                                                      </div>
+                                                                    </div>
+                                                                  </div>
+                                                                </div>
+                                                                <!--Investments-->
+                                                                <div *ngIf="sup.get('business_assets_mode').value == 7">
+                                                                    <div>
+                                                                      <div *ngFor="let detail of sup['controls'].business_details['controls']; let s = index">
+                                                                        <div [formGroupName]="s">
+                                                                          <div fxLayout="row wrap" fxLayoutGap="2px" fxLayoutAlign="start none">
+                                                                            <div fxFlex="33">
+                                                                              <mat-form-field>
+                                                                                <mat-select placeholder="Type" formControlName="investments_type" required>
+                                                                                  <mat-option *ngFor="let ins_type of m_investmentType" [value]="ins_type.id">{{ ins_type.name }}</mat-option>
+                                                                                </mat-select>
+                                                                              </mat-form-field>
+                                                                            </div>
+                                                                            <!-- <div fxFlex="33" *ngIf="detail.get('investments_type').value == 6 ">  -->
+                                                                              <mat-form-field>
+                                                                                  <input matInput placeholder="Specify Other Type" formControlName="other_investments_type" autocomplete="off">
+                                                                              </mat-form-field>
+                                                                            <!-- </div> -->
+                                                                            <div fxFlex="33" >
+                                                                              <mat-form-field class="ml-xs example-full-width">
+                                                                                <input matInput placeholder="Amount of Investment" formControlName="amount_of_invest" required (keypress)="keyPress($event)" autocomplete="off">
+                                                                              </mat-form-field>
+                                                                            </div>
+                                                                            <div fxFlex="33">
+                                                                              <mat-form-field class="ml-xs example-full-width">
+                                                                                <input matInput placeholder="Bank Name" formControlName="bank_name" required autocomplete="off">                             
+                                                                              </mat-form-field>
+                                                                            </div>
+                                                                          </div>
+                                                                        </div>
+                                                                      </div>
+                                                                    </div>
+                                                                  </div>
+                                                                <!--other assets-->
+                                                                <!-- <div *ngIf="sup.get('assets_mode').value == 8"> -->
+                                                                  <div *ngIf="sup.get('business_assets_mode').value == 8">
+                                                                  <div fxLayout="row" fxLayoutGap="2px" fxLayoutAlign="start none">
+                                                                    <div *ngFor="let detail of sup['controls'].business_details['controls']; let s = index">
+                                                                      <div [formGroupName]="s">
+                                                                        <div>
+                                                                          <mat-form-field class="ml-xs example-full-width">
+                                                                            <input matInput placeholder="Description of the Assets" formControlName="any_other_assets" required autocomplete="off">
+                                                                          </mat-form-field>
+                                                                          <mat-form-field class="ml-xs example-full-width">
+                                                                              <input matInput placeholder="Value of the Assets" formControlName="any_other_asset_value" required autocomplete="off">
+                                                                          </mat-form-field>
+                                                                          <!-- <mat-form-field class="ml-xs example-full-width"> -->
+                                                                                <!-- <input matInput placeholder="Is Any Loan" formControlName="any_other_asset_loan" required> -->
+                                                                            <!-- </mat-form-field> -->
+                                                                            <mat-form-field class="ml-xs example-full-width">
+                                                                                  <mat-select placeholder="Is there any asset loan?" formControlName="any_other_asset_loan" required>
+                                                                                    <mat-option value="yes">Yes</mat-option>
+                                                                                    <mat-option value="no">No</mat-option>
+                                                                                    <mat-option value="nan">NAN</mat-option>
+                                                                                  </mat-select>
+                                                                                </mat-form-field>
+                                                                            <!-- <mat-form-field class="ml-xs example-full-width" *ngIf="detail.get(any_other_asset_loan).value == 'yes'"> -->
+                                                                                <mat-form-field class="ml-xs example-full-width">
+                                                                                <input matInput placeholder="What is the EMI amount ?" formControlName="other_asset_emi_amt" autocomplete="off">
+                                                                                <!-- <span matSuffix>.00</span> -->
+                                                                            </mat-form-field>
+                                                                        </div>
+                                                                      </div>
+                                                                    </div>
+                                                                  </div>
+                                                                </div>
+                                                               
+                                                             </div>
+                                                        <!--Desction Dynamic details : END -->                    
+                                                        <!-- {{sup.get('business_assets_mode').value}} -->
+                                                  <div fxLayout="row wrap" fxLayoutGap="2px" fxLayoutAlign="start none">
+                                                    <div *ngIf="sup.get('business_assets_mode').value == 1 || sup.get('business_assets_mode').value == 4">
+                                                      <div fxFlex="33">
+                                                        <mat-form-field class="ml-xs example-full-width">
+                                                          <input matInput placeholder="Approximate Market Value" formControlName="business_approximate_market_value" (keypress)="keyPress($event)" autocomplete="off">
+                                                        </mat-form-field>
+                                                      </div>
+                                                    </div>
+                                                    <div *ngIf="sup.get('business_assets_mode').value == 1 || sup.get('business_assets_mode').value == 2 || sup.get('business_assets_mode').value == 3 || sup.get('business_assets_mode').value == 4 || sup.get('business_assets_mode').value == 5">
+
+                                                      <div fxFlex="33">
+                                                        <mat-form-field class="ml-xs example-full-width">
+                                                          <input matInput placeholder="Name of the Owner" formControlName="business_name_of_the_owner" autocomplete="off">
+                                                        </mat-form-field>
+                                                      </div>
+
+                                                      <!-- <div fxFlex="33">
+                            
+                                                      <mat-form-field class="ml-xs example-full-width">
+                                                          <mat-select placeholder="Name of the Owner"
+                                                          formControlName="business_name_of_the_owner" required>
+                                                              
+                                                              <mat-option value="{{owner.pd_co_applicant_id}}" *ngFor="let owner of applicants">{{owner.applicant_name}}</mat-option>
+                                                              
+                                                          </mat-select>
+                                                      </mat-form-field>
+                                                    </div>
+                                                      <div fxFlex="33">
+                                                      <mat-form-field class="ml-xs example-full-width" *ngIf="sup.get('business_name_of_the_owner').value == 0">
+                                                          <input matInput placeholder="Specify Other Owner Name"
+                                                                 formControlName="other_owner" autocomplete="off">
+                                                      </mat-form-field>
+                                                    </div>
+                                                    <div fxFlex="33">
+                                                      <mat-form-field class="ml-xs example-full-width">
+                                                          <mat-select placeholder="Relation" formControlName="relation" required>
+                                                              <mat-option value="{{relations.relationship_id}}"
+                                                                          *ngFor="let relations of m_relation">
+                                                                  {{relations.name}}
+                                                              </mat-option>
+                                                          </mat-select>
+                                                      </mat-form-field>
+                                                     </div> -->
+
+                                        
+                                                    </div>
+                                                  </div>
+                                                  <div *ngIf="sup.get('business_assets_mode').value == 1 || sup.get('business_assets_mode').value == 2 || sup.get('business_assets_mode').value == 3 || sup.get('business_assets_mode').value == 4 || sup.get('business_assets_mode').value == 5">
+                                                      <div fxLayout="row wrap" fxLayoutGap="2px" fxLayoutAlign="start none">
+                                                        <div fxFlex="33">
+                                                          <mat-form-field class="ml-xs example-full-width" style="width:95%">
+                                                            <mat-select placeholder="Is there a loan existing against this asset?" formControlName="business_emi">
+                                                              <mat-option value="yes">Yes</mat-option>
+                                                              <mat-option value="no">No</mat-option>
+                                                            </mat-select>
+                                                          </mat-form-field>
+                                                        </div>
+                                                        <div *ngIf="sup.get('business_emi').value === 'yes'" fxFlex="33">
+                                                          <mat-form-field class="ml-xs example-full-width"  style="width:95%">
+                                                            <input matInput placeholder="Amount of EMI on This Loan?" formControlName="business_emi_paid" (keypress)="keyPress($event)" autocomplete="off">
+                                                          </mat-form-field>
+                                                        </div>
+                                                        <div *ngIf="sup.get('business_emi').value === 'yes'" fxFlex="33">
+                                                          <mat-form-field class="ml-xs example-full-width"  style="width:95%">
+                                                            <input matInput placeholder="Original Loan Tenure in Months" formControlName="business_original_loan_tenure"  autocomplete="off" (change)="loanCalc(sup,2)">
+                                                          </mat-form-field>
+                                                        </div>
+                                                        <div *ngIf="sup.get('business_emi').value === 'yes'" fxFlex="33"  style="width:95%">
+                                                          <mat-form-field class="ml-xs example-full-width">
+                                                            <input matInput placeholder="Balance Tenure in Months" formControlName="business_balance_tenure" autocomplete="off" (change)="loanCalc(sup,2)">
+                                                          </mat-form-field>
+                                                        </div>
+                                                        <div *ngIf="sup.get('business_emi').value === 'yes' && sup.get('business_original_loan_tenure').value != ''  && sup.get('business_balance_tenure').value != '' " fxFlex="33"  style="width:95%">
+                                                          <mat-form-field class="ml-xs example-full-width">
+                                                            <input matInput placeholder="Elapsed Tenure in Months" formControlName="business_elapsed_tenure" autocomplete="off">
+                                                          </mat-form-field>
+                                                            <!-- <p>Elapsed tenure is {{elapsed_tenure}}</p> -->
+                                                        </div>
+                                                        </div>
+                                                    </div>
+                                      
+
+                                                
+                                                  <div fxLayout="row" fxLayoutGap="12px" fxLayoutAlign="start none">
+                                                    <div fxFlex="20">
+                                                      <span *ngIf="_assetsQuesFrom.controls.business_assets_details.controls.length > 1" (click)="removeLanguage(i,2)"> 
+                                                          <button mat-raised-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>
+                                              </mat-card-content>
+                                            </mat-card>
+                                          </div>
+                                        </div>
+                                      </div>
+                                      
+                                      <div class="row" style="text-align:right;">
+                                        <button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Business Asset Details" matTooltipPosition="above"
+                                          class="mr-1 mb-1 hover-icon" (click)="addSupplierDetails($event,2); false"><mat-icon>add</mat-icon></button>
+                                      </div>
+                                    
+                                  </mat-card-content>
+
+
+
+                                </mat-card>
+                              </div>
+                      </div>
+                </ng-template>
+              </mat-tab>
+            <mat-tab label="Other Asset Questions">
                   <ng-template matTabContent>
                         <div fxLayout="row wrap">
                                 <div fxFlex="100">
@@ -29,7 +329,7 @@
                 <div [formGroupName]="i">
                   <div fxLayout="row wrap" fxLayoutGap="5px" fxLayoutAlign="start none">
                     <mat-form-field style="width:100%">
-                      <mat-select (selectionChange)="selectedAssetsType($event, i)" placeholder="Assets Type" formControlName="assets_mode" requried>
+                      <mat-select (selectionChange)="selectedAssetsType($event, i,1)" placeholder="Assets Type" formControlName="assets_mode" requried>
                         <mat-option *ngFor="let asset of m_assets_type" [value]="asset.id">{{ asset.name }}</mat-option>
                       </mat-select>
                     </mat-form-field>
@@ -50,7 +350,7 @@
                             </div>
                             <div>
                               <mat-form-field *ngIf="detail.get('property_type').value == 5">
-                                  <input matInput placeholder="Other Property Type" formControlName="other_property_type">
+                                  <input matInput placeholder="Other Property Type" formControlName="other_property_type" autocomplete="off">
                                 </mat-form-field>
                             </div>
                           </div>
@@ -64,7 +364,7 @@
                           <div [formGroupName]="s">
                             <div>
                               <mat-form-field class="ml-xs example-full-width">
-                                <input matInput placeholder="Manufacturer, Model" formControlName="manufacturer_model_four_weeler" required>
+                                <input matInput placeholder="Manufacturer, Model" formControlName="manufacturer_model_four_weeler" required autocomplete="off">
                               </mat-form-field>
                             </div>
                           </div>
@@ -78,7 +378,7 @@
                           <div [formGroupName]="s">
                             <div>
                               <mat-form-field class="ml-xs example-full-width">
-                                <input matInput placeholder="Manufacturer, Model" formControlName="manufacturer_model_two_weeler" required>
+                                <input matInput placeholder="Manufacturer, Model" formControlName="manufacturer_model_two_weeler" required autocomplete="off">
                               </mat-form-field>
                             </div>
                           </div>
@@ -92,7 +392,7 @@
                             <div [formGroupName]="s">
                               <div>
                                 <mat-form-field class="ml-xs example-full-width">
-                                  <input matInput placeholder="Description" formControlName="jwell_description">
+                                  <input matInput placeholder="Description" formControlName="jwell_description" autocomplete="off">
                                 </mat-form-field>
                               </div>
                             </div>
@@ -128,7 +428,7 @@
                               </div>-->
                               <div fxFlex="33">
                                 <mat-form-field class="ml-xs example-full-width">
-                                  <input matInput placeholder="Premium Paid" formControlName="premium_paid" required (keypress)="keyPress($event)">
+                                  <input matInput placeholder="Premium Paid" formControlName="premium_paid" required (keypress)="keyPress($event)" autocomplete="off">
                                 </mat-form-field>
                               </div>
                               <div fxFlex="33">
@@ -140,14 +440,14 @@
                               </div>
                               <div fxFlex="33">
                                 <mat-form-field class="ml-xs example-full-width">
-                                  <input matInput placeholder="Sum Assured" formControlName="sum_assured" required (keypress)="keyPress($event)">
+                                  <input matInput placeholder="Sum Assured" formControlName="sum_assured" required (keypress)="keyPress($event)" autocomplete="off">
                                 </mat-form-field>
                               </div>
                             </div>
                             <div fxLayout="row wrap" fxLayoutGap="2px" fxLayoutAlign="start none">
                               <div fxFlex="33">
                                 <mat-form-field class="ml-xs example-full-width">
-                                  <input matInput placeholder="Members Covered" formControlName="members_coverd" required>
+                                  <input matInput placeholder="Members Covered" formControlName="members_coverd" required autocomplete="off">
                                 </mat-form-field>
                               </div>
                             </div>
@@ -161,7 +461,7 @@
                         <div *ngFor="let detail of sup['controls'].details['controls']; let s = index">
                           <div [formGroupName]="s">
                             <div fxLayout="row wrap" fxLayoutGap="2px" fxLayoutAlign="start none">
-                              <div fxFlex="33">
+                              <div fxFlex="33%" class="ml-xs example-full-width">
                                 <mat-form-field>
                                   <mat-select placeholder="Type" formControlName="investments_type" required>
                                     <mat-option *ngFor="let ins_type of m_investmentType" [value]="ins_type.id">{{ ins_type.name }}</mat-option>
@@ -169,18 +469,22 @@
                                 </mat-form-field>
                               </div>
                               <!-- <div fxFlex="33" *ngIf="detail.get('investments_type').value == 6 ">  -->
-                                <mat-form-field>
+                                 <div fxFlex="33%" >
-                                    <input matInput placeholder="Specify Other Type" formControlName="other_investments_type">
-                                </mat-form-field>
-                              <!-- </div> -->
-                              <div fxFlex="33" >
                                 <mat-form-field class="ml-xs example-full-width">
-                                  <input matInput placeholder="Amount of Investment" formControlName="amount_of_invest" required (keypress)="keyPress($event)">
+                                    <input matInput placeholder="Specify Other Type" formControlName="other_investments_type" autocomplete="off">
                                 </mat-form-field>
                                  </div>
-                              <div fxFlex="33">
+                              <!-- </div> -->
+                              <div fxFlex="33%" >
                                 <mat-form-field class="ml-xs example-full-width">
-                                  <input matInput placeholder="Bank Name" formControlName="bank_name" required>                             
+                                  <input matInput placeholder="Amount of Investment" formControlName="amount_of_invest" required (keypress)="keyPress($event)" autocomplete="off">
+                                </mat-form-field>
+                              </div>
+                            </div>
+                             <div fxLayout="row wrap" fxLayoutGap="2px" fxLayoutAlign="start none">
+                              <div fxFlex="33%">
+                                <mat-form-field class="ml-xs example-full-width">
+                                  <input matInput placeholder="Bank Name" formControlName="bank_name" required autocomplete="off">                             
                                 </mat-form-field>
                               </div>
                             </div>
@@ -195,10 +499,10 @@
                           <div [formGroupName]="s">
                             <div>
                               <mat-form-field class="ml-xs example-full-width">
-                                <input matInput placeholder="Description of the Assets" formControlName="any_other_assets" required>
+                                <input matInput placeholder="Description of the Assets" formControlName="any_other_assets" required autocomplete="off">
                               </mat-form-field>
                               <mat-form-field class="ml-xs example-full-width">
-                                  <input matInput placeholder="Value of the Assets" formControlName="any_other_asset_value" required>
+                                  <input matInput placeholder="Value of the Assets" formControlName="any_other_asset_value" required autocomplete="off">
                               </mat-form-field>
                               <!-- <mat-form-field class="ml-xs example-full-width"> -->
                                     <!-- <input matInput placeholder="Is Any Loan" formControlName="any_other_asset_loan" required> -->
@@ -209,10 +513,12 @@
                                         <mat-option value="no">No</mat-option>
                                         <mat-option value="nan">NAN</mat-option>
                                       </mat-select>
+                                      <!-- <input matInput placeholder="What is the EMI amount ?" formControlName="any_other_asset_loan" autocomplete="off"> -->
                                     </mat-form-field>
-                                <mat-form-field class="ml-xs example-full-width" *ngIf="detail.get(any_other_asset_loan).value == 'yes'">
+                                <!-- <mat-form-field class="ml-xs example-full-width" *ngIf="detail.get(any_other_asset_loan).value == 'yes'"> -->
-                                    <input matInput placeholder="What is the EMI amount ?" formControlName="other_asset_emi_amt">
+                                    <mat-form-field class="ml-xs example-full-width">
-                                    <span matSuffix>.00</span>
+                                    <input matInput placeholder="What is the EMI amount ?" formControlName="other_asset_emi_amt" autocomplete="off">
+                                    <!-- <span matSuffix>.00</span> -->
                                 </mat-form-field>
                             </div>
                           </div>
@@ -221,23 +527,49 @@
                     </div>
                   </div>
                   <!--Desction Dynamic details : END -->
-                  <div fxLayout="row wrap" fxLayoutGap="2px" fxLayoutAlign="start none">
+                  <!--<div fxLayout="row wrap" fxLayoutGap="2px" fxLayoutAlign="start none">-->
                     <div *ngIf="sup.get('assets_mode').value == 1 || sup.get('assets_mode').value == 4">
                       <div fxFlex="33">
                         <mat-form-field class="ml-xs example-full-width">
-                          <input matInput placeholder="Approximate Market Value" formControlName="approximate_market_value" (keypress)="keyPress($event)">
+                          <input matInput placeholder="Approximate Market Value" formControlName="approximate_market_value" (keypress)="keyPress($event)" autocomplete="off">
                         </mat-form-field>
                       </div>
                     </div>
                     <div *ngIf="sup.get('assets_mode').value == 1 || sup.get('assets_mode').value == 2 || sup.get('assets_mode').value == 3 || sup.get('assets_mode').value == 4 || sup.get('assets_mode').value == 5">
 
+                      <!-- <div fxFlex="33">
+                        <mat-form-field class="ml-xs example-full-width">
+                          <input matInput placeholder="Name of the Owner" formControlName="name_of_the_owner" autocomplete="off">
+                        </mat-form-field>
+                      </div> -->
                       <div fxFlex="33">
                       <mat-form-field class="ml-xs example-full-width">
-                          <input matInput placeholder="Name of the Owner" formControlName="name_of_the_owner">
+                          <mat-select placeholder="Name of the Owner"
+                          formControlName="name_of_the_owner" required>
+                              
+                              <mat-option value="{{owner.pd_co_applicant_id}}" *ngFor="let owner of applicants">{{owner.applicant_name}}</mat-option>
+                              
+                          </mat-select>
+                      </mat-form-field>
+                    </div>
+                      <div fxFlex="33" *ngIf="sup.get('name_of_the_owner').value == 0 && sup.get('name_of_the_owner').value != ''">
+                      <mat-form-field class="ml-xs example-full-width" >
+                          <input matInput placeholder="Specify Other Owner Name"
+                                 formControlName="other_owner" autocomplete="off">
+                      </mat-form-field>
+                    </div>
+                    <div fxFlex="33">
+                      <mat-form-field class="ml-xs example-full-width">
+                          <mat-select placeholder="Relation" formControlName="relation" required>
+                              <mat-option value="{{relations.relationship_id}}"
+                                          *ngFor="let relations of m_relation">
+                                  {{relations.name}}
+                              </mat-option>
+                          </mat-select>
                       </mat-form-field>
                      </div>
                     </div>
-                  </div>
+                  <!--</div>-->
                 <!----  <div *ngIf="sup.get('assets_mode').value == 1 || sup.get('assets_mode').value == 2 || sup.get('assets_mode').value == 3 || sup.get('assets_mode').value == 5">
                     <label>Year and Month of Purchase?</label>
                     <div fxLayout="row" fxLayoutGap="2px" fxLayoutAlign="start none">
@@ -261,24 +593,30 @@
                       </div>
                       <div *ngIf="sup.get('emi').value === 'yes'" fxFlex="33">
                         <mat-form-field class="ml-xs example-full-width"  style="width:95%">
-                          <input matInput placeholder="Amount of EMI on This Loan?" formControlName="emi_paid" (keypress)="keyPress($event)">
+                          <input matInput placeholder="Amount of EMI on This Loan?" formControlName="emi_paid" (keypress)="keyPress($event)" autocomplete="off">
                         </mat-form-field>
                       </div>
                       <div *ngIf="sup.get('emi').value === 'yes'" fxFlex="33">
                         <mat-form-field class="ml-xs example-full-width"  style="width:95%">
-                          <input matInput placeholder="Original Loan Tenure in Months" formControlName="elapsed_tenure">
+                          <input matInput placeholder="Original Loan Tenure in Months" formControlName="original_loan_tenure" (change)="loanCalc(sup,1)" autocomplete="off">
                         </mat-form-field>
                       </div>
                       <div *ngIf="sup.get('emi').value === 'yes'" fxFlex="33"  style="width:95%">
                         <mat-form-field class="ml-xs example-full-width">
-                          <input matInput placeholder="Balance Tenure in Months" formControlName="balance_tenure">
+                          <input matInput placeholder="Balance Tenure in Months" formControlName="balance_tenure" (change)="loanCalc(sup,1)" autocomplete="off">
                         </mat-form-field>
                       </div>
+                      <div *ngIf="sup.get('emi').value === 'yes' && sup.get('original_loan_tenure').value != ''  && sup.get('balance_tenure').value != '' " fxFlex="33"  style="width:95%">
+                        <mat-form-field class="ml-xs example-full-width">
+                          <input matInput placeholder="Elapsed Tenure in Months" formControlName="elapsed_tenure" autocomplete="off">
+                        </mat-form-field>
+                          <!-- <p>Elapsed tenure is {{elapsed_tenure}}</p> -->
+                      </div>
                       </div>
                   </div>
                   <div fxLayout="row" fxLayoutGap="12px" fxLayoutAlign="start none">
                     <div fxFlex="20">
-                      <span *ngIf="_assetsQuesFrom.controls.assets_details.controls.length > 1" (click)="removeLanguage(i)"> 
+                      <span *ngIf="_assetsQuesFrom.controls.assets_details.controls.length > 1" (click)="removeLanguage(i,1)"> 
                            <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
                          </span>
                     </div>
@@ -292,10 +630,7 @@
       
       <div class="row" style="text-align:right;">
         <button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Asset Details" matTooltipPosition="above"
-          class="mr-1 mb-1 hover-icon" (click)="addSupplierDetails($event); false"><mat-icon>add</mat-icon></button>
+          class="mr-1 mb-1 hover-icon" (click)="addSupplierDetails($event,1); false"><mat-icon>add</mat-icon></button>
-
-       
-        
       </div>
     
   </mat-card-content>
@@ -306,125 +641,111 @@
 </div>
 </div>
 </ng-template>
-</mat-tab>
+              </mat-tab>
-<mat-tab label="Docs">
+            <mat-tab label="Docs">
                 <ng-template matTabContent>
-                                      <div fxLayout="row wrap">
+                    <div ngxViewer>
-                                              <div fxFlex="25" class="m-gap p-gap">
+                            <div fxLayout="row wrap" style="padding:20px;">
-                                                  <div class="p-list-main mb-2">
+                                            <div fxFlex="100">
+                                              <div fxFlex="20" class="m-gap p-gap">
+                                                  <div class="p-list-main mb-2" style="width: 60%;height: auto;">
                                                       <div class="p-list">                                                                           
-  
+                                                        <div class="top"> <img src="https://picsum.photos/2000/1500/?random=1" alt="Image 1"></div>   
-                                                          <div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
-                                                          <div class="bottom">
-                                                              <div class="left">
-                                                                  <div class="details">
-                                                                      <small>Nivi SKM</small>
-                                                                      <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                  </div>
-                                                                  <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                                       </div>
                                                   </div>
                                               </div>
-                                                  </div>
+                                              <div fxFlex="20" class="m-gap p-gap">
-                                              </div>
+                                                  <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                              <div fxFlex="25" class="m-gap p-gap">
-                                                      <div class="p-list-main mb-2">
                                                       <div class="p-list">
-      
+                                                          <div class="top"> <img src="https://picsum.photos/2000/1500/?random=2" alt="Image 2"></div>                                                    
-                                                              <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                              <div class="bottom">
-                                                                  <div class="left">
-                                                                      <div class="details">
-                                                                          <small>Nivi SKM</small>
-                                                                          <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                      </div>
-                                                                      <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                                       </div>
                                                   </div>
                                               </div>
-                                                      </div>
+                                              <div fxFlex="20" class="m-gap p-gap">
-                                                  </div>
+                                                  <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                  <div fxFlex="25" class="m-gap p-gap">
-                                                          <div class="p-list-main mb-2">
                                                       <div class="p-list">  
-          
+                                                          <div class="top"><img src="https://picsum.photos/2000/1500/?random=3" alt="Image 3"></div>                                                          
-                                                                  <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                  <div class="bottom">
-                                                                      <div class="left">
-                                                                          <div class="details">
-                                                                              <small>Nivi SKM</small>
-                                                                              <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                          </div>
-                                                                          <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                                       </div>
                                                   </div>
                                               </div>  
-                                                          </div>
+                                              <div fxFlex="20" class="m-gap p-gap">
-                                                      </div>
+                                                  <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                      <div fxFlex="25" class="m-gap p-gap">
-                                                              <div class="p-list-main mb-2">
                                                       <div class="p-list">
-              
+                                                          <div class="top"> <img src="https://picsum.photos/2000/1500/?random=2" alt="Image 2"></div>                                                    
-                                                                      <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                      <div class="bottom">
-                                                                          <div class="left">
-                                                                              <div class="details">
-                                                                                  <small>Nivi SKM</small>
-                                                                                  <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                              </div>
-                                                                              <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                                       </div>
                                                   </div>
                                               </div>
-                                                              </div>
+                                                <div fxFlex="20" class="m-gap p-gap">
-                                                          </div>
+                                                  <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                          <div fxFlex="25" class="m-gap p-gap">
-                                                                  <div class="p-list-main mb-2">
                                                       <div class="p-list">  
-                  
+                                                          <div class="top"><img src="https://picsum.photos/2000/1500/?random=3" alt="Image 3"></div>                                                          
-                                                                          <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                          <div class="bottom">
-                                                                              <div class="left">
-                                                                                  <div class="details">
-                                                                                      <small>Nivi SKM</small>
-                                                                                      <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                  </div>
-                                                                                  <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                                       </div>
                                                   </div>
                                               </div>
-                                                                  </div>
+                                              <div fxFlex="20" class="m-gap p-gap">
-                                                              </div>
+                                                  <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                              <div fxFlex="25" class="m-gap p-gap">
-                                                                      <div class="p-list-main mb-2">
                                                       <div class="p-list">                                                                           
-                      
+                                                        <div class="top"> <img src="https://picsum.photos/2000/1500/?random=1" alt="Image 1"></div>   
-                                                                              <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                              <div class="bottom">
-                                                                                  <div class="left">
-                                                                                      <div class="details">
-                                                                                          <small>Nivi SKM</small>
-                                                                                          <!-- <p>{{docs.pd_document_name}}</p> -->
                                                       </div>
-                                                                                      <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                                  </div>
+                                              </div>
+                                            </div>
+                                            <div fxFlex="row">
+                                              <div fxFlex="100" class="m-gap p-gap">
+                                                      <div fxLayout="row" fxLayoutWrap="wrap">
+                                                          <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                              <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                                          </div>
+                                                          <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                              <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                                          </div>
+                                                          <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                              <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                                          </div>
+                                                          <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                              <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                                          </div>
+                                                          <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                              <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                                          </div>
+                                                          <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                              <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                                          </div>
+                                                      </div>
+                                                        <div fxLayout="row" fxLayoutWrap="wrap">
+                                                          <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                              <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                                          </div>
+                                                          <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                              <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                                          </div>
+                                                          <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                              <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                                          </div>
+                                                          <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                              <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                                          </div>
+                                                          <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                              <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                                          </div>
+                                                          <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                              <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
                                                           </div>
                                                       </div>                                    
                                               </div>
                                             </div>                                 
                                           </div>   
-  
                                           </div>                       
-                          
                       </ng-template>
-</mat-tab>
+                </mat-tab>        
-</mat-tab-group>
+        </mat-tab-group>
 </mat-dialog-content>
 <mat-dialog-actions>
 
     <div fxFlex="60" class="pb-0 text-sm-left" align="left">
             <mat-form-field appearance="outline" style="width: 100%">
                     <mat-label>Remarks</mat-label>
-                    <textarea matInput placeholder="Remarks" formControlName="assets_form_remark"></textarea>
+                    <textarea matInput placeholder="Remarks" formControlName="assets_form_remark" autocomplete="off"></textarea>
             </mat-form-field>
           </div>
   <div fxFlex="40" align="end">
@@ -433,3 +754,6 @@
 </div>
 </mat-dialog-actions>
 </form>
+
+
+  <notifier-container></notifier-container>

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assets-info/assets-info.component.ts

@@ -35,6 +35,9 @@ export class AssetsInfoComponent implements OnInit {
   public _assetsQuesFrom: FormGroup;
   public submitted = false;
   public m_assets_type = [];
+  public m_relation = [];
+  public applicants: any;
+  
   // public m_assets_type = [
   //   {
   //     'id': "1",
@@ -167,10 +170,30 @@ public m_investmentType = [];
     private pdTrigerService: PdTrigerService, 
     @Inject(MAT_DIALOG_DATA) public pd_all_details: any) { 
       this.pdid = this.pd_all_details.pdmaster_details.pd_id;
+      this.applicants = this.pd_all_details.pdapplicants_detials;
+      this.applicants.push({'pd_co_applicant_id':'0','applicant_name':'Others'});
       this.notifier = notifier;
     }
     
-  
+  public viewerOptions: any = {
+  navbar: false,
+  toolbar: {
+    zoomIn: 4,
+    zoomOut: 4,
+    oneToOne: 4,
+    reset: 4,
+    prev: 4,
+    play: {
+      show: 4,
+      size: 'large',
+    },
+    next: 4,
+    rotateLeft: 4,
+    rotateRight: 4,
+    flipHorizontal: 4,
+    flipVertical: 4,
+  }
+};
 
   ngOnInit() {
 
@@ -180,6 +203,7 @@ public m_investmentType = [];
     this.getM_PropertyType();
     this.getM_InvestmentType();
     this.getM_FreqOfPurchase();
+    this.getM_Relation();
     //this.getM_InsuranceType();
   }
 
@@ -221,6 +245,17 @@ public m_investmentType = [];
     )
   }
 
+  getM_Relation() {
+    this.pdTrigerService.getAllMasterDatas('RELATIONSHIPS').subscribe(
+      data => {
+        this.m_relation = data.records.filter(data => data.isactive == 1);
+      },
+      error => {
+        this.notifier.notify('warning', 'No Category Records Found.!');
+      }
+    )
+  }
+
   getM_FreqOfPurchase() {
     this.pdTrigerService.getAllMasterDatas('FREQUENCY').subscribe(
       data => {
@@ -274,9 +309,11 @@ public m_investmentType = [];
         assets_details: this._formBuilder.array([
           // this.initDetails(),
         ]),
+        business_assets_details : this._formBuilder.array([]),
         assets_form_remark:[value.assets_form_remark || 'check']
       });
       this.addAssetsDetailsWithData(value.assets_details);
+      this.addBusinessAssetsDetailsWithData(value.business_assets_details);
     } else {
       this._assetsQuesFrom = this._formBuilder.group({
         pdid: [this.pdid],
@@ -284,6 +321,9 @@ public m_investmentType = [];
         assets_details: this._formBuilder.array([
           this.initDetails(),
         ]),
+        business_assets_details : this._formBuilder.array([
+          this.initBusinessDetails(),
+        ]),
         assets_form_remark:['']
       });
     }
@@ -304,60 +344,98 @@ public m_investmentType = [];
       details: this._formBuilder.array([]),
       approximate_market_value: ['', Validators.compose([])],
       name_of_the_owner: ['', Validators.compose([])],
+      other_owner:[''],
+      relation: [''],
      // purchase_year: ['', Validators.compose([])],
       //purchase_month: ['', Validators.compose([])],
       emi: [''],
       emi_paid: [''],
+      original_loan_tenure: [''],
+      balance_tenure: [''],
       elapsed_tenure: [''],
-      balance_tenure: ['']
     });
   }
 
+  initBusinessDetails() {
+    return this._formBuilder.group({
+      business_assets_mode: ['', Validators.compose([Validators.required])],
+      business_details: this._formBuilder.array([]),
+      business_approximate_market_value: ['', Validators.compose([])],
+      business_name_of_the_owner: ['', Validators.compose([])],
+      // other_owner:[''],
+      // relation:[''],
+     // purchase_year: ['', Validators.compose([])],
+      //purchase_month: ['', Validators.compose([])],
+      business_emi: [''],
+      business_emi_paid: [''],
+      business_original_loan_tenure: [''],
+      business_balance_tenure: [''],
+      business_elapsed_tenure: [''],
+    });
+  }
 
   show: boolean;
-  selectedAssetsType(e: any, i: any): void {
+  selectedAssetsType(e: any, i: any,flag : any): void {
+    console.log(e);
+    console.log(i);
+    console.log(flag);
     let val = i;
+    if(flag == 1){
       const arr = (<FormArray>this._assetsQuesFrom.controls['assets_details']).at(val).get('details') as FormArray;
       arr.controls.splice(0);
+    }
+    else if(flag == 2){
+      const arr = (<FormArray>this._assetsQuesFrom.controls['business_assets_details']).at(val).get('business_details') as FormArray;
+      arr.controls.splice(0);
+    }
+   
     switch (e.value) {
       case '1': {
         let val = i;
-        const control = (<FormArray>this._assetsQuesFrom.controls['assets_details']).at(val).get('details') as FormArray;
+        const control = (flag == 1) ? (<FormArray>this._assetsQuesFrom.controls['assets_details']).at(val).get('details') as FormArray
+                                  : (<FormArray>this._assetsQuesFrom.controls['business_assets_details']).at(val).get('business_details') as FormArray ;
         control.push(this.loadProperty());
         break;
       }
       case '2': {
-        const control = (<FormArray>this._assetsQuesFrom.controls['assets_details']).at(val).get('details') as FormArray;
+        const control = (flag == 1) ? (<FormArray>this._assetsQuesFrom.controls['assets_details']).at(val).get('details') as FormArray
+                                    : (<FormArray>this._assetsQuesFrom.controls['business_assets_details']).at(val).get('business_details') as FormArray ;
         control.push(this.load_Four_Weeler());
         break;
       }
       case '3': {
-        const control = (<FormArray>this._assetsQuesFrom.controls['assets_details']).at(val).get('details') as FormArray;
+        const control = (flag == 1) ? (<FormArray>this._assetsQuesFrom.controls['assets_details']).at(val).get('details') as FormArray
+                                    : (<FormArray>this._assetsQuesFrom.controls['business_assets_details']).at(val).get('business_details') as FormArray ;
         control.push(this.load_Two_Weeler());
         break;
       }
       case '4': {
-        const control = (<FormArray>this._assetsQuesFrom.controls['assets_details']).at(val).get('details') as FormArray;
+        const control = (flag == 1) ? (<FormArray>this._assetsQuesFrom.controls['assets_details']).at(val).get('details') as FormArray
+                                    : (<FormArray>this._assetsQuesFrom.controls['business_assets_details']).at(val).get('business_details') as FormArray ;
         //control.push(this.loadJwellDescription());
         break;
       }
       case '5': {
-        const control = (<FormArray>this._assetsQuesFrom.controls['assets_details']).at(val).get('details') as FormArray;
+        const control = (flag == 1) ? (<FormArray>this._assetsQuesFrom.controls['assets_details']).at(val).get('details') as FormArray
+                                    : (<FormArray>this._assetsQuesFrom.controls['business_assets_details']).at(val).get('business_details') as FormArray ;
         control.push(this.loadConsumerDurableDescription());
         break;
       }
       case '6': {
-        const control = (<FormArray>this._assetsQuesFrom.controls['assets_details']).at(val).get('details') as FormArray;
+        const control = (flag == 1) ? (<FormArray>this._assetsQuesFrom.controls['assets_details']).at(val).get('details') as FormArray
+                                    : (<FormArray>this._assetsQuesFrom.controls['business_assets_details']).at(val).get('business_details') as FormArray ;
         control.push(this.loadInsuranceDescription());
         break;
       }
       case '7': {
-        const control = (<FormArray>this._assetsQuesFrom.controls['assets_details']).at(val).get('details') as FormArray;
+        const control = (flag == 1) ? (<FormArray>this._assetsQuesFrom.controls['assets_details']).at(val).get('details') as FormArray
+                                    : (<FormArray>this._assetsQuesFrom.controls['business_assets_details']).at(val).get('business_details') as FormArray ;
         control.push(this.loadInvestDescription());
         break;
       }
       case '8': {
-        const control = (<FormArray>this._assetsQuesFrom.controls['assets_details']).at(val).get('details') as FormArray;
+        const control = (flag == 1) ? (<FormArray>this._assetsQuesFrom.controls['assets_details']).at(val).get('details') as FormArray
+                                    : (<FormArray>this._assetsQuesFrom.controls['business_assets_details']).at(val).get('details') as FormArray ;
         control.push(this.otherAssetsDescription());
         break;
       }
@@ -400,25 +478,25 @@ public m_investmentType = [];
   loadInsuranceDescription() {
     return this._formBuilder.group({
       //insurance_type: ['', Validators.compose([Validators.required])],
-      premium_paid: ['', Validators.compose([Validators.required])],
+      premium_paid: ['', Validators.compose([])],
-      frequency_mode: ['', Validators.compose([Validators.required])],
+      frequency_mode: ['', Validators.compose([])],
-      sum_assured: ['', Validators.compose([Validators.required])],
+      sum_assured: ['', Validators.compose([])],
-      members_coverd: ['', Validators.compose([Validators.required])]
+      members_coverd: ['', Validators.compose([])]
     });
   }
 
   loadInvestDescription() {
     return this._formBuilder.group({
-      investments_type: ['', Validators.compose([Validators.required])],
+      investments_type: ['', Validators.compose([])],
-      other_investment_type:[''],
+      other_investments_type:[''],
-      amount_of_invest: ['', Validators.compose([Validators.required])],
+      amount_of_invest: ['', Validators.compose([])],
-      bank_name: ['', Validators.compose([Validators.required])]
+      bank_name: ['', Validators.compose([])]
     });
   }
 
   load_Four_Weeler() {
     return this._formBuilder.group({
-      manufacturer_model_four_weeler: ['', Validators.compose([Validators.required])]
+      manufacturer_model_four_weeler: ['', Validators.compose([])]
     });
   }
 
@@ -433,6 +511,14 @@ public m_investmentType = [];
   loadPropertyWithData(data) {
     return this._formBuilder.group({
       property_type: [data.property_type, Validators.compose([Validators.required])]
+      //property_type:['']
+    });
+  }
+
+  loadPropertyWithData2(data) {
+    return this._formBuilder.group({
+      property_type: [data.property_type, Validators.compose([Validators.required])]
+      //property_type:['']
     });
   }
 
@@ -496,16 +582,37 @@ public m_investmentType = [];
       details: this._formBuilder.array([]),
       approximate_market_value: [data.approximate_market_value, Validators.compose([])],
       name_of_the_owner: [data.name_of_the_owner, Validators.compose([])],
+      other_owner:[data.other_owner || ''],
+      relation: [data.relation || ''],
      // purchase_year: [data.purchase_year, Validators.compose([])],
      // purchase_month: [data.purchase_month, Validators.compose([])],
       emi: [data.emi || 0],
       emi_paid: [data.emi_paid || ''],
-      elapsed_tenure: [data.elapsed_tenure || ''],
+      original_loan_tenure: [data.original_loan_tenure || ''],
-      balance_tenure: [data.balance_tenure || '']
+      balance_tenure: [data.balance_tenure || ''],
+      elapsed_tenure: [data.elapsed_tenure || '']
+    });
+  }
+  initBusinessDetailsWithdata(data) {
+    return this._formBuilder.group({
+      business_assets_mode: [data.business_assets_mode, Validators.compose([Validators.required])],
+      business_details: this._formBuilder.array([]),
+      business_approximate_market_value: [data.business_approximate_market_value, Validators.compose([])],
+      business_name_of_the_owner: [data.business_name_of_the_owner, Validators.compose([])],
+      // other_owner:[data.other_owner || ''],
+      // relation: [data.relation || ''],
+     // purchase_year: [data.purchase_year, Validators.compose([])],
+     // purchase_month: [data.purchase_month, Validators.compose([])],
+     business_emi: [data.business_emi || 0],
+     business_emi_paid: [data.business_emi_paid || ''],
+     business_original_loan_tenure: [data.business_original_loan_tenure || ''],
+     business_balance_tenure: [data.business_balance_tenure || ''],
+     business_elapsed_tenure: [data.business_elapsed_tenure || '']
     });
   }
   loadDetails: boolean;
   addAssetsDetailsWithData(supp_data) {
+    console.log(supp_data);
     var result = Object.keys(supp_data).map(function (key) {
       return supp_data[key];
     });
@@ -515,10 +622,13 @@ public m_investmentType = [];
           assets_mode: val.assets_mode,
           approximate_market_value: val.approximate_market_value,
           name_of_the_owner: val.name_of_the_owner,
+          other_owner:val.other_owner,
+          relation: val.relation,
          // purchase_year: val.purchase_year,
          // purchase_month: val.purchase_month,
           emi: val.emi,
           emi_paid: val.emi_paid,
+          original_loan_tenure: val.original_loan_tenure,
           elapsed_tenure: val.elapsed_tenure,
           balance_tenure: val.balance_tenure
         };
@@ -530,6 +640,41 @@ public m_investmentType = [];
     this.loadDetails = true;
   }
 
+  addBusinessAssetsDetailsWithData(supp_data) {
+
+    console.log(supp_data);
+
+    var result = Object.keys(supp_data).map(function (key) {
+      return supp_data[key];
+    });
+    if (result.length > 0) {
+      for (let val of result) {
+        let vals = {
+          business_assets_mode: val.business_assets_mode,
+          business_approximate_market_value: val.business_approximate_market_value,
+          business_name_of_the_owner: val.business_name_of_the_owner,
+          // other_owner: val.other_owner,
+          // relation : val.relation,
+         // purchase_year: val.purchase_year,
+         // purchase_month: val.purchase_month,
+         business_emi: val.business_emi,
+         business_emi_paid: val.business_emi_paid,
+         business_original_loan_tenure: val.business_original_loan_tenure,
+         business_elapsed_tenure: val.business_elapsed_tenure,
+         business_balance_tenure: val.business_balance_tenure
+        };
+        // const control = <FormArray>this._assetsQuesFrom.controls['assets_details'];
+        // control.push(this.initDetailsWithdata(vals));
+        // this.setAssetsDetailsWithData(vals.business_assets_mode, val.details, control.length - 1)
+
+        const control = <FormArray>this._assetsQuesFrom.controls['business_assets_details'];
+        control.push(this.initBusinessDetailsWithdata(vals));
+        this.setAssetsDetailsWithData2(vals.business_assets_mode, val.business_details, control.length - 1)
+      }
+    }
+    //this.loadDetails = true;
+  }
+
   setAssetsDetailsWithData(assets_details_mode: any, datas: any, i: any): void {
     let val = i;
     // var data = Object.keys(datas).map(function (key) {
@@ -539,6 +684,7 @@ public m_investmentType = [];
     let data = datas;
     const arr = (<FormArray>this._assetsQuesFrom.controls['assets_details']).at(val).get('details') as FormArray;
     arr.controls.splice(0);
+    
     switch (assets_details_mode) {
       case '1': {
         const control = (<FormArray>this._assetsQuesFrom.controls['assets_details']).at(val).get('details') as FormArray;
@@ -586,13 +732,76 @@ public m_investmentType = [];
     }
   }
 
-  addSupplierDetails(e) {
+  setAssetsDetailsWithData2(assets_details_mode: any, datas: any, i: any): void {
+    let val = i;
+    let data = datas;
+    const arr = (<FormArray>this._assetsQuesFrom.controls['business_assets_details']).at(val).get('business_details') as FormArray ;
+    arr.controls.splice(0);
+    
+    switch (assets_details_mode) {
+      case '1': {
+        const control = (<FormArray>this._assetsQuesFrom.controls['business_assets_details']).at(val).get('business_details') as FormArray ;
+        control.push(this.loadPropertyWithData2(data));
+        break;
+      }
+      case '2': {
+        const control = (<FormArray>this._assetsQuesFrom.controls['business_assets_details']).at(val).get('business_details') as FormArray ;
+        control.push(this.load_Four_WeelerWithData(data));
+        break;
+      }
+      case '3': {
+        const control = (<FormArray>this._assetsQuesFrom.controls['business_assets_details']).at(val).get('business_details') as FormArray ;
+        control.push(this.load_Two_WeelerWithData(data));
+        break;
+      }
+      case '4': {
+        break;
+      }
+      case '5': {
+        const control = (<FormArray>this._assetsQuesFrom.controls['business_assets_details']).at(val).get('business_details') as FormArray ;
+        control.push(this.loadConsumerDurableDescriptionWithData(data));
+        break;
+      }
+      case '6': {
+        const control = (<FormArray>this._assetsQuesFrom.controls['business_assets_details']).at(val).get('business_details') as FormArray ;
+        control.push(this.loadInsuranceDescriptionWithData(data));
+        break;
+      }
+      case '7': {
+        const control = (<FormArray>this._assetsQuesFrom.controls['business_assets_details']).at(val).get('business_details') as FormArray ;
+        control.push(this.loadInvestDescriptionWithData(data));
+        break;
+      }
+      case '8': {
+        const control = (<FormArray>this._assetsQuesFrom.controls['business_assets_details']).at(val).get('business_details') as FormArray ;
+        control.push(this.otherAssetsDescriptionWithData(data));
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+  }
+
+  addSupplierDetails(e,flag) {
+    console.log(flag);
+    console.log(e);
+    if(flag == 1){
     const control = <FormArray>this._assetsQuesFrom.controls['assets_details'];
     control.push(this.initDetails());
+    }else if(flag == 2){
+      const control = <FormArray>this._assetsQuesFrom.controls['business_assets_details'];
+      control.push(this.initBusinessDetails());
     }
-  removeLanguage(i: number) {
+  }
+  removeLanguage(i: number,flag) {
+  if(flag == 1){
     const control = <FormArray>this._assetsQuesFrom.controls['assets_details'];
     control.removeAt(i);
+  }else if(flag == 2){
+    const control = <FormArray>this._assetsQuesFrom.controls['business_assets_details'];
+    control.removeAt(i);
+  }
   }
 
   public paymentModeTextBox: number;
@@ -621,8 +830,19 @@ public m_investmentType = [];
       answerFormValues.assets_details.map(val => {
         if (val.emi == '0') {
           val.emi_paid = '';
-          val.elapsed_tenure = '';
+          val.original_loan_tenure = '';
           val.balance_tenure = '';
+          val.elapsed_tenure = '';
+        }
+      });
+
+      //To Remove The "Null" With Key also      
+      answerFormValues.business_assets_details.map(val => {
+        if (val.business_emi == '0') {
+          val.business_emi_paid = '';
+          val.business_original_loan_tenure = '';
+          val.business_balance_tenure = '';
+          val.business_elapsed_tenure = '';
         }
       });
 
@@ -664,6 +884,29 @@ public m_investmentType = [];
       event.preventDefault();
     }
   }
+
+  loanCalc(details ,flag)
+  {
+    if(flag == 1){
+    //console.log(details.value);    
+    let ElapsedValues;
+    
+    if(details.value.original_loan_tenure != null && details.value.original_loan_tenure != '' && details.value.balance_tenure != null && details.value.balance_tenure != ''){
+      ElapsedValues = details.value.original_loan_tenure - details.value.balance_tenure ;
+      details.controls['elapsed_tenure'].setValue(ElapsedValues);
+    }
+  }
+  else if(flag == 2){
+    let BusinessElapsedValues;
+    
+    if(details.value.business_original_loan_tenure != null && details.value.business_original_loan_tenure != '' && details.value.business_balance_tenure != null && details.value.business_balance_tenure != ''){
+      BusinessElapsedValues = details.value.business_original_loan_tenure - details.value.business_balance_tenure ;
+      details.controls['business_elapsed_tenure'].setValue(BusinessElapsedValues);
+    }
+  }
+
+  }
+
   // {
   //   'main_raw_materials': 'sdkjfal',
   //   'supplier_details' ; [

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/banking-details/banking-details.component.html

@@ -99,12 +99,12 @@
                                     formControlName="applicant_name" required>
                                         
                                         <mat-option value="{{owner.pd_co_applicant_id}}" *ngFor="let owner of applicants">{{owner.applicant_name}}</mat-option>
-                                        <mat-option value="Others">Others</mat-option>
+                                        
                                     </mat-select>
                                 </mat-form-field>
-                                <mat-form-field *ngIf="itemrow.get('applicant_name').value == 'Others'">
+                                <mat-form-field *ngIf="itemrow.get('applicant_name').value == 0">
                                     <input matInput placeholder="Specify Other Applicant"
-                                           formControlName="other_applicant">
+                                           formControlName="other_applicant" autocomplete="off">
                                 </mat-form-field>
 
                                 <!-- <mat-form-field>
@@ -122,7 +122,7 @@
                                 </mat-form-field>
                                 <mat-form-field *ngIf="itemrow.get('bank_name').value == 3">
                                     <input matInput placeholder="Specify Other Bank Name"
-                                           formControlName="other_bank">
+                                           formControlName="other_bank" autocomplete="off">
                                 </mat-form-field>
 
                 
@@ -140,7 +140,7 @@
                                     </mat-select>-->
                                 </mat-form-field>
                 
-                                <mat-form-field>
+                                <mat-form-field *ngIf="salaryField">
                                     <mat-select placeholder="Salary Credited in this account"
                                                 formControlName="salary" required>
                                         <mat-option value="Yes">Yes</mat-option>
@@ -151,7 +151,7 @@
                                 
                                 <mat-form-field *ngIf="itemrow.get('account_type').value != 2">
                                     <input matInput placeholder="Limit in case of OD / CC account"
-                                           formControlName="limit" (keypress)="keyPress($event)" required>
+                                           formControlName="limit" (keypress)="keyPress($event)" required autocomplete="off">
                                 </mat-form-field>
                                 <mat-form-field *ngIf="pd_cus_segment!='SAL'">
                                     <mat-select placeholder="Is this the main business account"
@@ -169,10 +169,10 @@
                                         <br>
                                         <div fxLayout="row" fxLayoutGap="2px" fxLayoutAlign="start none">
                                             <mat-form-field>
-                                                <input matInput type="number" placeholder="Year" formControlName="vintage_year" required min='0'>
+                                                <input matInput type="number" placeholder="Year(s)" formControlName="vintage_year" required min='0' (keypress)="keyPress($event)" autocomplete="off">
                                             </mat-form-field>
                                             <mat-form-field>
-                                                <input matInput type="number" placeholder="Month" formControlName="vintage_month" required min='0' max='12'>
+                                                <input matInput type="number" placeholder="Month(s)" formControlName="vintage_month" required min='0' max='11'(keypress)="keyPress($event)" autocomplete="off">
                                             </mat-form-field>
                                         </div>
                                     </div>
@@ -192,116 +192,98 @@
 </mat-tab>
 <mat-tab label="Docs">
         <ng-template matTabContent>
-                                            <div fxLayout="row wrap">
+            <div ngxViewer>
-                                                  <div fxFlex="25" class="m-gap p-gap">
+              <div fxLayout="row wrap" style="padding:20px;">
-                                                      <div class="p-list-main mb-2">
+                                <div fxFlex="100">
+                                  <div fxFlex="20" class="m-gap p-gap">
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
                                           <div class="p-list">                                                                           
-      
+                                            <div class="top"> <img src="https://picsum.photos/2000/1500/?random=1" alt="Image 1"></div>   
-                                                              <div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
-                                                              <div class="bottom">
-                                                                  <div class="left">
-                                                                      <div class="details">
-                                                                          <small>Nivi SKM</small>
-                                                                          <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                      </div>
-                                                                      <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                      </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                  </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-
-                                                  <div fxFlex="25" class="m-gap p-gap">
-                                                          <div class="p-list-main mb-2">
                                           <div class="p-list">
-          
+                                              <div class="top"> <img src="https://picsum.photos/2000/1500/?random=2" alt="Image 2"></div>                                                    
-                                                                  <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                  <div class="bottom">
-                                                                      <div class="left">
-                                                                          <div class="details">
-                                                                              <small>Nivi SKM</small>
-                                                                              <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                          </div>
-                                                                          <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                          </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                  </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-
-                                                  <div fxFlex="25" class="m-gap p-gap">
-                                                              <div class="p-list-main mb-2">
                                           <div class="p-list">  
-              
+                                              <div class="top"><img src="https://picsum.photos/2000/1500/?random=3" alt="Image 3"></div>                                                          
-                                                                      <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                      <div class="bottom">
-                                                                          <div class="left">
-                                                                              <div class="details">
-                                                                                  <small>Nivi SKM</small>
-                                                                                  <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                              </div>
-                                                                              <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>  
-                                                              </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                  </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-
-                                                  <div fxFlex="25" class="m-gap p-gap">
-                                                                  <div class="p-list-main mb-2">
                                           <div class="p-list">
-                  
+                                              <div class="top"> <img src="https://picsum.photos/2000/1500/?random=2" alt="Image 2"></div>                                                    
-                                                                          <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                          <div class="bottom">
-                                                                              <div class="left">
-                                                                                  <div class="details">
-                                                                                      <small>Nivi SKM</small>
-                                                                                      <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                  </div>
-                                                                                  <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                  </div>
+                                    <div fxFlex="20" class="m-gap p-gap">
-                                                  </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-
-                                                  <div fxFlex="25" class="m-gap p-gap">
-                                                                      <div class="p-list-main mb-2">
                                           <div class="p-list">  
-                      
+                                              <div class="top"><img src="https://picsum.photos/2000/1500/?random=3" alt="Image 3"></div>                                                          
-                                                                              <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                              <div class="bottom">
-                                                                                  <div class="left">
-                                                                                      <div class="details">
-                                                                                          <small>Nivi SKM</small>
-                                                                                          <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                      </div>
-                                                                                      <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                      </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                  </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                  <div fxFlex="25" class="m-gap p-gap">
-                                                                          <div class="p-list-main mb-2">
                                           <div class="p-list">                                                                           
-                          
+                                            <div class="top"> <img src="https://picsum.photos/2000/1500/?random=1" alt="Image 1"></div>   
-                                                                                  <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                  <div class="bottom">
-                                                                                      <div class="left">
-                                                                                          <div class="details">
-                                                                                              <small>Nivi SKM</small>
-                                                                                              <!-- <p>{{docs.pd_document_name}}</p> -->
                                           </div>
-                                                                                          <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                      </div>
+                                  </div>
+                                </div>
+                                <div fxFlex="row">
+                                   <div fxFlex="100" class="m-gap p-gap">
+                                          <div fxLayout="row" fxLayoutWrap="wrap">
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                          </div>
+                                            <div fxLayout="row" fxLayoutWrap="wrap">
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
                                               </div>
                                           </div>                                    
                                    </div>
                                 </div>                                 
                               </div>  
-      
             </div>                            
-                              
         </ng-template>
 </mat-tab>
 

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/banking-details/banking-details.component.ts

@@ -37,6 +37,7 @@ export class BankingDetailsComponent implements OnInit {
     public applicants: any;
     m_accountType= [];
     m_btLenderList = [];
+    salaryField : boolean;
 
     constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
                 private router: Router,
@@ -46,17 +47,38 @@ export class BankingDetailsComponent implements OnInit {
                     this.pd_cus_segment = this.pd_all_details.pdmaster_details.customer_segment_abbr.toUpperCase();
                     this.pd_cus_segment = this.pd_cus_segment.substring(0,3);
                     this.applicants = this.pd_all_details.pdapplicants_detials;
+                    this.applicants.push({'pd_co_applicant_id':'0','applicant_name':'Others'});
                     this.notifier = notifier;
                     
                   }
 
-    
+    public viewerOptions: any = {
+  navbar: false,
+  toolbar: {
+    zoomIn: 4,
+    zoomOut: 4,
+    oneToOne: 4,
+    reset: 4,
+    prev: 4,
+    play: {
+      show: 4,
+      size: 'large',
+    },
+    next: 4,
+    rotateLeft: 4,
+    rotateRight: 4,
+    flipHorizontal: 4,
+    flipVertical: 4,
+  }
+};
 
     ngOnInit() { 
         this.step = 0;
         this.initBankingForm();
         this.getM_AccountType();
         this.getM_BTLenderList();
+        
+        this.salaryField = this.pd_cus_segment.substring(0,2) == 'SE' ? false : true ;
         // this.pd_cus_segment = this.pd_all_details.pdmaster_details.customer_segment_abbr.toUpperCase();
         // // console.log("(0,3): "   + this.pd_cus_segment.substring(0,3)); 
         // // console.log(this.pd_all_details.pdmaster_details);
@@ -123,7 +145,8 @@ export class BankingDetailsComponent implements OnInit {
             bank_name: ['', Validators.compose([Validators.required])],
             other_bank: [''],
             account_type: ['', Validators.compose([Validators.required])],
-            salary: ['', Validators.compose([Validators.required])],
+            //salary: ['', Validators.compose([Validators.required])],
+            salary: this.pd_cus_segment.substring(0,2) == 'SE' ? [''] : ['', Validators.compose([Validators.required])],
             limit: ['', Validators.compose([Validators.required])],
             //is_main: ['', Validators.compose([Validators.required])],
             //is_main: [this.pd_cus_segment == 'SAL' ? '' : '', Validators.compose([Validators.required])],
@@ -188,13 +211,13 @@ export class BankingDetailsComponent implements OnInit {
     }
 
     selectedAccTypeChanges(event: any){
-         console.log('First Time',event);
+        //  console.log('First Time',event);
-         console.log('First Time Value',event.value);
+        //  console.log('First Time Value',event.value);
         if(event.value == 2) {   
             const control = <FormArray>this.bankingForm.controls['itemRows'];
-            console.log('Inside If Condition');
+            // console.log('Inside If Condition');
-            console.log(control);
+            // console.log(control);
-            console.log(control.controls);
+            // console.log(control.controls);
             
             control.controls[0].get('limit').clearValidators();
             control.controls[0].get('limit').updateValueAndValidity();
@@ -208,7 +231,7 @@ export class BankingDetailsComponent implements OnInit {
             
         }
         else{
-            alert('sd');
+            //alert('sd');
         }
 
     }

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-info/business-info.component.html

@@ -873,116 +873,98 @@
 
             <mat-tab label="Docs">
                     <ng-template matTabContent>
-                                                        <div fxLayout="row wrap">
+                        <div ngxViewer>
-                                                              <div fxFlex="25" class="m-gap p-gap">
+                                 <div fxLayout="row wrap" style="padding:20px;">
-                                                                  <div class="p-list-main mb-2">
+                                <div fxFlex="100">
+                                  <div fxFlex="20" class="m-gap p-gap">
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
                                           <div class="p-list">                                                                           
-                  
+                                            <div class="top"> <img src="https://picsum.photos/2000/1500/?random=1" alt="Image 1"></div>   
-                                                                          <div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
-                                                                          <div class="bottom">
-                                                                              <div class="left">
-                                                                                  <div class="details">
-                                                                                      <small>Nivi SKM</small>
-                                                                                      <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                  </div>
-                                                                                  <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                  </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                              </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-
-                                                              <div fxFlex="25" class="m-gap p-gap">
-                                                                      <div class="p-list-main mb-2">
                                           <div class="p-list">
-                      
+                                              <div class="top"> <img src="https://picsum.photos/2000/1500/?random=2" alt="Image 2"></div>                                                    
-                                                                              <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                              <div class="bottom">
-                                                                                  <div class="left">
-                                                                                      <div class="details">
-                                                                                          <small>Nivi SKM</small>
-                                                                                          <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                      </div>
-                                                                                      <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                      </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                              </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-
-                                                              <div fxFlex="25" class="m-gap p-gap">
-                                                                          <div class="p-list-main mb-2">
                                           <div class="p-list">  
-                          
+                                              <div class="top"><img src="https://picsum.photos/2000/1500/?random=3" alt="Image 3"></div>                                                          
-                                                                                  <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                  <div class="bottom">
-                                                                                      <div class="left">
-                                                                                          <div class="details">
-                                                                                              <small>Nivi SKM</small>
-                                                                                              <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                          </div>
-                                                                                          <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>  
-                                                                          </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                              </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-
-                                                              <div fxFlex="25" class="m-gap p-gap">
-                                                                              <div class="p-list-main mb-2">
                                           <div class="p-list">
-                              
+                                              <div class="top"> <img src="https://picsum.photos/2000/1500/?random=2" alt="Image 2"></div>                                                    
-                                                                                      <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                      <div class="bottom">
-                                                                                          <div class="left">
-                                                                                              <div class="details">
-                                                                                                  <small>Nivi SKM</small>
-                                                                                                  <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                              </div>
-                                                                                              <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                              </div>
+                                    <div fxFlex="20" class="m-gap p-gap">
-                                                              </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-
-                                                              <div fxFlex="25" class="m-gap p-gap">
-                                                                                  <div class="p-list-main mb-2">
                                           <div class="p-list">  
-                                  
+                                              <div class="top"><img src="https://picsum.photos/2000/1500/?random=3" alt="Image 3"></div>                                                          
-                                                                                          <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                          <div class="bottom">
-                                                                                              <div class="left">
-                                                                                                  <div class="details">
-                                                                                                      <small>Nivi SKM</small>
-                                                                                                      <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                                  </div>
-                                                                                                  <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                                  </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                              </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                              <div fxFlex="25" class="m-gap p-gap">
-                                                                                      <div class="p-list-main mb-2">
                                           <div class="p-list">                                                                           
-                                      
+                                            <div class="top"> <img src="https://picsum.photos/2000/1500/?random=1" alt="Image 1"></div>   
-                                                                                              <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                              <div class="bottom">
-                                                                                                  <div class="left">
-                                                                                                      <div class="details">
-                                                                                                          <small>Nivi SKM</small>
-                                                                                                          <!-- <p>{{docs.pd_document_name}}</p> -->
                                           </div>
-                                                                                                      <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                      </div>
+                                  </div>
+                                </div>
+                                <div fxFlex="row">
+                                   <div fxFlex="100" class="m-gap p-gap">
+                                          <div fxLayout="row" fxLayoutWrap="wrap">
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                          </div>
+                                            <div fxLayout="row" fxLayoutWrap="wrap">
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
                                               </div>
                                           </div>                                    
                                    </div>
                                 </div>                                 
                               </div>
-                  
                         </div>          
-                                          
                     </ng-template>
             </mat-tab>
 

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-info/business-info.component.ts

@@ -62,7 +62,25 @@ export class BusinessInfoComponent implements OnInit {
             this.form_id = 13;
             this.notifier = notifier;      
           }
-        
+        public viewerOptions: any = {
+  navbar: false,
+  toolbar: {
+    zoomIn: 4,
+    zoomOut: 4,
+    oneToOne: 4,
+    reset: 4,
+    prev: 4,
+    play: {
+      show: 4,
+      size: 'large',
+    },
+    next: 4,
+    rotateLeft: 4,
+    rotateRight: 4,
+    flipHorizontal: 4,
+    flipVertical: 4,
+  }
+};
     ngOnInit() {
         let get_max_date = this.pd_all_details.pdmaster_details.pd_date_of_initiation.split('/').reverse().join("/");
         this.maxDate = new Date(get_max_date);

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/client-info/client-info.component.html

@@ -1,332 +1,203 @@
-<form *ngIf="apiLoadFinish" [formGroup]="_clientQuesFrom" (submit)="onSubmit()" novalidate>
+<h2 mat-dialog-title class="paragraph_change">
-
-    <h2 mat-dialog-title class="paragraph_change">
     <div fxFlex="70" align="left" style="padding: 10px !important;">{{pageTitle}}</div>
     <div fxFlex="30" align="end" style="padding: 10px !important;">
-                    <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
+        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right"
-            
+            mat-dialog-close><mat-icon>close</mat-icon></button>
     </div>
-    </h2>
+</h2>
-    
+<div *ngIf="noRecordsFound" style="max-width: 100vw !important;width: 100% !important;height: 95% !important;">
+    <form [formGroup]="_supplierQuesFrom" (submit)="onSubmit()" novalidate>
         <mat-dialog-content>
-    
+            <mat-card *ngIf="manufacturingForm">
-            <mat-tab-group>
+                <h5 style="margin: 12px;">Manufacturing Product Details</h5>
-
+                <div formArrayName="manufacturing_details">
-                    <mat-tab label="Questions">
+                    <div *ngFor="let item of _supplierQuesFrom.controls.manufacturing_details['controls']; let i=index" [formGroupName]="i">
-                      <ng-template matTabContent>
+                        <div formArrayName="main_raw_materials">
-                          
+                            <div *ngFor="let items of item.controls.main_raw_materials['controls']; let l=index" [formGroupName]="l">
-                            <div fxLayout="row wrap">
+                                <mat-card style="margin: 12px;">
-                              <div fxFlex="100">
+                                    <h6 style="margin: 12px;">Raw Material #{{l+1}}</h6>
-                                <mat-card>
+                                    <div fxLayout="row wrap" fxLayoutGap="2px" fxLayoutAlign="start none">
-                                 <mat-card>
+                                        <mat-form-field style="width: 100%">
-                                    <!-- <mat-card-title></mat-card-title> -->
+                                            <mat-select placeholder="Manufacturing Product Name" formControlName="manufacturing_product_name">
-                                      <mat-card-content formArrayName="client_details" fxFill>
+                                                <mat-option *ngFor="let pm of m_manufacturingProducts[0]" [value]="pm.name">{{ pm.name }}</mat-option>
-                                        <div *ngFor="let sup of _clientQuesFrom.controls.client_details['controls']; let i=index" [formGroupName]="i">
+                                            </mat-select>
-                                            <!-- <div [formGroupName]="i"> -->
+                                        </mat-form-field>
-                                                <div fxLayout="row wrap" fxLayoutGap="12px" fxLayoutAlign="start none">
+                                        <!--<mat-form-field style="width: 100%">
-                                                  <div>
+                                            <input matInput placeholder="Raw Material Name" formControlName="manufacturing_raw_material_name">
-                                                    <mat-form-field class="ml-xs example-full-width">
+                                        </mat-form-field>-->
-                                                      <input matInput placeholder="Client Name" formControlName="client_name" required>
+                                        <mat-form-field style="width: 100%">
-                                                      <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
+                                            <input matInput placeholder="Client Name" formControlName="manufacturing_client_name">
+                                        </mat-form-field>
+                                        <mat-form-field style="width: 100%">
+                                            <input matInput placeholder="Contact Person Name" formControlName="manufacturing_contact_person_name">
                                         </mat-form-field>
                                     </div>
-                                                  <div>
+                                    <div fxLayout="row wrap" fxLayoutGap="2px" fxLayoutAlign="start none">
-                                                    <mat-form-field class="ml-xs example-full-width">
+                                        <mat-form-field style="width: 100%">
-                                                      <input matInput placeholder="Contact Person Name" formControlName="contact_person" required>
+                                            <input matInput placeholder="Contact Person Mobile Number" formControlName="manufacturing_contact_person_mobile_number">
-                                                      <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
                                         </mat-form-field>
-                                                  </div>
+                                        <mat-form-field style="width: 100%">
-                                                  <div>
+                                            <mat-select placeholder="Payment Type" formControlName="manufacturing_payment_type">
-                                                    <mat-form-field class="ml-xs example-full-width">
-                                                      <input matInput placeholder="Contact Mobile Number" formControlName="mobile_number" (keypress)="keyPress($event)" minlength=10 maxlength=10 required>
-                                                      <!-- <mat-error *ngIf="sup.controls['mobile_number'].hasError('requried') && sup.controls['mobile_number'].touched" class="mat-text-warn">Mobile Number Requried</mat-error>  -->
-                                                      <mat-error *ngIf="sup.controls['mobile_number'].hasError('minlength') && sup.controls['mobile_number'].touched" class="mat-text-warn">Valid Mobile Number Requried</mat-error> 
-                                                      <mat-error *ngIf="sup.controls['mobile_number'].hasError('maxlength') && sup.controls['mobile_number'].touched" class="mat-text-warn">Valid Mobile Number Requried</mat-error> 
-                                                    </mat-form-field>
-                                                  </div>
-                                                </div>
-                                                <div fxLayout="row wrap" fxLayoutGap="12px" fxLayoutAlign="start none">
-                                                  <div>
-                                                    <mat-form-field>
-                                                      <mat-select (selectionChange)="selectedPM($event)" placeholder="Payment Mode" formControlName="payment_mode" required>
                                                 <mat-option *ngFor="let pm of m_paymentModeType" [value]="pm.id">{{ pm.name }}</mat-option>
                                             </mat-select>
                                         </mat-form-field>
-                                                  </div>
+                                        <mat-form-field style="width: 100%" *ngIf="items.get('manufacturing_payment_type').value == 3">
-                                                  <div *ngIf="sup.get('payment_mode').value == 1 ||  sup.get('payment_mode').value == 3">
+                                            <input matInput placeholder="Number of days of credit provided" formControlName="manufacturing_credit_days">
-                                                    <mat-form-field class="ml-xs example-full-width">
-                                                      <input matInput placeholder="% of immediate / Advance Payment Purchase to Total Purchase?" formControlName="per_of_immediate_advance_payment" type="number" min="0">
-                                                      <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
                                         </mat-form-field>
                                     </div>
-                                                  <div *ngIf="sup.get('payment_mode').value == 2  || sup.get('payment_mode').value == 3">
+                                    <div align="end">
-                                                    <mat-form-field class="ml-xs example-full-width">
+                                        <span *ngIf="item.controls.main_raw_materials.controls.length > 1" (click)="removeRawMaterials(l)">
-                                                      <input matInput placeholder="Credit Period" formControlName="credit_period">
+                                            <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" color="primary" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
-                                                      <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
-                                                    </mat-form-field>
-                                                  </div>
-                                                </div>
-                                                <div fxLayout="row" fxLayoutGap="12px" fxLayoutAlign="start none">
-                                                  <div>
-                                                    <mat-form-field>
-                                                      <mat-select (selectionChange)="selectedFreqPurchase($event)" placeholder="Frequency of Purchase" formControlName="frequency_of_purchase" required>
-                                                        <mat-option *ngFor="let feq of m_freqOfPurchase" [value]="feq.frequency_id">{{ feq.name }}</mat-option>
-                                                      </mat-select>
-                                                    </mat-form-field>
-                                                  </div>
-                                                  <div *ngIf="sup.get('frequency_of_purchase').value == 8">
-                                                    <mat-form-field class="ml-xs example-full-width">
-                                                      <input matInput placeholder="Others Details" formControlName="freq_purchase_others_text_value">
-                                                      <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
-                                                    </mat-form-field>
-                                                  </div>
-                                    
-                                                  <div fxFlex="20">
-                                                    <span *ngIf="_clientQuesFrom.controls.client_details.controls.length > 1" (click)="removeLanguage(i)">
-                                                         <button mat-raised-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> -->
-                                        </div>  
-                                      </mat-card-content>
-
-                                      <mat-card-actions align="end">
-                                            <!-- <span *ngIf="_supplierQuesFrom.controls.supplier_details.controls.length > 1" (click)="removeLanguage(i)">
-                                                <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" color="primary" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
-                                            </span> -->
-                                      </mat-card-actions>
-                                        
                                 </mat-card>
-                                 <mat-dialog-actions>          
+                            </div>
+                        </div>
+                        <div>
+                            <mat-form-field style="width: 100%">
+                                <input matInput placeholder="% of total manufacturing raw materials credit values" formControlName="main_raw_materials_total_payments_percent_on_credit"
+                                    type="number">
+                            </mat-form-field>
                             <div fxFlex="100" align="end">
-                                            <button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Client Details" matTooltipPosition="above"
+                                <button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Supplier Details" matTooltipPosition="above"
-                                                    class="mr-1 mb-1 hover-icon" (click)="addSupplierDetails($event); false"><mat-icon>add</mat-icon></button>  
+                                    class="mr-1 mb-1 hover-icon" (click)="addMoreRawMaterials($event); false"><mat-icon>add</mat-icon></button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </mat-card>
+            <mat-card *ngIf="tradingForm">
+                <h5 style="margin: 12px;">Trading Product Details</h5>
+                <div formArrayName="trade_details">
+                    <div *ngFor="let item of _supplierQuesFrom.controls.trade_details['controls']; let i=index" [formGroupName]="i">
+                        <div formArrayName="trading_products">
+                            <div *ngFor="let items of item.controls.trading_products['controls']; let l=index" [formGroupName]="l">
+                                <mat-card style="margin: 12px;">
+                                    <h6 style="margin: 12px;">Trading Product #{{l+1}}</h6>
+                                    <div fxLayout="row wrap" fxLayoutGap="2px" fxLayoutAlign="start none">
+                                        <mat-form-field style="width: 100%">
+                                            <mat-select placeholder="Trading Product Name" formControlName="trade_product_name">
+                                                <mat-option *ngFor="let pm of m_tradingProducts[0]" [value]="pm.name">{{ pm.name }}</mat-option>
+                                            </mat-select>
+                                        </mat-form-field>
+                                        <!--<mat-form-field style="width: 100%">
+                                            <input matInput placeholder="Trade Product Name" formControlName="trade_product_name">
+                                        </mat-form-field>-->
+                                        <mat-form-field style="width: 100%">
+                                            <input matInput placeholder="Client Name" formControlName="trade_client_name">
+                                        </mat-form-field>
+                                        <mat-form-field style="width: 100%">
+                                            <input matInput placeholder="Contact Person Name" formControlName="trade_product_contact_person_name">
+                                        </mat-form-field>
+                                    </div>
+                                    <div fxLayout="row wrap" fxLayoutGap="2px" fxLayoutAlign="start none">
+                                        <mat-form-field style="width: 100%">
+                                            <input matInput placeholder="Contact Person Mobile Number" formControlName="trade_product_contact_person_mobile_number">
+                                        </mat-form-field>
+                                        <mat-form-field style="width: 100%">
+                                            <mat-select placeholder="Payment Type" formControlName="trade_product_payment_type">
+                                                <mat-option *ngFor="let pm of m_paymentModeType" [value]="pm.id">{{ pm.name }}</mat-option>
+                                            </mat-select>
+                                        </mat-form-field>
+                                        <mat-form-field style="width: 100%" *ngIf="items.get('trade_product_payment_type').value == 3">
+                                            <input matInput placeholder="Number of days of credit provided" formControlName="trade_product_credit_days">
+                                        </mat-form-field>
+                                    </div>
+                                    <div align="end">
+                                        <span *ngIf="item.controls.trading_products.controls.length > 1" (click)="removeTradingProduct(l)">
+                                                <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" color="primary" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
+                                                </span>
                                     </div>
-                                </mat-dialog-actions>
                                 </mat-card>
                             </div>
                         </div>
-                      </ng-template>
+                        <div>
-                    </mat-tab>
+                            <mat-form-field style="width: 100%">
-
+                                <input matInput placeholder="% of total trading product credit values" formControlName="trading_products_total_payments_percent_on_credit"
-                    <mat-tab label="Docs">
+                                    type="number">
-                      <ng-template matTabContent>
+                            </mat-form-field>
-                                                          <div fxLayout="row wrap">
+                            <div fxFlex="100" align="end">
-                                                                <div fxFlex="25" class="m-gap p-gap">
+                                <button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Supplier Details" matTooltipPosition="above"
-                                                                    <div class="p-list-main mb-2">
+                                    class="mr-1 mb-1 hover-icon" (click)="addMoretradeProduct($event); false"><mat-icon>add</mat-icon></button>
-                                                                        <div class="p-list">
-                    
-                                                                            <div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
-                                                                            <div class="bottom">
-                                                                                <div class="left">
-                                                                                    <div class="details">
-                                                                                        <small>Nivi SKM</small>
-                                                                                        <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                    </div>
-                                                                                    <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                             </div>
                         </div>
                     </div>
                 </div>
+            </mat-card>
+            <!--===========================: service provider details : START-->
+            <mat-card *ngIf="serviceProviderForm">
+                <h5 style="margin: 12px;">Service Provider Product Details</h5>
+                <div formArrayName="service_provider_details">
+                    <div *ngFor="let item of _supplierQuesFrom.controls.service_provider_details['controls']; let i=index" [formGroupName]="i">
+                        <div formArrayName="service_products">
+                            <div *ngFor="let items of item.controls.service_products['controls']; let l=index" [formGroupName]="l">
+                                <mat-card style="margin: 12px;">
+                                    <h6 style="margin: 12px;">Service Provider Product #{{l+1}}</h6>
+                                    <div fxLayout="row wrap" fxLayoutGap="2px" fxLayoutAlign="start none">
+                                        <mat-form-field style="width: 100%">
+                                            <mat-select placeholder="Service Provider Product Name" formControlName="service_provider_product_name">
+                                                <mat-option *ngFor="let pm of m_suplierProducts[0]" [value]="pm.name">{{ pm.name }}</mat-option>
+                                            </mat-select>
+                                        </mat-form-field>
+                                        <!--<mat-form-field style="width: 100%">
+                                            <input matInput placeholder="Trade Product Name" formControlName="trade_product_name">
+                                        </mat-form-field>-->
+                                        <mat-form-field style="width: 100%">
+                                            <input matInput placeholder="Client Name" formControlName="service_provider_client_name">
+                                        </mat-form-field>
+                                        <mat-form-field style="width: 100%">
+                                            <input matInput placeholder="Contact Person Name" formControlName="service_provider_product_contact_person_name">
+                                        </mat-form-field>
                                     </div>
-
+                                    <div fxLayout="row wrap" fxLayoutGap="2px" fxLayoutAlign="start none">
-                                                                <div fxFlex="25" class="m-gap p-gap">
+                                        <mat-form-field style="width: 100%">
-                                                                        <div class="p-list-main mb-2">
+                                            <input matInput placeholder="Contact Person Mobile Number" formControlName="service_provider_product_contact_person_mobile_number">
-                                                                            <div class="p-list">
+                                        </mat-form-field>
-                        
+                                        <mat-form-field style="width: 100%">
-                                                                                <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                            <mat-select placeholder="Payment Type" formControlName="service_provider_product_payment_type">
-                                                                                <div class="bottom">
+                                                <mat-option *ngFor="let pm of m_paymentModeType" [value]="pm.id">{{ pm.name }}</mat-option>
-                                                                                    <div class="left">
+                                            </mat-select>
-                                                                                        <div class="details">
+                                        </mat-form-field>
-                                                                                            <small>Nivi SKM</small>
+                                        <mat-form-field style="width: 100%" *ngIf="items.get('service_provider_product_payment_type').value == 3">
-                                                                                            <!-- <p>{{docs.pd_document_name}}</p> -->
+                                            <input matInput placeholder="Number of days of credit provided" formControlName="service_provider_product_credit_days">
+                                        </mat-form-field>
                                     </div>
-                                                                                        <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                    <div align="end">
+                                        <span *ngIf="item.controls.service_products.controls.length > 1" (click)="removeServiceProduct(l)">
+                                                <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" color="primary" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
+                                                </span>
+                                    </div>
+                                </mat-card>
+                            </div>
+                        </div>
+                        <div>
+                            <mat-form-field style="width: 100%">
+                                <input matInput placeholder="% of total service provider products credit values" formControlName="service_products_total_payments_percent_on_credit"
+                                    type="number">
+                            </mat-form-field>
+                            <div fxFlex="100" align="end">
+                                <button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Supplier Details" matTooltipPosition="above"
+                                    class="mr-1 mb-1 hover-icon" (click)="addMoreServiceProduct($event); false"><mat-icon>add</mat-icon></button>
                             </div>
                         </div>
                     </div>
                 </div>
-                                                                </div>
+            </mat-card>
-
+            <mat-card *ngIf="retaildTradingForm">
-                                                                <div fxFlex="25" class="m-gap p-gap">
+                <h5 style="margin: 12px;">Retail Trading Product Details</h5>
-                                                                            <div class="p-list-main mb-2">
+                <div style="text-align: center; margin: 12px;">Retail Trading Details Not applicable here !!</div>
-                                                                                <div class="p-list">
+            </mat-card>
-                            
-                                                                                    <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                    <div class="bottom">
-                                                                                        <div class="left">
-                                                                                            <div class="details">
-                                                                                                <small>Nivi SKM</small>
-                                                                                                <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                            </div>
-                                                                                            <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
-                                                                                        </div>
-                                                                                    </div>
-                                                                                </div>
-                                                                            </div>
-                                                                </div>
-
-                                                                <div fxFlex="25" class="m-gap p-gap">
-                                                                                <div class="p-list-main mb-2">
-                                                                                    <div class="p-list">
-                                
-                                                                                        <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                        <div class="bottom">
-                                                                                            <div class="left">
-                                                                                                <div class="details">
-                                                                                                    <small>Nivi SKM</small>
-                                                                                                    <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                                </div>
-                                                                                                <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
-                                                                                            </div>
-                                                                                        </div>
-                                                                                    </div>
-                                                                                </div>
-                                                                </div>
-
-                                                                <div fxFlex="25" class="m-gap p-gap">
-                                                                                    <div class="p-list-main mb-2">
-                                                                                        <div class="p-list">
-                                    
-                                                                                            <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                            <div class="bottom">
-                                                                                                <div class="left">
-                                                                                                    <div class="details">
-                                                                                                        <small>Nivi SKM</small>
-                                                                                                        <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                                    </div>
-                                                                                                    <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
-                                                                                                </div>
-                                                                                            </div>
-                                                                                        </div>
-                                                                                    </div>
-                                                                </div>
-                                                                <div fxFlex="25" class="m-gap p-gap">
-                                                                                        <div class="p-list-main mb-2">
-                                                                                            <div class="p-list">
-                                        
-                                                                                                <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                                <div class="bottom">
-                                                                                                    <div class="left">
-                                                                                                        <div class="details">
-                                                                                                            <small>Nivi SKM</small>
-                                                                                                            <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                                        </div>
-                                                                                                        <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
-                                                                                                    </div>
-                                                                                                </div>
-                                                                                            </div>
-                                                                                        </div>
-                                                                </div>
-                    
-                                                            </div>
-                                            
-                      </ng-template>
-                    </mat-tab>
-                  
-            </mat-tab-group>
-    
         </mat-dialog-content>
-
         <mat-dialog-actions>
             <div fxFlex="60" class="pb-0 text-sm-left" align="left">
-                    <!-- <mat-form-field appearance="outline" style="width: 100%">
+                <mat-form-field appearance="outline" style="width: 100%">
                     <mat-label>Remarks</mat-label>
-                      <textarea matInput placeholder="Remarks" formControlName="personal_info_form_remark" required></textarea>
+                    <textarea matInput placeholder="Remarks" formControlName="supplier_info_form_remark"></textarea>
-                    </mat-form-field> -->
+                </mat-form-field>
             </div>
             <div fxFlex="40" align="end">
-                  <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>
         </mat-dialog-actions>
-    
-</form>
-<notifier-container></notifier-container>
-
-<!--<pre> {{ m_group | json}}</pre>--
-<mat-card style="padding: 12px;">
-	<p>Client Details</p>
-  <form *ngIf="apiLoadFinish" [formGroup]="_clientQuesFrom" (submit)="onSubmit()" novalidate>
-    <div fxLayout="row" fxLayoutAlign="start none">
-      <div formArrayName="client_details" fxFill>
-        <div *ngFor="let sup of _clientQuesFrom.controls.client_details['controls']; let i=index">
-          <div [formGroupName]="i">
-            <div fxLayout="row wrap" fxLayoutGap="12px" fxLayoutAlign="start none">
-              <div>
-                <mat-form-field class="ml-xs example-full-width">
-                  <input matInput placeholder="Client Name" formControlName="client_name" required>
-                  <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>---
-                </mat-form-field>
-              </div>
-              <div>
-                <mat-form-field class="ml-xs example-full-width">
-                  <input matInput placeholder="Contact Person Name" formControlName="contact_person" required>
-                  <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>---
-                </mat-form-field>
-              </div>
-              <div>
-                <mat-form-field class="ml-xs example-full-width">
-                  <input matInput placeholder="Contact Mobile Number" formControlName="mobile_number" (keypress)="keyPress($event)" minlength=10 maxlength=10 required>
-                  <!-- <mat-error *ngIf="sup.controls['mobile_number'].hasError('requried') && sup.controls['mobile_number'].touched" class="mat-text-warn">Mobile Number Requried</mat-error>  --
-                  <mat-error *ngIf="sup.controls['mobile_number'].hasError('minlength') && sup.controls['mobile_number'].touched" class="mat-text-warn">Valid Mobile Number Requried</mat-error> 
-                  <mat-error *ngIf="sup.controls['mobile_number'].hasError('maxlength') && sup.controls['mobile_number'].touched" class="mat-text-warn">Valid Mobile Number Requried</mat-error> 
-                </mat-form-field>
-              </div>
-            </div>
-            <div fxLayout="row wrap" fxLayoutGap="12px" fxLayoutAlign="start none">
-              <div>
-                <mat-form-field>
-                  <mat-select (selectionChange)="selectedPM($event)" placeholder="Payment Mode" formControlName="payment_mode" required>
-                    <mat-option *ngFor="let pm of m_paymentModeType" [value]="pm.id">{{ pm.name }}</mat-option>
-                  </mat-select>
-                </mat-form-field>
-              </div>
-              <div *ngIf="sup.get('payment_mode').value == 1 ||  sup.get('payment_mode').value == 3">
-                <mat-form-field class="ml-xs example-full-width">
-                  <input matInput placeholder="% of immediate / Advance Payment Purchase to Total Purchase?" formControlName="per_of_immediate_advance_payment" type="number" min="0">
-                  <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>--
-                </mat-form-field>
-              </div>
-              <div *ngIf="sup.get('payment_mode').value == 2  || sup.get('payment_mode').value == 3">
-                <mat-form-field class="ml-xs example-full-width">
-                  <input matInput placeholder="Credit Period" formControlName="credit_period">
-                  <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>--
-                </mat-form-field>
-              </div>
-            </div>
-            <div fxLayout="row" fxLayoutGap="12px" fxLayoutAlign="start none">
-              <div>
-                <mat-form-field>
-                  <mat-select (selectionChange)="selectedFreqPurchase($event)" placeholder="Frequency of Purchase" formControlName="frequency_of_purchase" required>
-                    <mat-option *ngFor="let feq of m_freqOfPurchase" [value]="feq.frequency_id">{{ feq.name }}</mat-option>
-                  </mat-select>
-                </mat-form-field>
-              </div>
-              <div *ngIf="sup.get('frequency_of_purchase').value == 8">
-                <mat-form-field class="ml-xs example-full-width">
-                  <input matInput placeholder="Others Details" formControlName="freq_purchase_others_text_value">
-                  <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>--
-                </mat-form-field>
-              </div>
-
-              <div fxFlex="20">
-                <span *ngIf="_clientQuesFrom.controls.client_details.controls.length > 1" (click)="removeLanguage(i)">
-                     <button mat-raised-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>
-        </div>
-       
-      </div>
-    </div>
-    <div class="row" style="text-align:right;">
- <button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Client Details" matTooltipPosition="above"
-          class="mr-1 mb-1 hover-icon" (click)="addSupplierDetails($event); false"><mat-icon>add</mat-icon></button>
-      <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>
-</mat-card>-->
+</div>

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/client-info/client-info.component.ts

@@ -30,69 +30,46 @@ import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
 })
 export class ClientInfoComponent implements OnInit {
 
-  pageTitle: string ="Client Details";
+  pageTitle: string = "Client Details";
 
   //@Input() pdid: number;
-  pdid : number;
+  pdid: string;
   form_id: number;
 
-  loadDataStatus: boolean=true;
+  public _supplierQuesFrom: FormGroup;
-
-
-  public _clientQuesFrom: FormGroup;
   public submitted = false;
 
-  public m_paymentModeType= [];
+  public m_paymentModeType = [];
-  // public m_paymentModeType= [
+  private notifier: NotifierService;
-  //   {
+
-  //     'id': "1",
+
-  //     'name': 'Immediate Or Advanced Payment'
+  public m_manufacturingProducts = [
-  //   },
+    {
-  //   {
+      id: 1,
-  //     'id': "2",
+      name: 'Manufac prd 1'
-  //     'name': 'Credit'
+    }, {
-  //   },
+      id: 2,
-  //   {
+      name: 'Manufac prd 2'
-  //     'id': "3",
+    }
-  //     'name': 'Combination of Both'
+  ];
-  //   },
+  public m_tradingProducts = [
-  // ];
+    {
- public m_freqOfPurchase= [];
+      id: 1,
-  // public m_freqOfPurchase= [
+      name: 'trading prd 1'
-  //   {
+    }, {
-  //     'id': "1",
+      id: 2,
-  //     'name': 'Daily'
+      name: 'trading prd 2'
-  //   },
+    }
-  //   {
+  ];
-  //     'id': "2",
+  public m_suplierProducts = [
-  //     'name': 'Weekly'
+    {
-  //   },
+      id: 1,
-  //   {
+      name: 'service prd 1'
-  //     'id': "3",
+    }, {
-  //     'name': 'Monthly'
+      id: 2,
-  //   },
+      name: 'service prd 2'
-  //   {
+    }
-  //     'id': "4",
+  ];
-  //     'name': 'Every 3 months'
-  //   },
-  //   {
-  //     'id': "5",
-  //     'name': 'Half yearly'
-  //   },
-  //   {
-  //     'id': "6",
-  //     'name': 'Yearly'
-  //   },
-  //   {
-  //     'id': "7",
-  //     'name': 'As and when required'
-  //   },
-  //   {
-  //     'id': "8",
-  //     'name': 'Others'
-  //   }
-  // ]
-private notifier: NotifierService;
 
   constructor(
     notifier: NotifierService,
@@ -102,28 +79,394 @@ private notifier: NotifierService;
     this.pdid = this.pd_all_details.pdmaster_details.pd_id;
     this.form_id = 2;
     this.notifier = notifier;
-}
+  }
+  public viewerOptions: any = {
+    navbar: false,
+    toolbar: {
+      zoomIn: 4,
+      zoomOut: 4,
+      oneToOne: 4,
+      reset: 4,
+      prev: 4,
+      play: {
+        show: 4,
+        size: 'large',
+      },
+      next: 4,
+      rotateLeft: 4,
+      rotateRight: 4,
+      flipHorizontal: 4,
+      flipVertical: 4,
+    }
+  };
 
+  noRecordsFound: Boolean = false;
   ngOnInit() {
-    this.getM_FreqOfPurchase();
+
+    this.pdTrigerService.getTypeofActivityForSuppliedInfoForm(this.pdid).subscribe(data => {
+      if(data.dataStatus){
+      // let datas = {
+      //   "profession_name": "Others",
+      //   "type_of_activity": [
+      //     {
+      //       "type_of_activity_id": 1,
+      //       "name": "Manufacturing Details"
+      //     },
+      //     {
+      //       "type_of_activity_id": 2,
+      //       "name": "Retail trading"
+      //     },
+      //     {
+      //       "type_of_activity_id": 3,
+      //       "name": "Wholesale trading"
+      //     },
+      //     {
+      //       "type_of_activity_id": 4,
+      //       "name": "Service Providers"
+      //     }
+      //   ]
+      // };
+      let datas = data.records;
+      this.m_manufacturingProducts = datas.type_of_activity.filter(data=>{if(data.type_of_activity_id == 1 ){return data}}).map(data=> [...data.prodcuts]);
+      this.m_tradingProducts = datas.type_of_activity.filter(data=>{if(data.type_of_activity_id == 3 ){return data}}).map(data=> [...data.prodcuts]);
+      this.m_suplierProducts = datas.type_of_activity.filter(data=>{if(data.type_of_activity_id == 4 ){return data}}).map(data=> [...data.prodcuts]);
+    // alert(JSON.stringify(this.m_manufacturingProducts[0]));
+      this.initFormLoadDetails(datas.type_of_activity);
+      }else {
+        this.notifier.notify('warning', 'No Category Records Found.!');
+        this.noRecordsFound = false;
+      }
+    }, err => {
+      this.notifier.notify('warning', 'No Category Records Found.!');
+      this.noRecordsFound = false;
+    })
+
+    //  this.getM_FreqOfPurchase();
     this.getM_PaymentModeType();
-    this.getClientFormDetails();
+    // this.getPdSupplierFormDetails();
+  }
+
+  retaildTradingForm: Boolean = false;
+  initFormLoadDetails(record) {
+    this.pdTrigerService.getPDFormDetailsWithID(this.pdid, '2').subscribe(
+      data => {
+        if (data.dataStatus) {
+          let dataForm = data.records;
+          if (dataForm !== undefined) {
+            this._supplierQuesFrom = this._formBuilder.group({
+              pdid: [this.pdid],
+              formid: ['2'],
+              manufacturing_details: this._formBuilder.array([this.manufacturingFormCreation(record)]),
+              trade_details: this._formBuilder.array([this.tradingFormCreation(record)]),
+              service_provider_details: this._formBuilder.array([this.serviceProviderFormCreation(record)]),
+              supplier_info_form_remark: [dataForm.supplier_info_form_remark || null]
+              // wholesale_trade_details: this._formBuilder.array([this.tradingFormCreation(record)]),
+            });
+            // Load form details for manufacturing
+            let arr = record.filter(data => data.type_of_activity_id == 1);
+            if (arr.length > 0) {
+              let api_main_raw_materials = Object.keys(dataForm.main_raw_materials).map(function (key) {
+                return dataForm.main_raw_materials[key];
+              });
+              this.initManufacturingProductsDetails(api_main_raw_materials);
+              this._supplierQuesFrom.controls['manufacturing_details']['controls'][0].controls['main_raw_materials_total_payments_percent_on_credit'].setValue(dataForm.main_raw_materials_total_payments_percent_on_credit || null);
+            }
+
+            // Load form details for the wholeshale trading details
+            let arr1 = record.filter(data => data.type_of_activity_id == 3);
+            if (arr1.length > 0) {
+              let api_trading_products = Object.keys(dataForm.trading_products).map(function (key) {
+                return dataForm.trading_products[key];
+              });
+              this.initTradingProductsDetails(api_trading_products);
+              this._supplierQuesFrom.controls['trade_details']['controls'][0].controls['trading_products_total_payments_percent_on_credit'].setValue(dataForm.trading_products_total_payments_percent_on_credit || null);
+            }
+
+            // Load form details for the service provider prduct details 
+            let arr2 = record.filter(data => data.type_of_activity_id == 4);
+            if (arr2.length > 0) {
+              let api_service_provider_products = Object.keys(dataForm.service_products).map(function (key) {
+                return dataForm.service_products[key];
+              });
+              this.initServiceProviderProductsDetails(api_service_provider_products);
+              this._supplierQuesFrom.controls['service_provider_details']['controls'][0].controls['service_products_total_payments_percent_on_credit'].setValue(dataForm.service_products_total_payments_percent_on_credit || null);
+            }
+            // Load form details for the retail trading details
+            let arr3 = record.filter(data => data.type_of_activity_id == 2);
+            if (arr3.length > 0) {
+              this.retaildTradingForm = true;
+            }
+            this.noRecordsFound = true;
+          } else {
+            this._supplierQuesFrom = this._formBuilder.group({
+              pdid: [this.pdid],
+              formid: ['2'],
+              manufacturing_details: this._formBuilder.array([this.manufacturingFormCreation(record)]),
+              trade_details: this._formBuilder.array([this.tradingFormCreation(record)]),
+              service_provider_details: this._formBuilder.array([this.serviceProviderFormCreation(record)]),
+              supplier_info_form_remark: [dataForm.supplier_info_form_remark || null]
+              // wholesale_trade_details: this._formBuilder.array([this.tradingFormCreation(record)]),
+            });
+            let arr = record.filter(data => data.type_of_activity_id == 1);
+            if (arr.length > 0) {
+              this.initManufacturingProductsDetails(null);
+              this._supplierQuesFrom.controls['manufacturing_details']['controls'][0].controls['main_raw_materials_total_payments_percent_on_credit'].setValue(null);
+            }
+            let arr1 = record.filter(data => data.type_of_activity_id == 3);
+            if (arr1.length > 0) {
+              this.initTradingProductsDetails(null);
+              this._supplierQuesFrom.controls['trade_details']['controls'][0].controls['trading_products_total_payments_percent_on_credit'].setValue(dataForm.trading_products_total_payments_percent_on_credit || null);
+            }
+            let arr2 = record.filter(data => data.type_of_activity_id == 4);
+            if (arr2.length > 0) {
+              let api_service_provider_products = Object.keys(dataForm.service_products).map(function (key) {
+                return dataForm.service_products[key];
+              });
+              this.initServiceProviderProductsDetails(api_service_provider_products);
+              this._supplierQuesFrom.controls['service_provider_details']['controls'][0].controls['service_products_total_payments_percent_on_credit'].setValue(dataForm.service_products_total_payments_percent_on_credit || null);
+            }
+            // Load form details for the retail trading details
+            let arr3 = record.filter(data => data.type_of_activity_id == 2);
+            if (arr3.length > 0) {
+              this.retaildTradingForm = true;
+            }
+            this.noRecordsFound = true;
+          }
+        } else {
+          this._supplierQuesFrom = this._formBuilder.group({
+            pdid: [this.pdid],
+            formid: ['2'],
+            manufacturing_details: this._formBuilder.array([this.manufacturingFormCreation(record)]),
+            trade_details: this._formBuilder.array([this.tradingFormCreation(record)]),
+            service_provider_details: this._formBuilder.array([this.serviceProviderFormCreation(record)]),
+            supplier_info_form_remark: []
+            // wholesale_trade_details: this._formBuilder.array([this.tradingFormCreation(record)]),
+          });
+          let arr = record.filter(data => data.type_of_activity_id == 1);
+          if (arr.length > 0) {
+            this.initManufacturingProductsDetails(null);
+            this._supplierQuesFrom.controls['manufacturing_details']['controls'][0].controls['main_raw_materials_total_payments_percent_on_credit'].setValue(null);
+          }
+          let arr1 = record.filter(data => data.type_of_activity_id == 3);
+          if (arr1.length > 0) {
+            this.initTradingProductsDetails(null);
+            this._supplierQuesFrom.controls['trade_details']['controls'][0].controls['trading_products_total_payments_percent_on_credit'].setValue(null);
+          }
+          let arr2 = record.filter(data => data.type_of_activity_id == 4);
+          if (arr2.length > 0) {
+            this.initServiceProviderProductsDetails(null);
+            this._supplierQuesFrom.controls['service_provider_details']['controls'][0].controls['service_products_total_payments_percent_on_credit'].setValue(null);
+          }
+          // Load form details for the retail trading details
+          let arr3 = record.filter(data => data.type_of_activity_id == 2);
+          if (arr3.length > 0) {
+            this.retaildTradingForm = true;
+          }
+          this.noRecordsFound = true;
+        }
+      }, err => {
+
+      }
+    );
   }
 
 
-// ==================
+  manufacturingForm: Boolean = false;
+  manufacturingFormCreation(val) {
+    let arr = val.filter(data => data.type_of_activity_id == 1);
+    if (arr.length > 0) {
+      this.manufacturingForm = true;
+      return this._formBuilder.group({
+        main_raw_materials: this._formBuilder.array([]),
+        main_raw_materials_total_payments_percent_on_credit: []
+      })
+      // }
+    } else {
+      return;
+    }
+  }
 
-  getM_FreqOfPurchase() {
+  tradingForm: Boolean = false;
-    this.pdTrigerService.getAllMasterDatas('FREQUENCY').subscribe(
+  tradingFormCreation(val) {
-      data => {
+    let arr = val.filter(data => data.type_of_activity_id == 3);
-        this.m_freqOfPurchase = data.records.filter(data => data.isactive == 1);
+    if (arr.length > 0) {
-      },
+      this.tradingForm = true;
-      error => {
+      return this._formBuilder.group({
+        trading_products: this._formBuilder.array([]),
+        trading_products_total_payments_percent_on_credit: []
+      });
+    } else {
+      return;
+    }
+  }
+
+  serviceProviderForm: Boolean = false;
+  serviceProviderFormCreation(val) {
+    let arr = val.filter(data => data.type_of_activity_id == 4);
+    if (arr.length > 0) {
+      this.serviceProviderForm = true;
+      return this._formBuilder.group({
+        service_products: this._formBuilder.array([]),
+        service_products_total_payments_percent_on_credit: []
+      });
+    } else {
+      return;
+    }
+  }
+
+  initManufacturingProductsDetails(datas) {
+    const control = <FormArray>this._supplierQuesFrom.controls['manufacturing_details']['controls'][0].controls['main_raw_materials'];
+    if (datas === null) {
+      control.push(this.initManufacturingProducts(null));
+    } else {
+      for (let val of datas) {
+        control.push(this.initManufacturingProducts(val));
+      }
+    }
+  }
+
+  initManufacturingProducts(records) {
+    if (records === null) {
+      return this._formBuilder.group({
+        manufacturing_product_name: [''],
+        manufacturing_client_name: [''],
+        manufacturing_contact_person_name: [''],
+        manufacturing_contact_person_mobile_number: [''],
+        manufacturing_payment_type: [''],
+        manufacturing_credit_days: [''],
+      })
+    } else {
+      return this._formBuilder.group({
+        manufacturing_product_name: [records.manufacturing_raw_material_name || null],
+        manufacturing_client_name: [records.manufacturing_client_name || null],
+        manufacturing_contact_person_name: [records.manufacturing_contact_person_name || null],
+        manufacturing_contact_person_mobile_number: [records.manufacturing_contact_person_mobile_number || null],
+        manufacturing_payment_type: [records.manufacturing_payment_type || null],
+        manufacturing_credit_days: [records.manufacturing_credit_days || null],
+      })
+    }
+  }
+
+  initTradingProductsDetails(datas) {
+    const control = <FormArray>this._supplierQuesFrom.controls['trade_details']['controls'][0].controls['trading_products'];
+    if (datas === null) {
+      control.push(this.initTradingProducts(null));
+    } else {
+      for (let val of datas) {
+        control.push(this.initTradingProducts(val));
+      }
+    }
+  }
+
+  initTradingProducts(records) {
+    if (records === null) {
+      return this._formBuilder.group({
+        trade_product_name: [''],
+        trade_client_name: [''],
+        trade_product_contact_person_name: [''],
+        trade_product_contact_person_mobile_number: [''],
+        trade_product_payment_type: [''],
+        trade_product_frequency_of_purchase: [''],
+        trade_product_credit_days: [''],
+      })
+    } else {
+      return this._formBuilder.group({
+        trade_product_name: [records.trade_product_name],
+        trade_client_name: [records.trade_client_name],
+        trade_product_contact_person_name: [records.trade_product_contact_person_name],
+        trade_product_contact_person_mobile_number: [records.trade_product_contact_person_mobile_number],
+        trade_product_payment_type: [records.trade_product_payment_type],
+        trade_product_frequency_of_purchase: [records.trade_product_frequency_of_purchase],
+        trade_product_credit_days: [records.trade_product_credit_days],
+      })
+    }
+  }
+
+  initServiceProviderProductsDetails(datas) {
+    const control = <FormArray>this._supplierQuesFrom.controls['service_provider_details']['controls'][0].controls['service_products'];
+    if (datas === null) {
+      control.push(this.initServiceProviderProducts(null));
+    } else {
+      for (let val of datas) {
+        control.push(this.initServiceProviderProducts(val));
+      }
+    }
+  }
+
+  initServiceProviderProducts(records) {
+    if (records === null) {
+      return this._formBuilder.group({
+        service_provider_product_name: [''],
+        service_provider_client_name: [''],
+        service_provider_product_contact_person_name: [''],
+        service_provider_product_contact_person_mobile_number: [''],
+        service_provider_product_payment_type: [''],
+        service_provider_product_frequency_of_purchase: [''],
+        service_provider_product_credit_days: [''],
+      })
+    } else {
+      return this._formBuilder.group({
+        service_provider_product_name: [records.service_provider_product_name],
+        service_provider_client_name: [records.service_provider_client_name],
+        service_provider_product_contact_person_name: [records.service_provider_product_contact_person_name],
+        service_provider_product_contact_person_mobile_number: [records.service_provider_product_contact_person_mobile_number],
+        service_provider_product_payment_type: [records.service_provider_product_payment_type],
+        service_provider_product_frequency_of_purchase: [records.service_provider_product_frequency_of_purchase],
+        service_provider_product_credit_days: [records.service_provider_product_credit_days],
+      })
+    }
+  }
+
+  addMoreRawMaterials(e): void {
+    // e.stropPropagation();
+    const control = <FormArray>this._supplierQuesFrom.controls['manufacturing_details']['controls'][0].controls['main_raw_materials'];
+    // console.log(control);
+    control.push(this.initManufacturingProducts(null));
+  }
+
+  removeRawMaterials(inx): void {
+    const control = <FormArray>this._supplierQuesFrom.controls['manufacturing_details']['controls'][0].controls['main_raw_materials'];
+    control.removeAt(inx);
+  }
+
+  addMoretradeProduct(e): void {
+    // e.stropPropagation();
+    const control = <FormArray>this._supplierQuesFrom.controls['trade_details']['controls'][0].controls['trading_products'];
+    // console.log(control);
+    control.push(this.initTradingProducts(null));
+  }
+
+  removeTradingProduct(inx): void {
+    const control = <FormArray>this._supplierQuesFrom.controls['trade_details']['controls'][0].controls['trading_products'];
+    control.removeAt(inx);
+  }
+
+  addMoreServiceProduct(e): void {
+    // e.stropPropagation();
+    const control = <FormArray>this._supplierQuesFrom.controls['service_provider_details']['controls'][0].controls['service_products'];
+    // console.log(control);
+    control.push(this.initServiceProviderProducts(null));
+  }
+
+  removeServiceProduct(inx): void {
+    const control = <FormArray>this._supplierQuesFrom.controls['service_provider_details']['controls'][0].controls['service_products'];
+    control.removeAt(inx);
+  }
+
+
+  // ==================
+
+  //getM_FreqOfPurchase() {
+  // this.pdTrigerService.getAllMasterDatas('FREQUENCY').subscribe(
+  //   data => {
+  //     this.m_freqOfPurchase = data.records.filter(data => data.isactive == 1);
+  //   },
+  //   error => {
   // this.notifier.notify('warning', 'No Category Records Found.!');
   // this.m_assets_type = "No Category Records Found.";
-      }
+  ///   }
-    )
+  // )
-  }
+  // }
 
   getM_PaymentModeType() {
     this.pdTrigerService.getAllMasterDatas('PAYMENTMODE').subscribe(
@@ -138,132 +481,28 @@ private notifier: NotifierService;
   }
 
 
-// ==================
+  // ==================
-
-apiLoadFinish: boolean = false;
-  getClientFormDetails() {
-    this.pdTrigerService.getPDFormDetailsWithID(this.pdid, '2').subscribe(
-          data => {
-            if (data) {
-                if(data.dataStatus){
-                  this.formLoadData(data.records)
-                } else {
-                  this.formLoadData(null)
-                }
-                this.apiLoadFinish = true;
-            } else {
-              // this.noRecordFound = true;
-            }
-      }
-    );
-  }
-
-  formLoadData(val) {
-    if(val !== null) {
-      let value = val;
-       this._clientQuesFrom = this._formBuilder.group({
-          pdid: [this.pdid],
-          formid: ['2'],
-          client_details: this._formBuilder.array([
-            // this.initDetails(),
-        ])
-      });
-      this.addClientDetailsWithData(value.client_details);
-    } else {
-      this._clientQuesFrom = this._formBuilder.group({
-          pdid: [this.pdid],
-          formid: ['2'],
-          client_details: this._formBuilder.array([
-            this.initDetails(),
-        ])
-      });
-    }
-  }
-
-   // convenience getter for easy access to form fields
-  get f() { return this._clientQuesFrom.controls; }
-
-  // Dynamic Form field creation Functionality : START ===>
-  initDetails() {
-    return this._formBuilder.group({
-      client_name: ['', Validators.compose([Validators.required])],
-      contact_person: ['', Validators.compose([Validators.required])],
-      mobile_number: ['', Validators.compose([Validators.required, Validators.minLength(10), Validators.maxLength(10)])],
-      payment_mode: ['',  Validators.compose([Validators.required])],
-      per_of_immediate_advance_payment:[''],
-      credit_period:[''],
-      frequency_of_purchase: ['', Validators.compose([Validators.required])],
-      freq_purchase_others_text_value: ['']
-    });
-  }
-
-  initDetailsWithdata(data) {
-    return this._formBuilder.group({
-      client_name: [data.client_name, Validators.compose([Validators.required])],
-      contact_person: [data.contact_person, Validators.compose([Validators.required])],
-      mobile_number: [data.mobile_number, Validators.compose([Validators.required, Validators.minLength(10), Validators.maxLength(10)])],
-      payment_mode: [data.payment_mode,  Validators.compose([Validators.required])],
-      per_of_immediate_advance_payment:[data.per_of_immediate_advance_payment || ''],
-      credit_period:[data.credit_period || ''],
-      frequency_of_purchase: [data.frequency_of_purchase, Validators.compose([Validators.required])],
-      freq_purchase_others_text_value: [data.freq_purchase_others_text_value || '']
-    });
-  } 
-
-  addClientDetailsWithData(supp_data) {
-
-var result = Object.keys(supp_data).map(function(key) {
-  return supp_data[key];
-});
-      if (result.length > 0) {
-      for (let val of result) {
-        let vals = {
-          client_name: val.client_name,
-          contact_person: val.contact_person,
-          mobile_number: val.mobile_number,
-          payment_mode: val.payment_mode,
-          per_of_immediate_advance_payment: val.per_of_immediate_advance_payment,
-          credit_period: val.credit_period,
-          frequency_of_purchase: val.frequency_of_purchase,
-          freq_purchase_others_text_value: val.freq_purchase_others_text_value
-        };
-        const control = <FormArray>this._clientQuesFrom.controls['client_details'];
-        control.push(this.initDetailsWithdata(vals));
-      }
-    }
-  }
-
-  addSupplierDetails(e) {
-    const control = <FormArray>this._clientQuesFrom.controls['client_details'];
-    control.push(this.initDetails());
-  }
-  removeLanguage(i: number) {
-    const control = <FormArray>this._clientQuesFrom.controls['client_details'];
-    control.removeAt(i);
-  }
-
-  public paymentModeTextBox: number;
-  selectedPM(e) {
-    this.paymentModeTextBox = e.value;
-    // this.f.supplier_details.controls.get('payment_mode_value');
-  }
-  public freqPurchaseTextBox: number;
-  selectedFreqPurchase(e){
-     this.freqPurchaseTextBox = e.value;
-  }
 
   /** To Save/Edited Popup Data */
   onSubmit() {
     this.submitted = true;
     // stop here if form is invalid
-    if (this._clientQuesFrom.invalid) {
+    if (this._supplierQuesFrom.invalid) {
       return;
     } else {
-      var answerFormValues = this._clientQuesFrom.value;
+      var answerFormValues = this._supplierQuesFrom.value;
-
-      // To Remove The "Null" With Key also
-      Object.keys(answerFormValues).forEach((key) => (answerFormValues[key] == null) && delete answerFormValues[key]);
 
+      //To Remove The "Null" With Key also
+      Object.keys(answerFormValues).forEach((key) => {if(answerFormValues[key] === null || answerFormValues[key] === undefined || answerFormValues[key] === ''){ delete answerFormValues[key]}; console.log("chec:" +answerFormValues[key])});
+      if(answerFormValues.manufacturing_details[0]==null){
+        delete answerFormValues['manufacturing_details'];
+      }
+      if(answerFormValues.trade_details[0]==null){
+        delete answerFormValues['trade_details'];
+      }
+      if(answerFormValues.service_provider_details[0]==null){
+        delete answerFormValues['service_provider_details'];
+      }
       // Add BRANCH data with help Service File
       this.pdTrigerService.savePDFormDetailsWithID(answerFormValues).subscribe(
         dataresult => {
@@ -291,6 +530,7 @@ var result = Object.keys(supp_data).map(function(key) {
   onReset() {
     // this._addQuesFrom.reset();
   }
+
   /** On Key Press Event For Mobile Number  */
   keyPress(event: any) {
     const pattern = /[0-9]/;

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/current-loan/current-loan.component.html

@@ -107,116 +107,98 @@
     
                         <mat-tab label="Docs">
                           <ng-template matTabContent>
-                                                              <div fxLayout="row wrap">
+                              <div ngxViewer>
-                                                                    <div fxFlex="25" class="m-gap p-gap">
+                                 <div fxLayout="row wrap" style="padding:20px;">
-                                                                        <div class="p-list-main mb-2">
+                                <div fxFlex="100">
+                                  <div fxFlex="20" class="m-gap p-gap">
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
                                           <div class="p-list">                                                                           
-                        
+                                            <div class="top"> <img src="https://picsum.photos/2000/1500/?random=1" alt="Image 1"></div>   
-                                                                                <div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
-                                                                                <div class="bottom">
-                                                                                    <div class="left">
-                                                                                        <div class="details">
-                                                                                            <small>Nivi SKM</small>
-                                                                                            <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                        </div>
-                                                                                        <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                        </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                                    </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-    
-                                                                    <div fxFlex="25" class="m-gap p-gap">
-                                                                            <div class="p-list-main mb-2">
                                           <div class="p-list">
-                            
+                                              <div class="top"> <img src="https://picsum.photos/2000/1500/?random=2" alt="Image 2"></div>                                                    
-                                                                                    <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                    <div class="bottom">
-                                                                                        <div class="left">
-                                                                                            <div class="details">
-                                                                                                <small>Nivi SKM</small>
-                                                                                                <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                            </div>
-                                                                                            <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                            </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                                    </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-    
-                                                                    <div fxFlex="25" class="m-gap p-gap">
-                                                                                <div class="p-list-main mb-2">
                                           <div class="p-list">  
-                                
+                                              <div class="top"><img src="https://picsum.photos/2000/1500/?random=3" alt="Image 3"></div>                                                          
-                                                                                        <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                        <div class="bottom">
-                                                                                            <div class="left">
-                                                                                                <div class="details">
-                                                                                                    <small>Nivi SKM</small>
-                                                                                                    <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                                </div>
-                                                                                                <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>  
-                                                                                </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                                    </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-    
-                                                                    <div fxFlex="25" class="m-gap p-gap">
-                                                                                    <div class="p-list-main mb-2">
                                           <div class="p-list">
-                                    
+                                              <div class="top"> <img src="https://picsum.photos/2000/1500/?random=2" alt="Image 2"></div>                                                    
-                                                                                            <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                            <div class="bottom">
-                                                                                                <div class="left">
-                                                                                                    <div class="details">
-                                                                                                        <small>Nivi SKM</small>
-                                                                                                        <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                                    </div>
-                                                                                                    <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                                    </div>
+                                    <div fxFlex="20" class="m-gap p-gap">
-                                                                    </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-    
-                                                                    <div fxFlex="25" class="m-gap p-gap">
-                                                                                        <div class="p-list-main mb-2">
                                           <div class="p-list">  
-                                        
+                                              <div class="top"><img src="https://picsum.photos/2000/1500/?random=3" alt="Image 3"></div>                                                          
-                                                                                                <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                                <div class="bottom">
-                                                                                                    <div class="left">
-                                                                                                        <div class="details">
-                                                                                                            <small>Nivi SKM</small>
-                                                                                                            <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                                        </div>
-                                                                                                        <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                                        </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                                    </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                    <div fxFlex="25" class="m-gap p-gap">
-                                                                                            <div class="p-list-main mb-2">
                                           <div class="p-list">                                                                           
-                                            
+                                            <div class="top"> <img src="https://picsum.photos/2000/1500/?random=1" alt="Image 1"></div>   
-                                                                                                    <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                                    <div class="bottom">
-                                                                                                        <div class="left">
-                                                                                                            <div class="details">
-                                                                                                                <small>Nivi SKM</small>
-                                                                                                                <!-- <p>{{docs.pd_document_name}}</p> -->
                                           </div>
-                                                                                                            <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                      </div>
+                                  </div>
+                                </div>
+                                <div fxFlex="row">
+                                   <div fxFlex="100" class="m-gap p-gap">
+                                          <div fxLayout="row" fxLayoutWrap="wrap">
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                          </div>
+                                            <div fxLayout="row" fxLayoutWrap="wrap">
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
                                               </div>
                                           </div>                                    
                                    </div>
                                 </div>                                 
                               </div>   
-                        
                               </div>                                             
-                                                
                           </ng-template>
                         </mat-tab>
                       

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/current-loan/current-loan.component.ts

@@ -53,6 +53,25 @@ export class CurrentLoanComponent implements OnInit {
             this.notifier = notifier;
             this.applicants = this.pd_all_details.pdapplicants_detials;
     }
+    public viewerOptions: any = {
+  navbar: false,
+  toolbar: {
+    zoomIn: 4,
+    zoomOut: 4,
+    oneToOne: 4,
+    reset: 4,
+    prev: 4,
+    play: {
+      show: 4,
+      size: 'large',
+    },
+    next: 4,
+    rotateLeft: 4,
+    rotateRight: 4,
+    flipHorizontal: 4,
+    flipVertical: 4,
+  }
+};
     ngOnInit() {
         this.getMasterDetails('BTLENDERLIST',1);
         this.getMasterDetails('FREQUENCY',2);

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/employment-info/employment-info.component.html

@@ -128,112 +128,98 @@
                 </mat-tab>
                 <mat-tab label="Docs">
                         <ng-template matTabContent>
-                                                          <div fxLayout="row wrap">
+                            <div ngxViewer>
-                                                                  <div fxFlex="25" class="m-gap p-gap">
+                                 <div fxLayout="row wrap" style="padding:20px;">
-                                                                      <div class="p-list-main mb-2">
+                                <div fxFlex="100">
+                                  <div fxFlex="20" class="m-gap p-gap">
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
                                           <div class="p-list">                                                                           
-                      
+                                            <div class="top"> <img src="https://picsum.photos/2000/1500/?random=1" alt="Image 1"></div>   
-                                                                              <div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
-                                                                              <div class="bottom">
-                                                                                  <div class="left">
-                                                                                      <div class="details">
-                                                                                          <small>Nivi SKM</small>
-                                                                                          <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                      </div>
-                                                                                      <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                      </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                                  </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                  <div fxFlex="25" class="m-gap p-gap">
-                                                                          <div class="p-list-main mb-2">
                                           <div class="p-list">
-                          
+                                              <div class="top"> <img src="https://picsum.photos/2000/1500/?random=2" alt="Image 2"></div>                                                    
-                                                                                  <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                  <div class="bottom">
-                                                                                      <div class="left">
-                                                                                          <div class="details">
-                                                                                              <small>Nivi SKM</small>
-                                                                                              <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                          </div>
-                                                                                          <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                          </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                                      </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                      <div fxFlex="25" class="m-gap p-gap">
-                                                                              <div class="p-list-main mb-2">
                                           <div class="p-list">  
-                              
+                                              <div class="top"><img src="https://picsum.photos/2000/1500/?random=3" alt="Image 3"></div>                                                          
-                                                                                      <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                      <div class="bottom">
-                                                                                          <div class="left">
-                                                                                              <div class="details">
-                                                                                                  <small>Nivi SKM</small>
-                                                                                                  <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                              </div>
-                                                                                              <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>  
-                                                                              </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                                          </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                          <div fxFlex="25" class="m-gap p-gap">
-                                                                                  <div class="p-list-main mb-2">
                                           <div class="p-list">
-                                  
+                                              <div class="top"> <img src="https://picsum.photos/2000/1500/?random=2" alt="Image 2"></div>                                                    
-                                                                                          <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                          <div class="bottom">
-                                                                                              <div class="left">
-                                                                                                  <div class="details">
-                                                                                                      <small>Nivi SKM</small>
-                                                                                                      <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                                  </div>
-                                                                                                  <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                                  </div>
+                                    <div fxFlex="20" class="m-gap p-gap">
-                                                                              </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                              <div fxFlex="25" class="m-gap p-gap">
-                                                                                      <div class="p-list-main mb-2">
                                           <div class="p-list">  
-                                      
+                                              <div class="top"><img src="https://picsum.photos/2000/1500/?random=3" alt="Image 3"></div>                                                          
-                                                                                              <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                              <div class="bottom">
-                                                                                                  <div class="left">
-                                                                                                      <div class="details">
-                                                                                                          <small>Nivi SKM</small>
-                                                                                                          <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                                      </div>
-                                                                                                      <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                                      </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                                                  </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                                  <div fxFlex="25" class="m-gap p-gap">
-                                                                                          <div class="p-list-main mb-2">
                                           <div class="p-list">                                                                           
-                                          
+                                            <div class="top"> <img src="https://picsum.photos/2000/1500/?random=1" alt="Image 1"></div>   
-                                                                                                  <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                                  <div class="bottom">
-                                                                                                      <div class="left">
-                                                                                                          <div class="details">
-                                                                                                              <small>Nivi SKM</small>
-                                                                                                              <!-- <p>{{docs.pd_document_name}}</p> -->
                                           </div>
-                                                                                                          <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                      </div>
+                                  </div>
+                                </div>
+                                <div fxFlex="row">
+                                   <div fxFlex="100" class="m-gap p-gap">
+                                          <div fxLayout="row" fxLayoutWrap="wrap">
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                          </div>
+                                            <div fxLayout="row" fxLayoutWrap="wrap">
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
                                               </div>
                                           </div>                                    
                                    </div>
                                 </div>                                 
                               </div>       
-                      
                             </div>                                       
-                                              
                                </ng-template>
                 </mat-tab>
             </mat-tab-group>

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/employment-info/employment-info.component.ts

@@ -49,7 +49,25 @@ export class EmploymentInfoComponent implements OnInit {
                     this.notifier = notifier;
        
             }
-       
+       public viewerOptions: any = {
+  navbar: false,
+  toolbar: {
+    zoomIn: 4,
+    zoomOut: 4,
+    oneToOne: 4,
+    reset: 4,
+    prev: 4,
+    play: {
+      show: 4,
+      size: 'large',
+    },
+    next: 4,
+    rotateLeft: 4,
+    rotateRight: 4,
+    flipHorizontal: 4,
+    flipVertical: 4,
+  }
+};
     ngOnInit() {
         this.pd_cus_segment=this.pd_all_details.pdmaster_details.customer_segment_abbr.toUpperCase();
         this.initemploymentForm();

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/family-details/family-details.component.html

@@ -4,7 +4,8 @@
             {{pageTitle}}
         </div>
         <div fxFlex="30" align="end" style="padding: 10px !important;">
-                    <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>            
+            <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right"
+                mat-dialog-close><mat-icon>close</mat-icon></button>
         </div>
     </h2>
 
@@ -18,148 +19,130 @@
                                 <!-- <mat-card-title>Address Details</mat-card-title> -->
                                 <mat-card-content>
 
-                                    <mat-form-field>
+                                    <!--<mat-form-field>
                                         <input matInput placeholder="Number Of Family Members" formControlName="members" required>
-                                    </mat-form-field>
+                                    </mat-form-field>-->
-                                    <mat-card>
+                                    <div>
-                                        <mat-card-header>
-                                            <p>Earning Members
-                                            </p>
-                                        </mat-card-header> 
-                                        <div formArrayName="earningMembers">
-                                            <div *ngFor="let item of familyForm.controls.earningMembers['controls']; let i=index"
-                                                 [formGroupName]="i">
-                                                <mat-card-content class="matcards">
                                         <mat-form-field>
-                                                                <input matInput placeholder="Name"
+                                            <mat-select placeholder="Select a person" formControlName="selected_person" required>
-                                                                       formControlName="earning_member_name" required>
+                                                <mat-option value="{{person.pd_co_applicant_id}}" *ngFor="let person of selectPerson">
-                                                        </mat-form-field>
+                                                    {{person.applicant_name}}
-                                                        <mat-form-field>
-                                                                    <input matInput placeholder="Age" (keypress)="keyPress($event)"
-                                                                           formControlName="earning_member_age" required>
-                                                        </mat-form-field>
-                                                    <mat-form-field>
-                                                        <mat-select placeholder="Relation" formControlName="relation" required>
-                                                            <mat-option value="{{relations.relationship_id}}"
-                                                                        *ngFor="let relations of relationData">
-                                                                {{relations.name}}
                                                 </mat-option>
                                             </mat-select>
                                         </mat-form-field>
+                                    </div>
+                                    <div>
+                                        <h5>Residence Details</h5>
                                         <mat-form-field>
-                                                        <mat-select placeholder="Segment" formControlName="segment" required>
+                                            <input matInput placeholder="Place" formControlName="residence_place" required>
-                                                                <mat-option value="{{cusSeg.customer_segment_id}}"
+                                        </mat-form-field>
-                                                                *ngFor="let cusSeg of customerSegData">
+                                        <mat-form-field>
-                                                        {{cusSeg.name}}
+                                            <input matInput placeholder="City" formControlName="residence_city" required>
-                                                    </mat-option>
+                                        </mat-form-field>
+                                        <mat-form-field>
+                                            <input matInput placeholder="State" formControlName="residence_state" required>
+                                        </mat-form-field>
+                                        <mat-form-field>
+                                            <input matInput placeholder="Pin" formControlName="residence_pin" required>
+                                        </mat-form-field>
 
+                                        <mat-form-field>
+                                            <input matInput placeholder="Number of yrs" formControlName="residence_No_of_years" type="number" required>
+                                        </mat-form-field>
+
+                                        <mat-form-field>
+                                            <mat-select placeholder="Ownership" formControlName="residence_ownership" required>
+                                                <mat-option value="{{ownerShip.id}}" *ngFor="let ownerShip of ownerShipData">
+                                                    {{ownerShip.name}}
+                                                </mat-option>
                                             </mat-select>
                                         </mat-form-field>
-                                                    <mat-form-field>
+
-                                                        <input matInput placeholder="Income / Revenue"
+                                        <mat-form-field *ngIf="familyForm.get('residence_ownership').value == 4">
-                                                               formControlName="income" required>
+                                            <input matInput placeholder="Please specify" formControlName="ownershipOther">
                                         </mat-form-field>
-                                                    <mat-form-field>
+
-                                                        <input matInput placeholder="Name of Employer / Business"
+                                        <mat-form-field *ngIf="familyForm.get('residence_ownership').value == 3">
-                                                               formControlName="employer_name" required>
+                                            <input matInput placeholder="Rent Amount" formControlName="rent">
                                         </mat-form-field>
-                                                    <button type="button" mat-raised-button mat-icon-button *ngIf="i==0" color="primary"
-                                                    matTooltip="Add More Earning Members" matTooltipPosition="above"  (click)="addearningMembers()">
-                                                        <mat-icon>add</mat-icon>
-                                                    </button>
-                                                    <button type="button" mat-raised-button mat-icon-button
-                                                    matTooltip="Delete" matTooltipPosition="above"  (click)="deleteEarningMembers(i)" *ngIf="i>0">
-                                                        <mat-icon>delete</mat-icon>
-                                                    </button>
-                                                </mat-card-content>
                                     </div>
+                                    <div>
+                                        <mat-form-field>
+                                            <input matInput placeholder="Number of Family Members" formControlName="total_number_of_family_members" (focusout)="getNumberOfFamilyMemberDetails()"
+                                                type="number" max='20' min='1'>
+                                        </mat-form-field>
                                     </div>
-                                    </mat-card>
+
+                                    <div>
+                                        <div formArrayName="family_members_details">
+                                            <div *ngFor="let item of familyForm.controls.family_members_details['controls']; let i=index" [formGroupName]="i">
                                                 <mat-card>
-                                        <mat-card-header>
+                                                <div>
-                                            <p>Non Earning Members
-                                            </p>
-                                        </mat-card-header>
-                                        <div formArrayName="nonEarningMembers">
-                                            <div *ngFor="let members of familyForm.controls.nonEarningMembers['controls']; let i=index"
-                                                 [formGroupName]="i">
-                                                <mat-card-content class="matcard">
                                                     <mat-form-field>
-                                                                <input matInput placeholder="Name"
+                                                        <input matInput placeholder="Name" formControlName="family_member_name" required>
-                                                                       formControlName="non_earning_member_name" required>
                                                     </mat-form-field>
+                                                    <!--<mat-form-field>
+                                                        <input matInput placeholder="Relationship" formControlName="family_member_relationship" required>
+                                                    </mat-form-field>-->
                                                     <mat-form-field>
-                                                                    <input matInput placeholder="Age" (keypress)="keyPress($event)"
+                                                        <mat-select placeholder="Relationship" formControlName="family_member_relationship" required>
-                                                                           formControlName="non_earning_member_age" required>
+                                                            <mat-option value="{{relation.relationship_id}}" *ngFor="let relation of relationData">
-                                                        </mat-form-field>
-                                                        <mat-form-field>
-                                                            <mat-select placeholder="Relation"
-                                                                    formControlName="relationship" required>
-                                                                <mat-option value="{{relation.relationship_id}}"
-                                                                        *ngFor="let relation of relationData">
                                                                 {{relation.name}}
                                                             </mat-option>
                                                         </mat-select>
                                                     </mat-form-field>
                                                     <mat-form-field>
-                                                            <mat-select placeholder="Occupation"
+                                                        <input matInput placeholder="Age" formControlName="family_member_age" required>
-                                                                    formControlName="occupation" required>
+                                                    </mat-form-field>
-                                                                <mat-option value="{{occupation.occupation_non_earning_member_id}}"
+                                                </div>
-                                                                        *ngFor="let occupation of occupationData">{{occupation.name}}
+                                                <div>
+                                                    <mat-form-field>
+                                                        <mat-select placeholder="Earning Status" formControlName="family_member_earning_status" required>
+                                                            <mat-option value="{{earnings.id}}" *ngFor="let earnings of earningStatus">
+                                                                {{earnings.type}}
                                                             </mat-option>
                                                         </mat-select>
                                                     </mat-form-field>
-                                                    <mat-form-field *ngIf="members['controls'].occupation.value==3">
-                                                        <input matInput placeholder="Retired From"
-                                                               formControlName="retired">
-                                                    </mat-form-field>
-                                                    <mat-form-field *ngIf="members['controls'].occupation.value==9">
-                                                            <input matInput placeholder="Specify Others Occupation"
-                                                                   formControlName="others_occupation">
-                                                        </mat-form-field>
-                                                    <button type="button" mat-raised-button mat-icon-button (click)="addMembers()" color="primary"
-                                                    matTooltip="Add More Non Earning Members" matTooltipPosition="above"  *ngIf="i==0">
-                                                        <mat-icon>add</mat-icon>
-                                                    </button>
-                                                    <button type="button" mat-raised-button mat-icon-button (click)="deleteMembers(i)"
-                                                    matTooltip="Delete" matTooltipPosition="above"  *ngIf="i>0">
-                                                        <mat-icon>delete</mat-icon>
-                                                    </button>
-                                                </mat-card-content>
                                                 </div>
-                                        </div>
+                                                <div *ngIf="item.get('family_member_earning_status').value == 1">
-                                    </mat-card>
+                                                    <!--<pre>{{ customerSegData | json}}</pre>-->
-                                    <mat-card>
-                                        <mat-card-header>
-                                            <p>Residence </p>
-                                        </mat-card-header>
-                                        <mat-card-content class="matcard">
                                                     <mat-form-field>
-                                                <input matInput placeholder="Residence Address"
+                                                        <mat-select placeholder="Segment" formControlName="earning_segment" required>
-                                                       formControlName="residence" required>
+                                                            <mat-option value="{{segment.customer_segment_id}}" *ngFor="let segment of customerSegData">
-                                            </mat-form-field>
+                                                                {{segment.name}}
-                                            <mat-form-field> 
-                                                <input matInput placeholder="Number of yrs" formControlName="years" required>
-                                            </mat-form-field>
-                                            <mat-form-field>
-                                                <mat-select placeholder="Ownership" formControlName="ownership" required>
-                                                    <mat-option value="{{ownerShip.id}}"
-                                                                        *ngFor="let ownerShip of ownerShipData">
-                                                                {{ownerShip.name}}
                                                             </mat-option>
                                                         </mat-select>
                                                     </mat-form-field>
-                                            <mat-form-field *ngIf="ownership.value ==4">
+                                                    <mat-form-field>
-                                                <input matInput placeholder="Please specify" formControlName="ownershipOther">
+                                                        <input matInput placeholder="Income Per Month" formControlName="earning_gross_income_per_month" required>
                                                     </mat-form-field>
-                                            <mat-form-field *ngIf="ownership.value ==3">
+                                                    <mat-form-field>
-                                                <input matInput placeholder="Rent Amount"
+                                                        <input matInput placeholder="Name of the Employer/Business" formControlName="earning_name_of_the_employer_or_business" required>
-                                                       formControlName="rent">
                                                     </mat-form-field>
-                                        </mat-card-content>
+                                                    <mat-form-field>
+                                                        <input matInput placeholder="No. of years in Employer/Business" formControlName="earning_number_of_years_in_employment_or_business"
+                                                            required>
+                                                    </mat-form-field>
+                                                </div>
+                                                <div *ngIf="item.get('family_member_earning_status').value == 2">
+                                                    <mat-form-field>
+                                                        <mat-select placeholder="Occupation" formControlName="non_earning_occupation" required>
+                                                            <mat-option value="{{occupation.occupation_non_earning_member_id}}" *ngFor="let occupation of occupationData">
+                                                                {{occupation.name}}
+                                                            </mat-option>
+                                                        </mat-select>
+                                                    </mat-form-field>
+                                                    <mat-form-field *ngIf="item.get('non_earning_occupation').value==9">
+                                                        <input matInput placeholder="Specify Others" formControlName="non_earning_if_others" required>
+                                                    </mat-form-field>
+                                                    <mat-form-field *ngIf="item.get('non_earning_occupation').value==3">
+                                                        <input matInput placeholder="Retired From" formControlName="non_earning_if_retired_from" type="date" required>
+                                                    </mat-form-field>
+                                                </div>
                                                 </mat-card>
-                                    
+                                            </div>
-                                     
+                                        </div>
+                                    </div>
 
                                 </mat-card-content>
                             </mat-card>
@@ -170,112 +153,98 @@
                       
         <mat-tab label="Docs">
                       <ng-template matTabContent>
-                                                        <div fxLayout="row wrap">
+                          <div ngxViewer>
-                                                                <div fxFlex="25" class="m-gap p-gap">
+                                 <div fxLayout="row wrap" style="padding:20px;">
-                                                                    <div class="p-list-main mb-2">
+                                <div fxFlex="100">
+                                  <div fxFlex="20" class="m-gap p-gap">
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
                                           <div class="p-list">                                                                           
-                    
+                                            <div class="top"> <img src="https://picsum.photos/2000/1500/?random=1" alt="Image 1"></div>   
-                                                                            <div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
-                                                                            <div class="bottom">
-                                                                                <div class="left">
-                                                                                    <div class="details">
-                                                                                        <small>Nivi SKM</small>
-                                                                                        <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                    </div>
-                                                                                    <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                    </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                                </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                <div fxFlex="25" class="m-gap p-gap">
-                                                                        <div class="p-list-main mb-2">
                                           <div class="p-list">
-                        
+                                              <div class="top"> <img src="https://picsum.photos/2000/1500/?random=2" alt="Image 2"></div>                                                    
-                                                                                <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                <div class="bottom">
-                                                                                    <div class="left">
-                                                                                        <div class="details">
-                                                                                            <small>Nivi SKM</small>
-                                                                                            <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                        </div>
-                                                                                        <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                        </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                                    </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                    <div fxFlex="25" class="m-gap p-gap">
-                                                                            <div class="p-list-main mb-2">
                                           <div class="p-list">  
-                            
+                                              <div class="top"><img src="https://picsum.photos/2000/1500/?random=3" alt="Image 3"></div>                                                          
-                                                                                    <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                    <div class="bottom">
-                                                                                        <div class="left">
-                                                                                            <div class="details">
-                                                                                                <small>Nivi SKM</small>
-                                                                                                <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                            </div>
-                                                                                            <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>  
-                                                                            </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                                        </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                        <div fxFlex="25" class="m-gap p-gap">
-                                                                                <div class="p-list-main mb-2">
                                           <div class="p-list">
-                                
+                                              <div class="top"> <img src="https://picsum.photos/2000/1500/?random=2" alt="Image 2"></div>                                                    
-                                                                                        <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                        <div class="bottom">
-                                                                                            <div class="left">
-                                                                                                <div class="details">
-                                                                                                    <small>Nivi SKM</small>
-                                                                                                    <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                                </div>
-                                                                                                <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                                </div>
+                                    <div fxFlex="20" class="m-gap p-gap">
-                                                                            </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                            <div fxFlex="25" class="m-gap p-gap">
-                                                                                    <div class="p-list-main mb-2">
                                           <div class="p-list">  
-                                    
+                                              <div class="top"><img src="https://picsum.photos/2000/1500/?random=3" alt="Image 3"></div>                                                          
-                                                                                            <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                            <div class="bottom">
-                                                                                                <div class="left">
-                                                                                                    <div class="details">
-                                                                                                        <small>Nivi SKM</small>
-                                                                                                        <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                                    </div>
-                                                                                                    <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                                    </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                                                </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                                <div fxFlex="25" class="m-gap p-gap">
-                                                                                        <div class="p-list-main mb-2">
                                           <div class="p-list">                                                                           
-                                        
+                                            <div class="top"> <img src="https://picsum.photos/2000/1500/?random=1" alt="Image 1"></div>   
-                                                                                                <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                                <div class="bottom">
-                                                                                                    <div class="left">
-                                                                                                        <div class="details">
-                                                                                                            <small>Nivi SKM</small>
-                                                                                                            <!-- <p>{{docs.pd_document_name}}</p> -->
                                           </div>
-                                                                                                        <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                      </div>
+                                  </div>
+                                </div>
+                                <div fxFlex="row">
+                                   <div fxFlex="100" class="m-gap p-gap">
+                                          <div fxLayout="row" fxLayoutWrap="wrap">
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                          </div>
+                                            <div fxLayout="row" fxLayoutWrap="wrap">
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
                                               </div>
                                           </div>                                    
                                    </div>
                                 </div>                                 
                               </div>    
-                    
                           </div>                                        
-                                            
                              </ng-template>
                     </mat-tab>
                   
@@ -311,7 +280,7 @@
     <mat-card-content>
         <p>Family Details</p>
 <form class="address" [formGroup]="familyForm"> -->
-    <!-- <mat-form-field>
+<!-- <mat-form-field>
         <mat-select placeholder="Person Met" formControlName="person" required>
             <mat-option *ngFor="let personMet of personMetData" [value]="personMet.person_met_id">
                 {{personMet.person_met_name}}
@@ -321,7 +290,7 @@
     <mat-form-field *ngIf="person.value ==8">
         <input matInput placeholder="Enter the relationship" formControlName="personOther">
     </mat-form-field> -->
-    <!-- <mat-form-field>
+<!-- <mat-form-field>
         <input matInput placeholder="Number Of Family Members" formControlName="members" required>
     </mat-form-field>
     <mat-card>

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/family-details/family-details.component.ts

@@ -30,22 +30,28 @@ import {ActivatedRoute, Router} from "@angular/router";
 })
 export class FamilyDetailsComponent implements OnInit {
     //@Input() pdid: number;
-    pageTitle: string ="Family Details";
+    pageTitle: string ="Other Family Details";
     pdid : string;
     form_id : number;
 
-    public currentLoanForm: FormGroup;
     private notifier: NotifierService;
     public familyForm: FormGroup;
+    public selectPerson;
+    // selectPerson = [{
+    //    name : 'person 1',
+    //    id : 111
+    // }, {
+    //    name : 'person 2',
+    //    id : 222
+    // }]; 
 
-    // public person: AbstractControl;
+    earningStatus = [{
-    // public personOther: AbstractControl;
+        type: 'Earning',
-    public members: AbstractControl;
+        id: 1
-    public residence: AbstractControl;
+    }, {
-    public years: AbstractControl;
+        type: 'Non Earning',
-    public ownership: AbstractControl;
+        id: 2
-    public ownershipOther: AbstractControl;
+    }]
-    public rent: AbstractControl;
 
     relationData: any = [];
     occupationData: any = [];
@@ -59,6 +65,8 @@ export class FamilyDetailsComponent implements OnInit {
                 private router: Router,
                 private _pd: PdTrigerService,
                 @Inject(MAT_DIALOG_DATA) public pd_all_details: any) {
+                    console.log(pd_all_details);
+                    this.selectPerson = this.pd_all_details.pdapplicants_detials;
                     this.pdid = this.pd_all_details.pdmaster_details.pd_id;
                     this.form_id = 6;
                     this.notifier = notifier;
@@ -68,7 +76,7 @@ export class FamilyDetailsComponent implements OnInit {
         this.getMasterDetails('OCCUPATIONMEMBERS',2);
         //this.getMasterDetails('PERSONSMET',3);
         this.getMasterDetails('RESIDENCEOWNERSHIP',4);
-        this.getMasterDetails('CUSTOMERSEGMENT',5)
+        this.getMasterDetails('CUSTOMERSEGMENT',5);
         this.initFamilyForm();
         let params: any = {};
         params.pd_id = this.pdid;
@@ -77,131 +85,112 @@ export class FamilyDetailsComponent implements OnInit {
             const control = <FormArray>this.familyForm.controls['nonEarningMembers'];
             const value = <FormArray>this.familyForm.controls['earningMembers'];
             if (data.status == 200) {
-                var result = Object.keys(data.records.non_earning_members).map(function (key) {
+                this.familyForm.controls.selected_person.setValue(data.records.selected_person);
-                    return data.records.non_earning_members[key];
+                this.familyForm.controls.residence_place.setValue(data.records.residence_place);
-                });
+                this.familyForm.controls.residence_city.setValue(data.records.residence_city);
-                var earning = Object.keys(data.records.earning_members).map(function (key) {
+                this.familyForm.controls.residence_state.setValue(data.records.residence_state);
-                    return data.records.earning_members[key];
+                this.familyForm.controls.residence_pin.setValue(data.records.residence_pin);
-                });
+                this.familyForm.controls.residence_No_of_years.setValue(data.records.residence_No_of_years);
-                // this.familyForm.controls.person.setValue(data.records.person_met);
+                this.familyForm.controls.residence_ownership.setValue(data.records.residence_ownership);
-                // if (data.records.person_met_other) {
+                this.familyForm.controls.ownershipOther.setValue(data.records.ownershipOther);
-                //     this.familyForm.controls.personOther.setValue(data.records.person_met_other);
+                this.familyForm.controls.rent.setValue(data.records.rent);
-                // }
+                this.familyForm.controls.total_number_of_family_members.setValue(data.records.total_number_of_family_members);
-                this.familyForm.controls.members.setValue(data.records.family_members);
-                this.familyForm.controls.years.setValue(data.records.no_of_years);
-                this.familyForm.controls.ownership.setValue(data.records.ownership);
                 this.familyForm.controls.family_details_form_remark.setValue(data.records.family_details_form_remark);
+                this.generateFamilyMembersDetailsGetData(data.records.family_members_details);
+            } else {
+                // value.push(this.createMembers());
+                // control.push(this.createNonMembers());
+            }
+        });
+    }
 
-                if (data.records.ownership_others) {
+    initgenerateFamilyMembersDetailsGet(val): FormGroup {
-                    this.familyForm.controls.ownershipOther.setValue(data.records.ownership_others);
+        return this.fb.group({
+            family_member_name : [val.family_member_name, Validators.compose([])],
+            family_member_relationship : [val.family_member_relationship, Validators.compose([])],
+            family_member_age : [val.family_member_age, Validators.compose([])],
+            family_member_earning_status : [val.family_member_earning_status, Validators.compose([])],
+            earning_segment: [val.earning_segment, Validators.compose([])],
+            earning_gross_income_per_month: [val.earning_gross_income_per_month, Validators.compose([])],
+            earning_name_of_the_employer_or_business: [val.earning_name_of_the_employer_or_business, Validators.compose([])],
+            earning_number_of_years_in_employment_or_business: [val.earning_number_of_years_in_employment_or_business, Validators.compose([])],
+            non_earning_occupation: [val.non_earning_occupation, Validators.compose([])],
+            non_earning_if_others: [val.non_earning_if_others, Validators.compose([])],
+            non_earning_if_retired_from: [val.non_earning_if_retired_from, Validators.compose([])],
+        })
     }
-                this.familyForm.controls.rent.setValue(data.records.what_rent);
+
-                if (result.length == 0) {
+    generateFamilyMembersDetailsGetData(data) {
-                    control.push(this.createNonMembers());
+        var result = Object.keys(data).map(function (key) {
-                } else {
+            return data[key];
-                    result.forEach(datas => {
-                        control.push(this.createNonMembers());
         });
-                    this.familyForm.controls.nonEarningMembers.setValue(result);
+        if (result.length > 0) {
+            for (let val of result) {
+                const control = <FormArray>this.familyForm.controls['family_members_details'];
+                control.push(this.initgenerateFamilyMembersDetailsGet(val));
             }
-                if (earning.length == 0) {
-                    value.push(this.createMembers());
-                } else {
-                    earning.forEach(datas => {
-                        value.push(this.createMembers());
-                    });
-                    this.familyForm.controls.earningMembers.setValue(earning);
         }
-                this.familyForm.controls.residence.setValue(data.records.residence);
-            } else {
-                value.push(this.createMembers());
-                control.push(this.createNonMembers());
     }
-        });
+
+    onSearchChange(e):void {
+        e.preventDefault();
     }
     public initFamilyForm(): void {
         this.familyForm = this.fb.group({
-            // person: ['', Validators.compose([Validators.required])],
+            selected_person: ['', Validators.compose([Validators.required])],
-            // personOther: [''],
+            residence_place: ['', Validators.compose([])],
-            members: ['', Validators.compose([Validators.required])],
+            residence_city: ['', Validators.compose([])],
-            residence: ['', Validators.compose([Validators.required])],
+            residence_state: ['', Validators.compose([])],
-            years: ['', Validators.compose([Validators.required])],
+            residence_pin: ['', Validators.compose([])],
-            ownership: ['', Validators.compose([Validators.required])],
+            residence_No_of_years: ['', Validators.compose([])],
+            residence_ownership: ['', Validators.compose([])],
             ownershipOther: [''],
             rent: [''],
-            earningMembers: this.fb.array([]),
+            total_number_of_family_members: ['', Validators.compose([Validators.min(1), Validators.max(20)])],
-            nonEarningMembers: this.fb.array([]),
+            family_members_details: this.fb.array([]),
             family_details_form_remark: ['']
         });
-        // this.person = this.familyForm.controls['person'];
-        // this.personOther = this.familyForm.controls['personOther'];
-        this.members = this.familyForm.controls['members'];
-        this.residence = this.familyForm.controls['residence'];
-        this.years = this.familyForm.controls['years'];
-        this.ownership = this.familyForm.controls['ownership'];
-        this.ownershipOther = this.familyForm.controls['ownershipOther'];
-        this.rent = this.familyForm.controls['rent'];
     }
-    createMembers(): FormGroup {
+
+
+    getNumberOfFamilyMemberDetails(){
+        // alert(this.familyForm.controls.total_number_of_family_members.valid);
+        if(this.familyForm.controls.total_number_of_family_members.valid){
+            let totalMem = this.familyForm.get('total_number_of_family_members').value;
+            const control = <FormArray>this.familyForm.controls.family_members_details;
+            if(totalMem > control.length) {
+                let len = totalMem - control.length;
+                for(let i = 0; i < len; i++){
+                    control.push(this.generateFamilyMembersDetailsGet());
+                }
+            } else if (totalMem < control.length) {
+                // control.controls.slice(0, totalMem);
+                control.controls = [];
+                for(let i = 0; i < totalMem; i++){
+                    control.push(this.generateFamilyMembersDetailsGet());
+                }
+            }
+        }  else {
+
+        }
+    }
+    
+    generateFamilyMembersDetailsGet(): FormGroup {
         return this.fb.group({
-            earning_member_name : ['', Validators.compose([Validators.required])],
+            family_member_name : ['', Validators.compose([])],
-            earning_member_age : ['', Validators.compose([Validators.required])],
+            family_member_relationship : ['', Validators.compose([])],
-            relation: ['', Validators.compose([Validators.required])],
+            family_member_age : ['', Validators.compose([])],
-            segment: ['', Validators.compose([Validators.required])],
+            family_member_earning_status : ['', Validators.compose([])],
-            income: ['', Validators.compose([Validators.required])],
+            earning_segment: ['', Validators.compose([])],
-            employer_name: ['', Validators.compose([Validators.required])],
+            earning_gross_income_per_month: ['', Validators.compose([])],
-        });
+            earning_name_of_the_employer_or_business: ['', Validators.compose([])],
-    }
+            earning_number_of_years_in_employment_or_business: ['', Validators.compose([])],
-    createNonMembers(): FormGroup {
+            non_earning_occupation: ['', Validators.compose([])],
-        return this.fb.group({
+            non_earning_if_others: ['', Validators.compose([])],
-            non_earning_member_name : ['', Validators.compose([Validators.required])],
+            non_earning_if_retired_from: ['', Validators.compose([])],
-            non_earning_member_age : ['', Validators.compose([Validators.required])],
+        })
-            relationship: ['', Validators.compose([Validators.required])],
-            occupation: ['', Validators.compose([Validators.required])],
-            retired: [''],
-            others_occupation : ['']
-        });
     }
 
-    addearningMembers() {
-        
-        const control = <FormArray>this.familyForm.controls['earningMembers'];
-        //this.earnMemberArrCount = control.length;
-
-        if(control.length == this.familyForm.controls['members'].value)
-        {
-
-        }else{
-        control.push(this.createMembers());
-        //console.log('Add earn member',this.familyForm.controls['members'].value);
-        }
-        
-        // console.log(this.earnMemberArrCount);
-        // console.log(this.nonEarnMemberArrCount);
-    }
-    addMembers() {
-        const control = <FormArray>this.familyForm.controls['nonEarningMembers'];
-        this.count++;
-        // this.nonEarnMemberArrCount = control.length;
-        // console.log(this.earnMemberArrCount);
-        // console.log(this.nonEarnMemberArrCount);
-        // if(control.length == this.familyForm.controls['members'].value)
-        // {
-
-        // }else{
-        //     control.push(this.createNonMembers());
-        // }
-        
-        
-    }
-    deleteEarningMembers(index) {
-        const control = <FormArray>this.familyForm.controls['earningMembers'];
-        control.removeAt(index);
-    }
-    deleteMembers(index) {
-        const control = <FormArray>this.familyForm.controls['nonEarningMembers'];
-        control.removeAt(index);
-    }
         // get all master details
         getMasterDetails(table:string,type:number){
             this._pd.getAllMasterDatas(table).subscribe(
@@ -231,43 +220,10 @@ export class FamilyDetailsComponent implements OnInit {
         if (!this.familyForm.valid) {
                 return;
         }
-        let records: any = {};
+        var records = this.familyForm.value;
-        records.no_of_years = this.years.value;
+      //To Remove The "Null" With Key also
-        if (this.ownership.value == 4) {
+      Object.keys(records).forEach((key) => (records[key] == null) && delete records[key]);
-            records.ownership_others = this.ownershipOther.value;
+        // records.other_family_details = answerFormValues;
-        }
-        records.ownership = this.ownership.value;
-        records.residence = this.residence.value;
-        if (this.ownership.value == 3) {
-            records.what_rent = this.rent.value;
-        }
-        // if (this.person.value == 8) {
-        //     records.person_met_other = this.personOther.value;
-        // }
-        //records.person_met = this.person.value;
-        records.family_members = this.members.value;
-        records.earning_members = this.familyForm.controls['earningMembers'].value;
-       // filter re conditions
-        let non_earning_members_filter = this.familyForm.controls['nonEarningMembers'].value.map(function(obj) {
-         
-        console.log(obj.occupation);
-        if(obj.occupation==3){
-            return obj;
-        }
-        else{
-             obj.retired='';
-            return obj;
-        }
-        if(obj.occupation==9){
-            return obj;
-        }
-        else{
-             obj.others_occupation='';
-            return obj;
-        }
-        });
-        records.non_earning_members = non_earning_members_filter;
-        records.family_details_form_remark = this.familyForm.controls['family_details_form_remark'].value;
         records.pdid = this.pdid;
         records.formid = '6';
         // records.fk_createdby = '251';
@@ -277,25 +233,26 @@ export class FamilyDetailsComponent implements OnInit {
             this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
         });
     }
-    validateAllFormFields(formGroup: FormGroup) {
+    // validateAllFormFields(formGroup: FormGroup) {
-        Object.keys(formGroup.controls).forEach(field => {
+    //     Object.keys(formGroup.controls).forEach(field => {
-            const control = formGroup.get(field);
+    //         const control = formGroup.get(field);
-            if (control instanceof FormControl) {
+    //         if (control instanceof FormControl) {
-                control.markAsTouched({onlySelf: true});
+    //             control.markAsTouched({onlySelf: true});
-            } else if (control instanceof FormGroup) {
+    //         } else if (control instanceof FormGroup) {
-                this.validateAllFormFields(control);
+    //             this.validateAllFormFields(control);
-            }
+    //         }
-        });
+    //     });
-    }
+    // }
 
-     /** On Key Press Event For Age  */
+    //  /** On Key Press Event For Age  */
-     keyPress(event: any) {
+    //  keyPress(event: any) {
-        const pattern = /[0-9]/;
+    //     const pattern = /[0-9]/;
     
-        let inputChar = String.fromCharCode(event.charCode);
+    //     let inputChar = String.fromCharCode(event.charCode);
-        if (event.keyCode != 8 && !pattern.test(inputChar)) {
+    //     if (event.keyCode != 8 && !pattern.test(inputChar)) {
-          event.preventDefault();
+    //       event.preventDefault();
-        }
+    //     }
-     }
+    //  }
 
 }
+

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/final-remarks/final-remarks.component.html

@@ -0,0 +1,31 @@
+<h2 mat-dialog-title class="paragraph_change">
+    <div fxFlex="70" align="left" style="padding: 10px !important;">{{pageTitle}}</div>
+    <div fxFlex="30" align="end" style="padding: 10px !important;">
+        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right"
+            mat-dialog-close><mat-icon>close</mat-icon></button>
+    </div>
+</h2>
+<div *ngIf="noRecordsFound" style="max-width: 100vw !important;width: 100% !important;height: 95% !important;">
+    <form [formGroup]="_finalRemarkForm" (submit)="onSubmit()" novalidate>
+        <mat-dialog-content>
+            <mat-card>
+                <mat-form-field>
+                  <mat-select placeholder="Customer Behaviour" formControlName="final_custormer_remark_type">
+                      <mat-option *ngFor="let pm of m_remarkTypeCustomerBehaviour" [value]="pm.customer_behaviour_id">{{ pm.description }}</mat-option>
+                  </mat-select>
+                </mat-form-field>
+            </mat-card>
+        </mat-dialog-content>
+        <mat-dialog-actions>
+            <div fxFlex="60" class="pb-0 text-sm-left" align="left">
+                <mat-form-field appearance="outline" style="width: 100%">
+                    <mat-label>Remarks</mat-label>
+                    <textarea matInput placeholder="Remarks" formControlName="final_form_remarks"></textarea>
+                </mat-form-field>
+            </div>
+            <div fxFlex="40" align="end">
+                <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>
+        </mat-dialog-actions>
+    </form>
+</div>

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/final-remarks/final-remarks.component.scss

@@ -0,0 +1,96 @@
+// .example-full-width{
+//     width : 100%;
+// }
+
+.paragraph_change {
+    color:  #fff !important;
+  background-color: #e00201 !important;
+  }
+//   ::ng-deep .cdk-overlay-pane{
+//     max-width: 100vw !important;
+//     width: 100% !important; 
+//     height: 95% !important;
+//   }
+  .mat-card-content {
+      background-color: white;
+    }
+    .mat-card-actions { 
+      background-color: white;
+    }
+     ::ng-deep .cdk-global-overlay-wrapper{
+        justify-content: center !important;
+}
+  
+    mat-form-field {
+      margin: 0 2%;
+    }
+    $base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
+  $product-bg-color-hover: rgba(103, 58, 183, 0.7);
+  .p-list-main {
+      background: white;
+      margin: auto;
+      position: relative;
+      overflow: hidden !important;
+      border-radius: 10px 10px 10px 10px;
+      box-shadow: $base-card-box-shadow;
+      transform: scale(0.95);
+      transition: box-shadow 0.5s, transform 0.5s;
+      &:hover {
+          transform: scale(1);
+          box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
+      }
+      .p-list {
+          position: relative;
+          .top {
+              height: 100%;
+              width: 100%;
+              //      background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center; 
+              -webkit-background-size: 100%;
+              -moz-background-size: 100%;
+              -o-background-size: 100%;
+              background-size: 100%;
+          }
+          .bottom {
+              width: 200%;
+              height: 15%;
+              transition: transform 0.5s;
+              h1 {
+                  margin: 0;
+                  padding: 0;
+              }
+              p {
+                  margin: 0;
+                  padding: 0;
+              }
+              .left {
+                  height: 100%;
+                  width: 50%;
+                  background: #f4f4f4;
+                  position: relative;
+                  float: left;
+                  .details {
+                      padding: 5px;
+                      float: left;
+                      // width: calc(70% - 40px);
+                  }
+                 
+              }
+              .right {
+                  width: 50%;
+                  background: #A6CDDE;
+                  color: white;
+                  float: right;
+                  height: 200%;
+                  overflow: hidden;
+                  .details {
+                      padding: 20px;
+                      float: right;
+                      width: calc(70% - 40px);
+                  }
+                 
+               
+              }
+          }
+      }
+     
+  }

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/final-remarks/final-remarks.component.spec.ts

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

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/final-remarks/final-remarks.component.ts

@@ -0,0 +1,162 @@
+import {
+    Component,
+    OnInit,
+    Inject,
+    Input
+} from '@angular/core';
+
+import {
+    FormBuilder,
+    FormGroup,
+    Validators,
+    FormArray, FormControl,
+} from '@angular/forms';
+
+import { NotifierService } from 'angular-notifier';
+
+import {
+    MatDialog,
+    MatDialogRef,
+    MAT_DIALOG_DATA
+} from '@angular/material';
+/** Service */
+import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
+import {ActivatedRoute, Router} from '@angular/router';
+import { analyzeAndValidateNgModules } from '@angular/compiler';
+
+@Component({
+  selector: 'app-final-remarks',
+  templateUrl: './final-remarks.component.html',
+  styleUrls: ['./final-remarks.component.scss']
+})
+export class FinalRemarksComponent implements OnInit {
+
+  pageTitle: string = "Final Remarks Details";
+
+  //@Input() pdid: number;
+  pdid: string;
+  form_id: number;
+
+  public _finalRemarkForm: FormGroup;
+  public submitted = false;
+
+  public m_remarkTypeCustomerBehaviour = [];
+  private notifier: NotifierService;
+
+  constructor(
+    notifier: NotifierService,
+    private _formBuilder: FormBuilder,
+    private pdTrigerService: PdTrigerService,
+    @Inject(MAT_DIALOG_DATA) public pd_all_details: any) {
+    this.pdid = this.pd_all_details.pdmaster_details.pd_id;
+    this.form_id = 20;
+    this.notifier = notifier;
+    this._finalRemarkForm = this._formBuilder.group({
+      pdid: [this.pdid],
+      formid: ['20'],
+      final_custormer_remark_type : [],
+      final_form_remarks: []
+    });
+    this.getM_Type();
+  }
+  public viewerOptions: any = {
+    navbar: false,
+    toolbar: {
+      zoomIn: 4,
+      zoomOut: 4,
+      oneToOne: 4,
+      reset: 4,
+      prev: 4,
+      play: {
+        show: 4,
+        size: 'large',
+      },
+      next: 4,
+      rotateLeft: 4,
+      rotateRight: 4,
+      flipHorizontal: 4,
+      flipVertical: 4,
+    }
+  };
+
+  noRecordsFound: Boolean = false;
+  ngOnInit() {
+    this.pdTrigerService.getPDFormDetailsWithID(this.pdid, '20').subscribe(data=>{
+     if(data.dataStatus){
+      this._finalRemarkForm.controls.final_custormer_remark_type.setValue(data.records.final_custormer_remark_type);
+      this._finalRemarkForm.controls.final_form_remarks.setValue(data.records.final_form_remarks);
+      this.noRecordsFound = true;
+     } else {
+      this.noRecordsFound = true;
+     }
+    }, err => {
+      
+    })
+  }
+
+  getM_Type() {
+    this.pdTrigerService.getAllMasterDatas('CUSTOMERBEHAVIOUR').subscribe(
+      data => {
+        this.m_remarkTypeCustomerBehaviour = data.records.filter(data => data.isactive == 1);
+      },
+      error => {
+        // this.notifier.notify('warning', 'No Category Records Found.!');
+        // this.m_assets_type = "No Category Records Found.";
+      }
+    )
+  }
+
+
+  // ==================
+
+  /** To Save/Edited Popup Data */
+  onSubmit() {
+    this.submitted = true;
+    // stop here if form is invalid
+    if (this._finalRemarkForm.invalid) {
+      return;
+    } else {
+      var answerFormValues = this._finalRemarkForm.value;
+
+      //To Remove The "Null" With Key also
+      Object.keys(answerFormValues).forEach((key) => (answerFormValues[key] == null) && delete answerFormValues[key]);
+      console.log(JSON.stringify(answerFormValues));
+      //Add BRANCH data with help Service File
+      this.pdTrigerService.savePDFormDetailsWithID(answerFormValues).subscribe(
+        dataresult => {
+          if (dataresult.status == 200) {
+            // console.log(dataresult);
+            this.notifier.notify('success', 'Record Saved Successfully.!');
+            // this.dialogRef.close();
+            // alert("sample alert for Saving");
+          }
+          else {
+            this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
+            // this.errorMessage = "Some Thing Wents Wrong Try Again !";
+          }
+        }, error => {
+          this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
+          // this.errorMessage = "Something Wents Wrong Try Again !";
+          // this.dialogRef.close();
+        });
+      // //After Saving the BRANCH data then popup close
+      // // this.dialogRef.close();
+    }
+  }
+
+  /** To Reset Popup Data */
+  onReset() {
+    // this._addQuesFrom.reset();
+  }
+
+  /** On Key Press Event For Mobile Number  */
+  keyPress(event: any) {
+    const pattern = /[0-9]/;
+
+    let inputChar = String.fromCharCode(event.charCode);
+    if (event.keyCode != 8 && !pattern.test(inputChar)) {
+      event.preventDefault();
+    }
+  }
+
+}

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/financial-info/financial-info.component.html

@@ -13,7 +13,6 @@
     
     <mat-dialog-content>
     
-    
             <mat-tab-group>
                     <mat-tab label="Questions">
                       <ng-template matTabContent>
@@ -61,16 +60,18 @@
                                                                 </span>
                                                                 <span *ngIf="details.get('finanical_profit_or_loss').value == 2 ">
                                                                 <mat-form-field>
-                                                                    <input matInput placeholder="Net Loss Amount" formControlName="financial_net_loss" (change)="calMargin( i, details); calYearVariation( i, details)" type="number" required>
+                                                                    <input matInput placeholder="Net Loss Amount" formControlName="financial_net_loss" (change)="calMargin( i, details); calYearVariation( i, details)" (keypress)="keyPress($event)" required>
                                                                 </mat-form-field>
                                                                 <mat-form-field>
                                                                     <input matInput  placeholder="Net Loss to Sales %" formControlName="financial_margin_of_loss" (keypress)="keyPress($event)" required>
                                                                 </mat-form-field>
                                                                 </span>
-                                                                <mat-form-field *ngIf="i != 0">
+                                                                <mat-form-field *ngIf="i != 0" style="width:65%">
                                                                     <input matInput [ngClass]="{'highlight': (details.controls['financial_variation'].value > 40) || (details.controls['financial_variation'].value < -40)}" placeholder="Variation from Previous Year" formControlName="financial_variation" (keypress)="keyPress($event)">
+                                                                    <mat-hint align="end" *ngIf="i != 0" [ngClass]="{'highlight': (details.controls['financial_variation'].value > 40) || (details.controls['financial_variation'].value < -40)}" >{{SalesStatement[i]}}</mat-hint>
                                                                 </mat-form-field>
-                                                                <mat-form-field>
+                                                    
+                                                                <mat-form-field *ngIf="customerCommentsFlag" style="width:65%">
                                                                     <!-- <input matInput placeholder="Reason For Major Difference" formControlName="financial_reason" required> -->
                                                                     <input matInput placeholder="Customer Comments on variances in Financials" formControlName="financial_reason" required>
                                                                 </mat-form-field>
@@ -96,33 +97,60 @@
                                                         <mat-card-header>
                                                             <p>Actual Values as per Customer<p>
                                                         </mat-card-header>
+                                                            <mat-form-field *ngIf="total_financial_year != ''">
+                                                                            <mat-select placeholder="Same as Financial Statements?" formControlName="same_as_financial_statements" (selectionChange)="selectedType($event)">
+                                                                                    <mat-option value="yes">Yes</mat-option>
+                                                                                    <mat-option value="no">No</mat-option>
+                                                                            </mat-select>
+                                                            </mat-form-field>
                                                         <div formArrayName="estimated_value">
                                                             <div *ngFor="let details of financialForm.controls.estimated_value['controls']; let i=index"
                                                                  [formGroupName]="i">
                                                                 <mat-card-content class="matcard">
+                                                                
                                                                     <mat-form-field>
                                                                         <!-- <input matInput placeholder="Year (format: 2015-16)" formControlName="estimate_year" required> -->
-                                                                        <input matInput placeholder="Year (format: 2015-2016)" formControlName="estimate_year" required>
+                                                                        <input matInput placeholder="Year" formControlName="estimate_year" required>
                                                                     </mat-form-field>
                                                                     <mat-form-field>
-                                                                        <input matInput placeholder="Annual Sale" formControlName="estimate_annual_sale" (change)="calMarginVal( i, details)" type="number" required>
+                                                                        <input matInput placeholder="Annual Sale" formControlName="estimate_annual_sale" (change)="calMarginVal( i, details)" (keypress)="keyPress($event)" required>
                                                                     </mat-form-field>
                                                                     <mat-form-field>
-                                                                        <input matInput placeholder="Net Profit / Loss" formControlName="estimate_net_profit" (change)="calMarginVal( i, details); calVariation( i, details)" type="number" required>
+                                                                        <!-- <input matInput placeholder="Net Profit / Loss" formControlName="financial_net_profit" (change)="calMargin( i, details); calYearVariation( i, details)" type="number" required> -->
+                                                                        <mat-select placeholder="Is there Net Profit or Net Loss?" formControlName="estimate_profit_or_loss" required>
+                                                                            <mat-option  value="1" >Net Profit</mat-option>
+                                                                            <mat-option  value="2" >Net Loss</mat-option>
+                                                                        </mat-select>  
+                                                                    </mat-form-field>
+                                                                    <span *ngIf="details.get('estimate_profit_or_loss').value == 1 ">
+                                                                    <mat-form-field>
+                                                                        <input matInput placeholder="Net Profit Amount" formControlName="estimate_net_profit" (change)="calMarginVal( i, details); calVariation( i, details)" required>
                                                                     </mat-form-field>
                                                                     <mat-form-field>
-                                                                        <input matInput disabled placeholder="Margin" formControlName="estimate_margin"  (keypress)="keyPress($event)" required>
+                                                                        <input matInput  disabled placeholder="Margin" formControlName="estimate_margin_of_profit" (keypress)="keyPress($event)" required>
                                                                     </mat-form-field>
-                                                                    <mat-form-field *ngIf="i != 0">
+                                                                    </span>
+                                                                    <span *ngIf="details.get('estimate_profit_or_loss').value == 2 ">
+                                                                    <mat-form-field>
+                                                                        <input matInput placeholder="Net Loss" formControlName="estimate_net_loss" (change)="calMarginVal( i, details); calVariation( i, details)" required>
+                                                                    </mat-form-field>
+                                                                    <mat-form-field>
+                                                                        <input matInput disabled placeholder="Margin" formControlName="estimate_margin_of_loss"  (keypress)="keyPress($event)" (change)="calAmount( i, details); calVariation( i, details)" required>
+                                                                    </mat-form-field>
+                                                                    </span>
+                                                                    <mat-form-field *ngIf="i != 0" style="width:65%">
                                                                         <input matInput [ngClass]="{'highlight': details.controls['estimate_variation'].value >= 40 || details.controls['estimate_variation'].value >= -40}" placeholder="Variation from Previous Year" formControlName="estimate_variation" (keypress)="keyPress($event)">
+                                                                        <mat-hint align="end" [ngClass]="{'highlight': (details.controls['estimate_variation'].value >= 40) || (details.controls['estimate_variation'].value < -40)}" > {{details.controls['estimate_variation'].value}} {{details.controls['estimate_year'].value}}
+                                                                            <!-- 'details.controls['estimate_variation'].value <= 0' ? 'Decreases ' : 'Increases ' + 'in Sales in FY ' + curr_year + ' Over Sales in FY '+ prev_year + ' is ' + {{details.controls['estimate_variation'].value}} + '%'; -->
+                                                                        </mat-hint>
                                                                     </mat-form-field>
                                                                     <!--<mat-form-field>
                                                                         <input matInput placeholder="Reason For Major Difference" formControlName="estimate_reason" required>
                                                                     </mat-form-field>-->
-                                                                    <button type="button" mat-raised-button mat-icon-button (click)="addGoods()"
+                                                                    <!-- <button type="button" mat-raised-button mat-icon-button (click)="addGoods()"
                                                                                  matTooltip="Add More Estimated Value" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary"  *ngIf="i==0">
                                                                         <mat-icon>add</mat-icon>
-                                                                    </button>
+                                                                    </button> -->
                                                                     <button type="button" mat-raised-button mat-icon-button (click)="deleteGoods(i)"
                                                                     matTooltip="Delete" matTooltipPosition="above" class="mr-1 mb-1 hover-icon"    *ngIf="i>0">
                                                                         <mat-icon>delete</mat-icon>
@@ -139,112 +167,98 @@
                     </mat-tab>
                     <mat-tab label="Docs">
                       <ng-template matTabContent>
-                                                        <div fxLayout="row wrap">
+                          <div ngxViewer>
-                                                                <div fxFlex="25" class="m-gap p-gap">
+                                 <div fxLayout="row wrap" style="padding:20px;">
-                                                                    <div class="p-list-main mb-2">
+                                <div fxFlex="100">
+                                  <div fxFlex="20" class="m-gap p-gap">
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
                                           <div class="p-list">                                                                           
-                    
+                                            <div class="top"> <img src="https://picsum.photos/2000/1500/?random=1" alt="Image 1"></div>   
-                                                                            <div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
-                                                                            <div class="bottom">
-                                                                                <div class="left">
-                                                                                    <div class="details">
-                                                                                        <small>Nivi SKM</small>
-                                                                                        <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                    </div>
-                                                                                    <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                    </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                                </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                <div fxFlex="25" class="m-gap p-gap">
-                                                                        <div class="p-list-main mb-2">
                                           <div class="p-list">
-                        
+                                              <div class="top"> <img src="https://picsum.photos/2000/1500/?random=2" alt="Image 2"></div>                                                    
-                                                                                <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                <div class="bottom">
-                                                                                    <div class="left">
-                                                                                        <div class="details">
-                                                                                            <small>Nivi SKM</small>
-                                                                                            <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                        </div>
-                                                                                        <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                        </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                                    </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                    <div fxFlex="25" class="m-gap p-gap">
-                                                                            <div class="p-list-main mb-2">
                                           <div class="p-list">  
-                            
+                                              <div class="top"><img src="https://picsum.photos/2000/1500/?random=3" alt="Image 3"></div>                                                          
-                                                                                    <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                    <div class="bottom">
-                                                                                        <div class="left">
-                                                                                            <div class="details">
-                                                                                                <small>Nivi SKM</small>
-                                                                                                <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                            </div>
-                                                                                            <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>  
-                                                                            </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                                        </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                        <div fxFlex="25" class="m-gap p-gap">
-                                                                                <div class="p-list-main mb-2">
                                           <div class="p-list">
-                                
+                                              <div class="top"> <img src="https://picsum.photos/2000/1500/?random=2" alt="Image 2"></div>                                                    
-                                                                                        <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                        <div class="bottom">
-                                                                                            <div class="left">
-                                                                                                <div class="details">
-                                                                                                    <small>Nivi SKM</small>
-                                                                                                    <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                                </div>
-                                                                                                <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                                </div>
+                                    <div fxFlex="20" class="m-gap p-gap">
-                                                                            </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                            <div fxFlex="25" class="m-gap p-gap">
-                                                                                    <div class="p-list-main mb-2">
                                           <div class="p-list">  
-                                    
+                                              <div class="top"><img src="https://picsum.photos/2000/1500/?random=3" alt="Image 3"></div>                                                          
-                                                                                            <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                            <div class="bottom">
-                                                                                                <div class="left">
-                                                                                                    <div class="details">
-                                                                                                        <small>Nivi SKM</small>
-                                                                                                        <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                                    </div>
-                                                                                                    <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                                    </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                                                </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                                <div fxFlex="25" class="m-gap p-gap">
-                                                                                        <div class="p-list-main mb-2">
                                           <div class="p-list">                                                                           
-                                        
+                                            <div class="top"> <img src="https://picsum.photos/2000/1500/?random=1" alt="Image 1"></div>   
-                                                                                                <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                                <div class="bottom">
-                                                                                                    <div class="left">
-                                                                                                        <div class="details">
-                                                                                                            <small>Nivi SKM</small>
-                                                                                                            <!-- <p>{{docs.pd_document_name}}</p> -->
                                           </div>
-                                                                                                        <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                      </div>
+                                  </div>
+                                </div>
+                                <div fxFlex="row">
+                                   <div fxFlex="100" class="m-gap p-gap">
+                                          <div fxLayout="row" fxLayoutWrap="wrap">
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                          </div>
+                                            <div fxLayout="row" fxLayoutWrap="wrap">
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
                                               </div>
                                           </div>                                    
                                    </div>
                                 </div>                                 
                               </div>     
-                    
                           </div>                                       
-                                            
                              </ng-template>
                     </mat-tab>
                   

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/financial-info/financial-info.component.scss

@@ -17,9 +17,9 @@
 //   background: #62B013;
 //   color: white;
 // }
-// .highlight {
+.highlight {
-//   color: red;
+  color: red;
-// }
+}
 
 
 .paragraph_change {

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/financial-info/financial-info.component.ts

@@ -34,9 +34,11 @@ export class FinancialInfoComponent implements OnInit {
      form_id: number;
     public financialForm: FormGroup;
     private notifier: NotifierService;
+    SalesStatement : any = [];
     marginVal: any = [] ;
     placeholderName : any = [];
     setmargin: AbstractControl;
+    customerCommentsFlag :boolean;
     constructor(notifier: NotifierService, 
                 private fb: FormBuilder, 
                 private route: ActivatedRoute,
@@ -48,6 +50,25 @@ export class FinancialInfoComponent implements OnInit {
                     this.form_id = 14;
                     this.notifier = notifier;
     }
+    public viewerOptions: any = {
+  navbar: false,
+  toolbar: {
+    zoomIn: 4,
+    zoomOut: 4,
+    oneToOne: 4,
+    reset: 4,
+    prev: 4,
+    play: {
+      show: 4,
+      size: 'large',
+    },
+    next: 4,
+    rotateLeft: 4,
+    rotateRight: 4,
+    flipHorizontal: 4,
+    flipVertical: 4,
+  }
+};
     ngOnInit() {
 
         this.initstockForm();
@@ -77,11 +98,11 @@ export class FinancialInfoComponent implements OnInit {
                 }
                 if (result_val.length > 0) {
                     result_val.forEach(val => {
-                        estimated_val.push(this.createValue());
+                        estimated_val.push(this.createValue(''));
                     });
                     retriveData.estimated_value = result_val;
                 } else {
-                    estimated_val.push(this.createValue());
+                    estimated_val.push(this.createValue(''));
                 }
                 retriveData.pdid = this.pdid;
                 retriveData.formid = this.form_id;
@@ -89,7 +110,7 @@ export class FinancialInfoComponent implements OnInit {
                 this.financialForm.setValue(retriveData);
             } else {
                 //financial_date.push(this.createDate());
-                estimated_val.push(this.createValue());
+            //estimated_val.push(this.createValue(''));
             }
         })
     }
@@ -101,6 +122,7 @@ export class FinancialInfoComponent implements OnInit {
             financial_remarks: ['', Validators.compose([Validators.required])],
             staring_financial_year : ['', Validators.compose([Validators.required])],
             total_financial_year : ['', Validators.compose([Validators.required])],
+            same_as_financial_statements:[''],
             date_per_financial: this.fb.array([]),
             estimated_value: this.fb.array([])
         });
@@ -128,16 +150,36 @@ export class FinancialInfoComponent implements OnInit {
             financial_reason: ['', Validators.compose([Validators.required])],
         });
     }
-    createValue() {
+    createValue(date) {
         return this.fb.group({
-            estimate_year: ['', Validators.compose([Validators.required, Validators.pattern(/^[0-9]{4}-[0-9]{2}$/)])],
+            estimate_year: [date, Validators.compose([Validators.required, Validators.pattern(/^[0-9]{4}-[0-9]{2}$/)])],
             estimate_annual_sale: ['', Validators.compose([Validators.required, Validators.pattern(/^[0-9\(\)]+$/)])],
+            estimate_profit_or_loss:['', Validators.compose([Validators.required])],
             estimate_net_profit: ['', Validators.compose([Validators.required, Validators.pattern(/^-?[1-9]\d*|0$/)])],
-            estimate_margin: ['', Validators.compose([Validators.required])],
+            estimate_net_loss: ['', Validators.compose([Validators.pattern(/^-?[1-9]\d*|0$/)])],
+            //estimate_margin: ['', Validators.compose([Validators.required])],
+            estimate_margin_of_profit: [''],
+            estimate_margin_of_loss: [''],
             estimate_variation: [''],
             // estimate_reason: ['', Validators.compose([Validators.required])],
         });
     }
+
+    createValuewithData(value) {
+        return this.fb.group({
+            estimate_year: [value.estimate_year, Validators.compose([Validators.required, Validators.pattern(/^[0-9]{4}-[0-9]{2}$/)])],
+            estimate_annual_sale: [value.estimate_annual_sale, Validators.compose([Validators.required, Validators.pattern(/^[0-9\(\)]+$/)])],
+            estimate_profit_or_loss:[value.estimate_profit_or_loss, Validators.compose([Validators.required])],
+            estimate_net_loss: [value.estimate_net_loss, Validators.compose([Validators.pattern(/^-?[1-9]\d*|0$/)])],
+            estimate_net_profit: [value.estimate_net_profit, Validators.compose([Validators.required, Validators.pattern(/^-?[1-9]\d*|0$/)])],
+            //estimate_margin: [value., Validators.compose([Validators.required])],
+            estimate_margin_of_profit: [value.estimate_margin_of_profit],
+            estimate_margin_of_loss: [value.estimate_margin_of_loss],
+            estimate_variation: [value.estimate_variation],
+            // estimate_reason: ['', Validators.compose([Validators.required])],
+        });
+    }
+
     addDate() {
         const control = <FormArray>this.financialForm.controls['date_per_financial'];
         //control.push(this.createDate());
@@ -148,7 +190,7 @@ export class FinancialInfoComponent implements OnInit {
     }
     addGoods() {
         const control = <FormArray>this.financialForm.controls['estimated_value'];
-        control.push(this.createValue());
+        //control.push(this.createValue());
     }
     deleteGoods(index) {
         const control = <FormArray>this.financialForm.controls['estimated_value'];
@@ -159,6 +201,13 @@ export class FinancialInfoComponent implements OnInit {
         //console.log(this.financialForm.controls['total_financial_year'].value);
         //console.log('data',$event.target.value);
         let e = $event.target.value;
+        if(e == 1){
+            this.customerCommentsFlag = false;
+        }
+        else{
+            this.customerCommentsFlag = true;
+        }
+
         let startingYear = this.financialForm.controls['staring_financial_year'].value;
 
         const control = <FormArray>this.financialForm.controls['date_per_financial'];
@@ -175,6 +224,70 @@ export class FinancialInfoComponent implements OnInit {
             }
         }
     }
+
+    selectedType(e: any): void {
+        console.log(e);
+        if(e.value == 'yes'){
+            let startingYear = this.financialForm.controls['staring_financial_year'].value;
+            let totalFinYear = this.financialForm.controls['total_financial_year'].value;
+            //let YearParam = (+startingYear) +'-'+ ((+startingYear+1));
+            let array = <FormArray>this.financialForm.controls['date_per_financial'];
+            const control = <FormArray>this.financialForm.controls['estimated_value'];
+            
+            while (control.length !== 0) {
+                control.removeAt(0);
+            }
+    
+            if(array.length > 0 ){
+              console.log(array.length);
+                
+                    for (let val of array.value) {
+                        let vals = {
+                          estimate_year: val.financial_year,
+                          estimate_annual_sale: val.financial_annual_sale,
+                          estimate_profit_or_loss:val.finanical_profit_or_loss,
+                          estimate_net_loss: val.financial_net_loss, 
+                          estimate_net_profit: val.financial_net_profit,
+                          estimate_margin_of_profit: val.financial_margin_of_profit,
+                          estimate_margin_of_loss: val.financial_margin_of_loss,
+                          estimate_variation: val.financial_variation,
+                        };      
+                        control.push(this.createValuewithData(vals));
+                }
+            
+          }
+            
+            //control.controls[0].get('raw_quantity').setValidators([Validators.required]);
+            
+            // for(let i = 1 ; i<= totalFinYear ; i++ ){
+            //     let Year = (+startingYear+(i-1)) +'-'+  ((+startingYear)+(+i));
+            //     control.push(this.createValue(Year));        
+            // }
+
+            //control.push(this.createValue(YearParam));
+        
+        }
+        else if (e.value == 'no'){
+            
+            let startingYear = this.financialForm.controls['staring_financial_year'].value;
+            let totalFinYear = this.financialForm.controls['total_financial_year'].value;
+
+            const control = <FormArray>this.financialForm.controls['estimated_value'];
+
+            while (control.length !== 0) {
+                control.removeAt(0);
+            }
+    
+            if(totalFinYear > 0 ){
+                for(let i = 1 ; i<= totalFinYear ; i++ ){
+                    let Year = (+startingYear+(i-1)) +'-'+  ((+startingYear)+(+i));
+                    control.push(this.createValue(Year));        
+                    //console.log(this.financialForm.controls['staring_financial_year'].value);
+                }
+            }
+        }
+      }
+    
     // calYearVariation(index, detail) {
     //     let profit = detail.value.financial_net_profit;
     //     if ( profit != '' && index != 0) {
@@ -190,20 +303,28 @@ export class FinancialInfoComponent implements OnInit {
       
         let profit = detail.value.financial_net_profit;
         let loss = detail.value.financial_net_loss;
+        let curr_year = detail.value.financial_year;
+        this.SalesStatement[0] = 0.00;
 
-        if ( profit != '' || loss != '' && index != 0) {
+        if ( (profit != '' || loss != '') && index != 0) {
            
-           let array = <FormArray>this.financialForm.controls['date_per_financial']
+           let array = <FormArray>this.financialForm.controls['date_per_financial'];
+           console.log(array.value[index - 1].financial_net_profit);
             
            let prev_profit = array.value[index - 1].financial_net_profit != '' ? array.value[index - 1].financial_net_profit : 0;
            let prev_loss = array.value[index - 1].financial_net_loss !='' ? array.value[index - 1].financial_net_loss : 0 ;
 
+           let prev_year = array.value[index - 1].financial_year;    
              
            let variation = (((profit != '' ? profit : loss ) - ( prev_profit != '' ? prev_profit : prev_loss ))/ (prev_profit != '' ? prev_profit : prev_loss)) * 100;
         
-
            detail.controls.financial_variation.setValue(variation.toFixed(2));
 
+           //Increase in Sales in FY 2017-18 over sales in FY 2016-17 is 11.11%
+           console.log('variation',variation);
+           this.SalesStatement[index] = ( variation <= 0 ? 'Decreases ' : 'Increases ' ) + 'in Sales in FY ' + curr_year + ' Over Sales in FY '+ prev_year + ' is ' + variation.toFixed(2) + '%';
+           console.log('this.SlesStatement',this.SalesStatement);
+
         }
 
    // if(detail.value.finanical_profit_or_loss == 1){
@@ -260,29 +381,121 @@ export class FinancialInfoComponent implements OnInit {
             
                 if (salary != '' && loss != '') {
                     let margin = (loss / salary) * 100;
-                    detail.controls.financial_margin_of_loss.setValue(margin.toFixed(2))
+                    detail.controls.financial_margin_of_loss.setValue(margin.toFixed(2));
                     // detail.controls.financial_margin.disable()
                 }
             }
     }
     calVariation(index, detail) {
+        // console.log('CalVar In');
+        // let profit = detail.value.estimate_net_profit;
+        // let curr_year = detail.value.financial_year;
+        // if ( profit != '' && index != 0) {
+        //     let array = <FormArray>this.financialForm.controls['estimated_value']
+        //     let prev_profit = array.value[index - 1].estimate_net_profit;
+        //     let variation = ((profit - prev_profit) / prev_profit) * 100;
+        //     detail.controls.estimate_variation.setValue(variation.toFixed(2))
+        //     let prev_year = array.value[index - 1].financial_year;    
+        //     // detail.controls.estimate_variation.disable()
+        // }
+
         let profit = detail.value.estimate_net_profit;
-        if ( profit != '' && index != 0) {
+        let loss = detail.value.estimate_net_loss;
-            let array = <FormArray>this.financialForm.controls['estimated_value']
+        let curr_year = detail.value.estimate_year;
-            let prev_profit = array.value[index - 1].estimate_net_profit;
+        
-            let variation = ((profit - prev_profit) / prev_profit) * 100;
+        if ( (profit != '' || loss != '') && index != 0) {
-            detail.controls.estimate_variation.setValue(variation.toFixed(2))
+           
-            // detail.controls.estimate_variation.disable()
+          let array = <FormArray>this.financialForm.controls['estimated_value'];
+           console.log(array.value[index - 1].financial_net_profit);
+            
+           let prev_profit = array.value[index - 1].estimate_net_profit != '' ? array.value[index - 1].estimate_net_profit : 0;
+           let prev_loss = array.value[index - 1].estimate_net_loss !='' ? array.value[index - 1].estimate_net_loss : 0 ;
+           let prev_year = array.value[index - 1].estimate_year;    
+             
+           let variation = (((profit != '' ? profit : loss ) - ( prev_profit != '' ? prev_profit : prev_loss ))/ (prev_profit != '' ? prev_profit : prev_loss)) * 100;
+        
+           detail.controls.estimate_variation.setValue(variation.toFixed(2));
         }   
     }
+
     calMarginVal(index, detail) {
+        console.log('Margin Estimate VAR',detail);
         let salary = detail.value.estimate_annual_sale;
+        console.log('Margin Estimate Vsalary',salary);
+        
+        // if (salary != '' && profit != '') {
+        //     let margin = profit / salary * 100;
+        //     detail.controls.estimate_margin.setValue(margin.toFixed(2))
+        //     // detail.controls.estimate_margin.disable()
+        // }
+
+        if(detail.value.estimate_profit_or_loss == 1){
+                 
             let profit = detail.value.estimate_net_profit;
+            console.log('if Margin Profit',profit);
+            
            if (salary != '' && profit != '') {
+            console.log('if if Margin Estimate salary',salary);
+            console.log('if if Margin Profit',profit);
             let margin = profit / salary * 100;
-            detail.controls.estimate_margin.setValue(margin.toFixed(2))
+            console.log('margin',margin);
-            // detail.controls.estimate_margin.disable()
+            detail.controls.estimate_margin_of_profit.setValue(margin.toFixed(2));
+               
+               
            }
+       }
+       else if (detail.value.estimate_profit_or_loss == 2){
+           
+        let loss = detail.value.estimate_net_profit;
+        console.log('else if Margin loss',loss);
+           if (salary != '' && loss != '') {
+            console.log('elseif if Margin Estimate salary',salary);
+            console.log('alseif if Margin loss',loss);
+               let margin = (loss / salary) * 100;
+               detail.controls.estimate_margin_of_loss.setValue(margin.toFixed(2));
+               
+           }
+       }
+
+    }
+
+    calAmount(index, detail) {
+     
+        let salary = detail.value.estimate_annual_sale;
+     
+     if(detail.value.estimate_profit_or_loss == 1){
+                 
+     //       let profit = detail.value.estimate_net_profit;
+     let margin_profit = detail.value.estimate_margin_of_profit;
+     
+            
+           if (salary != '' && margin_profit != '') {
+            
+            
+            //let margin = profit / salary * 100;
+            let profit = margin_profit / salary * 100;
+
+            console.log('margin',margin_profit);
+            console.log('profit',profit);
+            //detail.controls.estimate_margin_of_profit.setValue(margin.toFixed(2));
+            detail.controls.estimate_net_profit.setValue(profit.toFixed(2));
+               
+               
+           }
+       }
+    //    else if (detail.value.estimate_profit_or_loss == 2){
+           
+    //     let loss = detail.value.estimate_net_profit;
+    //     console.log('else if Margin loss',loss);
+    //        if (salary != '' && loss != '') {
+    //         console.log('elseif if Margin Estimate salary',salary);
+    //         console.log('alseif if Margin loss',loss);
+    //            let margin = (loss / salary) * 100;
+    //            detail.controls.estimate_margin_of_loss.setValue(margin.toFixed(2));
+               
+    //        }
+    //    }
+
     }
     submitDetails() {
         console.log(this.financialForm.value.date_per_financial['financial_variation']);

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/lender-representative/lender-representative.component.html

@@ -51,112 +51,98 @@
 
                 <mat-tab label="Docs">
                         <ng-template matTabContent>
-                                                          <div fxLayout="row wrap">
+                            <div ngxViewer>
-                                                                  <div fxFlex="25" class="m-gap p-gap">
+                                 <div fxLayout="row wrap" style="padding:20px;">
-                                                                      <div class="p-list-main mb-2">
+                                <div fxFlex="100">
+                                  <div fxFlex="20" class="m-gap p-gap">
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
                                           <div class="p-list">                                                                           
-                      
+                                            <div class="top"> <img src="https://picsum.photos/2000/1500/?random=1" alt="Image 1"></div>   
-                                                                              <div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
-                                                                              <div class="bottom">
-                                                                                  <div class="left">
-                                                                                      <div class="details">
-                                                                                          <small>Nivi SKM</small>
-                                                                                          <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                      </div>
-                                                                                      <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                      </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                                  </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                  <div fxFlex="25" class="m-gap p-gap">
-                                                                          <div class="p-list-main mb-2">
                                           <div class="p-list">
-                          
+                                              <div class="top"> <img src="https://picsum.photos/2000/1500/?random=2" alt="Image 2"></div>                                                    
-                                                                                  <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                  <div class="bottom">
-                                                                                      <div class="left">
-                                                                                          <div class="details">
-                                                                                              <small>Nivi SKM</small>
-                                                                                              <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                          </div>
-                                                                                          <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                          </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                                      </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                      <div fxFlex="25" class="m-gap p-gap">
-                                                                              <div class="p-list-main mb-2">
                                           <div class="p-list">  
-                              
+                                              <div class="top"><img src="https://picsum.photos/2000/1500/?random=3" alt="Image 3"></div>                                                          
-                                                                                      <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                      <div class="bottom">
-                                                                                          <div class="left">
-                                                                                              <div class="details">
-                                                                                                  <small>Nivi SKM</small>
-                                                                                                  <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                              </div>
-                                                                                              <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>  
-                                                                              </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                                          </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                          <div fxFlex="25" class="m-gap p-gap">
-                                                                                  <div class="p-list-main mb-2">
                                           <div class="p-list">
-                                  
+                                              <div class="top"> <img src="https://picsum.photos/2000/1500/?random=2" alt="Image 2"></div>                                                    
-                                                                                          <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                          <div class="bottom">
-                                                                                              <div class="left">
-                                                                                                  <div class="details">
-                                                                                                      <small>Nivi SKM</small>
-                                                                                                      <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                                  </div>
-                                                                                                  <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                                  </div>
+                                    <div fxFlex="20" class="m-gap p-gap">
-                                                                              </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                              <div fxFlex="25" class="m-gap p-gap">
-                                                                                      <div class="p-list-main mb-2">
                                           <div class="p-list">  
-                                      
+                                              <div class="top"><img src="https://picsum.photos/2000/1500/?random=3" alt="Image 3"></div>                                                          
-                                                                                              <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                              <div class="bottom">
-                                                                                                  <div class="left">
-                                                                                                      <div class="details">
-                                                                                                          <small>Nivi SKM</small>
-                                                                                                          <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                                      </div>
-                                                                                                      <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                                      </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                                                  </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                                  <div fxFlex="25" class="m-gap p-gap">
-                                                                                          <div class="p-list-main mb-2">
                                           <div class="p-list">                                                                           
-                                          
+                                            <div class="top"> <img src="https://picsum.photos/2000/1500/?random=1" alt="Image 1"></div>   
-                                                                                                  <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                                  <div class="bottom">
-                                                                                                      <div class="left">
-                                                                                                          <div class="details">
-                                                                                                              <small>Nivi SKM</small>
-                                                                                                              <!-- <p>{{docs.pd_document_name}}</p> -->
                                           </div>
-                                                                                                          <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                      </div>
+                                  </div>
+                                </div>
+                                <div fxFlex="row">
+                                   <div fxFlex="100" class="m-gap p-gap">
+                                          <div fxLayout="row" fxLayoutWrap="wrap">
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                          </div>
+                                            <div fxLayout="row" fxLayoutWrap="wrap">
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
                                               </div>
                                           </div>                                    
                                    </div>
                                 </div>                                 
                               </div>
-                      
                             </div>            
-                                              
                                </ng-template>
                 </mat-tab>
         </mat-tab-group>

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/lender-representative/lender-representative.component.ts

@@ -32,7 +32,25 @@ export class LenderRepresentativeComponent implements OnInit {
       this.form_id = 15;
       this.notifier = notifier;
   }
-  
+  public viewerOptions: any = {
+  navbar: false,
+  toolbar: {
+    zoomIn: 4,
+    zoomOut: 4,
+    oneToOne: 4,
+    reset: 4,
+    prev: 4,
+    play: {
+      show: 4,
+      size: 'large',
+    },
+    next: 4,
+    rotateLeft: 4,
+    rotateRight: 4,
+    flipHorizontal: 4,
+    flipVertical: 4,
+  }
+};
   ngOnInit() {
       this.initRepresentative();
       let params: any = {};

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/loan-details/loan-details.component.html

@@ -18,12 +18,12 @@
                                 <div fxFlex="100">
                                     <mat-card>
                                         <mat-form-field style="width: 25%">
-                                            <input matInput placeholder="Loan Amount Applied for ? " formControlName="loan_amount" (keypress)="keyPress($event)" (keyup)="inWords($event,1)" (change)="loanCalc()" required>
+                                            <input matInput placeholder="Loan Amount Applied for ? " formControlName="loan_amount" (keypress)="keyPress($event)" (keyup)="inWords($event,1)" (change)="loanCalc()" required autocomplete="off">
                                             <mat-hint align="end" *ngIf="loanDetailsForm.controls['loan_amount'].value != ''">{{"&#8377;"}} {{loanAmtInWords}} Only</mat-hint>
                                         </mat-form-field>
                                         <mat-form-field style="width: 25%">
-                                            <mat-select multiple (selectionChange)="endUserChange($event)" placeholder="What is the end use" formControlName="end_use" required>
+                                            <mat-select multiple (selectionChange)="endUserChange($event.value)" placeholder="What is the end use" formControlName="end_use" required>
-                                                <mat-option *ngFor="let enduse of m_endUseofLoad" [value]="enduse.id">{{ enduse.name }}</mat-option>
+                                                <mat-option *ngFor="let enduse of m_endUseofLoad" [value]="enduse.subproduct_id">{{ enduse.name }}</mat-option>
                                             </mat-select>
                                             <!--<mat-select multiple placeholder="What is the end use"
                                                         formControlName="end_use" (selectionChange)="endUserChange($event)">
@@ -38,7 +38,7 @@
                                             </mat-select>-->
                                         </mat-form-field>
                                         <mat-form-field *ngIf="isOtherPurpose" style="width: 25%">
-                                            <input matInput placeholder="Specify End Use" formControlName="end_use_other">
+                                            <input matInput placeholder="Specify End Use" formControlName="end_use_other" autocomplete="off">
                                         </mat-form-field>
                                         <mat-form-field style="width: 30%">
                                             <mat-select placeholder="Is there a balance transfer ? " (selectionChange)="selectedBalancesTransferChanges($event)"
@@ -49,7 +49,7 @@
                                         </mat-form-field>
                                         <div *ngIf="loanDetailsForm.controls['is_transfer'].value == 'yes' && loanDetailsForm.controls['is_transfer'].value != ''">
                                         <mat-form-field  style="width: 50%">
-                                                <input matInput placeholder="What is the amount required for Balance Transfer ? " (keypress)="keyPress($event)" formControlName="balance_transfer_amount" (keyup)="inWords($event,2)" (change)="loanCalc()">
+                                                <input matInput placeholder="What is the amount required for Balance Transfer ? " (keypress)="keyPress($event)" formControlName="balance_transfer_amount" (keyup)="inWords($event,2)" (change)="loanCalc()" autocomplete="off">
                                                 <mat-hint align="end" *ngIf="loanDetailsForm.controls['loan_amount'].value != ''">{{"&#8377;"}} {{balTxrfAmtInWords}} Only</mat-hint>
                                             </mat-form-field>
                                         <mat-form-field style="width:20%">
@@ -67,18 +67,18 @@
                                         </mat-form-field>
                                         
                                         <mat-form-field *ngIf="loanDetailsForm.controls['lender'].value == 3" style="width: 25%">
-                                                <input matInput placeholder="Specify Others Lender" formControlName="other_bt_lender">
+                                                <input matInput placeholder="Specify Others Lender" formControlName="other_bt_lender" autocomplete="off">
                                         </mat-form-field>
                                     
                                         <mat-form-field *ngIf="loanDetailsForm.controls['is_topup'].value == 'yes' && loanDetailsForm.controls['is_topup'].value != '' "  style="width: 20%">
-                                            <input matInput placeholder="Top Up Amount" (keypress)="keyPress($event)" formControlName="topup_amount" (keyup)="inWords($event,5)">
+                                            <input matInput placeholder="Top Up Amount" (keypress)="keyPress($event)" formControlName="topup_amount" (keyup)="inWords($event,5)" autocomplete="off">
                                             <mat-hint align="end" *ngIf="loanDetailsForm.controls['topup_amount'].value != ''">{{"&#8377;"}} {{topUpAmtInWords}} Only</mat-hint>
                                         </mat-form-field>
                                     </div>
                                     <div *ngIf="loanDetailsForm.controls['is_transfer'].value != 'yes' && loanDetailsForm.controls['is_transfer'].value != '' ">
                                         
                                         <mat-form-field style="width: 35%">
-                                            <input matInput placeholder="Amount of Own Contribution" formControlName="own_contribution" (keypress)="keyPress($event)" required (keyup)="inWords($event,4)">
+                                            <input matInput placeholder="Amount of Own Contribution" formControlName="own_contribution" (keypress)="keyPress($event)" required (keyup)="inWords($event,4)" autocomplete="off">
                                             <mat-hint align="end" *ngIf="loanDetailsForm.controls['own_contribution'].value != ''">{{"&#8377;"}} {{ownContributionInWords}} Only</mat-hint>
                                         </mat-form-field>
 
@@ -96,14 +96,14 @@
                                         
                                         </mat-form-field>
                                         <mat-form-field *ngIf="loanDetailsForm.controls['source'].value =='other'"  style="width: 35%">
-                                            <input matInput placeholder="Specify Lender Name and Type" formControlName="lender_name_type">
+                                            <input matInput placeholder="Specify Lender Name and Type" formControlName="lender_name_type" autocomplete="off">
                                         </mat-form-field>
 
                                     </div>
 
     
                                     <mat-form-field  style="width: 50%">
-                                        <input matInput placeholder="EMI Comfort Level" formControlName="emi_level" (keypress)="keyPress($event)" required>
+                                        <input matInput placeholder="EMI Comfort Level" formControlName="emi_level" (keypress)="keyPress($event)" required autocomplete="off">
                                     </mat-form-field>
 <!-- <div *ngIf="productAbbr === 'HL' || productAbbr === 'LL' || productAbbr === 'LAP' "> -->
     <mat-card *ngIf="mortageCardAccess">
@@ -133,7 +133,7 @@
                 </mat-select>-->
             
             <mat-form-field *ngIf="mortageAccess">
-                <input matInput placeholder="Specify Type of Property" formControlName="property_type_others">
+                <input matInput placeholder="Specify Type of Property" formControlName="property_type_others" autocomplete="off">
             </mat-form-field>
             <mat-form-field>
                 <mat-select multiple placeholder="Name of Owner"
@@ -144,7 +144,7 @@
             </mat-form-field>
 
             <mat-form-field *ngIf="OtherOwnerFlag">
-                    <input matInput placeholder="Specify Other Owner Name" formControlName="other_owners_name">
+                    <input matInput placeholder="Specify Other Owner Name" formControlName="other_owners_name" autocomplete="off">
             </mat-form-field>
 
             <mat-form-field>
@@ -155,7 +155,7 @@
 
                                                     <mat-form-field *ngIf="loanDetailsForm.controls['construction_status'].value == 4">
                                                             <input matInput placeholder="What is the approximate stage of construction (%)?"
-                                                                formControlName="percentage_of_construction" (keypress)="keyPress($event)" required>
+                                                                formControlName="percentage_of_construction" (keypress)="keyPress($event)" required autocomplete="off">
                                                     </mat-form-field>
 
                                                     <!--<mat-select placeholder="Status of construction"
@@ -167,7 +167,7 @@
                                                 
                                                 <mat-form-field>
                                                     <input matInput placeholder="Estimate Market Value as Per Customer"
-                                                        formControlName="emv_per_customer" (keypress)="keyPress($event)" required>
+                                                        formControlName="emv_per_customer" (keypress)="keyPress($event)" required autocomplete="off">
                                                 </mat-form-field>
                                                 <!-- <mat-form-field>
                                                     <input matInput placeholder="Value as Per Agreement"
@@ -183,110 +183,97 @@
                 </mat-tab>
                 <mat-tab label="Docs">
                         <ng-template matTabContent>
-                                                          <div fxLayout="row wrap">
+                            <div ngxViewer>
-                                                                  <div fxFlex="25" class="m-gap p-gap">
+                                     <div fxLayout="row wrap" style="padding:20px;">
-                                                                      <div class="p-list-main mb-2">
+                                <div fxFlex="100">
+                                  <div fxFlex="20" class="m-gap p-gap">
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
                                           <div class="p-list">                                                                           
-                      
+                                            <div class="top"> <img src="https://picsum.photos/2000/1500/?random=1" alt="Image 1"></div>   
-                                                                              <div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
-                                                                              <div class="bottom">
-                                                                                  <div class="left">
-                                                                                      <div class="details">
-                                                                                          <small>Nivi SKM</small>
-                                                                                          <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                      </div>
-                                                                                      <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                      </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                                  </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                  <div fxFlex="25" class="m-gap p-gap">
-                                                                          <div class="p-list-main mb-2">
                                           <div class="p-list">
-                          
+                                              <div class="top"> <img src="https://picsum.photos/2000/1500/?random=2" alt="Image 2"></div>                                                    
-                                                                                  <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                  <div class="bottom">
-                                                                                      <div class="left">
-                                                                                          <div class="details">
-                                                                                              <small>Nivi SKM</small>
-                                                                                              <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                          </div>
-                                                                                          <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                          </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                                      </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                      <div fxFlex="25" class="m-gap p-gap">
-                                                                              <div class="p-list-main mb-2">
                                           <div class="p-list">  
-                              
+                                              <div class="top"><img src="https://picsum.photos/2000/1500/?random=3" alt="Image 3"></div>                                                          
-                                                                                      <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                      <div class="bottom">
-                                                                                          <div class="left">
-                                                                                              <div class="details">
-                                                                                                  <small>Nivi SKM</small>
-                                                                                                  <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                              </div>
-                                                                                              <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>  
-                                                                              </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                                          </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                          <div fxFlex="25" class="m-gap p-gap">
-                                                                                  <div class="p-list-main mb-2">
                                           <div class="p-list">
-                                  
+                                              <div class="top"> <img src="https://picsum.photos/2000/1500/?random=2" alt="Image 2"></div>                                                    
-                                                                                          <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                          <div class="bottom">
-                                                                                              <div class="left">
-                                                                                                  <div class="details">
-                                                                                                      <small>Nivi SKM</small>
-                                                                                                      <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                                  </div>
-                                                                                                  <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                                  </div>
+                                    <div fxFlex="20" class="m-gap p-gap">
-                                                                              </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                              <div fxFlex="25" class="m-gap p-gap">
-                                                                                      <div class="p-list-main mb-2">
                                           <div class="p-list">  
-                                      
+                                              <div class="top"><img src="https://picsum.photos/2000/1500/?random=3" alt="Image 3"></div>                                                          
-                                                                                              <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                              <div class="bottom">
-                                                                                                  <div class="left">
-                                                                                                      <div class="details">
-                                                                                                          <small>Nivi SKM</small>
-                                                                                                          <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                                      </div>
-                                                                                                      <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                                      </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                                                  </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                                  <div fxFlex="25" class="m-gap p-gap">
-                                                                                          <div class="p-list-main mb-2">
                                           <div class="p-list">                                                                           
-                                          
+                                            <div class="top"> <img src="https://picsum.photos/2000/1500/?random=1" alt="Image 1"></div>   
-                                                                                                  <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                                  <div class="bottom">
-                                                                                                      <div class="left">
-                                                                                                          <div class="details">
-                                                                                                              <small>Nivi SKM</small>
-                                                                                                              <!-- <p>{{docs.pd_document_name}}</p> -->
                                           </div>
-                                                                                                          <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                      </div>
+                                  </div>
+                                </div>
+                                <div fxFlex="row">
+                                   <div fxFlex="100" class="m-gap p-gap">
+                                          <div fxLayout="row" fxLayoutWrap="wrap">
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                          </div>
+                                            <div fxLayout="row" fxLayoutWrap="wrap">
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
                                               </div>
                                           </div>                                    
                                    </div>
                                 </div>                                 
                               </div>
-                      
                             </div>
                                               
                                </ng-template>

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/loan-details/loan-details.component.ts

@@ -38,6 +38,7 @@ export class LoanDetailsComponent implements OnInit {
      
     applicants: any;
     productAbbr: any;
+    productID: any;
     subProductName: any;
 
     isOtherPurpose: boolean = false;
@@ -70,8 +71,10 @@ export class LoanDetailsComponent implements OnInit {
         private router: Router,
         private _pd: PdTrigerService,
         @Inject(MAT_DIALOG_DATA) public pd_all_details: any) { 
+            
             this.applicants = this.pd_all_details.pdapplicants_detials;
             this.productAbbr = this.pd_all_details.pdmaster_details.product_abbr;
+            this.productID = this.pd_all_details.pdmaster_details.fk_product_id;
             this.subProductName = this.pd_all_details.pdmaster_details.subproduct_name;
             this.exist_loan_amt = this.pd_all_details.pdmaster_details.loan_amount != '' ? this.pd_all_details.pdmaster_details.loan_amount :'';
             this.loanAmtInWords = this._pd.convertNumberToWords(this.exist_loan_amt);
@@ -79,9 +82,28 @@ export class LoanDetailsComponent implements OnInit {
             this.pdid= this.pd_all_details.pdmaster_details.pd_id;
             this.notifier = notifier;
     }
-
+    public viewerOptions: any = {
+  navbar: false,
+  toolbar: {
+    zoomIn: 4,
+    zoomOut: 4,
+    oneToOne: 4,
+    reset: 4,
+    prev: 4,
+    play: {
+      show: 4,
+      size: 'large',
+    },
+    next: 4,
+    rotateLeft: 4,
+    rotateRight: 4,
+    flipHorizontal: 4,
+    flipVertical: 4,
+  }
+};
     ngOnInit() { 
-
+        console.clear();
+        console.log(this.pd_all_details);
         this.initloanDetailsForm();
         this.getM_EndUseofLoad();
         this.getM_sourceofamount();
@@ -123,6 +145,7 @@ export class LoanDetailsComponent implements OnInit {
                 if(value.records.loan_amount){ this.loanAmtInWords = this._pd.convertNumberToWords(value.records.loan_amount); }
 
                 this.loanDetailsForm.controls['end_use'].setValue(enduse);
+                this.endUserChange(enduse);
                 if (value.records.end_use_other) {
                     this.loanDetailsForm.controls['end_use_other'].setValue(value.records.end_use_other);
                 }
@@ -187,9 +210,10 @@ export class LoanDetailsComponent implements OnInit {
 // =============
 
        getM_EndUseofLoad() {
-    this._pd.getAllMasterDatas('ENDUSEOFLOAN').subscribe(
+    //this._pd.getAllMasterDatas('ENDUSEOFLOAN').subscribe(
+        this._pd.getAllMasterDatas('SUBPRODUCTS').subscribe(
       data => {
-        this.m_endUseofLoad = data.records.filter(data => data.isactive == 1);
+        this.m_endUseofLoad = data.records.filter(data => data.isactive == 1 && data.fk_product_id == this.productID);
       },
       error => {
         // this.notifier.notify('warning', 'No Category Records Found.!');
@@ -307,15 +331,33 @@ getM_sourceofamount() {
             loandetails_remarks: ['', Validators.compose([Validators.required])],
         });
     }
+    // endUserChange(event) {
+    //     this.endUserList = [];
+    //     event.value.forEach(option => {
+    //       this.endUserList.push({end_use: option});
+    //       if (option == 'other') {
+    //           this.isOtherPurpose = true;
+    //       }
+    //   });
+    // }
+
     endUserChange(event) {
         this.endUserList = [];
-        event.value.forEach(option => {
+        event.forEach(option => {
-          this.endUserList.push({end_use: option});
+          let othersData = this.m_endUseofLoad.filter(sub=>sub.subproduct_id==option)[0];
-          if (option == 'other') {
+          othersData = othersData.name.substr(0,6).toLowerCase();
+          
+          this.endUserList.push({ end_use: option });
+          if (othersData == 'others') {    
             this.isOtherPurpose = true;
+            return ;
+          }else
+          {
+            this.isOtherPurpose = false; 
           }
         });
     }
+    
     ownerNameChange(event) {
         let EventValue;
         

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/neighbour-hood/neighbour-hood.component.html

@@ -1,7 +1,6 @@
 <form [formGroup]="_neighbourhoodForm" novalidate>
-
       <h2 mat-dialog-title class="paragraph_change">
-          <div fxFlex="70" align="left" style="padding: 10px !important;">
+          <div fxFlex="70" align="left">
                   <div fxLayout="row wrap">
                       <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">
                           {{pageTitle}}
@@ -10,19 +9,21 @@
                       </div>
 
           </div>
-          <div fxFlex="30" align="end" style="padding: 10px !important;">
+          <div fxFlex="30" align="end">
                   <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
          </div>
   </h2>
-  <h6>
+  
+<mat-dialog-content>
+  <mat-card>
+    <mat-card-header>
         <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">
             <mat-radio-group formControlName="check_type" class="example-radio-group">
                 <mat-radio-button class="example-radio-button" color="primary" [value]="types.id" *ngFor="let types of check_type; let t = index">{{types.type_name}}</mat-radio-button>
               </mat-radio-group>
         </div>
-  </h6>
+    </mat-card-header>
-  <mat-dialog-content formArrayName="neighbourhood_list" *ngIf="_neighbourhoodForm.controls.check_type.value==0">
+  <mat-card-content formArrayName="neighbourhood_list" *ngIf="_neighbourhoodForm.controls.check_type.value==0">
-      <mat-card>
           <mat-card *ngFor="let neighbourhood of _neighbourhoodForm.controls.neighbourhood_list['controls']; let n = index;" [formGroupName]="n">
               <mat-card-content>
                     <mat-form-field style="width: 42%">
@@ -49,15 +50,8 @@
                         <mat-icon>delete</mat-icon></button>
               </mat-card-content>
             </mat-card>
-        <mat-dialog-actions>
+    </mat-card-content>
-          <div fxFlex="100" align="end">
+    <mat-card-content formArrayName="referencecheck_list" *ngIf="_neighbourhoodForm.controls.check_type.value==1">
-          <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Add More" matTooltipPosition="above" (click)="_neighbourhoodForm.controls.check_type.value==0 ? addNeighbourhood() : addReferencecheck()" color="primary"><mat-icon>add</mat-icon></button>
-          </div>
-        </mat-dialog-actions>
-      </mat-card>
-</mat-dialog-content>
-  <mat-dialog-content formArrayName="referencecheck_list" *ngIf="_neighbourhoodForm.controls.check_type.value==1">
-        <mat-card>
             <mat-card *ngFor="let reference of _neighbourhoodForm.controls.referencecheck_list['controls']; let r = index;" [formGroupName]="r">
                 <mat-card-content>
                     <mat-form-field style="width: 28%">
@@ -109,15 +103,18 @@
                           <mat-icon>delete</mat-icon></button>
                 </mat-card-content>
               </mat-card>
-             <mat-dialog-actions>
+              
-          <div fxFlex="100" align="end">
+  </mat-card-content>
+  <mat-card-actions align="end">
       <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Add More" matTooltipPosition="above" (click)="_neighbourhoodForm.controls.check_type.value==0 ? addNeighbourhood() : addReferencecheck()" color="primary"><mat-icon>add</mat-icon></button>
-          </div>
+  </mat-card-actions>
-        </mat-dialog-actions>
+
-        </mat-card>
+</mat-card>
+
     
     </mat-dialog-content>
-<mat-dialog-actions>
+  
+  <mat-dialog-actions>
     <div fxFlex="60" class="pb-0 text-sm-left" align="left">
         <mat-form-field appearance="outline" style="width: 100%">
           <mat-label>Remarks</mat-label>
@@ -128,8 +125,6 @@
             <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Save" matTooltipPosition="above" (click)="saveNeighbourhood(_neighbourhoodForm.value)"><mat-icon>save</mat-icon></button>
     </div>
        
-</mat-dialog-actions>
+  </mat-dialog-actions>
     <notifier-container></notifier-container>
   
-  
-

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/other-income/other-income.component.html

@@ -93,102 +93,92 @@
 
             <mat-tab label="Docs">
                 <ng-template matTabContent>
-                    <div fxLayout="row wrap">
+                    <div ngxViewer>
-                        <div fxFlex="25" class="m-gap p-gap">
+                     <div fxLayout="row wrap" style="padding:20px;">
-                            <div class="p-list-main mb-2">
+                                <div fxFlex="100">
+                                  <div fxFlex="20" class="m-gap p-gap">
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
                                           <div class="p-list">                                                                           
-                                    <div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
+                                            <div class="top"> <img src="https://picsum.photos/2000/1500/?random=1" alt="Image 1"></div>   
-                                    <div class="bottom">
-                                            <div class="left">
-                                                <div class="details">
-                                                    <small>Nivi SKM</small>
-                                                        <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                </div>
-                                                <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                            </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                        </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                        <div fxFlex="25" class="m-gap p-gap">
-                                                                        <div class="p-list-main mb-2">
                                           <div class="p-list">
-                        
+                                              <div class="top"> <img src="https://picsum.photos/2000/1500/?random=2" alt="Image 2"></div>                                                    
-                                                                                <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                <div class="bottom">
-                                                                                    <div class="left">
-                                                                                        <div class="details">
-                                                                                            <small>Nivi SKM</small>
-                                                                                            <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                        </div>
-                                                                                        <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                        </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                        </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                        <div fxFlex="25" class="m-gap p-gap">
-                                                                            <div class="p-list-main mb-2">
                                           <div class="p-list">  
-                            
+                                              <div class="top"><img src="https://picsum.photos/2000/1500/?random=3" alt="Image 3"></div>                                                          
-                                                                                    <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                    <div class="bottom">
-                                                                                        <div class="left">
-                                                                                            <div class="details">
-                                                                                                <small>Nivi SKM</small>
-                                                                                                <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                            </div>
-                                                                                            <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>  
-                                                                            </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                        </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                        <div fxFlex="25" class="m-gap p-gap">
-                            <div class="p-list-main mb-2">
                                           <div class="p-list">
-                                    <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
+                                              <div class="top"> <img src="https://picsum.photos/2000/1500/?random=2" alt="Image 2"></div>                                                    
-                                    <div class="bottom">
-                                        <div class="left">
-                                            <div class="details">
-                                                <small>Nivi SKM</small>
-                                                <!-- <p>{{docs.pd_document_name}}</p> -->
-                                            </div>
-                                            <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                            </div>
+                                    <div fxFlex="20" class="m-gap p-gap">
-                        </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                        <div fxFlex="25" class="m-gap p-gap">
-                            <div class="p-list-main mb-2">
                                           <div class="p-list">  
-                                    
+                                              <div class="top"><img src="https://picsum.photos/2000/1500/?random=3" alt="Image 3"></div>                                                          
-                                    <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                    <div class="bottom">
-                                        <div class="left">
-                                            <div class="details">
-                                                <small>Nivi SKM</small>
-                                                <!-- <p>{{docs.pd_document_name}}</p> -->
-                                            </div>
-                                            <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                            </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                        </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                        <div fxFlex="25" class="m-gap p-gap">
-                            <div class="p-list-main mb-2">
                                           <div class="p-list">                                                                           
-
+                                            <div class="top"> <img src="https://picsum.photos/2000/1500/?random=1" alt="Image 1"></div>   
-                                    <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                    <div class="bottom">
-                                        <div class="left">
-                                            <div class="details">
-                                                <small>Nivi SKM</small>
-                                                <!-- <p>{{docs.pd_document_name}}</p> -->
                                           </div>
-                                        <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                      </div>
+                                  </div>
+                                </div>
+                                <div fxFlex="row">
+                                   <div fxFlex="100" class="m-gap p-gap">
+                                          <div fxLayout="row" fxLayoutWrap="wrap">
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                          </div>
+                                            <div fxLayout="row" fxLayoutWrap="wrap">
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
                                               </div>
                                           </div>                                    
                                    </div>

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/other-income/other-income.component.ts

@@ -55,7 +55,25 @@ export class OtherIncomeComponent implements OnInit {
                     this.form_id = 9;
                     this.notifier = notifier;
     }
-
+public viewerOptions: any = {
+  navbar: false,
+  toolbar: {
+    zoomIn: 4,
+    zoomOut: 4,
+    oneToOne: 4,
+    reset: 4,
+    prev: 4,
+    play: {
+      show: 4,
+      size: 'large',
+    },
+    next: 4,
+    rotateLeft: 4,
+    rotateRight: 4,
+    flipHorizontal: 4,
+    flipVertical: 4,
+  }
+};
     ngOnInit() {
         console.clear();
         this.getFrequency();

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/personal-info/personal-info.component.html

@@ -209,112 +209,98 @@
                 </mat-tab>
                 <mat-tab label="Docs">
                   <ng-template matTabContent>
-                                                    <div fxLayout="row wrap">
+                      <div ngxViewer>
-                                                            <div fxFlex="25" class="m-gap p-gap">
+                         <div fxLayout="row wrap" style="padding:20px;">
-                                                                <div class="p-list-main mb-2">
+                                <div fxFlex="100">
+                                  <div fxFlex="20" class="m-gap p-gap">
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
                                           <div class="p-list">                                                                           
-                
+                                            <div class="top"> <img src="https://picsum.photos/2000/1500/?random=1" alt="Image 1"></div>   
-                                                                        <div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
-                                                                        <div class="bottom">
-                                                                            <div class="left">
-                                                                                <div class="details">
-                                                                                    <small>Nivi SKM</small>
-                                                                                    <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                </div>
-                                                                                <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                            </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                            <div fxFlex="25" class="m-gap p-gap">
-                                                                    <div class="p-list-main mb-2">
                                           <div class="p-list">
-                    
+                                              <div class="top"> <img src="https://picsum.photos/2000/1500/?random=2" alt="Image 2"></div>                                                    
-                                                                            <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                            <div class="bottom">
-                                                                                <div class="left">
-                                                                                    <div class="details">
-                                                                                        <small>Nivi SKM</small>
-                                                                                        <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                    </div>
-                                                                                    <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                    </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                                </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                <div fxFlex="25" class="m-gap p-gap">
-                                                                        <div class="p-list-main mb-2">
                                           <div class="p-list">  
-                        
+                                              <div class="top"><img src="https://picsum.photos/2000/1500/?random=3" alt="Image 3"></div>                                                          
-                                                                                <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                <div class="bottom">
-                                                                                    <div class="left">
-                                                                                        <div class="details">
-                                                                                            <small>Nivi SKM</small>
-                                                                                            <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                        </div>
-                                                                                        <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>  
-                                                                        </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                                    </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                    <div fxFlex="25" class="m-gap p-gap">
-                                                                            <div class="p-list-main mb-2">
                                           <div class="p-list">
-                            
+                                              <div class="top"> <img src="https://picsum.photos/2000/1500/?random=2" alt="Image 2"></div>                                                    
-                                                                                    <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                    <div class="bottom">
-                                                                                        <div class="left">
-                                                                                            <div class="details">
-                                                                                                <small>Nivi SKM</small>
-                                                                                                <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                            </div>
-                                                                                            <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                            </div>
+                                    <div fxFlex="20" class="m-gap p-gap">
-                                                                        </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                        <div fxFlex="25" class="m-gap p-gap">
-                                                                                <div class="p-list-main mb-2">
                                           <div class="p-list">  
-                                
+                                              <div class="top"><img src="https://picsum.photos/2000/1500/?random=3" alt="Image 3"></div>                                                          
-                                                                                        <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                        <div class="bottom">
-                                                                                            <div class="left">
-                                                                                                <div class="details">
-                                                                                                    <small>Nivi SKM</small>
-                                                                                                    <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                                </div>
-                                                                                                <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                                </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                                            </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                            <div fxFlex="25" class="m-gap p-gap">
-                                                                                    <div class="p-list-main mb-2">
                                           <div class="p-list">                                                                           
-                                    
+                                            <div class="top"> <img src="https://picsum.photos/2000/1500/?random=1" alt="Image 1"></div>   
-                                                                                            <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                            <div class="bottom">
-                                                                                                <div class="left">
-                                                                                                    <div class="details">
-                                                                                                        <small>Nivi SKM</small>
-                                                                                                        <!-- <p>{{docs.pd_document_name}}</p> -->
                                           </div>
-                                                                                                    <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                      </div>
+                                  </div>
+                                </div>
+                                <div fxFlex="row">
+                                   <div fxFlex="100" class="m-gap p-gap">
+                                          <div fxLayout="row" fxLayoutWrap="wrap">
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                          </div>
+                                            <div fxLayout="row" fxLayoutWrap="wrap">
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
                                               </div>
                                           </div>                                    
                                    </div>
                                 </div>                                 
                               </div>
-                
                       </div>      
-                                        
                          </ng-template>
                 </mat-tab>
               

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/personal-info/personal-info.component.ts

@@ -66,7 +66,25 @@ export class PersonalInfoComponent implements OnInit {
    this.notifier = notifier;
    this.form_id = 3;
  }
-
+public viewerOptions: any = {
+  navbar: false,
+  toolbar: {
+    zoomIn: 4,
+    zoomOut: 4,
+    oneToOne: 4,
+    reset: 4,
+    prev: 4,
+    play: {
+      show: 4,
+      size: 'large',
+    },
+    next: 4,
+    rotateLeft: 4,
+    rotateRight: 4,
+    flipHorizontal: 4,
+    flipVertical: 4,
+  }
+};
   ngOnInit() {
     this.initFormDetails()
     this.loadPDDetails();

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/rental-info/rental-info.component.html

@@ -204,110 +204,97 @@
             </mat-tab>
             <mat-tab label="Docs">
                 <ng-template matTabContent>
-                    <div fxLayout="row wrap">
+                    <div ngxViewer>
-                                                  <div fxFlex="25" class="m-gap p-gap">
+                     <div fxLayout="row wrap" style="padding:20px;">
-                                                      <div class="p-list-main mb-2">
+                                <div fxFlex="100">
+                                  <div fxFlex="20" class="m-gap p-gap">
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
                                           <div class="p-list">                                                                           
-      
+                                            <div class="top"> <img src="https://picsum.photos/2000/1500/?random=1" alt="Image 1"></div>   
-                                                              <div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
-                                                              <div class="bottom">
-                                                                  <div class="left">
-                                                                      <div class="details">
-                                                                          <small>Nivi SKM</small>
-                                                                          <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                      </div>
-                                                                      <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                      </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                  </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                  <div fxFlex="25" class="m-gap p-gap">
-                                                          <div class="p-list-main mb-2">
                                           <div class="p-list">
-          
+                                              <div class="top"> <img src="https://picsum.photos/2000/1500/?random=2" alt="Image 2"></div>                                                    
-                                                                  <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                  <div class="bottom">
-                                                                      <div class="left">
-                                                                          <div class="details">
-                                                                              <small>Nivi SKM</small>
-                                                                              <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                          </div>
-                                                                          <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                          </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                      </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                      <div fxFlex="25" class="m-gap p-gap">
-                                                              <div class="p-list-main mb-2">
                                           <div class="p-list">  
-              
+                                              <div class="top"><img src="https://picsum.photos/2000/1500/?random=3" alt="Image 3"></div>                                                          
-                                                                      <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                      <div class="bottom">
-                                                                          <div class="left">
-                                                                              <div class="details">
-                                                                                  <small>Nivi SKM</small>
-                                                                                  <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                              </div>
-                                                                              <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>  
-                                                              </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                          </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                          <div fxFlex="25" class="m-gap p-gap">
-                                                                  <div class="p-list-main mb-2">
                                           <div class="p-list">
-                  
+                                              <div class="top"> <img src="https://picsum.photos/2000/1500/?random=2" alt="Image 2"></div>                                                    
-                                                                          <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                          <div class="bottom">
-                                                                              <div class="left">
-                                                                                  <div class="details">
-                                                                                      <small>Nivi SKM</small>
-                                                                                      <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                  </div>
-                                                                                  <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                  </div>
+                                    <div fxFlex="20" class="m-gap p-gap">
-                                                              </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                              <div fxFlex="25" class="m-gap p-gap">
-                                                                      <div class="p-list-main mb-2">
                                           <div class="p-list">  
-                      
+                                              <div class="top"><img src="https://picsum.photos/2000/1500/?random=3" alt="Image 3"></div>                                                          
-                                                                              <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                              <div class="bottom">
-                                                                                  <div class="left">
-                                                                                      <div class="details">
-                                                                                          <small>Nivi SKM</small>
-                                                                                          <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                      </div>
-                                                                                      <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                      </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                                  </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                  <div fxFlex="25" class="m-gap p-gap">
-                                                                          <div class="p-list-main mb-2">
                                           <div class="p-list">                                                                           
-                          
+                                            <div class="top"> <img src="https://picsum.photos/2000/1500/?random=1" alt="Image 1"></div>   
-                                                                                  <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                  <div class="bottom">
-                                                                                      <div class="left">
-                                                                                          <div class="details">
-                                                                                              <small>Nivi SKM</small>
-                                                                                              <!-- <p>{{docs.pd_document_name}}</p> -->
                                           </div>
-                                                                                          <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                      </div>
+                                  </div>
+                                </div>
+                                <div fxFlex="row">
+                                   <div fxFlex="100" class="m-gap p-gap">
+                                          <div fxLayout="row" fxLayoutWrap="wrap">
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                          </div>
+                                            <div fxLayout="row" fxLayoutWrap="wrap">
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
                                               </div>
                                           </div>                                    
                                    </div>
                                 </div>                                 
                               </div>   
-      
                     </div>     
                </ng-template>
             </mat-tab>

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/rental-info/rental-info.component.ts

@@ -36,7 +36,25 @@ export class RentalInfoComponent implements OnInit {
             this.notifier = notifier;
             this.form_id = 17;
       }
-       
+       public viewerOptions: any = {
+        navbar: false,
+        toolbar: {
+            zoomIn: 4,
+            zoomOut: 4,
+            oneToOne: 4,
+            reset: 4,
+            prev: 4,
+            play: {
+            show: 4,
+            size: 'large',
+            },
+            next: 4,
+            rotateLeft: 4,
+            rotateRight: 4,
+            flipHorizontal: 4,
+            flipVertical: 4,
+  }
+};
     ngOnInit() {
         this.step = 0;
         this.inintRentalForm();

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/stock/stock.component.html

@@ -18,7 +18,7 @@
                                 <div fxLayout="row wrap">
                                         <div fxFlex="100">
                                                <!-- start main applicant -->
-                                               <mat-card>
+                                               <mat-card *ngIf="rawMaterialAccess">
                                                     <mat-card-header>
                                                         <p>Raw Materials<p>
                                                     </mat-card-header>
@@ -26,39 +26,50 @@
                                                         <div *ngFor="let details of stockForm.controls.raw_materials['controls']; let i=index"
                                                              [formGroupName]="i">
                                                             <mat-card-content class="matcard">
-                                                                <mat-form-field>
+                                                                <mat-form-field style="width:30%">
                                                                     <input matInput placeholder="Name" formControlName="raw_name" required>
                                                                 </mat-form-field>
-                                                                <mat-form-field>
+                                                                <mat-form-field style="width:30%">
                                                                     <mat-select placeholder="is the Stock is Observed ?"
-                                                                                formControlName="stock_observed"  required>
+                                                                                formControlName="stock_observed"  required
+                                                                                (selectionChange)="RawMaterialValidation($event)">
                                                                         <mat-option value="yes" >Yes</mat-option>
                                                                         <mat-option value="no" >No</mat-option>
                                                                     </mat-select>
                                                                 </mat-form-field>
-                                                                <div *ngIf="details.get('stock_observed').value == 'no'" >
+                                                                <span *ngIf="details.get('stock_observed').value == 'no'" >
-                                                                <mat-form-field>
+                                                                <mat-form-field style="width:30%">
                                                                     <input matInput placeholder="Estimated Quantity" formControlName="raw_quantity" required>
                                                                 </mat-form-field>
-                                                                <mat-form-field>
+                                                                <mat-form-field style="width:30%">
                                                                     <mat-select placeholder="Unit of Mearsurement"
                                                                                 formControlName="raw_uom"  required>
                                                                         <mat-option value="{{uom.uom_id}}" *ngFor="let uom of uomData">{{uom.name}}</mat-option>
                                                                     </mat-select>
                                                                 </mat-form-field>
-                                                                <mat-form-field *ngIf="details.get('raw_uom').value == 61" >
+                                                                <mat-form-field *ngIf="details.get('raw_uom').value == 61" style="width:30%">
                                                                     <input matInput placeholder="Specify Other UOM" formControlName="other_uom" required>
                                                                 </mat-form-field>
-                                                                <mat-form-field>
+                                                                <mat-form-field style="width:76%">
-                                                                    <input matInput placeholder="Value" formControlName="raw_value" (keypress)="keyPress($event)"  required>
+                                                                    <input matInput placeholder="Estimated Value of Stock Observed" formControlName="raw_value" (keypress)="keyPress($event)" (keyup)="inWords($event,1)"  required>
+                                                                    <mat-hint align="end" *ngIf="details.get('raw_value').value != ''">{{"&#8377;"}} {{rawValueInWords}} Only</mat-hint>
                                                                 </mat-form-field>
                                                                 <mat-form-field style="width:76%">
                                                                     <input matInput placeholder="Value of raw materials as per latest financial Statements" formControlName="rawmaterial_value" (keypress)="keyPress($event)" required>
                                                                 </mat-form-field>
-                                                                <mat-form-field style="width:76%">
+                                                                <mat-form-field style="width:90%">
-                                                                    <input matInput placeholder="Is the stock of raw materials observed ?" formControlName="is_sufficiant_raw"  required>
+                                                                    <!-- <input matInput placeholder="Is the stock of raw materials observed ?" formControlName="is_sufficiant_raw"  required> -->
+                                                                    <mat-select placeholder="Is the stock of Raw Materials observed, sufficient considering the size of operations" formControlName="is_sufficiant_raw"  required>
+                                                                        <mat-option value="yes" >Yes</mat-option>
+                                                                        <mat-option value="no" >No</mat-option>
+                                                                    </mat-select>
                                                                 </mat-form-field>
-                                                                </div>
+                                                                <mat-form-field *ngIf="details.get('is_sufficiant_raw').value == 'no'" appearance="outline" style="width: 90%">
+                                                                        <mat-label>Please comment on the stock level observed?</mat-label>
+                                                                        <textarea matInput placeholder="Please comment on the stock level observed" formControlName="rawmaterial_remarks"></textarea>
+                                                                </mat-form-field>
+        
+                                                            </span>
                                             
                                                                 <button type="button" mat-raised-button mat-icon-button (click)="addRawMaterials()"
                                                                 matTooltip="Add More Raw Materials" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary"  *ngIf="i==0">
@@ -79,7 +90,7 @@
                                         <div fxLayout="row wrap">
                                             <div fxFlex="100">
                                                        <!-- start co applicant form details -->                 
-                                                       <mat-card>
+                                                       <mat-card *ngIf="finishedGoodsAccess">
                                                             <mat-card-header>
                                                                 <p>Finished Goods<p>
                                                             </mat-card-header>
@@ -87,21 +98,40 @@
                                                                 <div *ngFor="let details of stockForm.controls.finished_goods['controls']; let i=index"
                                                                      [formGroupName]="i">
                                                                     <mat-card-content class="matcard">
-                                                                        <mat-form-field>
+                                                                        <mat-form-field style="width:30%">
                                                                             <input matInput placeholder="Name" formControlName="goods_name" required>
                                                                         </mat-form-field>
-                                                                        <mat-form-field>
+                                                                        <mat-form-field style="width:30%">
+                                                                                <mat-select placeholder="is the Goods is Observed ?"
+                                                                                            formControlName="goods_observed"  required
+                                                                                            (selectionChange)="GoodsValidation($event)">
+                                                                                    <mat-option value="yes" >Yes</mat-option>
+                                                                                    <mat-option value="no" >No</mat-option>
+                                                                                </mat-select>
+                                                                            </mat-form-field>
+                                                                        <span *ngIf="details.get('goods_observed').value == 'no'" >
+                                                                        <mat-form-field style="width:30%">
                                                                             <input matInput placeholder="Estimated Quantity" formControlName="goods_quantity" required>
                                                                         </mat-form-field>
-                                                                        <mat-form-field>  
+                                                                        <mat-form-field style="width:76%">  
-                                                                            <input matInput placeholder="Value" formControlName="goods_value" (keypress)="keyPress($event)" required>
+                                                                            <input matInput placeholder="Estimated Value of Stock Observed" formControlName="goods_value" (keypress)="keyPress($event)" (keyup)="inWords($event,2)" required>
+                                                                            <mat-hint align="end" *ngIf="details.get('goods_value').value != ''">{{"&#8377;"}} {{goodsValueInWords}} Only</mat-hint>
                                                                         </mat-form-field>
                                                                         <mat-form-field style="width:76%">
                                                                             <input matInput placeholder="Value of finished goods as per latest financial statements" formControlName="finished_goods_value" (keypress)="keyPress($event)" required>
                                                                         </mat-form-field>
-                                                                        <mat-form-field style="width:76%">
+                                                                        <mat-form-field style="width:90%">
-                                                                            <input matInput placeholder="Is the stock of finished goods observed ?" formControlName="is_sufficiant_goods" required>
+                                                                            <!-- <input matInput placeholder="Is the stock of finished goods observed ?" formControlName="is_sufficiant_goods" required> -->
+                                                                            <mat-select placeholder="Is the stock of finished goods observed ?" formControlName="is_sufficiant_goods"  required>
+                                                                                    <mat-option value="yes" >Yes</mat-option>
+                                                                                    <mat-option value="no" >No</mat-option>
+                                                                            </mat-select>
                                                                         </mat-form-field>
+                                                                        <mat-form-field *ngIf="details.get('is_sufficiant_goods').value == 'no'" appearance="outline" style="width: 90%">
+                                                                                <mat-label>Please comment on the finished goods stock level observed?</mat-label>
+                                                                                <textarea matInput placeholder="Please comment on the finished goods observed" formControlName="finishedgoods_remarks"></textarea>
+                                                                        </mat-form-field>
+                                                                        </span>
                                                     
                                                                         <button type="button" mat-raised-button mat-icon-button (click)="addGoods()"
                                                                         matTooltip="Add More Finished Goods" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary"  *ngIf="i==0">
@@ -117,118 +147,166 @@
                                                         </mat-card>
                                      <!-- end co apllicant -->      
                                                             
+                                                </div>
+                                            </div>
+
+                                            <div fxLayout="row wrap">
+                                                <div fxFlex="100">                
+                                                           <mat-card *ngIf="tradeConcernAccess">
+                                                                <mat-card-header>
+                                                                    <p>Stock of Goods Traded<p>
+                                                                </mat-card-header>
+                                                                <div formArrayName="traded_goods">
+                                                                    <div *ngFor="let details of stockForm.controls.traded_goods['controls']; let i=index"
+                                                                         [formGroupName]="i">
+                                                                        <mat-card-content class="matcard">
+                                                                            <mat-form-field style="width:30%">
+                                                                                <input matInput placeholder="Name" formControlName="traded_goods_name" required>
+                                                                            </mat-form-field>
+                                                                            <mat-form-field style="width:30%">
+                                                                                    <mat-select placeholder="is the Traded Goods is Observed ?"
+                                                                                                formControlName="traded_goods_observed"  required
+                                                                                                (selectionChange)="TradedGoodsValidation($event)">
+                                                                                        <mat-option value="yes" >Yes</mat-option>
+                                                                                        <mat-option value="no" >No</mat-option>
+                                                                                    </mat-select>
+                                                                            </mat-form-field>
+                                                                            <span *ngIf="details.get('traded_goods_observed').value == 'no'" >
+                                                                            <mat-form-field style="width:30%">
+                                                                                <input matInput placeholder="Estimated Quantity" formControlName="traded_goods_quantity" required>
+                                                                            </mat-form-field>
+                                                                            <mat-form-field style="width:76%">  
+                                                                                <input matInput placeholder="Estimated Value of Stock Observed" formControlName="estimated_traded_goods_value" (keypress)="keyPress($event)" (keyup)="inWords($event,3)" required>
+                                                                                <mat-hint align="end" *ngIf="details.get('estimated_traded_goods_value').value != ''">{{"&#8377;"}} {{tradedGoodsValueInWords}} Only</mat-hint>
+                                                                            </mat-form-field>
+                                                                            <mat-form-field style="width:76%">
+                                                                                <input matInput placeholder="Value of traded goods as per latest financial statements" formControlName="traded_goods_value" (keypress)="keyPress($event)" required>
+                                                                            </mat-form-field>
+                                                                            <mat-form-field style="width:90%">
+                                                                                <!-- <input matInput placeholder="Is the stock of finished goods observed ?" formControlName="is_sufficiant_goods" required> -->
+                                                                                <mat-select placeholder="Is the stock of Traded goods observed ?" formControlName="is_sufficiant_traded_goods"  required>
+                                                                                        <mat-option value="yes" >Yes</mat-option>
+                                                                                        <mat-option value="no" >No</mat-option>
+                                                                                </mat-select>
+                                                                            </mat-form-field>
+                                                                            <mat-form-field *ngIf="details.get('is_sufficiant_traded_goods').value == 'no'" appearance="outline" style="width: 90%">
+                                                                                    <mat-label>Please comment on the Traded Goods stock level observed?</mat-label>
+                                                                                    <textarea matInput placeholder="Please comment on the traded goods stock level observed" formControlName="traded_goods_remarks"></textarea>
+                                                                            </mat-form-field>
+                                                                            </span>
+                                                        
+                                                                            <button type="button" mat-raised-button mat-icon-button (click)="addTradedGoods()"
+                                                                            matTooltip="Add More Traded Goods" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary"  *ngIf="i==0">
+                                                                                <mat-icon>add</mat-icon>
+                                                                            </button>
+                                                                            <button type="button" mat-raised-button mat-icon-button (click)="deleteTradedGoods(i)"
+                                                                            matTooltip="Delete" matTooltipPosition="above" class="mr-1 mb-1 hover-icon"  *ngIf="i>0">
+                                                                                <mat-icon>delete</mat-icon>
+                                                                            </button>
+                                                                        </mat-card-content>
+                                                                    </div>
+                                                                </div>
+                                                            </mat-card>
+                                         
+                                                                
                                                     </div>
                                                 </div>
                           </ng-template>
                         </mat-tab>
                         <mat-tab label="Docs">
                           <ng-template matTabContent>
-                                                            <div fxLayout="row wrap">
+                              <div ngxViewer>
-                                                                    <div fxFlex="25" class="m-gap p-gap">
+                                     <div fxLayout="row wrap" style="padding:20px;">
-                                                                        <div class="p-list-main mb-2">
+                                <div fxFlex="100">
+                                  <div fxFlex="20" class="m-gap p-gap">
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
                                           <div class="p-list">                                                                           
-                        
+                                            <div class="top"> <img src="https://picsum.photos/2000/1500/?random=1" alt="Image 1"></div>   
-                                                                                <div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
-                                                                                <div class="bottom">
-                                                                                    <div class="left">
-                                                                                        <div class="details">
-                                                                                            <small>Nivi SKM</small>
-                                                                                            <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                        </div>
-                                                                                        <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                        </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                                    </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                    <div fxFlex="25" class="m-gap p-gap">
-                                                                            <div class="p-list-main mb-2">
                                           <div class="p-list">
-                            
+                                              <div class="top"> <img src="https://picsum.photos/2000/1500/?random=2" alt="Image 2"></div>                                                    
-                                                                                    <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                    <div class="bottom">
-                                                                                        <div class="left">
-                                                                                            <div class="details">
-                                                                                                <small>Nivi SKM</small>
-                                                                                                <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                            </div>
-                                                                                            <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                            </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                                        </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                        <div fxFlex="25" class="m-gap p-gap">
-                                                                                <div class="p-list-main mb-2">
                                           <div class="p-list">  
-                                
+                                              <div class="top"><img src="https://picsum.photos/2000/1500/?random=3" alt="Image 3"></div>                                                          
-                                                                                        <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                        <div class="bottom">
-                                                                                            <div class="left">
-                                                                                                <div class="details">
-                                                                                                    <small>Nivi SKM</small>
-                                                                                                    <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                                </div>
-                                                                                                <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>  
-                                                                                </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                                            </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                            <div fxFlex="25" class="m-gap p-gap">
-                                                                                    <div class="p-list-main mb-2">
                                           <div class="p-list">
-                                    
+                                              <div class="top"> <img src="https://picsum.photos/2000/1500/?random=2" alt="Image 2"></div>                                                    
-                                                                                            <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                            <div class="bottom">
-                                                                                                <div class="left">
-                                                                                                    <div class="details">
-                                                                                                        <small>Nivi SKM</small>
-                                                                                                        <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                                    </div>
-                                                                                                    <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                                    </div>
+                                    <div fxFlex="20" class="m-gap p-gap">
-                                                                                </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                                <div fxFlex="25" class="m-gap p-gap">
-                                                                                        <div class="p-list-main mb-2">
                                           <div class="p-list">  
-                                        
+                                              <div class="top"><img src="https://picsum.photos/2000/1500/?random=3" alt="Image 3"></div>                                                          
-                                                                                                <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                                <div class="bottom">
-                                                                                                    <div class="left">
-                                                                                                        <div class="details">
-                                                                                                            <small>Nivi SKM</small>
-                                                                                                            <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                                        </div>
-                                                                                                        <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                           </div>
                                       </div>
                                   </div>
-                                                                                        </div>
+                                  <div fxFlex="20" class="m-gap p-gap">
-                                                                                    </div>
+                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
-                                                                                    <div fxFlex="25" class="m-gap p-gap">
-                                                                                            <div class="p-list-main mb-2">
                                           <div class="p-list">                                                                           
-                                            
+                                            <div class="top"> <img src="https://picsum.photos/2000/1500/?random=1" alt="Image 1"></div>   
-                                                                                                    <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                                    <div class="bottom">
-                                                                                                        <div class="left">
-                                                                                                            <div class="details">
-                                                                                                                <small>Nivi SKM</small>
-                                                                                                                <!-- <p>{{docs.pd_document_name}}</p> -->
                                           </div>
-                                                                                                            <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                      </div>
+                                  </div>
+                                </div>
+                                <div fxFlex="row">
+                                   <div fxFlex="100" class="m-gap p-gap">
+                                          <div fxLayout="row" fxLayoutWrap="wrap">
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                          </div>
+                                            <div fxLayout="row" fxLayoutWrap="wrap">
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
+                                              </div>
+                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                  <a href="http://www.google.com"><mat-icon style="color: #e00201;font-size: 60px !important;width:inherit !important;">picture_as_pdf</mat-icon> <span class="d-block">version_111</span></a>
                                               </div>
                                           </div>                                    
                                    </div>
                                 </div>                                 
                               </div>     
-                        
                               </div>                                           
-                                                
                                  </ng-template>
                         </mat-tab>
                       
@@ -238,7 +316,7 @@
         <mat-dialog-actions>
                 <div fxFlex="60" class="pb-0 text-sm-left" align="left">
                         <mat-form-field appearance="outline" style="width: 100%">
-                                <mat-label>Please comment on the stock level observed?</mat-label>
+                                <mat-label>Remarks</mat-label>
                                 <textarea matInput placeholder="Remarks" formControlName="stock_remarks"></textarea>
                             </mat-form-field>
                       </div>

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/stock/stock.component.ts

@@ -38,7 +38,14 @@ export class StockComponent implements OnInit {
     public stockForm: FormGroup;
     private notifier: NotifierService;
     public uomData : any = [];
+    
     rawmaterial : any;
+    goodsValueInWords : any;
+    rawValueInWords : any;
+    tradedGoodsValueInWords : any;
+    rawMaterialAccess: boolean;
+    finishedGoodsAccess: boolean;
+    tradeConcernAccess: boolean;
 
     constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
                 private router: Router,
@@ -47,93 +54,207 @@ export class StockComponent implements OnInit {
                     this.form_id = 11;
                     this.notifier = notifier;
     }
+    public viewerOptions: any = {
+  navbar: false,
+  toolbar: {
+    zoomIn: 4,
+    zoomOut: 4,
+    oneToOne: 4,
+    reset: 4,
+    prev: 4,
+    play: {
+      show: 4,
+      size: 'large',
+    },
+    next: 4,
+    rotateLeft: 4,
+    rotateRight: 4,
+    flipHorizontal: 4,
+    flipVertical: 4,
+  }
+};
     ngOnInit() {
         this.initstockForm();
         this.getUOM();
-        this.setSku('data',0);
+        //this.setSku('data',0);
         let params: any = {};
+        let activityArray : any = [];
         params.pd_id = this.pdid;
         params.pd_form_id = this.form_id;
         
-        this._pd.retriveForm({pd_id:this.pdid,pd_form_id:'1'}).subscribe(value => {
+        this._pd.stockFormAccess({pd_id:this.pdid}).subscribe(value => {
-            console.log('Raw material Name',value.records.main_raw_materials);
+            console.log(value);
+            const rawMaterial = <FormArray>this.stockForm.controls['raw_materials']; 
+            const finishedGoods = <FormArray>this.stockForm.controls['finished_goods']; 
+            const tradedGoods = <FormArray>this.stockForm.controls['traded_goods'];
 
+            if (value.status == 200) {
+                console.log('value.records',value.records);
+                value.records.type_of_activity.forEach(val => {                
+                  //console.log(val);
+                  //console.log(val.type_of_activity_id);
+                  this.rawMaterialAccess = true;
+                  this.finishedGoodsAccess = true;
+                  this.tradeConcernAccess = true;
+                  if(val.type_of_activity_id == 1){
+                    rawMaterial.push(this.createRawmaterial()); 
+                    finishedGoods.push(this.createGoods()); 
+                    tradedGoods.push(this.createTradedGoods());     
+                  }
+                  else if(val.type_of_activity_id == 2){
+                    rawMaterial.push(this.createRawmaterial()); 
+                    finishedGoods.push(this.createGoods()); 
+                  }
+                  else if(val.type_of_activity_id == 3){
+                    rawMaterial.push(this.createRawmaterial()); 
+                    finishedGoods.push(this.createGoods()); 
+                  }
+                //   else  if(val.type_of_activity_id == 4){
+                //   }
+
+                });
+
+        this._pd.retriveForm({pd_id:this.pdid,pd_form_id:'1'}).subscribe(value => {
+            //console.log('Raw material Name',value.records.main_raw_materials);
 
             // const faControl = (<FormArray>this.stockForm.controls['raw_materials']).at(1);
             
-            const control = (<FormArray>this.stockForm.controls['raw_materials']).at(0);
+            //const control = (<FormArray>this.stockForm.controls['raw_materials']).at(0);
-            console.log(control);
+            //console.log(control);
             
             // this.stockForm.controls['raw_materials'].setValue(value.records.main_raw_materials);
-            if (value.status == 200) {
+            // if (value.status == 200) {
-            this.rawmaterial = value.records.main_raw_materials;
+            // this.rawmaterial = value.records.main_raw_materials;
-            }else{ this.rawmaterial = ''; }
+            // }else{ this.rawmaterial = ''; }
         })
+
         this._pd.retriveForm(params).subscribe(value => {
-            console.log('value', value);
+            //console.log('value', value);
-            const rawMaterial = <FormArray>this.stockForm.controls['raw_materials'];
+
-            const finishedGoods = <FormArray>this.stockForm.controls['finished_goods'];
             if (value.status == 200) {
+                console.log('data',value);
+                // Raw Material Access is True means., Data have to load,
+                if(this.rawMaterialAccess == true){
+
                         let result = Object.keys(value.records.raw_materials).map(function(key) {
                             return value.records.raw_materials[key];
                         });
-                let result_Goods = Object.keys(value.records.finished_goods).map(function(key) {
+
-                    return value.records.finished_goods[key];
-                });
-                this.stockForm.controls['stock_remarks'].setValue(value.records.stock_remarks);
                         if (result.length > 0) {
+                        
                             result.forEach(val => {
+                                
+                                //this.RawMaterialValidation(val.stock_observed);
                                 rawMaterial.push(this.createRawmaterial());
+                                if(val.raw_value != '' && val.raw_value != null ){ this.rawValueInWords = this._pd.convertNumberToWords(val.raw_value); }
                             });
                             this.stockForm.controls['raw_materials'].setValue(result);
                         } else {
                             rawMaterial.push(this.createRawmaterial());
                         }
+               }
+
+               // Finished Goods Access is TRUE Means., data have to load.,
+               if(this.finishedGoodsAccess == true){
+                        let result_Goods = Object.keys(value.records.finished_goods).map(function(key) {
+                            return value.records.finished_goods[key];
+                        });
+
                         if (result_Goods.length > 0) {
+                            
                             result_Goods.forEach(val => {
+                                
+                                //this.GoodsValidation(val.goods_observed);
                                 finishedGoods.push(this.createGoods());
+                                if(val.goods_value != '' && val.goods_value != null ){ this.goodsValueInWords = this._pd.convertNumberToWords(val.goods_value); }
                             });
                             this.stockForm.controls['finished_goods'].setValue(result_Goods);
                         } else {
                             finishedGoods.push(this.createGoods());
                         }
+               }
+
+               //TradeConcern Access is TRUE Means., data have to load.,
+               if(this.tradeConcernAccess == true){
+                    let result_Traded_Goods = Object.keys(value.records.finished_goods).map(function(key) {
+                        return value.records.traded_goods[key];
+                    });
+
+                    if (result_Traded_Goods.length > 0) {
+                    
+                        result_Traded_Goods.forEach(val => {
+                            
+                        
+                            tradedGoods.push(this.createTradedGoods());
+                            if(val.traded_goods_value != '' && val.traded_goods_value != null )
+                            { this.tradedGoodsValueInWords = this._pd.convertNumberToWords(val.traded_goods_value); }
+                        });
+                        this.stockForm.controls['traded_goods'].setValue(result_Traded_Goods);
                     } else {
-                rawMaterial.push(this.createRawmaterial());
+                        tradedGoods.push(this.createTradedGoods());
-                finishedGoods.push(this.createGoods());
+                    }
+                }
+
+
+                this.stockForm.controls['stock_remarks'].setValue(value.records.stock_remarks);
+                
+            } else {
+                // rawMaterial.push(this.createRawmaterial()); 
+                // finishedGoods.push(this.createGoods()); 
+                // tradedGoods.push(this.createTradedGoods()); 
             }
         })
     }
+});
+}
+
     public initstockForm(): void {
         this.stockForm = this.fb.group({
             stock_remarks: ['', Validators.compose([Validators.required])],
             raw_materials: this.fb.array([]),
-            finished_goods: this.fb.array([])
+            finished_goods: this.fb.array([]),
+            traded_goods: this.fb.array([])
         });
     }
-    setSku(sku: string, index: number) {
+    //setSku(sku: string, index: number) {
         // const faControl = 
         // (<FormArray>this.stockForm.controls['raw_materials']).at(index);
         // faControl['controls'].raw_name.setValue(sku);
-       }
+      // }
     createRawmaterial() {
         return this.fb.group({
             raw_name: ['', Validators.compose([Validators.required])],
             stock_observed:['', Validators.compose([Validators.required])],
-            raw_quantity: ['', Validators.compose([Validators.required])],
+            raw_quantity: [''],
-            raw_uom: ['', Validators.compose([Validators.required])],
+            raw_uom: [''],
             other_uom : [''],
-            raw_value: ['', Validators.compose([Validators.required])],
+            raw_value: [''],
-            rawmaterial_value: ['', Validators.compose([Validators.required])],
+            rawmaterial_value: [''],
-            is_sufficiant_raw: ['', Validators.compose([Validators.required])],
+            is_sufficiant_raw: [''],
+            rawmaterial_remarks:['']
         });
     }
     createGoods() {
         return this.fb.group({
             goods_name: ['', Validators.compose([Validators.required])],
-            goods_quantity: ['', Validators.compose([Validators.required])],
+            goods_observed: ['', Validators.compose([Validators.required])],
-            goods_value: ['', Validators.compose([Validators.required])],
+            goods_quantity: [''],
-            finished_goods_value: ['', Validators.compose([Validators.required])],
+            goods_value: [''],
-            is_sufficiant_goods: ['', Validators.compose([Validators.required])],
+            finished_goods_value: [''],
+            is_sufficiant_goods: [''],
+            finishedgoods_remarks:['']
+        });
+    }
+
+    createTradedGoods() {
+        return this.fb.group({
+            traded_goods_name: ['', Validators.compose([Validators.required])],
+            traded_goods_observed: ['', Validators.compose([Validators.required])],
+            traded_goods_quantity: [''],
+            estimated_traded_goods_value: [''],
+            traded_goods_value: [''],
+            is_sufficiant_traded_goods: [''],
+            traded_goods_remarks:['']
         });
     }
     addRawMaterials() {
@@ -152,6 +273,15 @@ export class StockComponent implements OnInit {
         const control = <FormArray>this.stockForm.controls['finished_goods'];
         control.removeAt(index);
     }
+    addTradedGoods() {
+        const control = <FormArray>this.stockForm.controls['traded_goods'];
+        control.push(this.createTradedGoods());
+    }
+    deleteTradedGoods(index) {
+        const control = <FormArray>this.stockForm.controls['traded_goods'];
+        control.removeAt(index);
+    }
+
     submitDetails() {
         if (!this.stockForm.valid) {
                 return;
@@ -160,12 +290,16 @@ export class StockComponent implements OnInit {
         records.pdid = this.pdid;
         records.formid = this.form_id;
         records.fk_createdby = this.pdid;
-        records.raw_materials = this.stockForm.controls['raw_materials'].value;
+        if(this.rawMaterialAccess == true){
+        records.raw_materials = this.stockForm.controls['raw_materials'].value; }
+        if(this.finishedGoodsAccess == true){
+        records.finished_goods = this.stockForm.controls['finished_goods'].value;}
+        if(this.tradeConcernAccess == true){
+        records.traded_goods = this.stockForm.controls['traded_goods'].value; }
         records.stock_remarks = this.stockForm.controls['stock_remarks'].value;
-        records.finished_goods = this.stockForm.controls['finished_goods'].value;
+        //console.log('data', records);
-        console.log('data', records);
         this._pd.saveForm(records).subscribe(data => {
-            console.log('data', data);
+            //console.log('data', data);
             this.notifier.notify('success', 'Saved Successfully.');
         }, error => {
             this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
@@ -201,4 +335,151 @@ export class StockComponent implements OnInit {
           event.preventDefault();
         }
       }
+
+    /** To Convert Amount into Words  */
+    inWords(e,flag:number){
+        switch(flag){
+        case 1 :
+            this.rawValueInWords = this._pd.convertNumberToWords(e.target.value);    
+            break;
+        case 2 : 
+            this.goodsValueInWords = this._pd.convertNumberToWords(e.target.value);    
+            break;
+        case 3 : 
+            this.tradedGoodsValueInWords = this._pd.convertNumberToWords(e.target.value);    
+            break;
+        default:
+            break;
+     }
+    }
+
+    // Validation Dynamically Add And Remove
+    GoodsValidation(event: any){
+        // console.log('First Time',event);
+        // console.log('First Time Value',event.value);
+
+        const control = <FormArray>this.stockForm.controls['finished_goods'];
+
+        if(event.value == 'no') {   
+
+                control.controls[0].get('goods_quantity').setValidators([Validators.required]);
+                control.controls[0].get('goods_quantity').updateValueAndValidity();
+                
+                control.controls[0].get('goods_value').setValidators([Validators.required]);
+                control.controls[0].get('goods_value').updateValueAndValidity();
+
+                control.controls[0].get('finished_goods_value').setValidators([Validators.required]);
+                control.controls[0].get('finished_goods_value').updateValueAndValidity();
+
+                control.controls[0].get('is_sufficiant_goods').setValidators([Validators.required]);
+                control.controls[0].get('is_sufficiant_goods').updateValueAndValidity();
+    
+
+        }
+        else
+        if(event.value == 'yes') {   
+
+            control.controls[0].get('goods_quantity').clearValidators();
+            control.controls[0].get('goods_quantity').updateValueAndValidity();
+            
+            control.controls[0].get('goods_value').clearValidators();
+            control.controls[0].get('goods_value').updateValueAndValidity();
+
+            control.controls[0].get('finished_goods_value').clearValidators();
+            control.controls[0].get('finished_goods_value').updateValueAndValidity();
+
+            control.controls[0].get('is_sufficiant_goods').clearValidators();
+            control.controls[0].get('is_sufficiant_goods').updateValueAndValidity();
+            
+
+        
+        }
+        
+    }
+
+    RawMaterialValidation(event: any){
+        // console.log('First Time',event);
+        // console.log('First Time Value',event.value);
+
+        const control = <FormArray>this.stockForm.controls['raw_materials'];
+
+        if(event.value == 'no') {   
+
+                control.controls[0].get('raw_quantity').setValidators([Validators.required]);
+                control.controls[0].get('raw_quantity').updateValueAndValidity();
+
+                control.controls[0].get('raw_uom').setValidators([Validators.required]);
+                control.controls[0].get('raw_uom').updateValueAndValidity();
+                
+                control.controls[0].get('raw_value').setValidators([Validators.required]);
+                control.controls[0].get('raw_value').updateValueAndValidity();
+
+                control.controls[0].get('rawmaterial_value').setValidators([Validators.required]);
+                control.controls[0].get('rawmaterial_value').updateValueAndValidity();
+
+                control.controls[0].get('is_sufficiant_raw').setValidators([Validators.required]);
+                control.controls[0].get('is_sufficiant_raw').updateValueAndValidity();
+    
+
+        }
+        else
+        if(event.value == 'yes') {   
+
+                control.controls[0].get('raw_quantity').clearValidators();
+                control.controls[0].get('raw_quantity').updateValueAndValidity();
+
+                control.controls[0].get('raw_uom').clearValidators();
+                control.controls[0].get('raw_uom').updateValueAndValidity();
+                
+                control.controls[0].get('raw_value').clearValidators();
+                control.controls[0].get('raw_value').updateValueAndValidity();
+
+                control.controls[0].get('rawmaterial_value').clearValidators();
+                control.controls[0].get('rawmaterial_value').updateValueAndValidity();
+
+                control.controls[0].get('is_sufficiant_raw').clearValidators();
+                control.controls[0].get('is_sufficiant_raw').updateValueAndValidity();
+        }
+        
+    }
+
+    TradedGoodsValidation(event: any){
+        console.log('First Time',event);
+        console.log('First Time Value',event.value);
+
+        const control = <FormArray>this.stockForm.controls['tradeded_goods'];
+
+        if(event.value == 'no') {   
+
+                control.controls[0].get('traded_goods_quantity').setValidators([Validators.required]);
+                control.controls[0].get('traded_goods_quantity').updateValueAndValidity();
+                
+                control.controls[0].get('estimated_traded_goods_value').setValidators([Validators.required]);
+                control.controls[0].get('estimated_traded_goods_value').updateValueAndValidity();
+
+                control.controls[0].get('traded_goods_value').setValidators([Validators.required]);
+                control.controls[0].get('traded_goods_value').updateValueAndValidity();
+
+                control.controls[0].get('is_sufficiant_traded_goods').setValidators([Validators.required]);
+                control.controls[0].get('is_sufficiant_traded_goods').updateValueAndValidity();
+        }
+        else
+        if(event.value == 'yes') {   
+
+            control.controls[0].get('traded_goods_quantity').clearValidators();
+            control.controls[0].get('traded_goods_quantity').updateValueAndValidity();
+            
+            control.controls[0].get('estimated_traded_goods_value').clearValidators();
+            control.controls[0].get('estimated_traded_goods_value').updateValueAndValidity();
+
+            control.controls[0].get('traded_goods_value').clearValidators();
+            control.controls[0].get('traded_goods_value').updateValueAndValidity();
+
+            control.controls[0].get('is_sufficiant_traded_goods').clearValidators();
+            control.controls[0].get('is_sufficiant_traded_goods').updateValueAndValidity();
+        
+        }
+        
+    }
+
 }

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.html

@@ -1,260 +1,134 @@
-<div style="max-width: 100vw !important;width: 100% !important;height: 95% !important;">
+<h2 mat-dialog-title class="paragraph_change">
-<form *ngIf="apiLoadFinish" [formGroup]="_supplierQuesFrom" (submit)="onSubmit()" novalidate>
-
-    <h2 mat-dialog-title class="paragraph_change">
     <div fxFlex="70" align="left" style="padding: 10px !important;">{{pageTitle}}</div>
     <div fxFlex="30" align="end" style="padding: 10px !important;">
-                    <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
+        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right"
-            
+            mat-dialog-close><mat-icon>close</mat-icon></button>
     </div>
-    </h2>
+</h2>
-    
+<div *ngIf="noRecordsFound" style="max-width: 100vw !important;width: 100% !important;height: 95% !important;">
+    <form [formGroup]="_supplierQuesFrom" (submit)="onSubmit()" novalidate>
         <mat-dialog-content>
-    
+            <mat-card *ngIf="manufacturingForm">
-            <mat-tab-group>
+                <h5 style="margin: 12px;">Manufacturing Product Details</h5>
-
+                <div formArrayName="manufacturing_details">
-                    <mat-tab label="Questions">
+                    <div *ngFor="let item of _supplierQuesFrom.controls.manufacturing_details['controls']; let i=index" [formGroupName]="i">
-                      <ng-template matTabContent>
+                        <div formArrayName="main_raw_materials">
-                          <mat-card>
+                            <div *ngFor="let items of item.controls.main_raw_materials['controls']; let l=index" [formGroupName]="l">
-                            <div fxLayout="row wrap">
+                                <mat-card style="margin: 12px;">
-                                <div fxFlex="100">     
+                                    <h6 style="margin: 12px;">Raw Material #{{l+1}}</h6>
-                                      <mat-card>
+                                    <div fxLayout="row wrap" fxLayoutGap="2px" fxLayoutAlign="start none">
-                                        <mat-card-content>
+                                        <mat-form-field style="width: 100%">
-                                            <mat-form-field fxFill>
+                                            <input matInput placeholder="Raw Material Name" formControlName="manufacturing_raw_material_name">
-                                                <textarea matInput placeholder="What are the main raw materials?(MEG Only)" formControlName="main_raw_materials"></textarea>
-                                                <mat-error *ngIf="submitted && f.main_raw_materials.hasError('required')" class="mat-text-warn">You must Include Raw Material Details.</mat-error>
                                         </mat-form-field>
-                                        </mat-card-content>
+                                        <mat-form-field style="width: 100%">
-                                      </mat-card>
+                                            <input matInput placeholder="Supplier Name" formControlName="manufacturing_supplier_name">
-                                </div>
+                                        </mat-form-field>
-                            </div>
+                                        <mat-form-field style="width: 100%">
-                            
+                                            <input matInput placeholder="Contact Person Name" formControlName="manufacturing_contact_person_name">
-                            <div fxLayout="row wrap">
-                              <div fxFlex="100">
-                                 <mat-card>
-                                    <!-- <mat-card-title></mat-card-title> -->
-                                      <mat-card-content formArrayName="supplier_details" fxFill>
-                                        <div *ngFor="let sup of _supplierQuesFrom.controls.supplier_details['controls']; let i=index" [formGroupName]="i">
-                                          
-                                              <div fxLayout="row wrap" fxLayoutGap="12px" fxLayoutAlign="start none">
-                                                  <div fxFlex="30">
-                                                    <mat-form-field class="ml-xs example-full-width">
-                                                      <input matInput placeholder="Supplier Name" formControlName="supplier_name" required>
-                                                      <!-- <mat-error *ngIf="sup.controls['supplier_name'].hasError('required') && sup.controls['supplier_name'].touched" class="mat-text-warn">Supplier Name Required.</mat-error> -->
                                         </mat-form-field>
                                     </div>
-                                                  <div fxFlex="30">
+                                    <div fxLayout="row wrap" fxLayoutGap="2px" fxLayoutAlign="start none">
-                                                    <mat-form-field class="ml-xs example-full-width">
+                                        <mat-form-field style="width: 100%">
-                                                      <input matInput placeholder="Contact Person Name" formControlName="contact_person" required>
+                                            <input matInput placeholder="Contact Person Mobile Number" formControlName="manufacturing_contact_person_mobile_number">
-                                                      <!-- <mat-error *ngIf="sup.controls['contact_person'].hasError('required') && sup.controls['contact_person'].touched" class="mat-text-warn">Contact Person Name Required.</mat-error> -->
                                         </mat-form-field>
-                                                  </div>
+                                        <mat-form-field style="width: 100%">
-                                                  <div fxFlex="30">
+                                            <mat-select (selectionChange)="selectedPM($event)" placeholder="Payment Type" formControlName="manufacturing_payment_type">
-                                                    <mat-form-field class="ml-xs example-full-width">
-                                                      <input matInput placeholder="Contact Mobile Number" formControlName="mobile_number"  (keypress)="keyPress($event)" minlength=10 maxlength=10 required>
-                                                      <!-- <mat-error *ngIf="sup.controls['mobile_number'].hasError('requried') && sup.controls['mobile_number'].touched" class="mat-text-warn">Mobile Number Requried</mat-error>  -->
-                                                      <mat-error *ngIf="sup.controls['mobile_number'].hasError('minlength') && sup.controls['mobile_number'].touched" class="mat-text-warn">Valid Mobile Number Requried</mat-error> 
-                                                      <mat-error *ngIf="sup.controls['mobile_number'].hasError('maxlength') && sup.controls['mobile_number'].touched" class="mat-text-warn">Vaild Mobile Number Requried</mat-error> 
-                                                      
-                                                    </mat-form-field>
-                                                  </div>
-                                              </div>
-                                              <div fxLayout="row wrap" fxLayoutGap="14px" fxLayoutAlign="start none">
-                                                  <div fxFlex="30">
-                                                    <mat-form-field style="width:100%">
-                                                      <mat-select (selectionChange)="selectedPM($event)" placeholder="Payment Mode" formControlName="payment_mode" required>
                                                 <mat-option *ngFor="let pm of m_paymentModeType" [value]="pm.id">{{ pm.name }}</mat-option>
                                             </mat-select>
                                         </mat-form-field>
-                                                  </div>
+                                        <mat-form-field style="width: 100%" *ngIf="items.get('manufacturing_payment_type').value == 3">
-                                                  <div *ngIf="sup.get('payment_mode').value == 1 ||  sup.get('payment_mode').value == 3" fxFlex="30">
+                                            <input matInput placeholder="Number of days of credit provided" formControlName="manufacturing_credit_days">
-                                                    <mat-form-field class="ml-xs example-full-width" >
-                                                      <input matInput placeholder="% of immediate / Advance Payment Purchase to Total Purchase?" formControlName="per_of_immediate_advance_payment" type="number" min="0">
                                         </mat-form-field>
                                     </div>
-                                                  <div *ngIf="sup.get('payment_mode').value == 2  || sup.get('payment_mode').value == 3" fxFlex="30">
+                                    <div align="end">
-                                                    <mat-form-field class="ml-xs example-full-width">
+                                        <span *ngIf="item.controls.main_raw_materials.controls.length > 1" (click)="removeRawMaterials(l)">
-                                                      <input matInput placeholder="Credit Period" formControlName="credit_period">                
-                                                    </mat-form-field>
-                                                  </div>
-                                              </div>
-                                              <div fxLayout="row" fxLayoutGap="14px" style="text-align:center;">
-                                                 <!-- <div fxFlex="30">
-                                                    <mat-form-field style="width:100%"> 
-                                                      <mat-select (selectionChange)="selectedFreqPurchase($event)" placeholder="Frequency of Purchase" formControlName="frequency_of_purchase" required>
-                                                        <mat-option *ngFor="let feq of m_freqOfPurchase" [value]="feq.frequency_id">{{ feq.name }}</mat-option>
-                                                      </mat-select>
-                                                     
-                                                     </mat-form-field>
-                                                  </div>
-                                                  <div *ngIf="sup.get('frequency_of_purchase').value == 8" fxFlex="30">
-                                                    <mat-form-field class="ml-xs example-full-width">
-                                                      <input matInput placeholder="Others Details" formControlName="freq_purchase_others_text_value">
-                                                    </mat-form-field>
-                                                  </div>--> 
-                                                  <!-- <div fxFlex="30" style="text-align:center;"> -->
-                                                         <span *ngIf="_supplierQuesFrom.controls.supplier_details.controls.length > 1" (click)="removeLanguage(i)">
                                             <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" color="primary" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
                                         </span>
-                                                    <!-- </div> -->
                                     </div>
-                                        </div>  
-                                      
-                                       
-                                      </mat-card-content>
-
-                                      <mat-card-actions align="end">
-                                            <!-- <span *ngIf="_supplierQuesFrom.controls.supplier_details.controls.length > 1" (click)="removeLanguage(i)">
-                                                <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" color="primary" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
-                                            </span> -->
-                                      </mat-card-actions>
-                                        
                                 </mat-card>
                             </div>
                         </div>
-                            <mat-dialog-actions>            
+                        <div>
+                            <mat-form-field style="width: 100%">
+                                <input matInput placeholder="% of total manufacturing raw materials credit values" formControlName="main_raw_materials_total_payments_percent_on_credit"
+                                    type="number">
+                            </mat-form-field>
                             <div fxFlex="100" align="end">
                                 <button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Supplier Details" matTooltipPosition="above"
-                                            class="mr-1 mb-1 hover-icon" (click)="addSupplierDetails($event); false"><mat-icon>add</mat-icon></button>
+                                    class="mr-1 mb-1 hover-icon" (click)="addMoreRawMaterials($event); false"><mat-icon>add</mat-icon></button>
+                            </div>
+                        </div>
+                    </div>
                 </div>
-                            </mat-dialog-actions>
             </mat-card>
-                      </ng-template>
+            <mat-card *ngIf="tradingForm">
-                    </mat-tab>
+                <h5 style="margin: 12px;">Trading Product Details</h5>
-
+                <div formArrayName="trade_details">
-                    <mat-tab label="Docs">
+                    <div *ngFor="let item of _supplierQuesFrom.controls.trade_details['controls']; let i=index" [formGroupName]="i">
-                      <ng-template matTabContent>
+                        <div formArrayName="trading_products">
-                                                          <div fxLayout="row wrap">
+                            <div *ngFor="let items of item.controls.trading_products['controls']; let l=index" [formGroupName]="l">
-                                                                <div fxFlex="25" class="m-gap p-gap">
+                                <mat-card style="margin: 12px;">
-                                                                    <div class="p-list-main mb-2">
+                                    <h6 style="margin: 12px;">Trading Product #{{l+1}}</h6>
-                                                                        <div class="p-list">
+                                    <div fxLayout="row wrap" fxLayoutGap="2px" fxLayoutAlign="start none">
-                    
+                                        <mat-form-field style="width: 100%">
-                                                                            <div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
+                                            <input matInput placeholder="Trade Product Name" formControlName="trade_product_name">
-                                                                            <div class="bottom">
+                                        </mat-form-field>
-                                                                                <div class="left">
+                                        <mat-form-field style="width: 100%">
-                                                                                    <div class="details">
+                                            <input matInput placeholder="Supplier Name" formControlName="trade_supplier_name">
-                                                                                        <small>Nivi SKM</small>
+                                        </mat-form-field>
-                                                                                        <!-- <p>{{docs.pd_document_name}}</p> -->
+                                        <mat-form-field style="width: 100%">
+                                            <input matInput placeholder="Contact Person Name" formControlName="trade_product_contact_person_name">
+                                        </mat-form-field>
                                     </div>
-                                                                                    <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
+                                    <div fxLayout="row wrap" fxLayoutGap="2px" fxLayoutAlign="start none">
+                                        <mat-form-field style="width: 100%">
+                                            <input matInput placeholder="Contact Person Mobile Number" formControlName="trade_product_contact_person_mobile_number">
+                                        </mat-form-field>
+                                        <mat-form-field style="width: 100%">
+                                            <mat-select (selectionChange)="selectedPM($event)" placeholder="Payment Type" formControlName="trade_product_payment_type">
+                                                <mat-option *ngFor="let pm of m_paymentModeType" [value]="pm.id">{{ pm.name }}</mat-option>
+                                            </mat-select>
+                                        </mat-form-field>
+                                        <mat-form-field style="width: 100%" *ngIf="items.get('trade_product_payment_type').value == 3">
+                                            <input matInput placeholder="Number of days of credit provided" formControlName="trade_product_credit_days">
+                                        </mat-form-field>
+                                    </div>
+                                    <div align="end">
+                                        <span *ngIf="item.controls.trading_products.controls.length > 1" (click)="removeTradingProduct(l)">
+                                                <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" color="primary" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
+                                                </span>
+                                    </div>
+                                </mat-card>
+                            </div>
+                        </div>
+                        <div>
+                            <mat-form-field style="width: 100%">
+                                <input matInput placeholder="% of total trading product credit values" formControlName="trading_products_total_payments_percent_on_credit"
+                                    type="number">
+                            </mat-form-field>
+                            <div fxFlex="100" align="end">
+                                <button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Supplier Details" matTooltipPosition="above"
+                                    class="mr-1 mb-1 hover-icon" (click)="addMoretradeProduct($event); false"><mat-icon>add</mat-icon></button>
                             </div>
                         </div>
                     </div>
                 </div>
-                                                                </div>
+            </mat-card>
-
+            <mat-card *ngIf="serviceProviderForm">
-                                                                <div fxFlex="25" class="m-gap p-gap">
+                <h5 style="margin: 12px;">Service Provider Product Details</h5>
-                                                                        <div class="p-list-main mb-2">
+                <div style="text-align: center; margin: 12px;">Service Provider Details Not applicable here !!</div>
-                                                                            <div class="p-list">
+            </mat-card>
-                        
-                                                                                <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                <div class="bottom">
-                                                                                    <div class="left">
-                                                                                        <div class="details">
-                                                                                            <small>Nivi SKM</small>
-                                                                                            <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                        </div>
-                                                                                        <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
-                                                                                    </div>
-                                                                                </div>
-                                                                            </div>
-                                                                        </div>
-                                                                </div>
-
-                                                                <div fxFlex="25" class="m-gap p-gap">
-                                                                            <div class="p-list-main mb-2">
-                                                                                <div class="p-list">
-                            
-                                                                                    <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                    <div class="bottom">
-                                                                                        <div class="left">
-                                                                                            <div class="details">
-                                                                                                <small>Nivi SKM</small>
-                                                                                                <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                            </div>
-                                                                                            <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
-                                                                                        </div>
-                                                                                    </div>
-                                                                                </div>
-                                                                            </div>
-                                                                </div>
-
-                                                                <div fxFlex="25" class="m-gap p-gap">
-                                                                                <div class="p-list-main mb-2">
-                                                                                    <div class="p-list">
-                                
-                                                                                        <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                        <div class="bottom">
-                                                                                            <div class="left">
-                                                                                                <div class="details">
-                                                                                                    <small>Nivi SKM</small>
-                                                                                                    <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                                </div>
-                                                                                                <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
-                                                                                            </div>
-                                                                                        </div>
-                                                                                    </div>
-                                                                                </div>
-                                                                </div>
-
-                                                                <div fxFlex="25" class="m-gap p-gap">
-                                                                                    <div class="p-list-main mb-2">
-                                                                                        <div class="p-list">
-                                    
-                                                                                            <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                            <div class="bottom">
-                                                                                                <div class="left">
-                                                                                                    <div class="details">
-                                                                                                        <small>Nivi SKM</small>
-                                                                                                        <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                                    </div>
-                                                                                                    <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
-                                                                                                </div>
-                                                                                            </div>
-                                                                                        </div>
-                                                                                    </div>
-                                                                </div>
-                                                                <div fxFlex="25" class="m-gap p-gap">
-                                                                                        <div class="p-list-main mb-2">
-                                                                                            <div class="p-list">
-                                        
-                                                                                                <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
-                                                                                                <div class="bottom">
-                                                                                                    <div class="left">
-                                                                                                        <div class="details">
-                                                                                                            <small>Nivi SKM</small>
-                                                                                                            <!-- <p>{{docs.pd_document_name}}</p> -->
-                                                                                                        </div>
-                                                                                                        <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
-                                                                                                    </div>
-                                                                                                </div>
-                                                                                            </div>
-                                                                                        </div>
-                                                                </div>
-                    
-                                                            </div>
-                                            
-                      </ng-template>
-                    </mat-tab>
-                  
-            </mat-tab-group>
-    
         </mat-dialog-content>
-
         <mat-dialog-actions>
             <div fxFlex="60" class="pb-0 text-sm-left" align="left">
-                    <!-- <mat-form-field appearance="outline" style="width: 100%">
+                <mat-form-field appearance="outline" style="width: 100%">
                     <mat-label>Remarks</mat-label>
-                      <textarea matInput placeholder="Remarks" formControlName="personal_info_form_remark" required></textarea>
+                    <textarea matInput placeholder="Remarks" formControlName="supplier_info_form_remark"></textarea>
-                    </mat-form-field> -->
+                </mat-form-field>
             </div>
             <div fxFlex="40" align="end">
-           
                 <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>
-            <!----<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>-->
             </div>
         </mat-dialog-actions>
-    
+    </form>
-</form>
 </div>
-<notifier-container></notifier-container>

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.scss

@@ -17,6 +17,9 @@
     .mat-card-actions { 
       background-color: white;
     }
+     ::ng-deep .cdk-global-overlay-wrapper{
+        justify-content: center !important;
+}
   
     mat-form-field {
       margin: 0 2%;

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.ts

@@ -3,7 +3,7 @@ import {
   Component,
   OnInit,
   Inject,
-  Output,Input
+  Output, Input
 } from '@angular/core';
 
 import {
@@ -32,16 +32,16 @@ import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
 
 export class SupplierInfoComponent implements OnInit {
 
-  pageTitle: string ="Supplier Details";
+  pageTitle: string = "Supplier Details";
 
   //@Input() pdid: number;
-  pdid : string;
+  pdid: string;
-  form_id:number;
+  form_id: number;
 
   public _supplierQuesFrom: FormGroup;
   public submitted = false;
 
-  public m_paymentModeType= [];
+  public m_paymentModeType = [];
   private notifier: NotifierService;
 
   constructor(
@@ -53,14 +53,279 @@ export class SupplierInfoComponent implements OnInit {
     this.form_id = 1;
     this.notifier = notifier;
   }
+  public viewerOptions: any = {
+    navbar: false,
+    toolbar: {
+      zoomIn: 4,
+      zoomOut: 4,
+      oneToOne: 4,
+      reset: 4,
+      prev: 4,
+      play: {
+        show: 4,
+        size: 'large',
+      },
+      next: 4,
+      rotateLeft: 4,
+      rotateRight: 4,
+      flipHorizontal: 4,
+      flipVertical: 4,
+    }
+  };
 
+  noRecordsFound: Boolean = false;
   ngOnInit() {
+
+    this.pdTrigerService.getTypeofActivityForSuppliedInfoForm(this.pdid).subscribe(data => {
+      if(data.dataStatus){
+      // let datas = {
+      //   "profession_name": "Others",
+      //   "type_of_activity": [
+      //     {
+      //       "type_of_activity_id": 1,
+      //       "name": "Manufacturing Details"
+      //     },
+      //     {
+      //       "type_of_activity_id": 2,
+      //       "name": "Retail trading"
+      //     },
+      //     {
+      //       "type_of_activity_id": 4,
+      //       "name": "Service Provider"
+      //     }
+      //   ]
+      // };
+      let datas = data.records;
+      this.initFormLoadDetails(datas.type_of_activity);
+      }else {
+        this.notifier.notify('warning', 'No Category Records Found.!');
+        this.noRecordsFound = false;
+      }
+    }, err => {
+      this.notifier.notify('warning', 'No Category Records Found.!');
+      this.noRecordsFound = false;
+    })
+
     //  this.getM_FreqOfPurchase();
     this.getM_PaymentModeType();
-    this.getPdSupplierFormDetails();
+    // this.getPdSupplierFormDetails();
   }
 
-// ==================
+
+  serviceProviderForm: Boolean = false;
+  initFormLoadDetails(record) {
+    // alert(JSON.stringify(record));
+     this.pdTrigerService.getPDFormDetailsWithID(this.pdid, '1').subscribe(
+      data => {
+        if(data.dataStatus){
+            let dataForm = data.records;
+            if(dataForm !== undefined) {
+                this._supplierQuesFrom = this._formBuilder.group({
+                  pdid: [this.pdid],
+                  formid: ['1'],
+                  manufacturing_details: this._formBuilder.array([this.manufacturingFormCreation(record)]),
+                  trade_details: this._formBuilder.array([this.tradingFormCreation(record)]),
+                  supplier_info_form_remark: [dataForm.supplier_info_form_remark || null]
+                  // wholesale_trade_details: this._formBuilder.array([this.tradingFormCreation(record)]),
+                });
+                let arr = record.filter(data => data.type_of_activity_id == 1);
+                if(arr.length > 0) {
+                  let api_main_raw_materials = Object.keys(dataForm.main_raw_materials).map(function (key) {
+                    return dataForm.main_raw_materials[key];
+                  });
+                  this.initManufacturingProductsDetails(api_main_raw_materials);
+                  this._supplierQuesFrom.controls['manufacturing_details']['controls'][0].controls['main_raw_materials_total_payments_percent_on_credit'].setValue(dataForm.main_raw_materials_total_payments_percent_on_credit || null);
+                }
+                let arr1 = record.filter(data => data.type_of_activity_id == 2 || 3);
+                if(arr1.length > 0) {
+                  let api_trading_products = Object.keys(dataForm.trading_products).map(function (key) {
+                    return dataForm.trading_products[key];
+                  });
+                  this.initTradingProductsDetails(api_trading_products);
+                  this._supplierQuesFrom.controls['trade_details']['controls'][0].controls['trading_products_total_payments_percent_on_credit'].setValue(dataForm.trading_products_total_payments_percent_on_credit || null);
+                }
+                this.noRecordsFound = true;
+            } else {
+                this._supplierQuesFrom = this._formBuilder.group({
+                    pdid: [this.pdid],
+                    formid: ['1'],
+                    manufacturing_details: this._formBuilder.array([this.manufacturingFormCreation(record)]),
+                    trade_details: this._formBuilder.array([this.tradingFormCreation(record)]),
+                    supplier_info_form_remark: [dataForm.supplier_info_form_remark || null]
+                  // wholesale_trade_details: this._formBuilder.array([this.tradingFormCreation(record)]),
+                });
+                  let arr = record.filter(data => data.type_of_activity_id == 1);
+                  if(arr.length > 0) {
+                    this.initManufacturingProductsDetails(null);
+                    this._supplierQuesFrom.controls['manufacturing_details']['controls'][0].controls['main_raw_materials_total_payments_percent_on_credit'].setValue(null);
+                  }
+                  let arr1 = record.filter(data => data.type_of_activity_id == 2 || 3);
+                  if(arr1.length > 0) {
+                    this.initTradingProductsDetails(null);
+                    this._supplierQuesFrom.controls['trade_details']['controls'][0].controls['trading_products_total_payments_percent_on_credit'].setValue(dataForm.trading_products_total_payments_percent_on_credit || null);
+                  }
+                  this.noRecordsFound = true;
+            }
+                let arr2 = record.filter(data => data.type_of_activity_id == 4);
+                  if(arr2.length > 0) {
+                 this.serviceProviderForm = true;
+                }
+        } else {
+            this._supplierQuesFrom = this._formBuilder.group({
+                    pdid: [this.pdid],
+                    formid: ['1'],
+                    manufacturing_details: this._formBuilder.array([this.manufacturingFormCreation(record)]),
+                    trade_details: this._formBuilder.array([this.tradingFormCreation(record)]),
+                    supplier_info_form_remark: []
+                  // wholesale_trade_details: this._formBuilder.array([this.tradingFormCreation(record)]),
+                });
+                  let arr = record.filter(data => data.type_of_activity_id == 1);
+                  if(arr.length > 0) {
+                    this.initManufacturingProductsDetails(null);
+                    this._supplierQuesFrom.controls['manufacturing_details']['controls'][0].controls['main_raw_materials_total_payments_percent_on_credit'].setValue(null);
+                  }
+                  let arr1 = record.filter(data => data.type_of_activity_id == 2 || 3);
+                  if(arr1.length > 0) {
+                    this.initTradingProductsDetails(null);
+                    this._supplierQuesFrom.controls['trade_details']['controls'][0].controls['trading_products_total_payments_percent_on_credit'].setValue(null);
+                  }
+                  let arr2 = record.filter(data => data.type_of_activity_id == 4);
+                  if(arr2.length > 0) {
+                  this.serviceProviderForm = true;
+                }
+            this.noRecordsFound = true;
+        }
+      }, err => {
+
+      }
+     );
+    }
+
+
+  manufacturingForm: Boolean = false;
+  manufacturingFormCreation(val) {
+    let arr = val.filter(data => data.type_of_activity_id == 1);
+    if (arr.length > 0) {
+      this.manufacturingForm = true;
+        return this._formBuilder.group({
+          main_raw_materials: this._formBuilder.array([]),
+          main_raw_materials_total_payments_percent_on_credit: []
+        })
+      // }
+    } else {
+      return;
+    }
+  }
+
+  tradingForm: Boolean = false;
+  tradingFormCreation(val) {
+    let arr = val.filter(data => data.type_of_activity_id == 2 || 3);
+    if (arr.length > 0) {
+      this.tradingForm = true;
+      return this._formBuilder.group({
+        trading_products: this._formBuilder.array([]),
+        trading_products_total_payments_percent_on_credit: []
+      });
+    } else {
+      return;
+    }
+  }
+
+  initManufacturingProductsDetails(datas) {
+      const control = <FormArray>this._supplierQuesFrom.controls['manufacturing_details']['controls'][0].controls['main_raw_materials'];
+       if(datas === null){
+         control.push(this.initManufacturingProducts(null));
+       } else {
+         for (let val of datas) {
+            control.push(this.initManufacturingProducts(val));
+          }
+       }
+  }
+
+  initManufacturingProducts(records) {
+    if(records === null) {
+      return this._formBuilder.group({
+        manufacturing_raw_material_name: [''],
+        manufacturing_supplier_name: [''],
+        manufacturing_contact_person_name: [''],
+        manufacturing_contact_person_mobile_number: [''],
+        manufacturing_payment_type: [''],
+        manufacturing_credit_days: [''],
+        manufacturing_frequency_of_purchase: [''],
+      })
+    } else {
+        return this._formBuilder.group({
+        manufacturing_raw_material_name: [records.manufacturing_raw_material_name || null],
+        manufacturing_supplier_name: [records.manufacturing_supplier_name || null],
+        manufacturing_contact_person_name: [records.manufacturing_contact_person_name || null],
+        manufacturing_contact_person_mobile_number: [records.manufacturing_contact_person_mobile_number || null],
+        manufacturing_payment_type: [records.manufacturing_payment_type || null],
+        manufacturing_credit_days: [records.manufacturing_credit_days || null],
+        manufacturing_frequency_of_purchase: [records.manufacturing_frequency_of_purchase || null],
+      })
+    }
+  }
+
+  initTradingProductsDetails(datas) {
+    const control = <FormArray>this._supplierQuesFrom.controls['trade_details']['controls'][0].controls['trading_products'];
+      if(datas === null){
+        control.push(this.initTradingProducts(null));
+      } else {
+      for (let val of datas) {
+        control.push(this.initTradingProducts(val));
+      }
+      }
+  }
+
+    initTradingProducts(records) {
+          if(records === null) {
+              return this._formBuilder.group({
+                    trade_product_name: [''],
+                    trade_supplier_name: [''],
+                    trade_product_contact_person_name: [''],
+                    trade_product_contact_person_mobile_number: [''],
+                    trade_product_payment_type: [''],
+                    trade_product_frequency_of_purchase: [''],
+                    trade_product_credit_days: [''],
+                  })
+          } else {
+             return this._formBuilder.group({
+                    trade_product_name: [records.trade_product_name],
+                    trade_supplier_name: [records.trade_supplier_name],
+                    trade_product_contact_person_name: [records.trade_product_contact_person_name],
+                    trade_product_contact_person_mobile_number: [records.trade_product_contact_person_mobile_number],
+                    trade_product_payment_type: [records.trade_product_payment_type],
+                    trade_product_frequency_of_purchase: [records.trade_product_frequency_of_purchase],
+                    trade_product_credit_days: [records.trade_product_credit_days],
+                  })
+          }
+    }
+
+  addMoreRawMaterials(e): void {
+    // e.stropPropagation();
+    const control = <FormArray>this._supplierQuesFrom.controls['manufacturing_details']['controls'][0].controls['main_raw_materials'];
+    // console.log(control);
+    control.push(this.initManufacturingProducts(null));
+  }
+
+  removeRawMaterials(inx): void {
+    const control = <FormArray>this._supplierQuesFrom.controls['manufacturing_details']['controls'][0].controls['main_raw_materials'];
+    control.removeAt(inx);
+  }
+
+  addMoretradeProduct(e): void {
+    // e.stropPropagation();
+    const control = <FormArray>this._supplierQuesFrom.controls['trade_details']['controls'][0].controls['trading_products'];
+    // console.log(control);
+    control.push(this.initTradingProducts(null));
+  }
+
+  removeTradingProduct(inx): void {
+    const control = <FormArray>this._supplierQuesFrom.controls['trade_details']['controls'][0].controls['trading_products'];
+    control.removeAt(inx);
+  }
+
+  // ==================
 
   //getM_FreqOfPurchase() {
   // this.pdTrigerService.getAllMasterDatas('FREQUENCY').subscribe(
@@ -87,122 +352,7 @@ export class SupplierInfoComponent implements OnInit {
   }
 
 
-// ==================
+  // ==================
-
-apiLoadFinish: boolean = false;
-  getPdSupplierFormDetails() {
-    this.pdTrigerService.getPDFormDetailsWithID(this.pdid, '1').subscribe(
-          data => {
-            if (data) {
-                if(data.dataStatus){
-                  this.formLoadData(data.records)
-                } else {
-                  this.formLoadData(null)
-                }
-                this.apiLoadFinish = true;
-            } else {
-              // this.noRecordFound = true;
-            }
-      }
-    );
-  }
-
-  formLoadData(val) {
-    if(val !== null) {
-      let value = val;
-       this._supplierQuesFrom = this._formBuilder.group({
-          pdid: [this.pdid],
-          formid: ['1'],
-          main_raw_materials: [value.main_raw_materials, Validators.compose([Validators.required])],
-          supplier_details: this._formBuilder.array([
-            // this.initDetails(),
-        ])
-      });
-      this.addSupplierDetailsWithData(value.supplier_details);
-    } else {
-      this._supplierQuesFrom = this._formBuilder.group({
-          pdid: [this.pdid],
-          formid: ['1'],
-          main_raw_materials: [null, Validators.compose([Validators.required])],
-          supplier_details: this._formBuilder.array([
-            this.initDetails(),
-        ])
-      });
-    }
-  }
-
-   // convenience getter for easy access to form fields
-  get f() { return this._supplierQuesFrom.controls; }
-
-  // Dynamic Form field creation Functionality : START ===>
-  initDetails() {
-    return this._formBuilder.group({
-      supplier_name: ['', Validators.compose([Validators.required])],
-      contact_person: ['', Validators.compose([Validators.required])],
-      mobile_number: ['', Validators.compose([Validators.required, Validators.minLength(10), Validators.maxLength(10)])],
-      payment_mode: ['',  Validators.compose([Validators.required])],
-      per_of_immediate_advance_payment:[''],
-      credit_period:[''],
-     // frequency_of_purchase: ['', Validators.compose([Validators.required])],
-     // freq_purchase_others_text_value: ['']
-    });
-  }
-
-  initDetailsWithdata(data) {
-    return this._formBuilder.group({
-      supplier_name: [data.supplier_name, Validators.compose([Validators.required])],
-      contact_person: [data.contact_person, Validators.compose([Validators.required])],
-      mobile_number: [data.mobile_number, Validators.compose([Validators.required, Validators.minLength(10), Validators.maxLength(10)])],
-      payment_mode: [data.payment_mode,  Validators.compose([Validators.required])],
-      per_of_immediate_advance_payment:[data.per_of_immediate_advance_payment || ''],
-      credit_period:[data.credit_period || ''],
-      //frequency_of_purchase: [data.frequency_of_purchase, Validators.compose([Validators.required])],
-      //freq_purchase_others_text_value: [data.freq_purchase_others_text_value || '']
-    });
-  }
-
-  addSupplierDetailsWithData(supp_data) {
-      var result = Object.keys(supp_data).map(function(key) {
-        return supp_data[key];
-      });
-      if (result.length > 0) {
-      for (let val of result) {
-        let vals = {
-          supplier_name: val.supplier_name,
-          contact_person: val.contact_person,
-          mobile_number: val.mobile_number,
-          payment_mode: val.payment_mode,
-          per_of_immediate_advance_payment: val.per_of_immediate_advance_payment,
-          credit_period: val.credit_period
-         // frequency_of_purchase: val.frequency_of_purchase,
-         // freq_purchase_others_text_value: val.freq_purchase_others_text_value
-        };
-        const control = <FormArray>this._supplierQuesFrom.controls['supplier_details'];
-        control.push(this.initDetailsWithdata(vals));
-      }
-    }
-  }
-
-  addSupplierDetails(e) {
-    const control = <FormArray>this._supplierQuesFrom.controls['supplier_details'];
-    control.push(this.initDetails());
-  }
-  removeLanguage(i: number) {
-    const control = <FormArray>this._supplierQuesFrom.controls['supplier_details'];
-    control.removeAt(i);
-  }
-
-  public paymentModeTextBox: number;
-  selectedPM(e) {
-    this.paymentModeTextBox = e.value;
-    // this.f.supplier_details.controls.get('payment_mode_value');
-  }
- 
-  public freqPurchaseTextBox: number;
-  selectedFreqPurchase(e){
-     this.freqPurchaseTextBox = e.value;
-  }
-
 
   /** To Save/Edited Popup Data */
   onSubmit() {
@@ -215,7 +365,7 @@ apiLoadFinish: boolean = false;
 
       //To Remove The "Null" With Key also
       Object.keys(answerFormValues).forEach((key) => (answerFormValues[key] == null) && delete answerFormValues[key]);
-      // alert(JSON.stringify(answerFormValues));
+      console.log(JSON.stringify(answerFormValues));
       //Add BRANCH data with help Service File
       this.pdTrigerService.savePDFormDetailsWithID(answerFormValues).subscribe(
         dataresult => {
@@ -234,8 +384,8 @@ apiLoadFinish: boolean = false;
           // this.errorMessage = "Something Wents Wrong Try Again !";
           // this.dialogRef.close();
         });
-      //After Saving the BRANCH data then popup close
+      // //After Saving the BRANCH data then popup close
-      // this.dialogRef.close();
+      // // this.dialogRef.close();
     }
   }
 

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.html

@@ -14,11 +14,16 @@
                  </div>
                 </mat-card-title>
     </mat-card-header>
-    <mat-card-content>
+    <mat-card-content style="max-height:100% !important;">
         <div fxLayout="row wrap" class="child_mat_card">
-        <mat-card fxFlex.xs="90" fxFlex.sm="45" fxFlex.md="30" fxFlex.lg="23" fxFlex.xl="23" *ngFor="let formButton of categoryFormButtons;let quesIndex=index" [ngStyle]="{'background-color':formButton.isAnswered == false ? '#827f7f' : '#4caf50' ,'color':'#fff'}" (click)="OnSelectDirectForms(formButton)">
+        <mat-card fxFlex.xs="80" fxFlex.sm="45" fxFlex.md="30" fxFlex.lg="23" fxFlex.xl="23" *ngFor="let formButton of categoryFormButtons;let quesIndex=index" [ngStyle]="{'background-color':formButton.isAnswered == false ? '#827f7f' : '#4caf50' ,'color':'#fff'}" (click)="OnSelectDirectForms(formButton)">
             <mat-card-header>
-                <mat-card-title>{{ (formButton.form_name.length>17)? (formButton.form_name | slice:0:17)+'..':(formButton.form_name) }}</mat-card-title>
+                    <div fxFlex="90" align="left" style="padding:15px !important;">
+                        {{ (formButton.form_name.length>17)? (formButton.form_name | slice:0:17)+'..':(formButton.form_name) }}
+                    </div>                    
+                    <div fxFlex="20" align="end">
+                        <span style="padding: 3px;" class="menu-badge mat-purple ng-star-inserted" align="center">Q{{formButton.pd_form_order}}</span>
+                    </div>            
                 <!-- <mat-card-subtitle>Karthi Kms</mat-card-subtitle> -->
             </mat-card-header>
         </mat-card>                                                                                                                                          

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.scss

@@ -11,6 +11,16 @@ mat-card.parent_mat_card > {
         max-height:52vh;
         overflow:auto;  
     }
+    .user-thumb {
+    position: absolute;
+    bottom: -35%;
+    // img {
+    //     border: 5px solid $white;
+    //     border-radius: 100%;
+    //     height: 75px;
+    //     width: 75px;
+    // }
+}
     // @media only screen and (max-width:319px)  { 
     //     mat-card-content {
     //         max-height: 350px;

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.ts

@@ -25,6 +25,8 @@ import {LenderRepresentativeComponent} from './forms/lender-representative/lende
 import {LoanDetailsComponent} from './forms/loan-details/loan-details.component';
 import {GeneralInfoComponent} from './forms/general-info/general-info.component';
 import {NeighbourHoodComponent} from './forms/neighbour-hood/neighbour-hood.component';
+import {FinalRemarksComponent} from './forms/final-remarks/final-remarks.component';
+
 @Component({
     selector: 'app-start-pd',
     templateUrl: './start-pd.component.html',
@@ -897,6 +899,18 @@ pdFullDetails:any=[];
               //  this.notifier.notify('success', 'Successfully allocated.!');
               this.loadTemplates(this.startPD);
               });
+        }else if(this.selectedFormsCategory.form_id==20){
+            const generaldialogRef = this.dialog.open(FinalRemarksComponent, {
+                data: this.pdFullDetails,
+                position: { right: '0'},
+                width:'80%',
+                disableClose: true
+              });
+              generaldialogRef.afterClosed()
+              .subscribe(dataresult => {
+              //  this.notifier.notify('success', 'Successfully allocated.!');
+              this.loadTemplates(this.startPD);
+              });
         }
        
         

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.html

@@ -5,7 +5,7 @@
       <mat-card-content style="background:#e00201;">
           <div fxLayout="row"  fxLayoutAlign="start center" class="filter-header">
               <div  *ngFor="let master of pdMasterData" class="ml-xs mr-xs" fxFlex="45" style="color:#fff;">
-                <h4>{{master.lender_full_name}} </h4>
+                <h4>{{master.lender_full_name}} - {{master.branch_name}}</h4>
                 <span *ngIf="master.lender_applicant_id"> {{master.lender_applicant_id}}  -  </span>  {{master.pd_date_of_initiation}}
               </div> 
                <div *ngFor="let master of pdMasterData" class="ml-xs mr-xs pt-1"   fxFlex="55" style="text-align:right;" >
@@ -75,7 +75,7 @@
                    <button mat-raised-button mat-button-sm mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="editPdApplicant(pdApplicantData)"><mat-icon>edit</mat-icon></button>
                  </div>
              <mat-card-header>
-                 <mat-card-title>Applicants</mat-card-title>
+                 <mat-card-title style="color:red !important;">Applicants</mat-card-title>
                </mat-card-header>
 
              <mat-card-content *ngIf="pdApplicantData.length>0; else noApplicant">
@@ -101,7 +101,7 @@
                     <button mat-raised-button mat-button-sm mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="editAdditionalRequirement(pdAdditionalReqData)"><mat-icon>edit</mat-icon></button>
                   </div>
               <mat-card-header>
-                  <mat-card-title>Additional Requirements</mat-card-title>
+                  <mat-card-title style="color:red !important;">Additional Requirements</mat-card-title>
                 </mat-card-header>
  
               <mat-card-content *ngIf="pdAdditionalReqData.length>0; else noRequirement">
@@ -123,7 +123,7 @@
                 <!-- pd documents card -->
                 <mat-expansion-panel *ngIf="pdDocumentsData.length>0; else nodocument">
                    <mat-expansion-panel-header>
-                     <mat-panel-title class="text-xs-left">
+                     <mat-panel-title class="text-xs-left" style="color:red !important;">
                       <h6 class="mt-0">Documents</h6>
                      </mat-panel-title>                       
                    </mat-expansion-panel-header>
@@ -145,7 +145,7 @@
                    <!--pd logs card  -->
                      <mat-expansion-panel *ngIf="masterPdLogsData.length>0; else nohistory">
                          <mat-expansion-panel-header>
-                           <mat-panel-title class="text-xs-left">
+                           <mat-panel-title class="text-xs-left" style="color:red !important;">
                             <h6 class="mt-0"> PD History</h6>
                            </mat-panel-title>
                          

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.scss

@@ -6,3 +6,6 @@
 .minheight {
     min-height: 100%;
 }
+::ng-deep .body-container{
+    padding: 0rem !important;
+}

ng6-seed/src/app/personal-discussion/manage-pd/manage-pd.module.ts

@@ -15,7 +15,7 @@ import {
     MatToolbarModule, MatSelectModule, MatListModule, MatGridListModule, 
     MatTabsModule, MatCheckboxModule,
     MatBadgeModule, MatExpansionModule, MatStepperModule, MatSidenavModule,
-    MatMenuModule, MatButtonToggleModule,
+    MatMenuModule, MatButtonToggleModule,MatChipsModule,
     MatAutocompleteModule, MatDatepickerModule } from '@angular/material';
 
 import {MatSlideToggleModule} from '@angular/material/slide-toggle';
@@ -80,6 +80,9 @@ import { ModelEditPdReportComponent } from './list-pd/pd-report/model-edit-pd-re
 import { OtherApplicantDetailsComponent } from './list-pd/start-pd/forms/other-applicant-details/other-applicant-details.component';
 import { NeighbourHoodComponent } from './list-pd/start-pd/forms/neighbour-hood/neighbour-hood.component';
 
+// import ngx-viewer module
+import { NgxViewerModule } from 'ngx-viewer';
+import { FinalRemarksComponent } from './list-pd/start-pd/forms/final-remarks/final-remarks.component';
 
 /**
  * Custom angular notifier options
@@ -257,7 +260,7 @@ const pdCustomNotifierOptions: NotifierOptions = {
     //     AgmCoreModule.forRoot({apiKey: 'AIzaSyBtdO5k6CRntAMJCF-H5uZjTCoSGX95cdk'}), OwlDateTimeModule,
     //     OwlNativeDateTimeModule,
     // ],
-    declarations: [RentalInfoComponent, TelePdAllocationComponent, FinancialInfoComponent, BusinessInfoComponent, EmploymentInfoComponent, StockComponent, BankingDetailsComponent, ListPdComponent, FamilyDetailsComponent, AddressComponent, ManagePdComponent, MapPdViewComponent, AddPdComponent, ViewPdComponent, PdAllocationComponent, SmartPdAllocationComponent, SchedulePdComponent, EditPdApplicantComponent, EditPdMasterComponent, StartPdComponent, InprogressPdComponent, AllPdComponent, ScheduledPdComponent, CompletedPdComponent, QcCompletedPdComponent, ClientInfoComponent, CurrentLoanComponent, AssetsInfoComponent, LoanDetailsComponent, OtherIncomeComponent, SupplierInfoComponent, PersonalInfoComponent, LenderRepresentativeComponent, PdReportComponent, AssessedIncomeComponent, AllocationViewMoreComponent, PdRequirementComponent, GeneralInfoComponent, ModelEditPdReportComponent, OtherApplicantDetailsComponent, NeighbourHoodComponent, DialogChangeCurrentVenrsion],
+    declarations: [RentalInfoComponent, TelePdAllocationComponent, FinancialInfoComponent, BusinessInfoComponent, EmploymentInfoComponent, StockComponent, BankingDetailsComponent, ListPdComponent, FamilyDetailsComponent, AddressComponent, ManagePdComponent, MapPdViewComponent, AddPdComponent, ViewPdComponent, PdAllocationComponent, SmartPdAllocationComponent, SchedulePdComponent, EditPdApplicantComponent, EditPdMasterComponent, StartPdComponent, InprogressPdComponent, AllPdComponent, ScheduledPdComponent, CompletedPdComponent, QcCompletedPdComponent, ClientInfoComponent, CurrentLoanComponent, AssetsInfoComponent, LoanDetailsComponent, OtherIncomeComponent, SupplierInfoComponent, PersonalInfoComponent, LenderRepresentativeComponent, PdReportComponent, AssessedIncomeComponent, AllocationViewMoreComponent, PdRequirementComponent, GeneralInfoComponent, ModelEditPdReportComponent, OtherApplicantDetailsComponent, NeighbourHoodComponent, DialogChangeCurrentVenrsion, FinalRemarksComponent],
 
     // exports: [PdAllocationComponent, SmartPdAllocationComponent, SchedulePdComponent, EditPdApplicantComponent, EditPdMasterComponent, StartPdComponent, CompletedPdComponent, QcCompletedPdComponent],
     // providers: [PdTrigerService, GetGeometricLocationService],
@@ -265,11 +268,13 @@ const pdCustomNotifierOptions: NotifierOptions = {
   imports: [
     CommonModule,
     ManagePdRoutingModule,
+    NgxViewerModule,
     NotifierModule.withConfig(pdCustomNotifierOptions),
     CKEditorModule,
     PdfViewerModule,
     MatCardModule,
     MatIconModule,
+    MatAutocompleteModule,
     MatInputModule,
     MatRadioModule,
     MatTableModule,
@@ -279,6 +284,7 @@ const pdCustomNotifierOptions: NotifierOptions = {
     MatToolbarModule,
     FlexLayoutModule,
     NgxDatatableModule,
+    MatChipsModule,
     FormsModule,MatSlideToggleModule,
     MatSelectModule, MatListModule,MatGridListModule, MatTabsModule, MatBadgeModule, MatCheckboxModule,MatStepperModule,MatSidenavModule ,MatMenuModule, MatButtonToggleModule,
     ReactiveFormsModule,
@@ -295,7 +301,7 @@ const pdCustomNotifierOptions: NotifierOptions = {
   providers: [PdTrigerService, GetGeometricLocationService],
 
   entryComponents: [PdAllocationComponent, SmartPdAllocationComponent, SchedulePdComponent, EditPdApplicantComponent, EditPdMasterComponent, TelePdAllocationComponent, AllocationViewMoreComponent, PersonalInfoComponent,
-     ClientInfoComponent, SupplierInfoComponent, CurrentLoanComponent, LoanDetailsComponent, OtherIncomeComponent, AssetsInfoComponent, AddressComponent, FamilyDetailsComponent, BankingDetailsComponent, StockComponent, EmploymentInfoComponent, BusinessInfoComponent, FinancialInfoComponent, LenderRepresentativeComponent,RentalInfoComponent, AssessedIncomeComponent, GeneralInfoComponent, PdRequirementComponent, ModelEditPdReportComponent, OtherApplicantDetailsComponent, NeighbourHoodComponent, DialogChangeCurrentVenrsion],
+     ClientInfoComponent, SupplierInfoComponent, CurrentLoanComponent, LoanDetailsComponent, OtherIncomeComponent, AssetsInfoComponent, AddressComponent, FamilyDetailsComponent, BankingDetailsComponent, StockComponent, EmploymentInfoComponent, BusinessInfoComponent, FinancialInfoComponent, LenderRepresentativeComponent,RentalInfoComponent, AssessedIncomeComponent, GeneralInfoComponent, PdRequirementComponent, ModelEditPdReportComponent, OtherApplicantDetailsComponent, NeighbourHoodComponent, DialogChangeCurrentVenrsion, FinalRemarksComponent],
 
 })
 export class ManagePdModule {

ng6-seed/src/app/personal-discussion/pd-service/pd-triger.service.ts

@@ -282,14 +282,14 @@ getPDFormDetailsWithID(pdID, formID ):Observable<any> {
 
   // get Pd Final report Question Answer
 
-  getPdFinalReportDetails(pdId: number) {
+  getPdFinalReportDetails(pdId: number): Observable<any> {
     return this._http.post<any>(this.apiUrl+"getFinalPDReportQuestions",{"pd_id":pdId})
     .pipe(
       catchError(this.handleError('operation', []))
     )
   }
 
-  getPDReportFinalDocument(pdId: any){
+  getPDReportFinalDocument(pdId: any): Observable<any>{
     pdId.fk_createdby = this._aws.getlocale();
     return this._http.post<any>(this.apiUrl+"generatePDReport",{"records": pdId})
     .pipe(
@@ -297,28 +297,28 @@ getPDFormDetailsWithID(pdID, formID ):Observable<any> {
     )
   }
 
-  getActualPDReportModelTemplate(pdId: any) {
+  getActualPDReportModelTemplate(pdId: any) : Observable<any>{
       return this._http.post<any>(this.apiUrl+"getLatestPDReportBlob ",{"records":{"pd_id":pdId}})
     .pipe(
       catchError(this.handleError('operation', []))
     )
   }
 
-  updatePDReportDetails(records: any){
+  updatePDReportDetails(records: any): Observable<any>{
         return this._http.post<any>(this.apiUrl+"saveNewVersionOfPDReport ",{"records": records})
     .pipe(
       catchError(this.handleError('operation', []))
     )
   }
 
-  getPdDocVersionList(pdId: number){
+  getPdDocVersionList(pdId: number): Observable<any>{
         return this._http.post<any>(this.apiUrl+"getListOfPDReportVersions",{"records":{"pd_id":pdId}})
     .pipe(
       catchError(this.handleError('operation', []))
     )
   }
 
-  swapOlderPDReportToLatest(pdId: any){
+  swapOlderPDReportToLatest(pdId: any): Observable<any>{
     pdId.fk_createdby = this._aws.getlocale();
     alert(JSON.stringify(pdId));
     return this._http.post<any>(this.apiUrl+"swapOlderPDReportToLatest",{"records": pdId})
@@ -327,6 +327,12 @@ getPDFormDetailsWithID(pdID, formID ):Observable<any> {
     )
   }
 
+getTypeofActivityForSuppliedInfoForm(pd_id: any): Observable<any>{
+    return this._http.post<any>(this.apiUrl+"getTypeOfActivetyFromBusinessForm", {"records": { "pd_id" : pd_id }})
+    .pipe(
+      catchError(this.handleError('operation', []))
+    )
+  }
 
 
   
@@ -417,9 +423,29 @@ convertNumberToWords(amount) {
         )
       }
 
+    stockFormAccess(pdid: any): Observable<any> {
+       
+      return this._http.post<any>(this.apiUrl+"getTypeOfActivetyFromBusinessForm",{"records":pdid})
+      .pipe(
+          catchError(this.handleError('operation', []))
+        )
+      }
   // private handleError<T>(operation = 'operation', result?: T) {
   //   return (error: any): Observable<T> => {
   //     return of(result as T);
   //   };
   // }
+
+  /**Search Filter 
+   * Sriram
+   */
+
+   overAllSearchFormDetails(searchItem)
+   {
+        let records = {'records':searchItem};
+        return this._http.post(this.apiUrl+'filterPDList',records).pipe(
+            catchError(this.handleError('operation', []))
+          );
+   }
+   
 }

ng6-seed/src/app/settings/entity/entity-edit/entity-branch-add/entity-branch-add.component.html

@@ -0,0 +1,73 @@
+<!--<div *ngIf="listofCity.length > 0">
+  <mat-card *ngFor="let city of listofCity; let i = index;">
+    <h4>{{city.name}}</h4>
+    <div *ngIf="city.branch_details.length > 0">
+      <form class="example-form">
+        <mat-form-field class="example-full-width">
+          <input matInput placeholder="Add Branch" name="first" [(ngModel)]="newElement[city.name]">
+        </mat-form-field> <span *ngIf="newElement[city.name]"><mat-icon (click)="addItem(city.name)">check</mat-icon></span>
+      </form>
+      <mat-list role="list" class="inlist">
+        <ng-container *ngFor="let branch of city.branch_details; let i = index;">
+          <mat-list-item role="listitem" *ngIf="branch.isactive == 1" class="list-item" [ngStyle]="{ 'border-color': i === currentElement ? '#f44336' : 'gray'}">
+            <label style="width: 80%" [hidden]="currentElement === i">{{branch.branch_name}}</label>
+            <input *ngIf="currentElement === i" matInput placeholder="Add Branch" [(ngModel)]="branch.branch_name">
+            <span (click)="editItem(i)" [hidden]="currentElement === i"><mat-icon>edit</mat-icon></span>
+            <span (click)="editItem(-1)" *ngIf="currentElement === i"><mat-icon>check</mat-icon></span>
+            <span (click)="deleteItem(branch, i)"><mat-icon>delete</mat-icon></span>
+          </mat-list-item>
+        </ng-container>
+      </mat-list>
+    </div>
+    <div *ngIf="city.branch_details.length == 0">
+      <h2 style="color: #ddd; text-align: center;">No Records Found...</h2>
+    </div>
+  </mat-card>
+<pre>{{ newElement | json}}</pre>
+  <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" (click)="reset();false"><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="button"
+      (click)="saveBranch()"><mat-icon>save</mat-icon></button>
+  </div>
+</div>
+<div *ngIf="listofCity.length == 0">
+  <h2 style="color: #ddd; text-align: center;">No Records Found...</h2>
+</div>-->
+
+<form [formGroup]="_addEntityBranchFrom" (submit)="onSubmit()">
+    <div formArrayName="branch_details" class="example-full-width">
+      <mat-card *ngFor="let region of _addEntityBranchFrom.controls.branch_details['controls']; let i=index">
+           <mat-card-content *ngIf="region.get('isactive').value == 1">
+            <div [formGroupName]="i">
+                <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="2%" fxLayoutAlign="center center">
+                    <mat-form-field fxFlex="30%">
+                        <input matInput placeholder="Branch Name" name="first"  formControlName="branch_name">
+                        <mat-error *ngIf="submitted && region['controls'].branch_name.hasError('required')" class="mat-text-warn">Branch Name Required.!</mat-error>
+                    </mat-form-field>
+
+                    <mat-form-field fxFlex="30%">
+                        <mat-select placeholder="City *" formControlName="fk_city_id">
+                            <mat-option *ngFor="let city of m_city" [value]="city.fk_city_id">{{ city.name }}</mat-option>
+                        </mat-select>
+                        <mat-error *ngIf="submitted && region['controls'].fk_city_id.hasError('required')" class="mat-text-warn">City Required.!</mat-error>
+                    </mat-form-field>
+                     <div fxFlex="30%" style="text-align:center;">
+                            <!--<mat-checkbox *ngIf="region.get('entity_lender_branch_id').value != null" formControlName="isactive" [ngModel]="region.get('isactive').value == 1 ? true : region.get('isactive').value == 0 ? false : null"
+                            (ngModelChange)="region.get('isactive').value = $event ? 1 : 0"></mat-checkbox>
+                            
+                            <span *ngIf="_addEntityBranchFrom.controls.branch_details.controls.length > 1" (click)="removeLanguage(i)">-->
+                            <button (click)="deleteEntityBranch(i, $event); false" 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>
+        </mat-card-content>
+        </mat-card>
+    </div>
+    <div class="row" style="text-align:right;">
+            <button mat-raised-button mat-icon-button class="mr-1 mb-1" color="primary" matTooltip="Add More Region Information" matTooltipPosition="above" (click)="addRegionFormData(null, $event); false"><mat-icon>add</mat-icon></button>
+   
+        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Reset" matTooltipPosition="above" (click)="reset();false"><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="button" (click)="saveBranch(); false"><mat-icon>save</mat-icon></button>
+    </div>
+</form>

ng6-seed/src/app/settings/entity/entity-edit/entity-branch-add/entity-branch-add.component.scss

@@ -0,0 +1,14 @@
+.inlist{
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.inlist > * {
+    width: 350px;
+}
+
+.list-item {
+    border: 1px solid gray;
+    margin: 2px;
+    border-radius: 6px;
+}

ng6-seed/src/app/settings/entity/entity-edit/entity-branch-add/entity-branch-add.component.spec.ts

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

ng6-seed/src/app/settings/entity/entity-edit/entity-branch-add/entity-branch-add.component.ts

@@ -0,0 +1,245 @@
+import { Component, ViewChild, OnInit, OnDestroy, Input, Inject } from '@angular/core';
+import { MatPaginator, MatSort, MatTableDataSource, MatDialog, MatDialogRef, MAT_DIALOG_DATA, 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';
+
+import { NotifierService } from 'angular-notifier';
+
+import { MastersService } from './../../../service/masters/masters.service';
+import { EntityService } from './../../../service/entity/entity.service';
+
+@Component({
+  selector: 'app-entity-branch-add',
+  templateUrl: './entity-branch-add.component.html',
+  styleUrls: ['./entity-branch-add.component.scss']
+})
+export class EntityBranchAddComponent implements OnInit {
+
+  @Input() public entityId: number;
+  public newElement: any= {};
+  public listofCity = [];
+  public listOfBranch = [];
+
+  public m_city: any = [];
+  
+  public _addEntityBranchFrom: FormGroup;
+  public submitted = false;
+
+  /**
+* Notifier service
+*/
+  private notifier: NotifierService;
+
+  constructor(
+    notifier: NotifierService,
+    private entityService: EntityService,
+    private mastersService: MastersService,
+    private _formBuilder: FormBuilder) {
+    this.notifier = notifier;
+     this._addEntityBranchFrom = this._formBuilder.group({
+      branch_details: this._formBuilder.array([
+        // this.addRegionFormData(null, null),
+      ])
+    })
+  }
+
+  ngOnInit() {
+    this.entityService.getEntityBranchList(this.entityId).subscribe(data => {
+      if (data.dataStatus) {
+        this.listofCity = data.records;
+        this.m_city = data.records.city_master;
+        // this.listOfBranch = data.records;
+        this.setFormDatas(data.records.branch_details);
+      }
+    }, err => {
+    })
+  }
+
+  setFormDatas(record) {
+    if (record.length > 0) {
+      for (let val of record) {
+        let vals = {
+          entity_lender_branch_id: val.entity_lender_branch_id,
+          branch_name: val.branch_name,
+          fk_entity_id: val.fk_entity_id,
+          fk_region_id: val.fk_region_id,
+          fk_city_id: val.fk_city_id,
+          fk_updatedby: val.fk_updatedby,
+          fk_createdby: val.fk_createdby,
+          isactive: val.isactive,
+        };
+        this.addRegionFormData(vals, null);
+      }
+    }
+  }
+
+   // convenience getter for easy access to form fields
+  get f() { return this._addEntityBranchFrom.controls; }
+
+  // Dynamic Form field creation Functionality : START ===>
+  initRegionFormLoad(data) {
+    return this._formBuilder.group({
+      entity_lender_branch_id: [data.entity_lender_branch_id],
+      branch_name: [data.branch_name, Validators.compose([Validators.required])],
+      fk_city_id: [data.fk_city_id, Validators.compose([Validators.required])],
+      fk_entity_id: [data.fk_entity_id],
+      fk_updatedby: [data.fk_updatedby],
+      fk_createdby: [data.fk_createdby],
+      isactive: [data.isactive],
+    });
+  }
+  addRegionFormData(data, e) {
+    if (data == null) {
+      let newDate = {
+        entity_lender_branch_id: null,
+        branch_name:null,
+        fk_entity_id: this.entityId,
+        fk_createdby: null,
+        fk_updatedby: null,
+        fk_city_id: null,
+        isactive: 1,
+      }
+      const control = <FormArray>this._addEntityBranchFrom.controls['branch_details'];
+      control.push(this.initRegionFormLoad(newDate));
+    } else {
+      const control = <FormArray>this._addEntityBranchFrom.controls['branch_details'];
+      control.push(this.initRegionFormLoad(data));
+    }
+  }
+
+  deleteEntityBranch(inx, e) {
+    e.stopPropagation();
+    const control = <FormArray>this._addEntityBranchFrom.controls['branch_details'];
+    // let dataS = control.controls[inx].value;
+    if(control.controls[inx].value['entity_lender_branch_id'] !== null){
+      console.log(  this._addEntityBranchFrom.controls['branch_details']['controls'][inx].controls.isactive);
+      this._addEntityBranchFrom.controls['branch_details']['controls'][inx].controls.isactive.setValue("0");
+       console.log(  this._addEntityBranchFrom.controls['branch_details']['controls'][inx].controls.isactive.value);
+    } else {
+      control.removeAt(inx);
+    }
+  }
+
+  // public listOfBranch = [
+  //   	{
+  // 		"entity_lender_branch_id": 1,
+  // 		"branch_name": "Dev Test Branch 1",
+  // 		"isactive": "1",
+  // 		"fk_createdby": "1",
+  // 		"fk_updatedby": "1",
+  // 		"fk_entity_id": "1"
+  // 	},
+  //   	{
+  // 		"entity_lender_branch_id": 2,
+  // 		"branch_name": "Dev Test Branch 2",
+  // 		"isactive": "1",
+  // 		"fk_createdby": "1",
+  // 		"fk_updatedby": "1",
+  // 		"fk_entity_id": "1"
+  // 	},
+  //   	{
+  // 		"entity_lender_branch_id": 3,
+  // 		"branch_name": "Dev Test Branch 3",
+  // 		"isactive": "1",
+  // 		"fk_createdby": "1",
+  // 		"fk_updatedby": "1",
+  // 		"fk_entity_id": "1"
+  // 	}
+  // ];
+
+  addItem(prop): void {
+    // let data = {
+    //   "entity_lender_branch_id": null,
+    //   "branch_name": this.newElement.name,
+    //   "isactive": "1",
+    //   "fk_createdby": null,
+    //   "fk_updatedby": null,
+    //   "fk_entity_id": this.entityId.toString()
+    // }
+    // this.listOfBranch.push(data);
+    // this.newElement.name = '';
+  }
+
+  public currentElement = -1;
+  editItem(i): void {
+    this.currentElement = i;
+  }
+
+  deleteItem(obj, i): void {
+    if (obj.entity_lender_branch_id !== null) {
+      obj.isactive = 0;
+    } else {
+      this.listOfBranch.splice(i, 1);
+    }
+  }
+
+   /** To Save/Edited Popup Data */
+  onSubmit() {
+    alert();
+    this.submitted = true;
+    // stop here if form is invalid
+    if (this._addEntityBranchFrom.invalid) {
+      // this.errorMessage = "Please Fill All Mandate Fields.";
+      return; 
+    } else {
+      var formValues = this._addEntityBranchFrom.value;
+      //To Remove The "Null" With Key also
+      Object.keys(formValues).forEach((key) => (formValues[key] == null) && delete formValues[key]);
+      alert(JSON.stringify(formValues.branch_details));
+        // this.entityService.updateEntityIdRegionInfoDetails(formValues.region_lender).subscribe(
+        //   dataresult => {
+        //     if (dataresult.status == 200) {
+        //       console.log(dataresult);
+        //       this.notifier.notify('success', 'Your Changes Updated.!');
+        //       const arr = <FormArray>this._editEntityRegionFrom.controls.region_lender;
+        //       arr.controls.splice(0);
+        //       // this.getEntityIDRegionInfoDetails();
+        //     }
+        //     else {
+        //       this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
+        //       // this.errorMessage = "Something Wents Wrong Try Again.!";
+        //     }
+        //   }, error => {
+        //     this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
+        //     // this.errorMessage = "Some Thing Wents Wrong Try Again.!";
+        //   });
+    }
+  }
+
+
+  saveBranch(): void {
+// alert();
+      var formValues = this._addEntityBranchFrom.value;
+      //To Remove The "Null" With Key also
+      Object.keys(formValues).forEach((key) => (formValues[key] == null) && delete formValues[key]);
+      // alert(JSON.stringify(formValues.branch_details));
+
+    this.entityService.updateEntityIdBranchInfoDetails(formValues.branch_details).subscribe(data => {
+      if (data.dataStatus) {
+        this.notifier.notify('success', 'Your Changes Updated.!');
+      } else {
+        this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
+      }
+    }, err => {
+      this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
+    })
+  }
+
+  reset(): void {
+    this.listOfBranch = [];
+    this.ngOnInit();
+  }
+}
+
+// "records": [
+// 		{
+// 			"entity_lender_branch_id": null,
+// 			"branch_name": "Dev Test Branch",
+// 			"isactive": "1",
+// 			"fk_createdby": "1",
+// 			"fk_updatedby": "1",
+// 			"fk_entity_id": "1"
+// 		}
+// 	]

ng6-seed/src/app/settings/entity/entity-edit/entity.edit.component.html

@@ -233,6 +233,12 @@
                     <app-entity-edit-vendor-city-info [entityId]="entity_id">
                     </app-entity-edit-vendor-city-info>
                 </ng-template>
+            </mat-tab> 
+             <mat-tab  *ngIf="localEntityType == 2" label="Branch">
+                <ng-template matTabContent>
+                    <app-entity-branch-add [entityId]="entity_id">
+                    </app-entity-branch-add>
+                </ng-template>
             </mat-tab>
             <mat-tab label="TAT Information">
                 <ng-template matTabContent>

ng6-seed/src/app/settings/entity/entity.module.ts

@@ -38,6 +38,7 @@ import { EntityEditBillingInfoComponent } from './entity-edit/entity-edit-billin
 
 import { DialogAddEditBillingInfo } from './entity-edit/entity-edit-billing-info/entity-edit-billing-info.component';
 import { EntityEditVendorCityInfoComponent } from './entity-edit/entity-edit-vendor-city-info/entity-edit-vendor-city-info.component';
+import { EntityBranchAddComponent } from './entity-edit/entity-branch-add/entity-branch-add.component';
 // import { MatTooltipModule } from '@angular/material/tooltip';
 /**
  * Custom angular notifier options
@@ -115,7 +116,8 @@ const customNotifierOptions: NotifierOptions = {
     EntityEditPriceComponent,
     EntityEditBillingInfoComponent,
     DialogAddEditBillingInfo,
-    EntityEditVendorCityInfoComponent
+    EntityEditVendorCityInfoComponent,
+    EntityBranchAddComponent
   ],
   entryComponents: [
     EntityEditComponent,

ng6-seed/src/app/settings/service/entity/entity.service.ts

@@ -165,6 +165,22 @@ export class EntityService {
   }
 
    
+  getEntityBranchList(entity_id: any): Observable<any> {
+// Add safe, URL encoded search parameter if there is a search term
+      const options = entity_id ?
+   { params: new HttpParams().set('entityid', entity_id) } : {};
+
+    return this._http.get<any[]>(this.apiUrl + "listLenderBranches", options);
+  }
+
+  updateEntityIdBranchInfoDetails(Records: any): Observable<any>{
+      Records.map(data=>{
+        data.fk_updatedby = data.fk_createdby == null ? null : this._aws.getlocale(); 
+        data.fk_createdby = data.fk_createdby == null ? this._aws.getlocale() : data.fk_createdby; 
+      })
+   return this._http.post<any[]>(this.apiUrl + "saveLenderBranches", {'records': Records });
+  }
+
 
   /** 
   *  TO Handle The Error 

ng6-seed/src/assets/styles/app.scss

@@ -44,6 +44,7 @@ Author: TrendSetter Themes
 @import "scss/core";
 @import "scss/material";
 @import "scss/utilities/utilities";
+@import '~viewerjs/dist/viewer.css';
 
 
 /* Add application styles & imports to this file! */