65528: ComCol Tree with flatlist that gets generated at every (un)collapse

> Only creates flatlist with expanded nodes

src/app/community-list-page/CommunityListDataSource.ts

@@ -1,7 +1,7 @@
 import {CommunityForList, CommunityListService} from './CommunityListService';
 import {CollectionViewer, DataSource} from '@angular/cdk/typings/collections';
 import {BehaviorSubject, Observable, of} from 'rxjs';
-import {catchError, finalize, map} from 'rxjs/operators';
+import {catchError, finalize, map, take} from 'rxjs/operators';
 
 export interface CommunityFlatNode {
     expandable: boolean;
@@ -30,17 +30,18 @@ export class CommunityListDataSource implements DataSource<CommunityFlatNode> {
         this.loadingSubject.complete();
     }
 
-    loadCommunities() {
+    loadCommunities(expandedNodes: CommunityFlatNode[]) {
         this.loadingSubject.next(true);
 
         this.communityListService.getCommunityList()
             .pipe(
+                take(1),
                 catchError(() => of([])),
                 finalize(() => this.loadingSubject.next(false)),
                 map((result: CommunityForList[]) => {
                     const communityFlatNodes: CommunityFlatNode[] = [];
                     const level = 0;
-                    return this.transformListOfCommunities(result, level, communityFlatNodes, null);
+                    return this.transformListOfCommunities(result, level, communityFlatNodes, null, expandedNodes);
                 })
             )
             .subscribe((communityFlatNode) => {
@@ -51,21 +52,28 @@ export class CommunityListDataSource implements DataSource<CommunityFlatNode> {
     transformListOfCommunities(listOfCommunities: CommunityForList[],
                                level: number,
                                communityFlatNodes: CommunityFlatNode[],
-                               parent: CommunityFlatNode): CommunityFlatNode[] {
+                               parent: CommunityFlatNode,
+                               expandedNodes: CommunityFlatNode[]): CommunityFlatNode[] {
         level++;
         for (const community of listOfCommunities) {
             const hasSubComs = ((!!community.subcoms && community.subcoms.length > 0));
+            let expanded = false;
+            if (expandedNodes != null) {
+                const expandedNodesFound = expandedNodes.filter((node) => (node.name === community.name));
+                expanded = (expandedNodesFound.length > 0);
+            }
+            console.log(community.name + 'is expanded: ' + expanded);
             const communityFlatNode: CommunityFlatNode = {
                 expandable: hasSubComs,
                 name: community.name,
                 level: level,
-                isExpanded: false,
+                isExpanded: expanded,
                 community: community,
                 parent: parent
             }
             communityFlatNodes.push(communityFlatNode);
-            if (hasSubComs) {
+            if (hasSubComs && communityFlatNode.isExpanded) {
-                this.transformListOfCommunities(community.subcoms, level, communityFlatNodes, communityFlatNode);
+                this.transformListOfCommunities(community.subcoms, level, communityFlatNodes, communityFlatNode, expandedNodes);
             }
         }
         return communityFlatNodes;

src/app/community-list-page/community-list/community-list.component.html

@@ -14,7 +14,7 @@
     <div class="btn-group">
       <button type="button" class="btn btn-default" cdkTreeNodeToggle
               [attr.aria-label]="'toggle ' + node.name"
-              (click)="node.isExpanded = !node.isExpanded"
+              (click)="toggleExpanded(node)"
               [style.visibility]="node.expandable ? 'visible' : 'hidden'">
       <span class="{{treeControl.isExpanded(node) ? 'fa fa-chevron-down' : 'fa fa-chevron-right'}}" aria-hidden="true">
       </span>

src/app/community-list-page/community-list/community-list.component.ts

@@ -10,6 +10,8 @@ import {FlatTreeControl} from '@angular/cdk/tree';
 })
 export class CommunityListComponent implements OnInit {
 
+  private expandedNodes: CommunityFlatNode[] = [];
+
   treeControl = new FlatTreeControl<CommunityFlatNode>(
       (node) => node.level, (node) => node.expandable
   );
@@ -20,7 +22,7 @@ export class CommunityListComponent implements OnInit {
 
   ngOnInit() {
     this.dataSource = new CommunityListDataSource(this.communityListService);
-    this.dataSource.loadCommunities();
+    this.dataSource.loadCommunities(null);
   }
 
   hasChild = (_: number, node: CommunityFlatNode) => node.expandable;
@@ -30,8 +32,16 @@ export class CommunityListComponent implements OnInit {
     return !parent || parent.isExpanded;
   }
 
-  numberReturn(length){
+  toggleExpanded(node: CommunityFlatNode) {
-    return new Array(length);
+    if (node.isExpanded) {
+      this.expandedNodes = this.expandedNodes.filter((node2) => node2.name !== node.name);
+      node.isExpanded = false;
+    } else {
+      this.expandedNodes.push(node);
+      node.isExpanded = true;
+    }
+    this.dataSource.loadCommunities(this.expandedNodes);
+    console.log('Nr of expanded nodes' + this.expandedNodes.length);
   }
 
 }