From 3daf35e4a4ad8923a8c761e70d028b3da0bdaf26 Mon Sep 17 00:00:00 2001 From: Marie Verdonck Date: Fri, 11 Oct 2019 17:37:43 +0200 Subject: [PATCH] 65528: Renaming/Moving according to feedback; style and links added; chevrons fixed --- .../CommunityListDataSource.ts | 131 ----------------- .../CommunityListService.ts | 37 ----- .../community-list-adapter.ts | 134 ++++++++++++++++++ .../community-list-datasource.ts | 33 +++++ .../community-list-page.component.html | 6 +- .../community-list-page.routing.module.ts | 4 +- .../community-list.component.html | 59 +++++--- .../community-list.component.ts | 67 ++++----- 8 files changed, 243 insertions(+), 228 deletions(-) delete mode 100644 src/app/community-list-page/CommunityListDataSource.ts delete mode 100644 src/app/community-list-page/CommunityListService.ts create mode 100644 src/app/community-list-page/community-list-adapter.ts create mode 100644 src/app/community-list-page/community-list-datasource.ts diff --git a/src/app/community-list-page/CommunityListDataSource.ts b/src/app/community-list-page/CommunityListDataSource.ts deleted file mode 100644 index a3ef907e6c..0000000000 --- a/src/app/community-list-page/CommunityListDataSource.ts +++ /dev/null @@ -1,131 +0,0 @@ -import { combineLatest as observableCombineLatest } from 'rxjs/internal/observable/combineLatest'; -import { PaginatedList } from '../core/data/paginated-list'; -import { RemoteData } from '../core/data/remote-data'; -import { hasValue, isNotEmpty } from '../shared/empty.util'; -import { CommunityListService } from './CommunityListService'; -import { CollectionViewer, DataSource } from '@angular/cdk/typings/collections'; -import { BehaviorSubject, Observable, of as observableOf } from 'rxjs'; -import { - catchError, - filter, - finalize, - map, - switchMap, - take, -} from 'rxjs/operators'; -import { Community } from '../core/shared/community.model'; -import { Collection } from '../core/shared/collection.model'; - -export interface FlatNode { - isExpandable: boolean; - name: string; - id: string; - level: number; - isExpanded?: boolean; - parent?: FlatNode; - payload: Community | Collection; -} - -const combineAndFlatten = (obsList: Array>) => - observableCombineLatest(...obsList).pipe( - map((matrix: FlatNode[][]) => - matrix.reduce((combinedList, currentList: FlatNode[]) => [...combinedList, ...currentList])) - ); - -const toFlatNode = ( - c: Community | Collection, - level: number, - isExpanded: boolean, - parent?: FlatNode -): FlatNode => ({ - isExpandable: c instanceof Community, - name: c.name, - id: c.id, - level: level, - isExpanded, - parent, - payload: c, -}); - -export class CommunityListDataSource implements DataSource { - - private communityList$ = new BehaviorSubject([]); - private loading$ = new BehaviorSubject(false); - - constructor(private communityListService: CommunityListService) { - } - - connect(collectionViewer: CollectionViewer): Observable { - return this.communityList$.asObservable(); - } - - disconnect(collectionViewer: CollectionViewer): void { - this.communityList$.complete(); - this.loading$.complete(); - } - - loadCommunities(expandedNodes: FlatNode[]): void { - this.loading$.next(true); - - this.communityListService.communities$ - .pipe( - take(1), - switchMap((result: Community[]) => { - return this.transformListOfCommunities(result, 0, null, expandedNodes); - }), - catchError(() => observableOf([])), - finalize(() => this.loading$.next(false)), - ).subscribe((flatNodes: FlatNode[]) => this.communityList$.next(flatNodes)); - }; - - private transformListOfCommunities(listOfCommunities: Community[], - level: number, - parent: FlatNode, - expandedNodes: FlatNode[]): Observable { - if (isNotEmpty(listOfCommunities)) { - const obsList = listOfCommunities - .map((community: Community) => - this.transformCommunity(community, level, parent, expandedNodes)); - - return combineAndFlatten(obsList); - } else { - return observableOf([]); - } - } - - private transformCommunity(community: Community, level: number, parent: FlatNode, expandedNodes: FlatNode[]): Observable { - let isExpanded = false; - if (isNotEmpty(expandedNodes)) { - isExpanded = hasValue(expandedNodes.find((node) => (node.id === community.id))); - } - - const communityFlatNode = toFlatNode(community, level, isExpanded, parent); - - let obsList = [observableOf([communityFlatNode])]; - - if (isExpanded) { - const subCommunityNodes$ = community.subcommunities.pipe( - filter((rd: RemoteData>) => rd.hasSucceeded), - take(1), - switchMap((rd: RemoteData>) => - this.transformListOfCommunities(rd.payload.page, level + 1, communityFlatNode, expandedNodes)) - ); - - obsList = [...obsList, subCommunityNodes$]; - - const collectionNodes$ = community.collections.pipe( - filter((rd: RemoteData>) => rd.hasSucceeded), - take(1), - map((rd: RemoteData>) => - rd.payload.page - .map((collection: Collection) => toFlatNode(collection, level + 1, false, parent)) - ) - ); - - obsList = [...obsList, collectionNodes$]; - } - - return combineAndFlatten(obsList); - } - -} diff --git a/src/app/community-list-page/CommunityListService.ts b/src/app/community-list-page/CommunityListService.ts deleted file mode 100644 index a00f2716f5..0000000000 --- a/src/app/community-list-page/CommunityListService.ts +++ /dev/null @@ -1,37 +0,0 @@ -import {Injectable} from '@angular/core'; -import {Observable, of} 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 { map, take, tap } from 'rxjs/operators'; -import {Community} from '../core/shared/community.model'; - -@Injectable() -export class CommunityListService { - - communities$: Observable; - - config: PaginationComponentOptions; - sortConfig: SortOptions; - - constructor(private cds: CommunityDataService) { - this.config = new PaginationComponentOptions(); - this.config.id = 'top-level-pagination'; - this.config.pageSize = 10; - this.config.currentPage = 1; - this.sortConfig = new SortOptions('dc.title', SortDirection.ASC); - this.initTopCommunityList() - } - - private initTopCommunityList(): void { - this.communities$ = this.cds.findTop({ - currentPage: this.config.currentPage, - elementsPerPage: this.config.pageSize, - sort: { field: this.sortConfig.field, direction: this.sortConfig.direction } - }).pipe( - take(1), - map((results) => results.payload.page), - ); - } - -} diff --git a/src/app/community-list-page/community-list-adapter.ts b/src/app/community-list-page/community-list-adapter.ts new file mode 100644 index 0000000000..84f427bd18 --- /dev/null +++ b/src/app/community-list-page/community-list-adapter.ts @@ -0,0 +1,134 @@ +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'; + +export interface FlatNode { + isExpandable: boolean; + name: string; + id: string; + level: number; + isExpanded?: boolean; + parent?: FlatNode; + payload: Community | Collection; +} + +export const combineAndFlatten = (obsList: Array>): Observable => + observableCombineLatest(...obsList).pipe( + map((matrix: FlatNode[][]) => + matrix.reduce((combinedList, currentList: FlatNode[]) => [...combinedList, ...currentList])) + ); + +export const toFlatNode = ( + c: Community | Collection, + level: number, + isExpanded: boolean, + parent?: FlatNode +): FlatNode => ({ + isExpandable: c instanceof Community, + name: c.name, + id: c.id, + level: level, + isExpanded, + parent, + payload: c, +}); + +@Injectable() +export class CommunityListAdapter { + + communities$: Observable; + + config: PaginationComponentOptions; + sortConfig: SortOptions; + + constructor(private cds: CommunityDataService) { + this.config = new PaginationComponentOptions(); + this.config.id = 'top-level-pagination'; + this.config.pageSize = 50; + this.config.currentPage = 1; + this.sortConfig = new SortOptions('dc.title', SortDirection.ASC); + this.initTopCommunityList() + } + + private initTopCommunityList(): void { + this.communities$ = this.cds.findTop({ + currentPage: this.config.currentPage, + elementsPerPage: this.config.pageSize, + sort: {field: this.sortConfig.field, direction: this.sortConfig.direction} + }).pipe( + take(1), + map((results) => results.payload.page), + ); + } + + loadCommunities(expandedNodes: FlatNode[]): Observable { + return this.communities$ + .pipe( + take(1), + switchMap((result: Community[]) => { + return this.transformListOfCommunities(result, 0, null, expandedNodes); + }), + catchError(() => observableOf([])) + ); + }; + + private transformListOfCommunities(listOfCommunities: Community[], + level: number, + parent: FlatNode, + expandedNodes: FlatNode[]): Observable { + if (isNotEmpty(listOfCommunities)) { + const obsList = listOfCommunities + .map((community: Community) => + this.transformCommunity(community, level, parent, expandedNodes)); + + return combineAndFlatten(obsList); + } else { + return observableOf([]); + } + } + + private transformCommunity(community: Community, level: number, parent: FlatNode, expandedNodes: FlatNode[]): Observable { + let isExpanded = false; + if (isNotEmpty(expandedNodes)) { + isExpanded = hasValue(expandedNodes.find((node) => (node.id === community.id))); + } + + const communityFlatNode = toFlatNode(community, level, isExpanded, parent); + + let obsList = [observableOf([communityFlatNode])]; + + if (isExpanded) { + const subCommunityNodes$ = community.subcommunities.pipe( + filter((rd: RemoteData>) => rd.hasSucceeded), + take(1), + switchMap((rd: RemoteData>) => + this.transformListOfCommunities(rd.payload.page, level + 1, communityFlatNode, expandedNodes)) + ); + + obsList = [...obsList, subCommunityNodes$]; + + const collectionNodes$ = community.collections.pipe( + filter((rd: RemoteData>) => rd.hasSucceeded), + take(1), + map((rd: RemoteData>) => + rd.payload.page + .map((collection: Collection) => toFlatNode(collection, level + 1, false, parent)) + ) + ); + + obsList = [...obsList, collectionNodes$]; + } + + return combineAndFlatten(obsList); + } + +} diff --git a/src/app/community-list-page/community-list-datasource.ts b/src/app/community-list-page/community-list-datasource.ts new file mode 100644 index 0000000000..eab377f970 --- /dev/null +++ b/src/app/community-list-page/community-list-datasource.ts @@ -0,0 +1,33 @@ +import {CommunityListAdapter, FlatNode} from './community-list-adapter'; +import {CollectionViewer, DataSource} from '@angular/cdk/typings/collections'; +import {BehaviorSubject, Observable,} from 'rxjs'; +import {finalize, take,} from 'rxjs/operators'; + +export class CommunityListDatasource implements DataSource { + + private communityList$ = new BehaviorSubject([]); + private loading$ = new BehaviorSubject(false); + + constructor(private communityListService: CommunityListAdapter) { + } + + connect(collectionViewer: CollectionViewer): Observable { + this.loadCommunities(null); + return this.communityList$.asObservable(); + } + + loadCommunities(expandedNodes: FlatNode[]) { + this.loading$.next(true); + + this.communityListService.loadCommunities(expandedNodes).pipe( + take(1), + finalize(() => this.loading$.next(false)), + ).subscribe((flatNodes: FlatNode[]) => this.communityList$.next(flatNodes)); + } + + disconnect(collectionViewer: CollectionViewer): void { + this.communityList$.complete(); + this.loading$.complete(); + } + +} diff --git a/src/app/community-list-page/community-list-page.component.html b/src/app/community-list-page/community-list-page.component.html index 21e1b496a9..bba67a7c6d 100644 --- a/src/app/community-list-page/community-list-page.component.html +++ b/src/app/community-list-page/community-list-page.component.html @@ -1,2 +1,4 @@ -

{{ 'communityList.title' | translate }}

- +
+

{{ 'communityList.title' | translate }}

+ +
diff --git a/src/app/community-list-page/community-list-page.routing.module.ts b/src/app/community-list-page/community-list-page.routing.module.ts index b3b254800b..90cd355bc5 100644 --- a/src/app/community-list-page/community-list-page.routing.module.ts +++ b/src/app/community-list-page/community-list-page.routing.module.ts @@ -3,7 +3,7 @@ import { RouterModule } from '@angular/router'; import {CdkTreeModule} from '@angular/cdk/tree'; import {CommunityListPageComponent} from './community-list-page.component'; -import {CommunityListService} from './CommunityListService'; +import {CommunityListAdapter} from './community-list-adapter'; @NgModule({ imports: [ @@ -12,6 +12,6 @@ import {CommunityListService} from './CommunityListService'; ]), CdkTreeModule, ], - providers: [CommunityListService] + providers: [CommunityListAdapter] }) export class CommunityListPageRoutingModule { } 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 55dc738ce6..a8fdc5bc7c 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 @@ -1,25 +1,38 @@ - - - - -
{{node.name}}
- - - -
- -
{{node.name}}
-
- + + + + +
+ + {{node.name}} + +
+
+ {{node.payload.shortDescription}} +
+ + + +
+ +
+ + {{node.name}} + +
+
+
+ {{node.payload.shortDescription}} +
+ 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 714024ee56..015d71b7a9 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,46 +1,47 @@ import {Component, OnInit} from '@angular/core'; -import {CommunityListService} from '../CommunityListService'; -import {FlatNode, CommunityListDataSource} from '../CommunityListDataSource'; +import {CommunityListAdapter, FlatNode} from '../community-list-adapter'; +import {CommunityListDatasource} from '../community-list-datasource'; import {FlatTreeControl} from '@angular/cdk/tree'; @Component({ - selector: 'ds-community-list', - templateUrl: './community-list.component.html', - styleUrls: ['./community-list.component.scss'] + selector: 'ds-community-list', + templateUrl: './community-list.component.html', + styleUrls: ['./community-list.component.scss'] }) export class CommunityListComponent implements OnInit { - private expandedNodes: FlatNode[] = []; + private expandedNodes: FlatNode[] = []; - treeControl = new FlatTreeControl( - (node) => node.level, (node) => node.isExpandable - ); + treeControl = new FlatTreeControl( + (node) => node.level, (node) => node.isExpandable + ); - dataSource: CommunityListDataSource; + dataSource: CommunityListDatasource; - constructor(private communityListService: CommunityListService) { } - - ngOnInit() { - this.dataSource = new CommunityListDataSource(this.communityListService); - this.dataSource.loadCommunities(null); - } - - hasChild = (_: number, node: FlatNode) => node.isExpandable; - - shouldRender(node: FlatNode) { - const parent = node.parent; - return !parent || parent.isExpanded; - } - - toggleExpanded(node: FlatNode) { - if (node.isExpanded) { - this.expandedNodes = this.expandedNodes.filter((node2) => node2.name !== node.name); - node.isExpanded = false; - } else { - this.expandedNodes.push(node); - node.isExpanded = true; + constructor(private communityListService: CommunityListAdapter) { + } + + ngOnInit() { + this.dataSource = new CommunityListDatasource(this.communityListService); + this.dataSource.loadCommunities(null); + } + + hasChild = (_: number, node: FlatNode) => node.isExpandable; + + shouldRender(node: FlatNode) { + const parent = node.parent; + return !parent || parent.isExpanded; + } + + toggleExpanded(node: FlatNode) { + if (node.isExpanded) { + this.expandedNodes = this.expandedNodes.filter((node2) => node2.name !== node.name); + node.isExpanded = false; + } else { + this.expandedNodes.push(node); + node.isExpanded = true; + } + this.dataSource.loadCommunities(this.expandedNodes); } - this.dataSource.loadCommunities(this.expandedNodes); - } }