From 28a86dfbb8afbe5a573fb20c3928efac46eb132c Mon Sep 17 00:00:00 2001
From: saravanakumarkandasami <saravanakumar.k@venbainfotech.com>
Date: Wed, 24 Oct 2018 18:17:20 +0530
Subject: [PATCH] PD List UI

---
 .../manage-pd/list-pd/list-pd.component.html  | 61 ++++++++-----------
 .../manage-pd/list-pd/list-pd.component.scss  |  9 +++
 .../manage-pd/list-pd/list-pd.component.ts    | 11 ++--
 3 files changed, 43 insertions(+), 38 deletions(-)

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 0af9a232e..33c0b3be9 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
@@ -18,43 +18,36 @@
         <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">
-                      
-                            <!-- <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-table [dataSource]="dataSource" matSort *ngIf="pdList.length > 0" >
+          
+                  <ng-container matColumnDef="Name">
+                        <mat-cell class="cell" *matCellDef="let details;"> <span *ngIf="details.applicat_details" mat-line><b>{{details.applicat_details[0].applicant_name}}</b></span><br> 
+                        <span *ngIf="details.lender_full_name" mat-line> {{details.lender_full_name}} </span><br>
+                          <span *ngIf="details.product_abbr" mat-line> {{details.product_abbr}}/{{details.subproduct_abbr}}/{{details.customer_segment_abbr}} </span> </mat-cell>
+                  </ng-container>
+                  <ng-container matColumnDef="Lenderid">
+                      <mat-cell class="cell" *matCellDef="let details"><span> {{details.lender_applicant_id}} </span><br>
+                         
+                        <span><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>{{details.pd_date_of_initiation}}</span><br>
+                          <span> <i class="fa-1x fa fa-map-marker"> </i> {{details.city_name}}/{{details.state_name}}-{{details.pincode}}  </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" (click)="viewPDDetails(details.pd_id)"><mat-icon>visibility</mat-icon></button>
+                        </mat-cell>
+                    </ng-container>
+                  <!---- <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>-->
+                    <mat-row *matRowDef="let row; columns: displayedColumns;">
+                    </mat-row>
+               </mat-table>
+               
           </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)">
+            [pageSizeOptions]="[5, 10, 25,50, 100]" (page)="pageEvent = $event; pageChange($event)">
           </mat-paginator>      
         </mat-card-actions>
         </mat-tab>
@@ -108,7 +101,7 @@
               <mat-form-field>
                 <input matInput placeholder="Change gutter" type="number" [(ngModel)]="ratioGutter">
               </mat-form-field>
-            </div>-->
+            </div>--> 
           </mat-card-content>
         </mat-tab>
       <mat-tab>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/list-pd.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/list-pd.component.scss
index d143ad302..83e5be8af 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/list-pd.component.scss
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/list-pd.component.scss
@@ -1,4 +1,13 @@
 .ic-change:hover {
     transform: scale(1.1);
     color: green;
+}
+.cell{
+    display:inline !important;
+}
+.cellhide{
+    display: none !important;
+}
+.center{
+    text-align:center;
 }
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/list-pd.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/list-pd.component.ts
index f3f0d2a29..d08742ad6 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/list-pd.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/list-pd.component.ts
@@ -10,6 +10,12 @@ import { MatPaginator, MatSort, MatTableDataSource, PageEvent } from '@angular/m
   encapsulation: ViewEncapsulation.None
 })
 export class ListPdComponent implements OnInit, OnDestroy {
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+  displayedColumns = ['Name','Lenderid','Address','Action'];
+
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatSort) sort: MatSort;
   private notifier: NotifierService;
   recordStatus: boolean;
   noRecordFound:boolean;
@@ -24,10 +30,7 @@ export class ListPdComponent implements OnInit, OnDestroy {
 
   // data source variable details
   pdListData = null;
-  public dataLength: number;
-  public dataSource = new MatTableDataSource();
-  @ViewChild(MatPaginator) paginator: MatPaginator;
-  @ViewChild(MatSort) sort: MatSort;
+ 
   pdList:any[] = [];
   constructor( notifier: NotifierService, private route: ActivatedRoute,
     private router: Router, private _pd: PdTrigerService) {