feat: add user management service (#113)

Add user management service for self service and update http interceptor
for progress bar.

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

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();
     });
   }
 

src/app/self-service/user-management/user-management.component.html

@@ -1,82 +1,87 @@
 <mat-card class="container m-t-40">
 
-  <!-- <mat-card-header> -->
+  <div fxLayout="row" fxLayoutGap="30px" class="m-b-20">
+    <!-- <mat-card-header> -->
 
-    <mat-grid-list cols="2" rowHeight="80px">
+    <!-- <mat-grid-list cols="1" rowHeight="80px">
 
-      <mat-grid-tile>
-        <mat-form-field>
-          <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
-        </mat-form-field>
-      </mat-grid-tile>
+      <mat-grid-tile> -->
+          <mat-form-field fxFlex>
+              <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+            </mat-form-field>
+          <!-- </mat-grid-tile> -->
 
-      <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>
+          <!-- <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> -->
 
-    </mat-grid-list>
+        <!-- </mat-grid-list> -->
 
-  <!-- </mat-card-header> -->
+      <!-- </mat-card-header> -->
+  </div>
 
   <mat-card-content class="mat-elevation-z8">
 
-    <mat-table [dataSource]="dataSource" matSort>
+    <table mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="select">
-        <mat-header-cell *matHeaderCellDef>
+        <th 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">
+        </th>
+        <td mat-cell *matCellDef="let row">
           <mat-checkbox (click)="$event.stopPropagation()"
                         (change)="$event ? selection.toggle(row) : null"
                         [checked]="selection.isSelected(row)">
           </mat-checkbox>
-        </mat-cell>
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="name">
-        <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
-        <mat-cell *matCellDef="let user"> {{ user.name }} </mat-cell>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+        <td mat-cell *matCellDef="let user"><span class="mobile-label">Name: </span>{{ user.name }} </td>
       </ng-container>
 
-      <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 matColumnDef="id">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> User ID </th>
+        <td mat-cell *matCellDef="let user"><span class="mobile-label">User ID: </span>{{ user.id }}</td>
       </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 matColumnDef="email">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Email ID </th>
+        <td mat-cell *matCellDef="let user"><span class="mobile-label">Email ID: </span>{{ user.email }}</td>
       </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>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="isSelfServiceUser"> Status </th>
+        <td mat-cell *matCellDef="let user">
+          <span class="mobile-label">Status: </span>
+          <div [className]="user.isSelfServiceUser === true ? 'active' : 'inactive'">
+            <mat-icon matTooltip="{{ user.isSelfServiceUser === true ? 'Active' : 'Inactive' }}" matTooltipPosition="right">lens</mat-icon>
+          </div>
+        </td>
       </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 matColumnDef="officeName">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Office </th>
+        <td mat-cell *matCellDef="let user"><span class="mobile-label">Office: </span>{{ user.officeName }}</td>
       </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>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Staff </th>
+        <td mat-cell *matCellDef="let user"><span class="mobile-label">Staff: </span>{{ user.staff }}</td>
       </ng-container>
 
-      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)"></mat-row>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)"></tr>
 
-    </mat-table>
+    </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
 

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;
+//   }
+// }

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<User>(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));
   }
 
 }

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();
+  }));
+});

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<any> {
+    return this.http.get<any>(
+      `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;
+      })
+    );
+  }
+
+}