Communities & Collections tree browser updates - Replaced #2597

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

@@ -24,6 +24,7 @@
 import { ShowMoreFlatNode } from './show-more-flat-node.model';
 import { FindListOptions } from '../core/data/find-list-options.model';
 import { AppConfig, APP_CONFIG } from 'src/config/app-config.interface';
+import { v4 as uuidv4 } from 'uuid';
 
 // Helper method to combine and flatten an array of observables of flatNode arrays
 export const combineAndFlatten = (obsList: Observable<FlatNode[]>[]): Observable<FlatNode[]> =>
@@ -186,7 +187,7 @@
           return this.transformCommunity(community, level, parent, expandedNodes);
         });
       if (currentPage < listOfPaginatedCommunities.totalPages && currentPage === listOfPaginatedCommunities.currentPage) {
-        obsList = [...obsList, observableOf([showMoreFlatNode('community', level, parent)])];
+        obsList = [...obsList, observableOf([showMoreFlatNode(`community-${uuidv4()}`, level, parent)])];
       }
 
       return combineAndFlatten(obsList);
@@ -257,7 +258,7 @@
                 let nodes = rd.payload.page
                   .map((collection: Collection) => toFlatNode(collection, observableOf(false), level + 1, false, communityFlatNode));
                 if (currentCollectionPage < rd.payload.totalPages && currentCollectionPage === rd.payload.currentPage) {
-                  nodes = [...nodes, showMoreFlatNode('collection', level + 1, communityFlatNode)];
+                  nodes = [...nodes, showMoreFlatNode(`collection-${uuidv4()}`, level + 1, communityFlatNode)];
                 }
                 return nodes;
               } else {

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

@@ -8,7 +8,7 @@
         <span class="fa fa-chevron-right invisible" aria-hidden="true"></span>
       </button>
       <div class="align-middle pt-2">
-        <button *ngIf="node!==loadingNode" (click)="getNextPage(node)"
+        <button *ngIf="!(dataSource.loading$ | async)" (click)="getNextPage(node)"
            class="btn btn-outline-primary btn-sm" role="button">
            <i class="fas fa-angle-down"></i> {{ 'communityList.showMore' | translate }}
         </button>

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

@@ -17,6 +17,7 @@ import { By } from '@angular/platform-browser';
 import { isEmpty, isNotEmpty } from '../../shared/empty.util';
 import { FlatNode } from '../flat-node.model';
 import { RouterLinkWithHref } from '@angular/router';
+import { v4 as uuidv4 } from 'uuid';
 
 describe('CommunityListComponent', () => {
   let component: CommunityListComponent;
@@ -138,7 +139,7 @@ describe('CommunityListComponent', () => {
         }
         if (expandedNodes === null || isEmpty(expandedNodes)) {
           if (showMoreTopComNode) {
-            return observableOf([...mockTopFlatnodesUnexpanded.slice(0, endPageIndex), showMoreFlatNode('community', 0, null)]);
+            return observableOf([...mockTopFlatnodesUnexpanded.slice(0, endPageIndex), showMoreFlatNode(`community-${uuidv4()}`, 0, null)]);
           } else {
             return observableOf(mockTopFlatnodesUnexpanded.slice(0, endPageIndex));
           }
@@ -165,21 +166,21 @@ describe('CommunityListComponent', () => {
                   const endSubComIndex = this.pageSize * expandedParent.currentCommunityPage;
                   flatnodes = [...flatnodes, ...subComFlatnodes.slice(0, endSubComIndex)];
                   if (subComFlatnodes.length > endSubComIndex) {
-                    flatnodes = [...flatnodes, showMoreFlatNode('community', topNode.level + 1, expandedParent)];
+                    flatnodes = [...flatnodes, showMoreFlatNode(`community-${uuidv4()}`, topNode.level + 1, expandedParent)];
                   }
                 }
                 if (isNotEmpty(collFlatnodes)) {
                   const endColIndex = this.pageSize * expandedParent.currentCollectionPage;
                   flatnodes = [...flatnodes, ...collFlatnodes.slice(0, endColIndex)];
                   if (collFlatnodes.length > endColIndex) {
-                    flatnodes = [...flatnodes, showMoreFlatNode('collection', topNode.level + 1, expandedParent)];
+                    flatnodes = [...flatnodes, showMoreFlatNode(`collection-${uuidv4()}`, topNode.level + 1, expandedParent)];
                   }
                 }
               }
             }
           });
           if (showMoreTopComNode) {
-            flatnodes = [...flatnodes, showMoreFlatNode('community', 0, null)];
+            flatnodes = [...flatnodes, showMoreFlatNode(`community-${uuidv4()}`, 0, null)];
           }
           return observableOf(flatnodes);
         }

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

@@ -84,7 +84,7 @@
   toggleExpanded(node: FlatNode) {
     this.loadingNode = node;
     if (node.isExpanded) {
-      this.expandedNodes = this.expandedNodes.filter((node2) => node2.name !== node.name);
+      this.expandedNodes = this.expandedNodes.filter((node2) => node2.id !== node.id);
       node.isExpanded = false;
     } else {
       this.expandedNodes.push(node);
@@ -111,19 +111,18 @@
   getNextPage(node: FlatNode): void {
     this.loadingNode = node;
     if (node.parent != null) {
-      if (node.id === 'collection') {
+      if (node.id.startsWith('collection')) {
         const parentNodeInExpandedNodes = this.expandedNodes.find((node2: FlatNode) => node.parent.id === node2.id);
         parentNodeInExpandedNodes.currentCollectionPage++;
       }
-      if (node.id === 'community') {
+      if (node.id.startsWith('community')) {
         const parentNodeInExpandedNodes = this.expandedNodes.find((node2: FlatNode) => node.parent.id === node2.id);
         parentNodeInExpandedNodes.currentCommunityPage++;
       }
-      this.dataSource.loadCommunities(this.paginationConfig, this.expandedNodes);
     } else {
       this.paginationConfig.currentPage++;
-      this.dataSource.loadCommunities(this.paginationConfig, this.expandedNodes);
     }
+    this.dataSource.loadCommunities(this.paginationConfig, this.expandedNodes);
   }
 
 }