diff --git a/src/app/core/shell/breadcrumb/breadcrumb.component.ts b/src/app/core/shell/breadcrumb/breadcrumb.component.ts index 445287974..2665c6499 100644 --- a/src/app/core/shell/breadcrumb/breadcrumb.component.ts +++ b/src/app/core/shell/breadcrumb/breadcrumb.component.ts @@ -52,7 +52,7 @@ export class BreadcrumbComponent implements OnInit { /** * Generates the breadcrumbs. - * @param {ActivatedRoute} activatedRoute Activate Route. + * @param {ActivatedRoute} activatedRoute Activated Route. * @param {Router} router Router for navigation. */ constructor(private activatedRoute: ActivatedRoute, diff --git a/src/app/core/shell/shell.component.ts b/src/app/core/shell/shell.component.ts index 84cbaa365..12e238cda 100644 --- a/src/app/core/shell/shell.component.ts +++ b/src/app/core/shell/shell.component.ts @@ -56,6 +56,7 @@ export class ShellComponent implements OnInit, OnDestroy { */ toggleCollapse($event: boolean) { this.sidenavCollapsed = $event; + this.cdr.detectChanges(); } /** diff --git a/src/app/core/shell/toolbar/toolbar.component.html b/src/app/core/shell/toolbar/toolbar.component.html index 7700bf84a..f55a37bc0 100644 --- a/src/app/core/shell/toolbar/toolbar.component.html +++ b/src/app/core/shell/toolbar/toolbar.component.html @@ -110,7 +110,7 @@ - + diff --git a/src/app/self-service/app-configuration/app-configuration.component.html b/src/app/self-service/app-configuration/app-configuration.component.html index e5c54e671..fe2f5a950 100644 --- a/src/app/self-service/app-configuration/app-configuration.component.html +++ b/src/app/self-service/app-configuration/app-configuration.component.html @@ -1,4 +1,4 @@ - +
@@ -13,29 +13,34 @@
- + Name of the Organisation + - + Description + - + Summary + - - - {{ language.viewValue }} + Default Language + + + {{ language }} - - - {{ dateFormat.viewValue }} + Default Date Format + + + {{ dateFormat }} @@ -54,10 +59,17 @@
- Favicon - Cover Image - Logo - Logo with Organisation Name + Favicon + + + Cover Image + + + Logo + + + Logo with Organisation Name +
@@ -73,36 +85,40 @@
- Mobile Banking App + Mobile Banking App - - - {{ theme.viewValue }} + Default Theme + + + {{ theme }} - - - {{ font.viewValue }} + Default Font + + + {{ font }} - Online Banking App + Online Banking App - - - {{ theme.viewValue }} + Default Theme + + + {{ theme }} - - - {{ font.viewValue }} + Default Font + + + {{ font }} @@ -122,15 +138,18 @@
- + Website + - + Email + - + Contact No +
@@ -139,4 +158,4 @@ - +
diff --git a/src/app/self-service/app-configuration/app-configuration.component.scss b/src/app/self-service/app-configuration/app-configuration.component.scss index e69de29bb..4fdf5e8ec 100644 --- a/src/app/self-service/app-configuration/app-configuration.component.scss +++ b/src/app/self-service/app-configuration/app-configuration.component.scss @@ -0,0 +1,3 @@ +.header { + font-weight: 500; +} diff --git a/src/app/self-service/app-configuration/app-configuration.component.ts b/src/app/self-service/app-configuration/app-configuration.component.ts index 0bcc50d9c..4d01a01ed 100644 --- a/src/app/self-service/app-configuration/app-configuration.component.ts +++ b/src/app/self-service/app-configuration/app-configuration.component.ts @@ -1,5 +1,11 @@ +/** Angular Imports */ import { Component, OnInit } from '@angular/core'; +/** + * Self service app configuration component. + * + * TODO: Complete functionality once API is available. + */ @Component({ selector: 'mifosx-app-configuration', templateUrl: './app-configuration.component.html', @@ -7,12 +13,18 @@ import { Component, OnInit } from '@angular/core'; }) export class AppConfigurationComponent implements OnInit { - languages: string[]; - dateFormats: string[]; - mobileAppThemes: string[]; - mobileAppFonts: string[]; - onlineBankingAppThemes: string[]; - onlineBankingAppFonts: string[]; + /** Placeholder for languages. */ + languages: any; + /** Placeholder for date formats. */ + dateFormats: any; + /** Placeholder for mobile app themes. */ + mobileAppThemes: any; + /** Placeholder for mobile app fonts. */ + mobileAppFonts: any; + /** Placeholder for online banking app themes. */ + onlineBankingAppThemes: any; + /** Placeholder for online banking app fonts. */ + onlineBankingAppFonts: any; constructor() { } diff --git a/src/app/self-service/self-service-routing.module.ts b/src/app/self-service/self-service-routing.module.ts index 497ce049a..5333270e4 100644 --- a/src/app/self-service/self-service-routing.module.ts +++ b/src/app/self-service/self-service-routing.module.ts @@ -1,15 +1,27 @@ +/** Angular Imports */ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; -import { Route, extract } from '../core'; +/** Routing Imports */ +import { Route } from '../core'; + +/** Translation Imports */ +import { extract } from '../core'; + +/** Custom Components */ +import { SelfServiceComponent } from './self-service.component'; import { UsersComponent } from './users/users.component'; import { CreateUserComponent } from './users/create-user/create-user.component'; import { ViewUserComponent } from './users/view-user/view-user.component'; import { EditUserComponent } from './users/edit-user/edit-user.component'; import { AppConfigurationComponent } from './app-configuration/app-configuration.component'; -import { SelfServiceComponent } from './self-service.component'; +import { TaskManagementComponent } from './task-management/task-management.component'; + +/** Custom Resolvers */ +import { UsersResolver } from './users/users.resolver'; import { ViewUserResolver } from './users/view-user/view-user.resolver'; +/** Self Service Admin Portal Routes */ const routes: Routes = [ Route.withShell([ { @@ -23,7 +35,10 @@ const routes: Routes = [ children: [ { path: '', - component: UsersComponent + component: UsersComponent, + resolve: { + users: UsersResolver + } }, { path: 'create', @@ -53,16 +68,29 @@ const routes: Routes = [ { path: 'app-configuration', component: AppConfigurationComponent, - data: { title: extract('App Configuration'), breadcrumb: 'App Configuration' }, + data: { title: extract('Self Service App Configuration'), breadcrumb: 'App Configuration' } + }, + { + path: 'task-management', + component: TaskManagementComponent, + data: { title: extract('Self Service Task Management'), breadcrumb: 'Task Management' } } ] } ]) ]; +/** + * Self Service Routing Module + * + * Configures the self service admin portal routes. + */ @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule], - providers: [ViewUserResolver] + providers: [ + UsersResolver, + ViewUserResolver + ] }) export class SelfServiceRoutingModule { } diff --git a/src/app/self-service/self-service.component.ts b/src/app/self-service/self-service.component.ts index 6aaef20a4..98902953a 100644 --- a/src/app/self-service/self-service.component.ts +++ b/src/app/self-service/self-service.component.ts @@ -1,5 +1,11 @@ +/** Angular Imports */ import { Component, OnInit } from '@angular/core'; +/** + * Self service component. + * + * All components related to self service admin portal are routed here. + */ @Component({ selector: 'mifosx-self-service', templateUrl: './self-service.component.html', diff --git a/src/app/self-service/self-service.module.ts b/src/app/self-service/self-service.module.ts index d2f53d576..95c85d8d9 100644 --- a/src/app/self-service/self-service.module.ts +++ b/src/app/self-service/self-service.module.ts @@ -1,23 +1,29 @@ -import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; -import { CommonModule } from '@angular/common'; +/** Angular Imports */ +import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { CoreModule } from '../core/core.module'; +/** Custom Modules */ +import { SharedModule } from '../shared/shared.module'; import { SelfServiceRoutingModule } from './self-service-routing.module'; + +/** Custom Components */ +import { SelfServiceComponent } from './self-service.component'; +import { UsersComponent } from './users/users.component'; import { CreateUserComponent } from './users/create-user/create-user.component'; import { ViewUserComponent } from './users/view-user/view-user.component'; import { EditUserComponent } from './users/edit-user/edit-user.component'; import { AppConfigurationComponent } from './app-configuration/app-configuration.component'; -import { SharedModule } from '../shared/shared.module'; -import { SelfServiceComponent } from './self-service.component'; -import { UsersComponent } from './users/users.component'; +import { TaskManagementComponent } from './task-management/task-management.component'; +/** + * Self Service Module + * + * All components related to self service admin portal functions should be declared here. + */ @NgModule({ imports: [ - CommonModule, - CoreModule, - FormsModule, SharedModule, + FormsModule, SelfServiceRoutingModule ], declarations: [ @@ -26,10 +32,8 @@ import { UsersComponent } from './users/users.component'; CreateUserComponent, ViewUserComponent, EditUserComponent, - AppConfigurationComponent - ], - schemas: [ - CUSTOM_ELEMENTS_SCHEMA - ], + AppConfigurationComponent, + TaskManagementComponent + ] }) export class SelfServiceModule { } diff --git a/src/app/self-service/task-management/task-management.component.html b/src/app/self-service/task-management/task-management.component.html new file mode 100644 index 000000000..086007cb9 --- /dev/null +++ b/src/app/self-service/task-management/task-management.component.html @@ -0,0 +1,7 @@ +
+ +

+ TODO: task-management component. +

+ +
diff --git a/src/app/self-service/task-management/task-management.component.scss b/src/app/self-service/task-management/task-management.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/self-service/task-management/task-management.component.spec.ts b/src/app/self-service/task-management/task-management.component.spec.ts new file mode 100644 index 000000000..52e6cde1a --- /dev/null +++ b/src/app/self-service/task-management/task-management.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TaskManagementComponent } from './task-management.component'; + +describe('TaskManagementComponent', () => { + let component: TaskManagementComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ TaskManagementComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TaskManagementComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/self-service/task-management/task-management.component.ts b/src/app/self-service/task-management/task-management.component.ts new file mode 100644 index 000000000..cb2577cf6 --- /dev/null +++ b/src/app/self-service/task-management/task-management.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'mifosx-task-management', + templateUrl: './task-management.component.html', + styleUrls: ['./task-management.component.scss'] +}) +export class TaskManagementComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/self-service/users/create-user/create-user.component.html b/src/app/self-service/users/create-user/create-user.component.html index 0ac9f0615..b0c22f2d3 100644 --- a/src/app/self-service/users/create-user/create-user.component.html +++ b/src/app/self-service/users/create-user/create-user.component.html @@ -1,140 +1,148 @@ - +
- - - - {{ userType }} - - - + - + + + + {{ type }} + + + - - -
- - - - {{ office.viewValue }} - - - - - - - {{ staff.viewValue }} - - - - - - - {{ client.viewValue }} - - - -
- - - - - - - - - - - - - +
- - - - - - {{ office.viewValue }} + + +
+ + + Office + + + {{ office }} - - - - - - {{ staff.viewValue }} + + Staff + + + {{ staff }} - - - - - - - - - - - - - - - - - - - - - - - - - - - - {{ gender.viewValue }} + + Client + + + {{ client }} - - - - - - - - +
- - - - - + - - - - - - - + + + +
- +
- - - - +
- +
- + + +
+ + + Office + + + {{ office }} + + + + + + Staff + + + {{ staff }} + + + + + + Username + + + + + + + First Name + + + + + Last Name + + + + + Gender + + + {{ gender }} + + + + + + Date of Birth + + + + + + + Email + + + + + Mobile No + + + +
+ + + + + + + + +
+ +
+ + + +
diff --git a/src/app/self-service/users/create-user/create-user.component.scss b/src/app/self-service/users/create-user/create-user.component.scss index e69de29bb..6d9fea192 100644 --- a/src/app/self-service/users/create-user/create-user.component.scss +++ b/src/app/self-service/users/create-user/create-user.component.scss @@ -0,0 +1,3 @@ +.small-width-container { + max-width: 37rem; +} diff --git a/src/app/self-service/users/create-user/create-user.component.ts b/src/app/self-service/users/create-user/create-user.component.ts index 6d23d96f2..59658bf68 100644 --- a/src/app/self-service/users/create-user/create-user.component.ts +++ b/src/app/self-service/users/create-user/create-user.component.ts @@ -1,5 +1,12 @@ +/** Angular Imports */ import { Component, OnInit } from '@angular/core'; +import { FormControl } from '@angular/forms'; +/** + * Create self service user component. + * + * TODO: Complete functionality once API is available. + */ @Component({ selector: 'mifosx-create-user', templateUrl: './create-user.component.html', @@ -7,13 +14,22 @@ import { Component, OnInit } from '@angular/core'; }) export class CreateUserComponent implements OnInit { - isCollapsed = false; + /** Denotes type of user. */ userTypes = ['Existing User', 'New User']; - currentUserType = this.userTypes[0]; - officeData: string[]; - staffData: string[]; - clientData: string[]; - genderData: string[]; + /** Radio button group form control for type of user. */ + userType = new FormControl(this.userTypes[0]); + /** Placeholder for office data. */ + officeData = ['Office 1', 'Office 2']; + /** Placeholder for staff data. */ + staffData = ['Staff 1', 'Staff 2']; + /** Placeholder for client data. */ + clientData = ['Client 1', 'Client 2']; + /** Placeholder for gender data. */ + genderData = ['Male', 'Female']; + /** Minimum date of birth of user allowed. */ + minDate = new Date(1900, 0, 1); + /** Maximum date of birth of user allowed. */ + maxDate = new Date(); constructor() { } diff --git a/src/app/self-service/users/edit-user/edit-user.component.html b/src/app/self-service/users/edit-user/edit-user.component.html index 0fcbfd222..574cede62 100644 --- a/src/app/self-service/users/edit-user/edit-user.component.html +++ b/src/app/self-service/users/edit-user/edit-user.component.html @@ -1,94 +1,85 @@ - +
- - - - +
- - - - - - {{ office.viewValue }} + + +
+ + + Office + + + {{ office }} - - - - - - {{ staff.viewValue }} + + Staff + + + {{ staff }} - - - - + + Username + - - + - - - - - + + First Name + - - - - + + Last Name + - - - - - - {{ gender.viewValue }} + + Gender + + + {{ gender }} - - - - - - + + Date of Birth + + + - - - - + + Email + - - - - + + Mobile No + - - +
+ + + + + + + -
+ - - - - - - +
diff --git a/src/app/self-service/users/edit-user/edit-user.component.ts b/src/app/self-service/users/edit-user/edit-user.component.ts index 34df0da47..3aad4bcdd 100644 --- a/src/app/self-service/users/edit-user/edit-user.component.ts +++ b/src/app/self-service/users/edit-user/edit-user.component.ts @@ -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() { } diff --git a/src/app/self-service/users/user.model.ts b/src/app/self-service/users/user.model.ts new file mode 100644 index 000000000..8d4a4dada --- /dev/null +++ b/src/app/self-service/users/user.model.ts @@ -0,0 +1,9 @@ +/** Self Service User model. */ +export interface User { + id: number; + name: string; + email: string; + isSelfServiceUser: boolean; + officeName: string; + staff: string; +} diff --git a/src/app/self-service/users/user.service.ts b/src/app/self-service/users/user.service.ts index 883b06e58..80cac1001 100644 --- a/src/app/self-service/users/user.service.ts +++ b/src/app/self-service/users/user.service.ts @@ -1,32 +1,57 @@ +/** Angular Routes */ import { Injectable } from '@angular/core'; -import { HttpClient } from '@angular/common/http'; -import { Observable } from 'rxjs/internal/Observable'; -import { map } from 'rxjs/internal/operators/map'; +import { HttpClient, HttpParams } from '@angular/common/http'; +/** rxjs Imports */ +import { Observable } from 'rxjs'; +import { map } from 'rxjs/operators'; + +/** Custom Models */ +import { User } from './user.model'; + +/** + * Self service users service. + * + * TODO: Complete functionality once API is available. + */ @Injectable({ providedIn: 'root' }) export class UserService { + /** + * @param {HttpClient} http Http Client to send requests. + */ constructor(private http: HttpClient) { } - getUsers(): Observable { - return this.http.get(`/users?fields=id,firstname,lastname,email,officeName,staff&tenantIdentifier=default&pretty=true`) + /** + * Gets all the self service users. + * + * TODO: To be replaced once API is available. + */ + getUsers(): Observable { + const httpParams = new HttpParams().set('fields', 'id,firstname,lastname,email,officeName,staff'); + return this.http.get('/users', { params: httpParams }) .pipe( - map((res) => { - res.forEach((user: any) => { + map((users: any) => { + users.forEach((user: any) => { user.name = `${user.firstname} ${user.lastname}`; user.staff = user.staff ? `${user.staff.firstname} ${user.staff.lastname}` : ''; delete user.firstname; delete user.lastname; }); - return res; + return users as User[]; }) ); } + /** + * Gets a self service user. + * + * TODO: Mock data to be replaced once API is available. + */ getUser(): Observable { - return this.http.disableApiPrefix().get('http://localhost:4200/assets/mock/user.mock.json'); + return this.http.disableApiPrefix().get('/assets/mock/user.mock.json'); } } diff --git a/src/app/self-service/users/users.component.html b/src/app/self-service/users/users.component.html index d63601be4..321753e93 100644 --- a/src/app/self-service/users/users.component.html +++ b/src/app/self-service/users/users.component.html @@ -1,30 +1,29 @@ - +
+ + + + +
-
- +
- - - - - - - - - - - - - - - - - +
+ + Filter + +
- +
@@ -45,46 +44,46 @@ - + - + - + - + - + - + +
Name Name: {{ user.name }} {{ user.name }} User ID User ID: {{ user.id }} {{ user.id }} Email ID Email ID: {{ user.email }} {{ user.email }} Status - Status:
- lens +
Office Office: {{ user.officeName }} {{ user.officeName }} Staff Staff: {{ user.staff }} {{ user.staff }}
- +
- +
diff --git a/src/app/self-service/users/users.component.scss b/src/app/self-service/users/users.component.scss index a73e2c46e..c7350db93 100644 --- a/src/app/self-service/users/users.component.scss +++ b/src/app/self-service/users/users.component.scss @@ -1,53 +1,12 @@ -// td, th { -// text-align: center; -// } -// ngb-pagination { -// margin: 20px 0px; -// } - -.mat-table { +table { width: 100%; } -// .mat-form-field { -// width: 100%; -// } - -.mobile-label { - display: none; -} - +// TODO: CONFIGURE THESE CLASSES GLOBALLY .inactive { - color: grey; + color: #d3d3d3; } .active { - color: green; + color: #32cd32; } - -// @media(max-width: 600px) { -// .mobile-label { -// width: 80px; -// display: inline-block; -// font-weight: bold; -// } - -// .mat-header-row { -// display: none; -// } - -// .mat-row { -// display: flex; -// flex-direction: column; -// align-items: start; -// padding: 68px 24px; -// min-height: 108px; -// } - -// .mat-cell { -// flex: 1; -// display: flex; -// align-items: center; -// min-height: inherit; -// } -// } diff --git a/src/app/self-service/users/users.component.ts b/src/app/self-service/users/users.component.ts index e349aa8e9..608554652 100644 --- a/src/app/self-service/users/users.component.ts +++ b/src/app/self-service/users/users.component.ts @@ -1,17 +1,20 @@ +/** Angular Imports */ import { Component, OnInit, ViewChild } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; import { SelectionModel } from '@angular/cdk/collections'; import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material'; + +/** Custom Services */ import { UserService } from './user.service'; -export interface User { - name: string; - id: number; - email: string; - isSelfServiceUser: boolean; - officeName: string; - staff: string; -} +/** Custom Model */ +import { User } from './user.model'; +/** + * Self service users component. + * + * TODO: Complete functionality once API is available. + */ @Component({ selector: 'mifosx-users', templateUrl: './users.component.html', @@ -19,33 +22,60 @@ export interface User { }) export class UsersComponent implements OnInit { + /** Self service users. */ + userData: User[]; + /** Columns to be displayed in users table. */ displayedColumns: string[] = ['select', 'name', 'id', 'email', 'status', 'officeName', 'staff']; - dataSource: any; + /** Data source for users table. */ + dataSource: MatTableDataSource; + /** Selection model for users table. */ selection = new SelectionModel(true, []); + /** Paginator for users table. */ @ViewChild(MatPaginator) paginator: MatPaginator; + /** Sorter for users table. */ @ViewChild(MatSort) sort: MatSort; - constructor(private userService: UserService) { } - - ngOnInit() { - this.userService.getUsers().subscribe((data: User[]) => { - this.dataSource = new MatTableDataSource(data); - this.dataSource.paginator = this.paginator; - this.dataSource.sort = this.sort; + /** + * Retrieves the users data from `resolve`. + * @param {ActivatedRoute} route Activated Route. + */ + constructor(private route: ActivatedRoute) { + this.route.data.subscribe((data: { users: User[] }) => { + this.userData = data.users; }); } + /** + * Initializes the data source, paginator and sorter for users table. + */ + ngOnInit() { + this.dataSource = new MatTableDataSource(this.userData); + this.dataSource.paginator = this.paginator; + this.dataSource.sort = this.sort; + } + + /** + * Filters data in users table based on passed value. + * @param {string} filterValue Value to filter data. + */ applyFilter(filterValue: string) { this.dataSource.filter = filterValue.trim().toLowerCase(); } - isAllSelected() { + /** + * Checks if all rows of users table are selected. + * @returns {boolean} True if all rows are selected. + */ + isAllSelected(): boolean { const numSelected = this.selection.selected.length; const numRows = this.dataSource.data.length; return numSelected === numRows; } + /** + * Toggles selection for all rows of users table. + */ masterToggle() { this.isAllSelected() ? this.selection.clear() : diff --git a/src/app/self-service/users/users.resolver.ts b/src/app/self-service/users/users.resolver.ts new file mode 100644 index 000000000..132ba0612 --- /dev/null +++ b/src/app/self-service/users/users.resolver.ts @@ -0,0 +1,33 @@ +/** Angular Routes */ +import { Injectable } from '@angular/core'; +import { Resolve } from '@angular/router'; + +/** rxjs Imports */ +import { Observable } from 'rxjs'; + +/** Custom Services */ +import { UserService } from './user.service'; + +/** Custom Model */ +import { User } from './user.model'; + +/** + * Self service users data resolver. + */ +@Injectable() +export class UsersResolver implements Resolve { + + /** + * @param {UserService} userService Self service user service. + */ + constructor(private userService: UserService) {} + + /** + * Returns the users data. + * @returns {Observable} + */ + resolve(): Observable { + return this.userService.getUsers(); + } + +} diff --git a/src/app/self-service/users/view-user/view-user.component.html b/src/app/self-service/users/view-user/view-user.component.html index 211366ca1..cd27ff75a 100644 --- a/src/app/self-service/users/view-user/view-user.component.html +++ b/src/app/self-service/users/view-user/view-user.component.html @@ -1,102 +1,120 @@ - +
+ + + + + +
- - lens  User ID: 123456 - +
- - - - - + - + - +
- - Username - +
+    + ID: {{ user.id }} +
- - abhaychawla - +
+ Username +
- - First Name - +
+ {{ user.username }} +
- - Abhay - +
+ First Name +
- - Last Name - +
+ {{ user.firstName }} +
- - Chawla - +
+ Last Name +
- - Gender - +
+ {{ user.lastName }} +
- - Male - +
+ Gender +
- - Date of Birth - +
+ {{ user.gender }} +
- - 18/06/1997 - +
+ Date of Birth +
- - Email - +
+ {{ user.dateOfBirth }} +
- - abhay.chawla97@gmail.com - +
+ Email +
- - Mobile - +
+ {{ user.email }} +
- - 9871105236 - +
+ Mobile +
- - Office - +
+ {{ user.mobile }} +
- - Head Office - +
+ Office +
+
+ {{ user.office }} +
- - Staff - +
+ Staff +
- - Smith W - +
+ {{ user.staff }} +
- - Activation Date - +
+ Activation Date +
- - 12/03/2018 - +
+ {{ user.activationDate }} +
- +
- + - + + +
diff --git a/src/app/self-service/users/view-user/view-user.component.scss b/src/app/self-service/users/view-user/view-user.component.scss index e69de29bb..70d152196 100644 --- a/src/app/self-service/users/view-user/view-user.component.scss +++ b/src/app/self-service/users/view-user/view-user.component.scss @@ -0,0 +1,14 @@ +.container { + max-width: 37rem; + + .content { + div { + margin: 1rem 0; + word-wrap: break-word; + } + + .header { + font-weight: 500; + } + } +} diff --git a/src/app/self-service/users/view-user/view-user.component.ts b/src/app/self-service/users/view-user/view-user.component.ts index ea71889b7..892200b2b 100644 --- a/src/app/self-service/users/view-user/view-user.component.ts +++ b/src/app/self-service/users/view-user/view-user.component.ts @@ -1,5 +1,12 @@ +/** Angular Imports */ import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; +/** + * View self service user component. + * + * TODO: Complete functionality once API is available. + */ @Component({ selector: 'mifosx-view-user', templateUrl: './view-user.component.html', @@ -7,13 +14,24 @@ import { Component, OnInit } from '@angular/core'; }) export class ViewUserComponent implements OnInit { - constructor() { } + /** Self service user. */ + user: any; + + /** + * Retrieves the user data from `resolve`. + * @param {ActivatedRoute} route Activated Route. + */ + constructor(private route: ActivatedRoute) { + this.route.data.subscribe((data: { user: any }) => { + this.user = data.user; + }); + } ngOnInit() { } openDialog() { - // TODO: Change Password Dialog + // TODO: Open change password dialog. } } diff --git a/src/app/self-service/users/view-user/view-user.resolver.ts b/src/app/self-service/users/view-user/view-user.resolver.ts index 69d9fa86e..4daf7a3f0 100644 --- a/src/app/self-service/users/view-user/view-user.resolver.ts +++ b/src/app/self-service/users/view-user/view-user.resolver.ts @@ -1,15 +1,32 @@ +/** Angular Imports */ import { Injectable } from '@angular/core'; import { Resolve } from '@angular/router'; -import { Observable, of } from 'rxjs'; +/** rxjs Imports */ +import { Observable } from 'rxjs'; + +/** Custom Services */ import { UserService } from '../user.service'; +/** Custom Model */ +import { User } from '../user.model'; + +/** + * View self service user data resolver. + */ @Injectable() export class ViewUserResolver implements Resolve { + /** + * @param {UserService} userService Self service user service. + */ constructor(private userService: UserService) {} - resolve(): Observable { + /** + * Returns the user data. + * @returns {Observable} + */ + resolve(): Observable { return this.userService.getUser(); } diff --git a/src/app/shared/icons.module.ts b/src/app/shared/icons.module.ts index 05149ec74..fc49765c3 100644 --- a/src/app/shared/icons.module.ts +++ b/src/app/shared/icons.module.ts @@ -11,7 +11,9 @@ import { faCheckCircle, faChevronLeft, faChevronRight, + faCircle, faCog, + faEdit, faEye, faEyeSlash, faFileUpload, @@ -19,6 +21,7 @@ import { faHome, faLocationArrow, faLock, + faLockOpen, faMoneyBillAlt, faPlus, faSearch, @@ -41,7 +44,9 @@ library.add( faCheckCircle, faChevronLeft, faChevronRight, + faCircle, faCog, + faEdit, faEye, faEyeSlash, faFileUpload, @@ -49,6 +54,7 @@ library.add( faHome, faLocationArrow, faLock, + faLockOpen, faMoneyBillAlt, faPlus, faSearch, diff --git a/src/assets/mock/user.mock.json b/src/assets/mock/user.mock.json index 6d708463f..b45cb8fab 100644 --- a/src/assets/mock/user.mock.json +++ b/src/assets/mock/user.mock.json @@ -1,4 +1,14 @@ { - "id": 1, - "username": "abhaychawla" + "id": 1600, + "username": "abhaychawla", + "status": "status", + "firstName": "Abhay", + "lastName": "Chawla", + "gender": "Male", + "dateOfBirth": "18/06/1997", + "email": "abhay.chawla97@gmail.com", + "mobile": "9871105236", + "office": "Head Office", + "staff": "Smith W", + "activationDate": "12/03/2018" }