66391: Fixed the valse positive chevron indicating node is expandable

This commit is contained in:
Marie Verdonck
2019-11-19 18:11:03 +01:00
parent 84326ef564
commit eaf0911e2e
3 changed files with 261 additions and 263 deletions

View File

@@ -1,288 +1,288 @@
import { Injectable } from '@angular/core';
import { combineLatest as observableCombineLatest } from 'rxjs/internal/observable/combineLatest';
import { Observable, of as observableOf } from 'rxjs';
import { CommunityDataService } from '../core/data/community-data.service';
import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
import { SortDirection, SortOptions } from '../core/cache/models/sort-options.model';
import { catchError, filter, map, switchMap, take, tap } from 'rxjs/operators';
import { Community } from '../core/shared/community.model';
import { Collection } from '../core/shared/collection.model';
import { hasValue, isNotEmpty } from '../shared/empty.util';
import { RemoteData } from '../core/data/remote-data';
import { PaginatedList } from '../core/data/paginated-list';
import { getCommunityPageRoute } from '../+community-page/community-page-routing.module';
import { getCollectionPageRoute } from '../+collection-page/collection-page-routing.module';
import { CollectionDataService } from '../core/data/collection-data.service';
import {Injectable} from '@angular/core';
import {combineLatest as observableCombineLatest} from 'rxjs/internal/observable/combineLatest';
import {Observable, of as observableOf} from 'rxjs';
import {CommunityDataService} from '../core/data/community-data.service';
import {PaginationComponentOptions} from '../shared/pagination/pagination-component-options.model';
import {SortDirection, SortOptions} from '../core/cache/models/sort-options.model';
import {catchError, filter, map, switchMap, take} from 'rxjs/operators';
import {Community} from '../core/shared/community.model';
import {Collection} from '../core/shared/collection.model';
import {hasValue, isNotEmpty} from '../shared/empty.util';
import {RemoteData} from '../core/data/remote-data';
import {PaginatedList} from '../core/data/paginated-list';
import {getCommunityPageRoute} from '../+community-page/community-page-routing.module';
import {getCollectionPageRoute} from '../+collection-page/collection-page-routing.module';
import {CollectionDataService} from '../core/data/collection-data.service';
export interface FlatNode {
isExpandable: boolean;
name: string;
id: string;
level: number;
isExpanded?: boolean;
parent?: FlatNode;
payload: Community | Collection | ShowMoreFlatNode;
isShowMoreNode: boolean;
route?: string;
currentCommunityPage?: number;
currentCollectionPage?: number;
isExpandable$: Observable<boolean>;
name: string;
id: string;
level: number;
isExpanded?: boolean;
parent?: FlatNode;
payload: Community | Collection | ShowMoreFlatNode;
isShowMoreNode: boolean;
route?: string;
currentCommunityPage?: number;
currentCollectionPage?: number;
}
export class ShowMoreFlatNode {
}
export const combineAndFlatten = (obsList: Array<Observable<FlatNode[]>>): Observable<FlatNode[]> =>
observableCombineLatest(...obsList).pipe(
map((matrix: FlatNode[][]) =>
matrix.reduce((combinedList, currentList: FlatNode[]) => [...combinedList, ...currentList]))
);
observableCombineLatest(...obsList).pipe(
map((matrix: FlatNode[][]) =>
matrix.reduce((combinedList, currentList: FlatNode[]) => [...combinedList, ...currentList]))
);
export const toFlatNode = (
c: Community | Collection,
isExpandable: boolean,
level: number,
isExpanded: boolean,
parent?: FlatNode
c: Community | Collection,
isExpandable: Observable<boolean>,
level: number,
isExpanded: boolean,
parent?: FlatNode
): FlatNode => ({
isExpandable: isExpandable,
name: c.name,
id: c.id,
level: level,
isExpanded,
parent,
payload: c,
isShowMoreNode: false,
route: c instanceof Community ? getCommunityPageRoute(c.id) : getCollectionPageRoute(c.id),
isExpandable$: isExpandable,
name: c.name,
id: c.id,
level: level,
isExpanded,
parent,
payload: c,
isShowMoreNode: false,
route: c instanceof Community ? getCommunityPageRoute(c.id) : getCollectionPageRoute(c.id),
});
export const showMoreFlatNode = (
id: string,
level: number,
parent: FlatNode
id: string,
level: number,
parent: FlatNode
): FlatNode => ({
isExpandable: false,
name: 'Show More Flatnode',
id: id,
level: level,
isExpanded: false,
parent: parent,
payload: new ShowMoreFlatNode(),
isShowMoreNode: true,
isExpandable$: observableOf(false),
name: 'Show More Flatnode',
id: id,
level: level,
isExpanded: false,
parent: parent,
payload: new ShowMoreFlatNode(),
isShowMoreNode: true,
});
// tslint:disable-next-line:max-classes-per-file
@Injectable()
export class CommunityListService {
// page-limited list of top-level communities
payloads$: Array<Observable<PaginatedList<Community>>>;
// page-limited list of top-level communities
payloads$: Array<Observable<PaginatedList<Community>>>;
topCommunitiesConfig: PaginationComponentOptions;
topCommunitiesSortConfig: SortOptions;
topCommunitiesConfig: PaginationComponentOptions;
topCommunitiesSortConfig: SortOptions;
maxSubCommunitiesPerPage: number;
maxCollectionsPerPage: number;
maxSubCommunitiesPerPage: number;
maxCollectionsPerPage: number;
constructor(private communityDataService: CommunityDataService, private collectionDataService: CollectionDataService) {
this.topCommunitiesConfig = new PaginationComponentOptions();
this.topCommunitiesConfig.id = 'top-level-pagination';
this.topCommunitiesConfig.pageSize = 10;
this.topCommunitiesConfig.currentPage = 1;
this.topCommunitiesSortConfig = new SortOptions('dc.title', SortDirection.ASC);
this.initTopCommunityList();
constructor(private communityDataService: CommunityDataService, private collectionDataService: CollectionDataService) {
this.topCommunitiesConfig = new PaginationComponentOptions();
this.topCommunitiesConfig.id = 'top-level-pagination';
this.topCommunitiesConfig.pageSize = 10;
this.topCommunitiesConfig.currentPage = 1;
this.topCommunitiesSortConfig = new SortOptions('dc.title', SortDirection.ASC);
this.initTopCommunityList();
this.maxSubCommunitiesPerPage = 3;
this.maxCollectionsPerPage = 3;
}
this.maxSubCommunitiesPerPage = 3;
this.maxCollectionsPerPage = 3;
}
/**
* Increases the payload so it contains the next page of top level communities
*/
getNextPageTopCommunities(): void {
this.topCommunitiesConfig.currentPage = this.topCommunitiesConfig.currentPage + 1;
this.payloads$ = [...this.payloads$, this.communityDataService.findTop({
currentPage: this.topCommunitiesConfig.currentPage,
elementsPerPage: this.topCommunitiesConfig.pageSize,
sort: {
field: this.topCommunitiesSortConfig.field,
direction: this.topCommunitiesSortConfig.direction
}
}).pipe(
take(1),
map((results) => results.payload),
)];
}
/**
* Increases the payload so it contains the next page of top level communities
*/
getNextPageTopCommunities(): void {
this.topCommunitiesConfig.currentPage = this.topCommunitiesConfig.currentPage + 1;
this.payloads$ = [...this.payloads$, this.communityDataService.findTop({
currentPage: this.topCommunitiesConfig.currentPage,
elementsPerPage: this.topCommunitiesConfig.pageSize,
sort: {
field: this.topCommunitiesSortConfig.field,
direction: this.topCommunitiesSortConfig.direction
}
}).pipe(
take(1),
map((results) => results.payload),
)];
}
/**
* Gets all top communities, limited by page, and transforms this in a list of flatnodes.
* @param expandedNodes List of expanded nodes; if a node is not expanded its subcommunities and collections need not be added to the list
*/
loadCommunities(expandedNodes: FlatNode[]): Observable<FlatNode[]> {
const res = this.payloads$.map((payload) => {
return payload.pipe(
take(1),
switchMap((result: PaginatedList<Community>) => {
return this.transformListOfCommunities(result, 0, null, expandedNodes);
}),
catchError(() => observableOf([])),
);
});
return combineAndFlatten(res);
};
/**
* Puts the initial top level communities in a list to be called upon
*/
private initTopCommunityList(): void {
this.payloads$ = [this.communityDataService.findTop({
currentPage: this.topCommunitiesConfig.currentPage,
elementsPerPage: this.topCommunitiesConfig.pageSize,
sort: {
field: this.topCommunitiesSortConfig.field,
direction: this.topCommunitiesSortConfig.direction
}
}).pipe(
take(1),
map((results) => results.payload),
)];
}
/**
* Transforms a list of communities to a list of FlatNodes according to the instructions detailed in transformCommunity
* @param listOfPaginatedCommunities Paginated list of communities to be transformed
* @param level Level the tree is currently at
* @param parent FlatNode of the parent of this list of communities
* @param expandedNodes List of expanded nodes; if a node is not expanded its subcommunities and collections need not be added to the list
*/
public transformListOfCommunities(listOfPaginatedCommunities: PaginatedList<Community>,
level: number,
parent: FlatNode,
expandedNodes: FlatNode[]): Observable<FlatNode[]> {
if (isNotEmpty(listOfPaginatedCommunities.page)) {
let currentPage = this.topCommunitiesConfig.currentPage;
if (isNotEmpty(parent)) {
currentPage = expandedNodes.find((node: FlatNode) => node.id === parent.id).currentCommunityPage;
}
const isNotAllCommunities = (listOfPaginatedCommunities.totalElements > (listOfPaginatedCommunities.elementsPerPage * currentPage));
let obsList = listOfPaginatedCommunities.page
.map((community: Community) => {
return this.transformCommunity(community, level, parent, expandedNodes)
/**
* Gets all top communities, limited by page, and transforms this in a list of flatnodes.
* @param expandedNodes List of expanded nodes; if a node is not expanded its subcommunities and collections need not be added to the list
*/
loadCommunities(expandedNodes: FlatNode[]): Observable<FlatNode[]> {
const res = this.payloads$.map((payload) => {
return payload.pipe(
take(1),
switchMap((result: PaginatedList<Community>) => {
return this.transformListOfCommunities(result, 0, null, expandedNodes);
}),
catchError(() => observableOf([])),
);
});
if (isNotAllCommunities && listOfPaginatedCommunities.currentPage > currentPage) {
obsList = [...obsList, observableOf([showMoreFlatNode('community', level, parent)])];
}
return combineAndFlatten(res);
};
return combineAndFlatten(obsList);
} else {
return observableOf([]);
}
}
/**
* Transforms a community in a list of FlatNodes containing firstly a flatnode of the community itself,
* followed by flatNodes of its possible subcommunities and collection
* It gets called recursively for each subcommunity to add its subcommunities and collections to the list
* Number of subcommunities and collections added, is dependant on the current page the parent is at for respectively subcommunities and collections.
* @param community Community being transformed
* @param level Depth of the community in the list, subcommunities and collections go one level deeper
* @param parent Flatnode of the parent community
* @param expandedNodes List of nodes which are expanded, if node is not expanded, it need not add its page-limited subcommunities or collections
*/
public transformCommunity(community: Community, level: number, parent: FlatNode, expandedNodes: FlatNode[]): Observable<FlatNode[]> {
let isExpanded = false;
if (isNotEmpty(expandedNodes)) {
isExpanded = hasValue(expandedNodes.find((node) => (node.id === community.id)));
}
const isExpandable = this.getIsExpandable(community);
const communityFlatNode = toFlatNode(community, isExpandable, level, isExpanded, parent);
let obsList = [observableOf([communityFlatNode])];
if (isExpanded) {
const currentCommunityPage = expandedNodes.find((node: FlatNode) => node.id === community.id).currentCommunityPage;
let subcoms = [];
for (let i = 1; i <= currentCommunityPage; i++) {
const nextSetOfSubcommunitiesPage = this.communityDataService.findByParent(community.uuid, {
elementsPerPage: this.maxSubCommunitiesPerPage,
currentPage: i
})
.pipe(
filter((rd: RemoteData<PaginatedList<Community>>) => rd.hasSucceeded),
/**
* Puts the initial top level communities in a list to be called upon
*/
private initTopCommunityList(): void {
this.payloads$ = [this.communityDataService.findTop({
currentPage: this.topCommunitiesConfig.currentPage,
elementsPerPage: this.topCommunitiesConfig.pageSize,
sort: {
field: this.topCommunitiesSortConfig.field,
direction: this.topCommunitiesSortConfig.direction
}
}).pipe(
take(1),
switchMap((rd: RemoteData<PaginatedList<Community>>) =>
this.transformListOfCommunities(rd.payload, level + 1, communityFlatNode, expandedNodes))
);
map((results) => results.payload),
)];
}
subcoms = [...subcoms, nextSetOfSubcommunitiesPage];
}
/**
* Transforms a list of communities to a list of FlatNodes according to the instructions detailed in transformCommunity
* @param listOfPaginatedCommunities Paginated list of communities to be transformed
* @param level Level the tree is currently at
* @param parent FlatNode of the parent of this list of communities
* @param expandedNodes List of expanded nodes; if a node is not expanded its subcommunities and collections need not be added to the list
*/
public transformListOfCommunities(listOfPaginatedCommunities: PaginatedList<Community>,
level: number,
parent: FlatNode,
expandedNodes: FlatNode[]): Observable<FlatNode[]> {
if (isNotEmpty(listOfPaginatedCommunities.page)) {
let currentPage = this.topCommunitiesConfig.currentPage;
if (isNotEmpty(parent)) {
currentPage = expandedNodes.find((node: FlatNode) => node.id === parent.id).currentCommunityPage;
}
const isNotAllCommunities = (listOfPaginatedCommunities.totalElements > (listOfPaginatedCommunities.elementsPerPage * currentPage));
let obsList = listOfPaginatedCommunities.page
.map((community: Community) => {
return this.transformCommunity(community, level, parent, expandedNodes)
});
if (isNotAllCommunities && listOfPaginatedCommunities.currentPage > currentPage) {
obsList = [...obsList, observableOf([showMoreFlatNode('community', level, parent)])];
}
obsList = [...obsList, combineAndFlatten(subcoms)];
return combineAndFlatten(obsList);
} else {
return observableOf([]);
}
}
const currentCollectionPage = expandedNodes.find((node: FlatNode) => node.id === community.id).currentCollectionPage;
let collections = [];
for (let i = 1; i <= currentCollectionPage; i++) {
const nextSetOfCollectionsPage = this.collectionDataService.findByParent(community.uuid, {
elementsPerPage: this.maxCollectionsPerPage,
currentPage: i
})
.pipe(
filter((rd: RemoteData<PaginatedList<Collection>>) => rd.hasSucceeded),
/**
* Transforms a community in a list of FlatNodes containing firstly a flatnode of the community itself,
* followed by flatNodes of its possible subcommunities and collection
* It gets called recursively for each subcommunity to add its subcommunities and collections to the list
* Number of subcommunities and collections added, is dependant on the current page the parent is at for respectively subcommunities and collections.
* @param community Community being transformed
* @param level Depth of the community in the list, subcommunities and collections go one level deeper
* @param parent Flatnode of the parent community
* @param expandedNodes List of nodes which are expanded, if node is not expanded, it need not add its page-limited subcommunities or collections
*/
public transformCommunity(community: Community, level: number, parent: FlatNode, expandedNodes: FlatNode[]): Observable<FlatNode[]> {
let isExpanded = false;
if (isNotEmpty(expandedNodes)) {
isExpanded = hasValue(expandedNodes.find((node) => (node.id === community.id)));
}
const isExpandable$ = this.getIsExpandable(community);
const communityFlatNode = toFlatNode(community, isExpandable$, level, isExpanded, parent);
let obsList = [observableOf([communityFlatNode])];
if (isExpanded) {
const currentCommunityPage = expandedNodes.find((node: FlatNode) => node.id === community.id).currentCommunityPage;
let subcoms = [];
for (let i = 1; i <= currentCommunityPage; i++) {
const nextSetOfSubcommunitiesPage = this.communityDataService.findByParent(community.uuid, {
elementsPerPage: this.maxSubCommunitiesPerPage,
currentPage: i
})
.pipe(
filter((rd: RemoteData<PaginatedList<Community>>) => rd.hasSucceeded),
take(1),
switchMap((rd: RemoteData<PaginatedList<Community>>) =>
this.transformListOfCommunities(rd.payload, level + 1, communityFlatNode, expandedNodes))
);
subcoms = [...subcoms, nextSetOfSubcommunitiesPage];
}
obsList = [...obsList, combineAndFlatten(subcoms)];
const currentCollectionPage = expandedNodes.find((node: FlatNode) => node.id === community.id).currentCollectionPage;
let collections = [];
for (let i = 1; i <= currentCollectionPage; i++) {
const nextSetOfCollectionsPage = this.collectionDataService.findByParent(community.uuid, {
elementsPerPage: this.maxCollectionsPerPage,
currentPage: i
})
.pipe(
filter((rd: RemoteData<PaginatedList<Collection>>) => rd.hasSucceeded),
take(1),
map((rd: RemoteData<PaginatedList<Collection>>) => {
let nodes = rd.payload.page
.map((collection: Collection) => toFlatNode(collection, observableOf(false), level + 1, false, communityFlatNode));
if ((rd.payload.elementsPerPage * currentCollectionPage) < rd.payload.totalElements && rd.payload.currentPage > currentCollectionPage) {
nodes = [...nodes, showMoreFlatNode('collection', level + 1, communityFlatNode)];
}
return nodes;
}),
);
collections = [...collections, nextSetOfCollectionsPage];
}
obsList = [...obsList, combineAndFlatten(collections)];
}
return combineAndFlatten(obsList);
}
/**
* Checks if a community has subcommunities or collections by querying the respective services with a pageSize = 0
* Returns an observable that combines the result.payload.totalElements fo the observables that the
* respective services return when queried
* @param community Community being checked whether it is expandable (if it has subcommunities or collections)
*/
public getIsExpandable(community: Community): Observable<boolean> {
let hasSubcoms$: Observable<boolean>;
let hasColls$: Observable<boolean>;
hasSubcoms$ = this.communityDataService.findByParent(community.uuid, {elementsPerPage: 1})
.pipe(
filter((rd: RemoteData<PaginatedList<Community>>) => rd.hasSucceeded),
take(1),
map((results) => results.payload.totalElements > 0),
);
hasColls$ = this.collectionDataService.findByParent(community.uuid, {elementsPerPage: 1})
.pipe(
filter((rd: RemoteData<PaginatedList<Community>>) => rd.hasSucceeded),
take(1),
map((results) => results.payload.totalElements > 0),
);
let hasChildren$: Observable<boolean>;
hasChildren$ = observableCombineLatest(hasSubcoms$, hasColls$).pipe(
take(1),
map((rd: RemoteData<PaginatedList<Collection>>) => {
let nodes = rd.payload.page
.map((collection: Collection) => toFlatNode(collection, false, level + 1, false, communityFlatNode));
if ((rd.payload.elementsPerPage * currentCollectionPage) < rd.payload.totalElements && rd.payload.currentPage > currentCollectionPage) {
nodes = [...nodes, showMoreFlatNode('collection', level + 1, communityFlatNode)];
}
return nodes;
}),
);
collections = [...collections, nextSetOfCollectionsPage];
}
obsList = [...obsList, combineAndFlatten(collections)];
map((result: [boolean]) => {
if (result[0] || result[1]) {
return true;
} else {
return false;
}
})
);
return hasChildren$;
}
return combineAndFlatten(obsList);
}
/**
* Checks if a community has subcommunities or collections by querying the respective services with a pageSize = 0
* If it does, it is expandable => returns true, false if not
* @param community Community being checked whether it is expandable (if it has subcommunities or collections)
*/
public getIsExpandable(community: Community): boolean {
let isExpandable = true;
let nrOfSubcoms;
let nrOfColl;
this.communityDataService.findByParent(community.uuid, { elementsPerPage: 0 })
.pipe(
filter((rd: RemoteData<PaginatedList<Community>>) => rd.hasSucceeded),
take(1),
)
.subscribe((result) => {
if (result.payload.totalElements === 0) {
nrOfSubcoms = result.payload.totalElements;
}
;
});
this.collectionDataService.findByParent(community.uuid, { elementsPerPage: 0 })
.pipe(
filter((rd: RemoteData<PaginatedList<Collection>>) => rd.hasSucceeded),
take(1),
)
.subscribe((result) => {
if (result.payload.totalElements === 0) {
nrOfColl = result.payload.totalElements;
}
;
});
if (nrOfSubcoms === 0 && nrOfColl === 0) {
isExpandable = false;
}
return isExpandable;
}
}

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 ? 'visible' : 'invisible'">
[ngClass]="(node.isExpandable$ | async) ? 'visible' : 'invisible'">
<span class="{{node.isExpanded ? 'fa fa-chevron-down' : 'fa fa-chevron-right'}}"
aria-hidden="true"></span>
</button>

View File

@@ -14,7 +14,7 @@ export class CommunityListComponent implements OnInit {
public loadingNode: FlatNode;
treeControl = new FlatTreeControl<FlatNode>(
(node) => node.level, (node) => node.isExpandable
(node) => node.level, (node) => true
);
dataSource: CommunityListDatasource;
@@ -29,7 +29,7 @@ export class CommunityListComponent implements OnInit {
// whether or not this node has children (subcommunities or collections)
hasChild(_: number, node: FlatNode) {
return node.isExpandable;
return node.isExpandable$;
}
// whether or not it is a show more node (contains no data, but is indication that there are more topcoms, subcoms or collections
@@ -68,15 +68,13 @@ export class CommunityListComponent implements OnInit {
getNextPage(node: FlatNode): void {
this.loadingNode = node;
if (node.parent != null) {
if (node.parent.isExpandable) {
if (node.id === 'collection') {
const parentNodeInExpandedNodes = this.expandedNodes.find((node2: FlatNode) => node.parent.id === node2.id);
parentNodeInExpandedNodes.currentCollectionPage++;
}
if (node.id === 'community') {
const parentNodeInExpandedNodes = this.expandedNodes.find((node2: FlatNode) => node.parent.id === node2.id);
parentNodeInExpandedNodes.currentCommunityPage++;
}
if (node.id === 'collection') {
const parentNodeInExpandedNodes = this.expandedNodes.find((node2: FlatNode) => node.parent.id === node2.id);
parentNodeInExpandedNodes.currentCollectionPage++;
}
if (node.id === 'community') {
const parentNodeInExpandedNodes = this.expandedNodes.find((node2: FlatNode) => node.parent.id === node2.id);
parentNodeInExpandedNodes.currentCommunityPage++;
}
this.dataSource.loadCommunities(this.expandedNodes);
} else {