PD List UI

This commit is contained in:
saravanakumarkandasami 2018-10-24 18:17:20 +05:30
parent a0cf304925
commit 28a86dfbb8
3 changed files with 43 additions and 38 deletions

View File

@ -18,43 +18,36 @@
<mat-tab> <mat-tab>
<ng-template mat-tab-label>All</ng-template> <ng-template mat-tab-label>All</ng-template>
<mat-card-content> <mat-card-content>
<div class="card-comment-widget"> <mat-table [dataSource]="dataSource" matSort *ngIf="pdList.length > 0" >
<mat-list *ngIf="pdList.length > 0">
<mat-list-item *ngFor="let details of dataSource.connect() | async" style="border-bottom:1px solid #f1f7f5"> <ng-container matColumnDef="Name">
<!--<img mat-list-avatar src="assets/images/lime.jpg" alt="">--> <mat-cell class="cell" *matCellDef="let details;"> <span *ngIf="details.applicat_details" mat-line><b>{{details.applicat_details[0].applicant_name}}</b></span><br>
<!-- {{details.applicat_details[0].applicant_name}} --> <span *ngIf="details.lender_full_name" mat-line> {{details.lender_full_name}} </span><br>
<p *ngIf="details.applicat_details" mat-line>{{details.applicat_details[0].applicant_name}} </p> <span *ngIf="details.product_abbr" mat-line> {{details.product_abbr}}/{{details.subproduct_abbr}}/{{details.customer_segment_abbr}} </span> </mat-cell>
</ng-container>
<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> <ng-container matColumnDef="Lenderid">
<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> <mat-cell class="cell" *matCellDef="let details"><span> {{details.lender_applicant_id}} </span><br>
<!-- <span class="text-mat mat-text-muted">Chennai</span> -->
<span><i class="fa-1x fa fa-rupee"></i> {{details.loan_amount}}</span> </mat-cell>
<!-- <div class="comment-time"> </ng-container>
<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> <ng-container matColumnDef="Address">
<mat-cell class="cell" *matCellDef="let details;"> <span>{{details.pd_date_of_initiation}}</span><br>
</div> --> <span> <i class="fa-1x fa fa-map-marker"> </i> {{details.city_name}}/{{details.state_name}}-{{details.pincode}} </span> </mat-cell>
<div class="comment-time"> </ng-container>
<ng-container matColumnDef="Action">
<!-- <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> --> <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>
<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>
</div> <!---- <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>-->
<mat-row *matRowDef="let row; columns: displayedColumns;">
</mat-list-item> </mat-row>
</mat-table>
</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-content>
<mat-card-actions *ngIf="!recordStatus"> <mat-card-actions *ngIf="!recordStatus">
<mat-paginator #paginator class="mat-elevation-z1" [length]="pdList.length" [pageIndex]="pageIndex" [pageSize]="pageSize" <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-paginator>
</mat-card-actions> </mat-card-actions>
</mat-tab> </mat-tab>
@ -108,7 +101,7 @@
<mat-form-field> <mat-form-field>
<input matInput placeholder="Change gutter" type="number" [(ngModel)]="ratioGutter"> <input matInput placeholder="Change gutter" type="number" [(ngModel)]="ratioGutter">
</mat-form-field> </mat-form-field>
</div>--> </div>-->
</mat-card-content> </mat-card-content>
</mat-tab> </mat-tab>
<mat-tab> <mat-tab>

View File

@ -1,4 +1,13 @@
.ic-change:hover { .ic-change:hover {
transform: scale(1.1); transform: scale(1.1);
color: green; color: green;
}
.cell{
display:inline !important;
}
.cellhide{
display: none !important;
}
.center{
text-align:center;
} }

View File

@ -10,6 +10,12 @@ import { MatPaginator, MatSort, MatTableDataSource, PageEvent } from '@angular/m
encapsulation: ViewEncapsulation.None encapsulation: ViewEncapsulation.None
}) })
export class ListPdComponent implements OnInit, OnDestroy { 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; private notifier: NotifierService;
recordStatus: boolean; recordStatus: boolean;
noRecordFound:boolean; noRecordFound:boolean;
@ -24,10 +30,7 @@ export class ListPdComponent implements OnInit, OnDestroy {
// data source variable details // data source variable details
pdListData = null; pdListData = null;
public dataLength: number;
public dataSource = new MatTableDataSource();
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
pdList:any[] = []; pdList:any[] = [];
constructor( notifier: NotifierService, private route: ActivatedRoute, constructor( notifier: NotifierService, private route: ActivatedRoute,
private router: Router, private _pd: PdTrigerService) { private router: Router, private _pd: PdTrigerService) {