add Search Activity to our dashboard and fix html & css of the dashboard

src/app/home/dashboard/client-trends-bar/client-trends-bar.component.scss

@@ -7,7 +7,8 @@
     }
   }
   #timescale {
-    margin: 2% 35%;
+    margin: 2% 50%;
+    transform: translateX(-50%);
   }
   .fallback {
     overflow-x: auto;

src/app/home/dashboard/dashboard.component.html

@@ -2,55 +2,39 @@
 
   <mat-card class="card" fxLayout="column" fxLayoutGap="40px">
 
+    <div fxLayout="row" class="search">
+      <mat-card-content>
+
+        <mat-form-field>
+          <mat-label>{{'labels.placeholders.Search Activity' | translate}}</mat-label>
+          <input matInput [matAutocomplete]="activitySearch" [formControl]="searchText">
+        </mat-form-field>
+
+        <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>
+    </div>
+
     <div fxLayout="row" class="top-card">
+        <div class="trends-bar">
+          <mifosx-client-trends-bar></mifosx-client-trends-bar>
+        </div>
+    </div>
 
-      <mat-card class="recent-activities">
+    <div fxLayout="row" class="bottom-card">
-
-        <mat-card-header class="header">
-          <h3><fa-icon icon="bolt"></fa-icon>
-          &nbsp;&nbsp; {{"labels.heading.Recent Activities" | translate}}</h3>
-        </mat-card-header>
-
-        <mat-card-content>
-          <mat-action-list class="list">
-            <button mat-list-item *ngFor="let activity of recentActivities" (click)="navigatetoActivity(activity)"> {{ activity | urlToString }} </button>
-          </mat-action-list>
-        </mat-card-content>
-
-      </mat-card>
-
-      <mat-card class="frequent-activities">
-
-        <mat-card-header class="header">
-          <h3><fa-icon icon="laptop"></fa-icon>
-          &nbsp;&nbsp; {{"labels.heading.Frequent Activities" | translate}}</h3>
-        </mat-card-header>
-
-        <mat-card-content>
-          <mat-action-list class="list">
-            <button mat-list-item *ngFor="let activity of frequentActivities"
-            [routerLink]="activity"> {{ activity | urlToString }} </button>
-          </mat-action-list>
-        </mat-card-content>
-
-      </mat-card>
 
       <div class="amount-disbursed">
         <mifosx-amount-disbursed-pie></mifosx-amount-disbursed-pie>
       </div>
 
-    </div>
-
-    <div fxLayout="row" class="bottom-card">
-
-      <div class="trends-bar">
-        <mifosx-client-trends-bar></mifosx-client-trends-bar>
-      </div>
-
       <div class="amount-collected">
         <mifosx-amount-collected-pie></mifosx-amount-collected-pie>
       </div>
-      
+
     </div>
 
   </mat-card>

src/app/home/dashboard/dashboard.component.scss

@@ -3,54 +3,56 @@
   padding: 2%;
   display: flex;
   flex-direction: column;
+  overflow-x: hidden;
+
+  .search {
+      width: 100%;
+      padding: 12px;
+      mat-card-content {
+        width: 100%;
+      }
+
+      mat-form-field {
+        width: 100%;
+      }
+    }
 
   .top-card {
-    display: flex;
+    flex: 1 0 100%;
-    flex-wrap: wrap;
-    flex-direction: row;
-    gap: 2px;
 
-    .recent-activities,
+    .trends-bar {
-    .frequent-activities{
+      width: 100%;
-      min-width: 18.5rem;
+      flex: 1 0 100%;
-    }
-    .recent-activities,
-    .frequent-activities,
-    .amount-disbursed {
-      flex: 1 0 calc(26.33% - 10px);
-      padding: 0;
-      margin: 10px;
-
-      .list {
-        padding-top: 0;
-      }
     }
   }
 
-  .bottom-card{
+  .bottom-card {
     display: flex;
     flex-wrap: wrap;
     flex-direction: row;
     gap: 2px;
 
-    .trends-bar,
+    .amount-collected,
-    .amount-collected {
+    .amount-disbursed {
       flex: 1 0 calc(40% - 10px);
       padding: 0;
       margin: 10px;
     }
   }
- 
+}
-  @media screen and (max-width: 768px) {
+
-    .recent-activities,
+@media screen and (max-width: 768px) {
-    .frequent-activities,
+
-    .amount-disbursed,
+  .top-card,
+  .bottom-card {
+    flex-direction: column;
+
     .trends-bar,
-    .amount-collected {
+    .amount-collected,
-      box-sizing: border-box;
+    .amount-disbursed {
+      flex: 1 0 100%;
       width: 100%;
-      flex: 1 0 calc(80% - 10px);
+      margin: 10px 0;
-      margin-bottom: 20px;
     }
   }
 }

src/app/home/dashboard/dashboard.component.ts

@@ -1,7 +1,10 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
+import { UntypedFormControl } from '@angular/forms';
 import { Router } from '@angular/router';
-
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { activities } from '../activities';
 /**
  * Dashboard component.
  */
@@ -18,6 +21,12 @@ export class DashboardComponent implements OnInit {
   recentActivities: string[];
   /** Array of most frequent user activities */
   frequentActivities: string[];
+  /** Search Text. */
+  searchText: UntypedFormControl = new UntypedFormControl();
+  /** Filtered Activities. */
+  filteredActivities: Observable<any[]>;
+  /** All User Activities. */
+  allActivities: any[] = activities;
 
   /**
    * Gets user activities from local storage.
@@ -29,6 +38,7 @@ export class DashboardComponent implements OnInit {
   ngOnInit() {
     this.recentActivities = this.getRecentActivities();
     this.frequentActivities = this.getFrequentActivities();
+    this.setFilteredActivities();
   }
 
   /**
@@ -75,5 +85,25 @@ export class DashboardComponent implements OnInit {
     this.router.navigateByUrl(activity);
   }
 
+  /**
+   * 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);
+  }
+
 }