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/edit-user/edit-user.component.html
+52 -61
View File
@@ -1,94 +1,85 @@
<mat-card class="container m-t-40">
<div class="container">
<mat-card-header>
</mat-card-header>
<mat-card-content class="m-t-20">
<mat-card>
<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="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-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 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-grid-tile>
<mat-grid-tile>
<mat-form-field fxFlex class="m-10">
<input matInput placeholder="Username">
<mat-form-field fxFlex="48%">
<mat-label>Username</mat-label>
<input type="text" matInput>
</mat-form-field>
</mat-grid-tile>
<mat-grid-tile>
<span fxFlex="48%" fxHide.lt-md></span>
</mat-grid-tile>
<mat-grid-tile>
<mat-form-field fxFlex class="m-10">
<input matInput placeholder="First Name">
<mat-form-field fxFlex="48%">
<mat-label>First Name</mat-label>
<input type="text" matInput>
</mat-form-field>
</mat-grid-tile>
<mat-grid-tile>
<mat-form-field fxFlex class="m-10">
<input matInput placeholder="Last Name">
<mat-form-field fxFlex="48%">
<mat-label>Last Name</mat-label>
<input type="text" matInput>
</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 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-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 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-grid-tile>
<mat-grid-tile>
<mat-form-field fxFlex class="m-10">
<input matInput placeholder="Email">
<mat-form-field fxFlex="48%">
<mat-label>Email</mat-label>
<input type="email" matInput>
</mat-form-field>
</mat-grid-tile>
<mat-grid-tile>
<mat-form-field fxFlex class="m-10">
<input matInput placeholder="Mobile No">
<mat-form-field fxFlex="48%">
<mat-label>Mobile No</mat-label>
<input type="tel" matInput>
</mat-form-field>
</mat-grid-tile>
</mat-grid-list>
</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>
</mat-card-content>
</mat-card>
<mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
<button mat-raised-button color="primary">Submit</button>
<button mat-raised-button>Cancel</button>
</mat-card-actions>
</mat-card>
</div>
src/app/self-service/users/edit-user/edit-user.component.ts
+16 -3
View File
@@ -1,5 +1,11 @@
/** Angular Imports */
import { Component, OnInit } from '@angular/core';
/**
* Edit self service user component.
*
* TODO: Complete functionality once API is available.
*/
@Component({
selector: 'mifosx-edit-user',
templateUrl: './edit-user.component.html',
@@ -7,9 +13,16 @@ import { Component, OnInit } from '@angular/core';
})
export class EditUserComponent implements OnInit {
officeData: string[];
staffData: string[];
genderData: string[];
/** Placeholder for office data. */
officeData: any;
/** Placeholder for staff data. */
staffData: any;
/** Placeholder for gender data. */
genderData: any;
/** Minimum date of birth of user allowed. */
minDate = new Date(1900, 0, 1);
/** Maximum date of birth of user allowed. */
maxDate = new Date();
constructor() { }