diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts index 30e3895e8..afb097e58 100644 --- a/src/app/core/core.module.ts +++ b/src/app/core/core.module.ts @@ -157,6 +157,11 @@ import { BreadcrumbComponent } from './shell/breadcrumb/breadcrumb.component'; ApiPrefixInterceptor, ErrorHandlerInterceptor, CacheInterceptor, + { + provide: HTTP_INTERCEPTORS, + useClass: ProgressInterceptor, + multi: true + }, { provide: HttpClient, useClass: HttpService diff --git a/src/app/core/shell/shell.component.ts b/src/app/core/shell/shell.component.ts index 20fee71ac..4b25c8212 100644 --- a/src/app/core/shell/shell.component.ts +++ b/src/app/core/shell/shell.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ChangeDetectorRef } from '@angular/core'; import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout'; import { Observable } from 'rxjs'; @@ -20,12 +20,14 @@ export class ShellComponent implements OnInit { progressBarMode: string; constructor(private breakpointObserver: BreakpointObserver, - private progressBarService: ProgressBarService) { } + private progressBarService: ProgressBarService, + private cdr: ChangeDetectorRef) { } ngOnInit() { this.sidenavCollapsed = true; this.progressBarService.updateProgressBar.subscribe((mode: string) => { this.progressBarMode = mode; + this.cdr.detectChanges(); }); } 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 af4b3ac3a..e40071606 100644 --- a/src/app/self-service/user-management/user-management.component.html +++ b/src/app/self-service/user-management/user-management.component.html @@ -1,82 +1,87 @@ - +
+ - + + + + + - - - - - - - + + + + + + + - + - + +
- + - + + - Name - {{ user.name }} + + - - User ID - {{ user.userID }} + + + - - Email ID - {{ user.emailID }} + + + - Status - - lens - + + - - Office - {{ user.office }} + + + - Staff - {{ user.staff }} + + - - + + - +
- - + - + Name Name: {{ user.name }} User ID User ID: {{ user.id }} Email ID Email ID: {{ user.email }} Status + Status: +
+ lens +
+ 		Office Office: {{ user.officeName }} Staff 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 cd55f513f..a73e2c46e 100644 --- a/src/app/self-service/user-management/user-management.component.scss +++ b/src/app/self-service/user-management/user-management.component.scss @@ -9,6 +9,45 @@ width: 100%; } -.mat-form-field { - width: 100%; +// .mat-form-field { +// width: 100%; +// } + +.mobile-label { + display: none; } + +.inactive { + color: grey; +} + +.active { + color: green; +} + +// @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/user-management/user-management.component.ts b/src/app/self-service/user-management/user-management.component.ts index f461bfed4..6909fa1a2 100644 --- a/src/app/self-service/user-management/user-management.component.ts +++ b/src/app/self-service/user-management/user-management.component.ts @@ -1,29 +1,17 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { SelectionModel } from '@angular/cdk/collections'; import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material'; +import { UserService } from '../user.service'; export interface User { name: string; - userID: string; - emailID: string; - status: string; - office: string; + id: number; + email: string; + isSelfServiceUser: boolean; + officeName: 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', templateUrl: './user-management.component.html', @@ -31,20 +19,21 @@ const USER_DATA: User[] = [ }) export class UserManagementComponent implements OnInit { - // page = 1; - // isCollapsed = true; - displayedColumns: string[] = ['select', 'name', 'userID', 'emailID', 'status', 'office', 'staff']; - dataSource = new MatTableDataSource(USER_DATA); + displayedColumns: string[] = ['select', 'name', 'id', 'email', 'status', 'officeName', 'staff']; + dataSource: any; selection = new SelectionModel(true, []); @ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatSort) sort: MatSort; - constructor() { } + constructor(private userService: UserService) { } ngOnInit() { - this.dataSource.paginator = this.paginator; - this.dataSource.sort = this.sort; + this.userService.getUsers().subscribe((data: User[]) => { + this.dataSource = new MatTableDataSource(data); + this.dataSource.paginator = this.paginator; + this.dataSource.sort = this.sort; + }); } applyFilter(filterValue: string) { @@ -59,8 +48,8 @@ export class UserManagementComponent implements OnInit { masterToggle() { this.isAllSelected() ? - this.selection.clear() : - this.dataSource.data.forEach(row => this.selection.select(row)); + this.selection.clear() : + this.dataSource.data.forEach((row: User) => this.selection.select(row)); } } diff --git a/src/app/self-service/user.service.spec.ts b/src/app/self-service/user.service.spec.ts new file mode 100644 index 000000000..b26195c25 --- /dev/null +++ b/src/app/self-service/user.service.spec.ts @@ -0,0 +1,15 @@ +import { TestBed, inject } from '@angular/core/testing'; + +import { UserService } from './user.service'; + +describe('UserService', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [UserService] + }); + }); + + it('should be created', inject([UserService], (service: UserService) => { + expect(service).toBeTruthy(); + })); +}); diff --git a/src/app/self-service/user.service.ts b/src/app/self-service/user.service.ts new file mode 100644 index 000000000..d9d1bb5d1 --- /dev/null +++ b/src/app/self-service/user.service.ts @@ -0,0 +1,43 @@ +import { Injectable } from '@angular/core'; +import { HttpHeaders, HttpClient } from '@angular/common/http'; +import { Observable } from 'rxjs/internal/Observable'; +import { map } from 'rxjs/internal/operators/map'; + +const username = 'mifos'; +const password = 'password'; +const token = btoa(`${username}:${password}`); + +const httpOptions = { + headers: new HttpHeaders({ + 'Content-Type': 'application/json', + 'Authorization': `Basic ${token}`, + 'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS', + 'Access-Control-Allow-Origin': '*' + }) +}; + +@Injectable({ + providedIn: 'root' +}) +export class UserService { + + constructor(private http: HttpClient) { } + + getUsers(): Observable { + return this.http.get( + `https://demo.openmf.org/fineract-provider/api/v1/users? + fields=id,firstname,lastname,email,officeName,staff&tenantIdentifier=default&pretty=true`, + httpOptions).pipe( + map((res) => { + res.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; + }) + ); + } + +}