Mmaster card UI
This commit is contained in:
saravanakumarkandasami
parent
e2f537a40d
commit
807ca7f691
@ -1,10 +1,15 @@
|
||||
<div *ngIf="listView">
|
||||
<mat-card>
|
||||
<mat-card-content>
|
||||
<div fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutAlign="center none" style="padding-top:1%">
|
||||
<div fxFlex="80%">
|
||||
<mat-card-title><span style="font-size:24px"> Entity Master</span></mat-card-title>
|
||||
</div>
|
||||
</div>
|
||||
<mat-card>
|
||||
<div fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutAlign="center none" style="padding-top:1%">
|
||||
<div fxFlex="80%">
|
||||
<mat-card-title><span style="font-size:24px"> Entity Master</span></mat-card-title>
|
||||
</div>
|
||||
<div fxFlex="20%">
|
||||
|
||||
<div fxFlexOffset="90%" fxFlex="10%">
|
||||
<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>
|
||||
@ -52,6 +57,8 @@
|
||||
</mat-card>
|
||||
|
||||
</mat-card>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
@ -1,123 +1,126 @@
|
||||
|
||||
<mat-card>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="mb-1">
|
||||
<div class="ml-xs mr-xs" style="width: 30%;">
|
||||
<mat-card-title><span> Questions Master</span></mat-card-title>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayout.xs="column">
|
||||
|
||||
<div fxFlexOffset="2%" fxFlex="40%">
|
||||
<form [formGroup]="filterFormGroupCtrl">
|
||||
|
||||
<mat-select placeholder="Category" formControlName="category">
|
||||
<!--<ngx-mat-select-search [formControl]="masterFilterCtrl" ></ngx-mat-select-search>-->
|
||||
<mat-option *ngFor="let cat of categories" [value]="cat.question_category_id" (click)="getQuestionsMasters()">
|
||||
{{cat.category_name}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</form>
|
||||
<mat-card>
|
||||
<mat-card-content>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="mb-1">
|
||||
<div class="ml-xs mr-xs" style="width: 30%;">
|
||||
<mat-card-title><span> Questions Master</span></mat-card-title>
|
||||
</div>
|
||||
<div fxFlexOffset="24%" fxFlex="30%" style="text-align:right">
|
||||
<button mat-fab class="mr-1" color="primary" (click)="addNewQuestion()" matTooltip="Add Questions" matTooltipPosition="above"><mat-icon>add</mat-icon></button>
|
||||
</div>
|
||||
</div>
|
||||
<!--</mat-card-content>-->
|
||||
<mat-card-content>
|
||||
<ng-container *ngIf="productList.length > 0">
|
||||
<mat-table [dataSource]="dataSource">
|
||||
|
||||
<ng-container matColumnDef="category_name">
|
||||
<mat-cell fxFlex="20%" class="cell" *matCellDef="let product;" >
|
||||
<span *ngIf="product.category_name" mat-line>{{ product.category_name }}</span>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="question">
|
||||
<mat-cell fxFlex="70%" class="cell" *matCellDef="let product;" >
|
||||
<span *ngIf="product.question" mat-line>{{ product.question }}</span>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="actions">
|
||||
<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>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<mat-row style="align-items: normal !important;" *matRowDef="let row; columns: displayedColumns;">
|
||||
</mat-row>
|
||||
</mat-table>
|
||||
</ng-container>
|
||||
|
||||
<mat-paginator #paginator [length]="productList.length" [pageIndex]="pageIndex" [pageSize]="pageSize"
|
||||
[pageSizeOptions]="[5, 10, 25, 50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
|
||||
</mat-paginator>
|
||||
|
||||
|
||||
<!---- <ng-container *ngIf="productList.length > 0">
|
||||
<div style="padding: 0 12px;">
|
||||
<mat-card class="product-card" *ngFor="let product 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="none none">
|
||||
<div class="ml-xs" fxFlex="20%">
|
||||
{{ product.category_name }}
|
||||
</div>
|
||||
<mat-card>
|
||||
<mat-card-content>
|
||||
<div fxLayout="row" fxLayout.xs="column" class="p-1">
|
||||
|
||||
<div fxFlexOffset="2%" fxFlex="40%">
|
||||
<form [formGroup]="filterFormGroupCtrl">
|
||||
|
||||
<mat-select placeholder="Category" formControlName="category">
|
||||
<!--<ngx-mat-select-search [formControl]="masterFilterCtrl" ></ngx-mat-select-search>-->
|
||||
<mat-option *ngFor="let cat of categories" [value]="cat.question_category_id" (click)="getQuestionsMasters()">
|
||||
{{cat.category_name}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</form>
|
||||
</div>
|
||||
<div class="ml-xs" fxFlex="80%">
|
||||
<div class="text-line-limit">{{ product.question }}
|
||||
<div fxFlexOffset="24%" fxFlex="30%" style="text-align:right">
|
||||
<button mat-fab class="mr-1" color="primary" (click)="addNewQuestion()" matTooltip="Add Questions" matTooltipPosition="above"><mat-icon>add</mat-icon></button>
|
||||
</div>
|
||||
</div>
|
||||
<ng-container *ngIf="productList.length > 0">
|
||||
<mat-table [dataSource]="dataSource">
|
||||
|
||||
<ng-container matColumnDef="category_name">
|
||||
<mat-cell fxFlex="20%" class="cell" *matCellDef="let product;" >
|
||||
<span *ngIf="product.category_name" mat-line>{{ product.category_name }}</span>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="question">
|
||||
<mat-cell fxFlex="70%" class="cell" *matCellDef="let product;" >
|
||||
<span *ngIf="product.question" mat-line>{{ product.question }}</span>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="actions">
|
||||
<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>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<mat-row style="align-items: normal !important;" *matRowDef="let row; columns: displayedColumns;">
|
||||
</mat-row>
|
||||
</mat-table>
|
||||
</ng-container>
|
||||
|
||||
<mat-paginator #paginator [length]="productList.length" [pageIndex]="pageIndex" [pageSize]="pageSize"
|
||||
[pageSizeOptions]="[5, 10, 25, 50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
|
||||
</mat-paginator>
|
||||
|
||||
|
||||
<!---- <ng-container *ngIf="productList.length > 0">
|
||||
<div style="padding: 0 12px;">
|
||||
<mat-card class="product-card" *ngFor="let product 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="none none">
|
||||
<div class="ml-xs" fxFlex="20%">
|
||||
{{ product.category_name }}
|
||||
</div>
|
||||
<div class="ml-xs" fxFlex="80%">
|
||||
<div class="text-line-limit">{{ product.question }}
|
||||
</div>
|
||||
</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)="editQuestion(product)"><mat-icon>edit</mat-icon></button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</mat-card>
|
||||
<div fxFlex="10%">
|
||||
<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>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</mat-card>
|
||||
</div>
|
||||
</ng-container>-->
|
||||
<mat-card *ngIf="noQuesMasterRecrdFound">
|
||||
<mat-card-content>
|
||||
<div class="no-record-found">No Record Found ... </div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
|
||||
<!--<mat-card>
|
||||
<div class="example-container mat-elevation-z8">
|
||||
<mat-table [dataSource]="dataSource" matSort>
|
||||
|
||||
<ng-container matColumnDef="category_name">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Category </mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"> {{row.category_name}} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="question">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Question </mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"> {{row.question}} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="actions">
|
||||
<mat-header-cell *matHeaderCellDef> Actions </mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">
|
||||
<button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editQuestion(row)"><mat-icon>edit</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-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
|
||||
</div>
|
||||
</ng-container>-->
|
||||
<mat-card *ngIf="noQuesMasterRecrdFound">
|
||||
<mat-card-content>
|
||||
<div class="no-record-found">No Record Found ... </div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
</mat-card>-->
|
||||
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<!--<mat-card>
|
||||
<div class="example-container mat-elevation-z8">
|
||||
<mat-table [dataSource]="dataSource" matSort>
|
||||
|
||||
<ng-container matColumnDef="category_name">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Category </mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"> {{row.category_name}} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="question">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Question </mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"> {{row.question}} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="actions">
|
||||
<mat-header-cell *matHeaderCellDef> Actions </mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">
|
||||
<button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editQuestion(row)"><mat-icon>edit</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-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
|
||||
</div>
|
||||
</mat-card>-->
|
||||
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<!--<div *ngIf="addView">
|
||||
<app-add></app-add>
|
||||
|
||||
@ -1,28 +1,31 @@
|
||||
<div *ngIf="listView">
|
||||
<!--========================== Template List View-->
|
||||
<div>
|
||||
<mat-card>
|
||||
<mat-card-content>
|
||||
<div class="mb-1" fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutAlign="start center">
|
||||
<div fxFlex="100%">
|
||||
<mat-card-title><span style="font-size:24px"> Template Master</span></mat-card-title>
|
||||
<!--<form [formGroup]="filterFormGroupCtrl">
|
||||
<div fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutGap="0.5px" fxLayoutAlign="start none" style="padding: 6px;">
|
||||
<mat-select placeholder="Category" formControlName="category">
|
||||
<mat-option *ngFor="let cat of categories" [value]="cat.question_categroy_id" (click)="getQuestionsMasters()">
|
||||
{{cat.categroy_name}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</div>
|
||||
</form>-->
|
||||
</div>
|
||||
</div>
|
||||
<!--========================== Template List View-->
|
||||
|
||||
<mat-card>
|
||||
|
||||
<div class="p-1" fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutAlign="center none">
|
||||
<div fxFlex="80%">
|
||||
<mat-card-title><span style="font-size:24px"> Template Master</span></mat-card-title>
|
||||
<!--<form [formGroup]="filterFormGroupCtrl">
|
||||
<div fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutGap="0.5px" fxLayoutAlign="start none" style="padding: 6px;">
|
||||
<mat-select placeholder="Category" formControlName="category">
|
||||
<mat-option *ngFor="let cat of categories" [value]="cat.question_categroy_id" (click)="getQuestionsMasters()">
|
||||
{{cat.categroy_name}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</div>
|
||||
</form>-->
|
||||
</div>
|
||||
<div fxFlex="14%" style="text-align:right;">
|
||||
<button mat-fab class="mr-1" color="primary" (click)="addNewTemplate()" matTooltip="Add Template" matTooltipPosition="above"><mat-icon>add</mat-icon></button>
|
||||
<!--<button mat-stroked-button color="primary" (click)="addNewQuestion()">Add Questions</button>-->
|
||||
</div>
|
||||
</div>
|
||||
<mat-card-content>
|
||||
<ng-container >
|
||||
<mat-card-content>
|
||||
<div fxLayout="row" fxLayout.xs="column" class="p-1">
|
||||
<div fxFlexOffset="90%" fxFlex="10%" >
|
||||
<button mat-fab class="mr-1" color="primary" (click)="addNewTemplate()" matTooltip="Add Template" matTooltipPosition="above"><mat-icon>add</mat-icon></button>
|
||||
<!--<button mat-stroked-button color="primary" (click)="addNewQuestion()">Add Questions</button>-->
|
||||
</div>
|
||||
</div>
|
||||
<ng-container>
|
||||
<mat-table [dataSource]="dataSource" *ngIf="templateList.length > 0" >
|
||||
|
||||
<ng-container matColumnDef="template_name">
|
||||
@ -58,15 +61,11 @@
|
||||
</mat-card>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<!--=================================== END-->
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<!--=================================== END-->
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div>
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
|
||||
|
||||
<notifier-container></notifier-container>
|
||||
<notifier-container></notifier-container>
|
||||
Loading…
Reference in New Issue
Block a user