101127: Put modal from VocabularyTreeview in VocabularyTreeviewModal

src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.ts

@@ -30,8 +30,8 @@ import { VocabularyEntry } from '../../../../../../core/submission/vocabularies/
 import { PageInfo } from '../../../../../../core/shared/page-info.model';
 import { DsDynamicVocabularyComponent } from '../dynamic-vocabulary.component';
 import { Vocabulary } from '../../../../../../core/submission/vocabularies/models/vocabulary.model';
-import { VocabularyTreeviewComponent } from '../../../../vocabulary-treeview/vocabulary-treeview.component';
 import { VocabularyEntryDetail } from '../../../../../../core/submission/vocabularies/models/vocabulary-entry-detail.model';
+import { VocabularyTreeviewModalComponent } from '../../../../vocabulary-treeview-modal/vocabulary-treeview-modal.component';
 
 /**
  * Component representing a onebox input field.
@@ -222,7 +222,7 @@ export class DsDynamicOneboxComponent extends DsDynamicVocabularyComponent imple
       map((vocabulary: Vocabulary) => vocabulary.preloadLevel),
       take(1)
     ).subscribe((preloadLevel) => {
-      const modalRef: NgbModalRef = this.modalService.open(VocabularyTreeviewComponent, { size: 'lg', windowClass: 'treeview' });
+      const modalRef: NgbModalRef = this.modalService.open(VocabularyTreeviewModalComponent, { size: 'lg', windowClass: 'treeview' });
       modalRef.componentInstance.vocabularyOptions = this.model.vocabularyOptions;
       modalRef.componentInstance.preloadLevel = preloadLevel;
       modalRef.componentInstance.selectedItem = this.currentValue ? this.currentValue : '';

src/app/shared/form/form.module.ts

@@ -33,6 +33,7 @@ import { AuthorityConfidenceStateDirective } from './directives/authority-confid
 import { SortablejsModule } from 'ngx-sortablejs';
 import { VocabularyTreeviewComponent } from './vocabulary-treeview/vocabulary-treeview.component';
 import { VocabularyTreeviewService } from './vocabulary-treeview/vocabulary-treeview.service';
+import { VocabularyTreeviewModalComponent } from './vocabulary-treeview-modal/vocabulary-treeview-modal.component';
 import { FormBuilderService } from './builder/form-builder.service';
 import { DsDynamicTypeBindRelationService } from './builder/ds-dynamic-form-ui/ds-dynamic-type-bind-relation.service';
 import { FormService } from './form.service';
@@ -67,7 +68,8 @@ const COMPONENTS = [
   ChipsComponent,
   NumberPickerComponent,
   VocabularyTreeviewComponent,
-  ThemedExternalSourceEntryImportModalComponent
+  VocabularyTreeviewModalComponent,
+  ThemedExternalSourceEntryImportModalComponent,
 ];
 
 const DIRECTIVES = [

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

@@ -0,0 +1,15 @@
+<div class="modal-header">
+  <h4 class="modal-title">{{'vocabulary-treeview.header' | translate}}</h4>
+  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+<div class="modal-body">
+  <div class="p-3">
+    <ds-vocabulary-treeview [vocabularyOptions]="vocabularyOptions"
+                            [preloadLevel]="preloadLevel"
+                            [selectedItem]="selectedItem"
+                            [activeModal]="activeModal">
+    </ds-vocabulary-treeview>
+  </div>
+</div>

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

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VocabularyTreeviewModalComponent } from './vocabulary-treeview-modal.component';
+
+describe('VocabularyTreeviewModalComponent', () => {
+  let component: VocabularyTreeviewModalComponent;
+  let fixture: ComponentFixture<VocabularyTreeviewModalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ VocabularyTreeviewModalComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(VocabularyTreeviewModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,38 @@
+import { Component, Input } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { VocabularyOptions } from '../../../core/submission/vocabularies/models/vocabulary-options.model';
+
+@Component({
+  selector: 'ds-vocabulary-treeview-modal',
+  templateUrl: './vocabulary-treeview-modal.component.html',
+  styleUrls: ['./vocabulary-treeview-modal.component.scss']
+})
+/**
+ * Component that contains a modal to display a VocabularyTreeviewComponent
+ */
+export class VocabularyTreeviewModalComponent {
+
+  /**
+   * The {@link VocabularyOptions} object
+   */
+  @Input() vocabularyOptions: VocabularyOptions;
+
+  /**
+   * Representing how many tree level load at initialization
+   */
+  @Input() preloadLevel = 2;
+
+  /**
+   * The vocabulary entry already selected, if any
+   */
+  @Input() selectedItem: any = null;
+
+  /**
+   * Initialize instance variables
+   *
+   * @param {NgbActiveModal} activeModal
+   */
+  constructor(
+    public activeModal: NgbActiveModal,
+  ) { }
+}

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

@@ -1,77 +1,67 @@
-<div class="modal-header">
-  <h4 class="modal-title">{{'vocabulary-treeview.header' | translate}}</h4>
-  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
-    <span aria-hidden="true">&times;</span>
-  </button>
-</div>
-<div class="modal-body">
-  <div class="p-3">
-    <ds-alert *ngIf="description | async" [content]="description | async" [type]="'alert-info'"></ds-alert>
-    <div class="treeview-header row">
-      <div class="col-12">
-        <div class="input-group">
-          <input type="text" class="form-control" [(ngModel)]="searchText" (keyup.enter)="search()">
-          <div class="input-group-append" id="button-addon4">
-            <button class="btn btn-outline-primary" type="button" (click)="search()" [disabled]="!isSearchEnabled()">
-              {{'vocabulary-treeview.search.form.search' | translate}}
-            </button>
-            <button class="btn btn-outline-secondary" type="button" (click)="reset()">
-              {{'vocabulary-treeview.search.form.reset' | translate}}
-            </button>
-          </div>
-        </div>
+<ds-alert *ngIf="description | async" [content]="description | async" [type]="'alert-info'"></ds-alert>
+<div class="treeview-header row">
+  <div class="col-12">
+    <div class="input-group">
+      <input type="text" class="form-control" [(ngModel)]="searchText" (keyup.enter)="search()">
+      <div class="input-group-append" id="button-addon4">
+        <button class="btn btn-outline-primary" type="button" (click)="search()" [disabled]="!isSearchEnabled()">
+          {{'vocabulary-treeview.search.form.search' | translate}}
+        </button>
+        <button class="btn btn-outline-secondary" type="button" (click)="reset()">
+          {{'vocabulary-treeview.search.form.reset' | translate}}
+        </button>
       </div>
     </div>
-    <div class="treeview-container">
-      <ds-themed-loading *ngIf="loading | async" [showMessage]="false"></ds-themed-loading>
-      <h4 *ngIf="!(loading | async) && dataSource.data.length === 0" class="text-center text-muted mt-4" >
-        <span>{{'vocabulary-treeview.search.no-result' | translate}}</span>
-      </h4>
-      <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
-        <!-- Leaf node -->
-        <cdk-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding class="d-flex">
-            <button type="button" class="btn btn-default" cdkTreeNodeToggle>
-              <span class="fas fa-angle-right fa-2x invisible" aria-hidden="true"></span>
-            </button>
-            <button class="btn btn-outline-link btn-sm text-left"
-                    [class.text-success]="node.item?.value === selectedItem?.value"
-                    [disabled]="!node.item?.selectable"
-                    [ngbTooltip]="node.item?.otherInformation?.note"
-                    [openDelay]="500"
-                    container="body"
-                    (click)="onSelect(node.item)">{{node.item.display}}</button>
-        </cdk-tree-node>
-
-        <!-- expandable node -->
-        <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChildren" cdkTreeNodePadding class="d-flex">
-            <button type="button" class="btn btn-default" cdkTreeNodeToggle
-                    [attr.aria-label]="'toggle ' + node.name"
-                    (click)="loadChildren(node)">
-              <span class="fas {{treeControl.isExpanded(node) ? 'fa-angle-down' : 'fa-angle-right'}} fa-2x"
-                    aria-hidden="true"></span>
-            </button>
-
-            <button class="btn btn-outline-link btn-sm text-left"
-                    [class.text-success]="node.item?.value === selectedItem?.value"
-                    [disabled]="!node.item?.selectable"
-                    [ngbTooltip]="node.item?.otherInformation?.note"
-                    [openDelay]="500"
-                    container="body"
-                    (click)="onSelect(node.item)">{{node.item.display}}</button>
-        </cdk-tree-node>
-
-        <cdk-tree-node *cdkTreeNodeDef="let node; when: isLoadMore" cdkTreeNodePadding>
-          <button class="btn btn-outline-secondary btn-sm" (click)="loadMore(node.loadMoreParentItem)">
-            {{'vocabulary-treeview.load-more' | translate}}...
-          </button>
-        </cdk-tree-node>
-
-        <cdk-tree-node *cdkTreeNodeDef="let node; when: isLoadMoreRoot">
-          <button class="btn btn-outline-secondary btn-sm" (click)="loadMoreRoot(node)">
-            {{'vocabulary-treeview.load-more' | translate}}...
-          </button>
-        </cdk-tree-node>
-      </cdk-tree>
-    </div>
   </div>
 </div>
+<div class="treeview-container">
+  <ds-themed-loading *ngIf="loading | async" [showMessage]="false"></ds-themed-loading>
+  <h4 *ngIf="!(loading | async) && dataSource.data.length === 0" class="text-center text-muted mt-4" >
+    <span>{{'vocabulary-treeview.search.no-result' | translate}}</span>
+  </h4>
+  <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
+    <!-- Leaf node -->
+    <cdk-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding class="d-flex">
+        <button type="button" class="btn btn-default" cdkTreeNodeToggle>
+          <span class="fas fa-angle-right fa-2x invisible" aria-hidden="true"></span>
+        </button>
+        <button class="btn btn-outline-link btn-sm text-left"
+                [class.text-success]="node.item?.value === selectedItem?.value"
+                [disabled]="!node.item?.selectable"
+                [ngbTooltip]="node.item?.otherInformation?.note"
+                [openDelay]="500"
+                container="body"
+                (click)="onSelect(node.item)">{{node.item.display}}</button>
+    </cdk-tree-node>
+
+    <!-- expandable node -->
+    <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChildren" cdkTreeNodePadding class="d-flex">
+        <button type="button" class="btn btn-default" cdkTreeNodeToggle
+                [attr.aria-label]="'toggle ' + node.name"
+                (click)="loadChildren(node)">
+          <span class="fas {{treeControl.isExpanded(node) ? 'fa-angle-down' : 'fa-angle-right'}} fa-2x"
+                aria-hidden="true"></span>
+        </button>
+
+        <button class="btn btn-outline-link btn-sm text-left"
+                [class.text-success]="node.item?.value === selectedItem?.value"
+                [disabled]="!node.item?.selectable"
+                [ngbTooltip]="node.item?.otherInformation?.note"
+                [openDelay]="500"
+                container="body"
+                (click)="onSelect(node.item)">{{node.item.display}}</button>
+    </cdk-tree-node>
+
+    <cdk-tree-node *cdkTreeNodeDef="let node; when: isLoadMore" cdkTreeNodePadding>
+      <button class="btn btn-outline-secondary btn-sm" (click)="loadMore(node.loadMoreParentItem)">
+        {{'vocabulary-treeview.load-more' | translate}}...
+      </button>
+    </cdk-tree-node>
+
+    <cdk-tree-node *cdkTreeNodeDef="let node; when: isLoadMoreRoot">
+      <button class="btn btn-outline-secondary btn-sm" (click)="loadMoreRoot(node)">
+        {{'vocabulary-treeview.load-more' | translate}}...
+      </button>
+    </cdk-tree-node>
+  </cdk-tree>
+</div>

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

@@ -20,7 +20,7 @@ import { CoreState } from '../../../core/core-state.model';
 import { lowerCase } from 'lodash/string';
 
 /**
- * Component that show a hierarchical vocabulary in a tree view
+ * Component that shows a hierarchical vocabulary in a tree view
  */
 @Component({
   selector: 'ds-vocabulary-treeview',
@@ -44,6 +44,11 @@ export class VocabularyTreeviewComponent implements OnDestroy, OnInit {
    */
   @Input() selectedItem: any = null;
 
+  /**
+   * The active modal
+   */
+  @Input() activeModal?: NgbActiveModal;
+
   /**
    * Contain a descriptive message for this vocabulary retrieved from i18n files
    */
@@ -103,13 +108,11 @@ export class VocabularyTreeviewComponent implements OnDestroy, OnInit {
   /**
    * Initialize instance variables
    *
-   * @param {NgbActiveModal} activeModal
    * @param {VocabularyTreeviewService} vocabularyTreeviewService
    * @param {Store<CoreState>} store
    * @param {TranslateService} translate
    */
   constructor(
-    public activeModal: NgbActiveModal,
     private vocabularyTreeviewService: VocabularyTreeviewService,
     private store: Store<CoreState>,
     private translate: TranslateService

src/app/shared/search/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.ts

@@ -3,7 +3,6 @@ import { renderFacetFor } from '../search-filter-type-decorator';
 import { FilterType } from '../../../models/filter-type.model';
 import { facetLoad, SearchFacetFilterComponent } from '../search-facet-filter/search-facet-filter.component';
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
-import { VocabularyTreeviewComponent } from '../../../../form/vocabulary-treeview/vocabulary-treeview.component';
 import {
   VocabularyEntryDetail
 } from '../../../../../core/submission/vocabularies/models/vocabulary-entry-detail.model';
@@ -26,6 +25,7 @@ import { Observable, BehaviorSubject } from 'rxjs';
 import { PageInfo } from '../../../../../core/shared/page-info.model';
 import { environment } from '../../../../../../environments/environment';
 import { addOperatorToFilterValue } from '../../../search.utils';
+import { VocabularyTreeviewModalComponent } from '../../../../form/vocabulary-treeview-modal/vocabulary-treeview-modal.component';
 
 @Component({
   selector: 'ds-search-hierarchy-filter',
@@ -83,7 +83,7 @@ export class SearchHierarchyFilterComponent extends SearchFacetFilterComponent i
    * When an entry is selected, add the filter query to the search options.
    */
   showVocabularyTree() {
-    const modalRef: NgbModalRef = this.modalService.open(VocabularyTreeviewComponent, {
+    const modalRef: NgbModalRef = this.modalService.open(VocabularyTreeviewModalComponent, {
       size: 'lg',
       windowClass: 'treeview'
     });
@@ -91,7 +91,7 @@ export class SearchHierarchyFilterComponent extends SearchFacetFilterComponent i
       name: this.getVocabularyEntry(),
       closed: true
     };
-    modalRef.componentInstance.select.subscribe((detail: VocabularyEntryDetail) => {
+    modalRef.result.then((detail: VocabularyEntryDetail) => {
       this.selectedValues$
         .pipe(take(1))
         .subscribe((selectedValues) => {
@@ -106,7 +106,7 @@ export class SearchHierarchyFilterComponent extends SearchFacetFilterComponent i
             },
           );
         });
-    });
+    }).catch();
   }
 
   /**