From a0cf3049254f36ebc75fc4cef2865ad5a9321650 Mon Sep 17 00:00:00 2001
From: saravanakumarkandasami <saravanakumar.k@venbainfotech.com>
Date: Wed, 24 Oct 2018 15:19:50 +0530
Subject: [PATCH] PD Mapview UI

---
 .../map-pd-view/map-pd-view.component.html    | 141 +++++++++---------
 .../pd-allocation.component.html              |  20 +--
 .../smart-pd-allocation.component.html        |  13 +-
 .../list-pd/view-pd/view-pd.component.html    |   2 +-
 4 files changed, 90 insertions(+), 86 deletions(-)

diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/map-pd-view/map-pd-view.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/map-pd-view/map-pd-view.component.html
index c597cb79a..6ec4dce08 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/map-pd-view/map-pd-view.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/map-pd-view/map-pd-view.component.html
@@ -1,75 +1,74 @@
+
 <div fxLayout="row">
-<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%;">
-          <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
-        </mat-form-field>
-        <div style="text-align:right;margin-top: -6%;">
-            <button mat-fab color="primary" (click)="goList()" class="mr-1 mb-1"><mat-icon>close</mat-icon></button>
+    <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%;">
+              <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+            </mat-form-field>
+           
+        </div>
+      
+      <div>
+          <div    style="text-align:right;position:absolute;z-index:2;right:1px">
+              <button mat-fab color="primary" (click)="goList()"><mat-icon>close</mat-icon></button>
+            </div>
+            <div   fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25" style="position:absolute;z-index:1">
+                
+                  <div [style.overflow]="'auto'" [style.height.px]="'500'" *ngIf="pdList.length > 0">
+                      <mat-expansion-panel>
+                          <mat-expansion-panel-header>
+                            PD Details
+                          </mat-expansion-panel-header>
+                           <div>
+                              <input style="border-bottom: 1px solid #dcd9d9;" matInput (keyup)="applyFilter($event.target.value)"  placeholder="Search">
+                
+                              </div> 
+                          <mat-card class="mb-1" *ngFor="let details of dataSource.connect() | async">
+                     
+                              <mat-card-title *ngIf="details.applicat_details" style="margin-bottom: 0px;">
+                                <div fxLayout="row" fxFlex="100">
+                                  <div fxFlex="55">
+                                      {{details.applicat_details[0].applicant_name}}
+                                  </div>
+                                  <div fxFlex="45">
+                                      <button  mat-raised-button mat-button-sm mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="pdAllocationTo(details)"><mat-icon>group_add</mat-icon></button>
+                                      <button  mat-raised-button mat-button-sm mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="scheduleDetails(details)"><mat-icon>schedule</mat-icon></button>                       
+                                  </div>
+                                </div>                   
+                              </mat-card-title>
+                              <mat-card-content class="mb-1" style="padding: 0% 0% 0% 6%;">                                   
+                                  <p>{{details.lender_full_name}}({{details.lender_applicant_id}})</p>
+                                <p class="hover-icon"><i *ngIf="details.city_name" class="fa-1x fa fa-map-marker">&nbsp;</i>{{details.city_name}}/{{details.state_name}}-{{details.pincode}}</p>                    
+                                <p *ngIf="details.product_abbr">{{details.product_abbr}}/{{details.subproduct_abbr}}</p>
+                                <p> {{details.customer_segment_abbr}}<span *ngIf="details.loan_amount"  style="padding-left: 4%;" class="hover-icon"><i class="fa-1x fa fa-rupee">&nbsp;</i>{{details.loan_amount}}</span></p>
+                                <p>{{details.pd_date_of_initiation}}</p>
+                              </mat-card-content> 
+                            </mat-card>
+                            <mat-list *ngIf="recordStatus">
+                                <mat-list-item>
+                                  <p mat-line>No Record Found ...</p>
+              
+                                </mat-list-item>
+                               </mat-list>
+                           
+                        </mat-expansion-panel>
+                   
+                  </div>
+                    
+              
+                 <!---- <mat-paginator #paginator [length]="pdList.length" [pageIndex]="pageIndex" [pageSize]="pageSize"
+                  [pageSizeOptions]="[5, 10, 25, 100]" (page)="pageEvent = $event; pageChange($event)">
+                </mat-paginator>  -->
+              </div>
+              <div   fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">
+              <mat-card class="mb-2" *ngIf="pdList.length > 0">
+                  <agm-map [latitude]="lat" [longitude]="lng">
+                      <agm-marker *ngFor="let getMap of mapDetails" [latitude]="getMap.lat" [longitude]="getMap.lng"></agm-marker>
+                  </agm-map>
+                </mat-card>
+                </div> 
           </div>
+      </div>
     </div>
     
-  <div class="mb-2" >
-   
-        <div   fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
-                  <!--  <mat-expansion-panel *ngFor="let details of dataSource.connect() | async">
-                         <mat-expansion-panel-header>
-                          <mat-panel-title>
-                         <b> {{details.applicat_details[0].applicant_name}} </b>
-                        </mat-panel-title>                        
-                          <mat-panel-description>
-                             {{details.product_abbr}}/{{details.subproduct_abbr}}
-                          </mat-panel-description>
-                        </mat-expansion-panel-header>
-                        <p mat-line>Lendor ID:{{details.lender_applicant_id}}</p>
-                        <p mat-line>Lendor Name:{{details.lender_full_name}}</p>
-                        <p mat-line>Date Of Initiation:{{details.pd_date_of_initiation}}</p>
-                        <p mat-line class="hover-icon"><i class="fa-1x fa fa-rupee">&nbsp;</i>{{details.loan_amount}} 
-                        </p>
-                        <p mat-line>
-                            <button  mat-raised-button mat-button-sm mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="pdAllocationTo(master)"><mat-icon>directions_run</mat-icon></button>
-
-                        </p>
-                       
-                      
-                      </mat-expansion-panel> -->
-                      <mat-card [style.overflow]="'auto'" [style.height.px]="'500'" *ngIf="pdList.length > 0">
-                      <mat-card class="mb-1" *ngFor="let details of dataSource.connect() | async">
-                        <mat-card-actions style="text-align:right;">
-                            <button  mat-raised-button mat-button-sm mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="pdAllocationTo(details)"><mat-icon>directions_run</mat-icon></button>
-                            <button  mat-raised-button mat-button-sm mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="scheduleDetails(details)"><mat-icon>schedule</mat-icon></button>
-                        </mat-card-actions>
-                         
-                        <mat-card-title *ngIf="details.applicat_details">{{details.applicat_details[0].applicant_name}}</mat-card-title>
-                        <mat-card-content class="mb-1"><p class="hover-icon"><i *ngIf="details.city_name" class="fa-1x fa fa-map-marker">&nbsp;</i>{{details.city_name}}/{{details.state_name}}-{{details.pincode}}</p>
-                          <p>{{details.lender_full_name}}({{details.lender_applicant_id}})</p>
-                          <p *ngIf="details.product_abbr">{{details.product_abbr}}/{{details.subproduct_abbr}}/{{details.customer_segment_abbr}}</p>
-                          <p>{{details.pd_date_of_initiation}} <span *ngIf="details.loan_amount"  style="padding-left: 4%;" class="hover-icon"><i class="fa-1x fa fa-rupee">&nbsp;</i>{{details.loan_amount}}</span></p>
-                        </mat-card-content> 
-                      </mat-card>
-                    </mat-card>
-                <mat-list *ngIf="recordStatus">
-                    <mat-list-item>
-                      <p mat-line>No Record Found ...</p>
-  
-                    </mat-list-item>
-                   </mat-list>
-          <!-- </mat-card-content> -->
-          <!-- <mat-card-actions *ngIf="!recordStatus"> -->
-              <mat-paginator #paginator [length]="pdList.length" [pageIndex]="pageIndex" [pageSize]="pageSize"
-              [pageSizeOptions]="[5, 10, 25, 100]" (page)="pageEvent = $event; pageChange($event)">
-            </mat-paginator>      
-          <!-- </mat-card-actions>
-          </mat-card> -->
-          </div>
-          <div   fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="75" fxFlex.lg="75" fxFlex.xl="75">
-          <mat-card class="mb-2" *ngIf="pdList.length > 0">
-              <agm-map [latitude]="lat" [longitude]="lng">
-                  <agm-marker *ngFor="let getMap of mapDetails" [latitude]="getMap.lat" [longitude]="getMap.lng"></agm-marker>
-              </agm-map>
-            </mat-card>
-            </div> 
-      </div>
-  </div>
-</div>
-
+     
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/pd-allocation/pd-allocation.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/pd-allocation/pd-allocation.component.html
index 303360460..3d03dff0f 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/pd-allocation/pd-allocation.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/pd-allocation/pd-allocation.component.html
@@ -1,9 +1,9 @@
-<div style="max-height: 480px;">
+<div style="height: 480px;">
     <div style="text-align: right">
         <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="closeAllocationComponent()"><mat-icon>close</mat-icon></button>
   
     </div>
-  <mat-card style="width: 580px; padding: 2px;">
+  <mat-card style="width: 750px;">
     <mat-card-header>
       <mat-card-title>{{pageTitle}}</mat-card-title>
     </mat-card-header>
@@ -13,16 +13,12 @@
       <mat-list *ngIf="pdOfficerList.length > 0">
           <mat-list-item *ngFor="let officer of pdOfficerList">
             <p><mat-radio-button (change)="selectPdOfficer(officer)"></mat-radio-button>
-                {{officer.first_name}}
-              </p>
-              <p style="padding-left: 8%;">
-                  <span matBadge="{{officer.allocated}}" matBadgeOverlap="false" matBadgeColor="accent">Allocated</span>
-                </p>
-                <p style="padding-left: 8%;">
-                    <span matBadge="{{officer.scheduled}}" matBadgeOverlap="false" >Scheduled</span>
-                  </p>
-                  <p style="padding-left: 8%;">
-                      <span matBadge="{{officer.inprogress}}" matBadgeOverlap="false" matBadgeColor="warn">Inprogress</span>
+                {{officer.first_name}} -
+              
+              
+                  <span matBadge="{{officer.allocated}}" matBadgeOverlap="false" matBadgeColor="accent">Allocated</span>&nbsp; &nbsp;&nbsp; &nbsp;
+                    <span matBadge="{{officer.scheduled}}" matBadgeOverlap="false" >Scheduled</span>&nbsp;&nbsp;&nbsp; &nbsp;
+                    <span matBadge="{{officer.inprogress}}" matBadgeOverlap="false" matBadgeColor="warn">Inprogress</span>
                     </p>
                   
           </mat-list-item>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/smart-pd-allocation/smart-pd-allocation.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/smart-pd-allocation/smart-pd-allocation.component.html
index d02642ac5..102b33488 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/smart-pd-allocation/smart-pd-allocation.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/smart-pd-allocation/smart-pd-allocation.component.html
@@ -14,7 +14,7 @@
         <mat-list *ngIf="pdOfficerList.length > 0" >
             <mat-radio-group>
             <mat-list-item *ngFor="let officer of pdOfficerList; ">
-              <p><mat-radio-button [value]="officer" (change)="selectPdOfficer(officer)"></mat-radio-button>
+             <!-- <p><mat-radio-button [value]="officer" (change)="selectPdOfficer(officer)"></mat-radio-button>
                   {{officer.first_name}}
                 </p>
                 <p style="padding-left: 8%;">
@@ -26,7 +26,16 @@
                     <p style="padding-left: 8%;">
                         <span matBadge="{{officer.inprogress}}" matBadgeOverlap="false" matBadgeColor="warn">Inprogress</span>
                       </p>
-                    
+                    -->
+                      <p><mat-radio-button [value]="officer" (change)="selectPdOfficer(officer)"></mat-radio-button>
+                        {{officer.first_name}} -
+                      
+                      
+                          <span matBadge="{{officer.allocated}}" matBadgeOverlap="false" matBadgeColor="accent">Allocated</span>&nbsp; &nbsp;&nbsp; &nbsp;
+                            <span matBadge="{{officer.scheduled}}" matBadgeOverlap="false" >Scheduled</span>&nbsp;&nbsp;&nbsp; &nbsp;
+                            <span matBadge="{{officer.inprogress}}" matBadgeOverlap="false" matBadgeColor="warn">Inprogress</span>
+                            </p>
+                          
             </mat-list-item>
           </mat-radio-group>
           </mat-list>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.html
index 740292e7a..6d6edfa69 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.html
@@ -5,7 +5,7 @@
                   {{master.pd_date_of_initiation}}
                 </div>
                  <div *ngFor="let master of pdMasterData" class="ml-xs mr-xs pt-1"   fxFlex="25" style="text-align:right;" >
-                  <button  *ngIf="master.pd_type_name" mat-raised-button  mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="pdAllocationTo(master)"><mat-icon>directions_run</mat-icon></button>
+                  <button  *ngIf="master.pd_type_name" mat-raised-button  mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="pdAllocationTo(master)"><mat-icon>group_add</mat-icon></button>
                         <button *ngIf="master.pd_type_name" mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="scheduleDetails(master)"><mat-icon>schedule</mat-icon></button>
                         <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="getPDStart(viewID)"><mat-icon>question_answer</mat-icon></button>
                     <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon"  type="button" (click)="loadPdListCompoent()"><mat-icon>close</mat-icon></button>