Transactions tab standarization

src/app/organization/currencies/manage-currencies/manage-currencies.component.html

@@ -10,8 +10,11 @@
         <mat-form-field fxFlex="calc(90%-20px)">
             <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
             <mat-select required formControlName="currency">
-              <mat-option *ngFor="let currency of currencyData" [value]="currency">
-                {{ currency.name }}
+              <mat-option>
+                <ngx-mat-select-search [formControl]="filterFormCtrl"></ngx-mat-select-search>
+              </mat-option>
+              <mat-option *ngFor="let currency of currencyData | async" [value]="currency">
+                ({{currency.code}}) {{ currency.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="currencyForm.controls.currency.hasError('required')">

src/app/organization/currencies/manage-currencies/manage-currencies.component.ts

@@ -1,8 +1,8 @@
 /** Angular Imports */
-import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
+import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
-import { UntypedFormBuilder, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, Validators } from '@angular/forms';
 
 /** Custom Dialogs */
 import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dialog.component';
@@ -14,6 +14,9 @@ import { ConfigurationWizardService } from '../../../configuration-wizard/config
 
 /** Custom Dialog Component */
 import { ContinueSetupDialogComponent } from '../../../configuration-wizard/continue-setup-dialog/continue-setup-dialog.component';
+import { takeUntil } from 'rxjs/operators';
+import { ReplaySubject, Subject } from 'rxjs';
+import { Currency } from 'app/shared/models/general.model';
 
 /**
  * Manage Currencies component.
@@ -23,12 +26,12 @@ import { ContinueSetupDialogComponent } from '../../../configuration-wizard/cont
   templateUrl: './manage-currencies.component.html',
   styleUrls: ['./manage-currencies.component.scss']
 })
-export class ManageCurrenciesComponent implements OnInit, AfterViewInit {
+export class ManageCurrenciesComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges {
 
   /** Selected Currencies data. */
   selectedCurrencies: any[];
   /** Currency options data */
-  currencyData: any;
+  currencyList: Currency[] = [];
   /** Currency form */
   currencyForm: any;
 
@@ -37,6 +40,15 @@ export class ManageCurrenciesComponent implements OnInit, AfterViewInit {
   @ViewChild('currencyFormRef') currencyFormRef: ElementRef<any>;
   @ViewChild('templateCurrencyFormRef') templateCurrencyFormRef: TemplateRef<any>;
 
+  /** Currency data. */
+  protected currencyData: ReplaySubject<Currency[]> = new ReplaySubject<Currency[]>(1);
+
+  /** control for the filter select */
+  protected filterFormCtrl: UntypedFormControl = new UntypedFormControl('');
+
+  /** Subject that emits when the component has been destroyed. */
+  protected _onDestroy = new Subject<void>();
+
   /**
    * Retrieves the currency data from `resolve`.
    * @param {ActivatedRoute} route Activated Route
@@ -53,14 +65,30 @@ export class ManageCurrenciesComponent implements OnInit, AfterViewInit {
               private popoverService: PopoverService) {
     this.route.parent.data.subscribe(( data: { currencies: any }) => {
       this.selectedCurrencies = data.currencies.selectedCurrencyOptions;
-      this.currencyData = data.currencies.currencyOptions;
+      this.currencyList = data.currencies.currencyOptions;
     });
   }
 
   ngOnInit() {
+    this.filterFormCtrl.valueChanges
+    .pipe(takeUntil(this._onDestroy))
+    .subscribe(() => {
+      this.searchItem();
+    });
     this.createCurrencyForm();
   }
 
+  ngOnDestroy(): void {
+    this._onDestroy.next();
+    this._onDestroy.complete();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (this.currencyList) {
+      this.currencyData.next(this.currencyList.slice());
+    }
+  }
+
   /**
    * Creates the currency form.
    */
@@ -70,6 +98,20 @@ export class ManageCurrenciesComponent implements OnInit, AfterViewInit {
     });
   }
 
+  searchItem(): void {
+    if (this.currencyList) {
+      const search: string = this.filterFormCtrl.value.toLowerCase();
+
+      if (!search) {
+          this.currencyData.next(this.currencyList.slice());
+      } else {
+        this.currencyData.next(this.currencyList.filter((option: Currency) => {
+          return option.name.toLowerCase().indexOf(search) >= 0 || option.code.toLowerCase().indexOf(search) >= 0;
+        }));
+      }
+    }
+  }
+
   /**
    * Adds a new currency to the list.
    */

src/app/organization/tellers/cashiers/view-cashier/view-cashier.component.html

@@ -1,11 +1,11 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_CASHIER'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    Edit
+    {{'labels.buttons.Edit' | translate}}
   </button>
   <button mat-raised-button color="warn" (click)="deleteCashier()" *mifosxHasPermission="'DELETECASHIER_TELLER'">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    Delete
+    {{'labels.buttons.Delete' | translate}}
   </button>
 </div>
 
@@ -19,7 +19,7 @@
       <div fxLayout="row wrap" class="content">
 
         <div fxFlex="50%" class="header">
-          Name
+          {{'labels.inputs.Name' | translate}}
         </div>
 
         <div fxFlex="50%">
@@ -27,7 +27,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          Teller
+          {{'labels.inputs.Teller' | translate}}
         </div>
 
         <div fxFlex="50%">
@@ -35,7 +35,7 @@
         </div>
 
         <div fxFlex="50%" class="header" *ngIf="cashierData.description !== ''">
-          Description
+          {{'labels.inputs.Description' | translate}}
         </div>
 
         <div fxFlex="50%" *ngIf="cashierData.description !== ''">
@@ -43,7 +43,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          Start Date
+          {{'labels.inputs.Start Date' | translate}}
         </div>
 
         <div fxFlex="50%">
@@ -51,7 +51,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          End Date
+          {{'labels.inputs.End Date' | translate}}
         </div>
 
         <div fxFlex="50%">
@@ -59,7 +59,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          Full Day?
+          {{'labels.inputs.Full Day?' | translate}}
         </div>
 
         <div fxFlex="50%">
@@ -69,7 +69,9 @@
       </div>
 
     </mat-card-content>
-
+    <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <button type="button" mat-raised-button [routerLink]="['..']">{{"labels.buttons.Back" | translate}}</button>
+    </mat-card-actions>
   </mat-card>
 
 </div>