CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 2 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/create-user/create-user.component.html
+122 -114
View File
@@ -1,140 +1,148 @@
<mat-card class="container m-t-40">
<div class="container" [class.small-width-container]="userType.value === 'Existing User'">
<mat-card-header>
<mat-radio-group class="example-radio-group" [(ngModel)]="currentUserType" fxLayout="row" fxLayoutGap="50px">
<mat-radio-button class="example-radio-button" *ngFor="let userType of userTypes" [value]="userType">
{{ userType }}
</mat-radio-button>
</mat-radio-group>
</mat-card-header>
<mat-card>
<ng-container *ngIf="currentUserType === 'Existing User'">
<mat-card-header class="m-b-20">
<mat-radio-group fxLayout="row" fxLayoutGap="20px" [formControl]="userType">
<mat-radio-button *ngFor="let type of userTypes" [value]="type">
{{ type }}
</mat-radio-button>
</mat-radio-group>
</mat-card-header>
<mat-card-content class="m-t-20">
<form fxLayout="column" fxLayoutGap="10px">
<mat-form-field>
<mat-select placeholder="Office">
<mat-option *ngFor="let office of officeData" [value]="office.value">
{{ office.viewValue }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Staff">
<mat-option *ngFor="let staff of staffData" [value]="staff.value">
{{ staff.viewValue }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Client">
<mat-option *ngFor="let client of clientData" [value]="client.value">
{{ client.viewValue }}
</mat-option>
</mat-select>
</mat-form-field>
</form>
</mat-card-content>
<mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
<button mat-raised-button color="primary"><mat-icon>lock_open</mat-icon>&nbsp;&nbsp;Activate Self Service User</button>
<button mat-raised-button>Cancel</button>
</mat-card-actions>
</ng-container>
<ng-container *ngIf="currentUserType === 'New User'">
<mat-card-content class="m-t-20">
<div *ngIf="userType.value === 'Existing User'">
<form>
<mat-grid-list cols="2" rowHeight="80px"> <!-- TODO: Dynamic columns to make responsive and hide the blank tile or find some other way -->
<mat-grid-tile>
<mat-form-field fxFlex class="m-10">
<mat-select placeholder="Office">
<mat-option *ngFor="let office of officeData" [value]="office.value">
{{ office.viewValue }}
<mat-card-content>
<div fxLayout="column">
<mat-form-field>
<mat-label>Office</mat-label>
<mat-select>
<mat-option *ngFor="let office of officeData" [value]="office">
{{ office }}
</mat-option>
</mat-select>
</mat-form-field>
</mat-grid-tile>
<mat-grid-tile>
<mat-form-field fxFlex class="m-10">
<mat-select placeholder="Staff">
<mat-option *ngFor="let staff of staffData" [value]="staff.value">
{{ staff.viewValue }}
<mat-form-field>
<mat-label>Staff</mat-label>
<mat-select>
<mat-option *ngFor="let staff of staffData" [value]="staff">
{{ staff }}
</mat-option>
</mat-select>
</mat-form-field>
</mat-grid-tile>
<mat-grid-tile>
<mat-form-field fxFlex class="m-10">
<input matInput placeholder="Username">
</mat-form-field>
</mat-grid-tile>
<mat-grid-tile>
</mat-grid-tile>
<mat-grid-tile>
<mat-form-field fxFlex class="m-10">
<input matInput placeholder="First Name">
</mat-form-field>
</mat-grid-tile>
<mat-grid-tile>
<mat-form-field fxFlex class="m-10">
<input matInput placeholder="Last Name">
</mat-form-field>
</mat-grid-tile>
<mat-grid-tile>
<mat-form-field fxFlex class="m-10">
<mat-select placeholder="Gender">
<mat-option *ngFor="let gender of genderData" [value]="gender.value">
{{ gender.viewValue }}
<mat-form-field>
<mat-label>Client</mat-label>
<mat-select>
<mat-option *ngFor="let client of clientData" [value]="client">
{{ client }}
</mat-option>
</mat-select>
</mat-form-field>
</mat-grid-tile>
<mat-grid-tile>
<mat-form-field fxFlex class="m-10">
<input matInput [matDatepicker]="picker" placeholder="Date of Birth">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</mat-grid-tile>
</div>
<mat-grid-tile>
<mat-form-field fxFlex class="m-10">
<input matInput placeholder="Email">
</mat-form-field>
</mat-grid-tile>
</mat-card-content>
<mat-grid-tile>
<mat-form-field fxFlex class="m-10">
<input matInput placeholder="Mobile No">
</mat-form-field>
</mat-grid-tile>
</mat-grid-list>
<mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
<button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
<button mat-raised-button color="accent">
<fa-icon icon="lock-open"></fa-icon>&nbsp;&nbsp;
Activate Self Service User
</button>
</mat-card-actions>
</form>
</mat-card-content>
</div>
<mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
<button mat-raised-button color="primary"><mat-icon>create</mat-icon>&nbsp;&nbsp;Create Self Service User</button>
<button mat-raised-button>Cancel</button>
</mat-card-actions>
<div *ngIf="userType.value === 'New User'">
</ng-container>
<form>
</mat-card>
<mat-card-content>
<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
<mat-form-field fxFlex="48%">
<mat-label>Office</mat-label>
<mat-select>
<mat-option *ngFor="let office of officeData" [value]="office">
{{ office }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>Staff</mat-label>
<mat-select>
<mat-option *ngFor="let staff of staffData" [value]="staff">
{{ staff }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>Username</mat-label>
<input type="text" matInput>
</mat-form-field>
<span fxFlex="48%" fxHide.lt-md></span>
<mat-form-field fxFlex="48%">
<mat-label>First Name</mat-label>
<input type="text" matInput>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>Last Name</mat-label>
<input type="text" matInput>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>Gender</mat-label>
<mat-select>
<mat-option *ngFor="let gender of genderData" [value]="gender">
{{ gender }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>Date of Birth</mat-label>
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dateOfBirthDatePicker">
<mat-datepicker-toggle matSuffix [for]="dateOfBirthDatePicker"></mat-datepicker-toggle>
<mat-datepicker #dateOfBirthDatePicker></mat-datepicker>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>Email</mat-label>
<input type="email" matInput>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>Mobile No</mat-label>
<input type="tel" matInput>
</mat-form-field>
</div>
</mat-card-content>
<mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
<button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
<button mat-raised-button color="primary">Submit</button>
</mat-card-actions>
</form>
</div>
</mat-card>
</div>