From 4bd7478bacf2f7c64ce1deea5f31db06b1a979ce Mon Sep 17 00:00:00 2001 From: Abhay Chawla Date: Mon, 2 Jul 2018 22:16:37 +0530 Subject: [PATCH] feat: update UI for self service user management (#89) Update UI for self service user management using angular material. --- src/app/core/core.module.ts | 10 +- .../create-user/create-user.component.html | 260 ++++++++++-------- .../create-user/create-user.component.ts | 6 + .../edit-user/edit-user.component.html | 94 +++++++ .../edit-user/edit-user.component.scss | 0 .../edit-user/edit-user.component.spec.ts | 25 ++ .../edit-user/edit-user.component.ts | 19 ++ .../self-service-routing.module.ts | 10 +- src/app/self-service/self-service.module.ts | 10 +- .../user-management.component.html | 239 +++++----------- .../user-management.component.scss | 8 + .../user-management.component.ts | 54 +++- .../view-user/view-user.component.html | 179 ++++++------ .../view-user/view-user.component.ts | 4 + 14 files changed, 543 insertions(+), 375 deletions(-) create mode 100644 src/app/self-service/edit-user/edit-user.component.html create mode 100644 src/app/self-service/edit-user/edit-user.component.scss create mode 100644 src/app/self-service/edit-user/edit-user.component.spec.ts create mode 100644 src/app/self-service/edit-user/edit-user.component.ts diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts index be2230005..1cc0bb8a9 100644 --- a/src/app/core/core.module.ts +++ b/src/app/core/core.module.ts @@ -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, diff --git a/src/app/self-service/create-user/create-user.component.html b/src/app/self-service/create-user/create-user.component.html index e6a3038b4..0ac9f0615 100644 --- a/src/app/self-service/create-user/create-user.component.html +++ b/src/app/self-service/create-user/create-user.component.html @@ -1,122 +1,140 @@ - + + + + {{ userType }} + + + + + + + + +
+ + + + {{ office.viewValue }} + + + + + + + {{ staff.viewValue }} + + + + + + + {{ client.viewValue }} + + + +
+ + + + + + + + + + + + + + +
+ + + + + + + {{ office.viewValue }} + + + + + + + + + + {{ staff.viewValue }} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {{ gender.viewValue }} + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + diff --git a/src/app/self-service/create-user/create-user.component.ts b/src/app/self-service/create-user/create-user.component.ts index ec3170653..6d23d96f2 100644 --- a/src/app/self-service/create-user/create-user.component.ts +++ b/src/app/self-service/create-user/create-user.component.ts @@ -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() { } diff --git a/src/app/self-service/edit-user/edit-user.component.html b/src/app/self-service/edit-user/edit-user.component.html new file mode 100644 index 000000000..0fcbfd222 --- /dev/null +++ b/src/app/self-service/edit-user/edit-user.component.html @@ -0,0 +1,94 @@ + + + + + + + +
+ + + + + + + {{ office.viewValue }} + + + + + + + + + + {{ staff.viewValue }} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {{ gender.viewValue }} + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + diff --git a/src/app/self-service/edit-user/edit-user.component.scss b/src/app/self-service/edit-user/edit-user.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/self-service/edit-user/edit-user.component.spec.ts b/src/app/self-service/edit-user/edit-user.component.spec.ts new file mode 100644 index 000000000..3702bd7a3 --- /dev/null +++ b/src/app/self-service/edit-user/edit-user.component.spec.ts @@ -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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ EditUserComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(EditUserComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/self-service/edit-user/edit-user.component.ts b/src/app/self-service/edit-user/edit-user.component.ts new file mode 100644 index 000000000..34df0da47 --- /dev/null +++ b/src/app/self-service/edit-user/edit-user.component.ts @@ -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() { + } + +} diff --git a/src/app/self-service/self-service-routing.module.ts b/src/app/self-service/self-service-routing.module.ts index 118cbbcc2..72c1577ae 100644 --- a/src/app/self-service/self-service-routing.module.ts +++ b/src/app/self-service/self-service-routing.module.ts @@ -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' }, } ]) ]; diff --git a/src/app/self-service/self-service.module.ts b/src/app/self-service/self-service.module.ts index 57c20a3e9..04ba372e3 100644 --- a/src/app/self-service/self-service.module.ts +++ b/src/app/self-service/self-service.module.ts @@ -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 diff --git a/src/app/self-service/user-management/user-management.component.html b/src/app/self-service/user-management/user-management.component.html index 0406736aa..af4b3ac3a 100644 --- a/src/app/self-service/user-management/user-management.component.html +++ b/src/app/self-service/user-management/user-management.component.html @@ -1,176 +1,85 @@ -SELF SERVICE USER MANAGEMENT - - - - -
- - -
- - Name - User ID - Status - Office - Staff - - + - - - -
- - -
- - Data - Data - - Data - Data + + + + + - - - -
- - -
- - Data - Data - - Data - Data + + + + + + + - - - -
- - -
- - Data - Data - - Data - Data + - - - -
- - -
- - Data - Data - - Data - Data + - - - -
- - -
- - Data - Data - - Data - Data + - - - -
- - -
- - Data - Data - - Data - Data + - - + + + + + + + + + + - + + Name + {{ user.name }} + - - - - --> + + User ID + {{ user.userID }} + + + + Email ID + {{ user.emailID }} + + + + Status + + lens + + + + + Office + {{ user.office }} + + + + Staff + {{ user.staff }} + + + + + + + + + + + + diff --git a/src/app/self-service/user-management/user-management.component.scss b/src/app/self-service/user-management/user-management.component.scss index 2f66be7af..cd55f513f 100644 --- a/src/app/self-service/user-management/user-management.component.scss +++ b/src/app/self-service/user-management/user-management.component.scss @@ -4,3 +4,11 @@ // ngb-pagination { // margin: 20px 0px; // } + +.mat-table { + width: 100%; +} + +.mat-form-field { + width: 100%; +} diff --git a/src/app/self-service/user-management/user-management.component.ts b/src/app/self-service/user-management/user-management.component.ts index 2e84e4e87..f461bfed4 100644 --- a/src/app/self-service/user-management/user-management.component.ts +++ b/src/app/self-service/user-management/user-management.component.ts @@ -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(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)); } } diff --git a/src/app/self-service/view-user/view-user.component.html b/src/app/self-service/view-user/view-user.component.html index 91c9e4c34..fea98f1e3 100644 --- a/src/app/self-service/view-user/view-user.component.html +++ b/src/app/self-service/view-user/view-user.component.html @@ -1,79 +1,102 @@ - + + lens  User ID: 123456 + + + + + + + + + + + + + + Username + + + + abhaychawla + + + + First Name + + + + Abhay + + + + Last Name + + + + Chawla + + + + Gender + + + + Male + + + + Date of Birth + + + + 18/06/1997 + + + + Email + + + + abhay.chawla97@gmail.com + + + + Mobile + + + + 9871105236 + + + + Office + + + + Head Office + + + + + Staff + + + + Smith W + + + + Activation Date + + + + 12/03/2018 + + + + + + + diff --git a/src/app/self-service/view-user/view-user.component.ts b/src/app/self-service/view-user/view-user.component.ts index 9cf45e1f4..ea71889b7 100644 --- a/src/app/self-service/view-user/view-user.component.ts +++ b/src/app/self-service/view-user/view-user.component.ts @@ -12,4 +12,8 @@ export class ViewUserComponent implements OnInit { ngOnInit() { } + openDialog() { + // TODO: Change Password Dialog + } + }