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

refractor: self service module (#291)

Browse Source 
* Refractor components.
* Improve responsiveness of components.
* Add task management component.
* Add users data resolver.
* Add relative router links.
* Replace mat-icons by font-awesome icons.
* Add comments.

Fixes #290
This commit is contained in:
Abhay Chawla
2018-08-12 14:10:16 +05:30
committed by GitHub
parent 90087bf248
commit 116d05a7d1
30 changed files with 716 additions and 427 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/self-service/users/users.component.html
+32 -33
View File
@@ -1,30 +1,29 @@
<mat-card class="container m-t-40">
<div class="container m-b-20" fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="end" fxLayoutGap="20px">
<!-- TODO: Update to show only Activate/Inactivate button at a time according to selection in table. -->
<button mat-raised-button color="accent">
<fa-icon icon="lock-open"></fa-icon>&nbsp;&nbsp;
Activate
</button>
<button mat-raised-button color="warn">
<fa-icon icon="lock"></fa-icon>&nbsp;&nbsp;
Deactivate
</button>
<button mat-raised-button color="primary" [routerLink]="['create']">
<fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
Create User
</button>
</div>
<div fxLayout="row" fxLayoutGap="30px" class="m-b-20">
<!-- <mat-card-header> -->
<div class="container">
<!-- <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 fxLayout="row">
<mat-form-field fxFlex>
<mat-label>Filter</mat-label>
<input matInput type="text" (keyup)="applyFilter($event.target.value)">
</mat-form-field>
</div>
<mat-card-content class="mat-elevation-z8">
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
@@ -45,46 +44,46 @@
<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>
<td mat-cell *matCellDef="let user"> {{ 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>
<td mat-cell *matCellDef="let user"> {{ 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>
<td mat-cell *matCellDef="let user"> {{ 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>
<fa-icon matTooltip="{{ user.isSelfServiceUser === true ? 'Active' : 'Inactive' }}" matTooltipPosition="right" icon="circle" size="lg"></fa-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>
<td mat-cell *matCellDef="let user"> {{ 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>
<td mat-cell *matCellDef="let user"> {{ 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>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['view/1600']"></tr>
<!-- TODO: Update route once API is setup. -->
</table>
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
</mat-card-content>
</div>
</mat-card>
</div>