[Node page] Update channels count when switching between open/closed

frontend/src/app/lightning/channels-list/channels-list.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { BehaviorSubject, combineLatest, merge, Observable, of } from 'rxjs';
 import { map, startWith, switchMap } from 'rxjs/operators';
@@ -12,6 +12,7 @@ import { LightningApiService } from '../lightning-api.service';
 })
 export class ChannelsListComponent implements OnInit, OnChanges {
   @Input() publicKey: string;
+  @Output() channelsStatusChangedEvent = new EventEmitter<string>();
   channels$: Observable<any>;
 
   // @ts-ignore
@@ -41,13 +42,17 @@ export class ChannelsListComponent implements OnInit, OnChanges {
 
   ngOnChanges(): void {
     this.channelStatusForm.get('status').setValue(this.defaultStatus, { emitEvent: false })
+    this.channelsStatusChangedEvent.emit(this.defaultStatus);
 
     this.channels$ = combineLatest([
       this.channelsPage$,
       this.channelStatusForm.get('status').valueChanges.pipe(startWith(this.defaultStatus))
     ])
     .pipe(
-      switchMap(([page, status]) =>this.lightningApiService.getChannelsByNodeId$(this.publicKey, (page -1) * this.itemsPerPage, status)),
+      switchMap(([page, status]) => {
+        this.channelsStatusChangedEvent.emit(status);
+        return this.lightningApiService.getChannelsByNodeId$(this.publicKey, (page -1) * this.itemsPerPage, status);
+      }),
       map((response) => {
         return {
           channels: response.body,

frontend/src/app/lightning/node/node.component.html

@@ -24,7 +24,7 @@
               <tr>
                 <td i18n="address.total-sent">Total channels</td>
                 <td>
-                  {{ node.channel_count }}
+                  {{ node.channel_active_count }}
                 </td>
               </tr>
               <tr>
@@ -108,7 +108,7 @@
     <br>
 
     <div class="d-flex justify-content-between">
-      <h2>Channels ({{ node.channel_count }})</h2>
+      <h2>Channels ({{ channelsListStatus === 'open' ? node.channel_active_count : node.channel_closed_count }})</h2>
       <div class="d-flex align-items-center justify-content-end">
         <span style="margin-bottom: 0.5rem">List</span>&nbsp;
         <label class="switch">
@@ -120,7 +120,8 @@
     </div>
 
     <app-nodes-channels-map *ngIf="channelsListMode === 'map'" [style]="'nodepage'" [publicKey]="node.public_key"></app-nodes-channels-map>
-    <app-channels-list *ngIf="channelsListMode === 'list'" [publicKey]="node.public_key"></app-channels-list>
+    <app-channels-list *ngIf="channelsListMode === 'list'" [publicKey]="node.public_key"
+      (channelsStatusChangedEvent)="onChannelsListStatusChanged($event)"></app-channels-list>
 
 </div>
 

frontend/src/app/lightning/node/node.component.ts

@@ -18,6 +18,7 @@ export class NodeComponent implements OnInit {
   selectedSocketIndex = 0;
   qrCodeVisible = false;
   channelsListMode = 'list';
+  channelsListStatus: string;
 
   constructor(
     private lightningApiService: LightningApiService,
@@ -69,4 +70,8 @@ export class NodeComponent implements OnInit {
       this.channelsListMode = 'list';
     }
   }
+
+  onChannelsListStatusChanged(e) {
+    this.channelsListStatus = e;
+  }
 }