[DURACOM-208] Add a property to be able to provide description message

src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.html

@@ -1,7 +1,9 @@
 <div class="container">
   <div class="mb-3">
-    <ds-vocabulary-treeview [vocabularyOptions]=vocabularyOptions
+    <ds-vocabulary-treeview [description]="description"
+                            [vocabularyOptions]=vocabularyOptions
                             [multiSelect]="true"
+                            [showAdd]="false"
                             (select)="onSelect($event)"
                             (deselect)="onDeselect($event)">
     </ds-vocabulary-treeview>

src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.ts

@@ -1,12 +1,15 @@
-import { Component, OnInit, Inject, OnDestroy } from '@angular/core';
+import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { Observable, Subscription } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { TranslateService } from '@ngx-translate/core';
+
 import { VocabularyOptions } from '../../core/submission/vocabularies/models/vocabulary-options.model';
 import { VocabularyEntryDetail } from '../../core/submission/vocabularies/models/vocabulary-entry-detail.model';
-import { ActivatedRoute } from '@angular/router';
-import { Observable, Subscription } from 'rxjs';
 import { BrowseDefinition } from '../../core/shared/browse-definition.model';
 import { GenericConstructor } from '../../core/shared/generic-constructor';
 import { BROWSE_BY_COMPONENT_FACTORY } from '../browse-by-switcher/browse-by-decorator';
-import { map } from 'rxjs/operators';
 import { ThemeService } from 'src/app/shared/theme-support/theme.service';
 import { HierarchicalBrowseDefinition } from '../../core/shared/hierarchical-browse-definition.model';
 
@@ -60,8 +63,14 @@ export class BrowseByTaxonomyPageComponent implements OnInit, OnDestroy {
    */
   browseByComponentSubs: Subscription[] = [];
 
+  /**
+   * Browse description
+   */
+  description: string;
+
   public constructor( protected route: ActivatedRoute,
                       protected themeService: ThemeService,
+                      protected translate: TranslateService,
                       @Inject(BROWSE_BY_COMPONENT_FACTORY) private getComponentByBrowseByType: (browseByType, theme) => GenericConstructor<any>) {
   }
 
@@ -73,9 +82,11 @@ export class BrowseByTaxonomyPageComponent implements OnInit, OnDestroy {
       })
     );
     this.browseByComponentSubs.push(this.browseByComponent.subscribe((browseDefinition: HierarchicalBrowseDefinition) => {
+      this.selectedItems = [];
       this.facetType = browseDefinition.facetType;
       this.vocabularyName = browseDefinition.vocabulary;
       this.vocabularyOptions = { name: this.vocabularyName, closed: true };
+      this.description = this.translate.instant(`browse.metadata.${this.vocabularyName}.tree.descrption`);
     }));
   }
 

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

@@ -7,6 +7,7 @@
 <div class="modal-body">
   <div class="p-3">
     <ds-vocabulary-treeview [vocabularyOptions]="vocabularyOptions"
+                            [description]="description"
                             [preloadLevel]="preloadLevel"
                             [selectedItems]="selectedItems"
                             [multiSelect]="multiSelect"

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

@@ -1,14 +1,17 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { VocabularyTreeviewModalComponent } from './vocabulary-treeview-modal.component';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
 
+import { VocabularyTreeviewModalComponent } from './vocabulary-treeview-modal.component';
+import { VocabularyOptions } from '../../../core/submission/vocabularies/models/vocabulary-options.model';
+
 describe('VocabularyTreeviewModalComponent', () => {
   let component: VocabularyTreeviewModalComponent;
   let fixture: ComponentFixture<VocabularyTreeviewModalComponent>;
 
   const modalStub = jasmine.createSpyObj('modalStub', ['close']);
+  const vocabularyOptions = new VocabularyOptions('vocabularyTest', false);
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
@@ -24,10 +27,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();
+  });
 });

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

@@ -1,5 +1,8 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateService } from '@ngx-translate/core';
+
 import { VocabularyOptions } from '../../../core/submission/vocabularies/models/vocabulary-options.model';
 import { VocabularyEntryDetail } from '../../../core/submission/vocabularies/models/vocabulary-entry-detail.model';
 
@@ -11,7 +14,7 @@ import { VocabularyEntryDetail } from '../../../core/submission/vocabularies/mod
 /**
  * Component that contains a modal to display a VocabularyTreeviewComponent
  */
-export class VocabularyTreeviewModalComponent {
+export class VocabularyTreeviewModalComponent implements OnInit {
 
   /**
    * The {@link VocabularyOptions} object
@@ -26,26 +29,47 @@ 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;
 
+  /**
+   * Contain a descriptive message for this vocabulary retrieved from i18n files
+   */
+  description: string;
+
   /**
    * 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
    */
   onSelect(item: VocabularyEntryDetail) {
     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);
+  }
+
 }

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

@@ -1,4 +1,4 @@
-<ds-alert [content]="'vocabulary-treeview.info' | translate" [type]="'alert-info'"></ds-alert>
+<ds-alert *ngIf="description" [content]="description" [type]="'alert-info'"></ds-alert>
 <div class="treeview-header row">
   <div class="col-12">
     <div class="input-group">
@@ -10,7 +10,7 @@
         <button class="btn btn-outline-secondary" type="button" (click)="reset()">
           {{'vocabulary-treeview.search.form.reset' | translate}}
         </button>
-        <button class="btn btn-outline-primary" type="button" (click)="add()" [disabled]="this.vocabularyOptions.closed">
+        <button *ngIf="showAdd && this.vocabularyOptions.closed" class="btn btn-outline-primary" type="button" (click)="add()">
           {{'vocabulary-treeview.search.form.add' | translate}}
         </button>
       </div>

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

@@ -1,5 +1,5 @@
 import { FlatTreeControl } from '@angular/cdk/tree';
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges } from '@angular/core';
 
 import { Observable, Subscription } from 'rxjs';
 import { Store } from '@ngrx/store';
@@ -16,7 +16,9 @@ import { VocabularyTreeFlattener } from './vocabulary-tree-flattener';
 import { VocabularyTreeFlatDataSource } from './vocabulary-tree-flat-data-source';
 import { CoreState } from '../../../core/core-state.model';
 import { VocabularyService } from '../../../core/submission/vocabularies/vocabulary.service';
-import { getFirstSucceededRemoteDataPayload } from '../../../core/shared/operators';
+import { FormFieldMetadataValueObject } from '../builder/models/form-field-metadata-value.model';
+
+export type VocabularyTreeItemType = FormFieldMetadataValueObject | VocabularyEntry | VocabularyEntryDetail;
 
 /**
  * Component that shows a hierarchical vocabulary in a tree view
@@ -39,15 +41,25 @@ export class VocabularyTreeviewComponent implements OnDestroy, OnInit, OnChanges
   @Input() preloadLevel = 2;
 
   /**
-   * The vocabulary entries already selected, if any
+   * Contain a descriptive message for the tree
    */
-  @Input() selectedItems: string[] = [];
+  @Input() description = '';
 
   /**
    * Whether to allow selecting multiple values with checkboxes
    */
   @Input() multiSelect = false;
 
+  /**
+   * The vocabulary entries already selected, if any
+   */
+  @Input() showAdd = true;
+
+  /**
+   * The vocabulary entries already selected, if any
+   */
+  @Input() selectedItems: VocabularyTreeItemType[] = [];
+
   /**
    * A map containing the current node showed by the tree
    */

src/assets/i18n/en.json5

@@ -804,8 +804,12 @@
 
   "browse.metadata.srsc.breadcrumbs": "Browse by Subject Category",
 
+  "browse.metadata.srsc.tree.descrption": "Select a subject to add as search filter",
+
   "browse.metadata.nsi.breadcrumbs": "Browse by Norwegian Science Index",
 
+  "browse.metadata.nsi.tree.descrption": "Select an index to add as search filter",
+
   "browse.metadata.title.breadcrumbs": "Browse by Title",
 
   "pagination.next.button": "Next",