Templates UI

This commit is contained in:
saravanakumarkandasami 2018-11-05 15:46:31 +05:30
parent 215de92b41
commit 73da3b4efd
4 changed files with 29 additions and 42 deletions

View File

@ -47,11 +47,10 @@
</mat-row> </mat-row>
</mat-table> </mat-table>
</ng-container> </ng-container>
<div *ngIf="productList.length > 0">
<mat-paginator [length]="productList.length" [pageIndex]="pageIndex" [pageSize]="pageSize" <mat-paginator #paginator [length]="productList.length" [pageIndex]="pageIndex" [pageSize]="pageSize"
[pageSizeOptions]="[5, 10, 25, 50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons> [pageSizeOptions]="[5, 10, 25, 50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
</mat-paginator> </mat-paginator>
</div>
<!---- <ng-container *ngIf="productList.length > 0"> <!---- <ng-container *ngIf="productList.length > 0">

View File

@ -21,9 +21,9 @@
<!--<button mat-stroked-button color="primary" (click)="addNewQuestion()">Add Questions</button>--> <!--<button mat-stroked-button color="primary" (click)="addNewQuestion()">Add Questions</button>-->
</div> </div>
</div> </div>
<ng-container *ngIf="templateList.length > 0"> <mat-card-content>
<div style="padding: 0 12px;"> <ng-container >
<mat-table [dataSource]="dataSource" > <mat-table [dataSource]="dataSource" *ngIf="templateList.length > 0" >
<ng-container matColumnDef="template_name"> <ng-container matColumnDef="template_name">
<mat-cell fxFlex="25%" *matCellDef="let template;"> <mat-cell fxFlex="25%" *matCellDef="let template;">
@ -33,7 +33,7 @@
<ng-container matColumnDef="lender_details"> <ng-container matColumnDef="lender_details">
<mat-cell fxFlex="65%" *matCellDef="let template;"> <mat-cell fxFlex="65%" *matCellDef="let template;">
<div *ngIf="template.lender_details.length > 0" class="text-line-limit"> <div *ngIf="template.lender_details.length > 0" class="text-line-limit">
<span *ngFor="let lender of template.lender_details ; let last = last" > {{lender.full_name}} - {{lender.product_name}} - {{lender.customer_segment_name}} <i *ngIf="!last">,<br></i></span> <span *ngFor="let lender of template.lender_details ; let last = last" > {{lender.full_name}} - {{lender.product_name}} - {{lender.customer_segment_name}} <span *ngIf="!last">,<br><br></span></span>
</div> </div>
</mat-cell> </mat-cell>
</ng-container> </ng-container>
@ -45,38 +45,18 @@
<mat-row style="align-items: normal !important;" *matRowDef="let row; columns: displayedColumns;"> <mat-row style="align-items: normal !important;" *matRowDef="let row; columns: displayedColumns;">
</mat-row> </mat-row>
</mat-table> </mat-table>
<!----<mat-card class="product-card" *ngFor="let template of dataSource.connect() | async">
<div fxLayout="row" fxLayoutAlign="start start" style="padding: 6px 2px;">
<div fxFlex="90%" style="padding: 12px 8px;">
<div fxLayout="row" fxLayoutWrap fxLayoutAlign="start center">
<div class="ml-xs" fxFlex="20%">
<span> {{ template.template_name }}</span>
</div>
<div class="ml-xs" fxFlex="80%">
<div *ngIf="template.lender_details.length > 0">
<span *ngFor="let lender of template.lender_details ; let last = last"> {{lender.full_name}} - {{lender.product_name}} - {{lender.customer_segment_name}} <i *ngIf="!last">,<br></i></span>
</div>
</div>
</div>
</div>
<div fxFlex="10%">
<button mat-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="goToEdit(template.template_id)"><mat-icon>edit</mat-icon></button>
</div>
</div>
</mat-card>-->
</div>
</ng-container> </ng-container>
<mat-card *ngIf="noQuesMasterRecrdFound">
<div class="no-record-found">No Record Found ... </div> <mat-paginator [length]="templateList.length" [pageIndex]="pageIndex" [pageSize]="pageSize"
</mat-card>
<div *ngIf="templateList.length > 0">
<mat-paginator #paginator class="mat-elevation-z1" [length]="templateList.length" [pageIndex]="pageIndex" [pageSize]="pageSize"
[pageSizeOptions]="[5, 10, 25, 50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons> [pageSizeOptions]="[5, 10, 25, 50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
</mat-paginator> </mat-paginator>
</div>
<mat-card *ngIf="noTemplMasterRecrdFound">
<mat-card-content>
<div class="no-record-found">No Record Found ... </div>
</mat-card-content>
</mat-card>
</mat-card-content>
</mat-card> </mat-card>
</div> </div>

View File

@ -25,8 +25,8 @@
overflow: hidden; overflow: hidden;
// white-space: nowrap; // white-space: nowrap;
display: -webkit-box; display: -webkit-box;
line-height: 16px; /* fallback */ line-height: 15px; /* fallback */
max-height: 32px; /* fallback */ max-height: 44px; /* fallback */
-webkit-line-clamp: 2; /* number of lines to show */ -webkit-line-clamp: 2; /* number of lines to show */
-webkit-box-orient: vertical; -webkit-box-orient: vertical;

View File

@ -20,12 +20,13 @@ import { TemplatesAddComponent } from './templates-add/templates-add.component';
}) })
export class TemplateListComponent implements OnInit, OnDestroy { export class TemplateListComponent implements OnInit, OnDestroy {
public templateList = []; public templateList: any[] = [];
public listView: boolean; public listView: boolean;
public names: string; public names: string;
public noTemplMasterRecrdFound: boolean = false; public noTemplMasterRecrdFound: boolean = false;
public search_cid : any; public search_cid : any;
// pagination variable details // pagination variable details
length = 50; length = 50;
pageIndex = 0; pageIndex = 0;
@ -55,6 +56,10 @@ export class TemplateListComponent implements OnInit, OnDestroy {
this.getTemplateMastersListDetails(); this.getTemplateMastersListDetails();
} }
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
// get question master list details // get question master list details
getTemplateMastersListDetails() { getTemplateMastersListDetails() {
@ -123,7 +128,10 @@ export class TemplateListComponent implements OnInit, OnDestroy {
//Called once, before the instance is destroyed. //Called once, before the instance is destroyed.
//Add 'implements OnDestroy' to the class. //Add 'implements OnDestroy' to the class.
} }
// padination page event call
pageChange(e) {
console.log(e);
}
public m_templateList = { public m_templateList = {
"dataStatus": true, "dataStatus": true,