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
index ab8361aad02..fea81d1d9a1 100644
--- 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
@@ -5,6 +5,7 @@ import {
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { TranslateModule } from '@ngx-translate/core';
+import { VocabularyOptions } from '../../../core/submission/vocabularies/models/vocabulary-options.model';
import { VocabularyTreeviewComponent } from '../vocabulary-treeview/vocabulary-treeview.component';
import { VocabularyTreeviewModalComponent } from './vocabulary-treeview-modal.component';
@@ -13,6 +14,7 @@ describe('VocabularyTreeviewModalComponent', () => {
let fixture: ComponentFixture
;
const modalStub = jasmine.createSpyObj('modalStub', ['close']);
+ const vocabularyOptions = new VocabularyOptions('vocabularyTest', false);
beforeEach(async () => {
await TestBed.configureTestingModule({
@@ -32,10 +34,16 @@ describe('VocabularyTreeviewModalComponent', () => {
beforeEach(() => {
fixture = TestBed.createComponent(VocabularyTreeviewModalComponent);
component = fixture.componentInstance;
+ component.vocabularyOptions = vocabularyOptions;
+ spyOn(component as any, 'setDescription').and.callThrough();
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
+
+ it('should init descrption message', () => {
+ expect((component as any).setDescription).toHaveBeenCalled();
+ });
});
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
index d195ed36d3b..aabb9ab3afd 100644
--- 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
@@ -2,10 +2,14 @@ import {
Component,
EventEmitter,
Input,
+ OnInit,
Output,
} from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-import { TranslateModule } from '@ngx-translate/core';
+import {
+ TranslateModule,
+ TranslateService,
+} from '@ngx-translate/core';
import { VocabularyEntryDetail } from '../../../core/submission/vocabularies/models/vocabulary-entry-detail.model';
import { VocabularyOptions } from '../../../core/submission/vocabularies/models/vocabulary-options.model';
@@ -24,7 +28,7 @@ import { VocabularyTreeviewComponent } from '../vocabulary-treeview/vocabulary-t
/**
* Component that contains a modal to display a VocabularyTreeviewComponent
*/
-export class VocabularyTreeviewModalComponent {
+export class VocabularyTreeviewModalComponent implements OnInit {
/**
* The {@link VocabularyOptions} object
@@ -39,13 +43,23 @@ export class VocabularyTreeviewModalComponent {
/**
* The vocabulary entries already selected, if any
*/
- @Input() selectedItems: string[] = [];
+ @Input() selectedItems: VocabularyEntryDetail[] = [];
/**
* Whether to allow selecting multiple values with checkboxes
*/
@Input() multiSelect = false;
+ /**
+ * A boolean representing if to show the add button or not
+ */
+ @Input() showAdd = true;
+
+ /**
+ * Contain a descriptive message for this vocabulary retrieved from i18n files
+ */
+ description: string;
+
/**
* An event fired when a vocabulary entry is selected.
* Event's payload equals to {@link VocabularyEntryDetail} selected.
@@ -56,11 +70,17 @@ export class VocabularyTreeviewModalComponent {
* Initialize instance variables
*
* @param {NgbActiveModal} activeModal
+ * @param {TranslateService} translate
*/
constructor(
public activeModal: NgbActiveModal,
+ protected translate: TranslateService,
) { }
+ ngOnInit(): void {
+ this.setDescription();
+ }
+
/**
* Method called on entry select
*/
@@ -68,4 +88,13 @@ export class VocabularyTreeviewModalComponent {
this.select.emit(item);
this.activeModal.close(item);
}
+
+ /**
+ * Set the description message related to the given vocabulary
+ */
+ private setDescription() {
+ const descriptionLabel = 'vocabulary-treeview.tree.description.' + this.vocabularyOptions.name;
+ this.description = this.translate.instant(descriptionLabel);
+ }
+
}
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 412c732b019..d06bbe7ad7d 100644
--- a/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html
+++ b/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html
@@ -1,4 +1,4 @@
-
+