feat: master search tool and page (#1190)

Fixes: #1189

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

@@ -41,21 +41,7 @@
 
   <span fxFlex="auto"></span>
 
-  <!--
-    TODO: Search
-    Separate into its own component in shared module for reuse.
-    Implement functionality.
-  -->
-  <div *ngIf="searchVisible" class="search-bar" fxFlex="auto" fxHide.lt-sm="true" [@fadeInOut]>
-    <mat-form-field class="search">
-      <mat-label>Search</mat-label>
-      <input matInput type="text" (focusout)="toggleSearchVisibility()">
-    </mat-form-field>
-  </div>
-
-  <button mat-icon-button class="ml-1" (click)="toggleSearchVisibility()" fxHide.lt-sm="true">
-    <fa-icon icon="search" size="lg"></fa-icon>
-  </button>
+  <mifosx-search-tool></mifosx-search-tool>
 
   <mifosx-language-selector class="ml-1 language" fxHide.lt-md></mifosx-language-selector>
 

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

@@ -2,7 +2,6 @@
 import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
 import { MatSidenav } from '@angular/material';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
-import { style, animate, transition, trigger } from '@angular/animations';
 import { Router } from '@angular/router';
 
 /** rxjs Imports */
@@ -18,18 +17,7 @@ import { AuthenticationService } from '../../authentication/authentication.servi
 @Component({
   selector: 'mifosx-toolbar',
   templateUrl: './toolbar.component.html',
-  styleUrls: ['./toolbar.component.scss'],
-  animations: [
-    trigger('fadeInOut', [
-      transition(':enter', [
-        style({ opacity: 0 }),
-        animate(500, style({ opacity: 1 }))
-      ]),
-      transition(':leave', [
-        animate(500, style({ opacity: 0 }))
-      ])
-    ])
-  ]
+  styleUrls: ['./toolbar.component.scss']
 })
 export class ToolbarComponent implements OnInit {
 
@@ -39,8 +27,6 @@ export class ToolbarComponent implements OnInit {
       map(result => result.matches)
     );
 
-  /** Sets the initial visibility of search input as hidden. Visible if true. */
-  searchVisible = false;
   /** Sets the initial state of sidenav as collapsed. Not collapsed if false. */
   sidenavCollapsed = true;
 
@@ -84,13 +70,6 @@ export class ToolbarComponent implements OnInit {
     this.collapse.emit(this.sidenavCollapsed);
   }
 
-  /**
-   * Toggles the visibility of search input with fadeInOut animation.
-   */
-  toggleSearchVisibility() {
-    this.searchVisible = !this.searchVisible;
-  }
-
   /**
    * Logs out the authenticated user and redirects to login page.
    */