refractor: self service module (#291)

* Refractor components.
* Improve responsiveness of components.
* Add task management component.
* Add users data resolver.
* Add relative router links.
* Replace mat-icons by font-awesome icons.
* Add comments.

Fixes #290

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<User>;
+  /** Selection model for users table. */
   selection = new SelectionModel<User>(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() :