From 140f660cf46fd4153d5264f829abb3c80d7f00ad Mon Sep 17 00:00:00 2001 From: Marie Verdonck Date: Mon, 16 Nov 2020 17:57:59 +0100 Subject: [PATCH] 74345: Fix com/col tree issues (#899 & #908): https://github.com/DSpace/dspace-angular/issues/899 https://github.com/DSpace/dspace-angular/issues/908 --- .../community-list-datasource.ts | 23 ++++----- .../community-list-service.ts | 48 ++++++++++++------- .../community-list.component.html | 2 +- .../community-list.component.ts | 11 ++--- 4 files changed, 50 insertions(+), 34 deletions(-) diff --git a/src/app/community-list-page/community-list-datasource.ts b/src/app/community-list-page/community-list-datasource.ts index b77cbb5246..041785e9e8 100644 --- a/src/app/community-list-page/community-list-datasource.ts +++ b/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 { private communityList$ = new BehaviorSubject([]); public loading$ = new BehaviorSubject(false); + private subLoadCommunities: Subscription; - constructor(private communityListService: CommunityListService, - private zone: NgZone) { + constructor(private communityListService: CommunityListService) { } connect(collectionViewer: CollectionViewer): Observable { @@ -26,13 +27,13 @@ export class CommunityListDatasource implements DataSource { 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); }); } diff --git a/src/app/community-list-page/community-list-service.ts b/src/app/community-list-page/community-list-service.ts index 4699e6faaa..5905fd8639 100644 --- a/src/app/community-list-page/community-list-service.ts +++ b/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) => this.transformListOfCommunities(topComs, 0, null, expandedNodes))); + return topComs$.pipe(switchMap((topComs: PaginatedList) => this.transformListOfCommunities(topComs, 0, null, expandedNodes))); }; /** @@ -228,9 +227,13 @@ export class CommunityListService { currentPage: i }) .pipe( - getSucceededRemoteData(), - flatMap((rd: RemoteData>) => - this.transformListOfCommunities(rd.payload, level + 1, communityFlatNode, expandedNodes)) + switchMap((rd: RemoteData>) => { + 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>) => { - 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; hasSubcoms$ = this.communityDataService.findByParent(community.uuid, { elementsPerPage: 1 }) .pipe( - getSucceededRemoteData(), - map((results) => results.payload.totalElements > 0), + map((rd: RemoteData>) => { + 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>) => { + if (hasValue(rd) && hasValue(rd.payload)) { + return rd.payload.totalElements > 0; + } else { + return false; + } + }), ); let hasChildren$: Observable; diff --git a/src/app/community-list-page/community-list/community-list.component.html b/src/app/community-list-page/community-list/community-list.component.html index c179715bf1..07e06f3131 100644 --- a/src/app/community-list-page/community-list/community-list.component.html +++ b/src/app/community-list-page/community-list/community-list.component.html @@ -28,7 +28,7 @@ diff --git a/src/app/community-list-page/community-list/community-list.component.ts b/src/app/community-list-page/community-list/community-list.component.ts index be96ff1a0a..49065c5ec5 100644 --- a/src/app/community-list-page/community-list/community-list.component.ts +++ b/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,15 +24,14 @@ export class CommunityListComponent implements OnInit, OnDestroy { public loadingNode: FlatNode; treeControl = new FlatTreeControl( - (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; @@ -40,7 +39,7 @@ export class CommunityListComponent implements OnInit, OnDestroy { } 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) {