65600: ComCol-Tree load more links message, not yet functional

resources/i18n/en.json5

@@ -343,6 +343,7 @@
   "communityList.tabTitle": "DSpace - Community List",
 
   "communityList.title": "List of Communities",
+  "communityList.showMore": "Show More",
 
 
 

src/app/community-list-page/community-list-adapter.ts

@@ -1,10 +1,10 @@
 import {Injectable} from '@angular/core';
 import {combineLatest as observableCombineLatest} from 'rxjs/internal/observable/combineLatest';
-import {Observable, of as observableOf} from 'rxjs';
+import {Observable, of, 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 {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';
@@ -19,6 +19,7 @@ export interface FlatNode {
     isExpanded?: boolean;
     parent?: FlatNode;
     payload: Community | Collection;
+    isShowMoreNode: boolean;
 }
 
 export const combineAndFlatten = (obsList: Array<Observable<FlatNode[]>>): Observable<FlatNode[]> =>
@@ -40,12 +41,28 @@ export const toFlatNode = (
     isExpanded,
     parent,
     payload: c,
+    isShowMoreNode: false,
+});
+
+export const showMoreFlatNode = (
+    c: Community | Collection,
+    level: number,
+    parent?: FlatNode
+): FlatNode => ({
+    isExpandable: false,
+    name: c.name,
+    id: c.id,
+    level: level,
+    isExpanded: false,
+    parent: parent,
+    payload: c,
+    isShowMoreNode: true,
 });
 
 @Injectable()
 export class CommunityListAdapter {
 
-    communities$: Observable<Community[]>;
+    payload$: Observable<PaginatedList<Community>>;
 
     config: PaginationComponentOptions;
     sortConfig: SortOptions;
@@ -53,42 +70,48 @@ export class CommunityListAdapter {
     constructor(private cds: CommunityDataService) {
         this.config = new PaginationComponentOptions();
         this.config.id = 'top-level-pagination';
-        this.config.pageSize = 50;
+        this.config.pageSize = 5;
         this.config.currentPage = 1;
         this.sortConfig = new SortOptions('dc.title', SortDirection.ASC);
         this.initTopCommunityList()
     }
 
     private initTopCommunityList(): void {
-        this.communities$ = this.cds.findTop({
+        this.payload$ = 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),
+            map((results) => results.payload),
         );
     }
 
     loadCommunities(expandedNodes: FlatNode[]): Observable<FlatNode[]> {
-        return this.communities$
+        return this.payload$
             .pipe(
                 take(1),
-                switchMap((result: Community[]) => {
+                switchMap((result: PaginatedList<Community>) => {
                     return this.transformListOfCommunities(result, 0, null, expandedNodes);
                 }),
-                catchError(() => observableOf([]))
+                catchError(() => observableOf([])),
+                tap((results) => console.log('endload', results)),
             );
     };
 
-    private transformListOfCommunities(listOfCommunities: Community[],
+    private transformListOfCommunities(listOfPaginatedCommunities: PaginatedList<Community>,
                                        level: number,
                                        parent: FlatNode,
                                        expandedNodes: FlatNode[]): Observable<FlatNode[]> {
-        if (isNotEmpty(listOfCommunities)) {
-            const obsList = listOfCommunities
+        if (isNotEmpty(listOfPaginatedCommunities.page)) {
+            const isNotAllCommunities = (listOfPaginatedCommunities.totalElements > listOfPaginatedCommunities.elementsPerPage);
+            let obsList = listOfPaginatedCommunities.page
                 .map((community: Community) =>
-                    this.transformCommunity(community, level, parent, expandedNodes));
+                    this.transformCommunity(community, level, parent, expandedNodes, isNotAllCommunities));
+
+            if (isNotAllCommunities) {
+                obsList = [...obsList, this.addPossibleShowMoreComunityFlatNode(level, parent)];
+            }
 
             return combineAndFlatten(obsList);
         } else {
@@ -96,7 +119,7 @@ export class CommunityListAdapter {
         }
     }
 
-    private transformCommunity(community: Community, level: number, parent: FlatNode, expandedNodes: FlatNode[]): Observable<FlatNode[]> {
+    private transformCommunity(community: Community, level: number, parent: FlatNode, expandedNodes: FlatNode[], isNotAllCommunities: boolean): Observable<FlatNode[]> {
         let isExpanded = false;
         if (isNotEmpty(expandedNodes)) {
             isExpanded = hasValue(expandedNodes.find((node) => (node.id === community.id)));
@@ -111,7 +134,7 @@ export class CommunityListAdapter {
                 filter((rd: RemoteData<PaginatedList<Community>>) => rd.hasSucceeded),
                 take(1),
                 switchMap((rd: RemoteData<PaginatedList<Community>>) =>
-                    this.transformListOfCommunities(rd.payload.page, level + 1, communityFlatNode, expandedNodes))
+                    this.transformListOfCommunities(rd.payload, level + 1, communityFlatNode, expandedNodes))
             );
 
             obsList = [...obsList, subCommunityNodes$];
@@ -119,16 +142,45 @@ export class CommunityListAdapter {
             const collectionNodes$ = community.collections.pipe(
                 filter((rd: RemoteData<PaginatedList<Collection>>) => rd.hasSucceeded),
                 take(1),
-                map((rd: RemoteData<PaginatedList<Collection>>) =>
-                    rd.payload.page
-                        .map((collection: Collection) => toFlatNode(collection, level + 1, false, parent))
+                tap((results) => console.log('collectionstap', results)),
+                map((rd: RemoteData<PaginatedList<Collection>>) => {
+                        let nodes$ = rd.payload.page
+                            .map((collection: Collection) => toFlatNode(collection, level + 1, false, parent));
+                        if (rd.payload.elementsPerPage < rd.payload.totalElements) {
+                            nodes$ = [...nodes$, this.addPossibleShowMoreCollectionFlatNode(level + 1, parent)];
+                        }
+                        return nodes$;
+                }
                 )
             );
-
             obsList = [...obsList, collectionNodes$];
         }
 
         return combineAndFlatten(obsList);
     }
 
+    private addPossibleShowMoreComunityFlatNode(level: number, parent: FlatNode): Observable<FlatNode[]> {
+        const dummyCommunity = Object.assign(new Community(), {
+            id: '999999',
+            metadata: {
+                'dc.title': [
+                    { language: 'en_US', value: 'Test' }
+                ]
+            }
+        })
+        return of([showMoreFlatNode(dummyCommunity, level, parent)]);
+    }
+
+    private addPossibleShowMoreCollectionFlatNode(level: number, parent: FlatNode): FlatNode {
+        const dummyCollection = Object.assign(new Collection(), {
+            id: '999999',
+            metadata: {
+                'dc.title': [
+                    { language: 'en_US', value: 'Test' }
+                ]
+            }
+        })
+        return showMoreFlatNode(dummyCollection, level, parent);
+    }
+
 }

src/app/community-list-page/community-list/community-list.component.html

@@ -1,6 +1,23 @@
 <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
+
+    <!-- This is the tree node template for show more node -->
+    <cdk-tree-node *cdkTreeNodeDef="let node; when: isShowMore" cdkTreeNodePadding
+                   class="example-tree-node">
+        <div class="btn-group"
+             (click)="getNextPage()">
+            <button type="button" class="btn btn-default" cdkTreeNodeToggle
+                    [attr.aria-label]="'toggle ' + node.name"
+                    (click)="getNextPage()">
+                <span class="fa fa-plus"
+                      aria-hidden="true"></span>
+            </button>
+            <h5 class="align-middle pt-2">
+                {{ 'communityList.showMore' | translate }}
+            </h5>
+        </div>
+    </cdk-tree-node>
     <!-- This is the tree node template for leaf nodes -->
-    <cdk-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding
+    <cdk-tree-node *cdkTreeNodeDef="let node; when: !(hasChild && isShowMore)" cdkTreeNodePadding
                    [style.display]="shouldRender(node) ? 'flex' : 'none'"
                    class="example-tree-node">
         <!-- use a disabled button to provide padding for tree leaf -->

src/app/community-list-page/community-list/community-list.component.ts

@@ -28,7 +28,13 @@ export class CommunityListComponent implements OnInit {
         this.dataSource.loadCommunities(null);
     }
 
-    hasChild = (_: number, node: FlatNode) => node.isExpandable;
+    hasChild(_: number, node: FlatNode) {
+        return node.isExpandable;
+    }
+
+    isShowMore(_: number, node: FlatNode) {
+        return node.isShowMoreNode;
+    }
 
     shouldRender(node: FlatNode) {
         const parent = node.parent;
@@ -54,4 +60,9 @@ export class CommunityListComponent implements OnInit {
         return getCommunityPageRoute(node.id);
     }
 
+    getNextPage(): void {
+        console.log('go to next page');
+        // TODO
+    }
+
 }