From 24013f6f891c0e2148cb27519647c0ceae9b96f1 Mon Sep 17 00:00:00 2001 From: ShahanaFarooqui Date: Sat, 15 Oct 2022 19:20:44 -0700 Subject: [PATCH] Payments incomplete & max column validation --- .../lightning-payments.component.html | 67 +++++++++++++++---- .../lightning-payments.component.scss | 10 ++- .../payments/lightning-payments.component.ts | 43 ++++++++---- .../page-settings.component.html | 3 +- .../page-settings/page-settings.component.ts | 4 +- .../shared/services/consts-enums-functions.ts | 12 +++- 6 files changed, 105 insertions(+), 34 deletions(-) diff --git a/src/app/cln/transactions/payments/lightning-payments.component.html b/src/app/cln/transactions/payments/lightning-payments.component.html index 962a8d4d..194138f4 100644 --- a/src/app/cln/transactions/payments/lightning-payments.component.html +++ b/src/app/cln/transactions/payments/lightning-payments.component.html @@ -27,11 +27,22 @@
- - + + + + + + + + + + @@ -47,16 +58,48 @@ + + + + + + + + + + + + + + + + - - + + - - + + - - @@ -145,7 +188,7 @@ - +
Created At + ID + {{payment?.id}} + Created At {{(payment?.created_at * 1000) | date:'dd/MMM/y HH:mm'}} Invoice + + {{payment?.bolt11}} + + Label + + {{payment?.label}} + + Destination + + {{payment?.destination}} + + Memo + + {{payment?.memo}} + + Sats Sent{{payment?.msatoshi_sent/1000 | number:payment?.msatoshi_sent < 1000 ? '1.0-4' : '1.0-0'}}Sats Sent{{payment?.msatoshi_sent/1000 | number:payment?.msatoshi_sent < 1000 ? '1.0-4' : '1.0-0'}} Sats Received{{payment?.msatoshi/1000 | number:payment?.msatoshi < 1000 ? '1.0-4' : '1.0-0'}}Sats Received{{payment?.msatoshi/1000 | number:payment?.msatoshi < 1000 ? '1.0-4' : '1.0-0'}} +
@@ -64,15 +107,15 @@
+ -

No payment available.

-

Getting payments...

-

{{errorMessage}}

+

No payment available.

+

Getting payments...

+

{{errorMessage}}
diff --git a/src/app/cln/transactions/payments/lightning-payments.component.scss b/src/app/cln/transactions/payments/lightning-payments.component.scss index e74d0e5f..75faf4ed 100644 --- a/src/app/cln/transactions/payments/lightning-payments.component.scss +++ b/src/app/cln/transactions/payments/lightning-payments.component.scss @@ -1,6 +1,10 @@ -.mat-column-payment_hash { - flex: 0 0 25%; - width: 25%; +.mat-column-status { + max-width: 0.1rem; +} + +.mat-column-payment_hash, .mat-column-bolt11, .mat-column-destination, .mat-column-label, .mat-column-memo { + flex: 0 0 10%; + width: 10%; & .ellipsis-parent { display: flex; } diff --git a/src/app/cln/transactions/payments/lightning-payments.component.ts b/src/app/cln/transactions/payments/lightning-payments.component.ts index 3d404790..c93890bc 100644 --- a/src/app/cln/transactions/payments/lightning-payments.component.ts +++ b/src/app/cln/transactions/payments/lightning-payments.component.ts @@ -9,7 +9,7 @@ import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator'; import { MatSort } from '@angular/material/sort'; import { MatTableDataSource } from '@angular/material/table'; import { GetInfo, Payment, PayRequest } from '../../../shared/models/clnModels'; -import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum, ScreenSizeEnum, CurrencyUnitEnum, CURRENCY_UNIT_FORMATS, APICallStatusEnum, UI_MESSAGES, PaymentTypes } from '../../../shared/services/consts-enums-functions'; +import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum, ScreenSizeEnum, CurrencyUnitEnum, CURRENCY_UNIT_FORMATS, APICallStatusEnum, UI_MESSAGES, PaymentTypes, CLN_TABLES_DEF, CLN_DEFAULT_PAGE_SETTINGS } from '../../../shared/services/consts-enums-functions'; import { ApiCallStatusPayload } from '../../../shared/models/apiCallsPayload'; import { DataService } from '../../../shared/services/data.service'; import { LoggerService } from '../../../shared/services/logger.service'; @@ -23,7 +23,8 @@ import { RTLEffects } from '../../../store/rtl.effects'; import { RTLState } from '../../../store/rtl.state'; import { openAlert, openConfirmation } from '../../../store/rtl.actions'; import { sendPayment } from '../../store/cln.actions'; -import { clnNodeInformation, clnNodeSettings, payments } from '../../store/cln.selector'; +import { clnNodeInformation, clnNodeSettings, clnPageSettings, payments } from '../../store/cln.selector'; +import { PageSettingsCLN } from '../../../shared/models/pageSettings'; @Component({ selector: 'rtl-cln-lightning-payments', @@ -39,6 +40,8 @@ export class CLNLightningPaymentsComponent implements OnInit, AfterViewInit, OnD @ViewChild('sendPaymentForm', { static: false }) form; @ViewChild(MatSort, { static: false }) sort: MatSort | undefined; @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined; + public PAGE_ID = 'payments'; + public TABLE_ID = 'payments'; public faHistory = faHistory; public newlyAddedPayment = ''; public selNode: SelNodeChild | null = {}; @@ -56,28 +59,29 @@ export class CLNLightningPaymentsComponent implements OnInit, AfterViewInit, OnD public screenSize = ''; public screenSizeEnum = ScreenSizeEnum; public errorMessage = ''; + public pageSettings: PageSettingsCLN[] = []; public selFilter = ''; public apiCallStatus: ApiCallStatusPayload | null = null; public apiCallStatusEnum = APICallStatusEnum; - private unSubs: Array> = [new Subject(), new Subject(), new Subject(), new Subject()]; + private unSubs: Array> = [new Subject(), new Subject(), new Subject(), new Subject(), new Subject(), new Subject(), new Subject(), new Subject()]; constructor(private logger: LoggerService, private commonService: CommonService, private store: Store, private rtlEffects: RTLEffects, private clnEffects: CLNEffects, private decimalPipe: DecimalPipe, private titleCasePipe: TitleCasePipe, private datePipe: DatePipe, private dataService: DataService) { this.screenSize = this.commonService.getScreenSize(); if (this.screenSize === ScreenSizeEnum.XS) { this.flgSticky = false; - this.displayedColumns = ['created_at', 'actions']; + // this.displayedColumns = ['created_at', 'actions']; this.mppColumns = ['groupTotal', 'groupAction']; } else if (this.screenSize === ScreenSizeEnum.SM) { this.flgSticky = false; - this.displayedColumns = ['created_at', 'msatoshi', 'actions']; + // this.displayedColumns = ['created_at', 'msatoshi', 'actions']; this.mppColumns = ['groupTotal', 'groupAmtRecv', 'groupAction']; } else if (this.screenSize === ScreenSizeEnum.MD) { this.flgSticky = false; - this.displayedColumns = ['created_at', 'type', 'msatoshi_sent', 'msatoshi', 'actions']; + // this.displayedColumns = ['created_at', 'type', 'msatoshi_sent', 'msatoshi', 'actions']; this.mppColumns = ['groupTotal', 'groupType', 'groupAmtSent', 'groupAmtRecv', 'groupAction']; } else { this.flgSticky = true; - this.displayedColumns = ['created_at', 'type', 'payment_hash', 'msatoshi_sent', 'msatoshi', 'actions']; + // this.displayedColumns = ['created_at', 'type', 'payment_hash', 'msatoshi_sent', 'msatoshi', 'actions']; this.mppColumns = ['groupTotal', 'groupType', 'groupHash', 'groupAmtSent', 'groupAmtRecv', 'groupAction']; } } @@ -89,7 +93,20 @@ export class CLNLightningPaymentsComponent implements OnInit, AfterViewInit, OnD this.store.select(clnNodeInformation).pipe(takeUntil(this.unSubs[1])).subscribe((nodeInfo: GetInfo) => { this.information = nodeInfo; }); - this.store.select(payments).pipe(takeUntil(this.unSubs[2])). + this.store.select(clnPageSettings).pipe(takeUntil(this.unSubs[2])). + subscribe((settings: { pageSettings: PageSettingsCLN[], apiCallStatus: ApiCallStatusPayload }) => { + this.errorMessage = ''; + this.apiCallStatus = settings.apiCallStatus; + if (this.apiCallStatus.status === APICallStatusEnum.ERROR) { + this.errorMessage = this.apiCallStatus.message || ''; + } + this.pageSettings = settings.pageSettings; + this.displayedColumns = JSON.parse(JSON.stringify(this.pageSettings.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.TABLE_ID)?.showColumns || CLN_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.TABLE_ID)?.showColumns)); + this.displayedColumns.unshift('status'); + this.displayedColumns.push('actions'); + this.logger.info(this.displayedColumns); + }); + this.store.select(payments).pipe(takeUntil(this.unSubs[3])). subscribe((paymentsSeletor: { payments: Payment[], apiCallStatus: ApiCallStatusPayload }) => { this.errorMessage = ''; this.apiCallStatus = paymentsSeletor.apiCallStatus; @@ -97,7 +114,7 @@ export class CLNLightningPaymentsComponent implements OnInit, AfterViewInit, OnD this.errorMessage = !this.apiCallStatus.message ? '' : (typeof (this.apiCallStatus.message) === 'object') ? JSON.stringify(this.apiCallStatus.message) : this.apiCallStatus.message; } this.paymentJSONArr = paymentsSeletor.payments || []; - if (this.paymentJSONArr.length > 0 && this.sort && this.paginator) { + if (this.paymentJSONArr.length && this.paymentJSONArr.length > 0 && this.sort && this.paginator) { this.loadPaymentsTable(this.paymentJSONArr); } this.logger.info(paymentsSeletor); @@ -105,7 +122,7 @@ export class CLNLightningPaymentsComponent implements OnInit, AfterViewInit, OnD } ngAfterViewInit() { - if (this.paymentJSONArr.length > 0 && this.sort && this.paginator) { + if (this.paymentJSONArr.length && this.paymentJSONArr.length > 0 && this.sort && this.paginator) { this.loadPaymentsTable(this.paymentJSONArr); } } @@ -122,7 +139,7 @@ export class CLNLightningPaymentsComponent implements OnInit, AfterViewInit, OnD this.sendPayment(); } else { this.dataService.decodePayment(this.paymentRequest, false). - pipe(takeUntil(this.unSubs[1])).subscribe((decodedPayment: PayRequest) => { + pipe(takeUntil(this.unSubs[4])).subscribe((decodedPayment: PayRequest) => { this.paymentDecoded = decodedPayment; if (this.paymentDecoded.created_at) { if (!this.paymentDecoded.msatoshi) { @@ -210,12 +227,12 @@ export class CLNLightningPaymentsComponent implements OnInit, AfterViewInit, OnD this.paymentDecodedHint = ''; if (this.paymentRequest && this.paymentRequest.length > 100) { this.dataService.decodePayment(this.paymentRequest, false). - pipe(takeUntil(this.unSubs[1])).subscribe((decodedPayment: PayRequest) => { + pipe(takeUntil(this.unSubs[5])).subscribe((decodedPayment: PayRequest) => { this.paymentDecoded = decodedPayment; if (this.paymentDecoded.msatoshi) { if (this.selNode?.fiatConversion) { this.commonService.convertCurrency(this.paymentDecoded.msatoshi ? this.paymentDecoded.msatoshi / 1000 : 0, CurrencyUnitEnum.SATS, CurrencyUnitEnum.OTHER, (this.selNode.currencyUnits && this.selNode.currencyUnits.length > 2 ? this.selNode.currencyUnits[2] : ''), this.selNode.fiatConversion). - pipe(takeUntil(this.unSubs[3])). + pipe(takeUntil(this.unSubs[6])). subscribe({ next: (data) => { this.paymentDecodedHint = 'Sending: ' + this.decimalPipe.transform(this.paymentDecoded.msatoshi ? this.paymentDecoded.msatoshi / 1000 : 0) + ' Sats (' + data.symbol + this.decimalPipe.transform((data.OTHER ? data.OTHER : 0), CURRENCY_UNIT_FORMATS.OTHER) + ') | Memo: ' + this.paymentDecoded.description; diff --git a/src/app/shared/components/node-config/page-settings/page-settings.component.html b/src/app/shared/components/node-config/page-settings/page-settings.component.html index 5e8cdf36..a1a899e7 100644 --- a/src/app/shared/components/node-config/page-settings/page-settings.component.html +++ b/src/app/shared/components/node-config/page-settings/page-settings.component.html @@ -34,10 +34,11 @@ - + {{field | camelcaseWithReplace:'_'}} + Total selected columns should be between 2 and {{tableFieldsDef[table.tableId].maxColumns}}
diff --git a/src/app/shared/components/node-config/page-settings/page-settings.component.ts b/src/app/shared/components/node-config/page-settings/page-settings.component.ts index 1f10a31e..fb7804f8 100644 --- a/src/app/shared/components/node-config/page-settings/page-settings.component.ts +++ b/src/app/shared/components/node-config/page-settings/page-settings.component.ts @@ -5,7 +5,7 @@ import { Store } from '@ngrx/store'; import { Actions } from '@ngrx/effects'; import { faPenRuler, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons'; -import { APICallStatusEnum, CLNActions, CLN_DEFAULT_PAGE_SETTINGS, CLN_TABLE_FIELDS_DEF, PAGE_SIZE_OPTIONS, ScreenSizeEnum, SORT_ORDERS } from '../../../services/consts-enums-functions'; +import { APICallStatusEnum, CLNActions, CLN_DEFAULT_PAGE_SETTINGS, CLN_TABLES_DEF, PAGE_SIZE_OPTIONS, ScreenSizeEnum, SORT_ORDERS } from '../../../services/consts-enums-functions'; import { LoggerService } from '../../../services/logger.service'; import { CommonService } from '../../../services/common.service'; import { RTLState } from '../../../../store/rtl.state'; @@ -28,7 +28,7 @@ export class PageSettingsComponent implements OnInit, OnDestroy { public pageSizeOptions = PAGE_SIZE_OPTIONS; public pageSettings: PageSettingsCLN[] = []; public initialPageSettings: PageSettingsCLN[] = CLN_DEFAULT_PAGE_SETTINGS; - public tableFieldsDef = CLN_TABLE_FIELDS_DEF; + public tableFieldsDef = CLN_TABLES_DEF; public sortOrders = SORT_ORDERS; public apiCallStatus: ApiCallStatusPayload | null = null; public apiCallStatusEnum = APICallStatusEnum; diff --git a/src/app/shared/services/consts-enums-functions.ts b/src/app/shared/services/consts-enums-functions.ts index 7b3083d9..ea8d8345 100644 --- a/src/app/shared/services/consts-enums-functions.ts +++ b/src/app/shared/services/consts-enums-functions.ts @@ -681,7 +681,13 @@ export const CLN_DEFAULT_PAGE_SETTINGS: PageSettingsCLN[] = [ showColumns: ['expires_at', 'paid_at', 'type', 'description', 'msatoshi', 'msatoshi_received'] }] } ]; -export const CLN_TABLE_FIELDS_DEF = { - payments: ['created_at', 'type', 'payment_hash', 'msatoshi_sent', 'msatoshi', 'amount_msat', 'amount_sent_msat', 'destination', 'status', 'memo'], - invoices: ['expires_at', 'paid_at', 'type', 'description', 'msatoshi', 'msatoshi_received', 'label', 'payment_hash', 'amount_msat', 'status', 'amount_received_msat'] +export const CLN_TABLES_DEF = { + payments: { + maxColumns: 6, + allowedColumns: ['id', 'created_at', 'type', 'payment_hash', 'msatoshi_sent', 'msatoshi', 'bolt11', 'destination', 'memo', 'label'] + }, + invoices: { + maxColumns: 5, + allowedColumns: ['expires_at', 'paid_at', 'type', 'description', 'msatoshi', 'msatoshi_received', 'label', 'payment_hash', 'status'] + } };