From 338e11564621d67cc71663274fe6369cf3275fe6 Mon Sep 17 00:00:00 2001
From: saravanakumarkandasami <saravanakumar.k@venbainfotech.com>
Date: Tue, 23 Oct 2018 18:11:07 +0530
Subject: [PATCH] Dashboard UI

---
 .../app/dashboard/dashboard.component.html    |  11 +-
 .../src/app/dashboard/dashboard.component.ts  |  16 +-
 .../list-pd/add-pd/add-pd.component.html      |   8 +-
 .../manage-pd/list-pd/list-pd.component.html  | 271 +++++++++---------
 4 files changed, 155 insertions(+), 151 deletions(-)

diff --git a/ng6-seed/src/app/dashboard/dashboard.component.html b/ng6-seed/src/app/dashboard/dashboard.component.html
index a0a678d0f..0d806f948 100644
--- a/ng6-seed/src/app/dashboard/dashboard.component.html
+++ b/ng6-seed/src/app/dashboard/dashboard.component.html
@@ -24,8 +24,7 @@
            <hr> 
             <mat-card-content>
                 <div class="w-100 h-300px">
-
-                    <ngx-charts-gauge [scheme]="colorScheme" [results]="full" [min]="0" [max]="100" [angleSpan]="240" [startAngle]="-120" [units]="'PD'" [bigSegments]="10" [smallSegments]="5" >
+                    <ngx-charts-gauge    [view]="view"  [scheme]="colorScheme" [results]="full" [min]="0" [max]="100" [angleSpan]="240" [startAngle]="-120" [units]="'PD'" [bigSegments]="10" [smallSegments]="5" >
                     </ngx-charts-gauge>
                 </div>
             </mat-card-content> 
@@ -35,12 +34,10 @@
         <mat-card>
            <mat-card-title>Smart</mat-card-title>
            <mat-card-subtitle></mat-card-subtitle>
-           <hr> 
-             
+           <hr>      
             <mat-card-content>
                 <div class="w-100 h-300px">
-
-                    <ngx-charts-gauge [scheme]="colorScheme" [results]="smart" [min]="0" [max]="100" [angleSpan]="240" [startAngle]="-120" [units]="'PD'" [bigSegments]="10" [smallSegments]="5" >
+                    <ngx-charts-gauge  [view]="view" [scheme]="colorScheme" [results]="smart" [min]="0" [max]="100" [angleSpan]="240" [startAngle]="-120" [units]="'PD'" [bigSegments]="10" [smallSegments]="5" >
                     </ngx-charts-gauge>
                 </div>
             </mat-card-content> 
@@ -54,7 +51,7 @@
             <mat-card-content>
                 <div class="w-100 h-300px">
 
-                    <ngx-charts-gauge [scheme]="colorScheme" [results]="tele" [min]="0" [max]="100" [angleSpan]="240" [startAngle]="-120" [units]="'PD'" [bigSegments]="10" [smallSegments]="5" >
+                    <ngx-charts-gauge  [view]="view" [scheme]="colorScheme" [results]="tele" [min]="0" [max]="100" [angleSpan]="240" [startAngle]="-120" [units]="'PD'" [bigSegments]="10" [smallSegments]="5" >
                     </ngx-charts-gauge>
                 </div>
             </mat-card-content> 
diff --git a/ng6-seed/src/app/dashboard/dashboard.component.ts b/ng6-seed/src/app/dashboard/dashboard.component.ts
index 8df0e2279..7d56ca23f 100644
--- a/ng6-seed/src/app/dashboard/dashboard.component.ts
+++ b/ng6-seed/src/app/dashboard/dashboard.component.ts
@@ -11,19 +11,25 @@ export class DashboardComponent {
    
   public showXAxis = true;
   public showYAxis = true;
-  public gradient = false;
+  public gradient = true;
   public showLegend = false;
   public showXAxisLabel = true;
   public xAxisLabel = 'Status';
   public showYAxisLabel = true;
-  public yAxisLabel = 'PD';
+  public yAxisLabel = 'PD'; 
+  view: any[];
+  width = 350;
+  height= 250;
   public colorScheme = {
     domain: ['#673ab7', '#f44336', '#009688 ', '#2196f3', '#234278 ', '#2a1653']
   }; 
-  public autoScale = false;
+  public autoScale = true;
   constructor() {
-     
-  }
+     }
+  ngOnInit(){ 
+  this.view = [this.width, this.height];
+ 
+ }
   //Full Pd Data
   full: Object[] = [
     {
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/add-pd/add-pd.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/add-pd/add-pd.component.html
index 4735d7a7e..b856fec45 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/add-pd/add-pd.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/add-pd/add-pd.component.html
@@ -1,4 +1,4 @@
-<mat-card class="p-1"> 
+
         <form [formGroup]="_PDtriggerForm" (submit)="submitPdDetails(_PDtriggerForm.value,PDTriggerStatus)">
         
             <mat-card-content>
@@ -212,7 +212,7 @@
 				  <h5>Co-Applicant</h5>
                           <!-- <button _ngcontent-c29="" class="mr-1 mb-2 mat-fab1 mat-accent" mat-fab="" (click)="addCoApplicant(createWithLongContent)"><span class="mat-button-wrapper"><mat-icon _ngcontent-c29="" class="mat-icon material-icons" role="img" aria-hidden="true">add</mat-icon></span><div class="mat-button-ripple mat-ripple mat-button-ripple-round" matripple=""></div><div class="mat-button-focus-overlay"></div></button> -->
                                       <!--<button mat-fab class="mr-1 mb-1" color="primary" (click)="addCoApplicant()"><mat-icon>add</mat-icon></button>-->
-					   <button  mat-fab class="mr-1 mb-1"  color="primary" style="opacity: 0.5;" (click)="addCoApplicant()"><mat-icon>group_add</mat-icon><div class="mat-button-ripple mat-ripple" matripple=""></div><div class="mat-button-focus-overlay"></div></button> 
+					   <button  mat-fab class="mr-1 mb-1"  color="primary" style="opacity: 0.5;border:2px;border-radius: 50%;" (click)="addCoApplicant()"><mat-icon>group_add</mat-icon><div class="mat-button-ripple mat-ripple" matripple=""></div><div class="mat-button-focus-overlay"></div></button> 
                           <!-- <button mat-raised-button mat-button-sm color="primary" (click)="addCoApplicant()" type="button">Add More Co-Applicant</button> -->
         
                        </mat-card>
@@ -267,11 +267,11 @@
                 (click)="onReset()"><mat-icon>settings_backup_restore</mat-icon></button>
             
             <!-- <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Click To Draft" matTooltipPosition="above" type="button" (click)="addCoApplicant()"><mat-icon>drafts</mat-icon></button> -->
-            <button  mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" (click)="submitPdDetails(_PDtriggerForm.value,draftStatus)" matTooltip="PD Draft" matTooltipPosition="above"><mat-icon>drafts</mat-icon></button> 
+            <button  mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" (click)="submitPdDetails(_PDtriggerForm.value,draftStatus)" matTooltip="PD Draft" matTooltipPosition="above"><mat-icon>description</mat-icon></button> 
 
           <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="submit" matTooltip="PD Process" matTooltipPosition="above" [disabled]="!enablePDButton || !_PDtriggerForm.valid "><mat-icon>save</mat-icon></button>
       </mat-card-actions>
        </form>
-      </mat-card>
+     
       
                   
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/list-pd.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/list-pd.component.html
index 7e47340fc..0af9a232e 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/list-pd.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/list-pd.component.html
@@ -1,141 +1,142 @@
 
 <mat-card>
-  <mat-card-content>
-  <div fxLayout="row" *ngIf="viewPdList" fxLayoutAlign="start center" class="filter-header">
-    <div *ngIf="!noRecordFound" class="ml-xs mr-xs" style="width: 80%;">
-        <mat-form-field dividerColor="primary" class="ml-xs mr-xs" style="width: 30%;">
-          <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
-        </mat-form-field>
+    <mat-card-content>
+    <div fxLayout="row" *ngIf="viewPdList" fxLayoutAlign="start center" class="filter-header">
+      <div *ngIf="!noRecordFound" class="ml-xs mr-xs" style="width: 80%;">
+          <mat-form-field dividerColor="primary" class="ml-xs mr-xs" style="width: 30%;">
+            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+          </mat-form-field>
+      </div>
+      <div *ngIf="noRecordFound" class="nocontent ml-xs mr-xs" style="width: 80%;">No records found</div>  
+      <div class="ml-xs mr-xs"  style="width: 20%;text-align:right" *ngIf="viewPdList">
+        <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 color="primary" (click)="addPdDetails()" class="mr-1 mb-1" matTooltip="Add PD" matTooltipPosition="above"><mat-icon>add</mat-icon></button>
     </div>
-    <div *ngIf="noRecordFound" class="nocontent ml-xs mr-xs" style="width: 80%;">No records found</div>  
-    <div class="ml-xs mr-xs"  style="width: 20%;text-align:right" *ngIf="viewPdList">
-      <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 color="primary" (click)="addPdDetails()" class="mr-1 mb-1" matTooltip="Add PD" matTooltipPosition="above"><mat-icon>add</mat-icon></button>
-  </div>
-  </div>
-  <mat-card *ngIf="viewPdList">
-    <mat-tab-group>
-      <mat-tab>
-        <ng-template mat-tab-label>All</ng-template>
-        <mat-card-content>
-            <div class="card-comment-widget">
-                <mat-list *ngIf="pdList.length > 0">
-                   <mat-list-item  *ngFor="let details of dataSource.connect() | async" style="border-bottom:1px solid #f1f7f5">
-                      <img mat-list-avatar src="assets/images/lime.jpg" alt="">
-                      <!-- {{details.applicat_details[0].applicant_name}} -->
-                      <p *ngIf="details.applicat_details" mat-line>{{details.applicat_details[0].applicant_name}} </p>
+    </div>
+    <mat-card *ngIf="viewPdList">
+      <mat-tab-group>
+        <mat-tab>
+          <ng-template mat-tab-label>All</ng-template>
+          <mat-card-content>
+              <div class="card-comment-widget">
+                  <mat-list *ngIf="pdList.length > 0">
+                     <mat-list-item  *ngFor="let details of dataSource.connect() | async" style="border-bottom:1px solid #f1f7f5">
+                        <!--<img mat-list-avatar src="assets/images/lime.jpg" alt="">-->
+                        <!-- {{details.applicat_details[0].applicant_name}} -->
+                        <p *ngIf="details.applicat_details" mat-line>{{details.applicat_details[0].applicant_name}} </p>
+                        
+                        <p *ngIf="details.lender_full_name" mat-line><a style="padding-right: 7%;">{{details.lender_full_name}} </a><a style="padding-right: 7%">{{details.lender_applicant_id}}</a>{{details.pd_date_of_initiation}}</p>
+                        <p *ngIf="details.product_abbr" mat-line><a style="padding-right: 7%;">{{details.product_abbr}}/{{details.subproduct_abbr}}/{{details.customer_segment_abbr}}</a><a style="padding-right: 7%;"><span *ngIf="details.loan_amount" class="hover-icon"><i class="fa-1x fa fa-rupee">&nbsp;</i>{{details.loan_amount}}</span></a><span class="hover-icon"><i class="fa-1x fa fa-map-marker"> </i> &nbsp;{{details.city_name}}/{{details.state_name}}-{{details.pincode}}</span></p>
+                        <!-- <span class="text-mat mat-text-muted">Chennai</span> -->
+    
+                       <!-- <div class="comment-time">
+                            <button mat-raised-button mat-icon-button mat-button-sm class="mr-1 mb-1" type="button" color="primary" (click)="editPdDetails(details.pd_id)"><mat-icon>edit</mat-icon></button>
+                            
+                        </div> -->
+                        <div class="comment-time">
                       
-                      <p *ngIf="details.lender_full_name" mat-line><a style="padding-right: 7%;">{{details.lender_full_name}} </a><a style="padding-right: 7%">{{details.lender_applicant_id}}</a>{{details.pd_date_of_initiation}}</p>
-                      <p *ngIf="details.product_abbr" mat-line><a style="padding-right: 7%;">{{details.product_abbr}}/{{details.subproduct_abbr}}/{{details.customer_segment_abbr}}</a><a style="padding-right: 7%;"><span *ngIf="details.loan_amount" class="hover-icon"><i class="fa-1x fa fa-rupee">&nbsp;</i>{{details.loan_amount}}</span></a><span class="hover-icon"><i class="fa-1x fa fa-map-marker"> </i> &nbsp;{{details.city_name}}/{{details.state_name}}-{{details.pincode}}</span></p>
-                      <!-- <span class="text-mat mat-text-muted">Chennai</span> -->
-  
-                     <!-- <div class="comment-time">
-                          <button mat-raised-button mat-icon-button mat-button-sm class="mr-1 mb-1" type="button" color="primary" (click)="editPdDetails(details.pd_id)"><mat-icon>edit</mat-icon></button>
-                          
-                      </div> -->
-                      <div class="comment-time">
-                    
-                          <!-- <button mat-raised-button mat-icon-button mat-button-sm class="mr-1 mb-1" color="accent" type="button" (click)="viewPdDetails(details.pd_id)"><mat-icon>visibility</mat-icon></button> -->
-                          <button mat-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="viewPDDetails(details.pd_id)"><mat-icon>visibility</mat-icon></button>
-   
-                        </div> 
-                      
-                   </mat-list-item>
-                   
-                   </mat-list>
-                   <mat-list *ngIf="recordStatus">
-                    <mat-list-item>
-                      <p mat-line>No Record Found ...</p>
-   
-                    </mat-list-item>
-                   </mat-list>
-             </div>
-        </mat-card-content>
-  
-        <mat-card-actions *ngIf="!recordStatus">
-          <mat-paginator #paginator class="mat-elevation-z1" [length]="pdList.length" [pageIndex]="pageIndex" [pageSize]="pageSize"
-          [pageSizeOptions]="[5, 10, 25, 100]" (page)="pageEvent = $event; pageChange($event)">
-        </mat-paginator>      
-      </mat-card-actions>
-      </mat-tab>
-     <!-- <mat-tab>
-        <ng-template mat-tab-label>Confirmed PD Details</ng-template>
-        <mat-card-content>
-          <mat-grid-list cols="2" [rowHeight]="ratio" gutterSize="4px">
-            <mat-grid-tile *ngFor="let tile of tiles" [style.background]="'lightblue'">
-              {{tile.text}}
-            </mat-grid-tile>
-          </mat-grid-list>
-          <div  fxLayout="row" fxLayoutAlign="start center" class="mt-2">
-            <mat-form-field>
-              <input matInput placeholder="Change ratio" [(ngModel)]="ratio">
-            </mat-form-field>
-          </div>
-        </mat-card-content>
-      </mat-tab>-->
+                            <!-- <button mat-raised-button mat-icon-button mat-button-sm class="mr-1 mb-1" color="accent" type="button" (click)="viewPdDetails(details.pd_id)"><mat-icon>visibility</mat-icon></button> -->
+                            <button mat-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="viewPDDetails(details.pd_id)"><mat-icon>visibility</mat-icon></button>
+     
+                          </div> 
+                        
+                     </mat-list-item>
+                     
+                     </mat-list>
+                     <mat-list *ngIf="recordStatus">
+                      <mat-list-item>
+                        <p mat-line>No Record Found ...</p>
+     
+                      </mat-list-item>
+                     </mat-list>
+               </div>
+          </mat-card-content>
+    
+          <mat-card-actions *ngIf="!recordStatus">
+            <mat-paginator #paginator class="mat-elevation-z1" [length]="pdList.length" [pageIndex]="pageIndex" [pageSize]="pageSize"
+            [pageSizeOptions]="[5, 10, 25, 100]" (page)="pageEvent = $event; pageChange($event)">
+          </mat-paginator>      
+        </mat-card-actions>
+        </mat-tab>
+       <!-- <mat-tab>
+          <ng-template mat-tab-label>Confirmed PD Details</ng-template>
+          <mat-card-content>
+            <mat-grid-list cols="2" [rowHeight]="ratio" gutterSize="4px">
+              <mat-grid-tile *ngFor="let tile of tiles" [style.background]="'lightblue'">
+                {{tile.text}}
+              </mat-grid-tile>
+            </mat-grid-list>
+            <div  fxLayout="row" fxLayoutAlign="start center" class="mt-2">
+              <mat-form-field>
+                <input matInput placeholder="Change ratio" [(ngModel)]="ratio">
+              </mat-form-field>
+            </div>
+          </mat-card-content>
+        </mat-tab>-->
+        <mat-tab>
+          <ng-template mat-tab-label>In Progress </ng-template>
+          <mat-card-content>
+            <!--<mat-grid-list cols="2" rowHeight="fit" [gutterSize]="ratioGutter"
+                          [style.height]="fitListHeight">
+              <mat-grid-tile *ngFor="let tile of tiles" [style.background]="'#F1EBBA'">
+                {{tile.text}}
+              </mat-grid-tile>
+            </mat-grid-list>
+            <div  fxLayout="row" fxLayoutAlign="start center" class="mt-2">
+              <mat-form-field>
+                <input matInput placeholder="Change list height" [(ngModel)]="fitListHeight">
+              </mat-form-field>
+              <mat-form-field>
+                <input matInput placeholder="Change gutter" type="number" [(ngModel)]="ratioGutter">
+              </mat-form-field>
+            </div>-->
+          </mat-card-content>
+        </mat-tab>
       <mat-tab>
-        <ng-template mat-tab-label>In Progress </ng-template>
-        <mat-card-content>
-          <!--<mat-grid-list cols="2" rowHeight="fit" [gutterSize]="ratioGutter"
-                        [style.height]="fitListHeight">
-            <mat-grid-tile *ngFor="let tile of tiles" [style.background]="'#F1EBBA'">
-              {{tile.text}}
-            </mat-grid-tile>
-          </mat-grid-list>
-          <div  fxLayout="row" fxLayoutAlign="start center" class="mt-2">
-            <mat-form-field>
-              <input matInput placeholder="Change list height" [(ngModel)]="fitListHeight">
-            </mat-form-field>
-            <mat-form-field>
-              <input matInput placeholder="Change gutter" type="number" [(ngModel)]="ratioGutter">
-            </mat-form-field>
-          </div>-->
-        </mat-card-content>
-      </mat-tab>
-    <mat-tab>
-        <ng-template mat-tab-label>Scheduled </ng-template>
-        <mat-card-content>
-          <!--<mat-grid-list cols="2" rowHeight="fit" [gutterSize]="ratioGutter"
-                        [style.height]="fitListHeight">
-            <mat-grid-tile *ngFor="let tile of tiles" [style.background]="'#F1EBBA'">
-              {{tile.text}}
-            </mat-grid-tile>
-          </mat-grid-list>
-          <div  fxLayout="row" fxLayoutAlign="start center" class="mt-2">
-            <mat-form-field>
-              <input matInput placeholder="Change list height" [(ngModel)]="fitListHeight">
-            </mat-form-field>
-            <mat-form-field>
-              <input matInput placeholder="Change gutter" type="number" [(ngModel)]="ratioGutter">
-            </mat-form-field>
-          </div>-->
-        </mat-card-content>
-      </mat-tab>
-    <mat-tab>
-        <ng-template mat-tab-label>Completed </ng-template>
-        <mat-card-content>
-          <!--<mat-grid-list cols="2" rowHeight="fit" [gutterSize]="ratioGutter"
-                        [style.height]="fitListHeight">
-            <mat-grid-tile *ngFor="let tile of tiles" [style.background]="'#F1EBBA'">
-              {{tile.text}}
-            </mat-grid-tile>
-          </mat-grid-list>
-          <div  fxLayout="row" fxLayoutAlign="start center" class="mt-2">
-            <mat-form-field>
-              <input matInput placeholder="Change list height" [(ngModel)]="fitListHeight">
-            </mat-form-field>
-            <mat-form-field>
-              <input matInput placeholder="Change gutter" type="number" [(ngModel)]="ratioGutter">
-            </mat-form-field>
-          </div>-->
-        </mat-card-content>
-      </mat-tab>
-      
-    </mat-tab-group>
+          <ng-template mat-tab-label>Scheduled </ng-template>
+          <mat-card-content>
+            <!--<mat-grid-list cols="2" rowHeight="fit" [gutterSize]="ratioGutter"
+                          [style.height]="fitListHeight">
+              <mat-grid-tile *ngFor="let tile of tiles" [style.background]="'#F1EBBA'">
+                {{tile.text}}
+              </mat-grid-tile>
+            </mat-grid-list>
+            <div  fxLayout="row" fxLayoutAlign="start center" class="mt-2">
+              <mat-form-field>
+                <input matInput placeholder="Change list height" [(ngModel)]="fitListHeight">
+              </mat-form-field>
+              <mat-form-field>
+                <input matInput placeholder="Change gutter" type="number" [(ngModel)]="ratioGutter">
+              </mat-form-field>
+            </div>-->
+          </mat-card-content>
+        </mat-tab>
+      <mat-tab>
+          <ng-template mat-tab-label>Completed </ng-template>
+          <mat-card-content>
+            <!--<mat-grid-list cols="2" rowHeight="fit" [gutterSize]="ratioGutter"
+                          [style.height]="fitListHeight">
+              <mat-grid-tile *ngFor="let tile of tiles" [style.background]="'#F1EBBA'">
+                {{tile.text}}
+              </mat-grid-tile>
+            </mat-grid-list>
+            <div  fxLayout="row" fxLayoutAlign="start center" class="mt-2">
+              <mat-form-field>
+                <input matInput placeholder="Change list height" [(ngModel)]="fitListHeight">
+              </mat-form-field>
+              <mat-form-field>
+                <input matInput placeholder="Change gutter" type="number" [(ngModel)]="ratioGutter">
+              </mat-form-field>
+            </div>-->
+          </mat-card-content>
+        </mat-tab>
+        
+      </mat-tab-group>
+    </mat-card>
+  
+  <notifier-container></notifier-container>
+  <router-outlet></router-outlet>	
+  </mat-card-content>
   </mat-card>
-
-<notifier-container></notifier-container>
-<router-outlet></router-outlet>	
-</mat-card-content>
-</mat-card>
-
+  
+  
\ No newline at end of file