feat: add user activity search component (#716)

Fixes: #710

src/app/home/activities.ts

@@ -0,0 +1,62 @@
+const activities: any[] = [
+    { activity: 'client', path: '/clients'},
+    { activity: 'groups', path: '/groups'},
+    { activity: 'centers', path: '/centers'},
+    { activity: 'accounting', path: '/accounting'},
+    { activity: 'users', path: '/users'},
+    { activity: 'organization', path: '/organization'},
+    { activity: 'system', path: '/system'},
+    { activity: 'templates', path: '/templates'},
+    { activity: 'self-service users', path: '/self-service/users'},
+    { activity: 'self-service app-configuration', path: '/self-service/app-configuration'},
+    { activity: 'task management', path: '/self-service/task-management'},
+    { activity: 'create group', path: ''},
+    { activity: 'create center', path: '/centers/create'},
+    { activity: 'configuration', path: '/system/global-configurations'},
+    { activity: 'tasks', path: '/self-service/task-management'},
+    { activity: 'create template', path: '/self-service/task-management'},
+    { activity: 'create loan product', path: '/products/loan-products/create'},
+    { activity: 'create saving product', path: '/products/saving-products/create'},
+    { activity: 'roles', path: '/system/roles-and-permissions'},
+    { activity: 'add role', path: '/system/roles-and-permissions/add'},
+    { activity: 'configure maker checker tasks', path: ''},
+    { activity: 'loan products', path: '/products/loan-products'},
+    { activity: 'charges', path: '/products/charges'},
+    { activity: 'saving products', path: '/products/saving-products'},
+    { activity: 'offices', path: '/organization/offices'},
+    { activity: 'create office', path: '/organization/offices/create'},
+    { activity: 'currency configurations', path: '/organization/currencies'},
+    { activity: 'user settings', path: ''},
+    { activity: 'employees', path: '/organization/employees'},
+    { activity: 'create employee', path: '/organization/employees/create'},
+    { activity: 'manage funds', path: ''},
+    { activity: 'chart of accounts', path: '/accounting/chart-of-accounts'},
+    { activity: 'frequent postings', path: '/accounting/frequent-postings'},
+    { activity: 'journal entry', path: '/accounting/journal-entries'},
+    { activity: 'search transaction', path: ''},
+    { activity: 'account closure', path: '/accounting/closing-entries'},
+    { activity: 'accounting rules', path: '/accounting/accounting-rules'},
+    { activity: 'add accounting rule', path: '/accounting/accounting-rules/create'},
+    { activity: 'data tables', path: '/system/data-tables'},
+    { activity: 'create data table', path: '/system/data-tables/create'},
+    { activity: 'add code', path: '/system/codes/create'},
+    { activity: 'jobs', path: '/system/scheduler-jobs'},
+    { activity: 'codes', path: '/system/codes'},
+    { activity: 'reports', path: '/reports'},
+    { activity: 'create report', path: ''},
+    { activity: 'holidays', path: '/organization/holidays'},
+    { activity: 'create holiday', path: ''},
+    { activity: 'add member', path: '/clients/:clientId/family-members/add'},
+    { activity: 'create charge', path: ''},
+    { activity: 'enter collection sheet', path: ''},
+    { activity: 'product mix', path: '/products/products-mix'},
+    { activity: 'add product mix', path: ''},
+    { activity: 'bulk loan reassignment', path: '/accounting/closing-entries/create'},
+    { activity: 'audit', path: '/products/audit-trails'},
+    { activity: 'create accounting closure', path: ''},
+    { activity: 'navigation', path: '/navigation'},
+    { activity: 'system users', path: '/self-service/users'},
+    { activity: '', path: 'home'}
+];
+
+export { activities };

src/app/home/home.component.html

@@ -17,6 +17,23 @@
       </mat-card-title>
     </mat-card-header>
 
+    <mat-card-content>
+        
+      <div fxLayout="column">
+        <mat-form-field>
+          <mat-label>Search Activity</mat-label>
+          <input matInput [matAutocomplete]="activitySearch" [formControl]="searchText">
+        </mat-form-field>
+      </div>
+
+      <mat-autocomplete #activitySearch="matAutocomplete">
+        <mat-option *ngFor="let activity of filteredActivities | async" [routerLink]="activity.path">
+          <span>{{activity.activity}}</span>
+        </mat-option>
+      </mat-autocomplete>
+
+    </mat-card-content>
+
     <img mat-card-image src="assets/images/mifos_lg-logo.jpg" alt="Mifos X">
 
   </mat-card>

src/app/home/home.component.scss

@@ -4,5 +4,15 @@
   .title {
     font-size: 1.25rem;
     font-weight: 500;
+    margin-left: -15px;
   }
 }
+
+.mat-list-base {
+  padding-top: 0px;
+}
+
+a{
+  text-decoration: none;
+  color: black
+}

src/app/home/home.component.ts

@@ -1,5 +1,11 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { Observable } from 'rxjs';
+import { startWith, map } from 'rxjs/operators';
+
+/** Custom Imports. */
+import { activities } from './activities';
 
 /** Custom Services */
 import { AuthenticationService } from '../core/authentication/authentication.service';
@@ -16,18 +22,49 @@ export class HomeComponent implements OnInit {
 
   /** Username of authenticated user. */
   username: string;
+  /** Activity Form. */
+  activityForm: any;
+  /** Search Text. */
+  searchText: FormControl = new FormControl();
+  /** Filtered Activities. */
+  filteredActivities: Observable<any[]>;
+  /** All User Activities. */
+  allActivities: any[] = activities;
 
   /**
    * @param {AuthenticationService} authenticationService Authentication Service.
+   * @param {FormBuilder} formBuilder Form Builder.
    */
   constructor(private authenticationService: AuthenticationService) { }
 
   /**
    * Sets the username of the authenticated user.
+   * Set Form.
    */
   ngOnInit() {
     const credentials = this.authenticationService.getCredentials();
     this.username = credentials.username;
+    this.setFilteredActivities();
+  }
+
+  /**
+   * Sets filtered activities for autocomplete.
+   */
+  setFilteredActivities() {
+    this.filteredActivities = this.searchText.valueChanges
+    .pipe(
+      map((activity: any) => typeof activity === 'string' ? activity : activity.activity),
+      map((activityName: string) => activityName ? this.filterActivity(activityName) : this.allActivities));
+  }
+
+  /**
+   * Filters activities.
+   * @param activityName Activity name to filter activity by.
+   * @returns {any} Filtered activities.
+   */
+  private filterActivity(activityName: string): any {
+    const filterValue = activityName.toLowerCase();
+    return this.allActivities.filter(activity => activity.activity.toLowerCase().indexOf(filterValue) === 0);
   }
 
 }