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

Modify components to use behaviour subject.

Browse Source
This commit is contained in:
Spencer Ofwiti 2020-12-05 09:30:30 +03:00
parent 142654ed6d
commit f7f4fe77f6
40 changed files with 1215 additions and 669 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
angular.json
View File

@ -38,8 +38,7 @@
"node_modules/datatables.net/js/jquery.dataTables.js", "node_modules/datatables.net/js/jquery.dataTables.js",
"node_modules/bootstrap/dist/js/bootstrap.js", "node_modules/bootstrap/dist/js/bootstrap.js",
"node_modules/block-syncer/dist/worker_ondemand.js" "node_modules/block-syncer/dist/worker_ondemand.js"
], ]
"webWorkerTsConfig": "tsconfig.worker.json"
}, },
"configurations": { "configurations": {
"production": { "production": {

34
package-lock.json generated
View File

@ -1647,19 +1647,19 @@
} }
}, },
"@ethereumjs/common": { "@ethereumjs/common": {
"version": "2.0.0-beta.2", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/@ethereumjs/common/-/common-2.0.0-beta.2.tgz", "resolved": "https://registry.npmjs.org/@ethereumjs/common/-/common-2.0.0.tgz",
"integrity": "sha512-DdzcV2iTKsfhFihR2boXEdTDqufpbHonPqp7fORsKTv9FRo5dkM8V9SF03RphSsZzYWg+KXd+eX1hYcpUjherw==", "integrity": "sha512-yL0zA7Xwgz8IFHKW0VoXGjdZDVxUJg8BQ/muMHvYPW7zHJNNC80gQmvLH+MpvIg1TCXZkFXxrpYRAyCElSm+aw==",
"requires": { "requires": {
"crc-32": "^1.2.0" "crc-32": "^1.2.0"
} }
}, },
"@ethereumjs/tx": { "@ethereumjs/tx": {
"version": "3.0.0-beta.2", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/@ethereumjs/tx/-/tx-3.0.0-beta.2.tgz", "resolved": "https://registry.npmjs.org/@ethereumjs/tx/-/tx-3.0.0.tgz",
"integrity": "sha512-NZLIVXp/OcwkhP4Z4AC742kjInMPwvixKexlQFjAWoughp+/5JZESRb171mvLQAKI4aqY9bYicadtTwCdsMuZQ==", "integrity": "sha512-H9tfy6qgYxPXvt1TSObfVmVjlF43OoQqoPQ3PJsG2JiuqaMHj5ettV1pGFEC3FamENDBkl6vD6niQEvIlXv/VQ==",
"requires": { "requires": {
"@ethereumjs/common": "2.0.0-beta.2", "@ethereumjs/common": "^2.0.0",
"ethereumjs-util": "^7.0.7" "ethereumjs-util": "^7.0.7"
}, },
"dependencies": { "dependencies": {
@ -4376,16 +4376,16 @@
"integrity": "sha512-hsRUr4FFrvhhRH12wOdfs38Gy7k2FFzB9qgN9v3aLykRq0dRcdcpz5C9FxdS2NuhOrI/628b/KSTJ3rwHysYSg==" "integrity": "sha512-hsRUr4FFrvhhRH12wOdfs38Gy7k2FFzB9qgN9v3aLykRq0dRcdcpz5C9FxdS2NuhOrI/628b/KSTJ3rwHysYSg=="
}, },
"yargs": { "yargs": {
"version": "16.1.0", "version": "16.1.1",
"resolved": "https://registry.npmjs.org/yargs/-/yargs-16.1.0.tgz", "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.1.1.tgz",
"integrity": "sha512-upWFJOmDdHN0syLuESuvXDmrRcWd1QafJolHskzaw79uZa7/x53gxQKiR07W59GWY1tFhhU/Th9DrtSfpS782g==", "integrity": "sha512-hAD1RcFP/wfgfxgMVswPE+z3tlPFtxG8/yWUrG2i17sTWGCGqWnxKcLTF4cUKDUK8fzokwsmO9H0TDkRbMHy8w==",
"requires": { "requires": {
"cliui": "^7.0.2", "cliui": "^7.0.2",
"escalade": "^3.1.1", "escalade": "^3.1.1",
"get-caller-file": "^2.0.5", "get-caller-file": "^2.0.5",
"require-directory": "^2.1.1", "require-directory": "^2.1.1",
"string-width": "^4.2.0", "string-width": "^4.2.0",
"y18n": "^5.0.2", "y18n": "^5.0.5",
"yargs-parser": "^20.2.2" "yargs-parser": "^20.2.2"
} }
}, },
@ -9877,9 +9877,9 @@
}, },
"dependencies": { "dependencies": {
"debug": { "debug": {
"version": "3.2.6", "version": "3.2.7",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
"integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==", "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
"requires": { "requires": {
"ms": "^2.1.1" "ms": "^2.1.1"
} }
@ -11111,9 +11111,9 @@
"integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=" "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
}, },
"pg": { "pg": {
"version": "8.5.0", "version": "8.5.1",
"resolved": "https://registry.npmjs.org/pg/-/pg-8.5.0.tgz", "resolved": "https://registry.npmjs.org/pg/-/pg-8.5.1.tgz",
"integrity": "sha512-h+KHEwce67pAQilZhMCpCx1RC7rR1US7mdjwvKzHRaRxKQxbbFtv5UlwjzqILQ1dwhK+RVGqOVcahE/2KOcaeA==", "integrity": "sha512-9wm3yX9lCfjvA98ybCyw2pADUivyNWT/yIP4ZcDVpMN0og70BUWYEGXPCTAQdGTAqnytfRADb7NERrY1qxhIqw==",
"requires": { "requires": {
"buffer-writer": "2.0.0", "buffer-writer": "2.0.0",
"packet-reader": "1.0.0", "packet-reader": "1.0.0",

2
package.json
View File

@ -27,7 +27,7 @@
"bootstrap": "^4.5.3", "bootstrap": "^4.5.3",
"chart.js": "^2.9.4", "chart.js": "^2.9.4",
"cic-client": "^0.0.3", "cic-client": "^0.0.3",
"cic-client-meta": "^0.0.5", "cic-client-meta": "0.0.5",
"datatables.net": "^1.10.22", "datatables.net": "^1.10.22",
"datatables.net-dt": "^1.10.22", "datatables.net-dt": "^1.10.22",
"jquery": "^3.5.1", "jquery": "^3.5.1",

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

@ -1,5 +1,6 @@
import {Component, HostListener, OnInit} from '@angular/core'; import {Component, HostListener, OnInit} from '@angular/core';
import {BlockSyncService, TransactionService} from './_services'; import {BlockSyncService, TransactionService} from './_services';
import {User} from 'cic-client-meta';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
@ -49,6 +50,6 @@ export class AppComponent implements OnInit {
@HostListener('window:cic_convert', ['$event']) @HostListener('window:cic_convert', ['$event'])
cicConvert(event: CustomEvent): void { cicConvert(event: CustomEvent): void {
const conversion = event.detail.tx; const conversion = event.detail.tx;
this.transactionService.setConversion(conversion); this.transactionService.setConversion(conversion, 100);
} }
} }

5
src/app/app.module.ts
View File

@ -8,6 +8,7 @@ import {SharedModule} from './shared/shared.module';
import {HttpClientModule} from '@angular/common/http'; import {HttpClientModule} from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatTableModule} from '@angular/material/table'; import {MatTableModule} from '@angular/material/table';
import {MockBackendProvider} from './_helpers';
@NgModule({ @NgModule({
declarations: [ declarations: [
@ -22,7 +23,9 @@ import {MatTableModule} from '@angular/material/table';
BrowserAnimationsModule, BrowserAnimationsModule,
MatTableModule MatTableModule
], ],
providers: [], providers: [
MockBackendProvider
],
bootstrap: [AppComponent] bootstrap: [AppComponent]
}) })
export class AppModule { } export class AppModule { }

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

@ -9,25 +9,42 @@
<div id="content"> <div id="content">
<app-topbar></app-topbar> <app-topbar></app-topbar>
<!-- Start Content--> <!-- Start Content-->
<div class="container-fluid" appMenuSelection> <div class="container-fluid" appMenuSelection>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a routerLink="/home">Home</a></li>
<li class="breadcrumb-item"><a routerLink="/accounts">Accounts</a></li>
<li class="breadcrumb-item active" aria-current="page">{{account?.name}}</li>
</ol>
</nav>
<div class="card mb-3"> <div class="card mb-3">
<div class="row card-body"> <div class="row card-body">
<h3> <h3>
<mat-icon matPrefix>portrait</mat-icon>
<strong> {{account?.name}} </strong> <strong> {{account?.name}} </strong>
</h3> </h3>
<p class="ml-auto">Balance: {{account?.balance}} RCU</p> <span class="ml-auto"><strong>Balance:</strong> {{account?.balance}} RCU</span>
<p class="ml-2">Created: {{account?.created}}</p> <span class="ml-2"><strong>Created:</strong> {{account?.created}}</span>
<p class="ml-2">Address: {{account?.address}}</p> <span class="ml-2"><strong>Address:</strong> {{account?.address}}</span>
</div> </div>
</div> </div>
<app-disbursement *ngIf="isDisbursing"></app-disbursement> <app-disbursement *ngIf="isDisbursing" (cancelDisbursmentEvent)="addTransfer()"></app-disbursement>
<div class="card mt-3 mb-3"> <div *ngIf="!account" class="text-center">
<div class="spinner-grow text-primary m-1" role="status" style="width: 3rem; height: 3rem;">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-primary m-1" role="status" style="width: 3rem; height: 3rem;">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-primary m-1" role="status" style="width: 3rem; height: 3rem;">
<span class="sr-only">Loading...</span>
</div>
</div>
<div *ngIf="account" class="card mt-3 mb-3">
<mat-card-title class="card-header"> <mat-card-title class="card-header">
<div class="row"> <div class="row">
DETAILS DETAILS
<button mat-raised-button type="button" class="btn btn-outline-secondary ml-auto" (click)="addTransfer()"> NEW TRANSFER </button> <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary ml-auto" (click)="addTransfer()"> NEW TRANSFER </button>
<button mat-raised-button type="button" class="btn btn-outline-secondary ml-2"> SAVE </button> <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary ml-2" (click)="saveInfo()"> SAVE </button>
</div> </div>
</mat-card-title> </mat-card-title>
<div class="card-body"> <div class="card-body">
@ -37,26 +54,8 @@
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">
<mat-label> STATUS </mat-label> <mat-label> STATUS </mat-label>
<mat-select id="status" [(value)]="account.status"> <mat-select id="status" [(value)]="account.status">
<mat-option value="false">Unapproved</mat-option> <mat-option value="unapproved">Unapproved</mat-option>
<mat-option value="true">Approved</mat-option> <mat-option value="approved">Approved</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="col-md-6 col-lg-4">
<mat-form-field appearance="outline">
<mat-label class="mr-3">Payment Cycle Start Date : </mat-label>
<input matInput type="text" id="startDate" placeholder="{{date}}" value="{{date}}">
</mat-form-field>
</div>
<div class="col-md-6 col-lg-4">
<mat-form-field appearance="outline">
<mat-label> PAYMENT CYCLE </mat-label>
<mat-select id="paymentCycle">
<mat-option value="weekly">Weekly</mat-option>
<mat-option value="daily">Daily</mat-option>
<mat-option value="monthly">Monthly</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</div> </div>
@ -88,6 +87,17 @@
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-md-6 col-lg-4">
<mat-form-field appearance="outline">
<mat-label> USER TOKEN: </mat-label>
<mat-select id="token" [(value)]="account.token">
<mat-option value="RSV"> RESERVE </mat-option>
<mat-option value="ERN"> ERNIE </mat-option>
<mat-option value="BRT"> BERT </mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="col-md-6 col-lg-4"> <div class="col-md-6 col-lg-4">
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">
<mat-label>Failed Pin Attempts: </mat-label> <mat-label>Failed Pin Attempts: </mat-label>
@ -116,7 +126,7 @@
<div class="col-md-6 col-lg-4"> <div class="col-md-6 col-lg-4">
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">
<mat-label> BUSINESS CATEGORY: </mat-label> <mat-label> BUSINESS CATEGORY: </mat-label>
<mat-select id="businessCategory"> <mat-select id="businessCategory" [(value)]="account.category">
<mat-option value="food/water">Food/Water</mat-option> <mat-option value="food/water">Food/Water</mat-option>
<mat-option value="fuel/energy">Fuel/Energy</mat-option> <mat-option value="fuel/energy">Fuel/Energy</mat-option>
<mat-option value="education">Education</mat-option> <mat-option value="education">Education</mat-option>
@ -126,26 +136,58 @@
<mat-option value="transport">Transport</mat-option> <mat-option value="transport">Transport</mat-option>
<mat-option value="farming/labour">Farming/Labour</mat-option> <mat-option value="farming/labour">Farming/Labour</mat-option>
<mat-option value="savings">Savings Group</mat-option> <mat-option value="savings">Savings Group</mat-option>
<mat-option value="other">Other</mat-option> <mat-option value="other">Savings Group</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-md-6 col-lg-4"> <div class="col-md-6 col-lg-4">
<button mat-raised-button type="button" class="btn btn btn-outline-primary mb-3"> Add User KYC </button> <mat-form-field appearance="outline">
<mat-label>User Location: </mat-label>
<input matInput type="text" id="userLocation" placeholder="{{account?.userLocation}}" value="{{account?.userLocation}}">
</mat-form-field>
</div> </div>
<div class="col-md-6 col-lg-4"> <div class="col-md-6 col-lg-4">
<button mat-raised-button type="button" class="btn btn btn-outline-success mb-3"> Reset Pin </button> <mat-form-field appearance="outline">
<mat-label> LOCATION: </mat-label>
<mat-select id="location" [(value)]="account.location">
<div *ngFor="let county of locations">
<div *ngFor="let district of county.districts">
<mat-optgroup *ngFor="let location of district.locations" [label]="county.name + ' / ' + district.name + ' / ' + location.name">
<mat-option *ngFor="let village of location.villages" [value]="village">
{{village}}
</mat-option>
</mat-optgroup>
</div>
</div>
</mat-select>
</mat-form-field>
</div> </div>
<div class="col-md-6 col-lg-4"> <div class="col-md-6 col-lg-4">
<button mat-raised-button type="button" class="btn btn-outline-danger"> Delete User </button> <mat-form-field appearance="outline">
<mat-label>Referred By: </mat-label>
<input matInput type="text" id="referredBy" placeholder="{{account?.referrer}}" value="{{account?.referrer}}" readonly>
</mat-form-field>
</div>
<div class="col-md-6 col-lg-4">
<button mat-raised-button color="primary" type="button" class="btn btn btn-outline-primary mb-3"> Add User KYC </button>
</div>
<div *ngIf="account.failedPinAttempts != 0" class="col-md-6 col-lg-4">
<button mat-raised-button color="primary" type="button" class="btn btn btn-outline-success mb-3"> Reset Pin </button>
</div>
<div class="col-md-6 col-lg-4">
<button mat-raised-button color="warn" type="button" class="btn btn-outline-danger"> Delete User </button>
</div> </div>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
<div class="card mb-3"> <div class="card mb-3">
<mat-card-title class="card-header"> <mat-card-title class="card-header">
USER USER
@ -163,96 +205,242 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr routerLink='/users/{{account.address}}'> <tr>
<td>{{account.name}}</td> <td>{{account?.name}}</td>
<td>{{account.type}}</td> <td>{{account?.type}}</td>
<td>{{account.created}}</td> <td>{{account?.created}}</td>
<td><span class="badge badge-primary badge-pill">{{account.status}}</span></td> <td>
<span *ngIf="account?.status === 'approved'" class="badge badge-success badge-pill"> {{account?.status}} </span>
<span *ngIf="account?.status === 'unapproved'" class="badge badge-danger badge-pill"> {{account?.status}} </span>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
</div> </div>
<app-transaction-details [transaction]="transaction"></app-transaction-details>
<div class="card">
<div class="card-header">
<div class="row">
<mat-form-field appearance="outline">
<mat-label> TRANSACTION TYPE </mat-label>
<mat-select id="transferSelect">
<mat-option value="all" selected>ALL TRANSFERS</mat-option>
<mat-option value="payments">PAYMENTS</mat-option>
<mat-option value="exchange">EXCHANGE</mat-option>
<mat-option value="disbursement">DISBURSEMENT</mat-option>
<mat-option value="reclamation">RECLAMATION</mat-option>>
</mat-select>
</mat-form-field>
<p *ngIf="selection.selected.length > 0" class="ml-auto mr-3"><strong> {{selection.selected.length}} selected </strong></p>
</div>
</div>
<div class="card">
<mat-card-title class="card-header">
History
</mat-card-title>
<div class="card-body"> <div class="card-body">
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">
<mat-label> Filter </mat-label> <mat-label> Filter </mat-label>
<input matInput type="text" (keyup)="doFilter($event.target.value)" placeholder="Filter"> <input matInput type="text" (keyup)="doHistoryFilter($event.target.value)" placeholder="Filter">
<mat-icon matSuffix>search</mat-icon> <mat-icon matSuffix>search</mat-icon>
</mat-form-field> </mat-form-field>
<mat-table class="mat-elevation-z10" [dataSource]="dataSource" matSort matSortActive="sender" <mat-table class="mat-elevation-z10" [dataSource]="historyDataSource" matSort #HistoryTableSort="matSort"
matSortDirection="asc" matSortDisableClear> matSortActive="sender" matSortDirection="asc" matSortDisableClear>
<ng-container matColumnDef="sender">
<mat-header-cell *matHeaderCellDef mat-sort-header> Sender </mat-header-cell> <ng-container matColumnDef="user">
<mat-cell *matCellDef="let transaction"> {{transaction.sender?.vcard.fn}} </mat-cell> <mat-header-cell *matHeaderCellDef mat-sort-header> User </mat-header-cell>
<mat-cell *matCellDef="let history"> {{history.userName}} </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="recipient"> <ng-container matColumnDef="action">
<mat-header-cell *matHeaderCellDef mat-sort-header> Recipient </mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header> Action </mat-header-cell>
<mat-cell *matCellDef="let transaction"> {{transaction.recipient?.vcard.fn}} </mat-cell> <mat-cell *matCellDef="let history"> {{history.action}} </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="token"> <ng-container matColumnDef="staff">
<mat-header-cell *matHeaderCellDef mat-sort-header> Token </mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header> Staff </mat-header-cell>
<mat-cell *matCellDef="let transaction"> {{transaction.token.name}} </mat-cell> <mat-cell *matCellDef="let history"> {{history.staff}} </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="value"> <ng-container matColumnDef="timestamp">
<mat-header-cell *matHeaderCellDef mat-sort-header> Value </mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header> Timestamp </mat-header-cell>
<mat-cell *matCellDef="let transaction"> {{transaction.token.symbol + ' ' + transaction.value}} </mat-cell> <mat-cell *matCellDef="let history"> {{history.timestamp | date}} </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="view"> <mat-header-row *matHeaderRowDef="historyDisplayedColumns"></mat-header-row>
<mat-header-cell *matHeaderCellDef> View Transaction </mat-header-cell> <mat-row *matRowDef="let history; columns: historyDisplayedColumns" matRipple></mat-row>
<mat-cell *matCellDef="let transaction">
<button mat-raised-button type="button" class="btn btn-outline-primary" (click)="viewTransaction(transaction)">
<i class="fa fa-eye"> VIEW </i>
</button>
</mat-cell>
</ng-container>
<ng-container matColumnDef="select">
<mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</mat-header-cell>
<mat-cell *matCellDef="let transaction">
<mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(transaction) : null"
[checked]="selection.isSelected(transaction)">
</mat-checkbox>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let transaction; columns: displayedColumns"></mat-row>
</mat-table> </mat-table>
<mat-paginator [pageSize]="10" [pageSizeOptions]="[10, 20, 50, 100]" showFirstLastButtons></mat-paginator> <mat-paginator #HistoryTablePaginator="matPaginator" [pageSize]="10"
[pageSizeOptions]="[10, 20, 50, 100]" showFirstLastButtons></mat-paginator>
</div> </div>
</div> </div>
<mat-tab-group dynamicHeight mat-align-tabs="start">
<mat-tab label="Transactions">
<app-transaction-details [transaction]="transaction"></app-transaction-details>
<div class="card mt-1">
<div class="card-header">
<div class="row">
<mat-form-field appearance="outline">
<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-select>
</mat-form-field>
</div>
</div>
<div class="card-body">
<mat-form-field appearance="outline">
<mat-label> Filter </mat-label>
<input matInput type="text" (keyup)="doTransactionFilter($event.target.value)" placeholder="Filter">
<mat-icon matSuffix>search</mat-icon>
</mat-form-field>
<mat-table class="mat-elevation-z10" [dataSource]="transactionsDataSource" matSort #TransactionTableSort="matSort"
matSortActive="created" matSortDirection="asc" matSortDisableClear>
<ng-container matColumnDef="view">
<mat-header-cell *matHeaderCellDef> View </mat-header-cell>
<mat-cell *matCellDef="let transaction" (click)="viewTransaction(transaction)">
<i class="fa fa-eye"></i>
</mat-cell>
</ng-container>
<ng-container matColumnDef="sender">
<mat-header-cell *matHeaderCellDef mat-sort-header> Sender </mat-header-cell>
<mat-cell *matCellDef="let transaction"> {{transaction.sender?.vcard.fn}} </mat-cell>
</ng-container>
<ng-container matColumnDef="senderLocation">
<mat-header-cell *matHeaderCellDef mat-sort-header> Sender Location </mat-header-cell>
<mat-cell *matCellDef="let transaction"> {{account.location}} </mat-cell>
</ng-container>
<ng-container matColumnDef="recipient">
<mat-header-cell *matHeaderCellDef mat-sort-header> Recipient </mat-header-cell>
<mat-cell *matCellDef="let transaction"> {{transaction.recipient?.vcard.fn}} </mat-cell>
</ng-container>
<ng-container matColumnDef="recipientLocation">
<mat-header-cell *matHeaderCellDef mat-sort-header> Recipient Location </mat-header-cell>
<mat-cell *matCellDef="let transaction"> {{account.location}} </mat-cell>
</ng-container>
<ng-container matColumnDef="token">
<mat-header-cell *matHeaderCellDef mat-sort-header> Token </mat-header-cell>
<mat-cell *matCellDef="let transaction">
<span *ngIf="transaction.type == 'transaction'">{{transaction.token.name}}</span>
<span *ngIf="transaction.type == 'conversion'">{{transaction.destinationToken.name}}</span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="value">
<mat-header-cell *matHeaderCellDef mat-sort-header> Value </mat-header-cell>
<mat-cell *matCellDef="let transaction">
<span *ngIf="transaction.type == 'transaction'">{{transaction.value | tokenRatio}}</span>
<span *ngIf="transaction.type == 'conversion'">{{transaction.toValue | tokenRatio}}</span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="created">
<mat-header-cell *matHeaderCellDef mat-sort-header> Created </mat-header-cell>
<mat-cell *matCellDef="let transaction"> {{transaction.tx.timestamp | date}} </mat-cell>
</ng-container>
<ng-container matColumnDef="type">
<mat-header-cell *matHeaderCellDef mat-sort-header> TYPE </mat-header-cell>
<mat-cell *matCellDef="let transaction">
<span class="badge badge-success badge-pill"> {{transaction.type}} </span>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="transactionsDisplayedColumns"></mat-header-row>
<mat-row *matRowDef="let transaction; columns: transactionsDisplayedColumns" matRipple (click)="viewTransaction(transaction)"></mat-row>
</mat-table>
<mat-paginator #TransactionTablePaginator="matPaginator" [pageSize]="10"
[pageSizeOptions]="[10, 20, 50, 100]" showFirstLastButtons></mat-paginator>
</div>
</div>
</mat-tab>
<mat-tab label="Users">
<div class="card mt-1">
<mat-card-title class="card-header">
Accounts
</mat-card-title>
<div class="card-body">
<div class="row card-header">
<mat-form-field appearance="outline">
<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-select>
</mat-form-field>
</div>
<mat-form-field appearance="outline">
<mat-label> Filter </mat-label>
<input matInput type="text" (keyup)="doUserFilter($event.target.value)" placeholder="Filter">
<mat-icon matSuffix>search</mat-icon>
</mat-form-field>
<mat-table class="mat-elevation-z10" [dataSource]="userDataSource" matSort #UserTableSort="matSort"
matSortActive="created" matSortDirection="desc" matSortDisableClear>
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header> NAME </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.name}} </mat-cell>
</ng-container>
<ng-container matColumnDef="phone">
<mat-header-cell *matHeaderCellDef mat-sort-header> PHONE NUMBER </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.phone}} </mat-cell>
</ng-container>
<ng-container matColumnDef="created">
<mat-header-cell *matHeaderCellDef mat-sort-header> CREATED </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.created}} </mat-cell>
</ng-container>
<ng-container matColumnDef="balance">
<mat-header-cell *matHeaderCellDef mat-sort-header> BALANCE </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.balance}} </mat-cell>
</ng-container>
<ng-container matColumnDef="type">
<mat-header-cell *matHeaderCellDef mat-sort-header> TYPE </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.type}} </mat-cell>
</ng-container>
<ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef mat-sort-header> STATUS </mat-header-cell>
<mat-cell *matCellDef="let user">
<span *ngIf="user.status === 'approved'" class="badge badge-success badge-pill"> {{user.status}} </span>
<span *ngIf="user.status === 'unapproved'" class="badge badge-danger badge-pill"> {{user.status}} </span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="location">
<mat-header-cell *matHeaderCellDef mat-sort-header> LOCATION </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.location}} </mat-cell>
</ng-container>
<ng-container matColumnDef="failedPinAttempts">
<mat-header-cell *matHeaderCellDef mat-sort-header> FAILED PIN ATTEMPTS </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.failedPinAttempts}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef=userDisplayedColumns></mat-header-row>
<mat-row *matRowDef="let account; columns: userDisplayedColumns" (click)="viewAccount(account)" matRipple></mat-row>
</mat-table>
<mat-paginator #UserTablePaginator="matPaginator" [pageSize]="10" [pageSizeOptions]="[10, 20, 50, 100]" showFirstLastButtons></mat-paginator>
</div>
</div>
</mat-tab>
</mat-tab-group>
</div> </div>
<app-footer appMenuSelection></app-footer> <app-footer appMenuSelection></app-footer>
</div> </div>

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

@ -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 {MatTableDataSource} from '@angular/material/table';
import {Transaction} from '../../../_models'; import {Transaction, User} from '../../../_models';
import {SelectionModel} from '@angular/cdk/collections'; import {SelectionModel} from '@angular/cdk/collections';
import {MatPaginator} from '@angular/material/paginator'; import {MatPaginator} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort'; import {MatSort} from '@angular/material/sort';
import {TransactionService, UserService} from '../../../_services'; import {LocationService, TransactionService, UserService} from '../../../_services';
import {ActivatedRoute, Params} from '@angular/router'; import {ActivatedRoute, Params, Router} from '@angular/router';
import {first} from 'rxjs/operators';
@Component({ @Component({
selector: 'app-account-details', selector: 'app-account-details',
templateUrl: './account-details.component.html', templateUrl: './account-details.component.html',
styleUrls: ['./account-details.component.scss'] styleUrls: ['./account-details.component.scss']
}) })
export class AccountDetailsComponent implements OnInit, AfterViewInit { export class AccountDetailsComponent implements OnInit {
dataSource: MatTableDataSource<Transaction>; transactionsDataSource: MatTableDataSource<any>;
displayedColumns = ['sender', 'recipient', 'token', 'value', 'view', 'select']; transactionsDisplayedColumns = ['view', 'sender', 'senderLocation', 'recipient', 'recipientLocation', 'token', 'value', 'created', 'type'];
@ViewChild('TransactionTablePaginator', {static: true}) transactionTablePaginator: MatPaginator;
@ViewChild('TransactionTableSort', {static: true}) transactionTableSort: MatSort;
userDataSource: MatTableDataSource<any>;
userDisplayedColumns = ['name', 'phone', 'created', 'balance', 'type', 'status', 'location', 'failedPinAttempts'];
@ViewChild('UserTablePaginator', {static: true}) userTablePaginator: MatPaginator;
@ViewChild('UserTableSort', {static: true}) userTableSort: MatSort;
historyDataSource: MatTableDataSource<any>;
historyDisplayedColumns = ['user', 'action', 'staff', 'timestamp'];
@ViewChild('HistoryTablePaginator', {static: true}) historyTablePaginator: MatPaginator;
@ViewChild('HistoryTableSort', {static: true}) historyTableSort: MatSort;
account: any;
accounts: any[] = [];
accountsType = 'all';
initialSelection = []; initialSelection = [];
allowMultiSelect = true; allowMultiSelect = true;
selection: SelectionModel<any>; selection: SelectionModel<any>;
date: string; date: string;
time: number; time: number;
isDisbursing = false; isDisbursing = false;
transaction: Transaction; locations: any;
account: any; transaction: any;
transactions: any[];
@ViewChild(MatPaginator) paginator: MatPaginator; transactionsType = 'all';
@ViewChild(MatSort) sort: MatSort;
constructor( constructor(
private locationService: LocationService,
private transactionService: TransactionService, private transactionService: TransactionService,
private userService: UserService, private userService: UserService,
private route: ActivatedRoute private route: ActivatedRoute,
private router: Router
) { ) {
this.route.paramMap.subscribe((params: Params) => { 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<any>(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 { ngOnInit(): void {
this.userService.accountsSubject.subscribe(accounts => {
this.userDataSource = new MatTableDataSource<any>(accounts);
this.userDataSource.paginator = this.userTablePaginator;
this.userDataSource.sort = this.userTableSort;
this.accounts = accounts;
});
this.transactionService.transactionsSubject.subscribe(transactions => { this.transactionService.transactionsSubject.subscribe(transactions => {
this.dataSource = new MatTableDataSource<Transaction>(transactions); this.transactionsDataSource = new MatTableDataSource<any>(transactions);
this.dataSource.paginator = this.paginator; this.transactionsDataSource.paginator = this.transactionTablePaginator;
this.dataSource.sort = this.sort; this.transactionsDataSource.sort = this.transactionTableSort;
this.transactions = transactions;
}); });
this.selection = new SelectionModel<any>(this.allowMultiSelect, this.initialSelection); this.selection = new SelectionModel<any>(this.allowMultiSelect, this.initialSelection);
@ -49,30 +87,60 @@ export class AccountDetailsComponent implements OnInit, AfterViewInit {
this.date = `${d.getDate()}/${d.getMonth()}/${d.getFullYear()}`; this.date = `${d.getDate()}/${d.getMonth()}/${d.getFullYear()}`;
} }
ngAfterViewInit(): void {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
addTransfer(): void { addTransfer(): void {
this.isDisbursing = !this.isDisbursing; this.isDisbursing = !this.isDisbursing;
} }
isAllSelected(): boolean { doTransactionFilter(value: string): void {
const numSelected = this.selection.selected.length; this.transactionsDataSource.filter = value.trim().toLocaleLowerCase();
const numRows = this.dataSource.data.length;
return numSelected === numRows;
} }
masterToggle(): void { doUserFilter(value: string): void {
this.isAllSelected() ? this.selection.clear() : this.dataSource.data.forEach(row => this.selection.select(row)); this.userDataSource.filter = value.trim().toLocaleLowerCase();
} }
doFilter(value: string): void { doHistoryFilter(value: string): void {
this.dataSource.filter = value.trim().toLocaleLowerCase(); this.historyDataSource.filter = value.trim().toLocaleLowerCase();
} }
viewTransaction(transaction): void { viewTransaction(transaction): void {
this.transaction = transaction; 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);
}
}
} }

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

@ -10,7 +10,12 @@
<app-topbar></app-topbar> <app-topbar></app-topbar>
<!-- Start Content--> <!-- Start Content-->
<div class="container-fluid" appMenuSelection> <div class="container-fluid" appMenuSelection>
<app-disbursement *ngIf="isDisbursing"></app-disbursement> <nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a routerLink="/home">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Accounts</li>
</ol>
</nav>
<div class="card"> <div class="card">
<mat-card-title class="card-header"> <mat-card-title class="card-header">
Accounts Accounts
@ -19,29 +24,24 @@
<div *ngIf="selection.selected.length <= 0" class="row card-header"> <div *ngIf="selection.selected.length <= 0" class="row card-header">
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">
<mat-label> ACCOUNT TYPE </mat-label> <mat-label> ACCOUNT TYPE </mat-label>
<mat-select id="typeSelect"> <mat-select id="typeSelect" [(value)]="accountsType" (selectionChange)="filterAccounts()">
<mat-option value="all" selected>ALL</mat-option> <mat-option value="all">ALL</mat-option>
<mat-option value="user">USER</mat-option> <mat-option value="user">USER</mat-option>
<mat-option value="cashier">CASHIER</mat-option> <mat-option value="cashier">CASHIER</mat-option>
<mat-option value="vendor">VENDOR</mat-option> <mat-option value="vendor">VENDOR</mat-option>
<mat-option value="tokenagent">TOKENAGENT</mat-option> <mat-option value="tokenAgent">TOKENAGENT</mat-option>
<mat-option value="groupaccount">GROUPACCOUNT</mat-option> <mat-option value="group">GROUPACCOUNT</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<button mat-raised-button routerLink="/accounts/create" type="button" class="btn btn-outline-secondary ml-auto"> <button mat-raised-button color="primary" routerLink="/accounts/create" type="button" class="btn btn-outline-primary ml-auto">
<mat-icon>add</mat-icon> <mat-icon>add</mat-icon>
ADD NEW </button> ADD NEW </button>
<button mat-raised-button routerLink="/accounts/export" type="button" class="btn btn-outline-secondary ml-2"> EXPORT </button> <button mat-raised-button color="primary" routerLink="/accounts/export" type="button" class="btn btn-outline-primary ml-2"> EXPORT </button>
</div> </div>
<div *ngIf="selection.selected.length > 0 && !isDisbursing" class="row card-header"> <div *ngIf="selection.selected.length" class="row card-header">
<p><strong> {{selection.selected.length}} selected </strong></p> <p><strong> {{selection.selected.length}} selected </strong></p>
<button mat-raised-button type="button" class="btn btn-outline-secondary ml-auto" (click)="addTransfer()"> NEW TRANSFER </button> <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary ml-auto" (click)="approveAccount()"> APPROVE </button>
<button mat-raised-button type="button" class="btn btn-outline-secondary ml-2"> APPROVE </button> <button mat-raised-button color="primary" routerLink="/accounts/export" type="button" class="btn btn-outline-primary ml-2"> EXPORT </button>
<button mat-raised-button routerLink="/accounts/export" type="button" class="btn btn-outline-secondary ml-2"> EXPORT </button>
</div>
<div *ngIf="selection.selected.length > 0 && isDisbursing" class="row card-header">
<p><strong> {{selection.selected.length}} selected </strong></p>
<button mat-raised-button routerLink="/accounts/export" type="button" class="btn btn-outline-secondary ml-auto"> EXPORT </button>
</div> </div>
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">
@ -72,9 +72,22 @@
<mat-cell *matCellDef="let user"> {{user.balance}} </mat-cell> <mat-cell *matCellDef="let user"> {{user.balance}} </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="type">
<mat-header-cell *matHeaderCellDef mat-sort-header> TYPE </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.type}} </mat-cell>
</ng-container>
<ng-container matColumnDef="status"> <ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef mat-sort-header> STATUS </mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header> STATUS </mat-header-cell>
<mat-cell *matCellDef="let user"><span class="badge badge-primary badge-pill"> {{user.status}} </span></mat-cell> <mat-cell *matCellDef="let user">
<span *ngIf="user.status === 'approved'" class="badge badge-success badge-pill"> {{user.status}} </span>
<span *ngIf="user.status === 'unapproved'" class="badge badge-danger badge-pill"> {{user.status}} </span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="location">
<mat-header-cell *matHeaderCellDef mat-sort-header> LOCATION </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.location}} </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="failedPinAttempts"> <ng-container matColumnDef="failedPinAttempts">
@ -98,7 +111,7 @@
</ng-container> </ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let account; columns: displayedColumns" (click)="viewAccount(account)"></mat-row> <mat-row *matRowDef="let account; columns: displayedColumns" (click)="viewAccount(account)" matRipple></mat-row>
</mat-table> </mat-table>
<mat-paginator [pageSize]="10" [pageSizeOptions]="[10, 20, 50, 100]" showFirstLastButtons></mat-paginator> <mat-paginator [pageSize]="10" [pageSizeOptions]="[10, 20, 50, 100]" showFirstLastButtons></mat-paginator>

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

@ -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 {MatTableDataSource} from '@angular/material/table';
import {SelectionModel} from '@angular/cdk/collections'; import {SelectionModel} from '@angular/cdk/collections';
import {MatPaginator} from '@angular/material/paginator'; import {MatPaginator} from '@angular/material/paginator';
@ -11,13 +11,14 @@ import {Router} from '@angular/router';
templateUrl: './accounts.component.html', templateUrl: './accounts.component.html',
styleUrls: ['./accounts.component.scss'] styleUrls: ['./accounts.component.scss']
}) })
export class AccountsComponent implements OnInit, AfterViewInit{ export class AccountsComponent implements OnInit {
dataSource: MatTableDataSource<any>; dataSource: MatTableDataSource<any>;
displayedColumns = ['name', 'phone', 'created', 'balance', 'status', 'failedPinAttempts', 'select']; accounts: any[] = [];
displayedColumns = ['name', 'phone', 'created', 'balance', 'type', 'status', 'location', 'failedPinAttempts', 'select'];
initialSelection = []; initialSelection = [];
allowMultiSelect = true; allowMultiSelect = true;
selection: SelectionModel<any>; selection: SelectionModel<any>;
isDisbursing = false; accountsType = 'all';
@ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort; @ViewChild(MatSort) sort: MatSort;
@ -25,22 +26,20 @@ export class AccountsComponent implements OnInit, AfterViewInit{
constructor( constructor(
private userService: UserService, private userService: UserService,
private router: Router private router: Router
) { } ) {
this.userService.getAccounts();
}
ngOnInit(): void { ngOnInit(): void {
this.dataSource = new MatTableDataSource<any>(this.userService.users); this.userService.accountsSubject.subscribe(accounts => {
this.dataSource = new MatTableDataSource<any>(accounts);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
this.accounts = accounts;
});
this.selection = new SelectionModel<any>(this.allowMultiSelect, this.initialSelection); this.selection = new SelectionModel<any>(this.allowMultiSelect, this.initialSelection);
} }
addTransfer(): void {
this.isDisbursing = true;
}
ngAfterViewInit(): void {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
isAllSelected(): boolean { isAllSelected(): boolean {
const numSelected = this.selection.selected.length; const numSelected = this.selection.selected.length;
const numRows = this.dataSource.data.length; const numRows = this.dataSource.data.length;
@ -56,6 +55,23 @@ export class AccountsComponent implements OnInit, AfterViewInit{
} }
viewAccount(account): void { 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);
}
} }
} }

40
src/app/pages/accounts/accounts.module.ts
View File

@ -20,26 +20,32 @@ import {MatCardModule} from '@angular/material/card';
import {MatIconModule} from '@angular/material/icon'; import {MatIconModule} from '@angular/material/icon';
import {MatSelectModule} from '@angular/material/select'; import {MatSelectModule} from '@angular/material/select';
import {TransactionsModule} from '../transactions/transactions.module'; 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({ @NgModule({
declarations: [AccountsComponent, AccountDetailsComponent, CreateAccountComponent, DisbursementComponent, ExportAccountsComponent], declarations: [AccountsComponent, AccountDetailsComponent, CreateAccountComponent, DisbursementComponent, ExportAccountsComponent],
imports: [ imports: [
CommonModule, CommonModule,
AccountsRoutingModule, AccountsRoutingModule,
SharedModule, SharedModule,
DataTablesModule, DataTablesModule,
MatTableModule, MatTableModule,
MatSortModule, MatSortModule,
MatCheckboxModule, MatCheckboxModule,
MatPaginatorModule, MatPaginatorModule,
MatInputModule, MatInputModule,
MatFormFieldModule, MatFormFieldModule,
MatButtonModule, MatButtonModule,
MatCardModule, MatCardModule,
MatIconModule, MatIconModule,
MatSelectModule, MatSelectModule,
TransactionsModule TransactionsModule,
] MatTabsModule,
MatRippleModule,
MatProgressSpinnerModule
]
}) })
export class AccountsModule { } export class AccountsModule { }

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

@ -10,6 +10,13 @@
<app-topbar></app-topbar> <app-topbar></app-topbar>
<!-- Start Content--> <!-- Start Content-->
<div class="container-fluid" appMenuSelection> <div class="container-fluid" appMenuSelection>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a routerLink="/home">Home</a></li>
<li class="breadcrumb-item"><a routerLink="/accounts">Accounts</a></li>
<li class="breadcrumb-item active" aria-current="page">Create Account</li>
</ol>
</nav>
<div class="card"> <div class="card">
<mat-card-title class="card-header text-center"> <mat-card-title class="card-header text-center">
CREATE A USER ACCOUNT CREATE A USER ACCOUNT
@ -23,8 +30,8 @@
<mat-option value="user">USER</mat-option> <mat-option value="user">USER</mat-option>
<mat-option value="cashier">CASHIER</mat-option> <mat-option value="cashier">CASHIER</mat-option>
<mat-option value="vendor">VENDOR</mat-option> <mat-option value="vendor">VENDOR</mat-option>
<mat-option value="tokenagent">TOKENAGENT</mat-option> <mat-option value="tokenAgent">TOKENAGENT</mat-option>
<mat-option value="groupaccount">GROUPACCOUNT</mat-option> <mat-option value="group">GROUPACCOUNT</mat-option>
</mat-select> </mat-select>
</mat-form-field><br> </mat-form-field><br>
</div> </div>
@ -107,7 +114,7 @@
</mat-form-field> </mat-form-field>
</div> </div>
<button mat-raised-button type="submit" class="btn btn-outline-primary ml-3">Submit</button> <button mat-raised-button color="primary" type="submit" class="btn btn-outline-primary ml-3" (click)="onSubmit()">Submit</button>
</form> </form>
</div> </div>
</div> </div>

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

@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import {Router} from '@angular/router';
@Component({ @Component({
selector: 'app-create-account', selector: 'app-create-account',
@ -7,9 +8,14 @@ import { Component, OnInit } from '@angular/core';
}) })
export class CreateAccountComponent implements OnInit { export class CreateAccountComponent implements OnInit {
constructor() { } constructor(
private router: Router
) { }
ngOnInit(): void { ngOnInit(): void {
} }
onSubmit(): void {
this.router.navigateByUrl(`/accounts`);
}
} }

22
src/app/pages/accounts/disbursement/disbursement.component.html
View File

@ -1,12 +1,15 @@
<div class="card"> <div class="card">
<div class="card-header"> <mat-card-title class="card-header">
NEW TRANSFER <div class="row">
</div> NEW TRANSFER
<button mat-raised-button color="warn" type="button" class="btn btn-outline-danger ml-auto mr-2" (click)="cancel()"> CANCEL </button>
</div>
</mat-card-title>
<div class="card-body"> <div class="card-body">
<form> <form>
<div class="row"> <div class="row form-inline">
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">
<mat-label> ACCOUNT TYPE </mat-label> <mat-label> TRANSACTION TYPE </mat-label>
<mat-select id="accountType"> <mat-select id="accountType">
<mat-option value="disbursement">DISBURSEMENT</mat-option> <mat-option value="disbursement">DISBURSEMENT</mat-option>
<mat-option value="transfer">TRANSFER</mat-option> <mat-option value="transfer">TRANSFER</mat-option>
@ -14,14 +17,13 @@
<mat-option value="reclamation">RECLAMATION</mat-option> <mat-option value="reclamation">RECLAMATION</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<button mat-raised-button type="button" class="btn btn-outline-secondary ml-auto mr-2"> CANCEL </button> <mat-form-field appearance="outline" class="ml-3">
</div>
<div class="row form-inline">
<mat-form-field appearance="outline">
<mat-label>Enter Amount: </mat-label> <mat-label>Enter Amount: </mat-label>
<input matInput type="text" id="amount" placeholder="Amount"> <input matInput type="text" id="amount" placeholder="Amount">
</mat-form-field> </mat-form-field>
<button mat-raised-button type="submit" class="btn btn-outline-primary ml-3" >CREATE TRANSFER </button> <button mat-raised-button color="primary" type="submit" class="btn btn-outline-primary ml-3" style="margin-bottom: 1.2rem;" (click)="createTransfer()">
CREATE TRANSFER
</button>
</div> </div>
</form> </form>
</div> </div>

8
src/app/pages/accounts/disbursement/disbursement.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core'; import {Component, OnInit, EventEmitter, Output} from '@angular/core';
@Component({ @Component({
selector: 'app-disbursement', selector: 'app-disbursement',
@ -6,10 +6,16 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./disbursement.component.scss'] styleUrls: ['./disbursement.component.scss']
}) })
export class DisbursementComponent implements OnInit { export class DisbursementComponent implements OnInit {
@Output() cancelDisbursmentEvent = new EventEmitter();
constructor() { } constructor() { }
ngOnInit(): void { ngOnInit(): void {
} }
createTransfer(): void {}
cancel(): void {
this.cancelDisbursmentEvent.emit();
}
} }

9
src/app/pages/accounts/export-accounts/export-accounts.component.html
View File

@ -10,6 +10,13 @@
<app-topbar></app-topbar> <app-topbar></app-topbar>
<!-- Start Content--> <!-- Start Content-->
<div class="container-fluid" appMenuSelection> <div class="container-fluid" appMenuSelection>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a routerLink="/home">Home</a></li>
<li class="breadcrumb-item"><a routerLink="/accounts">Accounts</a></li>
<li class="breadcrumb-item active" aria-current="page">Export Accounts</li>
</ol>
</nav>
<div class="card"> <div class="card">
<mat-card-title class="card-header"> <mat-card-title class="card-header">
EXPORT ACCOUNTS EXPORT ACCOUNTS
@ -32,7 +39,7 @@
<mat-checkbox id="transfers"></mat-checkbox> <mat-checkbox id="transfers"></mat-checkbox>
</div> </div>
</div> </div>
<button mat-raised-button type="submit" class="btn btn-outline-primary"> EXPORT </button> <button mat-raised-button color="primary" type="submit" class="btn btn-outline-primary"> EXPORT </button>
</form> </form>
</div> </div>
</div> </div>

52
src/app/pages/admin/admin.component.html
View File

@ -10,6 +10,12 @@
<app-topbar></app-topbar> <app-topbar></app-topbar>
<!-- Start Content--> <!-- Start Content-->
<div class="container-fluid" appMenuSelection> <div class="container-fluid" appMenuSelection>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a routerLink="/home">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Admin</li>
</ol>
</nav>
<div class="card"> <div class="card">
<mat-card-title class="card-header"> <mat-card-title class="card-header">
Actions Actions
@ -22,37 +28,65 @@
<mat-icon matSuffix>search</mat-icon> <mat-icon matSuffix>search</mat-icon>
</mat-form-field> </mat-form-field>
<mat-table class="mat-elevation-z10" [dataSource]="dataSource" matSort matSortActive="user" <mat-table class="mat-elevation-z10" [dataSource]="dataSource" multiTemplateDataRows>
matSortDirection="asc" matSortDisableClear>
<!-- Expand Column -->
<ng-container matColumnDef="expand">
<mat-header-cell *matHeaderCellDef> Expand </mat-header-cell>
<mat-cell *matCellDef="let element" (click)="expandCollapse(element)">
<span *ngIf="!element.isExpanded" class="signs"> + </span>
<span *ngIf="element.isExpanded" class="signs"> - </span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="user"> <ng-container matColumnDef="user">
<mat-header-cell *matHeaderCellDef mat-sort-header> NAME </mat-header-cell> <mat-header-cell *matHeaderCellDef> NAME </mat-header-cell>
<mat-cell *matCellDef="let action"> {{action.user}} </mat-cell> <mat-cell *matCellDef="let action"> {{action.user}} </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="role"> <ng-container matColumnDef="role">
<mat-header-cell *matHeaderCellDef mat-sort-header> ROLE </mat-header-cell> <mat-header-cell *matHeaderCellDef> ROLE </mat-header-cell>
<mat-cell *matCellDef="let action"> {{action.role}} </mat-cell> <mat-cell *matCellDef="let action"> {{action.role}} </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="action"> <ng-container matColumnDef="action">
<mat-header-cell *matHeaderCellDef mat-sort-header> ACTION </mat-header-cell> <mat-header-cell *matHeaderCellDef> ACTION </mat-header-cell>
<mat-cell *matCellDef="let action"> {{action.action}} </mat-cell> <mat-cell *matCellDef="let action"> {{action.action}} </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="status"> <ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef mat-sort-header> STATUS </mat-header-cell> <mat-header-cell *matHeaderCellDef> STATUS </mat-header-cell>
<mat-cell *matCellDef="let action"><span class="badge badge-primary badge-pill"> {{approvalStatus(action.approval)}} </span></mat-cell> <mat-cell *matCellDef="let action">
<span *ngIf="action.approval == true" class="badge badge-success badge-pill"> {{approvalStatus(action.approval)}} </span>
<span *ngIf="action.approval == false" class="badge badge-danger badge-pill"> {{approvalStatus(action.approval)}} </span>
</mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="approve"> <ng-container matColumnDef="approve">
<mat-header-cell *matHeaderCellDef> APPROVE </mat-header-cell> <mat-header-cell *matHeaderCellDef> APPROVE </mat-header-cell>
<mat-cell *matCellDef="let action"> <mat-cell *matCellDef="let action">
<button mat-raised-button *ngIf="!action.approval" class="btn btn-outline-primary" (click)="approveAction(action)"> Approve </button> <button mat-raised-button color="primary" *ngIf="!action.approval" class="btn btn-outline-success" (click)="approveAction(action)"> Approve </button>
<button mat-raised-button color="warn" *ngIf="action.approval" class="btn btn-outline-danger" (click)="revertAction(action)"> Revert </button>
</mat-cell>
</ng-container>
<!-- Expanded Content Column - The detail row is made up of this one column -->
<ng-container matColumnDef="expandedDetail">
<mat-cell *matCellDef="let action">
<div>
<span><strong>Staff Name:</strong> {{action.user}}</span><br>
<span><strong>Role:</strong> {{action.role}}</span><br>
<span><strong>Action Details:</strong> {{action.action}}</span><br>
<span><strong>Approval Status:</strong> {{action.approval}}</span><br>
</div>
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let action; columns: displayedColumns"></mat-row> <mat-row *matRowDef="let row; columns: displayedColumns;" matRipple class="element-row"
[class.expanded]="row.isExpanded"></mat-row>
<mat-row *matRowDef="let row; columns: ['expandedDetail'];"
[@detailExpand]="row.isExpanded == true ? 'expanded': 'collapsed'" style="overflow: hidden"></mat-row>
</mat-table> </mat-table>
<mat-paginator [pageSize]="10" [pageSizeOptions]="[10, 20, 50, 100]" showFirstLastButtons></mat-paginator> <mat-paginator [pageSize]="10" [pageSizeOptions]="[10, 20, 50, 100]" showFirstLastButtons></mat-paginator>

3
src/app/pages/admin/admin.component.scss
View File

@ -0,0 +1,3 @@
button {
width: 6rem;
}

45
src/app/pages/admin/admin.component.ts
View File

@ -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 {MatTableDataSource} from '@angular/material/table';
import {MatPaginator} from '@angular/material/paginator'; import {MatPaginator} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort'; import {MatSort} from '@angular/material/sort';
import {UserService} from '../../_services'; import {UserService} from '../../_services';
import {animate, state, style, transition, trigger} from '@angular/animations';
import {first} from 'rxjs/operators';
@Component({ @Component({
selector: 'app-admin', selector: 'app-admin',
templateUrl: './admin.component.html', 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<any>; dataSource: MatTableDataSource<any>;
displayedColumns = ['user', 'role', 'action', 'status', 'approve']; displayedColumns = ['expand', 'user', 'role', 'action', 'status', 'approve'];
action: any;
@ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort; @ViewChild(MatSort) sort: MatSort;
constructor( constructor(
private userService: UserService private userService: UserService
) { } ) {
this.userService.getActions();
ngOnInit(): void { this.userService.actionsSubject.subscribe(actions => {
this.dataSource = new MatTableDataSource<any>(this.userService.actions); this.dataSource = new MatTableDataSource<any>(actions);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
});
} }
ngAfterViewInit(): void { ngOnInit(): void {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
} }
doFilter(value: string): void { doFilter(value: string): void {
@ -38,6 +49,16 @@ export class AdminComponent implements OnInit, AfterViewInit {
} }
approveAction(action: any): void { 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;
} }
} }

28
src/app/pages/admin/admin.module.ts
View File

@ -12,22 +12,24 @@ import {MatTableModule} from '@angular/material/table';
import {MatSortModule} from '@angular/material/sort'; import {MatSortModule} from '@angular/material/sort';
import {MatPaginatorModule} from '@angular/material/paginator'; import {MatPaginatorModule} from '@angular/material/paginator';
import {MatButtonModule} from '@angular/material/button'; import {MatButtonModule} from '@angular/material/button';
import {MatRippleModule} from '@angular/material/core';
@NgModule({ @NgModule({
declarations: [AdminComponent], declarations: [AdminComponent],
imports: [ imports: [
CommonModule, CommonModule,
AdminRoutingModule, AdminRoutingModule,
SharedModule, SharedModule,
MatCardModule, MatCardModule,
MatFormFieldModule, MatFormFieldModule,
MatInputModule, MatInputModule,
MatIconModule, MatIconModule,
MatTableModule, MatTableModule,
MatSortModule, MatSortModule,
MatPaginatorModule, MatPaginatorModule,
MatButtonModule MatButtonModule,
] MatRippleModule
]
}) })
export class AdminModule { } export class AdminModule { }

1
src/app/pages/pages-routing.module.ts
View File

@ -6,7 +6,6 @@ import { PagesComponent } from './pages.component';
const routes: Routes = [ const routes: Routes = [
{ path: 'home', component: PagesComponent }, { path: 'home', component: PagesComponent },
{ path: 'tx', loadChildren: () => import('./transactions/transactions.module').then(m => m.TransactionsModule) }, { 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: 'settings', loadChildren: () => import('./settings/settings.module').then(m => m.SettingsModule) },
{ path: 'accounts', loadChildren: () => import('./accounts/accounts.module').then(m => m.AccountsModule) }, { path: 'accounts', loadChildren: () => import('./accounts/accounts.module').then(m => m.AccountsModule) },
{ path: 'tokens', loadChildren: () => import('./tokens/tokens.module').then(m => m.TokensModule) }, { path: 'tokens', loadChildren: () => import('./tokens/tokens.module').then(m => m.TokensModule) },

156
src/app/pages/pages.component.html
View File

@ -10,83 +10,99 @@
<app-topbar></app-topbar> <app-topbar></app-topbar>
<!-- Start Content--> <!-- Start Content-->
<div class="container-fluid" appMenuSelection> <div class="container-fluid" appMenuSelection>
<div class="card col-12"> <nav aria-label="breadcrumb">
<div class="card-header"> <ol class="breadcrumb">
<form class="form-inline"> <li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>
<div class="card">
<mat-card-title class="card-header">
CICADA DASHBOARD
</mat-card-title>
<div class="col-12">
<div class="card-body">
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">
<mat-label>Filter by user : </mat-label> <mat-label>Filter by location : </mat-label>
<mat-select class="ml-2" id="filterUser"> <mat-select class="ml-2" id="filterUser">
<mat-option value="default">SELECT ATTRIBUTE</mat-option> <div *ngFor="let county of locations">
<mat-option value="2">2</mat-option> <div *ngFor="let district of county.districts">
<mat-option value="3">3</mat-option> <mat-optgroup *ngFor="let location of district.locations" [label]="county.name + ' / ' + district.name + ' / ' + location.name">
<mat-option value="4">4</mat-option> <mat-option *ngFor="let village of location.villages" [value]="village">
<mat-option value="5">5</mat-option> {{village}}
</mat-option>
</mat-optgroup>
</div>
</div>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field appearance="outline" class="ml-auto">
<mat-label>Filter by Date</mat-label>
<input matInput type="text" id="filterDate" placeholder="Date">
</mat-form-field>
<button mat-raised-button type="submit" class="btn btn-outline-secondary ml-3"> FILTER </button>
</form>
</div>
<div class="row">
<div class="card col-md-8">
<div class="card-body">
<div style="display: block">
<canvas baseChart
[datasets]="lineChartData"
[labels]="lineChartLabels"
[options]="lineChartOptions"
[colors]="lineChartColors"
[legend]="lineChartLegend"
[chartType]="lineChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)">
</canvas>
</div>
</div>
<hr>
<div class="card-body row">
<div class="col-md-3 text-center">
<h4>MASTER WALLET BALANCE</h4>
<p>{{10000000 | number}} RCU</p>
</div>
<div class="col-md-3 text-center">
<h4>TOTAL DISTRIBUTED</h4>
<p>{{disbursements * 1000 | number}} RCU</p>
</div>
<div class="col-md-3 text-center">
<h4>TOTAL SPENT</h4>
<p>{{transactions * 100000 | number}} RCU</p>
</div>
<div class="col-md-3 text-center">
<h4>TOTAL USERS</h4>
<p>{{users * 10 | number}} users</p>
</div>
</div>
<hr>
<div class="card-body">
<div style="display: block">
<canvas baseChart
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[chartType]="barChartType">
</canvas>
</div>
</div>
</div> </div>
<div class="card col-md-4"> <div class="row">
<div class="card-body text-center"> <div class="card col-md-8">
<h4>TRANSFER USAGES</h4> <div class="card-body">
<p>Transfer Usages Will Appear Here</p> <div style="display: block">
<canvas baseChart
[datasets]="lineChartData"
[labels]="lineChartLabels"
[options]="lineChartOptions"
[colors]="lineChartColors"
[legend]="lineChartLegend"
[chartType]="lineChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)">
</canvas>
</div>
</div>
<hr>
<div class="card-body row">
<div class="col-md-3 text-center">
<h4>MASTER WALLET BALANCE</h4>
<p>{{10000000 | number}} RCU</p>
</div>
<div class="col-md-3 text-center">
<h4>TOTAL DISTRIBUTED</h4>
<p>{{disbursements * 1000 | number}} RCU</p>
</div>
<div class="col-md-3 text-center">
<h4>TOTAL SPENT</h4>
<p>{{transactions * 100000 | number}} RCU</p>
</div>
<div class="col-md-3 text-center">
<h4>TOTAL USERS</h4>
<p>{{users * 10 | number}} users</p>
</div>
</div>
<hr>
<div class="card-body">
<div style="display: block">
<canvas baseChart
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[chartType]="barChartType">
</canvas>
</div>
</div>
</div> </div>
<hr> <div class="card col-md-4">
<div class="card-body"> <div class="card-body text-center">
<h4 class="text-center">PARTNER LIVE FEED</h4> <h4>TRANSFER USAGES</h4>
<div style="display: block">
<canvas baseChart
[data]="transferUsagesChartData"
[labels]="transferUsagesChartLabels"
[options]="transferUsagesChartOptions"
[colors]="transferUsagesChartColors"
[legend]="transferUsagesChartLegend"
[chartType]="transferUsagesChartType">
</canvas>
</div>
</div>
<hr>
<div class="card-body">
<h4 class="text-center">PARTNER LIVE FEED</h4>
</div>
</div> </div>
</div> </div>
</div> </div>

60
src/app/pages/pages.component.ts
View File

@ -1,6 +1,8 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import {Color, Label} from 'ng2-charts'; import {Color, Label} from 'ng2-charts';
import {ChartDataSets, ChartOptions, ChartType} from 'chart.js'; import {ChartDataSets, ChartOptions, ChartType} from 'chart.js';
import {LocationService, UserService} from '../_services';
import { ArraySum } from '../_helpers';
@Component({ @Component({
selector: 'app-pages', selector: 'app-pages',
@ -9,7 +11,8 @@ import {ChartDataSets, ChartOptions, ChartType} from 'chart.js';
}) })
export class PagesComponent implements OnInit { export class PagesComponent implements OnInit {
disbursements: number = 0; disbursements: number = 0;
users: number = 0; users: any;
locations: any;
transactions: number = 0; transactions: number = 0;
public lineChartData: ChartDataSets[] = [ public lineChartData: ChartDataSets[] = [
{ data: [65, 59, 80, 81, 56, 55, 40], label: 'User Registration'}, { 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'} { 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 { ngOnInit(): void {
this.newDataPoint([50, 80], 'August'); this.newDataPoint([50, 80], 'August');
// this.disbursements = this.lineChartData.find(data => data.label === 'Token Disbursements') this.transferUsagesChartData = [18, 12, 10, 8, 6, 5, 5, 3, 2, 1];
// .data.reduce((accumulator, current) => accumulator + current, 0); this.disbursements = ArraySum.arraySum(this.lineChartData.find(data => data.label === 'Token Disbursements').data);
// this.users = this.barChartData.find(data => data.label === 'New Users') this.users = ArraySum.arraySum(this.barChartData.find(data => data.label === 'New Users').data);
// .data.reduce((accumulator, current) => accumulator + current, 0); this.transactions = ArraySum.arraySum(this.lineChartData.find(data => data.label === 'Transaction Volumes').data);
// this.transactions = this.lineChartData.find(data => data.label === 'Transaction Volumes')
// .data.reduce((accumulator, current) => accumulator + current, 0);
} }
newDataPoint(dataArr: any[], label: string): void { newDataPoint(dataArr: any[], label: string): void {

22
src/app/pages/pages.module.ts
View File

@ -9,19 +9,21 @@ import {MatButtonModule} from '@angular/material/button';
import {MatFormFieldModule} from '@angular/material/form-field'; import {MatFormFieldModule} from '@angular/material/form-field';
import {MatSelectModule} from '@angular/material/select'; import {MatSelectModule} from '@angular/material/select';
import {MatInputModule} from '@angular/material/input'; import {MatInputModule} from '@angular/material/input';
import {MatCardModule} from '@angular/material/card';
@NgModule({ @NgModule({
declarations: [PagesComponent], declarations: [PagesComponent],
imports: [ imports: [
CommonModule, CommonModule,
PagesRoutingModule, PagesRoutingModule,
SharedModule, SharedModule,
ChartsModule, ChartsModule,
MatButtonModule, MatButtonModule,
MatFormFieldModule, MatFormFieldModule,
MatSelectModule, MatSelectModule,
MatInputModule MatInputModule,
] MatCardModule
]
}) })
export class PagesModule { } export class PagesModule { }

9
src/app/pages/settings/invite/invite.component.html
View File

@ -10,6 +10,13 @@
<app-topbar></app-topbar> <app-topbar></app-topbar>
<!-- Start Content--> <!-- Start Content-->
<div class="container-fluid" appMenuSelection> <div class="container-fluid" appMenuSelection>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a routerLink="/home">Home</a></li>
<li class="breadcrumb-item"><a routerLink="/settings">Settings</a></li>
<li class="breadcrumb-item active" aria-current="page">Invite User</li>
</ol>
</nav>
<div class="col-md-6"> <div class="col-md-6">
<div class="card"> <div class="card">
<mat-card-title class="card-header text-center"> <mat-card-title class="card-header text-center">
@ -27,7 +34,7 @@
<mat-radio-button value="Subadmin">Subadmin</mat-radio-button><br> <mat-radio-button value="Subadmin">Subadmin</mat-radio-button><br>
<mat-radio-button value="View">View</mat-radio-button><br> <mat-radio-button value="View">View</mat-radio-button><br>
</mat-radio-group> </mat-radio-group>
<button mat-raised-button type="submit" class="btn btn-outline-primary">INVITE</button> <button mat-raised-button color="primary" type="submit" class="btn btn-outline-primary">INVITE</button>
</form> </form>
</div> </div>
</div> </div>

11
src/app/pages/settings/organization/organization.component.html
View File

@ -10,7 +10,14 @@
<app-topbar></app-topbar> <app-topbar></app-topbar>
<!-- Start Content--> <!-- Start Content-->
<div class="container-fluid" appMenuSelection> <div class="container-fluid" appMenuSelection>
<div class="col-md-6"> <nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a routerLink="/home">Home</a></li>
<li class="breadcrumb-item"><a routerLink="/settings">Settings</a></li>
<li class="breadcrumb-item active" aria-current="page">Organization Settings</li>
</ol>
</nav>
<div class="col-md-6 center-body">
<div class="card"> <div class="card">
<mat-card-title class="card-header text-center"> <mat-card-title class="card-header text-center">
DEFAULT ORGANISATION SETTINGS DEFAULT ORGANISATION SETTINGS
@ -35,7 +42,7 @@
<mat-option value="UG">UG Uganda</mat-option> <mat-option value="UG">UG Uganda</mat-option>
</mat-select> </mat-select>
</mat-form-field><br> </mat-form-field><br>
<button mat-raised-button type="submit" class="btn btn-primary">Submit</button> <button mat-raised-button color="primary" type="submit" class="btn btn-primary">Submit</button>
</form> </form>
</div> </div>
</div> </div>

154
src/app/pages/settings/settings.component.html
View File

@ -10,114 +10,112 @@
<app-topbar></app-topbar> <app-topbar></app-topbar>
<!-- Start Content--> <!-- Start Content-->
<div class="container-fluid" appMenuSelection> <div class="container-fluid" appMenuSelection>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a routerLink="/home">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Settings</li>
</ol>
</nav>
<div class="row"> <div class="row">
<div class="col-md-6 mb-2"> <div class="col-md-6 mb-2">
<div class="card"> <div class="card">
<div class="card-header text-center"> <mat-card-title class="card-header text-center">
SETTINGS SETTINGS
</div> </mat-card-title>
<div class="card-body"> <div class="card-body">
<h4>Kobo Toolbox Credentials</h4> <h4>Kobo Toolbox Credentials</h4>
<p><strong>Username: </strong> admin_reserve </p> <span><strong>Username: </strong> admin_reserve </span><br>
<p><strong>Password: </strong> p@55w0rd </p> <span><strong>Password: </strong> ******** </span>
</div>
<hr>
<div class="card-body">
<h4>Account Status: </h4>
<span><i class="fa fa-check-circle"></i> Please contact support.</span>
</div>
<hr>
<div class="card-body">
<h4>Support</h4>
<span><i class="fa fa-commenting"></i> Chat</span><br>
<span><i class="fa fa-book"></i> Help Center</span>
</div> </div>
<hr> <hr>
<div class="card-body"> <div class="card-body">
<h4>Organization Settings</h4> <h4>Organization Settings</h4>
<p routerLink="/settings/organization"><i>Update your organization settings</i></p> <a routerLink="/settings/organization"><i>Update your organization settings</i></a>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-6 mb-2"> <div class="col-md-6 mb-2">
<div class="card"> <div class="card">
<div class="card-header text-center"> <mat-card-title class="card-header text-center">
ACCOUNT MANAGEMENT ACCOUNT MANAGEMENT
</div> </mat-card-title>
<div class="card-body"> <div class="card-body">
<h4>Change Password</h4> <h4>Change Password</h4>
<p><i>Change your account password</i></p> <a routerLink="/settings"><i>Change your account password</i></a>
</div> </div>
<hr> <hr>
<div class="card-body"> <div class="card-body">
<h4>Two-step authentication</h4> <h4>Two-step authentication</h4>
<p><i>Secure your account with two step verification</i></p> <a routerLink="/settings"><i>Secure your account with two step verification</i></a>
</div> </div>
<hr> <hr>
<div class="card-body"> <div class="card-body">
<button mat-raised-button type="button" class="btn btn-outline-primary"> LOGOUT ADMIN </button> <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary"> LOGOUT ADMIN </button>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="col-12">
<div class="col-12"> <div class="card mb-3">
<div class="card mb-3"> <mat-card-title class="card-header">
<div class="card-header"> <div class="row">
<div class="row"> USERS
USERS <button mat-raised-button color="primary" routerLink="/settings/invite" type="button" class="btn btn-outline-primary ml-auto"><i class="fa fa-plus"> NEW USER </i></button>
<button mat-raised-button routerLink="/settings/invite" type="button" class="btn btn-outline-primary ml-auto"><i class="fa fa-plus"> NEW USER </i></button> </div>
</mat-card-title>
<div class="card-body">
<mat-form-field appearance="outline">
<mat-label> Filter </mat-label>
<input matInput type="text" (keyup)="doFilter($event.target.value)" placeholder="Filter">
<mat-icon matSuffix>search</mat-icon>
</mat-form-field>
<mat-table class="mat-elevation-z10" [dataSource]="dataSource" matSort matSortActive="name"
matSortDirection="asc" matSortDisableClear>
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header> NAME </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.name}} </mat-cell>
</ng-container>
<ng-container matColumnDef="accountType">
<mat-header-cell *matHeaderCellDef mat-sort-header> ACCOUNT TYPE </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.accountType}} </mat-cell>
</ng-container>
<ng-container matColumnDef="created">
<mat-header-cell *matHeaderCellDef mat-sort-header> CREATED </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.created}} </mat-cell>
</ng-container>
<ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef mat-sort-header> STATUS </mat-header-cell>
<mat-cell *matCellDef="let user">
<span *ngIf="user.status === 'activated'" class="badge badge-success badge-pill"> {{user.status}} </span>
<span *ngIf="user.status === 'deactivated'" class="badge badge-danger badge-pill"> {{user.status}} </span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="options">
<mat-header-cell *matHeaderCellDef> OPTIONS </mat-header-cell>
<mat-cell *matCellDef="let user" class="dropdown">
<button mat-raised-button color="warn" [matMenuTriggerFor]="menu" class="btn btn-outline-danger ml-1"><i class="fa fa-ellipsis-h"></i></button>
<mat-menu #menu='matMenu'>
<button mat-menu-item (click)="changeStaffType(user.id, 'SuperAdmin')">Change to Super Admin</button>
<button mat-menu-item (click)="changeStaffType(user.id, 'Admin')">Change to Admin</button>
<button mat-menu-item (click)="changeStaffType(user.id, 'Enroller')">Change to Enroller</button>
<button mat-menu-item (click)="changeStaffType(user.id, 'View')">Change to View Only</button>
<button *ngIf="user.status === 'activated'" mat-menu-item (click)="deactivateStaff(user.id)">Deactivate User</button>
<button *ngIf="user.status === 'deactivated'" mat-menu-item (click)="activateStaff(user.id)">Activate User</button>
</mat-menu>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let transaction; columns: displayedColumns"></mat-row>
</mat-table>
<mat-paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20, 50, 100]" showFirstLastButtons></mat-paginator>
</div> </div>
</div> </div>
<div class="card-body">
<mat-form-field appearance="outline">
<mat-label> Filter </mat-label>
<input matInput type="text" (keyup)="doFilter($event.target.value)" placeholder="Filter">
<mat-icon matSuffix>search</mat-icon>
</mat-form-field>
<mat-table class="mat-elevation-z10" [dataSource]="dataSource" matSort matSortActive="name"
matSortDirection="asc" matSortDisableClear>
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header> NAME </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.name}} </mat-cell>
</ng-container>
<ng-container matColumnDef="accountType">
<mat-header-cell *matHeaderCellDef mat-sort-header> ACCOUNT TYPE </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.accountType}} </mat-cell>
</ng-container>
<ng-container matColumnDef="created">
<mat-header-cell *matHeaderCellDef mat-sort-header> CREATED </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.created}} </mat-cell>
</ng-container>
<ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef mat-sort-header> STATUS </mat-header-cell>
<mat-cell *matCellDef="let user"><span class="badge badge-primary badge-pill"> {{user.status}} </span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="options">
<mat-header-cell *matHeaderCellDef> </mat-header-cell>
<mat-cell *matCellDef="let user" class="dropdown">
<button mat-raised-button [matMenuTriggerFor]="menu" class="btn btn-outline-danger ml-1"><i class="fa fa-ellipsis-h"></i></button>
<mat-menu #menu='matMenu'>
<button mat-menu-item>Change to Super Admin</button>
<button mat-menu-item>Change to Admin</button>
<button mat-menu-item>Change to Enroller</button>
<button mat-menu-item>Change to View Only</button>
<button mat-menu-item>Disable User</button>
</mat-menu>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let transaction; columns: displayedColumns"></mat-row>
</mat-table>
<mat-paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20, 50, 100]" showFirstLastButtons></mat-paginator>
</div>
</div> </div>
</div> </div>
</div> </div>

45
src/app/pages/settings/settings.component.ts
View File

@ -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 {MatTableDataSource} from '@angular/material/table';
import {MatPaginator} from '@angular/material/paginator'; import {MatPaginator} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort'; import {MatSort} from '@angular/material/sort';
import {UserService} from '../../_services';
import {first} from 'rxjs/operators';
@Component({ @Component({
selector: 'app-settings', selector: 'app-settings',
templateUrl: './settings.component.html', templateUrl: './settings.component.html',
styleUrls: ['./settings.component.scss'] styleUrls: ['./settings.component.scss']
}) })
export class SettingsComponent implements OnInit, AfterViewInit { export class SettingsComponent implements OnInit {
data = [
{ name: 'admin@acme.org', accountType: 'Admin', created: '17/11/2020', status: 'activated'}
];
date: string; date: string;
dataSource: MatTableDataSource<any>; dataSource: MatTableDataSource<any>;
displayedColumns = ['name', 'accountType', 'created', 'status', 'options']; displayedColumns = ['name', 'accountType', 'created', 'status', 'options'];
@ -19,20 +18,38 @@ export class SettingsComponent implements OnInit, AfterViewInit {
@ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort; @ViewChild(MatSort) sort: MatSort;
constructor() { } constructor(
private userService: UserService
ngOnInit(): void { ) {
this.dataSource = new MatTableDataSource<any>(this.data); this.userService.getStaff();
const d = new Date();
this.date = `${d.getDate()}/${d.getMonth()}/${d.getFullYear()}`;
} }
ngAfterViewInit(): void { ngOnInit(): void {
this.dataSource.paginator = this.paginator; this.userService.staffSubject.subscribe(staff => {
this.dataSource.sort = this.sort; this.dataSource = new MatTableDataSource<any>(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 { doFilter(value: string): void {
this.dataSource.filter = value.trim().toLocaleLowerCase(); 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();
}
} }

38
src/app/pages/tokens/token-details/token-details.component.html
View File

@ -9,19 +9,43 @@
<div id="content"> <div id="content">
<app-topbar></app-topbar> <app-topbar></app-topbar>
<!-- Start Content--> <!-- Start Content-->
<div class="container-fluid" appMenuSelection> <div class="container-fluid text-center" appMenuSelection>
<div class="col-md-4"> <nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a routerLink="/home">Home</a></li>
<li class="breadcrumb-item"><a routerLink="/tokens">Tokens</a></li>
<li class="breadcrumb-item active" aria-current="page">{{token.name}}</li>
</ol>
</nav>
<div class="col-md-6 center-body">
<div class="card"> <div class="card">
<mat-card-title class="card-header"> <mat-card-title class="card-header">
Token Token
</mat-card-title> </mat-card-title>
<div class="card-body"> <div class="card-body">
<div> <div>
<p>Name: {{token.name}}</p> <span><strong>Name:</strong> {{token.name}}</span>
<p>Symbol: {{token.symbol}}</p> </div>
<p>Details: A community inclusive currency for trading among lower to middle income societies.</p> <div>
<p>Supply: 100000000</p> <span><strong>Symbol:</strong> {{token.symbol}}</span>
<p>Circulation: 57000000</p> </div>
<div>
<span><strong>Address:</strong> {{token.address}}</span>
</div>
<div>
<span><strong>Details:</strong> A community inclusive currency for trading among lower to middle income societies.</span>
</div>
<div>
<span><strong>Supply:</strong> {{token.supply | tokenRatio}}</span>
</div><br>
<div>
<h2>Reserve</h2>
<div>
<span><strong>Weight:</strong> {{token.reserveRatio}}</span>
</div>
<div>
<span><strong>Owner:</strong> {{token.owner}}</span>
</div>
</div> </div>
</div> </div>
</div> </div>

5
src/app/pages/tokens/token-details/token-details.component.ts
View File

@ -1,6 +1,7 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import {ActivatedRoute, Params} from '@angular/router'; import {ActivatedRoute, Params} from '@angular/router';
import {TokenService} from '../../../_services'; import {TokenService} from '../../../_services';
import {first} from 'rxjs/operators';
@Component({ @Component({
selector: 'app-token-details', selector: 'app-token-details',
@ -15,7 +16,9 @@ export class TokenDetailsComponent implements OnInit {
private tokenService: TokenService private tokenService: TokenService
) { ) {
this.route.paramMap.subscribe((params: Params) => { 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;
});
}); });
} }

73
src/app/pages/tokens/tokens.component.html
View File

@ -10,42 +10,51 @@
<app-topbar></app-topbar> <app-topbar></app-topbar>
<!-- Start Content--> <!-- Start Content-->
<div class="container-fluid" appMenuSelection> <div class="container-fluid" appMenuSelection>
<mat-form-field appearance="outline"> <nav aria-label="breadcrumb">
<mat-label> Filter </mat-label> <ol class="breadcrumb">
<input matInput type="text" (keyup)="doFilter($event.target.value)" placeholder="Filter"> <li class="breadcrumb-item"><a routerLink="/home">Home</a></li>
<mat-icon matSuffix>search</mat-icon> <li class="breadcrumb-item active" aria-current="page">Tokens</li>
</mat-form-field> </ol>
<mat-table class="mat-elevation-z10" [dataSource]="dataSource" matSort matSortDirection="asc" matSortDisableClear> </nav>
<ng-container matColumnDef="name"> <div class="card">
<mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell> <mat-card-title class="card-header">
<mat-cell *matCellDef="let token"> {{token.name}} </mat-cell> Tokens
</ng-container> </mat-card-title>
<div class="card-body">
<mat-form-field appearance="outline">
<mat-label> Filter </mat-label>
<input matInput type="text" (keyup)="doFilter($event.target.value)" placeholder="Filter">
<mat-icon matSuffix>search</mat-icon>
</mat-form-field>
<ng-container matColumnDef="symbol"> <mat-table class="mat-elevation-z10 table-responsive" [dataSource]="dataSource" matSort matSortDirection="asc" matSortDisableClear>
<mat-header-cell *matHeaderCellDef mat-sort-header> Symbol </mat-header-cell> <ng-container matColumnDef="name">
<mat-cell *matCellDef="let token"> {{token.symbol}} </mat-cell> <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
</ng-container> <mat-cell *matCellDef="let token"> {{token.name}} </mat-cell>
</ng-container>
<ng-container matColumnDef="select"> <ng-container matColumnDef="symbol">
<mat-header-cell *matHeaderCellDef> <mat-header-cell *matHeaderCellDef mat-sort-header> Symbol </mat-header-cell>
<mat-checkbox (change)="$event ? masterToggle() : null" <mat-cell *matCellDef="let token"> {{token.symbol}} </mat-cell>
[checked]="selection.hasValue() && isAllSelected()" </ng-container>
[indeterminate]="selection.hasValue() && !isAllSelected">
</mat-checkbox>
</mat-header-cell>
<mat-cell *matCellDef="let token">
<mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(token) : null"
[checked]="selection.isSelected(token)">
</mat-checkbox>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row> <ng-container matColumnDef="address">
<mat-row *matRowDef="let token; columns: columnsToDisplay" (click)="viewToken(token)"></mat-row> <mat-header-cell *matHeaderCellDef mat-sort-header> Address </mat-header-cell>
</mat-table> <mat-cell *matCellDef="let token"> {{token.address}} </mat-cell>
</ng-container>
<mat-paginator [pageSize]="3" [pageSizeOptions]="[3, 5, 10]" showFirstLastButtons></mat-paginator> <ng-container matColumnDef="supply">
<mat-header-cell *matHeaderCellDef mat-sort-header> Supply </mat-header-cell>
<mat-cell *matCellDef="let token"> {{token.supply | tokenRatio}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
<mat-row *matRowDef="let token; columns: columnsToDisplay" (click)="viewToken(token)" matRipple></mat-row>
</mat-table>
<mat-paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 25, 100]" showFirstLastButtons></mat-paginator>
</div>
</div>
</div> </div>
<app-footer appMenuSelection></app-footer> <app-footer appMenuSelection></app-footer>
</div> </div>

37
src/app/pages/tokens/tokens.component.ts
View File

@ -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 {MatPaginator} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort'; import {MatSort} from '@angular/material/sort';
import {TokenService} from '../../_services'; import {TokenService} from '../../_services';
import {MatTableDataSource} from '@angular/material/table'; import {MatTableDataSource} from '@angular/material/table';
import {SelectionModel} from '@angular/cdk/collections';
import {Router} from '@angular/router'; import {Router} from '@angular/router';
@Component({ @Component({
@ -11,39 +10,25 @@ import {Router} from '@angular/router';
templateUrl: './tokens.component.html', templateUrl: './tokens.component.html',
styleUrls: ['./tokens.component.scss'] styleUrls: ['./tokens.component.scss']
}) })
export class TokensComponent implements OnInit, AfterViewInit { export class TokensComponent implements OnInit {
dataSource: MatTableDataSource<any>; dataSource: MatTableDataSource<any>;
columnsToDisplay = ['name', 'symbol', 'select']; columnsToDisplay = ['name', 'symbol', 'address', 'supply'];
initialSelection = [];
allowMultiSelect = true;
selection: SelectionModel<any>;
@ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort; @ViewChild(MatSort) sort: MatSort;
constructor( constructor(
private tokenService: TokenService, private tokenService: TokenService,
private router: Router private router: Router
) { } ) {
tokenService.getTokens();
}
ngOnInit(): void { ngOnInit(): void {
this.dataSource = new MatTableDataSource(this.tokenService.data); this.tokenService.tokensSubject.subscribe(tokens => {
this.selection = new SelectionModel<any>(this.allowMultiSelect, this.initialSelection); this.dataSource = new MatTableDataSource(tokens);
} this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
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));
} }
doFilter(value: string): void { doFilter(value: string): void {

37
src/app/pages/tokens/tokens.module.ts
View File

@ -8,7 +8,7 @@ import {SharedModule} from '../../shared/shared.module';
import {MatTableModule} from '@angular/material/table'; import {MatTableModule} from '@angular/material/table';
import {MatPaginatorModule} from '@angular/material/paginator'; import {MatPaginatorModule} from '@angular/material/paginator';
import {MatSortModule} from '@angular/material/sort'; 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 {MatCheckboxModule} from '@angular/material/checkbox';
import {MatInputModule} from '@angular/material/input'; import {MatInputModule} from '@angular/material/input';
import {MatFormFieldModule} from '@angular/material/form-field'; import {MatFormFieldModule} from '@angular/material/form-field';
@ -21,22 +21,23 @@ import {MatCardModule} from '@angular/material/card';
@NgModule({ @NgModule({
declarations: [TokensComponent, TokenDetailsComponent], declarations: [TokensComponent, TokenDetailsComponent],
imports: [ imports: [
CommonModule, CommonModule,
TokensRoutingModule, TokensRoutingModule,
SharedModule, SharedModule,
MatTableModule, MatTableModule,
MatPaginatorModule, MatPaginatorModule,
MatSortModule, MatSortModule,
MatPseudoCheckboxModule, MatPseudoCheckboxModule,
MatCheckboxModule, MatCheckboxModule,
MatInputModule, MatInputModule,
MatFormFieldModule, MatFormFieldModule,
MatIconModule, MatIconModule,
MatSidenavModule, MatSidenavModule,
MatButtonModule, MatButtonModule,
MatToolbarModule, MatToolbarModule,
MatCardModule MatCardModule,
] MatRippleModule
]
}) })
export class TokensModule { } export class TokensModule { }

104
src/app/pages/transactions/transaction-details/transaction-details.component.html
View File

@ -1,37 +1,40 @@
<div *ngIf="transaction" class="mb-5"> <div *ngIf="transaction" class="mb-3 mt-1">
<div class="card text-center"> <div class="card text-center">
<div class="card-header bg-dark text-white"> <mat-card-title class="card-header">
<strong>TRANSACTION DETAILS</strong> <div class="row">
</div> TRANSACTION DETAILS
<div class="card-body"> <button mat-raised-button type="button" class="btn btn-outline-secondary ml-auto mr-2" (click)="transaction = null"> CLOSE </button>
</div>
</mat-card-title>
<div *ngIf="transaction.type == 'transaction'" class="card-body">
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<h4>Exchange: </h4> <h4>Exchange: </h4>
<ul class="list-group list-group-flush"> <ul class="list-group list-group-flush">
<li class="list-group-item"> <li class="list-group-item">
<p>Sender: {{transaction.sender?.vcard.fn}}</p> <span>Sender: {{transaction.sender?.vcard.fn}}</span><br><br>
<p>Sender Address: {{transaction.from}}</p> <span>Sender Address: {{transaction.from}}</span><br><br>
<button mat-raised-button class="btn btn-outline-dark" routerLink="/accounts/1">View Sender</button> <button mat-raised-button color="primary" class="btn btn-outline-info" routerLink="/accounts/1">View Sender</button>
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
<p>Recipient: {{transaction.recipient?.vcard.fn}}</p> <span>Recipient: {{transaction.recipient?.vcard.fn}}</span><br><br>
<p>Recipient Address: {{transaction.to}}</p> <span>Recipient Address: {{transaction.to}}</span><br><br>
<button mat-raised-button class="btn btn-outline-dark" routerLink="/accounts/1">View Recipient</button> <button mat-raised-button color="primary" class="btn btn-outline-info" routerLink="/accounts/1">View Recipient</button>
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
<p>Amount: {{transaction.token.symbol + ' ' + transaction.value}}</p> <span>Amount: {{transaction.token.symbol + ' ' + transaction.value}}</span>
</li> </li>
</ul> </ul>
<h4 class="mt-2">Token: </h4> <h4 class="mt-2">Token: </h4>
<ul class="list-group list-group-flush"> <ul class="list-group list-group-flush">
<li class="list-group-item"> <li class="list-group-item">
<p>Address: {{transaction.token.address}}</p> <span>Address: {{transaction.token.address}}</span>
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
<p>Name: {{transaction.token.name}}</p> <span>Name: {{transaction.token.name}}</span>
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
<p>Symbol: {{transaction.token.symbol}}</p> <span>Symbol: {{transaction.token.symbol}}</span>
</li> </li>
</ul> </ul>
</div> </div>
@ -39,29 +42,84 @@
<h4>Transaction: </h4> <h4>Transaction: </h4>
<ul class="list-group list-group-flush"> <ul class="list-group list-group-flush">
<li class="list-group-item"> <li class="list-group-item">
<p>Block: {{transaction.tx.block}}</p> <span>Block: {{transaction.tx.block}}</span>
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
<p>Index: {{transaction.tx.txIndex}}</p> <span>Index: {{transaction.tx.txIndex}}</span>
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
<p>Hash: {{transaction.tx.txHash}}</p> <span>Hash: {{transaction.tx.txHash}}</span>
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
<p>Success: {{transaction.tx.success}}</p> <span>Success: {{transaction.tx.success}}</span>
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
<p>Timestamp: {{transaction.tx.timestamp | date}}</p> <span>Timestamp: {{transaction.tx.timestamp | date}}</span>
</li> </li>
</ul> </ul><br>
<div class="mb-3"> <div class="mb-3">
<button mat-raised-button type="button" class="btn btn-outline-success">Resend SMS</button> <button mat-raised-button color="primary" type="button" class="btn btn-outline-success">Resend SMS</button>
</div> </div>
<div> <div>
<button mat-raised-button type="button" class="btn btn-outline-danger">Reverse Transaction</button> <button mat-raised-button color="warn" type="button" class="btn btn-outline-danger">Reverse Transaction</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div *ngIf="transaction.type == 'conversion'" class="card-body">
<h3>Exchange: </h3>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<span><strong>Trader: {{transaction.sender?.vcard.fn}}</strong></span>
</li>
<li class="list-group-item">
<span>Trader Address: {{transaction.trader}}</span>
</li>
</ul>
<button mat-raised-button color="primary" class="btn btn-outline-info" routerLink="/accounts/1">View Trader</button>
<br><br>
<div class="row">
<div class="col-md-6">
<h4>Source Token: </h4>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<span>Address: {{transaction.sourceToken.address}}</span>
</li>
<li class="list-group-item">
<span>Name: {{transaction.sourceToken.name}}</span>
</li>
<li class="list-group-item">
<span>Symbol: {{transaction.sourceToken.symbol}}</span>
</li>
<li class="list-group-item">
<span>Amount: {{transaction.sourceToken.symbol + ' ' + transaction.fromValue}}</span>
</li>
</ul>
</div>
<div class="col-md-6">
<h4>Destination Token: </h4>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<span>Address: {{transaction.destinationToken.address}}</span>
</li>
<li class="list-group-item">
<span>Name: {{transaction.destinationToken.name}}</span>
</li>
<li class="list-group-item">
<span>Symbol: {{transaction.destinationToken.symbol}}</span>
</li>
<li class="list-group-item">
<span>Amount: {{transaction.destinationToken.symbol + ' ' + transaction.toValue}}</span>
</li>
</ul>
</div>
<div class="col-md-6">
<button mat-raised-button color="primary" type="button" class="btn btn-outline-success">Resend SMS</button>
</div>
<div class="col-md-6">
<button mat-raised-button color="warn" type="button" class="btn btn-outline-danger ml-2">Reverse Transaction</button>
</div>
</div>
</div>
</div> </div>
</div> </div>

4
src/app/pages/transactions/transaction-details/transaction-details.component.ts
View File

@ -1,4 +1,4 @@
import {Component, Input, OnInit} from '@angular/core'; import {Component, Input, OnInit, Output} from '@angular/core';
import {Transaction} from '../../../_models'; import {Transaction} from '../../../_models';
@Component({ @Component({
@ -7,7 +7,7 @@ import {Transaction} from '../../../_models';
styleUrls: ['./transaction-details.component.scss'] styleUrls: ['./transaction-details.component.scss']
}) })
export class TransactionDetailsComponent implements OnInit { export class TransactionDetailsComponent implements OnInit {
@Input() transaction: Transaction; @Input() transaction;
constructor() { } constructor() { }

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

@ -10,6 +10,12 @@
<app-topbar></app-topbar> <app-topbar></app-topbar>
<!-- Start Content--> <!-- Start Content-->
<div class="container-fluid" appMenuSelection> <div class="container-fluid" appMenuSelection>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a routerLink="/home">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Transactions</li>
</ol>
</nav>
<div class="card"> <div class="card">
<mat-card-title class="card-header"> <mat-card-title class="card-header">
Transfers Transfers
@ -21,22 +27,20 @@
<div *ngIf="transactionSelection.selected.length <=0" class="row card-header"> <div *ngIf="transactionSelection.selected.length <=0" class="row card-header">
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">
<mat-label> TRANSFER TYPE </mat-label> <mat-label> TRANSFER TYPE </mat-label>
<mat-select id="typeSelect"> <mat-select id="typeSelect" [(value)]="transactionsType" (selectionChange)="filterTransactions()">
<mat-option value="all" selected>ALL TRANSFERS</mat-option> <mat-option value="all">ALL TRANSFERS</mat-option>
<mat-option value="payments">PAYMENTS</mat-option> <mat-option value="transaction">PAYMENTS</mat-option>
<mat-option value="exchange">EXCHANGE</mat-option> <mat-option value="conversion">CONVERSION</mat-option>
<mat-option value="disbursements">DISBURSEMENTS</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 value="reclamation">RECLAMATION</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<button mat-raised-button type="button" class="btn btn-outline-secondary ml-auto"><i class="fa fa-plus"></i> ADD NEW </button>
<button mat-raised-button type="button" class="btn btn-outline-secondary ml-2"> EXPORT </button>
</div> </div>
<div *ngIf="transactionSelection.selected.length > 0" class="row card-header"> <div *ngIf="transactionSelection.selected.length > 0" class="row card-header">
<p><strong> {{transactionSelection.selected.length}} selected </strong></p> <p><strong> {{transactionSelection.selected.length}} selected </strong></p>
<button mat-raised-button type="button" class="btn btn-outline-secondary ml-auto"> NEXT </button> <mat-form-field appearance="outline" class="ml-auto">
<mat-form-field appearance="outline" class="ml-3">
<mat-label> TRANSACTION STATUS </mat-label> <mat-label> TRANSACTION STATUS </mat-label>
<mat-select id="statusSelect"> <mat-select id="statusSelect">
<mat-option selected disabled> -- SELECT -- </mat-option> <mat-option selected disabled> -- SELECT -- </mat-option>
@ -54,24 +58,48 @@
<mat-table class="mat-elevation-z10" [dataSource]="transactionDataSource" matSort matSortActive="created" <mat-table class="mat-elevation-z10" [dataSource]="transactionDataSource" matSort matSortActive="created"
matSortDirection="desc" matSortDisableClear> matSortDirection="desc" matSortDisableClear>
<ng-container matColumnDef="view">
<mat-header-cell *matHeaderCellDef> View </mat-header-cell>
<mat-cell *matCellDef="let transaction" (click)="viewTransaction(transaction)">
<i class="fa fa-eye"></i>
</mat-cell>
</ng-container>
<ng-container matColumnDef="sender"> <ng-container matColumnDef="sender">
<mat-header-cell *matHeaderCellDef mat-sort-header> Sender </mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header> Sender </mat-header-cell>
<mat-cell *matCellDef="let transaction" routerLink="/users/{{transaction.from}}"> {{transaction.sender?.vcard.fn}} </mat-cell> <mat-cell *matCellDef="let transaction"> {{transaction.sender?.vcard.fn}} </mat-cell>
</ng-container>
<ng-container matColumnDef="senderLocation">
<mat-header-cell *matHeaderCellDef mat-sort-header> Sender Location </mat-header-cell>
<mat-cell *matCellDef="let transaction"> Miyani </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="recipient"> <ng-container matColumnDef="recipient">
<mat-header-cell *matHeaderCellDef mat-sort-header> Recipient </mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header> Recipient </mat-header-cell>
<mat-cell *matCellDef="let transaction" routerLink="/users/{{transaction.to}}"> {{transaction.recipient?.vcard.fn}} </mat-cell> <mat-cell *matCellDef="let transaction"> {{transaction.recipient?.vcard.fn}} </mat-cell>
</ng-container>
<ng-container matColumnDef="recipientLocation">
<mat-header-cell *matHeaderCellDef mat-sort-header> Recipient Location </mat-header-cell>
<mat-cell *matCellDef="let transaction"> Kayaba </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="token"> <ng-container matColumnDef="token">
<mat-header-cell *matHeaderCellDef mat-sort-header> Token </mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header> Token </mat-header-cell>
<mat-cell *matCellDef="let transaction"> {{transaction.token.name}} </mat-cell> <mat-cell *matCellDef="let transaction">
<span *ngIf="transaction.type == 'transaction'">{{transaction.token.name}}</span>
<span *ngIf="transaction.type == 'conversion'">{{transaction.destinationToken.name}}</span>
</mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="value"> <ng-container matColumnDef="value">
<mat-header-cell *matHeaderCellDef mat-sort-header> Value </mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header> Value </mat-header-cell>
<mat-cell *matCellDef="let transaction"> {{transaction.token.symbol + ' ' + transaction.value}} </mat-cell> <mat-cell *matCellDef="let transaction">
<span *ngIf="transaction.type == 'transaction'">{{transaction.value | tokenRatio}}</span>
<span *ngIf="transaction.type == 'conversion'">{{transaction.toValue | tokenRatio}}</span>
</mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="created"> <ng-container matColumnDef="created">
@ -79,12 +107,10 @@
<mat-cell *matCellDef="let transaction"> {{transaction.tx.timestamp | date}} </mat-cell> <mat-cell *matCellDef="let transaction"> {{transaction.tx.timestamp | date}} </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="view"> <ng-container matColumnDef="type">
<mat-header-cell *matHeaderCellDef> View Transaction </mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header> TYPE </mat-header-cell>
<mat-cell *matCellDef="let transaction"> <mat-cell *matCellDef="let transaction">
<button mat-raised-button type="button" class="btn btn-outline-primary" (click)="viewTransaction(transaction)"> <span class="badge badge-success badge-pill"> {{transaction.type}} </span>
<i class="fa fa-eye"> VIEW </i>
</button>
</mat-cell> </mat-cell>
</ng-container> </ng-container>
@ -104,88 +130,13 @@
</ng-container> </ng-container>
<mat-header-row *matHeaderRowDef="transactionDisplayedColumns"></mat-header-row> <mat-header-row *matHeaderRowDef="transactionDisplayedColumns"></mat-header-row>
<mat-row *matRowDef="let transaction; columns: transactionDisplayedColumns"></mat-row> <mat-row *matRowDef="let transaction; columns: transactionDisplayedColumns" (click)="viewTransaction(transaction)"></mat-row>
</mat-table> </mat-table>
<mat-paginator [pageSize]="10" [pageSizeOptions]="[10, 20, 50, 100]" showFirstLastButtons></mat-paginator> <mat-paginator [pageSize]="10" [pageSizeOptions]="[10, 20, 50, 100]" showFirstLastButtons></mat-paginator>
</div> </div>
</div> </div>
<div class="card">
<mat-card-title class="card-header">
Conversions
</mat-card-title>
<div class="card-body">
<app-conversion-details [conversion]="conversion"></app-conversion-details>
<mat-form-field appearance="outline">
<mat-label> Filter </mat-label>
<input matInput type="text" (keyup)="doFilter($event.target.value, conversionDataSource)" placeholder="Filter">
<mat-icon matSuffix>search</mat-icon>
</mat-form-field>
<mat-table class="mat-elevation-z10" [dataSource]="conversionDataSource" matSort matSortActive="created"
matSortDirection="desc" matSortDisableClear>
<ng-container matColumnDef="initialToken">
<mat-header-cell *matHeaderCellDef mat-sort-header> Initial Token </mat-header-cell>
<mat-cell *matCellDef="let conversion"> {{conversion.sourceToken.name}} </mat-cell>
</ng-container>
<ng-container matColumnDef="initialValue">
<mat-header-cell *matHeaderCellDef mat-sort-header> Initial Value </mat-header-cell>
<mat-cell *matCellDef="let conversion"> {{conversion.sourceToken.symbol + ' ' + conversion.fromValue}} </mat-cell>
</ng-container>
<ng-container matColumnDef="finalToken">
<mat-header-cell *matHeaderCellDef mat-sort-header> Final Token </mat-header-cell>
<mat-cell *matCellDef="let conversion"> {{conversion.destinationToken.name}} </mat-cell>
</ng-container>
<ng-container matColumnDef="finalValue">
<mat-header-cell *matHeaderCellDef mat-sort-header> Final Value </mat-header-cell>
<mat-cell *matCellDef="let conversion"> {{conversion.destinationToken.symbol + ' ' + conversion.toValue}} </mat-cell>
</ng-container>
<ng-container matColumnDef="trader">
<mat-header-cell *matHeaderCellDef mat-sort-header> Trader </mat-header-cell>
<mat-cell *matCellDef="let conversion" routerLink="/users/{{conversion.trader}}"> {{conversion.user?.vcard.fn}} </mat-cell>
</ng-container>
<ng-container matColumnDef="created">
<mat-header-cell *matHeaderCellDef mat-sort-header> Created </mat-header-cell>
<mat-cell *matCellDef="let conversion"> {{conversion.tx.timestamp | date}} </mat-cell>
</ng-container>
<ng-container matColumnDef="view">
<mat-header-cell *matHeaderCellDef> View Conversion </mat-header-cell>
<mat-cell *matCellDef="let conversion">
<button mat-raised-button type="button" class="btn btn-outline-primary" (click)="viewConversion(conversion)">
<i class="fa fa-eye"> VIEW </i>
</button>
</mat-cell>
</ng-container>
<ng-container matColumnDef="select">
<mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle(conversionSelection, conversionDataSource) : null"
[checked]="conversionSelection.hasValue() && isAllSelected(conversionSelection, conversionDataSource)"
[indeterminate]="conversionSelection.hasValue() && !isAllSelected(conversionSelection, conversionDataSource)">
</mat-checkbox>
</mat-header-cell>
<mat-cell *matCellDef="let conversion">
<mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? conversionSelection.toggle(conversion) : null"
[checked]="conversionSelection.isSelected(conversion)">
</mat-checkbox>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="conversionDisplayedColumns"></mat-header-row>
<mat-row *matRowDef="let conversion; columns: conversionDisplayedColumns"></mat-row>
</mat-table>
<mat-paginator [pageSize]="10" [pageSizeOptions]="[10, 20, 50, 100]" showFirstLastButtons></mat-paginator>
</div>
</div>
</div> </div>
<app-footer appMenuSelection></app-footer> <app-footer appMenuSelection></app-footer>
</div> </div>

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

@ -1,6 +1,5 @@
import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core'; import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
import {BlockSyncService, TransactionService} from '../../_services'; import {BlockSyncService, TransactionService} from '../../_services';
import {Conversion, Transaction} from '../../_models';
import {MatTableDataSource} from '@angular/material/table'; import {MatTableDataSource} from '@angular/material/table';
import {SelectionModel} from '@angular/cdk/collections'; import {SelectionModel} from '@angular/cdk/collections';
import {MatPaginator} from '@angular/material/paginator'; import {MatPaginator} from '@angular/material/paginator';
@ -12,16 +11,14 @@ import {MatSort} from '@angular/material/sort';
styleUrls: ['./transactions.component.scss'] styleUrls: ['./transactions.component.scss']
}) })
export class TransactionsComponent implements OnInit, AfterViewInit { export class TransactionsComponent implements OnInit, AfterViewInit {
transactionDataSource: MatTableDataSource<Transaction>; transactionDataSource: MatTableDataSource<any>;
conversionDataSource: MatTableDataSource<any>; transactionDisplayedColumns = ['view', 'sender', 'senderLocation', 'recipient', 'recipientLocation', 'token', 'value', 'created', 'type', 'select'];
transactionDisplayedColumns = ['sender', 'recipient', 'token', 'value', 'created', 'view', 'select'];
conversionDisplayedColumns = ['initialToken', 'initialValue', 'finalToken', 'finalValue', 'trader', 'created', 'view', 'select'];
initialSelection = []; initialSelection = [];
allowMultiSelect = true; allowMultiSelect = true;
transactionSelection: SelectionModel<any>; transactionSelection: SelectionModel<any>;
conversionSelection: SelectionModel<any>; transactions: any[];
transaction: Transaction; transaction: any;
conversion: Conversion; transactionsType = 'all';
@ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort; @ViewChild(MatSort) sort: MatSort;
@ -31,38 +28,22 @@ export class TransactionsComponent implements OnInit, AfterViewInit {
private blockSyncService: BlockSyncService private blockSyncService: BlockSyncService
) { ) {
this.blockSyncService.blockSync(); this.blockSyncService.blockSync();
} }
ngOnInit(): void { ngOnInit(): void {
this.transactionService.transactionsSubject.subscribe(transactions => { this.transactionService.transactionsSubject.subscribe(transactions => {
this.transactionDataSource = new MatTableDataSource<Transaction>(transactions); this.transactionDataSource = new MatTableDataSource<any>(transactions);
this.transactionDataSource.paginator = this.paginator; this.transactionDataSource.paginator = this.paginator;
this.transactionDataSource.sort = this.sort; this.transactionDataSource.sort = this.sort;
}); this.transactions = transactions;
this.transactionService.conversionsSubject.subscribe(conversions => {
this.conversionDataSource = new MatTableDataSource<any>(this.transactionService.conversions);
this.conversionDataSource.paginator = this.paginator;
this.conversionDataSource.sort = this.sort;
}); });
this.transactionSelection = new SelectionModel<any>(this.allowMultiSelect, this.initialSelection); this.transactionSelection = new SelectionModel<any>(this.allowMultiSelect, this.initialSelection);
this.conversionSelection = new SelectionModel<any>(this.allowMultiSelect, this.initialSelection);
} }
viewTransaction(transaction): void { viewTransaction(transaction): void {
this.transaction = transaction; 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 { isAllSelected(selection, dataSource): boolean {
const numSelected = selection.selected.length; const numSelected = selection.selected.length;
const numRows = dataSource.data.length; const numRows = dataSource.data.length;
@ -76,4 +57,20 @@ export class TransactionsComponent implements OnInit, AfterViewInit {
doFilter(value: string, dataSource): void { doFilter(value: string, dataSource): void {
dataSource.filter = value.trim().toLocaleLowerCase(); 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;
}
} }

3
src/app/pages/transactions/transactions.module.ts
View File

@ -6,7 +6,6 @@ import { TransactionsComponent } from './transactions.component';
import { TransactionDetailsComponent } from './transaction-details/transaction-details.component'; import { TransactionDetailsComponent } from './transaction-details/transaction-details.component';
import {DataTablesModule} from 'angular-datatables'; import {DataTablesModule} from 'angular-datatables';
import {SharedModule} from '../../shared/shared.module'; import {SharedModule} from '../../shared/shared.module';
import { ConversionDetailsComponent } from './conversion-details/conversion-details.component';
import {MatTableModule} from '@angular/material/table'; import {MatTableModule} from '@angular/material/table';
import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatPaginatorModule} from '@angular/material/paginator'; import {MatPaginatorModule} from '@angular/material/paginator';
@ -20,7 +19,7 @@ import {MatCardModule} from '@angular/material/card';
@NgModule({ @NgModule({
declarations: [TransactionsComponent, TransactionDetailsComponent, ConversionDetailsComponent], declarations: [TransactionsComponent, TransactionDetailsComponent],
exports: [ exports: [
TransactionDetailsComponent TransactionDetailsComponent
], ],

7
src/app/shared/shared.module.ts
View File

@ -7,6 +7,7 @@ import { MenuSelectionDirective } from './_directives/menu-selection.directive';
import { MenuToggleDirective } from './_directives/menu-toggle.directive'; import { MenuToggleDirective } from './_directives/menu-toggle.directive';
import {RouterModule} from '@angular/router'; import {RouterModule} from '@angular/router';
import {MatIconModule} from '@angular/material/icon'; import {MatIconModule} from '@angular/material/icon';
import {TokenRatioPipe} from './_pipes/token-ratio.pipe';
@ -16,13 +17,15 @@ import {MatIconModule} from '@angular/material/icon';
FooterComponent, FooterComponent,
SidebarComponent, SidebarComponent,
MenuSelectionDirective, MenuSelectionDirective,
MenuToggleDirective MenuToggleDirective,
TokenRatioPipe
], ],
exports: [ exports: [
TopbarComponent, TopbarComponent,
FooterComponent, FooterComponent,
SidebarComponent, SidebarComponent,
MenuSelectionDirective MenuSelectionDirective,
TokenRatioPipe
], ],
imports: [ imports: [
CommonModule, CommonModule,

2
src/index.html
View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>CIC-Staff-Client</title> <title>CICADA</title>
<base href="/"> <base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="A fully featured admin client for managing users and transactions in the CIC network." name="description" /> <meta content="A fully featured admin client for managing users and transactions in the CIC network." name="description" />

44
src/styles.scss
View File

@ -211,6 +211,50 @@ a[data-toggle="collapse"] {
overflow: initial; 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) { @media (max-width: 768px) {
#sidebar { #sidebar {
margin-left: 0; margin-left: 0;