Use of filter in the GL Account dropdown menus

openMF · Jan 10, 2024 · 53d8436 · 53d8436
1 parent 6edb262
commit 53d8436
Show file tree

Hide file tree

Showing 47 changed files with 829 additions and 648 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -58,6 +58,7 @@
     "install": "^0.13.0",
     "lodash": "4.17.21",
     "moment": "^2.29.4",
+    "ngx-mat-select-search": "5.0.0",
     "rxjs": "6.6.2",
     "tslib": "^2.0.0",
     "vkbeautify": "^0.99.2",

diff --git a/src/app/accounting/accounting-routing.module.ts b/src/app/accounting/accounting-routing.module.ts
@@ -169,7 +169,7 @@ const routes: Routes = [
         {
           path: 'migrate-opening-balances',
           component: MigrateOpeningBalancesComponent,
-          data: { title:  'Migrate Opening Balances', breadcrumb: 'Migrate Opening Balances' },
+          data: { title: 'Migrate Opening Balances', breadcrumb: 'Migrate Opening Balances' },
           resolve: {
             offices: OfficesResolver,
             currencies: CurrenciesResolver

diff --git a/src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.html b/src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.html
@@ -52,14 +52,13 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Parent" | translate}}</mat-label>
-            <mat-select formControlName="parentId">
-              <mat-option *ngFor="let parent of parentData" [value]="parent.id">
-                ({{ parent.glCode }}) {{ parent.name }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
+          <mifosx-gl-account-selector fxFlex="48%"
+            [inputFormControl]="glAccountForm.controls.parentId"
+            [glAccountList]="parentData"
+            [required]="false"
+            [inputLabel]="'Parent'"
+          >
+          </mifosx-gl-account-selector>
 
           <mat-form-field fxFlex="28%">
             <mat-label>{{"labels.inputs.Tag" | translate}}</mat-label>
@@ -114,4 +113,4 @@ <h2>{{"labels.heading.Create GL account" | translate}}</h2>
     <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{"labels.buttons.Next" |
       translate}}</button>
   </div>
-</ng-template>
+</ng-template>
diff --git a/src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.ts b/src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.ts
@@ -11,6 +11,7 @@ import { ConfigurationWizardService } from '../../../configuration-wizard/config
 
 /** Custom Dialog Component */
 import { ContinueSetupDialogComponent } from '../../../configuration-wizard/continue-setup-dialog/continue-setup-dialog.component';
+import { GLAccount } from 'app/shared/models/general.model';
 
 /**
  * Create gl account component.
@@ -31,7 +32,7 @@ export class CreateGlAccountComponent implements OnInit, AfterViewInit {
   /** Account usage data. */
   accountUsageData: any;
   /** Parent data. */
-  parentData: any;
+  parentData: GLAccount[] = [];
   /** Tag data. */
   tagData: any;
   /** Account type id. (for creation of sub-ledger account) */

diff --git a/src/app/accounting/chart-of-accounts/edit-gl-account/edit-gl-account.component.html b/src/app/accounting/chart-of-accounts/edit-gl-account/edit-gl-account.component.html
@@ -48,14 +48,13 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Parent" | translate}}</mat-label>
-            <mat-select formControlName="parentId">
-              <mat-option *ngFor="let parent of parentData" [value]="parent.id">
-                ({{ parent.glCode }}) {{ parent.name }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
+          <mifosx-gl-account-selector fxFlex="48%"
+            [inputFormControl]="glAccountForm.controls.parentId"
+            [glAccountList]="parentData"
+            [required]="false"
+            [inputLabel]="'Parent'"
+          >
+          </mifosx-gl-account-selector>
 
           <mat-form-field fxFlex="28%">
             <mat-label>{{"labels.inputs.Tag" | translate}}</mat-label>

diff --git a/src/app/accounting/chart-of-accounts/view-gl-account/view-gl-account.component.html b/src/app/accounting/chart-of-accounts/view-gl-account/view-gl-account.component.html
@@ -59,7 +59,7 @@
 
         <div fxFlex="50%" *ngIf="glAccount.parent">
           <a class="tab-link" [routerLink]="['/accounting/chart-of-accounts/gl-accounts/view/' + glAccount.parent.id]">
-            ({{ glAccount.parent.glCode }}) {{ glAccount.parent.name }}
+            <mifosx-gl-account-display [glAccount]="glAccount.parent"></mifosx-gl-account-display>
           </a>
         </div>
 

diff --git a/src/app/accounting/create-journal-entry/create-journal-entry.component.html b/src/app/accounting/create-journal-entry/create-journal-entry.component.html
@@ -37,17 +37,13 @@
 
             <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
 
-              <mat-form-field fxFlex="48%">
-                <mat-label>{{"labels.inputs.Affected GL Entry (Debit)" | translate}}</mat-label>
-                <mat-select required formControlName="glAccountId">
-                  <mat-option *ngFor="let affectedGLEntryDebit of glAccountData" [value]="affectedGLEntryDebit.id">
-                    {{ affectedGLEntryDebit.name + ' (' + affectedGLEntryDebit.glCode + ')' }}
-                  </mat-option>
-                </mat-select>
-                <mat-error *ngIf="debits.at(i).controls.glAccountId.hasError('required')">
-                  {{"labels.inputs.Affected GL Entry (Debit)" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
-                </mat-error>
-              </mat-form-field>
+              <mifosx-gl-account-selector fxFlex="48%"
+                [inputFormControl]="debits.at(i).controls.glAccountId"
+                [glAccountList]="glAccountData"
+                [required]="true"
+                [inputLabel]="'Affected GL Entry (Debit)'"
+              >
+              </mifosx-gl-account-selector>
 
               <mat-form-field fxFlex="43%">
                 <mat-label>{{"labels.inputs.Debit Amount" | translate}}</mat-label>
@@ -75,17 +71,13 @@
 
             <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
 
-              <mat-form-field fxFlex="48%">
-                <mat-label>{{"labels.inputs.Affected GL Entry (Credit)" | translate}}</mat-label>
-                <mat-select required formControlName="glAccountId">
-                  <mat-option *ngFor="let affectedGLEntryCredit of glAccountData" [value]="affectedGLEntryCredit.id">
-                    {{ affectedGLEntryCredit.name + ' (' + affectedGLEntryCredit.glCode + ')' }}
-                  </mat-option>
-                </mat-select>
-                <mat-error *ngIf="credits.at(i).controls.glAccountId.hasError('required')">
-                  {{"labels.inputs.Affected GL Entry (Credit)" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
-                </mat-error>
-              </mat-form-field>
+              <mifosx-gl-account-selector fxFlex="48%"
+                [inputFormControl]="credits.at(i).controls.glAccountId"
+                [glAccountList]="glAccountData"
+                [required]="true"
+                [inputLabel]="'Affected GL Entry (Credit)'"
+              >
+              </mifosx-gl-account-selector>
 
               <mat-form-field fxFlex="43%">
                 <mat-label>{{"labels.inputs.Credit Amount"|translate}}</mat-label>

diff --git a/...ppings/create-financial-activity-mapping/create-financial-activity-mapping.component.html b/...ppings/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>
 

diff --git a/...mappings/create-financial-activity-mapping/create-financial-activity-mapping.component.ts b/...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;
 

diff --git a/...y-mappings/edit-financial-activity-mapping/edit-financial-activity-mapping.component.html b/...y-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>

diff --git a/...ity-mappings/edit-financial-activity-mapping/edit-financial-activity-mapping.component.ts b/...ity-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. */

diff --git a/...y-mappings/view-financial-activity-mapping/view-financial-activity-mapping.component.html b/...y-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>
 

diff --git a/src/app/accounting/search-journal-entry/search-journal-entry.component.html b/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>

diff --git a/src/app/accounting/search-journal-entry/search-journal-entry.component.ts b/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.
    */

diff --git a/...ts/clients-view/client-actions/reject-client-transfer/reject-client-transfer.component.ts b/...ts/clients-view/client-actions/reject-client-transfer/reject-client-transfer.component.ts
@@ -70,9 +70,7 @@ export class RejectClientTransferComponent implements OnInit {
       rejectClientTransferFormData.transferDate = this.dateUtils.formatDate(prevTransferDate, dateFormat);
     }
     const data = {
-      ...rejectClientTransferFormData,
-      dateFormat,
-      locale
+      ...rejectClientTransferFormData
     };
     this.clientsService.executeClientCommand(this.clientId, 'rejectTransfer', data).subscribe(() => {
       this.router.navigate(['../../'], { relativeTo: this.route });

diff --git a/...lients/clients-view/client-actions/undo-client-transfer/undo-client-transfer.component.ts b/...lients/clients-view/client-actions/undo-client-transfer/undo-client-transfer.component.ts
@@ -73,9 +73,7 @@ export class UndoClientTransferComponent implements OnInit {
       undoClientTransferFormData.transferDate = this.dateUtils.formatDate(prevTransferDate, dateFormat);
     }
     const data = {
-      ...undoClientTransferFormData,
-      dateFormat,
-      locale
+      ...undoClientTransferFormData
     };
     this.clientsService.executeClientCommand(this.clientId, 'withdrawTransfer', data).subscribe(() => {
       this.router.navigate(['../../'], { relativeTo: this.route });

diff --git a/src/app/clients/clients-view/clients-view.component.html b/src/app/clients/clients-view/clients-view.component.html
@@ -32,7 +32,7 @@
         <mat-card-title fxLayout="row wrap" class="content">
           <h3 fxFlex="95%">
             <i class="fa fa-stop" [ngClass]="clientViewData.status.code|statusLookup"
-              [matTooltip]="clientViewData.status.value"></i>
+              matTooltip="{{'labels.status.' + clientViewData.status.value | translate}}"></i>
             <b>{{"labels.inputs.Client Name" | translate}} :</b><mifosx-entity-name entityName="{{clientViewData.displayName}}"></mifosx-entity-name>
           </h3>
           <div fxFlex="5%">

diff --git a/src/app/loans/loans-view/loans-view.component.html b/src/app/loans/loans-view/loans-view.component.html
@@ -82,7 +82,7 @@ <h3> {{"labels.heading.Account Overview" | translate}} </h3>
 
             <div fxFlex="4%">
               <button mat-icon-button [matMenuTriggerFor]="accountMenu" aria-label="Loan account actions"
-                yPosition="below">
+                yPosition="below" *ngIf="buttonConfig.singleButtons.length > 0">
                 <mat-icon matListIcon class="actions-menu">
                   <fa-icon icon="bars" size="sm"></fa-icon>
                 </mat-icon>