Merge pull request #941 from atmire/74609-Fix-type-error-on-search-pages

Fix TypeError on search pages

src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.html

@@ -4,7 +4,7 @@
             <span>{{metadata?.key?.split('.').join('.&#8203;')}}</span>
         </div>
         <div *ngIf="(editable | async)" class="field-container">
-            <ds-filter-input-suggestions [suggestions]="(metadataFieldSuggestions | async)"
+            <ds-validation-suggestions [suggestions]="(metadataFieldSuggestions | async)"
                                          [(ngModel)]="metadata.key"
                                          [url]="this.url"
                                          [metadata]="this.metadata"
@@ -17,7 +17,7 @@
                                   [valid]="(valid | async) !== false"
                                   dsAutoFocus autoFocusSelector=".suggestion_input"
                                   [ngModelOptions]="{standalone: true}"
-            ></ds-filter-input-suggestions>
+            ></ds-validation-suggestions>
         </div>
         <small class="text-danger"
                *ngIf="(valid | async) === false">{{"item.edit.metadata.metadatafield.invalid" | translate}}</small>

src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.spec.ts

@@ -20,9 +20,9 @@ import {
 } from '../../../../shared/remote-data.utils';
 import { followLink } from '../../../../shared/utils/follow-link-config.model';
 import { EditInPlaceFieldComponent } from './edit-in-place-field.component';
-import { FilterInputSuggestionsComponent } from '../../../../shared/input-suggestions/filter-suggestions/filter-input-suggestions.component';
 import { MockComponent, MockDirective } from 'ng-mocks';
 import { DebounceDirective } from '../../../../shared/utils/debounce.directive';
+import { ValidationSuggestionsComponent } from '../../../../shared/input-suggestions/validation-suggestions/validation-suggestions.component';
 
 let comp: EditInPlaceFieldComponent;
 let fixture: ComponentFixture<EditInPlaceFieldComponent>;
@@ -88,7 +88,7 @@ describe('EditInPlaceFieldComponent', () => {
       declarations: [
         EditInPlaceFieldComponent,
         MockDirective(DebounceDirective),
-        MockComponent(FilterInputSuggestionsComponent)
+        MockComponent(ValidationSuggestionsComponent)
       ],
       providers: [
         { provide: RegistryService, useValue: metadataFieldService },

src/app/shared/input-suggestions/filter-suggestions/filter-input-suggestions.component.html

@@ -1,15 +1,14 @@
-<form [formGroup]="form" (ngSubmit)="onSubmit(value)"
+<form #form="ngForm" (ngSubmit)="onSubmit(value)"
       [action]="action" (keydown)="onKeydown($event)"
       (keydown.arrowdown)="shiftFocusDown($event)"
       (keydown.arrowup)="shiftFocusUp($event)" (keydown.esc)="close()"
-      (dsClickOutside)="checkIfValidInput(form);close();">
-  <input #inputField type="text" formControlName="metadataNameField" [(ngModel)]="value" id="name" [name]="name"
+      (dsClickOutside)="close();">
+  <input #inputField type="text" [(ngModel)]="value" [name]="name"
          class="form-control suggestion_input"
          [ngClass]="{'is-invalid': !valid}"
          [dsDebounce]="debounceTime" (onDebounce)="find($event)"
          [placeholder]="placeholder"
-         ng-model-options="{standalone: true}"
-         autocomplete="off">
+         [ngModelOptions]="{standalone: true}" autocomplete="off"/>
   <input type="submit" class="d-none"/>
   <div class="autocomplete dropdown-menu" [ngClass]="{'show': (show | async) && isNotEmpty(suggestions)}">
     <div class="dropdown-list">
@@ -20,5 +19,4 @@
       </div>
     </div>
   </div>
-</form>
-
+</form>

src/app/shared/input-suggestions/filter-suggestions/filter-input-suggestions.component.spec.ts

@@ -3,11 +3,9 @@ import { ChangeDetectionStrategy, DebugElement, NO_ERRORS_SCHEMA } from '@angula
 import { TranslateModule } from '@ngx-translate/core';
 import { By } from '@angular/platform-browser';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormsModule } from '@angular/forms';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
-import { MetadataFieldDataService } from '../../../core/data/metadata-field-data.service';
-import { ObjectUpdatesService } from '../../../core/data/object-updates/object-updates.service';
 import { FilterInputSuggestionsComponent } from './filter-input-suggestions.component';
 
 describe('FilterInputSuggestionsComponent', () => {
@@ -23,13 +21,9 @@ describe('FilterInputSuggestionsComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([]), NoopAnimationsModule, FormsModule, ReactiveFormsModule],
+      imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([]), NoopAnimationsModule, FormsModule],
       declarations: [FilterInputSuggestionsComponent],
-      providers: [FormsModule,
-        ReactiveFormsModule,
-        { provide: MetadataFieldDataService, useValue: {} },
-        { provide: ObjectUpdatesService, useValue: {} },
-      ],
+      providers: [],
       schemas: [NO_ERRORS_SCHEMA]
     }).overrideComponent(FilterInputSuggestionsComponent, {
       set: { changeDetection: ChangeDetectionStrategy.Default }

src/app/shared/input-suggestions/filter-suggestions/filter-input-suggestions.component.ts

@@ -1,8 +1,5 @@
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
-import { FormControl, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
-import { ObjectUpdatesService } from '../../../core/data/object-updates/object-updates.service';
-import { MetadatumViewModel } from '../../../core/shared/metadata.models';
-import { MetadataFieldValidator } from '../../utils/metadatafield-validator.directive';
+import { Component, forwardRef, Input } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { InputSuggestionsComponent } from '../input-suggestions.component';
 import { InputSuggestion } from '../input-suggestions.model';
 
@@ -24,39 +21,12 @@ import { InputSuggestion } from '../input-suggestions.model';
 /**
  * Component representing a form with a autocomplete functionality
  */
-export class FilterInputSuggestionsComponent extends InputSuggestionsComponent implements OnInit {
-
-  form: FormGroup;
-
-  /**
-   * The current url of this page
-   */
-  @Input() url: string;
-
-  /**
-   * The metadatum of this field
-   */
-  @Input() metadata: MetadatumViewModel;
-
+export class FilterInputSuggestionsComponent extends InputSuggestionsComponent {
   /**
    * The suggestions that should be shown
    */
   @Input() suggestions: InputSuggestion[] = [];
 
-  constructor(private metadataFieldValidator: MetadataFieldValidator,
-              private objectUpdatesService: ObjectUpdatesService) {
-    super();
-  }
-
-  ngOnInit() {
-    this.form = new FormGroup({
-      metadataNameField: new FormControl(this._value, {
-        asyncValidators: [this.metadataFieldValidator.validate.bind(this.metadataFieldValidator)],
-        validators: [Validators.required]
-      })
-    });
-  }
-
   onSubmit(data) {
     this.value = data;
     this.submitSuggestion.emit(data);
@@ -70,15 +40,4 @@ export class FilterInputSuggestionsComponent extends InputSuggestionsComponent i
     this.queryInput.nativeElement.focus();
     return false;
   }
-
-  /**
-   * Check if the input is valid according to validator and send (in)valid state to store
-   * @param form  Form with input
-   */
-  checkIfValidInput(form) {
-    this.valid = !(form.get('metadataNameField').status === 'INVALID' && (form.get('metadataNameField').dirty || form.get('metadataNameField').touched));
-    this.objectUpdatesService.setValidFieldUpdate(this.url, this.metadata.uuid, this.valid);
-    return this.valid;
-  }
-
 }

src/app/shared/input-suggestions/validation-suggestions/validation-suggestions.component.html

@@ -0,0 +1,24 @@
+<form [formGroup]="form" (ngSubmit)="onSubmit(value)"
+      [action]="action" (keydown)="onKeydown($event)"
+      (keydown.arrowdown)="shiftFocusDown($event)"
+      (keydown.arrowup)="shiftFocusUp($event)" (keydown.esc)="close()"
+      (dsClickOutside)="checkIfValidInput(form);close();">
+  <input #inputField type="text" formControlName="metadataNameField" [(ngModel)]="value" id="name" [name]="name"
+         class="form-control suggestion_input"
+         [ngClass]="{'is-invalid': !valid}"
+         [dsDebounce]="debounceTime" (onDebounce)="find($event)"
+         [placeholder]="placeholder"
+         ng-model-options="{standalone: true}"
+         autocomplete="off">
+  <input type="submit" class="d-none"/>
+  <div class="autocomplete dropdown-menu" [ngClass]="{'show': (show | async) && isNotEmpty(suggestions)}">
+    <div class="dropdown-list">
+      <div *ngFor="let suggestionOption of suggestions">
+        <a href="#" class="d-block dropdown-item"  (click)="onClickSuggestion(suggestionOption.value)" #suggestion>
+          <span [innerHTML]="suggestionOption.displayValue"></span>
+        </a>
+      </div>
+    </div>
+  </div>
+</form>
+

src/app/shared/input-suggestions/validation-suggestions/validation-suggestions.component.spec.ts

@@ -0,0 +1,63 @@
+import { ChangeDetectionStrategy, DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
+
+import { TranslateModule } from '@ngx-translate/core';
+import { By } from '@angular/platform-browser';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterTestingModule } from '@angular/router/testing';
+import { MetadataFieldDataService } from '../../../core/data/metadata-field-data.service';
+import { ObjectUpdatesService } from '../../../core/data/object-updates/object-updates.service';
+import { ValidationSuggestionsComponent } from './validation-suggestions.component';
+
+describe('ValidationSuggestionsComponent', () => {
+
+  let comp: ValidationSuggestionsComponent;
+  let fixture: ComponentFixture<ValidationSuggestionsComponent>;
+  let de: DebugElement;
+  let el: HTMLElement;
+  const suggestions = [{ displayValue: 'suggestion uno', value: 'suggestion uno' }, {
+    displayValue: 'suggestion dos',
+    value: 'suggestion dos'
+  }, { displayValue: 'suggestion tres', value: 'suggestion tres' }];
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([]), NoopAnimationsModule, FormsModule, ReactiveFormsModule],
+      declarations: [ValidationSuggestionsComponent],
+      providers: [FormsModule,
+        ReactiveFormsModule,
+        { provide: MetadataFieldDataService, useValue: {} },
+        { provide: ObjectUpdatesService, useValue: {} },
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).overrideComponent(ValidationSuggestionsComponent, {
+      set: { changeDetection: ChangeDetectionStrategy.Default }
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ValidationSuggestionsComponent);
+
+    comp = fixture.componentInstance; // LoadingComponent test instance
+    comp.suggestions = suggestions;
+    // query for the message <label> by CSS element selector
+    de = fixture.debugElement;
+    el = de.nativeElement;
+    comp.show.next(true);
+    fixture.detectChanges();
+  });
+
+  describe('when an element is clicked', () => {
+    const clickedIndex = 0;
+    beforeEach(() => {
+      spyOn(comp, 'onClickSuggestion');
+      const clickedLink = de.query(By.css('.dropdown-list > div:nth-child(' + (clickedIndex + 1) + ') a'));
+      clickedLink.triggerEventHandler('click', {});
+      fixture.detectChanges();
+    });
+    it('should call onClickSuggestion() with the suggestion as a parameter', () => {
+      expect(comp.onClickSuggestion).toHaveBeenCalledWith(suggestions[clickedIndex].value);
+    });
+  });
+});

src/app/shared/input-suggestions/validation-suggestions/validation-suggestions.component.ts

@@ -0,0 +1,84 @@
+import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { FormControl, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
+import { ObjectUpdatesService } from '../../../core/data/object-updates/object-updates.service';
+import { MetadatumViewModel } from '../../../core/shared/metadata.models';
+import { MetadataFieldValidator } from '../../utils/metadatafield-validator.directive';
+import { InputSuggestionsComponent } from '../input-suggestions.component';
+import { InputSuggestion } from '../input-suggestions.model';
+
+@Component({
+  selector: 'ds-validation-suggestions',
+  styleUrls: ['./../input-suggestions.component.scss'],
+  templateUrl: './validation-suggestions.component.html',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      // Usage of forwardRef necessary https://github.com/angular/angular.io/issues/1151
+      // tslint:disable-next-line:no-forward-ref
+      useExisting: forwardRef(() => ValidationSuggestionsComponent),
+      multi: true
+    }
+  ]
+})
+
+/**
+ * Component representing a form with a autocomplete functionality
+ */
+export class ValidationSuggestionsComponent extends InputSuggestionsComponent implements OnInit {
+
+  form: FormGroup;
+
+  /**
+   * The current url of this page
+   */
+  @Input() url: string;
+
+  /**
+   * The metadatum of this field
+   */
+  @Input() metadata: MetadatumViewModel;
+
+  /**
+   * The suggestions that should be shown
+   */
+  @Input() suggestions: InputSuggestion[] = [];
+
+  constructor(private metadataFieldValidator: MetadataFieldValidator,
+              private objectUpdatesService: ObjectUpdatesService) {
+    super();
+  }
+
+  ngOnInit() {
+    this.form = new FormGroup({
+      metadataNameField: new FormControl(this._value, {
+        asyncValidators: [this.metadataFieldValidator.validate.bind(this.metadataFieldValidator)],
+        validators: [Validators.required]
+      })
+    });
+  }
+
+  onSubmit(data) {
+    this.value = data;
+    this.submitSuggestion.emit(data);
+  }
+
+  onClickSuggestion(data) {
+    this.value = data;
+    this.clickSuggestion.emit(data);
+    this.close();
+    this.blockReopen = true;
+    this.queryInput.nativeElement.focus();
+    return false;
+  }
+
+  /**
+   * Check if the input is valid according to validator and send (in)valid state to store
+   * @param form  Form with input
+   */
+  checkIfValidInput(form) {
+    this.valid = !(form.get('metadataNameField').status === 'INVALID' && (form.get('metadataNameField').dirty || form.get('metadataNameField').touched));
+    this.objectUpdatesService.setValidFieldUpdate(this.url, this.metadata.uuid, this.valid);
+    return this.valid;
+  }
+
+}

src/app/shared/shared.module.ts

@@ -217,6 +217,7 @@ import { CommunitySidebarSearchListElementComponent } from './object-list/sideba
 import { AuthorizedCollectionSelectorComponent } from './dso-selector/dso-selector/authorized-collection-selector/authorized-collection-selector.component';
 import { DsoPageEditButtonComponent } from './dso-page/dso-page-edit-button/dso-page-edit-button.component';
 import { HoverClassDirective } from './hover-class.directive';
+import { ValidationSuggestionsComponent } from './input-suggestions/validation-suggestions/validation-suggestions.component';
 
 const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -338,6 +339,7 @@ const COMPONENTS = [
   BrowseByComponent,
   InputSuggestionsComponent,
   FilterInputSuggestionsComponent,
+  ValidationSuggestionsComponent,
   DsoInputSuggestionsComponent,
   DSOSelectorComponent,
   CreateCommunityParentSelectorComponent,