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,
MatSortModule,
MatPaginatorModule,
MatDividerModule, } from '@angular/material';
MatDividerModule,
MatNativeDateModule} from '@angular/material';
import { TranslateModule } from '@ngx-translate/core';
@@ -72,6 +73,7 @@ import { BreadcrumbComponent } from './shell/breadcrumb/breadcrumb.component';
MatInputModule,
MatAutocompleteModule,
MatDatepickerModule,
MatNativeDateModule,
MatFormFieldModule,
MatRadioModule,
MatSelectModule,
@@ -97,8 +99,7 @@ import { BreadcrumbComponent } from './shell/breadcrumb/breadcrumb.component';
MatTableModule,
MatSortModule,
MatPaginatorModule,
MatDividerModule,
MatDividerModule
],
declarations: [
ShellComponent,
@@ -117,6 +118,7 @@ import { BreadcrumbComponent } from './shell/breadcrumb/breadcrumb.component';
MatInputModule,
MatAutocompleteModule,
MatDatepickerModule,
MatNativeDateModule,
MatFormFieldModule,
MatRadioModule,
MatSelectModule,
@@ -142,7 +144,7 @@ import { BreadcrumbComponent } from './shell/breadcrumb/breadcrumb.component';
MatTableModule,
MatSortModule,
MatPaginatorModule,
MatDividerModule,
MatDividerModule
],
providers: [
AuthenticationService,
src/app/self-service/create-user/create-user.component.html
+139 -121
View File
@@ -1,122 +1,140 @@
<!-- <div class="fluid-container">
<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>
<mat-card class="container m-t-40">
<div id="collapseExample">
<div class="row">
<div class="offset-sm-1 col-sm-4 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 class="offset-sm-1 col-sm-4 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-4 my-3">
<input class="form-control mr-sm-2 mb-sm-2" placeholder="Username" type="text">
</div>
</div>
<div class="row">
<div class="offset-sm-1 col-sm-4 my-3">
<input class="form-control mr-sm-2 mb-sm-2" placeholder="First Name" type="text">
</div>
<div class="offset-sm-1 col-sm-4 my-3">
<input class="form-control mr-sm-2 mb-sm-2" placeholder="Last Name" type="text">
</div>
</div>
<div class="row">
<div class="offset-sm-1 col-sm-4 my-3">
<select class="custom-select">
<option selected>Gender</option>
<option value="1">Male</option>
<option value="2">Female</option>
</select>
</div>
<div class="offset-sm-1 col-sm-4 my-3">
<input class="form-control mr-sm-2 mb-sm-2" placeholder="Date of Birth" type="text">
</div>
</div>
<div class="row">
<div class="offset-sm-1 col-sm-4 my-3">
<input class="form-control mr-sm-2 mb-sm-2" placeholder="Email" type="text">
</div>
<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">
</div>
</div>
<div class="row">
<div class="offset-sm-3 col-sm-2">
<button type="button" class="btn btn-default my-sm-2 btn-block">Cancel</button>
</div>
<div class="offset-sm-1 col-sm-2">
<button type="button" class="btn btn-primary my-sm-2 btn-block">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div> -->
<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>
<ng-container *ngIf="currentUserType === 'Existing User'">
<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">
<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"><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 {
isCollapsed = false;
userTypes = ['Existing User', 'New User'];
currentUserType = this.userTypes[0];
officeData: string[];
staffData: string[];
clientData: string[];
genderData: string[];
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 { CreateUserComponent } from './create-user/create-user.component';
import { ViewUserComponent } from './view-user/view-user.component';
import { EditUserComponent } from './edit-user/edit-user.component';
const routes: Routes = [
Route.withShell([
@@ -16,12 +17,17 @@ const routes: Routes = [
{
path: 'self-service/users/create',
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',
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 { 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 { UserManagementComponent } from './user-management/user-management.component';
import { CreateUserComponent } from './create-user/create-user.component';
import { ViewUserComponent } from './view-user/view-user.component';
import { EditUserComponent } from './edit-user/edit-user.component';
@NgModule({
imports: [
CommonModule,
CoreModule,
FormsModule,
SelfServiceRoutingModule
],
declarations: [
UserManagementComponent,
CreateUserComponent,
ViewUserComponent
ViewUserComponent,
EditUserComponent
],
schemas: [
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
<!-- <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">
<mat-card class="container m-t-40">
<table class="table table-hover table-responsive-md table-fixed">
<!-- <mat-card-header> -->
<thead>
<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>
<mat-grid-list cols="2" rowHeight="80px">
<tbody>
<tr>
<th scope="row">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<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>
<mat-grid-tile>
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
</mat-grid-tile>
</tr>
<tr>
<th scope="row">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck2">
<label class="custom-control-label" for="customCheck2">&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>
<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>
</tr>
<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>
</mat-grid-list>
</tr>
<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>
<!-- </mat-card-header> -->
</tr>
<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>
<mat-card-content class="mat-elevation-z8">
</tr>
<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>
<mat-table [dataSource]="dataSource" matSort>
</tr>
</tbody>
<ng-container matColumnDef="select">
<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>
</div>
</div>
</div> -->
<ng-container matColumnDef="userID">
<mat-header-cell *matHeaderCellDef mat-sort-header> User ID </mat-header-cell>
<mat-cell *matCellDef="let user">{{ user.userID }}</mat-cell>
</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 {
// 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({
selector: 'mifosx-user-management',
@@ -7,12 +31,36 @@ import { Component, OnInit } from '@angular/core';
})
export class UserManagementComponent implements OnInit {
page = 1;
isCollapsed = true;
// page = 1;
// 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() { }
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">
<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">
<mat-card class="container m-t-40">
<tbody>
<tr>
<th scope="row">Username</th>
<td>username</td>
</tr>
<tr>
<th scope="row">First Name</th>
<td>fname</td>
</tr>
<tr>
<th scope="row">Last Name</th>
<td>lname</td>
</tr>
<tr>
<th scope="row">Gender</th>
<td>gender</td>
</tr>
<tr>
<th scope="row">Date of Birth</th>
<td>01/01/2018</td>
</tr>
<tr>
<th scope="row">Email</th>
<td>email@gmail.com</td>
</tr>
<tr>
<th scope="row">Mobile No</th>
<td>1234567890</td>
</tr>
<tr>
<th scope="row">Office</th>
<td>Head Office</td>
</tr>
<tr>
<th scope="row">Staff</th>
<td>Smith W</td>
</tr>
<tr>
<th scope="row">Activation Date</th>
<td>12/03/2018</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div> -->
<mat-card-header>
<mat-icon matTooltip="Status" matTooltipPosition="above">lens</mat-icon>&nbsp;&nbsp;User ID: 123456
</mat-card-header>
<mat-card-actions align="right">
<button mat-raised-button color="primary" routerLink="/self-service/users/edit"><mat-icon>edit</mat-icon>&nbsp;&nbsp;Edit</button>
<button mat-raised-button color="primary" (click)="openDialog()"><mat-icon>settings</mat-icon>&nbsp;&nbsp;Change Password</button>
<button mat-raised-button color="primary"><mat-icon>lock</mat-icon>&nbsp;&nbsp;Deactivate</button>
</mat-card-actions>
<mat-card-content>
<mat-grid-list cols="2" rowHeight="40px" style="width: 600px;">
<mat-grid-tile>
Username
</mat-grid-tile>
<mat-grid-tile>
abhaychawla
</mat-grid-tile>
<mat-grid-tile>
First Name
</mat-grid-tile>
<mat-grid-tile>
Abhay
</mat-grid-tile>
<mat-grid-tile>
Last Name
</mat-grid-tile>
<mat-grid-tile>
Chawla
</mat-grid-tile>
<mat-grid-tile>
Gender
</mat-grid-tile>
<mat-grid-tile>
Male
</mat-grid-tile>
<mat-grid-tile>
Date of Birth
</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() {
}
openDialog() {
// TODO: Change Password Dialog
}
}