From 6163f24268073d2b00f87948c0714437fdaf7cfb Mon Sep 17 00:00:00 2001
From: ShahanaFarooqui <shahana.farooqui@gmail.com>
Date: Thu, 27 Oct 2022 10:16:18 -0700
Subject: [PATCH] Page setting bug fix

---
 src/app/lnd/store/lnd.effects.ts                 |  4 ++--
 .../page-settings/page-settings.component.html   | 16 ++++++++--------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/app/lnd/store/lnd.effects.ts b/src/app/lnd/store/lnd.effects.ts
index c6989fbb..ca91fbe0 100644
--- a/src/app/lnd/store/lnd.effects.ts
+++ b/src/app/lnd/store/lnd.effects.ts
@@ -1200,8 +1200,8 @@ export class LNDEffects implements OnDestroy {
         map((settings: any) => {
           this.logger.info(settings);
           this.store.dispatch(updateLNDAPICallStatus({ payload: { action: 'FetchPageSettings', status: APICallStatusEnum.COMPLETED } }));
-          this.invoicesPageSize = (settings.find((page) => page.pageId === 'transactions')?.tables.find((table) => table.tableId === 'invoices') || LND_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === 'transactions')?.tables.find((table) => table.tableId === 'invoices')).recordsPerPage;
-          this.paymentsPageSize = (settings.find((page) => page.pageId === 'transactions')?.tables.find((table) => table.tableId === 'payments') || LND_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === 'transactions')?.tables.find((table) => table.tableId === 'payments')).recordsPerPage;
+          this.invoicesPageSize = (settings ? (settings.find((page) => page.pageId === 'transactions')?.tables.find((table) => table.tableId === 'invoices')) : LND_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === 'transactions')?.tables.find((table) => table.tableId === 'invoices')).recordsPerPage;
+          this.paymentsPageSize = (settings ? (settings.find((page) => page.pageId === 'transactions')?.tables.find((table) => table.tableId === 'payments')) : LND_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === 'transactions')?.tables.find((table) => table.tableId === 'payments')).recordsPerPage;
           this.store.dispatch(fetchInvoices({ payload: { num_max_invoices: this.invoicesPageSize, reversed: true } }));
           // this.store.dispatch(fetchPayments({ payload: { max_payments: 100000, reversed: true } }));
           return {
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 8aa2f0ab..1a594fe6 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
@@ -11,43 +11,43 @@
       </mat-expansion-panel-header>
       <div fxLayout="column" fxLayoutAlign="start stretch" *ngFor="let table of page.tables" class="padding-gap-x-large table-setting-row">
         <div fxLayout="row" fxLayoutAlign="space-between center">
-          <span fxFlex="10">{{table.tableId | camelcaseWithReplace:'_'}}: </span>
+          <span fxFlex="10">{{table.tableId | camelcaseWithReplace:'_'}}:</span>
           <mat-form-field fxFlex="10">
-            <mat-select [disabled]="disbalePageSize(page.pageId, table.tableId)" [(ngModel)]="table.recordsPerPage" placeholder="Records/Page" name="{{table.tableId}}-page-size-options" tabindex="2" required>
+            <mat-select [disabled]="disbalePageSize(page.pageId, table.tableId)" [(ngModel)]="table.recordsPerPage" placeholder="Records/Page" name="{{page.pageId}}{{table.tableId}}-page-size-options" tabindex="2" required>
               <mat-option *ngFor="let pageSizeOption of pageSizeOptions" [value]="pageSizeOption">
                 {{pageSizeOption}}
               </mat-option>
             </mat-select>
           </mat-form-field>
           <mat-form-field fxFlex="10">
-            <mat-select [(ngModel)]="table.sortBy" placeholder="Sort By" name="{{table.tableId}}-sort-by" tabindex="3" required>
+            <mat-select [(ngModel)]="table.sortBy" placeholder="Sort By" name="{{page.pageId}}{{table.tableId}}-sort-by" tabindex="3" required>
               <mat-option *ngFor="let field of table.columnSelection" [value]="field">
                 {{field | camelcaseWithReplace:'_'}}
               </mat-option>
             </mat-select>
           </mat-form-field>
           <mat-form-field fxFlex="10">
-            <mat-select [(ngModel)]="table.sortOrder" placeholder="Sort Order" name="{{table.tableId}}-sort-order" tabindex="4" required>
+            <mat-select [(ngModel)]="table.sortOrder" placeholder="Sort Order" name="{{page.pageId}}{{table.tableId}}-sort-order" tabindex="4" required>
               <mat-option *ngFor="let so of sortOrders" [value]="so">
                 {{so === 'desc' ? 'Descending' : 'Ascending'}}
               </mat-option>
             </mat-select>
           </mat-form-field>
           <mat-form-field fxFlex="15">
-            <mat-select [(ngModel)]="table.columnSelectionSM" placeholder="Column selection (Mobile)" name="{{table.tableId}}-columns-selection-sm" tabindex="5" multiple required>
+            <mat-select [(ngModel)]="table.columnSelectionSM" placeholder="Column selection (Mobile)" name="{{page.pageId}}{{table.tableId}}-columns-selection-sm" tabindex="5" multiple required>
               <mat-option *ngFor="let field of tableFieldsDef[page.pageId][table.tableId].allowedColumns" [value]="field" [disabled]="(table.columnSelectionSM.length <= 1 && table.columnSelectionSM.includes(field)) || (table.columnSelectionSM.length >= 3 && !table.columnSelectionSM.includes(field))">
                 {{field | camelcaseWithReplace:'_'}}
               </mat-option>
             </mat-select>
-            <mat-hint>Columns (mobile) should be between 1 and 3</mat-hint>
+            <mat-hint>Column selected (mobile) should be between 1 and 3</mat-hint>
           </mat-form-field>
           <mat-form-field fxFlex="40">
-            <mat-select [(ngModel)]="table.columnSelection" (selectionChange)="oncolumnSelectionChange(table)" placeholder="Column selection (Desktop)" name="{{table.tableId}}-columns-selection" tabindex="6" multiple required>
+            <mat-select [(ngModel)]="table.columnSelection" (selectionChange)="oncolumnSelectionChange(table)" placeholder="Column selection (Desktop)" name="{{page.pageId}}{{table.tableId}}-columns-selection" tabindex="6" multiple required>
               <mat-option *ngFor="let field of tableFieldsDef[page.pageId][table.tableId].allowedColumns" [value]="field" [disabled]="(table.columnSelection.length <= 2 && table.columnSelection.includes(field)) || (table.columnSelection.length >= tableFieldsDef[page.pageId][table.tableId].maxColumns && !table.columnSelection.includes(field))">
                   {{field | camelcaseWithReplace:'_'}}
               </mat-option>
             </mat-select>
-            <mat-hint>Column selection should be between 2 and {{tableFieldsDef[page.pageId][table.tableId].maxColumns}}</mat-hint>
+            <mat-hint>Number of column selected should be between 2 and {{tableFieldsDef[page.pageId][table.tableId].maxColumns}}</mat-hint>
           </mat-form-field>
           <button mat-icon-button color="primary" type="button" tabindex="7" (click)="onTableReset(page.pageId, table)" matTooltip="Reset to Default"><mat-icon>restore</mat-icon></button>
         </div>