Entity list UI

This commit is contained in:
saravanakumarkandasami 2018-11-03 14:26:42 +05:30
parent 64816cd2d6
commit 5d6682e40a
2 changed files with 42 additions and 5 deletions

View File

@ -8,7 +8,40 @@
<button mat-fab class="mr-1 mb-1" color="primary"matTooltip="Add New Entity" matTooltipPosition="above" (click)="addNewEntity()"><mat-icon>add</mat-icon></button> <button mat-fab class="mr-1 mb-1" color="primary"matTooltip="Add New Entity" matTooltipPosition="above" (click)="addNewEntity()"><mat-icon>add</mat-icon></button>
</div> </div>
</div> </div>
<mat-card-content>
<ng-container *ngIf="enityList.length > 0"> <ng-container *ngIf="enityList.length > 0">
<mat-table [dataSource]="dataSource">
<ng-container matColumnDef="entity_name">
<mat-cell fxFlex="20%" class="cell" *matCellDef="let product;">
<span *ngIf="product.entity_name" mat-line>{{ product.entity_name }}</span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="name">
<mat-cell fxFlex="20%" class="cell" *matCellDef="let product;">
<div> {{ product.full_name }} ({{product.short_name}})</div>
<div> {{ product.branch_name }} </div>
<div> {{product.city_name}}<span *ngIf="product.state_name">,</span> {{product.state_name}} </div>
</mat-cell>
</ng-container>
<ng-container matColumnDef="contact">
<mat-cell fxFlex="20%" class="cell" *matCellDef="let product;">
<div> {{ product.phone_number }}</div>
<div> {{ product.official_email }}</div></mat-cell>
</ng-container>
<ng-container matColumnDef="actions">
<mat-cell fxFlex="20%" class="cell" *matCellDef="let product;">
<button mat-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editEntity(product)"><mat-icon>edit</mat-icon></button>
</mat-cell>
</ng-container>
<mat-row style="align-items: normal !important;" *matRowDef="let row; columns: displayedColumns;">
</mat-row>
</mat-table>
</ng-container>
</mat-card-content>
<!----<ng-container *ngIf="enityList.length > 0">
<div style="padding: 0 12px;"> <div style="padding: 0 12px;">
<mat-card class="product-card" *ngFor="let product of dataSource.connect() | async"> <mat-card class="product-card" *ngFor="let product of dataSource.connect() | async">
<div fxLayout="row" fxLayoutAlign="start start"> <div fxLayout="row" fxLayoutAlign="start start">
@ -38,13 +71,17 @@
</div> </div>
</mat-card> </mat-card>
</div> </div>
</ng-container> </ng-container>-->
<mat-card *ngIf="noQuesMasterRecrdFound"> <mat-card *ngIf="noQuesMasterRecrdFound">
<mat-card-content>
<div class="no-record-found">No Record Found ... </div> <div class="no-record-found">No Record Found ... </div>
</mat-card-content>
</mat-card> </mat-card>
<mat-paginator #paginator class="mat-elevation-z1" [length]="enityList.length" [pageIndex]="pageIndex" [pageSize]="pageSize" <div *ngIf="enityList.length > 0">
<mat-paginator [length]="enityList.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> </mat-card>
</div> </div>

View File

@ -29,17 +29,17 @@
<mat-table [dataSource]="dataSource"> <mat-table [dataSource]="dataSource">
<ng-container matColumnDef="category_name"> <ng-container matColumnDef="category_name">
<mat-cell fxFlex="25%" class="cell" *matCellDef="let product;" style="width:20% !important;"> <mat-cell fxFlex="20%" class="cell" *matCellDef="let product;" >
<span *ngIf="product.category_name" mat-line>{{ product.category_name }}</span> <span *ngIf="product.category_name" mat-line>{{ product.category_name }}</span>
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="question"> <ng-container matColumnDef="question">
<mat-cell fxFlex="65%" class="cell" *matCellDef="let product;" style="width:70% !important;"> <mat-cell fxFlex="70%" class="cell" *matCellDef="let product;" >
<span *ngIf="product.question" mat-line>{{ product.question }}</span> <span *ngIf="product.question" mat-line>{{ product.question }}</span>
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="actions"> <ng-container matColumnDef="actions">
<mat-cell fxFlex="10%" class="cell" *matCellDef="let product;" style="width:10% !important;"> <mat-cell fxFlex="10%" class="cell" *matCellDef="let product;">
<button mat-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editQuestion(product)"><mat-icon>edit</mat-icon></button> <button mat-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editQuestion(product)"><mat-icon>edit</mat-icon></button>
</mat-cell> </mat-cell>
</ng-container> </ng-container>