feat: automate frequent activities (#1211)

Fixes: #1210

src/app/core/shell/sidenav/frequent-activities.ts

@@ -0,0 +1,57 @@
+export const frequentActivities: any[] = [
+  {
+    path: '/clients',
+    icon: 'user',
+    toolTip: 'Clients'
+  },
+  {
+    path: '/groups',
+    icon: 'users',
+    toolTip: 'Groups'
+  },
+  {
+    path: '/centers',
+    icon: 'building',
+    toolTip: 'Centers'
+  },
+  {
+    path: '/accounting',
+    icon: 'money-bill-alt',
+    toolTip: 'Accounting'
+  },
+  {
+    path: '/reports',
+    icon: 'chart-bar',
+    toolTip: 'Reports'
+  },
+  {
+    path: '/users',
+    icon: 'users',
+    toolTip: 'Users'
+  },
+  {
+    path: '/organization',
+    icon: 'id-badge',
+    toolTip: 'Organization'
+  },
+  {
+    path: '/system',
+    icon: 'cog',
+    toolTip: 'System'
+  },
+  {
+    path: '/products',
+    icon: 'book',
+    toolTip: 'Products'
+  },
+  {
+    path: '/templates',
+    icon: 'address-card',
+    toolTip: 'Templates'
+  },
+  {
+    path: '/self-service',
+    icon: 'laptop',
+    toolTip: 'Self Service'
+  },
+];

src/app/core/shell/sidenav/sidenav.component.html

@@ -38,19 +38,9 @@
         <span class="text-muted icon-menu-title">Frequently Accessed</span>
       </div>
       <div class="icon-menu">
-        <div class="icon-menu-item">
+        <div class="icon-menu-item" *ngFor="let activity of mappedActivities">
-          <button mat-raised-button matTooltip="Home" [routerLink]="['/home']">
+          <button mat-flat-button [matTooltip]="activity.toolTip" [routerLink]="[activity.path]">
-            <fa-icon icon="home" size="lg"></fa-icon>
+            <fa-icon [icon]="activity.icon" size="lg"></fa-icon>
-          </button>
-        </div>
-        <div class="icon-menu-item">
-          <button mat-raised-button matTooltip="Dashboard" [routerLink]="['/dashboard']">
-            <fa-icon icon="tachometer-alt" size="lg"></fa-icon>
-          </button>
-        </div>
-        <div class="icon-menu-item">
-          <button mat-raised-button matTooltip="Navigation" [routerLink]="['/navigation']">
-            <fa-icon icon="location-arrow" size="lg"></fa-icon>
           </button>
         </div>
       </div>

src/app/core/shell/sidenav/sidenav.component.ts

@@ -5,6 +5,9 @@ import { Router } from '@angular/router';
 /** Custom Services */
 import { AuthenticationService } from '../../authentication/authentication.service';
 
+/** Custom Imports */
+import { frequentActivities } from './frequent-activities';
+
 /**
  * Sidenav component.
  */
@@ -17,15 +20,24 @@ export class SidenavComponent implements OnInit {
 
   /** True if sidenav is in collapsed state. */
   @Input() sidenavCollapsed: boolean;
+
   /** Username of authenticated user. */
   username: string;
+  /** Array of all user activities */
+  userActivity: string[];
+  /** Mapped Activites */
+  mappedActivities: any[] = [];
+  /** Collection of possible frequent activities */
+  frequentActivities: any[] = frequentActivities;
 
   /**
    * @param {Router} router Router for navigation.
    * @param {AuthenticationService} authenticationService Authentication Service.
    */
   constructor(private router: Router,
-              private authenticationService: AuthenticationService) { }
+              private authenticationService: AuthenticationService) {
+    this.userActivity = JSON.parse(localStorage.getItem('mifosXLocation'));
+  }
 
   /**
    * Sets the username of the authenticated user.
@@ -33,6 +45,7 @@ export class SidenavComponent implements OnInit {
   ngOnInit() {
     const credentials = this.authenticationService.getCredentials();
     this.username = credentials.username;
+    this.setMappedAcitivites();
   }
 
   /**
@@ -50,4 +63,65 @@ export class SidenavComponent implements OnInit {
     window.open('https://mifosforge.jira.com/wiki/spaces/docs/pages/52035622/User+Manual', '_blank');
   }
 
+  /**
+   * Returns top three frequent activities.
+   */
+  getFrequentActivities() {
+    const frequencyCounts: any  = {};
+    let index  = this.userActivity.length;
+    while (index) {
+      frequencyCounts[this.userActivity[--index]] = (frequencyCounts[this.userActivity[index]] || 0) + 1;
+    }
+    const frequencyCountsArray = Object.entries(frequencyCounts);
+    const topThreeFrequentActivities =
+      frequencyCountsArray
+        .sort((a: any, b: any) => b[1] - a[1])
+        .map((entry: any[]) => entry[0])
+        .filter((activity: string) => !['/', '/login', '/home', '/dashboard'].includes(activity))
+        .slice(0, 3);
+    return topThreeFrequentActivities;
+  }
+
+  /**
+   * Maps frequently accessed urls to button objects.
+   */
+  setMappedAcitivites() {
+    const activities: string[] = this.getFrequentActivities();
+    activities.forEach((activity: string) => {
+      if (activity.includes('/clients')) {
+        this.pushActivity('/clients');
+      } else if (activity.includes('/groups')) {
+        this.pushActivity('/groups');
+      } else if (activity.includes('/centers')) {
+        this.pushActivity('/centers');
+      } else if (activity.includes('/accounting')) {
+        this.pushActivity('/accounting');
+      } else if (activity.includes('/reports')) {
+        this.pushActivity('/reports');
+      } else if (activity.includes('/users')) {
+        this.pushActivity('/users');
+      } else if (activity.includes('/organization')) {
+        this.pushActivity('/organization');
+      } else if (activity.includes('/system')) {
+        this.pushActivity('/system');
+      } else if (activity.includes('/products')) {
+        this.pushActivity('/products');
+      } else if (activity.includes('/templates')) {
+        this.pushActivity('/templates');
+      } else if (activity.includes('/self-service')) {
+        this.pushActivity('/self-service');
+      }
+    });
+    this.mappedActivities.reverse();
+  }
+
+  /**
+   * Pushes activity to mapped activities
+   * @param {string} path Activity Path
+   */
+  pushActivity(path: string) {
+    const activity = this.frequentActivities.find((entry: any) => entry.path === path);
+    this.mappedActivities.push(activity);
+  }
+
 }

src/app/shared/icons.module.ts

@@ -94,7 +94,9 @@ import {
   faFlag,
   faArrowUp,
   faArrowDown,
-  faFolderOpen
+  faFolderOpen,
+  faIdBadge,
+  faAddressCard
 } from '@fortawesome/free-solid-svg-icons';
 
 /** Add icons to the library for convenient access in other components. */
@@ -188,7 +190,9 @@ library.add(
   faFlag,
   faArrowUp,
   faArrowDown,
-  faFolderOpen
+  faFolderOpen,
+  faIdBadge,
+  faAddressCard
 );
 
 /**