Use of filter in the GL Account dropdown menus

src/app/accounting/search-journal-entry/search-journal-entry.component.html

@@ -5,10 +5,13 @@
     <input matInput [formControl]="officeName" [matAutocomplete]="officeNameAutocomplete">
   </mat-form-field>
 
-  <mat-form-field fxFlex="31%">
-    <mat-label>{{"labels.inputs.GL Account Name or Code" | translate}}</mat-label>
-    <input matInput [formControl]="glAccount" [matAutocomplete]="glAccountAutocomplete">
-  </mat-form-field>
+  <mifosx-gl-account-selector fxFlex="31%"
+    [inputFormControl]="glAccount"
+    [glAccountList]="glAccountData"
+    [required]="true"
+    [inputLabel]="'GL Account Name or Code'"
+  >
+  </mifosx-gl-account-selector>
 
   <mat-form-field fxFlex="31%">
     <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
@@ -62,13 +65,6 @@
   </mat-option>
 </mat-autocomplete>
 
-<mat-autocomplete autoActiveFirstOption #glAccountAutocomplete="matAutocomplete" [displayWith]="displayGLAccount">
-  <mat-option *ngFor="let glAccount of filteredGLAccountData | async" [value]="{ id: glAccount.id, name: glAccount.name, glCode: glAccount.glCode }">
-    {{ glAccount.name + ' (' + glAccount.glCode + ')' }}
-  </mat-option>
-</mat-autocomplete>
-
-
 <div class="mat-elevation-z8 container">
 
   <table mat-table [dataSource]="dataSource" matSort>

src/app/accounting/search-journal-entry/search-journal-entry.component.ts

@@ -170,7 +170,7 @@ export class SearchJournalEntryComponent implements OnInit, AfterViewInit {
 
     this.glAccount.valueChanges
       .pipe(
-        map(value => value.id ? value.id : ''),
+        map(value => value ? value : ''),
         debounceTime(500),
         distinctUntilChanged(),
         tap((filterValue) => {
@@ -269,15 +269,6 @@ export class SearchJournalEntryComponent implements OnInit, AfterViewInit {
     return office ? office.name : undefined;
   }
 
-  /**
-   * Displays gl account name in form control input.
-   * @param {any} glAccount Gl Account data.
-   * @returns {string} Gl Account name if valid otherwise undefined.
-   */
-  displayGLAccount(glAccount?: any): string | undefined {
-    return glAccount ? glAccount.name + ' (' + glAccount.glCode + ')' : undefined;
-  }
-
   /**
    * Sets filtered offices for autocomplete.
    */