fix: multiple bugs in home/core/institution modules (#1225)

Fixes: #1224

src/app/shared/search-tool/search-tool.component.html

@@ -0,0 +1,23 @@
+<div *ngIf="searchVisible" class="search-bar" fxFlex="auto" fxHide.lt-sm="true" fxLayout="row" fxLayoutGap="2%" [@fadeInOut]>
+
+  <mat-form-field class="search">
+    <mat-label>Search</mat-label>
+    <input matInput type="text" [formControl]="query" (keydown.enter)="search()">
+  </mat-form-field>
+
+  <mat-form-field class="resource">
+    <mat-label>Resource</mat-label>
+    <mat-select [formControl]="resource">
+      <mat-option *ngFor="let option of resourceOptions" [value]="option.value">
+        {{ option.name }}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+
+</div>
+
+<div class="search-icon">
+  <button mat-icon-button (click)="toggleSearchVisibility()" fxHide.lt-sm="true">
+    <fa-icon icon="search" size="lg"></fa-icon>
+  </button>
+</div>

src/app/shared/search-tool/search-tool.component.scss

@@ -0,0 +1,18 @@
+.search-bar {
+  .search {
+    max-width: 400px;
+    width: 100%;
+    font-size: 1rem;
+  }
+  .resource {
+    max-width: 90px;
+    width: 100%;
+    font-size: 1rem;
+  }
+}
+
+.search-icon {
+  margin-left: 1rem;
+  display: flex;
+  align-items: center;
+}

src/app/shared/search-tool/search-tool.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SearchToolComponent } from './search-tool.component';
+
+describe('SearchToolComponent', () => {
+  let component: SearchToolComponent;
+  let fixture: ComponentFixture<SearchToolComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SearchToolComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SearchToolComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/search-tool/search-tool.component.ts

@@ -0,0 +1,88 @@
+/** Angular Imports */
+import { Component } from '@angular/core';
+import { style, animate, transition, trigger } from '@angular/animations';
+import { Router } from '@angular/router';
+import { FormControl } from '@angular/forms';
+
+/**
+ * Search Tool Component
+ */
+@Component({
+  selector: 'mifosx-search-tool',
+  templateUrl: './search-tool.component.html',
+  styleUrls: ['./search-tool.component.scss'],
+  animations: [
+    trigger('fadeInOut', [
+      transition(':enter', [
+        style({ opacity: 0 }),
+        animate(500, style({ opacity: 1 }))
+      ]),
+      transition(':leave', [
+        animate(500, style({ opacity: 0 }))
+      ])
+    ])
+  ]
+})
+export class SearchToolComponent {
+
+  /** Query Form Control */
+  query = new FormControl('');
+  /** Resource Form Control */
+  resource = new FormControl('');
+
+  /** Sets the initial visibility of search input as hidden. Visible if true. */
+  searchVisible = false;
+  /** Resource Options */
+  resourceOptions: any[] = [
+    {
+      name: 'All',
+      value: 'clients,clientIdentifiers,groups,savings,shares,loans'
+    },
+    {
+      name: 'Clients',
+      value: 'clients,clientIdentifiers'
+    },
+    {
+      name: 'Groups',
+      value: 'groups'
+    },
+    {
+      name: 'Savings',
+      value: 'savings'
+    },
+    {
+      name: 'Shares',
+      value: 'shares'
+    },
+    {
+      name: 'Loans',
+      value: 'loans'
+    },
+  ];
+
+  /**
+   * @param {Router} router Router
+   */
+  constructor(private router: Router) {
+    this.resource.patchValue('clients,clientIdentifiers,groups,savings,shares,loans');
+  }
+
+  /**
+   * Toggles the visibility of search input with fadeInOut animation.
+   */
+  toggleSearchVisibility() {
+    this.searchVisible = !this.searchVisible;
+  }
+
+  /**
+   * Searches server for query and resource.
+   */
+  search() {
+    const queryParams: any = {
+      query: this.query.value,
+      resource: this.resource.value
+    };
+    this.router.navigate(['/search'], { queryParams: queryParams });
+  }
+
+}