diff --git a/angular.json b/angular.json index 3fd3ac7..565b3bc 100644 --- a/angular.json +++ b/angular.json @@ -38,8 +38,7 @@ "node_modules/datatables.net/js/jquery.dataTables.js", "node_modules/bootstrap/dist/js/bootstrap.js", "node_modules/block-syncer/dist/worker_ondemand.js" - ], - "webWorkerTsConfig": "tsconfig.worker.json" + ] }, "configurations": { "production": { @@ -139,4 +138,4 @@ } }, "defaultProject": "cic-staff-client" -} \ No newline at end of file +} diff --git a/package-lock.json b/package-lock.json index 6fdbffb..2dfbf62 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1647,19 +1647,19 @@ } }, "@ethereumjs/common": { - "version": "2.0.0-beta.2", - "resolved": "https://registry.npmjs.org/@ethereumjs/common/-/common-2.0.0-beta.2.tgz", - "integrity": "sha512-DdzcV2iTKsfhFihR2boXEdTDqufpbHonPqp7fORsKTv9FRo5dkM8V9SF03RphSsZzYWg+KXd+eX1hYcpUjherw==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@ethereumjs/common/-/common-2.0.0.tgz", + "integrity": "sha512-yL0zA7Xwgz8IFHKW0VoXGjdZDVxUJg8BQ/muMHvYPW7zHJNNC80gQmvLH+MpvIg1TCXZkFXxrpYRAyCElSm+aw==", "requires": { "crc-32": "^1.2.0" } }, "@ethereumjs/tx": { - "version": "3.0.0-beta.2", - "resolved": "https://registry.npmjs.org/@ethereumjs/tx/-/tx-3.0.0-beta.2.tgz", - "integrity": "sha512-NZLIVXp/OcwkhP4Z4AC742kjInMPwvixKexlQFjAWoughp+/5JZESRb171mvLQAKI4aqY9bYicadtTwCdsMuZQ==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@ethereumjs/tx/-/tx-3.0.0.tgz", + "integrity": "sha512-H9tfy6qgYxPXvt1TSObfVmVjlF43OoQqoPQ3PJsG2JiuqaMHj5ettV1pGFEC3FamENDBkl6vD6niQEvIlXv/VQ==", "requires": { - "@ethereumjs/common": "2.0.0-beta.2", + "@ethereumjs/common": "^2.0.0", "ethereumjs-util": "^7.0.7" }, "dependencies": { @@ -4376,16 +4376,16 @@ "integrity": "sha512-hsRUr4FFrvhhRH12wOdfs38Gy7k2FFzB9qgN9v3aLykRq0dRcdcpz5C9FxdS2NuhOrI/628b/KSTJ3rwHysYSg==" }, "yargs": { - "version": "16.1.0", - "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.1.0.tgz", - "integrity": "sha512-upWFJOmDdHN0syLuESuvXDmrRcWd1QafJolHskzaw79uZa7/x53gxQKiR07W59GWY1tFhhU/Th9DrtSfpS782g==", + "version": "16.1.1", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.1.1.tgz", + "integrity": "sha512-hAD1RcFP/wfgfxgMVswPE+z3tlPFtxG8/yWUrG2i17sTWGCGqWnxKcLTF4cUKDUK8fzokwsmO9H0TDkRbMHy8w==", "requires": { "cliui": "^7.0.2", "escalade": "^3.1.1", "get-caller-file": "^2.0.5", "require-directory": "^2.1.1", "string-width": "^4.2.0", - "y18n": "^5.0.2", + "y18n": "^5.0.5", "yargs-parser": "^20.2.2" } }, @@ -9877,9 +9877,9 @@ }, "dependencies": { "debug": { - "version": "3.2.6", - "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz", - "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==", + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", + "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", "requires": { "ms": "^2.1.1" } @@ -11111,9 +11111,9 @@ "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=" }, "pg": { - "version": "8.5.0", - "resolved": "https://registry.npmjs.org/pg/-/pg-8.5.0.tgz", - "integrity": "sha512-h+KHEwce67pAQilZhMCpCx1RC7rR1US7mdjwvKzHRaRxKQxbbFtv5UlwjzqILQ1dwhK+RVGqOVcahE/2KOcaeA==", + "version": "8.5.1", + "resolved": "https://registry.npmjs.org/pg/-/pg-8.5.1.tgz", + "integrity": "sha512-9wm3yX9lCfjvA98ybCyw2pADUivyNWT/yIP4ZcDVpMN0og70BUWYEGXPCTAQdGTAqnytfRADb7NERrY1qxhIqw==", "requires": { "buffer-writer": "2.0.0", "packet-reader": "1.0.0", diff --git a/package.json b/package.json index 3098a4c..10e77fd 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "bootstrap": "^4.5.3", "chart.js": "^2.9.4", "cic-client": "^0.0.3", - "cic-client-meta": "^0.0.5", + "cic-client-meta": "0.0.5", "datatables.net": "^1.10.22", "datatables.net-dt": "^1.10.22", "jquery": "^3.5.1", diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 29bae05..b37ab7d 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,5 +1,6 @@ import {Component, HostListener, OnInit} from '@angular/core'; import {BlockSyncService, TransactionService} from './_services'; +import {User} from 'cic-client-meta'; @Component({ selector: 'app-root', @@ -49,6 +50,6 @@ export class AppComponent implements OnInit { @HostListener('window:cic_convert', ['$event']) cicConvert(event: CustomEvent): void { const conversion = event.detail.tx; - this.transactionService.setConversion(conversion); + this.transactionService.setConversion(conversion, 100); } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 951435d..aab6a09 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -8,6 +8,7 @@ import {SharedModule} from './shared/shared.module'; import {HttpClientModule} from '@angular/common/http'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import {MatTableModule} from '@angular/material/table'; +import {MockBackendProvider} from './_helpers'; @NgModule({ declarations: [ @@ -22,7 +23,9 @@ import {MatTableModule} from '@angular/material/table'; BrowserAnimationsModule, MatTableModule ], - providers: [], + providers: [ + MockBackendProvider + ], bootstrap: [AppComponent] }) export class AppModule { } diff --git a/src/app/pages/accounts/account-details/account-details.component.html b/src/app/pages/accounts/account-details/account-details.component.html index 6bfcf15..10df82b 100644 --- a/src/app/pages/accounts/account-details/account-details.component.html +++ b/src/app/pages/accounts/account-details/account-details.component.html @@ -9,25 +9,42 @@
-
+
+

- portrait {{account?.name}}

-

Balance: {{account?.balance}} RCU

-

Created: {{account?.created}}

-

Address: {{account?.address}}

+ Balance: {{account?.balance}} RCU + Created: {{account?.created}} + Address: {{account?.address}}
- -
+ +
+ + + +
+
DETAILS - - + +
@@ -37,26 +54,8 @@ STATUS - Unapproved - Approved - - -
- -
- - Payment Cycle Start Date : - - -
- -
- - PAYMENT CYCLE - - Weekly - Daily - Monthly + Unapproved + Approved
@@ -88,6 +87,17 @@
+
+ + USER TOKEN: + + RESERVE + ERNIE + BERT + + +
+
Failed Pin Attempts: @@ -116,7 +126,7 @@
BUSINESS CATEGORY: - + Food/Water Fuel/Energy Education @@ -126,26 +136,58 @@ Transport Farming/Labour Savings Group - Other + Savings Group
- + + User Location: + +
- + + LOCATION: + +
+
+ + + {{village}} + + +
+
+ +
- + + Referred By: + + +
+ +
+ +
+ +
+ +
+ +
+
+
USER @@ -163,96 +205,242 @@ - - {{account.name}} - {{account.type}} - {{account.created}} - {{account.status}} + + {{account?.name}} + {{account?.type}} + {{account?.created}} + + {{account?.status}} + {{account?.status}} +
- -
-
-
- - TRANSACTION TYPE - - ALL TRANSFERS - PAYMENTS - EXCHANGE - DISBURSEMENT - RECLAMATION> - - -

{{selection.selected.length}} selected

-
-
+
+ + History +
Filter - + search - - - Sender - {{transaction.sender?.vcard.fn}} + + + + User + {{history.userName}} - - Recipient - {{transaction.recipient?.vcard.fn}} + + Action + {{history.action}} - - Token - {{transaction.token.name}} + + Staff + {{history.staff}} - - Value - {{transaction.token.symbol + ' ' + transaction.value}} + + Timestamp + {{history.timestamp | date}} - - View Transaction - - - - - - - - - - - - - - - - - - + + - +
+ + + + +
+
+
+ + TRANSACTION TYPE + + ALL TRANSFERS + PAYMENTS + CONVERSION + DISBURSEMENTS + REWARDS + RECLAMATION + + +
+
+ +
+ + Filter + + search + + + + + + View + + + + + + + Sender + {{transaction.sender?.vcard.fn}} + + + + Sender Location + {{account.location}} + + + + Recipient + {{transaction.recipient?.vcard.fn}} + + + + Recipient Location + {{account.location}} + + + + Token + + {{transaction.token.name}} + {{transaction.destinationToken.name}} + + + + + Value + + {{transaction.value | tokenRatio}} + {{transaction.toValue | tokenRatio}} + + + + + Created + {{transaction.tx.timestamp | date}} + + + + TYPE + + {{transaction.type}} + + + + + + + + + +
+
+ + + +
+ + Accounts + +
+
+ + ACCOUNT TYPE + + ALL + USER + CASHIER + VENDOR + TOKENAGENT + GROUPACCOUNT + + +
+ + + Filter + + search + + + + + + NAME + {{user.name}} + + + + PHONE NUMBER + {{user.phone}} + + + + CREATED + {{user.created}} + + + + BALANCE + {{user.balance}} + + + + TYPE + {{user.type}} + + + + STATUS + + {{user.status}} + {{user.status}} + + + + + LOCATION + {{user.location}} + + + + FAILED PIN ATTEMPTS + {{user.failedPinAttempts}} + + + + + + + +
+
+ +
diff --git a/src/app/pages/accounts/account-details/account-details.component.ts b/src/app/pages/accounts/account-details/account-details.component.ts index dec70e8..3df2a7e 100644 --- a/src/app/pages/accounts/account-details/account-details.component.ts +++ b/src/app/pages/accounts/account-details/account-details.component.ts @@ -1,47 +1,85 @@ -import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core'; +import {Component, OnInit, ViewChild} from '@angular/core'; import {MatTableDataSource} from '@angular/material/table'; -import {Transaction} from '../../../_models'; +import {Transaction, User} from '../../../_models'; import {SelectionModel} from '@angular/cdk/collections'; import {MatPaginator} from '@angular/material/paginator'; import {MatSort} from '@angular/material/sort'; -import {TransactionService, UserService} from '../../../_services'; -import {ActivatedRoute, Params} from '@angular/router'; +import {LocationService, TransactionService, UserService} from '../../../_services'; +import {ActivatedRoute, Params, Router} from '@angular/router'; +import {first} from 'rxjs/operators'; @Component({ selector: 'app-account-details', templateUrl: './account-details.component.html', styleUrls: ['./account-details.component.scss'] }) -export class AccountDetailsComponent implements OnInit, AfterViewInit { - dataSource: MatTableDataSource; - displayedColumns = ['sender', 'recipient', 'token', 'value', 'view', 'select']; +export class AccountDetailsComponent implements OnInit { + transactionsDataSource: MatTableDataSource; + transactionsDisplayedColumns = ['view', 'sender', 'senderLocation', 'recipient', 'recipientLocation', 'token', 'value', 'created', 'type']; + @ViewChild('TransactionTablePaginator', {static: true}) transactionTablePaginator: MatPaginator; + @ViewChild('TransactionTableSort', {static: true}) transactionTableSort: MatSort; + + userDataSource: MatTableDataSource; + userDisplayedColumns = ['name', 'phone', 'created', 'balance', 'type', 'status', 'location', 'failedPinAttempts']; + @ViewChild('UserTablePaginator', {static: true}) userTablePaginator: MatPaginator; + @ViewChild('UserTableSort', {static: true}) userTableSort: MatSort; + + historyDataSource: MatTableDataSource; + historyDisplayedColumns = ['user', 'action', 'staff', 'timestamp']; + @ViewChild('HistoryTablePaginator', {static: true}) historyTablePaginator: MatPaginator; + @ViewChild('HistoryTableSort', {static: true}) historyTableSort: MatSort; + + account: any; + accounts: any[] = []; + accountsType = 'all'; initialSelection = []; allowMultiSelect = true; selection: SelectionModel; date: string; time: number; isDisbursing = false; - transaction: Transaction; - account: any; - - @ViewChild(MatPaginator) paginator: MatPaginator; - @ViewChild(MatSort) sort: MatSort; + locations: any; + transaction: any; + transactions: any[]; + transactionsType = 'all'; constructor( + private locationService: LocationService, private transactionService: TransactionService, private userService: UserService, - private route: ActivatedRoute + private route: ActivatedRoute, + private router: Router ) { this.route.paramMap.subscribe((params: Params) => { - this.account = this.userService.getUserById(params.get('id')); + this.userService.getAccountById(params.get('id')).pipe(first()).subscribe(account => { + this.account = account; + this.userService.getHistoryByUser(this.account?.id).pipe(first()).subscribe(history => { + this.historyDataSource = new MatTableDataSource(history); + this.historyDataSource.paginator = this.historyTablePaginator; + this.historyDataSource.sort = this.historyTableSort; + }); + }); + }); + this.userService.getAccounts(); + this.locationService.getLocations(); + this.locationService.locationsSubject.subscribe(locations => { + this.locations = locations; }); } ngOnInit(): void { + this.userService.accountsSubject.subscribe(accounts => { + this.userDataSource = new MatTableDataSource(accounts); + this.userDataSource.paginator = this.userTablePaginator; + this.userDataSource.sort = this.userTableSort; + this.accounts = accounts; + }); + this.transactionService.transactionsSubject.subscribe(transactions => { - this.dataSource = new MatTableDataSource(transactions); - this.dataSource.paginator = this.paginator; - this.dataSource.sort = this.sort; + this.transactionsDataSource = new MatTableDataSource(transactions); + this.transactionsDataSource.paginator = this.transactionTablePaginator; + this.transactionsDataSource.sort = this.transactionTableSort; + this.transactions = transactions; }); this.selection = new SelectionModel(this.allowMultiSelect, this.initialSelection); @@ -49,30 +87,60 @@ export class AccountDetailsComponent implements OnInit, AfterViewInit { this.date = `${d.getDate()}/${d.getMonth()}/${d.getFullYear()}`; } - ngAfterViewInit(): void { - this.dataSource.paginator = this.paginator; - this.dataSource.sort = this.sort; - } - addTransfer(): void { this.isDisbursing = !this.isDisbursing; } - isAllSelected(): boolean { - const numSelected = this.selection.selected.length; - const numRows = this.dataSource.data.length; - return numSelected === numRows; + doTransactionFilter(value: string): void { + this.transactionsDataSource.filter = value.trim().toLocaleLowerCase(); } - masterToggle(): void { - this.isAllSelected() ? this.selection.clear() : this.dataSource.data.forEach(row => this.selection.select(row)); + doUserFilter(value: string): void { + this.userDataSource.filter = value.trim().toLocaleLowerCase(); } - doFilter(value: string): void { - this.dataSource.filter = value.trim().toLocaleLowerCase(); + doHistoryFilter(value: string): void { + this.historyDataSource.filter = value.trim().toLocaleLowerCase(); } viewTransaction(transaction): void { this.transaction = transaction; } + + viewAccount(account): void { + (function smoothscroll(): void { + const currentScroll = document.documentElement.scrollTop || document.body.scrollTop; + if (currentScroll > 0) { + window.requestAnimationFrame(smoothscroll); + window.scrollTo(0, currentScroll - (currentScroll / 8)); + } + })(); + window.scrollTo(0, 0); + document.body.scrollTop = document.documentElement.scrollTop = 0; + this.router.navigateByUrl(`/accounts/${account.id}`); + } + + saveInfo(): void {} + + filterAccounts(): void { + if (this.accountsType === 'all') { + this.userService.accountsSubject.subscribe(accounts => { + this.userDataSource.data = accounts; + this.accounts = accounts; + }); + } else { + this.userDataSource.data = this.accounts.filter(account => account.type === this.accountsType); + } + } + + filterTransactions(): void { + if (this.transactionsType === 'all') { + this.transactionService.transactionsSubject.subscribe(transactions => { + this.transactionsDataSource.data = transactions; + this.transactions = transactions; + }); + } else { + this.transactionsDataSource.data = this.transactions.filter(transaction => transaction.type === this.transactionsType); + } + } } diff --git a/src/app/pages/accounts/accounts.component.html b/src/app/pages/accounts/accounts.component.html index 1599410..255c838 100644 --- a/src/app/pages/accounts/accounts.component.html +++ b/src/app/pages/accounts/accounts.component.html @@ -10,7 +10,12 @@
- +
Accounts @@ -19,29 +24,24 @@
ACCOUNT TYPE - - ALL + + ALL USER CASHIER VENDOR - TOKENAGENT - GROUPACCOUNT + TOKENAGENT + GROUPACCOUNT - - +
-
+

{{selection.selected.length}} selected

- - - -
-
-

{{selection.selected.length}} selected

- + +
@@ -72,9 +72,22 @@ {{user.balance}} + + TYPE + {{user.type}} + + STATUS - {{user.status}} + + {{user.status}} + {{user.status}} + + + + + LOCATION + {{user.location}} @@ -98,7 +111,7 @@ - + diff --git a/src/app/pages/accounts/accounts.component.ts b/src/app/pages/accounts/accounts.component.ts index 28c9f0b..8d479a5 100644 --- a/src/app/pages/accounts/accounts.component.ts +++ b/src/app/pages/accounts/accounts.component.ts @@ -1,4 +1,4 @@ -import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core'; +import {Component, OnInit, ViewChild} from '@angular/core'; import {MatTableDataSource} from '@angular/material/table'; import {SelectionModel} from '@angular/cdk/collections'; import {MatPaginator} from '@angular/material/paginator'; @@ -11,13 +11,14 @@ import {Router} from '@angular/router'; templateUrl: './accounts.component.html', styleUrls: ['./accounts.component.scss'] }) -export class AccountsComponent implements OnInit, AfterViewInit{ +export class AccountsComponent implements OnInit { dataSource: MatTableDataSource; - displayedColumns = ['name', 'phone', 'created', 'balance', 'status', 'failedPinAttempts', 'select']; + accounts: any[] = []; + displayedColumns = ['name', 'phone', 'created', 'balance', 'type', 'status', 'location', 'failedPinAttempts', 'select']; initialSelection = []; allowMultiSelect = true; selection: SelectionModel; - isDisbursing = false; + accountsType = 'all'; @ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatSort) sort: MatSort; @@ -25,22 +26,20 @@ export class AccountsComponent implements OnInit, AfterViewInit{ constructor( private userService: UserService, private router: Router - ) { } + ) { + this.userService.getAccounts(); + } ngOnInit(): void { - this.dataSource = new MatTableDataSource(this.userService.users); + this.userService.accountsSubject.subscribe(accounts => { + this.dataSource = new MatTableDataSource(accounts); + this.dataSource.paginator = this.paginator; + this.dataSource.sort = this.sort; + this.accounts = accounts; + }); this.selection = new SelectionModel(this.allowMultiSelect, this.initialSelection); } - addTransfer(): void { - this.isDisbursing = true; - } - - ngAfterViewInit(): void { - this.dataSource.paginator = this.paginator; - this.dataSource.sort = this.sort; - } - isAllSelected(): boolean { const numSelected = this.selection.selected.length; const numRows = this.dataSource.data.length; @@ -56,6 +55,23 @@ export class AccountsComponent implements OnInit, AfterViewInit{ } viewAccount(account): void { - this.router.navigateByUrl(`/accounts/${account.id}`); + this.router.navigateByUrl(`/accounts/${account.id}`).then(); + } + + approveAccount(): void { + for (const account of this.selection.selected) { + account.status = 'approved'; + } + } + + filterAccounts(): void { + if (this.accountsType === 'all') { + this.userService.accountsSubject.subscribe(accounts => { + this.dataSource.data = accounts; + this.accounts = accounts; + }); + } else { + this.dataSource.data = this.accounts.filter(account => account.type === this.accountsType); + } } } diff --git a/src/app/pages/accounts/accounts.module.ts b/src/app/pages/accounts/accounts.module.ts index 399fb0e..f8ae146 100644 --- a/src/app/pages/accounts/accounts.module.ts +++ b/src/app/pages/accounts/accounts.module.ts @@ -20,26 +20,32 @@ import {MatCardModule} from '@angular/material/card'; import {MatIconModule} from '@angular/material/icon'; import {MatSelectModule} from '@angular/material/select'; import {TransactionsModule} from '../transactions/transactions.module'; +import {MatTabsModule} from '@angular/material/tabs'; +import {MatRippleModule} from '@angular/material/core'; +import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; @NgModule({ declarations: [AccountsComponent, AccountDetailsComponent, CreateAccountComponent, DisbursementComponent, ExportAccountsComponent], - imports: [ - CommonModule, - AccountsRoutingModule, - SharedModule, - DataTablesModule, - MatTableModule, - MatSortModule, - MatCheckboxModule, - MatPaginatorModule, - MatInputModule, - MatFormFieldModule, - MatButtonModule, - MatCardModule, - MatIconModule, - MatSelectModule, - TransactionsModule - ] + imports: [ + CommonModule, + AccountsRoutingModule, + SharedModule, + DataTablesModule, + MatTableModule, + MatSortModule, + MatCheckboxModule, + MatPaginatorModule, + MatInputModule, + MatFormFieldModule, + MatButtonModule, + MatCardModule, + MatIconModule, + MatSelectModule, + TransactionsModule, + MatTabsModule, + MatRippleModule, + MatProgressSpinnerModule + ] }) export class AccountsModule { } diff --git a/src/app/pages/accounts/create-account/create-account.component.html b/src/app/pages/accounts/create-account/create-account.component.html index 6911571..b2136cf 100644 --- a/src/app/pages/accounts/create-account/create-account.component.html +++ b/src/app/pages/accounts/create-account/create-account.component.html @@ -10,6 +10,13 @@
+
CREATE A USER ACCOUNT @@ -23,8 +30,8 @@ USER CASHIER VENDOR - TOKENAGENT - GROUPACCOUNT + TOKENAGENT + GROUPACCOUNT
@@ -107,7 +114,7 @@
- +
diff --git a/src/app/pages/accounts/create-account/create-account.component.ts b/src/app/pages/accounts/create-account/create-account.component.ts index ebca636..a46193c 100644 --- a/src/app/pages/accounts/create-account/create-account.component.ts +++ b/src/app/pages/accounts/create-account/create-account.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import {Router} from '@angular/router'; @Component({ selector: 'app-create-account', @@ -7,9 +8,14 @@ import { Component, OnInit } from '@angular/core'; }) export class CreateAccountComponent implements OnInit { - constructor() { } + constructor( + private router: Router + ) { } ngOnInit(): void { } + onSubmit(): void { + this.router.navigateByUrl(`/accounts`); + } } diff --git a/src/app/pages/accounts/disbursement/disbursement.component.html b/src/app/pages/accounts/disbursement/disbursement.component.html index 0925c91..b059d8a 100644 --- a/src/app/pages/accounts/disbursement/disbursement.component.html +++ b/src/app/pages/accounts/disbursement/disbursement.component.html @@ -1,12 +1,15 @@
-
- NEW TRANSFER -
+ +
+ NEW TRANSFER + +
+
-
+
- ACCOUNT TYPE + TRANSACTION TYPE DISBURSEMENT TRANSFER @@ -14,14 +17,13 @@ RECLAMATION - -
-
- + Enter Amount: - +
diff --git a/src/app/pages/accounts/disbursement/disbursement.component.ts b/src/app/pages/accounts/disbursement/disbursement.component.ts index 88b917a..6e1d4c5 100644 --- a/src/app/pages/accounts/disbursement/disbursement.component.ts +++ b/src/app/pages/accounts/disbursement/disbursement.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, OnInit, EventEmitter, Output} from '@angular/core'; @Component({ selector: 'app-disbursement', @@ -6,10 +6,16 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./disbursement.component.scss'] }) export class DisbursementComponent implements OnInit { + @Output() cancelDisbursmentEvent = new EventEmitter(); constructor() { } ngOnInit(): void { } + createTransfer(): void {} + + cancel(): void { + this.cancelDisbursmentEvent.emit(); + } } diff --git a/src/app/pages/accounts/export-accounts/export-accounts.component.html b/src/app/pages/accounts/export-accounts/export-accounts.component.html index 4803124..192415d 100644 --- a/src/app/pages/accounts/export-accounts/export-accounts.component.html +++ b/src/app/pages/accounts/export-accounts/export-accounts.component.html @@ -10,6 +10,13 @@
+
EXPORT ACCOUNTS @@ -32,7 +39,7 @@
- +
diff --git a/src/app/pages/admin/admin.component.html b/src/app/pages/admin/admin.component.html index 173015c..6f6ae09 100644 --- a/src/app/pages/admin/admin.component.html +++ b/src/app/pages/admin/admin.component.html @@ -10,6 +10,12 @@
+
Actions @@ -22,37 +28,65 @@ search - + + + + + Expand + + + + - + + + - NAME + NAME {{action.user}} - ROLE + ROLE {{action.role}} - ACTION + ACTION {{action.action}} - STATUS - {{approvalStatus(action.approval)}} + STATUS + + {{approvalStatus(action.approval)}} + {{approvalStatus(action.approval)}} + APPROVE - + + + + + + + + +
+ Staff Name: {{action.user}}
+ Role: {{action.role}}
+ Action Details: {{action.action}}
+ Approval Status: {{action.approval}}
+
- + + diff --git a/src/app/pages/admin/admin.component.scss b/src/app/pages/admin/admin.component.scss index e69de29..0afb7a6 100644 --- a/src/app/pages/admin/admin.component.scss +++ b/src/app/pages/admin/admin.component.scss @@ -0,0 +1,3 @@ +button { + width: 6rem; +} diff --git a/src/app/pages/admin/admin.component.ts b/src/app/pages/admin/admin.component.ts index 543b2e4..e56d32b 100644 --- a/src/app/pages/admin/admin.component.ts +++ b/src/app/pages/admin/admin.component.ts @@ -1,32 +1,43 @@ -import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core'; +import {Component, OnInit, ViewChild} from '@angular/core'; import {MatTableDataSource} from '@angular/material/table'; import {MatPaginator} from '@angular/material/paginator'; import {MatSort} from '@angular/material/sort'; import {UserService} from '../../_services'; +import {animate, state, style, transition, trigger} from '@angular/animations'; +import {first} from 'rxjs/operators'; @Component({ selector: 'app-admin', templateUrl: './admin.component.html', - styleUrls: ['./admin.component.scss'] + styleUrls: ['./admin.component.scss'], + animations: [ + trigger('detailExpand', [ + state('collapsed', style({height: '0px', minHeight: 0, visibility: 'hidden'})), + state('expanded', style({height: '*', visibility: 'visible'})), + transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')), + ]) + ] }) -export class AdminComponent implements OnInit, AfterViewInit { +export class AdminComponent implements OnInit { dataSource: MatTableDataSource; - displayedColumns = ['user', 'role', 'action', 'status', 'approve']; + displayedColumns = ['expand', 'user', 'role', 'action', 'status', 'approve']; + action: any; @ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatSort) sort: MatSort; constructor( private userService: UserService - ) { } - - ngOnInit(): void { - this.dataSource = new MatTableDataSource(this.userService.actions); + ) { + this.userService.getActions(); + this.userService.actionsSubject.subscribe(actions => { + this.dataSource = new MatTableDataSource(actions); + this.dataSource.paginator = this.paginator; + this.dataSource.sort = this.sort; + }); } - ngAfterViewInit(): void { - this.dataSource.paginator = this.paginator; - this.dataSource.sort = this.sort; + ngOnInit(): void { } doFilter(value: string): void { @@ -38,6 +49,16 @@ export class AdminComponent implements OnInit, AfterViewInit { } approveAction(action: any): void { - this.userService.approveAction(action.id); + this.userService.approveAction(action.id).pipe(first()).subscribe(res => console.log(res)); + this.userService.getActions(); + } + + revertAction(action: any): void { + this.userService.revokeAction(action.id).pipe(first()).subscribe(res => console.log(res)); + this.userService.getActions(); + } + + expandCollapse(row): void { + row.isExpanded = !row.isExpanded; } } diff --git a/src/app/pages/admin/admin.module.ts b/src/app/pages/admin/admin.module.ts index 9d00e7a..1ed2b79 100644 --- a/src/app/pages/admin/admin.module.ts +++ b/src/app/pages/admin/admin.module.ts @@ -12,22 +12,24 @@ import {MatTableModule} from '@angular/material/table'; import {MatSortModule} from '@angular/material/sort'; import {MatPaginatorModule} from '@angular/material/paginator'; import {MatButtonModule} from '@angular/material/button'; +import {MatRippleModule} from '@angular/material/core'; @NgModule({ declarations: [AdminComponent], - imports: [ - CommonModule, - AdminRoutingModule, - SharedModule, - MatCardModule, - MatFormFieldModule, - MatInputModule, - MatIconModule, - MatTableModule, - MatSortModule, - MatPaginatorModule, - MatButtonModule - ] + imports: [ + CommonModule, + AdminRoutingModule, + SharedModule, + MatCardModule, + MatFormFieldModule, + MatInputModule, + MatIconModule, + MatTableModule, + MatSortModule, + MatPaginatorModule, + MatButtonModule, + MatRippleModule + ] }) export class AdminModule { } diff --git a/src/app/pages/pages-routing.module.ts b/src/app/pages/pages-routing.module.ts index 695579e..b09bb38 100644 --- a/src/app/pages/pages-routing.module.ts +++ b/src/app/pages/pages-routing.module.ts @@ -6,7 +6,6 @@ import { PagesComponent } from './pages.component'; const routes: Routes = [ { path: 'home', component: PagesComponent }, { path: 'tx', loadChildren: () => import('./transactions/transactions.module').then(m => m.TransactionsModule) }, - { path: 'users', loadChildren: () => import('./users/users.module').then(m => m.UsersModule) }, { path: 'settings', loadChildren: () => import('./settings/settings.module').then(m => m.SettingsModule) }, { path: 'accounts', loadChildren: () => import('./accounts/accounts.module').then(m => m.AccountsModule) }, { path: 'tokens', loadChildren: () => import('./tokens/tokens.module').then(m => m.TokensModule) }, diff --git a/src/app/pages/pages.component.html b/src/app/pages/pages.component.html index ba8b31c..87344d4 100644 --- a/src/app/pages/pages.component.html +++ b/src/app/pages/pages.component.html @@ -10,83 +10,99 @@
-
-
-
+ +
+ + CICADA DASHBOARD + +
+
- Filter by user : + Filter by location : - SELECT ATTRIBUTE - 2 - 3 - 4 - 5 +
+
+ + + {{village}} + + +
+
- - Filter by Date - - - - -
-
-
-
-
- - -
-
-
-
-
-

MASTER WALLET BALANCE

-

{{10000000 | number}} RCU

-
-
-

TOTAL DISTRIBUTED

-

{{disbursements * 1000 | number}} RCU

-
-
-

TOTAL SPENT

-

{{transactions * 100000 | number}} RCU

-
-
-

TOTAL USERS

-

{{users * 10 | number}} users

-
-
-
-
-
- - -
-
-
-
-

TRANSFER USAGES

-

Transfer Usages Will Appear Here

+
+
+
+
+ + +
+
+
+
+
+

MASTER WALLET BALANCE

+

{{10000000 | number}} RCU

+
+
+

TOTAL DISTRIBUTED

+

{{disbursements * 1000 | number}} RCU

+
+
+

TOTAL SPENT

+

{{transactions * 100000 | number}} RCU

+
+
+

TOTAL USERS

+

{{users * 10 | number}} users

+
+
+
+
+
+ + +
+
-
-
-

PARTNER LIVE FEED

+
+
+

TRANSFER USAGES

+
+ + +
+
+
+
+

PARTNER LIVE FEED

+
diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts index 1466021..209f423 100644 --- a/src/app/pages/pages.component.ts +++ b/src/app/pages/pages.component.ts @@ -1,6 +1,8 @@ import { Component, OnInit } from '@angular/core'; import {Color, Label} from 'ng2-charts'; import {ChartDataSets, ChartOptions, ChartType} from 'chart.js'; +import {LocationService, UserService} from '../_services'; +import { ArraySum } from '../_helpers'; @Component({ selector: 'app-pages', @@ -9,7 +11,8 @@ import {ChartDataSets, ChartOptions, ChartType} from 'chart.js'; }) export class PagesComponent implements OnInit { disbursements: number = 0; - users: number = 0; + users: any; + locations: any; transactions: number = 0; public lineChartData: ChartDataSets[] = [ { data: [65, 59, 80, 81, 56, 55, 40], label: 'User Registration'}, @@ -109,16 +112,57 @@ export class PagesComponent implements OnInit { { data: [28, 48, 40, 19, 86, 27, 90], label: 'Recurrent Users'} ]; - constructor() { } + public transferUsagesChartLabels: Label[] = ['Food/Water', 'Fuel/Energy', 'Education', 'Health', 'Shop', 'Environment', 'Transport', + 'Farming/Labour', 'Savings Group', 'Savings Group']; + public transferUsagesChartData: number[] = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; + public transferUsagesChartType: ChartType = 'pie'; + public transferUsagesChartOptions: ChartOptions = { + responsive: true, + legend: { + position: 'top', + }, + plugins: { + datalabels: { + formatter: (value, ctx) => { + const label = ctx.chart.data.labels[ctx.dataIndex]; + return label; + }, + }, + } + }; + public transferUsagesChartLegend = true; + public transferUsagesChartColors = [ + { + backgroundColor: [ + 'rgba(0,0,255,0.3)', + 'rgba(255,0,0,0.3)', + 'rgba(0,255,0,0.3)', + 'rgba(255,0,255,0.3)', + 'rgba(255,255,0,0.3)', + 'rgba(0,255,255,0.3)', + 'rgba(255,255,255,0.3)', + 'rgba(255,100,0,0.3)', + 'rgba(0,255,100,0.3)', + 'rgba(100,0,255,0.3)'], + }, + ]; + + constructor( + private userService: UserService, + private locationService: LocationService + ) { + this.locationService.getLocations(); + this.locationService.locationsSubject.subscribe(locations => { + this.locations = locations; + }); + } ngOnInit(): void { this.newDataPoint([50, 80], 'August'); - // this.disbursements = this.lineChartData.find(data => data.label === 'Token Disbursements') - // .data.reduce((accumulator, current) => accumulator + current, 0); - // this.users = this.barChartData.find(data => data.label === 'New Users') - // .data.reduce((accumulator, current) => accumulator + current, 0); - // this.transactions = this.lineChartData.find(data => data.label === 'Transaction Volumes') - // .data.reduce((accumulator, current) => accumulator + current, 0); + this.transferUsagesChartData = [18, 12, 10, 8, 6, 5, 5, 3, 2, 1]; + this.disbursements = ArraySum.arraySum(this.lineChartData.find(data => data.label === 'Token Disbursements').data); + this.users = ArraySum.arraySum(this.barChartData.find(data => data.label === 'New Users').data); + this.transactions = ArraySum.arraySum(this.lineChartData.find(data => data.label === 'Transaction Volumes').data); } newDataPoint(dataArr: any[], label: string): void { diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts index 45aa61d..6f94fbc 100644 --- a/src/app/pages/pages.module.ts +++ b/src/app/pages/pages.module.ts @@ -9,19 +9,21 @@ import {MatButtonModule} from '@angular/material/button'; import {MatFormFieldModule} from '@angular/material/form-field'; import {MatSelectModule} from '@angular/material/select'; import {MatInputModule} from '@angular/material/input'; +import {MatCardModule} from '@angular/material/card'; @NgModule({ declarations: [PagesComponent], - imports: [ - CommonModule, - PagesRoutingModule, - SharedModule, - ChartsModule, - MatButtonModule, - MatFormFieldModule, - MatSelectModule, - MatInputModule - ] + imports: [ + CommonModule, + PagesRoutingModule, + SharedModule, + ChartsModule, + MatButtonModule, + MatFormFieldModule, + MatSelectModule, + MatInputModule, + MatCardModule + ] }) export class PagesModule { } diff --git a/src/app/pages/settings/invite/invite.component.html b/src/app/pages/settings/invite/invite.component.html index 4da85ab..7de4cf0 100644 --- a/src/app/pages/settings/invite/invite.component.html +++ b/src/app/pages/settings/invite/invite.component.html @@ -10,6 +10,13 @@
+
@@ -27,7 +34,7 @@ Subadmin
View
- +
diff --git a/src/app/pages/settings/organization/organization.component.html b/src/app/pages/settings/organization/organization.component.html index d14c0af..a4de5e3 100644 --- a/src/app/pages/settings/organization/organization.component.html +++ b/src/app/pages/settings/organization/organization.component.html @@ -10,7 +10,14 @@
-
+ +
DEFAULT ORGANISATION SETTINGS @@ -35,7 +42,7 @@ UG Uganda
- +
diff --git a/src/app/pages/settings/settings.component.html b/src/app/pages/settings/settings.component.html index 1bfeb89..24fcdaa 100644 --- a/src/app/pages/settings/settings.component.html +++ b/src/app/pages/settings/settings.component.html @@ -10,114 +10,112 @@
+
-
+ SETTINGS -
+

Kobo Toolbox Credentials

-

Username: admin_reserve

-

Password: p@55w0rd

-
-
-
-

Account Status:

- Please contact support. -
-
-
-

Support

- Chat
- Help Center + Username: admin_reserve
+ Password: ********

Organization Settings

-

Update your organization settings

+ Update your organization settings
-
+ ACCOUNT MANAGEMENT -
+

Change Password

-

Change your account password

+ Change your account password

Two-step authentication

-

Secure your account with two step verification

+ Secure your account with two step verification
- +
-
-
-
-
-
- USERS - +
+
+ +
+ USERS + +
+ +
+ + Filter + + search + + + + NAME + {{user.name}} + + + + ACCOUNT TYPE + {{user.accountType}} + + + + CREATED + {{user.created}} + + + + STATUS + + {{user.status}} + {{user.status}} + + + + + OPTIONS + + + + + + + + + + + + + + + + + + +
-
- - Filter - - search - - - - NAME - {{user.name}} - - - - ACCOUNT TYPE - {{user.accountType}} - - - - CREATED - {{user.created}} - - - - STATUS - {{user.status}} - - - - - - - - - - - - - - - - - - - - - - - -
diff --git a/src/app/pages/settings/settings.component.ts b/src/app/pages/settings/settings.component.ts index 085d86f..c157da0 100644 --- a/src/app/pages/settings/settings.component.ts +++ b/src/app/pages/settings/settings.component.ts @@ -1,17 +1,16 @@ -import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core'; +import {Component, OnInit, ViewChild} from '@angular/core'; import {MatTableDataSource} from '@angular/material/table'; import {MatPaginator} from '@angular/material/paginator'; import {MatSort} from '@angular/material/sort'; +import {UserService} from '../../_services'; +import {first} from 'rxjs/operators'; @Component({ selector: 'app-settings', templateUrl: './settings.component.html', styleUrls: ['./settings.component.scss'] }) -export class SettingsComponent implements OnInit, AfterViewInit { - data = [ - { name: 'admin@acme.org', accountType: 'Admin', created: '17/11/2020', status: 'activated'} - ]; +export class SettingsComponent implements OnInit { date: string; dataSource: MatTableDataSource; displayedColumns = ['name', 'accountType', 'created', 'status', 'options']; @@ -19,20 +18,38 @@ export class SettingsComponent implements OnInit, AfterViewInit { @ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatSort) sort: MatSort; - constructor() { } - - ngOnInit(): void { - this.dataSource = new MatTableDataSource(this.data); - const d = new Date(); - this.date = `${d.getDate()}/${d.getMonth()}/${d.getFullYear()}`; + constructor( + private userService: UserService + ) { + this.userService.getStaff(); } - ngAfterViewInit(): void { - this.dataSource.paginator = this.paginator; - this.dataSource.sort = this.sort; + ngOnInit(): void { + this.userService.staffSubject.subscribe(staff => { + this.dataSource = new MatTableDataSource(staff); + this.dataSource.paginator = this.paginator; + this.dataSource.sort = this.sort; + }); + const d = new Date(); + this.date = `${d.getDate()}/${d.getMonth()}/${d.getFullYear()}`; } doFilter(value: string): void { this.dataSource.filter = value.trim().toLocaleLowerCase(); } + + activateStaff(id: string): void { + this.userService.activateStaff(id).pipe(first()).subscribe(res => console.log(res)); + this.userService.getStaff(); + } + + deactivateStaff(id: string): void { + this.userService.deactivateStaff(id).pipe(first()).subscribe(res => console.log(res)); + this.userService.getStaff(); + } + + changeStaffType(id: string, type: string): void { + this.userService.changeStaffType(id, type).pipe(first()).subscribe(res => console.log(res)); + this.userService.getStaff(); + } } diff --git a/src/app/pages/tokens/token-details/token-details.component.html b/src/app/pages/tokens/token-details/token-details.component.html index abe3ef6..8f95e9d 100644 --- a/src/app/pages/tokens/token-details/token-details.component.html +++ b/src/app/pages/tokens/token-details/token-details.component.html @@ -9,19 +9,43 @@
-
-
+
+ +
Token
-

Name: {{token.name}}

-

Symbol: {{token.symbol}}

-

Details: A community inclusive currency for trading among lower to middle income societies.

-

Supply: 100000000

-

Circulation: 57000000

+ Name: {{token.name}} +
+
+ Symbol: {{token.symbol}} +
+
+ Address: {{token.address}} +
+
+ Details: A community inclusive currency for trading among lower to middle income societies. +
+
+ Supply: {{token.supply | tokenRatio}} +

+
+

Reserve

+
+ Weight: {{token.reserveRatio}} +
+
+ Owner: {{token.owner}} +
diff --git a/src/app/pages/tokens/token-details/token-details.component.ts b/src/app/pages/tokens/token-details/token-details.component.ts index cb8b1e6..376a2ab 100644 --- a/src/app/pages/tokens/token-details/token-details.component.ts +++ b/src/app/pages/tokens/token-details/token-details.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit } from '@angular/core'; import {ActivatedRoute, Params} from '@angular/router'; import {TokenService} from '../../../_services'; +import {first} from 'rxjs/operators'; @Component({ selector: 'app-token-details', @@ -15,7 +16,9 @@ export class TokenDetailsComponent implements OnInit { private tokenService: TokenService ) { this.route.paramMap.subscribe((params: Params) => { - this.token = this.tokenService.getBySymbol(params.get('id')); + this.tokenService.getTokenBySymbol(params.get('id')).pipe(first()).subscribe(token => { + this.token = token; + }); }); } diff --git a/src/app/pages/tokens/tokens.component.html b/src/app/pages/tokens/tokens.component.html index 8d21584..04397b3 100644 --- a/src/app/pages/tokens/tokens.component.html +++ b/src/app/pages/tokens/tokens.component.html @@ -10,42 +10,51 @@
- - Filter - - search - - - - Name - {{token.name}} - + +
+ + Tokens + +
+ + Filter + + search + - - Symbol - {{token.symbol}} - + + + Name + {{token.name}} + - - - - - - - - - - + + Symbol + {{token.symbol}} + - - - + + Address + {{token.address}} + - + + Supply + {{token.supply | tokenRatio}} + + + + + + + +
+
diff --git a/src/app/pages/tokens/tokens.component.ts b/src/app/pages/tokens/tokens.component.ts index 2798fe7..07a9582 100644 --- a/src/app/pages/tokens/tokens.component.ts +++ b/src/app/pages/tokens/tokens.component.ts @@ -1,9 +1,8 @@ -import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core'; +import {Component, OnInit, ViewChild} from '@angular/core'; import {MatPaginator} from '@angular/material/paginator'; import {MatSort} from '@angular/material/sort'; import {TokenService} from '../../_services'; import {MatTableDataSource} from '@angular/material/table'; -import {SelectionModel} from '@angular/cdk/collections'; import {Router} from '@angular/router'; @Component({ @@ -11,39 +10,25 @@ import {Router} from '@angular/router'; templateUrl: './tokens.component.html', styleUrls: ['./tokens.component.scss'] }) -export class TokensComponent implements OnInit, AfterViewInit { +export class TokensComponent implements OnInit { dataSource: MatTableDataSource; - columnsToDisplay = ['name', 'symbol', 'select']; - initialSelection = []; - allowMultiSelect = true; - selection: SelectionModel; - + columnsToDisplay = ['name', 'symbol', 'address', 'supply']; @ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatSort) sort: MatSort; constructor( private tokenService: TokenService, private router: Router - ) { } + ) { + tokenService.getTokens(); + } ngOnInit(): void { - this.dataSource = new MatTableDataSource(this.tokenService.data); - this.selection = new SelectionModel(this.allowMultiSelect, this.initialSelection); - } - - ngAfterViewInit(): void { - this.dataSource.paginator = this.paginator; - this.dataSource.sort = this.sort; - } - - isAllSelected(): boolean { - const numSelected = this.selection.selected.length; - const numRows = this.dataSource.data.length; - return numSelected === numRows; - } - - masterToggle(): void { - this.isAllSelected() ? this.selection.clear() : this.dataSource.data.forEach(row => this.selection.select(row)); + this.tokenService.tokensSubject.subscribe(tokens => { + this.dataSource = new MatTableDataSource(tokens); + this.dataSource.paginator = this.paginator; + this.dataSource.sort = this.sort; + }); } doFilter(value: string): void { diff --git a/src/app/pages/tokens/tokens.module.ts b/src/app/pages/tokens/tokens.module.ts index 3d32c0b..456c4b5 100644 --- a/src/app/pages/tokens/tokens.module.ts +++ b/src/app/pages/tokens/tokens.module.ts @@ -8,7 +8,7 @@ import {SharedModule} from '../../shared/shared.module'; import {MatTableModule} from '@angular/material/table'; import {MatPaginatorModule} from '@angular/material/paginator'; import {MatSortModule} from '@angular/material/sort'; -import {MatPseudoCheckboxModule} from '@angular/material/core'; +import {MatPseudoCheckboxModule, MatRippleModule} from '@angular/material/core'; import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatInputModule} from '@angular/material/input'; import {MatFormFieldModule} from '@angular/material/form-field'; @@ -21,22 +21,23 @@ import {MatCardModule} from '@angular/material/card'; @NgModule({ declarations: [TokensComponent, TokenDetailsComponent], - imports: [ - CommonModule, - TokensRoutingModule, - SharedModule, - MatTableModule, - MatPaginatorModule, - MatSortModule, - MatPseudoCheckboxModule, - MatCheckboxModule, - MatInputModule, - MatFormFieldModule, - MatIconModule, - MatSidenavModule, - MatButtonModule, - MatToolbarModule, - MatCardModule - ] + imports: [ + CommonModule, + TokensRoutingModule, + SharedModule, + MatTableModule, + MatPaginatorModule, + MatSortModule, + MatPseudoCheckboxModule, + MatCheckboxModule, + MatInputModule, + MatFormFieldModule, + MatIconModule, + MatSidenavModule, + MatButtonModule, + MatToolbarModule, + MatCardModule, + MatRippleModule + ] }) export class TokensModule { } diff --git a/src/app/pages/transactions/transaction-details/transaction-details.component.html b/src/app/pages/transactions/transaction-details/transaction-details.component.html index dbc24ac..041d01b 100644 --- a/src/app/pages/transactions/transaction-details/transaction-details.component.html +++ b/src/app/pages/transactions/transaction-details/transaction-details.component.html @@ -1,37 +1,40 @@ -
+
-
- TRANSACTION DETAILS -
-
+ +
+ TRANSACTION DETAILS + +
+ +

Exchange:

  • -

    Sender: {{transaction.sender?.vcard.fn}}

    -

    Sender Address: {{transaction.from}}

    - + Sender: {{transaction.sender?.vcard.fn}}

    + Sender Address: {{transaction.from}}

    +
  • -

    Recipient: {{transaction.recipient?.vcard.fn}}

    -

    Recipient Address: {{transaction.to}}

    - + Recipient: {{transaction.recipient?.vcard.fn}}

    + Recipient Address: {{transaction.to}}

    +
  • -

    Amount: {{transaction.token.symbol + ' ' + transaction.value}}

    + Amount: {{transaction.token.symbol + ' ' + transaction.value}}

Token:

  • -

    Address: {{transaction.token.address}}

    + Address: {{transaction.token.address}}
  • -

    Name: {{transaction.token.name}}

    + Name: {{transaction.token.name}}
  • -

    Symbol: {{transaction.token.symbol}}

    + Symbol: {{transaction.token.symbol}}
@@ -39,29 +42,84 @@

Transaction:

  • -

    Block: {{transaction.tx.block}}

    + Block: {{transaction.tx.block}}
  • -

    Index: {{transaction.tx.txIndex}}

    + Index: {{transaction.tx.txIndex}}
  • -

    Hash: {{transaction.tx.txHash}}

    + Hash: {{transaction.tx.txHash}}
  • -

    Success: {{transaction.tx.success}}

    + Success: {{transaction.tx.success}}
  • -

    Timestamp: {{transaction.tx.timestamp | date}}

    + Timestamp: {{transaction.tx.timestamp | date}}
    • -
+
- +
- +
+
+

Exchange:

+
    +
  • + Trader: {{transaction.sender?.vcard.fn}} +
    • +
  • + Trader Address: {{transaction.trader}} +
    • +
+ +

+
+
+

Source Token:

+
    +
  • + Address: {{transaction.sourceToken.address}} +
    • +
  • + Name: {{transaction.sourceToken.name}} +
    • +
  • + Symbol: {{transaction.sourceToken.symbol}} +
    • +
  • + Amount: {{transaction.sourceToken.symbol + ' ' + transaction.fromValue}} +
    • +
+
+
+

Destination Token:

+
    +
  • + Address: {{transaction.destinationToken.address}} +
    • +
  • + Name: {{transaction.destinationToken.name}} +
    • +
  • + Symbol: {{transaction.destinationToken.symbol}} +
    • +
  • + Amount: {{transaction.destinationToken.symbol + ' ' + transaction.toValue}} +
    • +
+
+
+ +
+
+ +
+
+
diff --git a/src/app/pages/transactions/transaction-details/transaction-details.component.ts b/src/app/pages/transactions/transaction-details/transaction-details.component.ts index e728f43..9afb6eb 100644 --- a/src/app/pages/transactions/transaction-details/transaction-details.component.ts +++ b/src/app/pages/transactions/transaction-details/transaction-details.component.ts @@ -1,4 +1,4 @@ -import {Component, Input, OnInit} from '@angular/core'; +import {Component, Input, OnInit, Output} from '@angular/core'; import {Transaction} from '../../../_models'; @Component({ @@ -7,7 +7,7 @@ import {Transaction} from '../../../_models'; styleUrls: ['./transaction-details.component.scss'] }) export class TransactionDetailsComponent implements OnInit { - @Input() transaction: Transaction; + @Input() transaction; constructor() { } diff --git a/src/app/pages/transactions/transactions.component.html b/src/app/pages/transactions/transactions.component.html index 4613d99..9466570 100644 --- a/src/app/pages/transactions/transactions.component.html +++ b/src/app/pages/transactions/transactions.component.html @@ -10,6 +10,12 @@
+
Transfers @@ -21,22 +27,20 @@
TRANSFER TYPE - - ALL TRANSFERS - PAYMENTS - EXCHANGE + + ALL TRANSFERS + PAYMENTS + CONVERSION DISBURSEMENTS + REWARDS RECLAMATION - -

{{transactionSelection.selected.length}} selected

- - + TRANSACTION STATUS -- SELECT -- @@ -54,24 +58,48 @@ + + + View + + + + + Sender - {{transaction.sender?.vcard.fn}} + {{transaction.sender?.vcard.fn}} + + + + Sender Location + Miyani Recipient - {{transaction.recipient?.vcard.fn}} + {{transaction.recipient?.vcard.fn}} + + + + Recipient Location + Kayaba Token - {{transaction.token.name}} + + {{transaction.token.name}} + {{transaction.destinationToken.name}} + Value - {{transaction.token.symbol + ' ' + transaction.value}} + + {{transaction.value | tokenRatio}} + {{transaction.toValue | tokenRatio}} + @@ -79,12 +107,10 @@ {{transaction.tx.timestamp | date}} - - View Transaction + + TYPE - + {{transaction.type}} @@ -104,88 +130,13 @@ - +
-
- - Conversions - -
- - - Filter - - search - - - - - Initial Token - {{conversion.sourceToken.name}} - - - - Initial Value - {{conversion.sourceToken.symbol + ' ' + conversion.fromValue}} - - - - Final Token - {{conversion.destinationToken.name}} - - - - Final Value - {{conversion.destinationToken.symbol + ' ' + conversion.toValue}} - - - - Trader - {{conversion.user?.vcard.fn}} - - - - Created - {{conversion.tx.timestamp | date}} - - - - View Conversion - - - - - - - - - - - - - - - - - - - - - -
-
diff --git a/src/app/pages/transactions/transactions.component.ts b/src/app/pages/transactions/transactions.component.ts index 4a21a29..ae75347 100644 --- a/src/app/pages/transactions/transactions.component.ts +++ b/src/app/pages/transactions/transactions.component.ts @@ -1,6 +1,5 @@ import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core'; import {BlockSyncService, TransactionService} from '../../_services'; -import {Conversion, Transaction} from '../../_models'; import {MatTableDataSource} from '@angular/material/table'; import {SelectionModel} from '@angular/cdk/collections'; import {MatPaginator} from '@angular/material/paginator'; @@ -12,16 +11,14 @@ import {MatSort} from '@angular/material/sort'; styleUrls: ['./transactions.component.scss'] }) export class TransactionsComponent implements OnInit, AfterViewInit { - transactionDataSource: MatTableDataSource; - conversionDataSource: MatTableDataSource; - transactionDisplayedColumns = ['sender', 'recipient', 'token', 'value', 'created', 'view', 'select']; - conversionDisplayedColumns = ['initialToken', 'initialValue', 'finalToken', 'finalValue', 'trader', 'created', 'view', 'select']; + transactionDataSource: MatTableDataSource; + transactionDisplayedColumns = ['view', 'sender', 'senderLocation', 'recipient', 'recipientLocation', 'token', 'value', 'created', 'type', 'select']; initialSelection = []; allowMultiSelect = true; transactionSelection: SelectionModel; - conversionSelection: SelectionModel; - transaction: Transaction; - conversion: Conversion; + transactions: any[]; + transaction: any; + transactionsType = 'all'; @ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatSort) sort: MatSort; @@ -31,38 +28,22 @@ export class TransactionsComponent implements OnInit, AfterViewInit { private blockSyncService: BlockSyncService ) { this.blockSyncService.blockSync(); - } + } ngOnInit(): void { this.transactionService.transactionsSubject.subscribe(transactions => { - this.transactionDataSource = new MatTableDataSource(transactions); + this.transactionDataSource = new MatTableDataSource(transactions); this.transactionDataSource.paginator = this.paginator; this.transactionDataSource.sort = this.sort; - }); - this.transactionService.conversionsSubject.subscribe(conversions => { - this.conversionDataSource = new MatTableDataSource(this.transactionService.conversions); - this.conversionDataSource.paginator = this.paginator; - this.conversionDataSource.sort = this.sort; + this.transactions = transactions; }); this.transactionSelection = new SelectionModel(this.allowMultiSelect, this.initialSelection); - this.conversionSelection = new SelectionModel(this.allowMultiSelect, this.initialSelection); } viewTransaction(transaction): void { this.transaction = transaction; } - viewConversion(conversion): void { - this.conversion = conversion; - } - - ngAfterViewInit(): void { - this.transactionDataSource.paginator = this.paginator; - this.transactionDataSource.sort = this.sort; - this.conversionDataSource.paginator = this.paginator; - this.conversionDataSource.sort = this.sort; - } - isAllSelected(selection, dataSource): boolean { const numSelected = selection.selected.length; const numRows = dataSource.data.length; @@ -76,4 +57,20 @@ export class TransactionsComponent implements OnInit, AfterViewInit { doFilter(value: string, dataSource): void { dataSource.filter = value.trim().toLocaleLowerCase(); } + + filterTransactions(): void { + if (this.transactionsType === 'all') { + this.transactionService.transactionsSubject.subscribe(transactions => { + this.transactionDataSource.data = transactions; + this.transactions = transactions; + }); + } else { + this.transactionDataSource.data = this.transactions.filter(transaction => transaction.type === this.transactionsType); + } + } + + ngAfterViewInit(): void { + this.transactionDataSource.paginator = this.paginator; + this.transactionDataSource.sort = this.sort; + } } diff --git a/src/app/pages/transactions/transactions.module.ts b/src/app/pages/transactions/transactions.module.ts index b6f209d..be6932d 100644 --- a/src/app/pages/transactions/transactions.module.ts +++ b/src/app/pages/transactions/transactions.module.ts @@ -6,7 +6,6 @@ import { TransactionsComponent } from './transactions.component'; import { TransactionDetailsComponent } from './transaction-details/transaction-details.component'; import {DataTablesModule} from 'angular-datatables'; import {SharedModule} from '../../shared/shared.module'; -import { ConversionDetailsComponent } from './conversion-details/conversion-details.component'; import {MatTableModule} from '@angular/material/table'; import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatPaginatorModule} from '@angular/material/paginator'; @@ -20,7 +19,7 @@ import {MatCardModule} from '@angular/material/card'; @NgModule({ - declarations: [TransactionsComponent, TransactionDetailsComponent, ConversionDetailsComponent], + declarations: [TransactionsComponent, TransactionDetailsComponent], exports: [ TransactionDetailsComponent ], diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index a678b3c..56cf927 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -7,6 +7,7 @@ import { MenuSelectionDirective } from './_directives/menu-selection.directive'; import { MenuToggleDirective } from './_directives/menu-toggle.directive'; import {RouterModule} from '@angular/router'; import {MatIconModule} from '@angular/material/icon'; +import {TokenRatioPipe} from './_pipes/token-ratio.pipe'; @@ -16,13 +17,15 @@ import {MatIconModule} from '@angular/material/icon'; FooterComponent, SidebarComponent, MenuSelectionDirective, - MenuToggleDirective + MenuToggleDirective, + TokenRatioPipe ], exports: [ TopbarComponent, FooterComponent, SidebarComponent, - MenuSelectionDirective + MenuSelectionDirective, + TokenRatioPipe ], imports: [ CommonModule, diff --git a/src/index.html b/src/index.html index e0141f9..e389285 100644 --- a/src/index.html +++ b/src/index.html @@ -2,7 +2,7 @@ - CIC-Staff-Client + CICADA diff --git a/src/styles.scss b/src/styles.scss index bdd786e..fb5414e 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -211,6 +211,50 @@ a[data-toggle="collapse"] { overflow: initial; } +button { + height: 2.5rem; +} + +.badge-pill { + width: 5rem; +} + +.mat-column { + word-wrap: break-word !important; + white-space: unset !important; + overflow-wrap: break-word; + word-break: break-word; + -ms-hyphens: auto; + -moz-hyphens: auto; + -webkit-hyphens: auto; + hyphens: auto; +} + +.mat-column-address { + flex: 0 0 30% !important; + width: 30% !important; +} + +.mat-column-supply { + flex: 0 0 25% !important; + width: 25% !important; +} + +.mat-column-select { + flex: 0 0 10% !important; + width: 10% !important; +} + +.mat-column-view { + flex: 0 0 5% !important; + width: 5% !important; +} + +.center-body { + float: none; + margin: 0 auto 10px; +} + @media (max-width: 768px) { #sidebar { margin-left: 0;