grassrootseconomics/cic-staff-client
5
0
Fork 0
Code Issues 26 Pull Requests Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Spencer Ofwiti 2021-04-28 20:24:25 +03:00
parent ce26380e84
commit e6de26be2c
10 changed files with 76 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/app/_helpers/mock-backend.ts
View File

@ -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> {

12
src/app/_services/user.service.ts
View File

@ -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`);
}
}

30
src/app/pages/accounts/account-details/account-details.component.html
View File

@ -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 value="cashier"> CASHIER </mat-option>
<mat-option value="vendor"> VENDOR </mat-option>
<mat-option value="tokenAgent"> TOKENAGENT </mat-option>
<mat-option value="group"> GROUPACCOUNT </mat-option>
<mat-option *ngFor="let accountType of accountTypes" [value]="accountType">
{{accountType | uppercase}}
</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 value="female"> FEMALE </mat-option>
<mat-option value="other"> OTHER </mat-option>
<mat-option *ngFor="let gender of genders" [value]="gender">
{{gender | uppercase}}
</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 value="conversion">CONVERSION</mat-option>
<mat-option value="disbursements">DISBURSEMENTS</mat-option>
<mat-option value="rewards">REWARDS</mat-option>
<mat-option value="reclamation">RECLAMATION</mat-option>
<mat-option *ngFor="let transactionType of transactionsTypes" [value]="transactionType">
{{transactionType | uppercase}}
</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 value="cashier">CASHIER</mat-option>
<mat-option value="vendor">VENDOR</mat-option>
<mat-option value="tokenAgent">TOKENAGENT</mat-option>
<mat-option value="group">GROUPACCOUNT</mat-option>
<mat-option *ngFor="let accountType of accountTypes" [value]="accountType">
{{accountType | uppercase}}
</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>

6
src/app/pages/accounts/account-details/account-details.component.ts
View File

@ -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 {

8
src/app/pages/accounts/accounts.component.html
View File

@ -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 value="cashier">CASHIER</mat-option>
<mat-option value="vendor">VENDOR</mat-option>
<mat-option value="tokenAgent">TOKENAGENT</mat-option>
<mat-option value="group">GROUPACCOUNT</mat-option>
<mat-option *ngFor="let accountType of accountTypes" [value]="accountType">
{{accountType | uppercase}}
</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>

3
src/app/pages/accounts/accounts.component.ts
View File

@ -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 {

14
src/app/pages/accounts/create-account/create-account.component.html
View File

@ -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 value="cashier">CASHIER</mat-option>
<mat-option value="vendor">VENDOR</mat-option>
<mat-option value="tokenAgent">TOKENAGENT</mat-option>
<mat-option value="group">GROUPACCOUNT</mat-option>
<mat-option *ngFor="let accountType of accountTypes" [value]="accountType">
{{accountType | uppercase}}
</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 value="male">MALE</mat-option>
<mat-option value="other">OTHER</mat-option>
<mat-option *ngFor="let gender of genders" [value]="gender">
{{gender | uppercase}}
</mat-option>
</mat-select>
<mat-error *ngIf="submitted && createFormStub.gender.errors">Gender is required.</mat-error>
</mat-form-field><br>

4
src/app/pages/accounts/create-account/create-account.component.ts
View File

@ -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; }

8
src/app/pages/transactions/transactions.component.html
View File

@ -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 value="conversion">CONVERSION</mat-option>
<mat-option value="disbursements">DISBURSEMENTS</mat-option>
<mat-option value="rewards">REWARDS</mat-option>
<mat-option value="reclamation">RECLAMATION</mat-option>
<mat-option *ngFor="let transactionType of transactionsTypes" [value]="transactionType">
{{transactionType | uppercase}}
</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>

6
src/app/pages/transactions/transactions.component.ts
View File

@ -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 {