CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refractor(breadcrumb): enhance breadcrumb (#129)

Browse Source 
Enhance breadcrumb design and generation

Fixes #106
This commit is contained in:
Abhay Chawla
2018-07-17 00:23:00 +05:30
committed by GitHub
parent 3c9d012e8c
commit 4a30432fa9
32 changed files with 227 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/self-service/users/users.component.html
+90
View File
@@ -0,0 +1,90 @@
<mat-card class="container m-t-40">
<div fxLayout="row" fxLayoutGap="30px" class="m-b-20">
<!-- <mat-card-header> -->
<!-- <mat-grid-list cols="1" rowHeight="80px">
<mat-grid-tile> -->
<mat-form-field fxFlex>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<!-- </mat-grid-tile> -->
<!-- <mat-grid-tile> -->
<!-- <mat-card-actions> -->
<!-- <button mat-raised-button color="primary"><mat-icon>lock_open</mat-icon>&nbsp;&nbsp;Activate</button> -->
<!-- <button mat-raised-button color="primary"><mat-icon>lock</mat-icon>&nbsp;&nbsp;Deactivate</button> -->
<button mat-raised-button color="primary" [routerLink]="['/self-service/users/create']"><mat-icon>add</mat-icon>&nbsp;&nbsp;Create User</button>
<!-- </mat-card-actions> -->
<!-- </mat-grid-tile> -->
<!-- </mat-grid-list> -->
<!-- </mat-card-header> -->
</div>
<mat-card-content class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
<td mat-cell *matCellDef="let user"><span class="mobile-label">Name: </span>{{ user.name }} </td>
</ng-container>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> User ID </th>
<td mat-cell *matCellDef="let user"><span class="mobile-label">User ID: </span>{{ user.id }}</td>
</ng-container>
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Email ID </th>
<td mat-cell *matCellDef="let user"><span class="mobile-label">Email ID: </span>{{ user.email }}</td>
</ng-container>
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef mat-sort-header="isSelfServiceUser"> Status </th>
<td mat-cell *matCellDef="let user">
<span class="mobile-label">Status: </span>
<div [className]="user.isSelfServiceUser === true ? 'active' : 'inactive'">
<mat-icon matTooltip="{{ user.isSelfServiceUser === true ? 'Active' : 'Inactive' }}" matTooltipPosition="right">lens</mat-icon>
</div>
</td>
</ng-container>
<ng-container matColumnDef="officeName">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Office </th>
<td mat-cell *matCellDef="let user"><span class="mobile-label">Office: </span>{{ user.officeName }}</td>
</ng-container>
<ng-container matColumnDef="staff">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Staff </th>
<td mat-cell *matCellDef="let user"><span class="mobile-label">Staff: </span>{{ user.staff }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)"></tr>
</table>
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
</mat-card-content>
</mat-card>