From 3da2b3c0ef9f8f47a2cb3ad79f5dd3d76a5030c4 Mon Sep 17 00:00:00 2001 From: Nona Luypaert Date: Mon, 17 Apr 2023 10:13:14 +0200 Subject: [PATCH] 101127: Put modal from VocabularyTreeview in VocabularyTreeviewModal --- .../models/onebox/dynamic-onebox.component.ts | 4 +- src/app/shared/form/form.module.ts | 4 +- .../vocabulary-treeview-modal.component.html | 15 ++ .../vocabulary-treeview-modal.component.scss | 0 ...ocabulary-treeview-modal.component.spec.ts | 25 ++++ .../vocabulary-treeview-modal.component.ts | 38 +++++ .../vocabulary-treeview.component.html | 136 ++++++++---------- .../vocabulary-treeview.component.ts | 9 +- .../search-hierarchy-filter.component.ts | 8 +- 9 files changed, 156 insertions(+), 83 deletions(-) create mode 100644 src/app/shared/form/vocabulary-treeview-modal/vocabulary-treeview-modal.component.html create mode 100644 src/app/shared/form/vocabulary-treeview-modal/vocabulary-treeview-modal.component.scss create mode 100644 src/app/shared/form/vocabulary-treeview-modal/vocabulary-treeview-modal.component.spec.ts create mode 100644 src/app/shared/form/vocabulary-treeview-modal/vocabulary-treeview-modal.component.ts diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.ts index 008328bf73..63eca80dfe 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.ts +++ b/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 : ''; diff --git a/src/app/shared/form/form.module.ts b/src/app/shared/form/form.module.ts index 61fc7e3c39..6e3fc33832 100644 --- a/src/app/shared/form/form.module.ts +++ b/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 = [ diff --git a/src/app/shared/form/vocabulary-treeview-modal/vocabulary-treeview-modal.component.html b/src/app/shared/form/vocabulary-treeview-modal/vocabulary-treeview-modal.component.html new file mode 100644 index 0000000000..55f5ab5092 --- /dev/null +++ b/src/app/shared/form/vocabulary-treeview-modal/vocabulary-treeview-modal.component.html @@ -0,0 +1,15 @@ +
+

{{'vocabulary-treeview.header' | translate}}

+ +
+
+
+ + +
+
diff --git a/src/app/shared/form/vocabulary-treeview-modal/vocabulary-treeview-modal.component.scss b/src/app/shared/form/vocabulary-treeview-modal/vocabulary-treeview-modal.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/app/shared/form/vocabulary-treeview-modal/vocabulary-treeview-modal.component.spec.ts b/src/app/shared/form/vocabulary-treeview-modal/vocabulary-treeview-modal.component.spec.ts new file mode 100644 index 0000000000..989375fd13 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ VocabularyTreeviewModalComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(VocabularyTreeviewModalComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/form/vocabulary-treeview-modal/vocabulary-treeview-modal.component.ts b/src/app/shared/form/vocabulary-treeview-modal/vocabulary-treeview-modal.component.ts new file mode 100644 index 0000000000..48ff82f499 --- /dev/null +++ b/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, + ) { } +} diff --git a/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html b/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html index 39c62d6e53..18a61b73d7 100644 --- a/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html +++ b/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html @@ -1,77 +1,67 @@ -
-

{{'vocabulary-treeview.header' | translate}}

- -
-
-
- -
-
-
- -
- - -
-
+ +
+
+
+ +
+ +
-
- -

- {{'vocabulary-treeview.search.no-result' | translate}} -

- - - - - - - - - - - - - - - - - - - - - - -
+
+ +

+ {{'vocabulary-treeview.search.no-result' | translate}} +

+ + + + + + + + + + + + + + + + + + + + + + +
diff --git a/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.ts b/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.ts index 56909090c7..60dfa0ced8 100644 --- a/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.ts +++ b/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} store * @param {TranslateService} translate */ constructor( - public activeModal: NgbActiveModal, private vocabularyTreeviewService: VocabularyTreeviewService, private store: Store, private translate: TranslateService diff --git a/src/app/shared/search/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.ts b/src/app/shared/search/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.ts index 8504237f09..f9b3f2bff9 100644 --- a/src/app/shared/search/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.ts +++ b/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(); } /**