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

feat: update UI for self service user management (#89)

Browse Source 
Update UI for self service user management using angular material.
This commit is contained in:
Abhay Chawla
2018-07-02 22:16:37 +05:30
committed by GitHub
parent 9e290fa40c
commit 4bd7478bac
14 changed files with 543 additions and 375 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/core/core.module.ts
+6 -4
View File
@@ -35,7 +35,8 @@ import { MatCheckboxModule,
MatTableModule, MatTableModule,
MatSortModule, MatSortModule,
MatPaginatorModule, MatPaginatorModule,
MatDividerModule, } from '@angular/material'; MatDividerModule,
MatNativeDateModule} from '@angular/material';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
@@ -72,6 +73,7 @@ import { BreadcrumbComponent } from './shell/breadcrumb/breadcrumb.component';
MatInputModule, MatInputModule,
MatAutocompleteModule, MatAutocompleteModule,
MatDatepickerModule, MatDatepickerModule,
MatNativeDateModule,
MatFormFieldModule, MatFormFieldModule,
MatRadioModule, MatRadioModule,
MatSelectModule, MatSelectModule,
@@ -97,8 +99,7 @@ import { BreadcrumbComponent } from './shell/breadcrumb/breadcrumb.component';
MatTableModule, MatTableModule,
MatSortModule, MatSortModule,
MatPaginatorModule, MatPaginatorModule,
MatDividerModule, MatDividerModule
], ],
declarations: [ declarations: [
ShellComponent, ShellComponent,
@@ -117,6 +118,7 @@ import { BreadcrumbComponent } from './shell/breadcrumb/breadcrumb.component';
MatInputModule, MatInputModule,
MatAutocompleteModule, MatAutocompleteModule,
MatDatepickerModule, MatDatepickerModule,
MatNativeDateModule,
MatFormFieldModule, MatFormFieldModule,
MatRadioModule, MatRadioModule,
MatSelectModule, MatSelectModule,
@@ -142,7 +144,7 @@ import { BreadcrumbComponent } from './shell/breadcrumb/breadcrumb.component';
MatTableModule, MatTableModule,
MatSortModule, MatSortModule,
MatPaginatorModule, MatPaginatorModule,
MatDividerModule, MatDividerModule
], ],
providers: [ providers: [
AuthenticationService, AuthenticationService,
src/app/self-service/create-user/create-user.component.html
+139 -121
View File
@@ -1,122 +1,140 @@
<!-- <div class="fluid-container"> <mat-card class="container m-t-40">
<div class="container">
<div class="card mt-5">
<div class="card-header">
<h3 class="font-weight-bold">Create User</h3>
</div>
<div class="card-body">
<div class="row mb-3">
<div class="col-sm-12">
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input" (change)="isCollapsed = false" checked>
<label class="custom-control-label" for="customRadio1">Existing User</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadio2" name="customRadio" class="custom-control-input" (change)="isCollapsed = true">
<label class="custom-control-label" for="customRadio2">New User</label>
</div>
</div>
</div>
<div id="collapseExample">
<div class="row">
<div class="offset-sm-1 col-sm-5 my-3">
<select class="custom-select">
<option selected>Office</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
<div class="row">
<div class="offset-sm-1 col-sm-5 my-3">
<select class="custom-select">
<option selected>Staff</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
<div class="row">
<div class="offset-sm-1 col-sm-5 my-3">
<select class="custom-select">
<option selected>Client</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
<div class="row">
<div class="offset-sm-1 col-sm-5">
<button type="button" class="btn btn-success my-sm-4 btn-block"><i class="fas fa-unlock mr-2"></i>Activate Self Service User</button>
</div>
</div>
</div>
<div id="collapseExample"> <mat-card-header>
<div class="row"> <mat-radio-group class="example-radio-group" [(ngModel)]="currentUserType" fxLayout="row" fxLayoutGap="50px">
<div class="offset-sm-1 col-sm-4 my-3"> <mat-radio-button class="example-radio-button" *ngFor="let userType of userTypes" [value]="userType">
<select class="custom-select"> {{ userType }}
<option selected>Office</option> </mat-radio-button>
<option value="1">One</option> </mat-radio-group>
<option value="2">Two</option> </mat-card-header>
<option value="3">Three</option>
</select> <ng-container *ngIf="currentUserType === 'Existing User'">
</div>
<div class="offset-sm-1 col-sm-4 my-3"> <mat-card-content class="m-t-20">
<select class="custom-select">
<option selected>Staff</option> <form fxLayout="column" fxLayoutGap="10px">
<option value="1">One</option> <mat-form-field>
<option value="2">Two</option> <mat-select placeholder="Office">
<option value="3">Three</option> <mat-option *ngFor="let office of officeData" [value]="office.value">
</select> {{ office.viewValue }}
</div> </mat-option>
</div> </mat-select>
<div class="row"> </mat-form-field>
<div class="offset-sm-1 col-sm-4 my-3"> <mat-form-field>
<input class="form-control mr-sm-2 mb-sm-2" placeholder="Username" type="text"> <mat-select placeholder="Staff">
</div> <mat-option *ngFor="let staff of staffData" [value]="staff.value">
</div> {{ staff.viewValue }}
<div class="row"> </mat-option>
<div class="offset-sm-1 col-sm-4 my-3"> </mat-select>
<input class="form-control mr-sm-2 mb-sm-2" placeholder="First Name" type="text"> </mat-form-field>
</div> <mat-form-field>
<div class="offset-sm-1 col-sm-4 my-3"> <mat-select placeholder="Client">
<input class="form-control mr-sm-2 mb-sm-2" placeholder="Last Name" type="text"> <mat-option *ngFor="let client of clientData" [value]="client.value">
</div> {{ client.viewValue }}
</div> </mat-option>
<div class="row"> </mat-select>
<div class="offset-sm-1 col-sm-4 my-3"> </mat-form-field>
<select class="custom-select"> </form>
<option selected>Gender</option>
<option value="1">Male</option> </mat-card-content>
<option value="2">Female</option>
</select> <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
</div> <button mat-raised-button color="primary"><mat-icon>lock_open</mat-icon>&nbsp;&nbsp;Activate Self Service User</button>
<div class="offset-sm-1 col-sm-4 my-3"> <button mat-raised-button>Cancel</button>
<input class="form-control mr-sm-2 mb-sm-2" placeholder="Date of Birth" type="text"> </mat-card-actions>
</div>
</div> </ng-container>
<div class="row">
<div class="offset-sm-1 col-sm-4 my-3"> <ng-container *ngIf="currentUserType === 'New User'">
<input class="form-control mr-sm-2 mb-sm-2" placeholder="Email" type="text">
</div> <mat-card-content class="m-t-20">
<div class="offset-sm-1 col-sm-4 my-3">
<input class="form-control mr-sm-2 mb-sm-2" placeholder="Mobile No" type="text"> <form>
</div> <mat-grid-list cols="2" rowHeight="80px"> <!-- TODO: Dynamic columns to make responsive and hide the blank tile or find some other way -->
</div>
<div class="row"> <mat-grid-tile>
<div class="offset-sm-3 col-sm-2"> <mat-form-field fxFlex class="m-10">
<button type="button" class="btn btn-default my-sm-2 btn-block">Cancel</button> <mat-select placeholder="Office">
</div> <mat-option *ngFor="let office of officeData" [value]="office.value">
<div class="offset-sm-1 col-sm-2"> {{ office.viewValue }}
<button type="button" class="btn btn-primary my-sm-2 btn-block">Submit</button> </mat-option>
</div> </mat-select>
</div> </mat-form-field>
</div> </mat-grid-tile>
</div>
</div> <mat-grid-tile>
</div> <mat-form-field fxFlex class="m-10">
</div> --> <mat-select placeholder="Staff">
<mat-option *ngFor="let staff of staffData" [value]="staff.value">
{{ staff.viewValue }}
</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-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>
<mat-grid-tile>
<mat-form-field fxFlex class="m-10">
<input matInput placeholder="Email">
</mat-form-field>
</mat-grid-tile>
<mat-grid-tile>
<mat-form-field fxFlex class="m-10">
<input matInput placeholder="Mobile No">
</mat-form-field>
</mat-grid-tile>
</mat-grid-list>
</form>
</mat-card-content>
<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>
</ng-container>
</mat-card>
src/app/self-service/create-user/create-user.component.ts
+6
View File
@@ -8,6 +8,12 @@ import { Component, OnInit } from '@angular/core';
export class CreateUserComponent implements OnInit { export class CreateUserComponent implements OnInit {
isCollapsed = false; isCollapsed = false;
userTypes = ['Existing User', 'New User'];
currentUserType = this.userTypes[0];
officeData: string[];
staffData: string[];
clientData: string[];
genderData: string[];
constructor() { } constructor() { }
src/app/self-service/edit-user/edit-user.component.html
+94
View File
@@ -0,0 +1,94 @@
<mat-card class="container m-t-40">
<mat-card-header>
</mat-card-header>
<mat-card-content class="m-t-20">
<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-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-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-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>
<mat-grid-tile>
<mat-form-field fxFlex class="m-10">
<input matInput placeholder="Email">
</mat-form-field>
</mat-grid-tile>
<mat-grid-tile>
<mat-form-field fxFlex class="m-10">
<input matInput placeholder="Mobile No">
</mat-form-field>
</mat-grid-tile>
</mat-grid-list>
</form>
</mat-card-content>
<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>
src/app/self-service/edit-user/edit-user.component.scss
View File
src/app/self-service/edit-user/edit-user.component.spec.ts
+25
View File
@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { EditUserComponent } from './edit-user.component';
describe('EditUserComponent', () => {
let component: EditUserComponent;
let fixture: ComponentFixture<EditUserComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ EditUserComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(EditUserComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/self-service/edit-user/edit-user.component.ts
+19
View File
@@ -0,0 +1,19 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'mifosx-edit-user',
templateUrl: './edit-user.component.html',
styleUrls: ['./edit-user.component.scss']
})
export class EditUserComponent implements OnInit {
officeData: string[];
staffData: string[];
genderData: string[];
constructor() { }
ngOnInit() {
}
}
src/app/self-service/self-service-routing.module.ts
+8 -2
View File
@@ -5,6 +5,7 @@ import { Route, extract } from '../core';
import { UserManagementComponent } from './user-management/user-management.component'; import { UserManagementComponent } from './user-management/user-management.component';
import { CreateUserComponent } from './create-user/create-user.component'; import { CreateUserComponent } from './create-user/create-user.component';
import { ViewUserComponent } from './view-user/view-user.component'; import { ViewUserComponent } from './view-user/view-user.component';
import { EditUserComponent } from './edit-user/edit-user.component';
const routes: Routes = [ const routes: Routes = [
Route.withShell([ Route.withShell([
@@ -16,12 +17,17 @@ const routes: Routes = [
{ {
path: 'self-service/users/create', path: 'self-service/users/create',
component: CreateUserComponent, component: CreateUserComponent,
data: { title: extract('Create Self Service User'), breadcrumb: 'Create' } data: { title: extract('Create Self Service User'), breadcrumb: 'Self Service Users > Create' }
}, },
{ {
path: 'self-service/users/view', path: 'self-service/users/view',
component: ViewUserComponent, component: ViewUserComponent,
data: { title: extract('View Self Service User'), breadcrumb: 'View' }, data: { title: extract('View Self Service User'), breadcrumb: 'Self Service Users > View' },
},
{
path: 'self-service/users/edit',
component: EditUserComponent,
data: { title: extract('Edit Self Service User'), breadcrumb: 'Self Service Users > Edit' },
} }
]) ])
]; ];
src/app/self-service/self-service.module.ts
+8 -2
View File
@@ -1,20 +1,26 @@
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { UserManagementComponent } from './user-management/user-management.component'; import { CoreModule } from '../core/core.module';
import { SelfServiceRoutingModule } from './self-service-routing.module'; import { SelfServiceRoutingModule } from './self-service-routing.module';
import { UserManagementComponent } from './user-management/user-management.component';
import { CreateUserComponent } from './create-user/create-user.component'; import { CreateUserComponent } from './create-user/create-user.component';
import { ViewUserComponent } from './view-user/view-user.component'; import { ViewUserComponent } from './view-user/view-user.component';
import { EditUserComponent } from './edit-user/edit-user.component';
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, CommonModule,
CoreModule,
FormsModule,
SelfServiceRoutingModule SelfServiceRoutingModule
], ],
declarations: [ declarations: [
UserManagementComponent, UserManagementComponent,
CreateUserComponent, CreateUserComponent,
ViewUserComponent ViewUserComponent,
EditUserComponent
], ],
schemas: [ schemas: [
CUSTOM_ELEMENTS_SCHEMA CUSTOM_ELEMENTS_SCHEMA
src/app/self-service/user-management/user-management.component.html
+74 -165
View File
@@ -1,176 +1,85 @@
SELF SERVICE USER MANAGEMENT <mat-card class="container m-t-40">
<!-- <div class="fluid-container">
<div class="container">
<div class="card mt-5">
<div class="card-header">
<h3 class="font-weight-bold">Users</h3>
<div class="row">
<div class="col-sm-10">
<div class="row">
<div class="col-sm-6">
<input class="form-control mr-sm-2" placeholder="Search" type="text">
</div>
<div class="col-sm-2">
<button type="button" class="btn btn-outline-primary" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample"><i class="fas fa-chevron-down mr-2"></i>
Parameters
</button>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="float-right">
<button type="button" class="btn btn-primary btn-large" routerLink="/self-service/users/create" routerLinkActive="active"><i class="fas fa-plus mr-2"></i>Create User</button>
</div>
</div>
</div>
<div id="collapseExample">
<div class="row">
<div class="col-sm-4">
<input class="form-control mr-sm-2 mb-sm-2" placeholder="Name" type="text">
</div>
<div class="col-sm-4">
<input class="form-control mr-sm-2 mb-sm-2" placeholder="User ID" type="text">
</div>
</div>
<div class="row">
<div class="col-sm-4">
<input class="form-control mr-sm-2 mb-sm-2" placeholder="Staff" type="text">
</div>
<div class="col-sm-4">
<input class="form-control mr-sm-2 mb-sm-2" placeholder="Office" type="text">
</div>
</div>
<div class="row">
<div class="col-sm-4">
<input class="form-control mr-sm-2 mb-sm-2" placeholder="Activation Date" type="text">
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-6">
<button type="button" class="btn btn-primary mb-sm-2">Advance Search</button>
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-outline-primary mb-sm-2">Reset</button>
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-outline-primary float-right mb-sm-2" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample"><i class="fas fa-chevron-up"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-body">
<table class="table table-hover table-responsive-md table-fixed"> <!-- <mat-card-header> -->
<thead> <mat-grid-list cols="2" rowHeight="80px">
<tr>
<th>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck">
<label class="custom-control-label" for="customCheck">&nbsp;</label>
</div>
</th>
<th>Name</th>
<th>User ID</th>
<th>Status</th>
<th>Office</th>
<th>Staff</th>
</tr>
</thead>
<tbody> <mat-grid-tile>
<tr> <mat-form-field>
<th scope="row"> <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
<div class="custom-control custom-checkbox"> </mat-form-field>
<input type="checkbox" class="custom-control-input" id="customCheck1"> </mat-grid-tile>
<label class="custom-control-label" for="customCheck1">&nbsp;</label>
</div>
</th>
<td>Data</td>
<td>Data</td>
<td><i class="fas fa-stop" style="color: #00ce00" placement="top"></i></td>
<td>Data</td>
<td>Data</td>
</tr> <mat-grid-tile>
<tr> <mat-card-actions>
<th scope="row"> <button mat-raised-button color="primary"><mat-icon>lock_open</mat-icon>&nbsp;&nbsp;Activate</button>
<div class="custom-control custom-checkbox"> <button mat-raised-button color="primary"><mat-icon>lock</mat-icon>&nbsp;&nbsp;Deactivate</button>
<input type="checkbox" class="custom-control-input" id="customCheck2"> <button mat-raised-button color="primary" routerLink="/self-service/users/create"><mat-icon>add</mat-icon>&nbsp;&nbsp;Create User</button>
<label class="custom-control-label" for="customCheck2">&nbsp;</label> </mat-card-actions>
</div> </mat-grid-tile>
</th>
<td>Data</td>
<td>Data</td>
<td><i class="fas fa-stop" style="color: #00ce00" placement="top"></i></td>
<td>Data</td>
<td>Data</td>
</tr> </mat-grid-list>
<tr>
<th scope="row">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck3">
<label class="custom-control-label" for="customCheck3">&nbsp;</label>
</div>
</th>
<td>Data</td>
<td>Data</td>
<td><i class="fas fa-stop" style="color: #00ce00" placement="top"></i></td>
<td>Data</td>
<td>Data</td>
</tr> <!-- </mat-card-header> -->
<tr>
<th scope="row">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck4">
<label class="custom-control-label" for="customCheck4">&nbsp;</label>
</div>
</th>
<td>Data</td>
<td>Data</td>
<td><i class="fas fa-stop" placement="top"></i></td>
<td>Data</td>
<td>Data</td>
</tr> <mat-card-content class="mat-elevation-z8">
<tr>
<th scope="row">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck5">
<label class="custom-control-label" for="customCheck5">&nbsp;</label>
</div>
</th>
<td>Data</td>
<td>Data</td>
<td><i class="fas fa-stop" placement="top"></i></td>
<td>Data</td>
<td>Data</td>
</tr> <mat-table [dataSource]="dataSource" matSort>
<tr>
<th scope="row">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck6">
<label class="custom-control-label" for="customCheck6">&nbsp;</label>
</div>
</th>
<td>Data</td>
<td>Data</td>
<td><i class="fas fa-stop" style="color: #00ce00" placement="top"></i></td>
<td>Data</td>
<td>Data</td>
</tr> <ng-container matColumnDef="select">
</tbody> <mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</mat-header-cell>
<mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)">
</mat-checkbox>
</mat-cell>
</ng-container>
</table> <ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
<mat-cell *matCellDef="let user"> {{ user.name }} </mat-cell>
</ng-container>
</div> <ng-container matColumnDef="userID">
</div> <mat-header-cell *matHeaderCellDef mat-sort-header> User ID </mat-header-cell>
</div> <mat-cell *matCellDef="let user">{{ user.userID }}</mat-cell>
</div> --> </ng-container>
<ng-container matColumnDef="emailID">
<mat-header-cell *matHeaderCellDef mat-sort-header> Email ID </mat-header-cell>
<mat-cell *matCellDef="let user">{{ user.emailID }}</mat-cell>
</ng-container>
<ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef mat-sort-header> Status </mat-header-cell>
<mat-cell *matCellDef="let user">
<mat-icon matTooltip="{{ user.status }}" matTooltipPosition="right">lens</mat-icon>
</mat-cell>
</ng-container>
<ng-container matColumnDef="office">
<mat-header-cell *matHeaderCellDef mat-sort-header> Office </mat-header-cell>
<mat-cell *matCellDef="let user">{{ user.office }}</mat-cell>
</ng-container>
<ng-container matColumnDef="staff">
<mat-header-cell *matHeaderCellDef mat-sort-header> Staff </mat-header-cell>
<mat-cell *matCellDef="let user">{{ user.staff }}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)"></mat-row>
</mat-table>
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
</mat-card-content>
</mat-card>
src/app/self-service/user-management/user-management.component.scss
+8
View File
@@ -4,3 +4,11 @@
// ngb-pagination { // ngb-pagination {
// margin: 20px 0px; // margin: 20px 0px;
// } // }
.mat-table {
width: 100%;
}
.mat-form-field {
width: 100%;
}
src/app/self-service/user-management/user-management.component.ts
+51 -3
View File
@@ -1,4 +1,28 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit, ViewChild } from '@angular/core';
import { SelectionModel } from '@angular/cdk/collections';
import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
export interface User {
name: string;
userID: string;
emailID: string;
status: string;
office: string;
staff: string;
}
const USER_DATA: User[] = [
{ name: 'Data 1', userID: 'Data', emailID: 'Data', status: 'Data', office: 'Data', staff: 'Data' },
{ name: 'Data 2', userID: 'Data', emailID: 'Data', status: 'Data', office: 'Data', staff: 'Data' },
{ name: 'Data 3', userID: 'Data', emailID: 'Data', status: 'Data', office: 'Data', staff: 'Data' },
{ name: 'Data 4', userID: 'Data', emailID: 'Data', status: 'Data', office: 'Data', staff: 'Data' },
{ name: 'Data 5', userID: 'Data', emailID: 'Data', status: 'Data', office: 'Data', staff: 'Data' },
{ name: 'Data 6', userID: 'Data', emailID: 'Data', status: 'Data', office: 'Data', staff: 'Data' },
{ name: 'Data 7', userID: 'Data', emailID: 'Data', status: 'Data', office: 'Data', staff: 'Data' },
{ name: 'Data 8', userID: 'Data', emailID: 'Data', status: 'Data', office: 'Data', staff: 'Data' },
{ name: 'Data 9', userID: 'Data', emailID: 'Data', status: 'Data', office: 'Data', staff: 'Data' },
{ name: 'Data 10', userID: 'Data', emailID: 'Data', status: 'Data', office: 'Data', staff: 'Data' }
];
@Component({ @Component({
selector: 'mifosx-user-management', selector: 'mifosx-user-management',
@@ -7,12 +31,36 @@ import { Component, OnInit } from '@angular/core';
}) })
export class UserManagementComponent implements OnInit { export class UserManagementComponent implements OnInit {
page = 1; // page = 1;
isCollapsed = true; // isCollapsed = true;
displayedColumns: string[] = ['select', 'name', 'userID', 'emailID', 'status', 'office', 'staff'];
dataSource = new MatTableDataSource(USER_DATA);
selection = new SelectionModel<User>(true, []);
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
constructor() { } constructor() { }
ngOnInit() { ngOnInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
applyFilter(filterValue: string) {
this.dataSource.filter = filterValue.trim().toLowerCase();
}
isAllSelected() {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.data.length;
return numSelected === numRows;
}
masterToggle() {
this.isAllSelected() ?
this.selection.clear() :
this.dataSource.data.forEach(row => this.selection.select(row));
} }
} }
src/app/self-service/view-user/view-user.component.html
+101 -78
View File
@@ -1,79 +1,102 @@
<!-- <div class="fluid-container"> <mat-card class="container m-t-40">
<div class="container">
<div class="card mt-5">
<div class="card-header">
<h3 class="font-weight-bold">Users > Abhay Chawla</h3>
</div>
<div class="card-body">
<div class="row">
<div class="col-sm-3 ml-2">
<h5>
<i class="fas fa-stop" style="color: #00ce00" placement="top" ngbTooltip="Active"></i>
User ID: 24651
</h5>
</div>
</div>
<div class="row">
<div class="offset-sm-6 col-sm-1">
<button type="button" class="btn btn-primary my-sm-2"><i class="fas fa-edit mr-2"></i>Edit</button>
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-default my-sm-2 float-right"><i class="fas fa-cog mr-2"></i>Change Password</button>
</div>
<div class="col-sm-2">
<button type="button" class="btn btn-danger my-sm-2 float-right"><i class="fas fa-lock mr-2"></i>Deactivate</button>
</div>
</div>
<div class="row mt-2">
<div class="col-sm-6">
<table class="table table-striped">
<tbody> <mat-card-header>
<tr> <mat-icon matTooltip="Status" matTooltipPosition="above">lens</mat-icon>&nbsp;&nbsp;User ID: 123456
<th scope="row">Username</th> </mat-card-header>
<td>username</td>
</tr> <mat-card-actions align="right">
<tr> <button mat-raised-button color="primary" routerLink="/self-service/users/edit"><mat-icon>edit</mat-icon>&nbsp;&nbsp;Edit</button>
<th scope="row">First Name</th> <button mat-raised-button color="primary" (click)="openDialog()"><mat-icon>settings</mat-icon>&nbsp;&nbsp;Change Password</button>
<td>fname</td> <button mat-raised-button color="primary"><mat-icon>lock</mat-icon>&nbsp;&nbsp;Deactivate</button>
</tr> </mat-card-actions>
<tr>
<th scope="row">Last Name</th> <mat-card-content>
<td>lname</td>
</tr> <mat-grid-list cols="2" rowHeight="40px" style="width: 600px;">
<tr>
<th scope="row">Gender</th> <mat-grid-tile>
<td>gender</td> Username
</tr> </mat-grid-tile>
<tr>
<th scope="row">Date of Birth</th> <mat-grid-tile>
<td>01/01/2018</td> abhaychawla
</tr> </mat-grid-tile>
<tr>
<th scope="row">Email</th> <mat-grid-tile>
<td>email@gmail.com</td> First Name
</tr> </mat-grid-tile>
<tr>
<th scope="row">Mobile No</th> <mat-grid-tile>
<td>1234567890</td> Abhay
</tr> </mat-grid-tile>
<tr>
<th scope="row">Office</th> <mat-grid-tile>
<td>Head Office</td> Last Name
</tr> </mat-grid-tile>
<tr>
<th scope="row">Staff</th> <mat-grid-tile>
<td>Smith W</td> Chawla
</tr> </mat-grid-tile>
<tr>
<th scope="row">Activation Date</th> <mat-grid-tile>
<td>12/03/2018</td> Gender
</tr> </mat-grid-tile>
</tbody>
</table> <mat-grid-tile>
</div> Male
</div> </mat-grid-tile>
</div>
</div> <mat-grid-tile>
</div> Date of Birth
</div> --> </mat-grid-tile>
<mat-grid-tile>
18/06/1997
</mat-grid-tile>
<mat-grid-tile>
Email
</mat-grid-tile>
<mat-grid-tile>
abhay.chawla97@gmail.com
</mat-grid-tile>
<mat-grid-tile>
Mobile
</mat-grid-tile>
<mat-grid-tile>
9871105236
</mat-grid-tile>
<mat-grid-tile>
Office
</mat-grid-tile>
<mat-grid-tile>
Head Office
</mat-grid-tile>
<mat-grid-tile>
Staff
</mat-grid-tile>
<mat-grid-tile>
Smith W
</mat-grid-tile>
<mat-grid-tile>
Activation Date
</mat-grid-tile>
<mat-grid-tile>
12/03/2018
</mat-grid-tile>
</mat-grid-list>
</mat-card-content>
</mat-card>
src/app/self-service/view-user/view-user.component.ts
+4
View File
@@ -12,4 +12,8 @@ export class ViewUserComponent implements OnInit {
ngOnInit() { ngOnInit() {
} }
openDialog() {
// TODO: Change Password Dialog
}
} }