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,13 +1,5 @@
-<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">
+<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()">
@@ -21,8 +13,8 @@
       </div>
     </div>
   </div>
-    </div>
-    <div class="treeview-container">
+</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>
@@ -72,6 +64,4 @@
       </button>
     </cdk-tree-node>
   </cdk-tree>
-    </div>
-  </div>
 </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();
   }
 
   /**