[UXP-242] implement load all for tree view

Author: FrancescoMolinaro

src/app/cris-layout/cris-layout-matrix/cris-layout-box-container/boxes/hierarchy/hierarchy.component.html

@@ -7,5 +7,6 @@ <h4 class="modal-title border-bottom mb-3" *ngIf="vocabularyHeader">{{'vocabular
     [enabledSearch]="false"
     [publicModeOnly]="true"
     [isRelationComponent]="true"
+    [loadAllNodes]="true"
   ></ds-vocabulary-treeview>
 </div>

src/app/shared/form/vocabulary-treeview-modal/vocabulary-treeview-modal.component.html

@@ -11,6 +11,7 @@ <h4 class="modal-title">{{'vocabulary-treeview.header' | translate}}</h4>
                             [preloadLevel]="preloadLevel"
                             [selectedItems]="selectedItems"
                             [multiSelect]="multiSelect"
+                            [loadAllNodes]="true"
                             (select)="onSelect($event)">
     </ds-vocabulary-treeview>
   </div>

src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html

@@ -23,7 +23,7 @@
   <h2 *ngIf="!(loading | async) && dataSource.data.length === 0" class="h4 text-center text-muted mt-4" >
     <span>{{'vocabulary-treeview.search.no-result' | translate}}</span>
   </h2>
-  <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
+  <cdk-tree *ngIf="!(loading | async) && dataSource.data.length !== 0" [dataSource]="dataSource" [treeControl]="treeControl">
     <!-- Leaf node -->
     <cdk-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding class="d-flex">
       <span aria-hidden="true" type="button" class="btn btn-default px-2 mr-1" cdkTreeNodeToggle>

src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.spec.ts

@@ -146,7 +146,7 @@ describe('VocabularyTreeviewComponent test suite', () => {
       comp.selectedItems = [currentValue];
       fixture.detectChanges();
       expect(comp.dataSource.data).toEqual([]);
-      expect(vocabularyTreeviewServiceStub.initialize).toHaveBeenCalledWith(comp.vocabularyOptions, new PageInfo(), ['entryID'], 'entryID', false, false);
+      expect(vocabularyTreeviewServiceStub.initialize).toHaveBeenCalledWith(comp.vocabularyOptions, testPageInfo, ['entryID'], 'entryID', false, false, false);
     });
 
     it('should should init component properly with init value as VocabularyEntry', () => {
@@ -158,7 +158,7 @@ describe('VocabularyTreeviewComponent test suite', () => {
       comp.selectedItems = [currentValue];
       fixture.detectChanges();
       expect(comp.dataSource.data).toEqual([]);
-      expect(vocabularyTreeviewServiceStub.initialize).toHaveBeenCalledWith(comp.vocabularyOptions, new PageInfo(), ['entryID'], 'entryID', false, false);
+      expect(vocabularyTreeviewServiceStub.initialize).toHaveBeenCalledWith(comp.vocabularyOptions, testPageInfo, ['entryID'], 'entryID', false, false, false);
     });
 
     it('should should init component properly with init value as VocabularyEntryDetail', () => {
@@ -168,7 +168,7 @@ describe('VocabularyTreeviewComponent test suite', () => {
       comp.selectedItems = [currentValue];
       fixture.detectChanges();
       expect(comp.dataSource.data).toEqual([]);
-      expect(vocabularyTreeviewServiceStub.initialize).toHaveBeenCalledWith(comp.vocabularyOptions, new PageInfo(), ['entryID'], 'entryID', false, false);
+      expect(vocabularyTreeviewServiceStub.initialize).toHaveBeenCalledWith(comp.vocabularyOptions, testPageInfo, ['entryID'], 'entryID', false, false, false);
     });
 
     it('should should init component properly with init value as VocabularyEntry and publicModeOnly enabled', () => {
@@ -181,7 +181,7 @@ describe('VocabularyTreeviewComponent test suite', () => {
       comp.selectedItems = [currentValue];
       fixture.detectChanges();
       expect(comp.dataSource.data).toEqual([]);
-      expect(vocabularyTreeviewServiceStub.initialize).toHaveBeenCalledWith(comp.vocabularyOptions, new PageInfo(), ['entryID'], 'entryID', true, false);
+      expect(vocabularyTreeviewServiceStub.initialize).toHaveBeenCalledWith(comp.vocabularyOptions, testPageInfo, ['entryID'], 'entryID', true, false, false);
     });
 
     it('should call loadMore function', () => {
@@ -201,7 +201,7 @@ describe('VocabularyTreeviewComponent test suite', () => {
       const node = new TreeviewFlatNode(item);
       comp.loadChildren(node);
       fixture.detectChanges();
-      expect(vocabularyTreeviewServiceStub.loadMore).toHaveBeenCalledWith(node.item, [], true);
+      expect(vocabularyTreeviewServiceStub.loadMore).toHaveBeenCalledWith(node.item, [], true, false);
     });
 
     it('should emit proper FormFieldMetadataValueObject when VocabularyEntryDetail has authority', () => {

src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.ts

@@ -73,6 +73,11 @@ export class VocabularyTreeviewComponent implements OnDestroy, OnInit, OnChanges
    */
   @Input() isRelationComponent = false;
 
+  /**
+   * Whether to load all available nodes
+   */
+  @Input() loadAllNodes = false;
+
   /**
    * A map containing the current node showed by the tree
    */
@@ -233,7 +238,7 @@ export class VocabularyTreeviewComponent implements OnDestroy, OnInit, OnChanges
     this.loading = this.vocabularyTreeviewService.isLoading();
 
     const entryId: string = (this.selectedItems?.length > 0) ? this.getEntryId(this.selectedItems[0]) : null;
-    this.vocabularyTreeviewService.initialize(this.vocabularyOptions, new PageInfo(), this.getSelectedEntryIds(), entryId, this.publicModeOnly, this.isRelationComponent);
+    this.vocabularyTreeviewService.initialize(this.vocabularyOptions, this.initialPageInfo, this.getSelectedEntryIds(), entryId, this.publicModeOnly, this.isRelationComponent, this.loadAllNodes);
   }
 
   /**
@@ -257,7 +262,7 @@ export class VocabularyTreeviewComponent implements OnDestroy, OnInit, OnChanges
    * @param node The TreeviewFlatNode for which to load children nodes
    */
   loadChildren(node: TreeviewFlatNode) {
-    this.vocabularyTreeviewService.loadMore(node.item, this.getSelectedEntryIds(), true);
+    this.vocabularyTreeviewService.loadMore(node.item, this.getSelectedEntryIds(), true, this.loadAllNodes);
   }
 
   /**
@@ -363,7 +368,7 @@ export class VocabularyTreeviewComponent implements OnDestroy, OnInit, OnChanges
       this.selectedItems = [];
       this.searchText = '';
       this.vocabularyTreeviewService.cleanTree();
-      this.vocabularyTreeviewService.initialize(this.vocabularyOptions, new PageInfo(), this.getSelectedEntryIds(), null);
+      this.vocabularyTreeviewService.initialize(this.vocabularyOptions, this.initialPageInfo, this.getSelectedEntryIds(), null, null, this.isRelationComponent);
     }
   }
 }

src/app/shared/form/vocabulary-treeview/vocabulary-treeview.service.spec.ts

@@ -272,7 +272,7 @@ describe('VocabularyTreeviewService test suite', () => {
       scheduler.schedule(() => service.initialize(vocabularyOptions, pageInfo, [child.id], child.id, false, true));
       scheduler.flush();
 
-      expect(serviceAsAny.retrieveNodesTreeByTopParentEntry).toHaveBeenCalledWith(child.otherInformation.parent, pageInfo, [child.id]);
+      expect(serviceAsAny.retrieveNodesTreeByTopParentEntry).toHaveBeenCalledWith(child.otherInformation.parent, pageInfo, [child.id], false);
     });
   });
 

src/app/shared/form/vocabulary-treeview/vocabulary-treeview.service.ts

@@ -1,8 +1,8 @@
 import { RemoteData } from 'src/app/core/data/remote-data';
 import { Injectable } from '@angular/core';
 
-import { BehaviorSubject, combineLatest, Observable, of as observableOf } from 'rxjs';
-import { map, merge, mergeMap, scan } from 'rxjs/operators';
+import { BehaviorSubject, combineLatest, EMPTY, Observable, of as observableOf } from 'rxjs';
+import { expand, map, merge, mergeMap, scan } from 'rxjs/operators';
 import findIndex from 'lodash/findIndex';
 
 import { LOAD_MORE_NODE, LOAD_MORE_ROOT_NODE, TreeviewFlatNode, TreeviewNode } from './vocabulary-treeview-node.model';
@@ -104,8 +104,9 @@ export class VocabularyTreeviewService {
    * @param initValueId     The entry id of the node to mark as selected, if any
    * @param publicModeOnly  Whether the tree is used in a public view
    * @param isRelationComponent Whether the tree is used as relation component
+   * @param loadAll
    */
-  initialize(options: VocabularyOptions, pageInfo: PageInfo, selectedItems: string[], initValueId?: string, publicModeOnly = false, isRelationComponent = false): void {
+  initialize(options: VocabularyOptions, pageInfo: PageInfo, selectedItems: string[], initValueId?: string, publicModeOnly = false, isRelationComponent = false, loadAll = false): void {
     this.loading.next(true);
     this.vocabularyOptions = options;
     this.vocabularyName = options.name;
@@ -116,8 +117,8 @@ export class VocabularyTreeviewService {
           if (hasValue(hierarchy) && hierarchy.length > 0) {
             this.initValueHierarchy = hierarchy;
             isRelationComponent ?
-              this.retrieveNodesTreeByTopParentEntry(hierarchy[0], pageInfo, selectedItems) :
-              this.retrieveTopNodes(pageInfo, [], selectedItems, publicModeOnly ? hierarchy : null);
+              this.retrieveNodesTreeByTopParentEntry(hierarchy[0], pageInfo, selectedItems, loadAll) :
+              this.retrieveTopNodes(pageInfo, [], selectedItems, publicModeOnly ? hierarchy : null, loadAll);
           } else {
             this.loading.next(false);
           }
@@ -150,8 +151,9 @@ export class VocabularyTreeviewService {
    * @param item
    * @param selectedItems
    * @param onlyFirstTime
+   * @param loadAll
    */
-  loadMore(item: VocabularyEntryDetail, selectedItems: string[], onlyFirstTime = false) {
+  loadMore(item: VocabularyEntryDetail, selectedItems: string[], onlyFirstTime = false, loadAll = false) {
     if (!this.nodeMap.has(item.otherInformation.id)) {
       return;
     }
@@ -175,11 +177,18 @@ export class VocabularyTreeviewService {
           currentPage: list.pageInfo.currentPage + 1
         });
         parent.updatePageInfo(newPageInfo);
+        parent.childrenChange.next(children);
+
+        if (loadAll) {
+          // Need a new load more node
+          this.loadMore(item, selectedItems);
+          return;
+        }
 
-        // Need a new load more node
         children.push(new TreeviewNode(LOAD_MORE_NODE, false, newPageInfo, item));
+      } else {
+        parent.childrenChange.next(children);
       }
-      parent.childrenChange.next(children);
       this.dataChange.next(this.dataChange.value);
     });
 
@@ -289,11 +298,23 @@ export class VocabularyTreeviewService {
    * Return the vocabulary entry's children
    * @param parentId The node id
    * @param pageInfo The {@link PageInfo} object
+   * @param loadAll
+   * @param selectedItem
    * @return Observable<PaginatedList<VocabularyEntryDetail>>
    */
-  private getChildrenNodesByParent(parentId: string, pageInfo: PageInfo): Observable<PaginatedList<VocabularyEntryDetail>> {
+  private getChildrenNodesByParent(parentId: string, pageInfo: PageInfo, loadAll = false): Observable<PaginatedList<VocabularyEntryDetail>> {
     return this.vocabularyService.getEntryDetailChildren(parentId, this.vocabularyName, pageInfo).pipe(
-      getFirstSucceededRemoteDataPayload()
+      getFirstSucceededRemoteDataPayload(),
+    ).pipe(
+      expand(res => {
+        if (res.pageInfo.currentPage + 1 <= res.pageInfo.totalPages && loadAll) {
+          const newPageInfo = Object.assign({}, res.pageInfo, {currentPage: res.pageInfo.currentPage + 1});
+          return this.vocabularyService.getEntryDetailChildren(parentId, this.vocabularyName, newPageInfo).pipe(
+            getFirstSucceededRemoteDataPayload(),
+          );
+        }
+        return EMPTY;
+      })
     );
   }
 
@@ -331,8 +352,9 @@ export class VocabularyTreeviewService {
    * @param nodes The top level nodes already loaded, if any
    * @param selectedItems The currently selected items
    * @param hierarchyToLimit If given the top nodes included will be only the one related to the hierarchy
+   * @param loadAll
    */
-  private retrieveTopNodes(pageInfo: PageInfo, nodes: TreeviewNode[], selectedItems: string[], hierarchyToLimit?: string[]): void {
+  private retrieveTopNodes(pageInfo: PageInfo, nodes: TreeviewNode[], selectedItems: string[], hierarchyToLimit?: string[], loadAll = false): void {
     this.vocabularyService.searchTopEntries(this.vocabularyName, pageInfo).pipe(
       getFirstSucceededRemoteDataPayload()
     ).subscribe((list: PaginatedList<VocabularyEntryDetail>) => {
@@ -344,15 +366,20 @@ export class VocabularyTreeviewService {
         nodes.push(...newNodes);
       }
 
-
       if ((list.pageInfo.currentPage + 1) <= list.pageInfo.totalPages) {
-        // Need a new load more node
         const newPageInfo: PageInfo = Object.assign(new PageInfo(), list.pageInfo, {
           currentPage: list.pageInfo.currentPage + 1
         });
-        const loadMoreNode = new TreeviewNode(LOAD_MORE_ROOT_NODE, false, newPageInfo);
-        loadMoreNode.updatePageInfo(newPageInfo);
-        nodes.push(loadMoreNode);
+
+        if (loadAll) {
+          // loop over pages until we load all of them
+          this.retrieveTopNodes(newPageInfo, nodes, selectedItems, hierarchyToLimit);
+          return;
+        } else {
+          const loadMoreNode = new TreeviewNode(LOAD_MORE_ROOT_NODE, false, newPageInfo);
+          loadMoreNode.updatePageInfo(newPageInfo);
+          nodes.push(loadMoreNode);
+        }
       }
       this.loading.next(false);
       // Notify the change.
@@ -365,23 +392,23 @@ export class VocabularyTreeviewService {
    * @param entry The root node to use to start building the tree
    * @param pageInfo The {@link PageInfo} object
    * @param selectedItems The currently selected items
+   * @param loadAll
    */
-  private retrieveNodesTreeByTopParentEntry(entry: string, pageInfo: PageInfo, selectedItems: string[]): void {
-    const nodes = [];
+  private retrieveNodesTreeByTopParentEntry(entry: string, pageInfo: PageInfo, selectedItems: string[], loadAll = false): void {
     const rootNode$ = this.getById(entry);
     let tempList;
 
     combineLatest([
       rootNode$,
-      this.getChildrenNodesByParent(entry, pageInfo)
+      this.getChildrenNodesByParent(entry, pageInfo, loadAll)
     ]).pipe(
       mergeMap(([rootNode, list]) => {
         tempList = list;
         let newPageInfo: PageInfo;
 
         const childNodes: TreeviewNode[] = list.page.map((entryDetail: VocabularyEntryDetail) => this._generateNode(entryDetail, selectedItems));
 
-        if ((tempList.pageInfo.currentPage + 1) <= tempList.pageInfo.totalPages) {
+        if ((tempList.pageInfo.currentPage + 1) <= tempList.pageInfo.totalPages && !loadAll) {
           // Need a new load more node
           newPageInfo = Object.assign(new PageInfo(), tempList.pageInfo, {
             currentPage: tempList.pageInfo.currentPage + 1
@@ -398,11 +425,12 @@ export class VocabularyTreeviewService {
         );
       })
     ).subscribe(hierarchy => {
-      nodes.push(hierarchy);
-
-      this.loading.next(false);
+      // Loading stops if we reach the end of the list or if we are done with the first loading and don't need to load all.
+      if ((tempList.pageInfo.currentPage === tempList.pageInfo.totalPages && loadAll) || !loadAll) {
+        this.loading.next(false);
+      }
       // Notify the change.
-      this.dataChange.next(nodes);
+      this.dataChange.next([hierarchy]);
 
     });