Marie Verdonck
2020-11-16 17:57:59 +01:00
parent 2ee815908f
commit 140f660cf4
4 changed files with 50 additions and 34 deletions

View File

@@ -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);
});
}

View File

@@ -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>;

View File

@@ -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>

View File

@@ -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<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;
@@ -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) {