Merge branch 'master' of https://bitbucket.org/sriramv18/sparqsineedge

ng6-seed/package-lock.json

@@ -4344,12 +4344,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"
@@ -4364,17 +4366,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",
@@ -4491,7 +4496,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4503,6 +4509,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4517,6 +4524,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -4524,12 +4532,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.0"
@@ -4548,6 +4558,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -4628,7 +4639,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4640,6 +4652,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4761,6 +4774,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",

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

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

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

@@ -20,4 +20,8 @@
 }
 .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/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,21 +13,31 @@ 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;
-   
+
   @Input() bindFilterValue: string;
   @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.loadPDDetails();
+    this.getcommonDropDown();
   }
   ngAfterViewInit() {
     this.dataSourceTab5.paginator = this.paginator;
@@ -51,39 +77,105 @@ 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)
-    .subscribe(
+      .subscribe(
         data => {
           if (data.status == 200) {
             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/assessed-income/assessed-income.component.html

@@ -280,6 +280,7 @@
                         </mat-tab>
                         <mat-tab label="Docs">
                           <ng-template matTabContent>
+                              <div ngxViewer>
                                      <div fxLayout="row wrap" style="padding:20px;">
                                 <div fxFlex="100">
                                   <div fxFlex="20" class="m-gap p-gap">
@@ -369,7 +370,8 @@
                                           </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.html

@@ -192,6 +192,7 @@
 </mat-tab>
 <mat-tab label="Docs">
         <ng-template matTabContent>
+            <div ngxViewer>
               <div fxLayout="row wrap" style="padding:20px;">
                                 <div fxFlex="100">
                                   <div fxFlex="20" class="m-gap p-gap">
@@ -281,7 +282,8 @@
                                           </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.html

@@ -388,6 +388,7 @@
 
             <mat-tab label="Docs">
                     <ng-template matTabContent>
+                        <div ngxViewer>
                                  <div fxLayout="row wrap" style="padding:20px;">
                                 <div fxFlex="100">
                                   <div fxFlex="20" class="m-gap p-gap">
@@ -478,7 +479,7 @@
                                    </div>
                                 </div>                                 
                               </div>
-                                          
+                        </div>          
                     </ng-template>
             </mat-tab>
 

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

@@ -1,313 +1,203 @@
-<form *ngIf="apiLoadFinish" [formGroup]="_clientQuesFrom" (submit)="onSubmit()" novalidate>
+<h2 mat-dialog-title class="paragraph_change">
-
+    <div fxFlex="70" align="left" style="padding: 10px !important;">{{pageTitle}}</div>
-    <h2 mat-dialog-title class="paragraph_change">
+    <div fxFlex="30" align="end" style="padding: 10px !important;">
-            <div fxFlex="70" align="left" style="padding: 10px !important;">{{pageTitle}}</div>
+        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right"
-            <div fxFlex="30" align="end" style="padding: 10px !important;">
+            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>
-            </div>
+<div *ngIf="noRecordsFound" style="max-width: 100vw !important;width: 100% !important;height: 95% !important;">
-    </h2>
+    <form [formGroup]="_supplierQuesFrom" (submit)="onSubmit()" novalidate>
-    
+        <mat-dialog-content>
-    <mat-dialog-content>
+            <mat-card *ngIf="manufacturingForm">
-    
+                <h5 style="margin: 12px;">Manufacturing Product Details</h5>
-            <mat-tab-group>
+                <div formArrayName="manufacturing_details">
-
+                    <div *ngFor="let item of _supplierQuesFrom.controls.manufacturing_details['controls']; let i=index" [formGroupName]="i">
-                    <mat-tab label="Questions">
+                        <div formArrayName="main_raw_materials">
-                      <ng-template matTabContent>
+                            <div *ngFor="let items of item.controls.main_raw_materials['controls']; let l=index" [formGroupName]="l">
-                          
+                                <mat-card style="margin: 12px;">
-                            <div fxLayout="row wrap">
+                                    <h6 style="margin: 12px;">Raw Material #{{l+1}}</h6>
-                              <div fxFlex="100">
+                                    <div fxLayout="row wrap" fxLayoutGap="2px" fxLayoutAlign="start none">
-                                <mat-card>
+                                        <mat-form-field style="width: 100%">
-                                 <mat-card>
+                                            <mat-select placeholder="Manufacturing Product Name" formControlName="manufacturing_product_name">
-                                    <!-- <mat-card-title></mat-card-title> -->
+                                                <mat-option *ngFor="let pm of m_manufacturingProducts" [value]="pm.id">{{ pm.name }}</mat-option>
-                                      <mat-card-content formArrayName="client_details" fxFill>
+                                            </mat-select>
-                                        <div *ngFor="let sup of _clientQuesFrom.controls.client_details['controls']; let i=index" [formGroupName]="i">
+                                        </mat-form-field>
-                                            <!-- <div [formGroupName]="i"> -->
+                                        <!--<mat-form-field style="width: 100%">
-                                                <div fxLayout="row wrap" fxLayoutGap="12px" fxLayoutAlign="start none">
+                                            <input matInput placeholder="Raw Material Name" formControlName="manufacturing_raw_material_name">
-                                                  <div>
+                                        </mat-form-field>-->
-                                                    <mat-form-field class="ml-xs example-full-width">
+                                        <mat-form-field style="width: 100%">
-                                                      <input matInput placeholder="Client Name" formControlName="client_name" required>
+                                            <input matInput placeholder="Client Name" formControlName="manufacturing_client_name">
-                                                      <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
+                                        </mat-form-field>
-                                                    </mat-form-field>
+                                        <mat-form-field style="width: 100%">
-                                                  </div>
+                                            <input matInput placeholder="Contact Person Name" formControlName="manufacturing_contact_person_name">
-                                                  <div>
+                                        </mat-form-field>
-                                                    <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>  
-                                      </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 fxFlex="100" align="end">
-                                            <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>  
                                     </div>
-                                </mat-dialog-actions>
+                                    <div fxLayout="row wrap" fxLayoutGap="2px" fxLayoutAlign="start none">
-                                 </mat-card>              
+                                        <mat-form-field style="width: 100%">
-                              </div>
+                                            <input matInput placeholder="Contact Person Mobile Number" formControlName="manufacturing_contact_person_mobile_number">
+                                        </mat-form-field>
+                                        <mat-form-field style="width: 100%">
+                                            <mat-select placeholder="Payment Type" formControlName="manufacturing_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('manufacturing_payment_type').value == 3">
+                                            <input matInput placeholder="Number of days of credit provided" formControlName="manufacturing_credit_days">
+                                        </mat-form-field>
+                                    </div>
+                                    <div align="end">
+                                        <span *ngIf="item.controls.main_raw_materials.controls.length > 1" (click)="removeRawMaterials(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>
-                      </ng-template>
+                        </div>
-                    </mat-tab>
+                        <div>
-
+                            <mat-form-field style="width: 100%">
-                    <mat-tab label="Docs">
+                                <input matInput placeholder="% of total manufacturing raw materials credit values" formControlName="main_raw_materials_total_payments_percent_on_credit"
-                      <ng-template matTabContent>
+                                    type="number">
-                             <div fxLayout="row wrap" style="padding:20px;">
+                            </mat-form-field>
-                                <div fxFlex="100">
+                            <div fxFlex="100" align="end">
-                                  <div fxFlex="20" 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" style="width: 60%;height: auto;">
+                                    class="mr-1 mb-1 hover-icon" (click)="addMoreRawMaterials($event); false"><mat-icon>add</mat-icon></button>
-                                          <div class="p-list">                                                                           
+                            </div>
-                                            <div class="top"> <img src="https://picsum.photos/2000/1500/?random=1" alt="Image 1"></div>   
+                        </div>
-                                          </div>
+                    </div>
-                                      </div>
+                </div>
-                                  </div>
+            </mat-card>
-                                  <div fxFlex="20" class="m-gap p-gap">
+            <mat-card *ngIf="tradingForm">
-                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
+                <h5 style="margin: 12px;">Trading Product Details</h5>
-                                          <div class="p-list">
+                <div formArrayName="trade_details">
-                                              <div class="top"> <img src="https://picsum.photos/2000/1500/?random=2" alt="Image 2"></div>                                                    
+                    <div *ngFor="let item of _supplierQuesFrom.controls.trade_details['controls']; let i=index" [formGroupName]="i">
-                                          </div>
+                        <div formArrayName="trading_products">
-                                      </div>
+                            <div *ngFor="let items of item.controls.trading_products['controls']; let l=index" [formGroupName]="l">
-                                  </div>
+                                <mat-card style="margin: 12px;">
-                                  <div fxFlex="20" class="m-gap p-gap">
+                                    <h6 style="margin: 12px;">Trading Product #{{l+1}}</h6>
-                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
+                                    <div fxLayout="row wrap" fxLayoutGap="2px" fxLayoutAlign="start none">
-                                          <div class="p-list">  
+                                        <mat-form-field style="width: 100%">
-                                              <div class="top"><img src="https://picsum.photos/2000/1500/?random=3" alt="Image 3"></div>                                                          
+                                            <mat-select placeholder="Trading Product Name" formControlName="trade_product_name">
-                                          </div>
+                                                <mat-option *ngFor="let pm of m_tradingProducts" [value]="pm.id">{{ pm.name }}</mat-option>
-                                      </div>
+                                            </mat-select>
-                                  </div>  
+                                        </mat-form-field>
-                                  <div fxFlex="20" class="m-gap p-gap">
+                                        <!--<mat-form-field style="width: 100%">
-                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
+                                            <input matInput placeholder="Trade Product Name" formControlName="trade_product_name">
-                                          <div class="p-list">
+                                        </mat-form-field>-->
-                                              <div class="top"> <img src="https://picsum.photos/2000/1500/?random=2" alt="Image 2"></div>                                                    
+                                        <mat-form-field style="width: 100%">
-                                          </div>
+                                            <input matInput placeholder="Client Name" formControlName="trade_client_name">
-                                      </div>
+                                        </mat-form-field>
-                                  </div>
+                                        <mat-form-field style="width: 100%">
-                                    <div fxFlex="20" class="m-gap p-gap">
+                                            <input matInput placeholder="Contact Person Name" formControlName="trade_product_contact_person_name">
-                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
+                                        </mat-form-field>
-                                          <div class="p-list">  
+                                    </div>
-                                              <div class="top"><img src="https://picsum.photos/2000/1500/?random=3" alt="Image 3"></div>                                                          
+                                    <div fxLayout="row wrap" fxLayoutGap="2px" fxLayoutAlign="start none">
-                                          </div>
+                                        <mat-form-field style="width: 100%">
-                                      </div>
+                                            <input matInput placeholder="Contact Person Mobile Number" formControlName="trade_product_contact_person_mobile_number">
-                                  </div>
+                                        </mat-form-field>
-                                  <div fxFlex="20" class="m-gap p-gap">
+                                        <mat-form-field style="width: 100%">
-                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
+                                            <mat-select placeholder="Payment Type" formControlName="trade_product_payment_type">
-                                          <div class="p-list">                                                                           
+                                                <mat-option *ngFor="let pm of m_paymentModeType" [value]="pm.id">{{ pm.name }}</mat-option>
-                                            <div class="top"> <img src="https://picsum.photos/2000/1500/?random=1" alt="Image 1"></div>   
+                                            </mat-select>
-                                          </div>
+                                        </mat-form-field>
-                                      </div>
+                                        <mat-form-field style="width: 100%" *ngIf="items.get('trade_product_payment_type').value == 3">
-                                  </div>
+                                            <input matInput placeholder="Number of days of credit provided" formControlName="trade_product_credit_days">
-                                </div>
+                                        </mat-form-field>
-                                <div fxFlex="row">
+                                    </div>
-                                   <div fxFlex="100" class="m-gap p-gap">
+                                    <div align="end">
-                                          <div fxLayout="row" fxLayoutWrap="wrap">
+                                        <span *ngIf="item.controls.trading_products.controls.length > 1" (click)="removeTradingProduct(l)">
-                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                                <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>
-                                                  <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>
+                                                </span>
-                                              </div>
+                                    </div>
-                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                </mat-card>
-                                                  <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 class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                        <div>
-                                                  <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>
+                            <mat-form-field style="width: 100%">
-                                              </div>
+                                <input matInput placeholder="% of total trading product credit values" formControlName="trading_products_total_payments_percent_on_credit"
-                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                    type="number">
-                                                  <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>
+                            </mat-form-field>
-                                              </div>
+                            <div fxFlex="100" align="end">
-                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                <button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Supplier Details" matTooltipPosition="above"
-                                                  <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>
+                                    class="mr-1 mb-1 hover-icon" (click)="addMoretradeProduct($event); false"><mat-icon>add</mat-icon></button>
-                                              </div>
+                            </div>
-                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                        </div>
-                                                  <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>
+            </mat-card>
-                                            <div fxLayout="row" fxLayoutWrap="wrap">
+            <!--===========================: service provider details : START-->
-                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+            <mat-card *ngIf="serviceProviderForm">
-                                                  <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>
+                <h5 style="margin: 12px;">Service Provider Product Details</h5>
-                                              </div>
+                <div formArrayName="service_provider_details">
-                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                    <div *ngFor="let item of _supplierQuesFrom.controls.service_provider_details['controls']; let i=index" [formGroupName]="i">
-                                                  <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 formArrayName="service_products">
-                                              </div>
+                            <div *ngFor="let items of item.controls.service_products['controls']; let l=index" [formGroupName]="l">
-                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                <mat-card style="margin: 12px;">
-                                                  <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>
+                                    <h6 style="margin: 12px;">Service Provider Product #{{l+1}}</h6>
-                                              </div>
+                                    <div fxLayout="row wrap" fxLayoutGap="2px" fxLayoutAlign="start none">
-                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                                        <mat-form-field style="width: 100%">
-                                                  <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>
+                                            <mat-select placeholder="Service Provider Product Name" formControlName="service_provider_product_name">
-                                              </div>
+                                                <mat-option *ngFor="let pm of m_suplierProducts" [value]="pm.id">{{ pm.name }}</mat-option>
-                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                            </mat-select>
-                                                  <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>
+                                        </mat-form-field>
-                                              </div>
+                                        <!--<mat-form-field style="width: 100%">
-                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                            <input matInput placeholder="Trade Product Name" formControlName="trade_product_name">
-                                                  <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>
+                                        </mat-form-field>-->
-                                              </div>
+                                        <mat-form-field style="width: 100%">
-                                          </div>                                    
+                                            <input matInput placeholder="Client Name" formControlName="service_provider_client_name">
-                                   </div>
+                                        </mat-form-field>
-                                </div>                                 
+                                        <mat-form-field style="width: 100%">
-                              </div>
+                                            <input matInput placeholder="Contact Person Name" formControlName="service_provider_product_contact_person_name">
-                                            
+                                        </mat-form-field>
-                      </ng-template>
+                                    </div>
-                    </mat-tab>
+                                    <div fxLayout="row wrap" fxLayoutGap="2px" fxLayoutAlign="start none">
-                  
+                                        <mat-form-field style="width: 100%">
-            </mat-tab-group>
+                                            <input matInput placeholder="Contact Person Mobile Number" formControlName="service_provider_product_contact_person_mobile_number">
-    
+                                        </mat-form-field>
-    </mat-dialog-content>
+                                        <mat-form-field style="width: 100%">
-
+                                            <mat-select placeholder="Payment Type" formControlName="service_provider_product_payment_type">
-    <mat-dialog-actions>
+                                                <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('service_provider_product_payment_type').value == 3">
+                                            <input matInput placeholder="Number of days of credit provided" formControlName="service_provider_product_credit_days">
+                                        </mat-form-field>
+                                    </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>
+            </mat-card>
+            <mat-card *ngIf="retaildTradingForm">
+                <h5 style="margin: 12px;">Retail Trading Product Details</h5>
+                <div style="text-align: center; margin: 12px;">Retail Trading Details Not applicable here !!</div>
+            </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-form-field appearance="outline" style="width: 100%">
-                      <mat-label>Remarks</mat-label>
+                    <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> -->
-                  </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 fxFlex="40" align="end">
-              <div>
+                <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>
-                <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">
+        </mat-dialog-actions>
-              <div>
+    </form>
-                <mat-form-field>
+</div>
-                  <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>-->

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

@@ -30,120 +30,440 @@ 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,
     private _formBuilder: FormBuilder,
     private pdTrigerService: PdTrigerService,
-    @Inject(MAT_DIALOG_DATA) public pd_all_details: any) { 
+    @Inject(MAT_DIALOG_DATA) public pd_all_details: any) {
-      this.pdid = this.pd_all_details.pdmaster_details.pd_id;
+    this.pdid = this.pd_all_details.pdmaster_details.pd_id;
-      this.form_id = 2;
+    this.form_id = 2;
-      this.notifier = notifier;
+    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,
   }
-};
+  public viewerOptions: any = {
-  ngOnInit() {
+    navbar: false,
-    this.getM_FreqOfPurchase();
+    toolbar: {
-    this.getM_PaymentModeType();
+      zoomIn: 4,
-    this.getClientFormDetails();
+      zoomOut: 4,
-  }
+      oneToOne: 4,
-
+      reset: 4,
-
+      prev: 4,
-// ==================
+      play: {
-
+        show: 4,
-  getM_FreqOfPurchase() {
+        size: 'large',
-    this.pdTrigerService.getAllMasterDatas('FREQUENCY').subscribe(
-      data => {
-        this.m_freqOfPurchase = data.records.filter(data => data.isactive == 1);
       },
-      error => {
+      next: 4,
-        // this.notifier.notify('warning', 'No Category Records Found.!');
+      rotateLeft: 4,
-        // this.m_assets_type = "No Category Records Found.";
+      rotateRight: 4,
-      }
+      flipHorizontal: 4,
-    )
+      flipVertical: 4,
+    }
+  };
+
+  noRecordsFound: Boolean = false;
+  ngOnInit() {
+
+    this.pdTrigerService.getTypeofActivityForSuppliedInfoForm(this.pdid).subscribe(data => {
+      // if(data.dataStatus === undefined){
+      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"
+          }
+        ]
+      };
+      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();
   }
 
-   getM_PaymentModeType() {
+  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: ['1'],
+              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: ['1'],
+              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: ['1'],
+            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;
+    }
+  }
+
+  tradingForm: Boolean = false;
+  tradingFormCreation(val) {
+    let arr = val.filter(data => data.type_of_activity_id === 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;
+    }
+  }
+
+  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(
       data => {
         this.m_paymentModeType = data.records.filter(data => data.isactive == 1);
@@ -156,147 +476,35 @@ public viewerOptions: any = {
   }
 
 
-// ==================
+  // ==================
 
-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
+      //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.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.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.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
           // this.errorMessage = "Something Wents Wrong Try Again !";
           // this.dialogRef.close();
         });
@@ -309,8 +517,9 @@ var result = Object.keys(supp_data).map(function(key) {
   onReset() {
     // this._addQuesFrom.reset();
   }
-   /** On Key Press Event For Mobile Number  */
+
-   keyPress(event: any) {
+  /** On Key Press Event For Mobile Number  */
+  keyPress(event: any) {
     const pattern = /[0-9]/;
 
     let inputChar = String.fromCharCode(event.charCode);

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

@@ -107,6 +107,7 @@
     
                         <mat-tab label="Docs">
                           <ng-template matTabContent>
+                              <div ngxViewer>
                                  <div fxLayout="row wrap" style="padding:20px;">
                                 <div fxFlex="100">
                                   <div fxFlex="20" class="m-gap p-gap">
@@ -196,7 +197,8 @@
                                           </div>                                    
                                    </div>
                                 </div>                                 
-                              </div>                                                
+                              </div>   
+                              </div>                                             
                           </ng-template>
                         </mat-tab>
                       

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

@@ -128,6 +128,7 @@
                 </mat-tab>
                 <mat-tab label="Docs">
                         <ng-template matTabContent>
+                            <div ngxViewer>
                                  <div fxLayout="row wrap" style="padding:20px;">
                                 <div fxFlex="100">
                                   <div fxFlex="20" class="m-gap p-gap">
@@ -217,7 +218,8 @@
                                           </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/financial-info/financial-info.component.html

@@ -167,6 +167,7 @@
                     </mat-tab>
                     <mat-tab label="Docs">
                       <ng-template matTabContent>
+                          <div ngxViewer>
                                  <div fxLayout="row wrap" style="padding:20px;">
                                 <div fxFlex="100">
                                   <div fxFlex="20" class="m-gap p-gap">
@@ -256,7 +257,8 @@
                                           </div>                                    
                                    </div>
                                 </div>                                 
-                              </div>                                            
+                              </div>     
+                          </div>                                       
                              </ng-template>
                     </mat-tab>
                   

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

@@ -51,6 +51,7 @@
 
                 <mat-tab label="Docs">
                         <ng-template matTabContent>
+                            <div ngxViewer>
                                  <div fxLayout="row wrap" style="padding:20px;">
                                 <div fxFlex="100">
                                   <div fxFlex="20" class="m-gap p-gap">
@@ -141,7 +142,7 @@
                                    </div>
                                 </div>                                 
                               </div>
-                                              
+                            </div>            
                                </ng-template>
                 </mat-tab>
         </mat-tab-group>

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

@@ -183,6 +183,7 @@
                 </mat-tab>
                 <mat-tab label="Docs">
                         <ng-template matTabContent>
+                            <div ngxViewer>
                                      <div fxLayout="row wrap" style="padding:20px;">
                                 <div fxFlex="100">
                                   <div fxFlex="20" class="m-gap p-gap">
@@ -273,6 +274,7 @@
                                    </div>
                                 </div>                                 
                               </div>
+                            </div>
                                               
                                </ng-template>
                 </mat-tab>

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

@@ -93,6 +93,7 @@
 
             <mat-tab label="Docs">
                 <ng-template matTabContent>
+                    <div ngxViewer>
                      <div fxLayout="row wrap" style="padding:20px;">
                                 <div fxFlex="100">
                                   <div fxFlex="20" class="m-gap p-gap">
@@ -182,7 +183,8 @@
                                           </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.html

@@ -209,6 +209,7 @@
                 </mat-tab>
                 <mat-tab label="Docs">
                   <ng-template matTabContent>
+                      <div ngxViewer>
                          <div fxLayout="row wrap" style="padding:20px;">
                                 <div fxFlex="100">
                                   <div fxFlex="20" class="m-gap p-gap">
@@ -299,7 +300,7 @@
                                    </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.html

@@ -204,6 +204,7 @@
             </mat-tab>
             <mat-tab label="Docs">
                 <ng-template matTabContent>
+                    <div ngxViewer>
                      <div fxLayout="row wrap" style="padding:20px;">
                                 <div fxFlex="100">
                                   <div fxFlex="20" class="m-gap p-gap">
@@ -293,7 +294,8 @@
                                           </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/stock/stock.component.html

@@ -215,6 +215,7 @@
                         </mat-tab>
                         <mat-tab label="Docs">
                           <ng-template matTabContent>
+                              <div ngxViewer>
                                      <div fxLayout="row wrap" style="padding:20px;">
                                 <div fxFlex="100">
                                   <div fxFlex="20" class="m-gap p-gap">
@@ -304,7 +305,8 @@
                                           </div>                                    
                                    </div>
                                 </div>                                 
-                              </div>                                                
+                              </div>     
+                              </div>                                           
                                  </ng-template>
                         </mat-tab>
                       

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

@@ -1,229 +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>
+    <div fxFlex="70" align="left" style="padding: 10px !important;">{{pageTitle}}</div>
-
+    <div fxFlex="30" align="end" style="padding: 10px !important;">
-    <h2 mat-dialog-title class="paragraph_change">
+        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right"
-            <div fxFlex="70" align="left" style="padding: 10px !important;">{{pageTitle}}</div>
+            mat-dialog-close><mat-icon>close</mat-icon></button>
-            <div fxFlex="30" align="end" style="padding: 10px !important;">
+    </div>
-                    <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>            
+</h2>
-            </div>
+<div *ngIf="noRecordsFound" style="max-width: 100vw !important;width: 100% !important;height: 95% !important;">
-    </h2>    
+    <form [formGroup]="_supplierQuesFrom" (submit)="onSubmit()" novalidate>
-    <mat-dialog-content>    
+        <mat-dialog-content>
-            <mat-tab-group>
+            <mat-card *ngIf="manufacturingForm">
-                    <mat-tab label="Questions">
+                <h5 style="margin: 12px;">Manufacturing Product Details</h5>
-                      <ng-template matTabContent>
+                <div formArrayName="manufacturing_details">
-                          <mat-card>
+                    <div *ngFor="let item of _supplierQuesFrom.controls.manufacturing_details['controls']; let i=index" [formGroupName]="i">
-                            <div fxLayout="row wrap">
+                        <div formArrayName="main_raw_materials">
-                                <div fxFlex="100">     
+                            <div *ngFor="let items of item.controls.main_raw_materials['controls']; let l=index" [formGroupName]="l">
-                                      <mat-card>
+                                <mat-card style="margin: 12px;">
-                                        <mat-card-content>
+                                    <h6 style="margin: 12px;">Raw Material #{{l+1}}</h6>
-                                            <mat-form-field fxFill>
+                                    <div fxLayout="row wrap" fxLayoutGap="2px" fxLayoutAlign="start none">
-                                                <textarea matInput placeholder="What are the main raw materials?(MEG Only)" formControlName="main_raw_materials"></textarea>
+                                        <mat-form-field style="width: 100%">
-                                                <mat-error *ngIf="submitted && f.main_raw_materials.hasError('required')" class="mat-text-warn">You must Include Raw Material Details.</mat-error>
+                                            <input matInput placeholder="Raw Material Name" formControlName="manufacturing_raw_material_name">
-                                            </mat-form-field>
+                                        </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%">
-                            <div fxLayout="row wrap">
+                                            <input matInput placeholder="Contact Person Name" formControlName="manufacturing_contact_person_name">
-                              <div fxFlex="100">
+                                        </mat-form-field>
-                                 <mat-card>
+                                    </div>
-                                    <!-- <mat-card-title></mat-card-title> -->
+                                    <div fxLayout="row wrap" fxLayoutGap="2px" fxLayoutAlign="start none">
-                                      <mat-card-content formArrayName="supplier_details" fxFill>
+                                        <mat-form-field style="width: 100%">
-                                        <div *ngFor="let sup of _supplierQuesFrom.controls.supplier_details['controls']; let i=index" [formGroupName]="i">
+                                            <input matInput placeholder="Contact Person Mobile Number" formControlName="manufacturing_contact_person_mobile_number">
-                                          
+                                        </mat-form-field>
-                                              <div fxLayout="row wrap" fxLayoutGap="12px" fxLayoutAlign="start none">
+                                        <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">
+                                                <mat-option *ngFor="let pm of m_paymentModeType" [value]="pm.id">{{ pm.name }}</mat-option>
-                                                      <input matInput placeholder="Supplier Name" formControlName="supplier_name" required>
+                                            </mat-select>
-                                                      <!-- <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>
-                                                    </mat-form-field>
+                                        <mat-form-field style="width: 100%" *ngIf="items.get('manufacturing_payment_type').value == 3">
-                                                  </div>
+                                            <input matInput placeholder="Number of days of credit provided" formControlName="manufacturing_credit_days">
-                                                  <div fxFlex="30">
+                                        </mat-form-field>
-                                                    <mat-form-field class="ml-xs example-full-width">
+                                    </div>
-                                                      <input matInput placeholder="Contact Person Name" formControlName="contact_person" required>
+                                    <div align="end">
-                                                      <!-- <mat-error *ngIf="sup.controls['contact_person'].hasError('required') && sup.controls['contact_person'].touched" class="mat-text-warn">Contact Person Name Required.</mat-error> -->
+                                        <span *ngIf="item.controls.main_raw_materials.controls.length > 1" (click)="removeRawMaterials(l)">
-                                                    </mat-form-field>
+                                            <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>
-                                                  </div>
+                                        </span>
-                                                  <div fxFlex="30">
+                                    </div>
-                                                    <mat-form-field class="ml-xs example-full-width">
+                                </mat-card>
-                                                      <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>
-                                                  <div *ngIf="sup.get('payment_mode').value == 1 ||  sup.get('payment_mode').value == 3" fxFlex="30">
-                                                    <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">
-                                                    <mat-form-field class="ml-xs example-full-width">
-                                                      <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>
-                                <div fxFlex="100" align="end"> 
+                        <div>
-                                        <button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Supplier Details" matTooltipPosition="above"
+                            <mat-form-field style="width: 100%">
-                                            class="mr-1 mb-1 hover-icon" (click)="addSupplierDetails($event); false"><mat-icon>add</mat-icon></button>
+                                <input matInput placeholder="% of total manufacturing raw materials credit values" formControlName="main_raw_materials_total_payments_percent_on_credit"
-                                </div>
+                                    type="number">
-                            </mat-dialog-actions>
+                            </mat-form-field>
-                          </mat-card>
+                            <div fxFlex="100" align="end">
-                      </ng-template>
+                                <button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Supplier Details" matTooltipPosition="above"
-                    </mat-tab>
+                                    class="mr-1 mb-1 hover-icon" (click)="addMoreRawMaterials($event); false"><mat-icon>add</mat-icon></button>
-                    <mat-tab label="Docs">
+                            </div>
-                      <ng-template matTabContent>
+                        </div>
-                           <div ngxViewer>
+                    </div>
-                              <div fxLayout="row wrap" style="padding:20px;">
+                </div>
-                                <div fxFlex="100">
+            </mat-card>
-                                  <div fxFlex="20" class="m-gap p-gap">
+            <mat-card *ngIf="tradingForm">
-                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
+                <h5 style="margin: 12px;">Trading Product Details</h5>
-                                          <div class="p-list">                                                                           
+                <div formArrayName="trade_details">
-                                            <div class="top"> <img src="https://picsum.photos/2000/1500/?random=1" alt="Image 1"></div>   
+                    <div *ngFor="let item of _supplierQuesFrom.controls.trade_details['controls']; let i=index" [formGroupName]="i">
-                                          </div>
+                        <div formArrayName="trading_products">
-                                      </div>
+                            <div *ngFor="let items of item.controls.trading_products['controls']; let l=index" [formGroupName]="l">
-                                  </div>
+                                <mat-card style="margin: 12px;">
-                                  <div fxFlex="20" class="m-gap p-gap">
+                                    <h6 style="margin: 12px;">Trading Product #{{l+1}}</h6>
-                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
+                                    <div fxLayout="row wrap" fxLayoutGap="2px" fxLayoutAlign="start none">
-                                          <div class="p-list">
+                                        <mat-form-field style="width: 100%">
-                                              <div class="top"> <img src="https://picsum.photos/2000/1500/?random=2" alt="Image 2"></div>                                                    
+                                            <input matInput placeholder="Trade Product Name" formControlName="trade_product_name">
-                                          </div>
+                                        </mat-form-field>
-                                      </div>
+                                        <mat-form-field style="width: 100%">
-                                  </div>
+                                            <input matInput placeholder="Supplier Name" formControlName="trade_supplier_name">
-                                  <div fxFlex="20" class="m-gap p-gap">
+                                        </mat-form-field>
-                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
+                                        <mat-form-field style="width: 100%">
-                                          <div class="p-list">  
+                                            <input matInput placeholder="Contact Person Name" formControlName="trade_product_contact_person_name">
-                                              <div class="top"><img src="https://picsum.photos/2000/1500/?random=3" alt="Image 3"></div>                                                          
+                                        </mat-form-field>
-                                          </div>
+                                    </div>
-                                      </div>
+                                    <div fxLayout="row wrap" fxLayoutGap="2px" fxLayoutAlign="start none">
-                                  </div>  
+                                        <mat-form-field style="width: 100%">
-                                  <div fxFlex="20" class="m-gap p-gap">
+                                            <input matInput placeholder="Contact Person Mobile Number" formControlName="trade_product_contact_person_mobile_number">
-                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
+                                        </mat-form-field>
-                                          <div class="p-list">
+                                        <mat-form-field style="width: 100%">
-                                              <div class="top"> <img src="https://picsum.photos/2000/1500/?random=2" alt="Image 2"></div>                                                    
+                                            <mat-select (selectionChange)="selectedPM($event)" placeholder="Payment Type" formControlName="trade_product_payment_type">
-                                          </div>
+                                                <mat-option *ngFor="let pm of m_paymentModeType" [value]="pm.id">{{ pm.name }}</mat-option>
-                                      </div>
+                                            </mat-select>
-                                  </div>
+                                        </mat-form-field>
-                                    <div fxFlex="20" class="m-gap p-gap">
+                                        <mat-form-field style="width: 100%" *ngIf="items.get('trade_product_payment_type').value == 3">
-                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
+                                            <input matInput placeholder="Number of days of credit provided" formControlName="trade_product_credit_days">
-                                          <div class="p-list">  
+                                        </mat-form-field>
-                                              <div class="top"><img src="https://picsum.photos/2000/1500/?random=3" alt="Image 3"></div>                                                          
+                                    </div>
-                                          </div>
+                                    <div align="end">
-                                      </div>
+                                        <span *ngIf="item.controls.trading_products.controls.length > 1" (click)="removeTradingProduct(l)">
-                                  </div>
+                                                <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>
-                                  <div fxFlex="20" class="m-gap p-gap">
+                                                </span>
-                                      <div class="p-list-main mb-2" style="width: 60%;height: auto;">
+                                    </div>
-                                          <div class="p-list">                                                                           
+                                </mat-card>
-                                            <div class="top"> <img src="https://picsum.photos/2000/1500/?random=1" alt="Image 1"></div>   
+                            </div>
-                                          </div>
+                        </div>
-                                      </div>
+                        <div>
-                                  </div>
+                            <mat-form-field style="width: 100%">
-                                </div>
+                                <input matInput placeholder="% of total trading product credit values" formControlName="trading_products_total_payments_percent_on_credit"
-                                <div fxFlex="row">
+                                    type="number">
-                                   <div fxFlex="100" class="m-gap p-gap">
+                            </mat-form-field>
-                                          <div fxLayout="row" fxLayoutWrap="wrap">
+                            <div fxFlex="100" align="end">
-                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                                <button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Supplier Details" matTooltipPosition="above"
-                                                  <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>
+                                    class="mr-1 mb-1 hover-icon" (click)="addMoretradeProduct($event); false"><mat-icon>add</mat-icon></button>
-                                              </div>
+                            </div>
-                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                        </div>
-                                                  <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 class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+            </mat-card>
-                                                  <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>
+            <mat-card *ngIf="serviceProviderForm">
-                                              </div>
+                <h5 style="margin: 12px;">Service Provider Product Details</h5>
-                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+                <div style="text-align: center; margin: 12px;">Service Provider Details Not applicable here !!</div>
-                                                  <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>
+            </mat-card>
-                                              </div>
+        </mat-dialog-content>
-                                              <div class="text-center mb-2 hover-icon" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
+        <mat-dialog-actions>
-                                                  <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>    
-    </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>
+                    <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>
-          <div fxFlex="40" align="end">            
+            <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="Save" matTooltipPosition="above" type="submit"><mat-icon>save</mat-icon></button>
+            </div>
-            <!--<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>-->
+        </mat-dialog-actions>
-          </div>
+    </form>
-    </mat-dialog-actions>
+</div>
-    
-</form>
-</div>
-<notifier-container></notifier-container>

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 {
@@ -31,69 +31,313 @@ 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(
-              notifier: NotifierService,
+    notifier: NotifierService,
-              private _formBuilder: FormBuilder,
+    private _formBuilder: FormBuilder,
-              private pdTrigerService: PdTrigerService,
+    private pdTrigerService: PdTrigerService,
-              @Inject(MAT_DIALOG_DATA) public pd_all_details: any) { 
+    @Inject(MAT_DIALOG_DATA) public pd_all_details: any) {
-                this.pdid = this.pd_all_details.pdmaster_details.pd_id;
+    this.pdid = this.pd_all_details.pdmaster_details.pd_id;
-                this.form_id = 1;
+    this.form_id = 1;
-                this.notifier = notifier;
+    this.notifier = notifier;
   }
   public viewerOptions: any = {
-  navbar: false,
+    navbar: false,
-  toolbar: {
+    toolbar: {
-    zoomIn: 4,
+      zoomIn: 4,
-    zoomOut: 4,
+      zoomOut: 4,
-    oneToOne: 4,
+      oneToOne: 4,
-    reset: 4,
+      reset: 4,
-    prev: 4,
+      prev: 4,
-    play: {
+      play: {
-      show: 4,
+        show: 4,
-      size: 'large',
+        size: 'large',
-    },
+      },
-    next: 4,
+      next: 4,
-    rotateLeft: 4,
+      rotateLeft: 4,
-    rotateRight: 4,
+      rotateRight: 4,
-    flipHorizontal: 4,
+      flipHorizontal: 4,
-    flipVertical: 4,
+      flipVertical: 4,
-  }
+    }
-};
+  };
 
+  noRecordsFound: Boolean = false;
   ngOnInit() {
-  //  this.getM_FreqOfPurchase();
+
+    this.pdTrigerService.getTypeofActivityForSuppliedInfoForm(this.pdid).subscribe(data => {
+      // if(data.dataStatus === undefined){
+      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"
+          }
+        ]
+      };
+      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) {
+     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(
+  // this.pdTrigerService.getAllMasterDatas('FREQUENCY').subscribe(
-   //   data => {
+  //   data => {
-   //     this.m_freqOfPurchase = data.records.filter(data => data.isactive == 1);
+  //     this.m_freqOfPurchase = data.records.filter(data => data.isactive == 1);
-   //   },
+  //   },
-   //   error => {
+  //   error => {
-        // this.notifier.notify('warning', 'No Category Records Found.!');
+  // this.notifier.notify('warning', 'No Category Records Found.!');
-        // this.m_assets_type = "No Category Records Found.";
+  // this.m_assets_type = "No Category Records Found.";
-   ///   }
+  ///   }
-   // )
+  // )
- // }
+  // }
 
-   getM_PaymentModeType() {
+  getM_PaymentModeType() {
     this.pdTrigerService.getAllMasterDatas('PAYMENTMODE').subscribe(
       data => {
         this.m_paymentModeType = data.records.filter(data => data.isactive == 1);
@@ -106,123 +350,8 @@ 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() {
     this.submitted = true;
@@ -234,7 +363,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 => {
@@ -253,8 +382,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/view-pd/view-pd.component.html

@@ -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

@@ -5,4 +5,7 @@
 }
 .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';
@@ -273,6 +273,7 @@ const pdCustomNotifierOptions: NotifierOptions = {
     PdfViewerModule,
     MatCardModule,
     MatIconModule,
+    MatAutocompleteModule,
     MatInputModule,
     MatRadioModule,
     MatTableModule,
@@ -282,6 +283,7 @@ const pdCustomNotifierOptions: NotifierOptions = {
     MatToolbarModule,
     FlexLayoutModule,
     NgxDatatableModule,
+    MatChipsModule,
     FormsModule,MatSlideToggleModule,
     MatSelectModule, MatListModule,MatGridListModule, MatTabsModule, MatBadgeModule, MatCheckboxModule,MatStepperModule,MatSidenavModule ,MatMenuModule, MatButtonToggleModule,
     ReactiveFormsModule,

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', []))
+    )
+  }
 
 
   
@@ -429,4 +435,17 @@ convertNumberToWords(amount) {
   //     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', []))
+          );
+   }
+   
 }