Fix com/col tree issues (#899 & #908)

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

@@ -1,9 +1,10 @@
-import { NgZone } from '@angular/core';
+import { Subscription } from 'rxjs/internal/Subscription';
 import { FindListOptions } from '../core/data/request.models';
+import { hasValue } from '../shared/empty.util';
 import { CommunityListService, FlatNode } from './community-list-service';
 import { CollectionViewer, DataSource } from '@angular/cdk/typings/collections';
 import { BehaviorSubject, Observable, } from 'rxjs';
-import { finalize, take, } from 'rxjs/operators';
+import { finalize } from 'rxjs/operators';
 
 /**
  * DataSource object needed by a CDK Tree to render its nodes.
@@ -15,9 +16,9 @@ export class CommunityListDatasource implements DataSource<FlatNode> {
 
   private communityList$ = new BehaviorSubject<FlatNode[]>([]);
   public loading$ = new BehaviorSubject<boolean>(false);
+  private subLoadCommunities: Subscription;
 
-  constructor(private communityListService: CommunityListService,
-              private zone: NgZone) {
+  constructor(private communityListService: CommunityListService) {
   }
 
   connect(collectionViewer: CollectionViewer): Observable<FlatNode[]> {
@@ -26,13 +27,13 @@ export class CommunityListDatasource implements DataSource<FlatNode> {
 
   loadCommunities(findOptions: FindListOptions, expandedNodes: FlatNode[]) {
     this.loading$.next(true);
-    this.zone.runOutsideAngular(() => {
-      this.communityListService.loadCommunities(findOptions, expandedNodes).pipe(
-        take(1),
-        finalize(() => this.zone.run(() => this.loading$.next(false))),
-      ).subscribe((flatNodes: FlatNode[]) => {
-        this.zone.run(() => this.communityList$.next(flatNodes));
-      });
+    if (hasValue(this.subLoadCommunities)) {
+      this.subLoadCommunities.unsubscribe();
+    }
+    this.subLoadCommunities = this.communityListService.loadCommunities(findOptions, expandedNodes).pipe(
+      finalize(() => this.loading$.next(false)),
+    ).subscribe((flatNodes: FlatNode[]) => {
+      this.communityList$.next(flatNodes);
     });
   }
 

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

@@ -2,13 +2,12 @@ import { Injectable } from '@angular/core';
 import { createSelector, Store } from '@ngrx/store';
 import { combineLatest as observableCombineLatest } from 'rxjs/internal/observable/combineLatest';
 import { Observable, of as observableOf } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
 import { AppState } from '../app.reducer';
 import { CommunityDataService } from '../core/data/community-data.service';
 import { FindListOptions } from '../core/data/request.models';
-import { map, flatMap } from 'rxjs/operators';
 import { Community } from '../core/shared/community.model';
 import { Collection } from '../core/shared/collection.model';
-import { getSucceededRemoteData } from '../core/shared/operators';
 import { PageInfo } from '../core/shared/page-info.model';
 import { hasValue, isNotEmpty } from '../shared/empty.util';
 import { RemoteData } from '../core/data/remote-data';
@@ -148,7 +147,7 @@ export class CommunityListService {
         return new PaginatedList(newPageInfo, newPage);
       })
     );
-    return topComs$.pipe(flatMap((topComs: PaginatedList<Community>) => this.transformListOfCommunities(topComs, 0, null, expandedNodes)));
+    return topComs$.pipe(switchMap((topComs: PaginatedList<Community>) => this.transformListOfCommunities(topComs, 0, null, expandedNodes)));
   };
 
   /**
@@ -228,9 +227,13 @@ export class CommunityListService {
           currentPage: i
         })
           .pipe(
-            getSucceededRemoteData(),
-            flatMap((rd: RemoteData<PaginatedList<Community>>) =>
-              this.transformListOfCommunities(rd.payload, level + 1, communityFlatNode, expandedNodes))
+            switchMap((rd: RemoteData<PaginatedList<Community>>) => {
+              if (hasValue(rd) && hasValue(rd.payload)) {
+                return this.transformListOfCommunities(rd.payload, level + 1, communityFlatNode, expandedNodes);
+              } else {
+                return [];
+              }
+            })
           );
 
         subcoms = [...subcoms, nextSetOfSubcommunitiesPage];
@@ -246,14 +249,17 @@ export class CommunityListService {
           currentPage: i
         })
           .pipe(
-            getSucceededRemoteData(),
             map((rd: RemoteData<PaginatedList<Collection>>) => {
-              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)];
+              if (hasValue(rd) && hasValue(rd.payload)) {
+                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)];
+                }
+                return nodes;
+              } else {
+                return [];
               }
-              return nodes;
             }),
           );
         collections = [...collections, nextSetOfCollectionsPage];
@@ -275,14 +281,24 @@ export class CommunityListService {
     let hasColls$: Observable<boolean>;
     hasSubcoms$ = this.communityDataService.findByParent(community.uuid, { elementsPerPage: 1 })
       .pipe(
-        getSucceededRemoteData(),
-        map((results) => results.payload.totalElements > 0),
+        map((rd: RemoteData<PaginatedList<Community>>) => {
+          if (hasValue(rd) && hasValue(rd.payload)) {
+            return rd.payload.totalElements > 0;
+          } else {
+            return false;
+          }
+        }),
       );
 
     hasColls$ = this.collectionDataService.findByParent(community.uuid, { elementsPerPage: 1 })
       .pipe(
-        getSucceededRemoteData(),
-        map((results) => results.payload.totalElements > 0),
+        map((rd: RemoteData<PaginatedList<Collection>>) => {
+          if (hasValue(rd) && hasValue(rd.payload)) {
+            return rd.payload.totalElements > 0;
+          } else {
+            return false;
+          }
+        }),
       );
 
     let hasChildren$: Observable<boolean>;

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

@@ -28,7 +28,7 @@
       <button type="button" class="btn btn-default" cdkTreeNodeToggle
               [attr.aria-label]="'toggle ' + node.name"
               (click)="toggleExpanded(node)"
-              [ngClass]="(node.isExpandable$ | async) ? 'visible' : 'invisible'">
+              [ngClass]="(hasChild(null, node)| async) ? 'visible' : 'invisible'">
         <span class="{{node.isExpanded ? 'fa fa-chevron-down' : 'fa fa-chevron-right'}}"
               aria-hidden="true"></span>
       </button>

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

@@ -1,4 +1,4 @@
-import { Component, NgZone, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { take } from 'rxjs/operators';
 import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
 import { FindListOptions } from '../../core/data/request.models';
@@ -24,23 +24,22 @@ export class CommunityListComponent implements OnInit, OnDestroy {
   public loadingNode: FlatNode;
 
   treeControl = new FlatTreeControl<FlatNode>(
-    (node) => node.level, (node) => true
+    (node: FlatNode) => node.level, (node: FlatNode) => true
   );
 
   dataSource: CommunityListDatasource;
 
   paginationConfig: FindListOptions;
 
-  constructor(private communityListService: CommunityListService,
-              private zone: NgZone) {
+  constructor(private communityListService: CommunityListService) {
     this.paginationConfig = new FindListOptions();
     this.paginationConfig.elementsPerPage = 2;
     this.paginationConfig.currentPage = 1;
     this.paginationConfig.sort = new SortOptions('dc.title', SortDirection.ASC);
   }
 
   ngOnInit() {
-    this.dataSource = new CommunityListDatasource(this.communityListService, this.zone);
+    this.dataSource = new CommunityListDatasource(this.communityListService);
     this.communityListService.getLoadingNodeFromStore().pipe(take(1)).subscribe((result) => {
       this.loadingNode = result;
     });
@@ -65,7 +64,7 @@ export class CommunityListComponent implements OnInit, OnDestroy {
   }
 
   /**
-   * Toggles the expanded variable of a node, adds it to the exapanded nodes list and reloads the tree so this node is expanded
+   * Toggles the expanded variable of a node, adds it to the expanded nodes list and reloads the tree so this node is expanded
    * @param node  Node we want to expand
    */
   toggleExpanded(node: FlatNode) {