Use of filter in the GL Account dropdown menus

src/app/accounting/financial-activity-mappings/create-financial-activity-mapping/create-financial-activity-mapping.component.html

@@ -20,17 +20,13 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field>
-            <mat-label>{{"labels.inputs.Account"|translate}}</mat-label>
-            <mat-select required formControlName="glAccountId">
-              <mat-option *ngFor="let glAccount of glAccountData" [value]="glAccount.id">
-                {{ glAccount.name + ' (' + glAccount.glCode + ')' }}
-              </mat-option>
-            </mat-select>
-            <mat-error *ngIf="financialActivityMappingForm.controls.glAccountId.hasError('required')">
-              {{"labels.inputs.Account"|translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
-            </mat-error>
-          </mat-form-field>
+          <mifosx-gl-account-selector
+            [inputFormControl]="financialActivityMappingForm.controls.glAccountId"
+            [glAccountList]="glAccountData"
+            [required]="true"
+            [inputLabel]="'Account'"
+          >
+          </mifosx-gl-account-selector>
 
         </div>
 

src/app/accounting/financial-activity-mappings/create-financial-activity-mapping/create-financial-activity-mapping.component.ts

@@ -5,6 +5,7 @@ import { Router, ActivatedRoute } from '@angular/router';
 
 /** Custom Services */
 import { AccountingService } from '../../accounting.service';
+import { GLAccount } from 'app/shared/models/general.model';
 
 /**
  * Create financial activity mapping component.
@@ -21,7 +22,7 @@ export class CreateFinancialActivityMappingComponent implements OnInit {
   /** GL Account options. */
   glAccountOptions: any;
   /** GL Account data. */
-  glAccountData: any;
+  glAccountData: GLAccount[] = [];
   /** Financial activity data. */
   financialActivityData: any;
 

src/app/accounting/financial-activity-mappings/edit-financial-activity-mapping/edit-financial-activity-mapping.component.html

@@ -17,15 +17,13 @@
             </mat-select>
           </mat-form-field>
 
-          <mat-form-field>
-            <mat-label>{{"labels.inputs.Account"|translate}}</mat-label>
-            <mat-select required formControlName="glAccountId">
-              <mat-option *ngFor="let glAccount of glAccountData" [value]="glAccount.id">
-                {{ glAccount.name + ' (' + glAccount.glCode + ')' }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
-
+          <mifosx-gl-account-selector
+            [inputFormControl]="financialActivityMappingForm.controls.glAccountId"
+            [glAccountList]="glAccountData"
+            [required]="true"
+            [inputLabel]="'Account'"
+          >
+          </mifosx-gl-account-selector>
         </div>
 
       </mat-card-content>

src/app/accounting/financial-activity-mappings/edit-financial-activity-mapping/edit-financial-activity-mapping.component.ts

@@ -5,6 +5,7 @@ import { Router, ActivatedRoute } from '@angular/router';
 
 /** Custom Services */
 import { AccountingService } from '../../accounting.service';
+import { GLAccount } from 'app/shared/models/general.model';
 
 /**
  * Edit financial activity mapping component.
@@ -21,7 +22,7 @@ export class EditFinancialActivityMappingComponent implements OnInit {
   /** GL Account options. */
   glAccountOptions: any;
   /** GL Account data. */
-  glAccountData: any;
+  glAccountData: GLAccount[] = [];
   /** Financial activity data. */
   financialActivityData: any;
   /** Financial activity account ID. */

src/app/accounting/financial-activity-mappings/view-financial-activity-mapping/view-financial-activity-mapping.component.html

@@ -25,13 +25,11 @@
           {{ financialActivityAccount?.financialActivityData.name }}
         </div>
 
-        <div fxFlex="50%" class="header">
-          {{"labels.inputs.Account Name" | translate}}
-        </div>
-
-        <div fxFlex="50%">
-          {{ financialActivityAccount?.glAccountData.name }}
-        </div>
+        <mifosx-gl-account-display fxFlex="100%"
+          [glAccount]="financialActivityAccount?.glAccountData"
+          [accountTitle]="'Account Name'"
+        >
+        </mifosx-gl-account-display>
 
       </div>