65528: ComCol flat tree with actual backend comm/coll

> TODO FIX: Last subcom and coll are undefined
This commit is contained in:
Marie Verdonck
2019-10-10 17:59:09 +02:00
parent 69e8221867
commit 2ece89db62
3 changed files with 110 additions and 61 deletions

View File

@@ -1,27 +1,31 @@
import {CommunityForList, CommunityListService} from './CommunityListService'; import {CommunityListService} from './CommunityListService';
import {CollectionViewer, DataSource} from '@angular/cdk/typings/collections'; import {CollectionViewer, DataSource} from '@angular/cdk/typings/collections';
import {BehaviorSubject, Observable, of} from 'rxjs'; import {BehaviorSubject, Observable, of} from 'rxjs';
import {catchError, finalize, map, take} from 'rxjs/operators'; import {catchError, finalize, map, take, tap} from 'rxjs/operators';
import {Community} from '../core/shared/community.model';
import {Collection} from '../core/shared/collection.model';
export interface CommunityFlatNode { export interface FlatNode {
expandable: boolean; expandable: boolean;
name: string; name: string;
handle: string;
level: number; level: number;
isExpanded?: boolean; isExpanded?: boolean;
parent?: CommunityFlatNode; parent?: FlatNode;
community: CommunityForList; community: Community;
} }
export class CommunityListDataSource implements DataSource<CommunityFlatNode> { export class CommunityListDataSource implements DataSource<FlatNode> {
private communityListSubject = new BehaviorSubject<CommunityFlatNode[]>([]); private communityListSubject = new BehaviorSubject<FlatNode[]>([]);
private loadingSubject = new BehaviorSubject<boolean>(false); private loadingSubject = new BehaviorSubject<boolean>(false);
public loading$ = this.loadingSubject.asObservable(); public loading$ = this.loadingSubject.asObservable();
constructor(private communityListService: CommunityListService) {} constructor(private communityListService: CommunityListService) {
}
connect(collectionViewer: CollectionViewer): Observable<CommunityFlatNode[]> { connect(collectionViewer: CollectionViewer): Observable<FlatNode[]> {
return this.communityListSubject.asObservable(); return this.communityListSubject.asObservable();
} }
@@ -30,7 +34,7 @@ export class CommunityListDataSource implements DataSource<CommunityFlatNode> {
this.loadingSubject.complete(); this.loadingSubject.complete();
} }
loadCommunities(expandedNodes: CommunityFlatNode[]) { loadCommunities(expandedNodes: FlatNode[]) {
this.loadingSubject.next(true); this.loadingSubject.next(true);
this.communityListService.getCommunityList() this.communityListService.getCommunityList()
@@ -38,45 +42,74 @@ export class CommunityListDataSource implements DataSource<CommunityFlatNode> {
take(1), take(1),
catchError(() => of([])), catchError(() => of([])),
finalize(() => this.loadingSubject.next(false)), finalize(() => this.loadingSubject.next(false)),
map((result: CommunityForList[]) => { map((result: Community[]) => {
const communityFlatNodes: CommunityFlatNode[] = []; const flatNodes = this.transformListOfCommunities(result, 0, [], null, expandedNodes);
const level = 0; return flatNodes;
return this.transformListOfCommunities(result, level, communityFlatNodes, null, expandedNodes);
}) })
) )
.subscribe((communityFlatNode) => { .subscribe((flatNodes) => {
this.communityListSubject.next(communityFlatNode) this.communityListSubject.next(flatNodes)
}); });
}; };
transformListOfCommunities(listOfCommunities: CommunityForList[], transformListOfCommunities(listOfCommunities: Community[],
level: number, level: number,
communityFlatNodes: CommunityFlatNode[], flatNodes: FlatNode[],
parent: CommunityFlatNode, parent: FlatNode,
expandedNodes: CommunityFlatNode[]): CommunityFlatNode[] { expandedNodes: FlatNode[]): FlatNode[] {
level++; level++;
if (undefined !== listOfCommunities) {
for (const community of listOfCommunities) { for (const community of listOfCommunities) {
const hasSubComs = ((!!community.subcoms && community.subcoms.length > 0));
let expanded = false; let expanded = false;
if (expandedNodes != null) { if (expandedNodes != null) {
const expandedNodesFound = expandedNodes.filter((node) => (node.name === community.name)); const expandedNodesFound = expandedNodes.filter((node) => (node.handle === community.handle));
expanded = (expandedNodesFound.length > 0); expanded = (expandedNodesFound.length > 0);
} }
console.log(community.name + 'is expanded: ' + expanded); const communityFlatNode: FlatNode = {
const communityFlatNode: CommunityFlatNode = { expandable: true,
expandable: hasSubComs,
name: community.name, name: community.name,
handle: community.handle,
level: level, level: level,
isExpanded: expanded, isExpanded: expanded,
parent: parent,
community: community, community: community,
parent: parent
} }
communityFlatNodes.push(communityFlatNode); flatNodes.push(communityFlatNode);
if (hasSubComs && communityFlatNode.isExpanded) { if (expanded) {
this.transformListOfCommunities(community.subcoms, level, communityFlatNodes, communityFlatNode, expandedNodes); // TODO FIX: Retrieves last subcom or coll as undefined
let subcoms: Community[] = [];
community.subcommunities.pipe(
tap((v) => console.log('subcom tap', v)),
take(1)).subscribe((results) => {
subcoms = results.payload.page;
if (subcoms.length > 0) {
this.transformListOfCommunities(subcoms, level, flatNodes, communityFlatNode, expandedNodes);
}
});
let coll: Collection[] = [];
community.collections.pipe(
tap((v) => console.log('col tap ' ,v)),
take(1),
)
.subscribe((results) => {
coll = results.payload.page;
for (const collection of coll) {
const collectionFlatNode: FlatNode = {
expandable: false,
name: collection.name,
handle: collection.handle,
level: level,
isExpanded: false,
parent: parent,
community: community,
}
flatNodes.push(collectionFlatNode);
}
});
} }
} }
return communityFlatNodes; }
return flatNodes;
} }
} }

View File

@@ -1,24 +1,41 @@
import {Injectable} from '@angular/core'; import {Injectable} from '@angular/core';
import {Observable, of} from 'rxjs'; import {Observable, of} from 'rxjs';
import {CommunityDataService} from '../core/data/community-data.service';
export interface CommunityForList { import {PaginationComponentOptions} from '../shared/pagination/pagination-component-options.model';
name: string; import {SortDirection, SortOptions} from '../core/cache/models/sort-options.model';
subcoms?: CommunityForList[]; import {take} from 'rxjs/operators';
collections?: string[]; import {Community} from '../core/shared/community.model';
parent?: string;
}
@Injectable() @Injectable()
export class CommunityListService { export class CommunityListService {
private comList: CommunityForList[] = [ communities: Community[];
{name: 'com1', subcoms: [{name: 'subcom1', subcoms: [{name: 'subsubcom1'}], collections: null, parent: 'com1'}], collections: ['col1', 'col2'], parent: null},
{name: 'com2', subcoms: [{name: 'subcom2', subcoms: null, collections: null, parent: 'com2'}, {name: 'subcom3', subcoms: null, collections: null, parent: 'com2'}], collections: ['col3', 'col4'], parent: null},
{name: 'com3', subcoms: [{name: 'subcom4', subcoms: null, collections: null, parent: 'com3'}], collections: ['col5'], parent: null},
];
public getCommunityList(): Observable<CommunityForList[]> { config: PaginationComponentOptions;
return of(this.comList); sortConfig: SortOptions;
constructor(private cds: CommunityDataService) {
this.config = new PaginationComponentOptions();
this.config.id = 'top-level-pagination';
this.config.pageSize = 100;
this.config.currentPage = 1;
this.sortConfig = new SortOptions('dc.title', SortDirection.ASC);
this.initTopCommunityList()
}
private initTopCommunityList(): void {
this.cds.findTop({
currentPage: this.config.currentPage,
elementsPerPage: this.config.pageSize,
sort: { field: this.sortConfig.field, direction: this.sortConfig.direction }
}).pipe(take(1)).subscribe((results) => {
this.communities = results.payload.page;
console.log('ping', this.communities);
});
}
public getCommunityList(): Observable<Community[]> {
return of(this.communities);
} }
} }

View File

@@ -1,6 +1,6 @@
import {Component, OnInit} from '@angular/core'; import {Component, OnInit} from '@angular/core';
import {CommunityListService} from '../CommunityListService'; import {CommunityListService} from '../CommunityListService';
import {CommunityFlatNode, CommunityListDataSource} from '../CommunityListDataSource'; import {FlatNode, CommunityListDataSource} from '../CommunityListDataSource';
import {FlatTreeControl} from '@angular/cdk/tree'; import {FlatTreeControl} from '@angular/cdk/tree';
@Component({ @Component({
@@ -10,9 +10,9 @@ import {FlatTreeControl} from '@angular/cdk/tree';
}) })
export class CommunityListComponent implements OnInit { export class CommunityListComponent implements OnInit {
private expandedNodes: CommunityFlatNode[] = []; private expandedNodes: FlatNode[] = [];
treeControl = new FlatTreeControl<CommunityFlatNode>( treeControl = new FlatTreeControl<FlatNode>(
(node) => node.level, (node) => node.expandable (node) => node.level, (node) => node.expandable
); );
@@ -25,14 +25,14 @@ export class CommunityListComponent implements OnInit {
this.dataSource.loadCommunities(null); this.dataSource.loadCommunities(null);
} }
hasChild = (_: number, node: CommunityFlatNode) => node.expandable; hasChild = (_: number, node: FlatNode) => node.expandable;
shouldRender(node: CommunityFlatNode) { shouldRender(node: FlatNode) {
const parent = node.parent; const parent = node.parent;
return !parent || parent.isExpanded; return !parent || parent.isExpanded;
} }
toggleExpanded(node: CommunityFlatNode) { toggleExpanded(node: FlatNode) {
if (node.isExpanded) { if (node.isExpanded) {
this.expandedNodes = this.expandedNodes.filter((node2) => node2.name !== node.name); this.expandedNodes = this.expandedNodes.filter((node2) => node2.name !== node.name);
node.isExpanded = false; node.isExpanded = false;
@@ -41,7 +41,6 @@ export class CommunityListComponent implements OnInit {
node.isExpanded = true; node.isExpanded = true;
} }
this.dataSource.loadCommunities(this.expandedNodes); this.dataSource.loadCommunities(this.expandedNodes);
console.log('Nr of expanded nodes' + this.expandedNodes.length);
} }
} }