From eaf0911e2e36712cdf5fcc13487368043b1298de Mon Sep 17 00:00:00 2001 From: Marie Verdonck <maria.verdonck@atmire.com> Date: Tue, 19 Nov 2019 18:11:03 +0100 Subject: [PATCH] 66391: Fixed the valse positive chevron indicating node is expandable --- .../community-list-service.ts | 484 +++++++++--------- .../community-list.component.html | 2 +- .../community-list.component.ts | 20 +- 3 files changed, 252 insertions(+), 254 deletions(-) diff --git a/src/app/community-list-page/community-list-service.ts b/src/app/community-list-page/community-list-service.ts index 6da1bff4e5..3cbb76f79c 100644 --- a/src/app/community-list-page/community-list-service.ts +++ b/src/app/community-list-page/community-list-service.ts @@ -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; - } - - /** - * 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); - }; + this.maxSubCommunitiesPerPage = 3; + this.maxCollectionsPerPage = 3; + } - /** - * 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), - )]; - } + /** + * 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), + )]; + } - /** - * 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([]); + /** + * 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 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))); + /** + * 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)])]; + } + + return combineAndFlatten(obsList); + } else { + return observableOf([]); + } } - const isExpandable = this.getIsExpandable(community); + /** + * 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); + const communityFlatNode = toFlatNode(community, isExpandable$, level, isExpanded, parent); - let obsList = [observableOf([communityFlatNode])]; + 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)) - ); + 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]; - } + subcoms = [...subcoms, nextSetOfSubcommunitiesPage]; + } - obsList = [...obsList, combineAndFlatten(subcoms)]; + 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, 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)]; + 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); } - 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), + ); - /** - * 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; - } - ; - }); + hasColls$ = this.collectionDataService.findByParent(community.uuid, {elementsPerPage: 1}) + .pipe( + filter((rd: RemoteData<PaginatedList<Community>>) => rd.hasSucceeded), + take(1), + map((results) => results.payload.totalElements > 0), + ); - 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; + let hasChildren$: Observable<boolean>; + hasChildren$ = observableCombineLatest(hasSubcoms$, hasColls$).pipe( + take(1), + map((result: [boolean]) => { + if (result[0] || result[1]) { + return true; + } else { + return false; + } + }) + ); + + return hasChildren$; } - return isExpandable; - } } 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 fdec67d67c..9f8f511b12 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 @@ <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> 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 622d03237e..c51c4adde8 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 @@ -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 { -- GitLab