Add querying of account types, transaction types and genders from meta server.

src/app/_helpers/mock-backend.ts

@@ -230,6 +230,10 @@ const areaTypes = [
   }
 ];
 
+const accountTypes = ['user', 'cashier', 'vendor', 'tokenagent', 'group'];
+const transactionTypes = ['transactions', 'conversions', 'disbursements', 'rewards', 'reclamation'];
+const genders = ['male', 'female', 'other'];
+
 @Injectable()
 export class MockBackendInterceptor implements HttpInterceptor {
   intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
@@ -267,6 +271,12 @@ export class MockBackendInterceptor implements HttpInterceptor {
           return getAreaTypes();
         case url.match(/\/areatypes\/\w+$/) && method === 'GET':
           return getAreaTypeByArea();
+        case url.endsWith('/accounttypes') && method === 'GET':
+          return getAccountTypes();
+        case url.endsWith('/transactiontypes') && method === 'GET':
+          return getTransactionTypes();
+        case url.endsWith('/genders') && method === 'GET':
+          return getGenders();
         default:
           // pass through any requests not handled above
           return next.handle(request);
@@ -330,6 +340,18 @@ export class MockBackendInterceptor implements HttpInterceptor {
       return ok(queriedAreaType.name);
     }
 
+    function getAccountTypes(): Observable<any> {
+      return ok(accountTypes);
+    }
+
+    function getTransactionTypes(): Observable<any> {
+      return ok(transactionTypes);
+    }
+
+    function getGenders(): Observable<any> {
+      return ok(genders);
+    }
+
     // helper functions
 
     function ok(body): Observable<any> {

src/app/_services/user.service.ts

@@ -209,4 +209,16 @@ export class UserService {
   getCategoryByProduct(product: string): Observable<any> {
     return this.httpClient.get(`${environment.cicMetaUrl}/categories/${product.toLowerCase()}`);
   }
+
+  getAccountTypes(): Observable<any> {
+    return this.httpClient.get(`${environment.cicMetaUrl}/accounttypes`);
+  }
+
+  getTransactionTypes(): Observable<any> {
+    return this.httpClient.get(`${environment.cicMetaUrl}/transactiontypes`);
+  }
+
+  getGenders(): Observable<any> {
+    return this.httpClient.get(`${environment.cicMetaUrl}/genders`);
+  }
 }

src/app/pages/accounts/account-details/account-details.component.html

@@ -78,11 +78,9 @@
                   <mat-label> ACCOUNT TYPE: </mat-label>
                   <mat-select id="accountType" [(value)]="account.type" formControlName="type"
                               [errorStateMatcher]="matcher">
-                    <mat-option value="user"> USER </mat-option>
+                    <mat-option *ngFor="let accountType of accountTypes" [value]="accountType">
-                    <mat-option value="cashier"> CASHIER </mat-option>
+                      {{accountType | uppercase}}
-                    <mat-option value="vendor"> VENDOR </mat-option>
+                    </mat-option>
-                    <mat-option value="tokenAgent"> TOKENAGENT </mat-option>
-                    <mat-option value="group"> GROUPACCOUNT </mat-option>
                   </mat-select>
                   <mat-error *ngIf="submitted && accountInfoFormStub.type.errors">Type is required.</mat-error>
                 </mat-form-field>
@@ -102,9 +100,9 @@
                   <mat-label> GENDER: </mat-label>
                   <mat-select id="gender" [(value)]="account.gender" formControlName="gender"
                               [errorStateMatcher]="matcher">
-                    <mat-option value="male"> MALE </mat-option>
+                    <mat-option *ngFor="let gender of genders" [value]="gender">
-                    <mat-option value="female"> FEMALE </mat-option>
+                      {{gender | uppercase}}
-                    <mat-option value="other"> OTHER </mat-option>
+                    </mat-option>
                   </mat-select>
                   <mat-error *ngIf="submitted && accountInfoFormStub.gender.errors">Gender is required.</mat-error>
                 </mat-form-field>
@@ -238,11 +236,9 @@
                   <mat-label> TRANSACTION TYPE </mat-label>
                   <mat-select id="transferSelect" [(value)]="transactionsType" (selectionChange)="filterTransactions()">
                     <mat-option value="all">ALL TRANSFERS</mat-option>
-                    <mat-option value="transaction">PAYMENTS</mat-option>
+                    <mat-option *ngFor="let transactionType of transactionsTypes" [value]="transactionType">
-                    <mat-option value="conversion">CONVERSION</mat-option>
+                      {{transactionType | uppercase}}
-                    <mat-option value="disbursements">DISBURSEMENTS</mat-option>
+                    </mat-option>
-                    <mat-option value="rewards">REWARDS</mat-option>
-                    <mat-option value="reclamation">RECLAMATION</mat-option>
                   </mat-select>
                 </mat-form-field>
                 <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary ml-auto mr-2" (click)="downloadCsv(transactions, 'transactions')"> EXPORT </button>
@@ -312,11 +308,9 @@
                   <mat-label> ACCOUNT TYPE </mat-label>
                   <mat-select id="typeSelect" [(value)]="accountsType" (selectionChange)="filterAccounts()">
                     <mat-option value="all">ALL</mat-option>
-                    <mat-option value="user">USER</mat-option>
+                    <mat-option *ngFor="let accountType of accountTypes" [value]="accountType">
-                    <mat-option value="cashier">CASHIER</mat-option>
+                      {{accountType | uppercase}}
-                    <mat-option value="vendor">VENDOR</mat-option>
+                    </mat-option>
-                    <mat-option value="tokenAgent">TOKENAGENT</mat-option>
-                    <mat-option value="group">GROUPACCOUNT</mat-option>
                   </mat-select>
                 </mat-form-field>
                 <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary ml-auto mr-2" (click)="downloadCsv(accounts, 'accounts')"> EXPORT </button>

src/app/pages/accounts/account-details/account-details.component.ts

@@ -43,6 +43,9 @@ export class AccountDetailsComponent implements OnInit {
   transaction: any;
   transactions: any[];
   transactionsType = 'all';
+  accountTypes: any[];
+  transactionsTypes: any[];
+  genders: any[];
   matcher = new CustomErrorStateMatcher();
   submitted: boolean = false;
   bloxbergLink: string;
@@ -102,6 +105,9 @@ export class AccountDetailsComponent implements OnInit {
     this.userService.getCategories().pipe(first()).subscribe(res => this.categories = res);
     this.locationService.getAreaNames().pipe(first()).subscribe(res => this.areaNames = res);
     this.locationService.getAreaTypes().pipe(first()).subscribe(res => this.areaTypes = res);
+    this.userService.getAccountTypes().pipe(first()).subscribe(res => this.accountTypes = res);
+    this.userService.getTransactionTypes().pipe(first()).subscribe(res => this.transactionsTypes = res);
+    this.userService.getGenders().pipe(first()).subscribe(res => this.genders = res);
   }
 
   ngOnInit(): void {

src/app/pages/accounts/accounts.component.html

@@ -26,11 +26,9 @@
               <mat-label> ACCOUNT TYPE </mat-label>
               <mat-select id="typeSelect" [(value)]="accountsType" (selectionChange)="filterAccounts()">
                 <mat-option value="all">ALL</mat-option>
-                <mat-option value="user">USER</mat-option>
+                <mat-option *ngFor="let accountType of accountTypes" [value]="accountType">
-                <mat-option value="cashier">CASHIER</mat-option>
+                  {{accountType | uppercase}}
-                <mat-option value="vendor">VENDOR</mat-option>
+                </mat-option>
-                <mat-option value="tokenAgent">TOKENAGENT</mat-option>
-                <mat-option value="group">GROUPACCOUNT</mat-option>
               </mat-select>
             </mat-form-field>
             <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary ml-auto mr-2" routerLink="/accounts/search"> SEARCH </button>

src/app/pages/accounts/accounts.component.ts

@@ -6,6 +6,7 @@ import {LoggingService, UserService} from '@app/_services';
 import {Router} from '@angular/router';
 import {exportCsv} from '@app/_helpers';
 import {strip0x} from '@src/assets/js/ethtx/dist/hex';
+import {first} from 'rxjs/operators';
 
 @Component({
   selector: 'app-accounts',
@@ -20,6 +21,7 @@ export class AccountsComponent implements OnInit {
   defaultPageSize = 10;
   pageSizeOptions = [10, 20, 50, 100];
   accountsType = 'all';
+  accountTypes: any[];
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
@@ -36,6 +38,7 @@ export class AccountsComponent implements OnInit {
         this.loggingService.sendErrorLevelMessage('Failed to load accounts', this, {error});
       }
     })();
+    this.userService.getAccountTypes().pipe(first()).subscribe(res => this.accountTypes = res);
   }
 
   ngOnInit(): void {

src/app/pages/accounts/create-account/create-account.component.html

@@ -27,11 +27,9 @@
               <mat-form-field appearance="outline">
                 <mat-label>Account Type: </mat-label>
                 <mat-select id="accountType" formControlName="accountType" [errorStateMatcher]="matcher">
-                  <mat-option value="user">USER</mat-option>
+                  <mat-option *ngFor="let accountType of accountTypes" [value]="accountType">
-                  <mat-option value="cashier">CASHIER</mat-option>
+                    {{accountType | uppercase}}
-                  <mat-option value="vendor">VENDOR</mat-option>
+                  </mat-option>
-                  <mat-option value="tokenAgent">TOKENAGENT</mat-option>
-                  <mat-option value="group">GROUPACCOUNT</mat-option>
                 </mat-select>
                 <mat-error *ngIf="submitted && createFormStub.accountType.errors">Account type is required.</mat-error>
               </mat-form-field><br>
@@ -93,9 +91,9 @@
               <mat-form-field appearance="outline">
                 <mat-label>Gender: </mat-label>
                 <mat-select id="gender" formControlName="gender" [errorStateMatcher]="matcher">
-                  <mat-option value="female">FEMALE</mat-option>
+                  <mat-option *ngFor="let gender of genders" [value]="gender">
-                  <mat-option value="male">MALE</mat-option>
+                    {{gender | uppercase}}
-                  <mat-option value="other">OTHER</mat-option>
+                  </mat-option>
                 </mat-select>
                 <mat-error *ngIf="submitted && createFormStub.gender.errors">Gender is required.</mat-error>
               </mat-form-field><br>

src/app/pages/accounts/create-account/create-account.component.ts

@@ -16,6 +16,8 @@ export class CreateAccountComponent implements OnInit {
   submitted: boolean = false;
   categories: any[];
   areaNames: any[];
+  accountTypes: any[];
+  genders: any[];
 
   constructor(
     private formBuilder: FormBuilder,
@@ -38,6 +40,8 @@ export class CreateAccountComponent implements OnInit {
     });
     this.userService.getCategories().pipe(first()).subscribe(res => this.categories = res);
     this.locationService.getAreaNames().pipe(first()).subscribe(res => this.areaNames = res);
+    this.userService.getAccountTypes().pipe(first()).subscribe(res => this.accountTypes = res);
+    this.userService.getGenders().pipe(first()).subscribe(res => this.genders = res);
   }
 
   get createFormStub(): any { return this.createForm.controls; }

src/app/pages/transactions/transactions.component.html

@@ -29,11 +29,9 @@
               <mat-label> TRANSFER TYPE </mat-label>
               <mat-select id="typeSelect" [(value)]="transactionsType" (selectionChange)="filterTransactions()">
                 <mat-option value="all">ALL TRANSFERS</mat-option>
-                <mat-option value="transaction">PAYMENTS</mat-option>
+                <mat-option *ngFor="let transactionType of transactionsTypes" [value]="transactionType">
-                <mat-option value="conversion">CONVERSION</mat-option>
+                  {{transactionType | uppercase}}
-                <mat-option value="disbursements">DISBURSEMENTS</mat-option>
+                </mat-option>
-                <mat-option value="rewards">REWARDS</mat-option>
-                <mat-option value="reclamation">RECLAMATION</mat-option>
               </mat-select>
             </mat-form-field>
             <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary ml-auto mr-2" (click)="downloadCsv()"> EXPORT </button>

src/app/pages/transactions/transactions.component.ts

@@ -1,9 +1,10 @@
 import {AfterViewInit, ChangeDetectionStrategy, Component, OnInit, ViewChild} from '@angular/core';
-import {BlockSyncService, TransactionService} from '@app/_services';
+import {BlockSyncService, TransactionService, UserService} from '@app/_services';
 import {MatTableDataSource} from '@angular/material/table';
 import {MatPaginator} from '@angular/material/paginator';
 import {MatSort} from '@angular/material/sort';
 import {exportCsv} from '@app/_helpers';
+import {first} from 'rxjs/operators';
 
 @Component({
   selector: 'app-transactions',
@@ -19,6 +20,7 @@ export class TransactionsComponent implements OnInit, AfterViewInit {
   transactions: any[];
   transaction: any;
   transactionsType = 'all';
+  transactionsTypes: any[];
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
@@ -26,6 +28,7 @@ export class TransactionsComponent implements OnInit, AfterViewInit {
   constructor(
     private blockSyncService: BlockSyncService,
     private transactionService: TransactionService,
+    private userService: UserService
   ) {
     this.blockSyncService.blockSync();
   }
@@ -37,6 +40,7 @@ export class TransactionsComponent implements OnInit, AfterViewInit {
       this.transactionDataSource.sort = this.sort;
       this.transactions = transactions;
     });
+    this.userService.getTransactionTypes().pipe(first()).subscribe(res => this.transactionsTypes = res);
   }
 
   viewTransaction(transaction): void {