63838: Refactor input suggestions to support DSpaceObjects as suggestions

src/app/+item-page/edit-item-page/edit-item-page.module.ts

@@ -40,7 +40,7 @@ import { EditItemPageRoutingModule } from './edit-item-page.routing.module';
     ItemMetadataComponent,
     ItemBitstreamsComponent,
     EditInPlaceFieldComponent,
-    ItemMoveComponent
+    ItemMoveComponent,
   ]
 })
 export class EditItemPageModule {

src/app/+item-page/edit-item-page/edit-item-page.routing.module.ts

@@ -111,6 +111,7 @@ export function getItemEditMovePath(id: string) {
       {
         path: ITEM_EDIT_MOVE_PATH,
         component: ItemMoveComponent,
+        data: {title: 'item.edit.move.title'},
         resolve: {
           item: ItemPageResolver
         }

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-input-suggestions [suggestions]="(metadataFieldSuggestions | async)"
+            <ds-filter-input-suggestions [suggestions]="(metadataFieldSuggestions | async)"
                                   [(ngModel)]="metadata.key"
                                   (submitSuggestion)="update(suggestionControl)"
                                   (clickSuggestion)="update(suggestionControl)"
@@ -16,7 +16,7 @@
                                   [valid]="(valid | async) !== false"
                                   dsAutoFocus autoFocusSelector=".suggestion_input"
                                   [ngModelOptions]="{standalone: true}"
-            ></ds-input-suggestions>
+            ></ds-filter-input-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

@@ -11,12 +11,12 @@ import { By } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
 import { SharedModule } from '../../../../shared/shared.module';
 import { getTestScheduler } from 'jasmine-marbles';
-import { InputSuggestion } from '../../../../shared/input-suggestions/input-suggestions.model';
 import { TestScheduler } from 'rxjs/testing';
 import { MetadataSchema } from '../../../../core/metadata/metadataschema.model';
 import { FieldChangeType } from '../../../../core/data/object-updates/object-updates.actions';
 import { TranslateModule } from '@ngx-translate/core';
 import { MetadatumViewModel } from '../../../../core/shared/metadata.models';
+import { InputSuggestion } from '../../../../shared/input-suggestions/input-suggestions.model';
 
 let comp: EditInPlaceFieldComponent;
 let fixture: ComponentFixture<EditInPlaceFieldComponent>;

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

@@ -5,12 +5,12 @@ import { cloneDeep } from 'lodash';
 import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
 import { map, take } from 'rxjs/operators';
 import { MetadataField } from '../../../../core/metadata/metadatafield.model';
-import { InputSuggestion } from '../../../../shared/input-suggestions/input-suggestions.model';
 import { FieldChangeType } from '../../../../core/data/object-updates/object-updates.actions';
 import { FieldUpdate } from '../../../../core/data/object-updates/object-updates.reducer';
 import { ObjectUpdatesService } from '../../../../core/data/object-updates/object-updates.service';
 import { NgModel } from '@angular/forms';
 import { MetadatumViewModel } from '../../../../core/shared/metadata.models';
+import { InputSuggestion } from '../../../../shared/input-suggestions/input-suggestions.model';
 
 @Component({
   // tslint:disable-next-line:component-selector

src/app/+search-page/search-filters/search-filter/search-authority-filter/search-authority-filter.component.html

@@ -15,7 +15,7 @@
                 | translate}}</a>
         </div>
     </div>
-    <ds-input-suggestions [suggestions]="(filterSearchResults | async)"
+    <ds-filter-input-suggestions [suggestions]="(filterSearchResults | async)"
                           [placeholder]="'search.filters.filter.' + filterConfig.name + '.placeholder'| translate"
                           [action]="getCurrentUrl()"
                           [name]="filterConfig.paramName"
@@ -23,5 +23,5 @@
                           (submitSuggestion)="onSubmit($event)"
                           (clickSuggestion)="onSubmit($event)"
                           (findSuggestions)="findSuggestions($event)"
-                          ngDefaultControl></ds-input-suggestions>
+                          ngDefaultControl></ds-filter-input-suggestions>
 </div>

src/app/+search-page/search-filters/search-filter/search-facet-filter/search-facet-filter.component.ts

@@ -21,9 +21,9 @@ import { SearchService } from '../../../search-service/search.service';
 import { FILTER_CONFIG, IN_PLACE_SEARCH, SearchFilterService } from '../search-filter.service';
 import { SearchConfigurationService } from '../../../search-service/search-configuration.service';
 import { getSucceededRemoteData } from '../../../../core/shared/operators';
-import { InputSuggestion } from '../../../../shared/input-suggestions/input-suggestions.model';
 import { SearchOptions } from '../../../search-options.model';
 import { SEARCH_CONFIG_SERVICE } from '../../../../+my-dspace-page/my-dspace-page.component';
+import { InputSuggestion } from '../../../../shared/input-suggestions/input-suggestions.model';
 
 @Component({
   selector: 'ds-search-facet-filter',

src/app/+search-page/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.html

@@ -15,7 +15,7 @@
                 | translate}}</a>
         </div>
     </div>
-    <ds-input-suggestions [suggestions]="(filterSearchResults | async)"
+    <ds-filter-input-suggestions [suggestions]="(filterSearchResults | async)"
                           [placeholder]="'search.filters.filter.' + filterConfig.name + '.placeholder'| translate"
                           [action]="getCurrentUrl()"
                           [name]="filterConfig.paramName"
@@ -24,5 +24,5 @@
                           (clickSuggestion)="onClick($event)"
                           (findSuggestions)="findSuggestions($event)"
                           ngDefaultControl
-    ></ds-input-suggestions>
+    ></ds-filter-input-suggestions>
 </div>

src/app/+search-page/search-filters/search-filter/search-text-filter/search-text-filter.component.html

@@ -15,7 +15,7 @@
                 | translate}}</a>
         </div>
     </div>
-    <ds-input-suggestions [suggestions]="(filterSearchResults | async)"
+    <ds-filter-input-suggestions [suggestions]="(filterSearchResults | async)"
                           [placeholder]="'search.filters.filter.' + filterConfig.name + '.placeholder'| translate"
                           [action]="getCurrentUrl()"
                           [name]="filterConfig.paramName"
@@ -23,5 +23,5 @@
                           (submitSuggestion)="onSubmit($event)"
                           (clickSuggestion)="onClick($event)"
                           (findSuggestions)="findSuggestions($event)"
-                          ngDefaultControl></ds-input-suggestions>
+                          ngDefaultControl></ds-filter-input-suggestions>
 </div>

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

@@ -0,0 +1,23 @@
+<form #form="ngForm" (ngSubmit)="onSubmit(currentObject)"
+      [action]="action" (keydown)="onKeydown($event)"
+      (keydown.arrowdown)="shiftFocusDown($event)"
+      (keydown.arrowup)="shiftFocusUp($event)" (keydown.esc)="close()"
+      (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"
+           [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">
+            <div *ngFor="let suggestionOption of suggestions">
+                <a href="#" class="d-block dropdown-item"  (click)="onClickSuggestion(suggestionOption)" #suggestion>
+                    <ds-wrapper-list-element [object]="suggestionOption"></ds-wrapper-list-element>
+                </a>
+            </div>
+        </div>
+    </div>
+</form>
+

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

@@ -0,0 +1,71 @@
+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 } from '@angular/forms';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterTestingModule } from '@angular/router/testing';
+import { DsoInputSuggestionsComponent } from './dso-input-suggestions.component';
+import { DSpaceObject } from '../../../core/shared/dspace-object.model';
+
+describe('DsoInputSuggestionsComponent', () => {
+
+  let comp: DsoInputSuggestionsComponent;
+  let fixture: ComponentFixture<DsoInputSuggestionsComponent>;
+  let de: DebugElement;
+  let el: HTMLElement;
+
+  const dso1 = {
+    uuid: 'test-uuid-1',
+    name: 'test-name-1'
+  } as DSpaceObject;
+
+  const dso2 = {
+    uuid: 'test-uuid-2',
+    name: 'test-name-2'
+  } as DSpaceObject;
+
+  const dso3 = {
+    uuid: 'test-uuid-3',
+    name: 'test-name-3'
+  } as DSpaceObject;
+
+  const suggestions = [dso1, dso2, dso3];
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([]), NoopAnimationsModule, FormsModule],
+      declarations: [DsoInputSuggestionsComponent],
+      providers: [],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).overrideComponent(DsoInputSuggestionsComponent, {
+      set: {changeDetection: ChangeDetectionStrategy.Default}
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DsoInputSuggestionsComponent);
+
+    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]);
+    });
+  });
+});

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

@@ -0,0 +1,47 @@
+import { Component, forwardRef, Input } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { InputSuggestionsComponent } from '../input-suggestions.component';
+import { DSpaceObject } from '../../../core/shared/dspace-object.model';
+
+@Component({
+  selector: 'ds-dso-input-suggestions',
+  styleUrls: ['./../input-suggestions.component.scss'],
+  templateUrl: './dso-input-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(() => DsoInputSuggestionsComponent),
+      multi: true
+    }
+  ]
+})
+
+/**
+ * Component representing a form with a autocomplete functionality for DSpaceObjects
+ */
+export class DsoInputSuggestionsComponent extends InputSuggestionsComponent {
+  /**
+   * The suggestions that should be shown
+   */
+  @Input() suggestions: DSpaceObject[] = [];
+
+  currentObject: DSpaceObject;
+
+  onSubmit(data: DSpaceObject) {
+    this.value = data.name;
+    this.currentObject = data;
+    this.submitSuggestion.emit(data);
+  }
+
+  onClickSuggestion(data: DSpaceObject) {
+    this.value = data.name;
+    this.currentObject = data;
+    this.clickSuggestion.emit(data);
+    this.close();
+    this.blockReopen = true;
+    this.queryInput.nativeElement.focus();
+    return false;
+  }
+}

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

@@ -0,0 +1,22 @@
+<form #form="ngForm" (ngSubmit)="onSubmit(value)"
+      [action]="action" (keydown)="onKeydown($event)"
+      (keydown.arrowdown)="shiftFocusDown($event)"
+      (keydown.arrowup)="shiftFocusUp($event)" (keydown.esc)="close()"
+      (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"
+           [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">
+            <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/filter-suggestions/filter-input-suggestions.component.spec.ts

@@ -0,0 +1,57 @@
+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 } from '@angular/forms';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterTestingModule } from '@angular/router/testing';
+import { FilterInputSuggestionsComponent } from './filter-input-suggestions.component';
+
+describe('FilterInputSuggestionsComponent', () => {
+
+  let comp: FilterInputSuggestionsComponent;
+  let fixture: ComponentFixture<FilterInputSuggestionsComponent>;
+  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],
+      declarations: [FilterInputSuggestionsComponent],
+      providers: [],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).overrideComponent(FilterInputSuggestionsComponent, {
+      set: {changeDetection: ChangeDetectionStrategy.Default}
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FilterInputSuggestionsComponent);
+
+    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/filter-suggestions/filter-input-suggestions.component.ts

@@ -0,0 +1,44 @@
+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';
+
+@Component({
+  selector: 'ds-filter-input-suggestions',
+  styleUrls: ['./../input-suggestions.component.scss'],
+  templateUrl: './filter-input-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(() => FilterInputSuggestionsComponent),
+      multi: true
+    }
+  ]
+})
+
+/**
+ * Component representing a form with a autocomplete functionality
+ */
+export class FilterInputSuggestionsComponent extends InputSuggestionsComponent {
+  /**
+   * The suggestions that should be shown
+   */
+  @Input() suggestions: InputSuggestion[] = [];
+
+  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;
+  }
+
+}

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

@@ -13,22 +13,11 @@ import {
 } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import { hasValue, isNotEmpty } from '../empty.util';
-import { InputSuggestion } from './input-suggestions.model';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 @Component({
   selector: 'ds-input-suggestions',
-  styleUrls: ['./input-suggestions.component.scss'],
   templateUrl: './input-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(() => InputSuggestionsComponent),
-      multi: true
-    }
-  ]
 })
 
 /**
@@ -38,7 +27,7 @@ export class InputSuggestionsComponent implements ControlValueAccessor, OnChange
   /**
    * The suggestions that should be shown
    */
-  @Input() suggestions: InputSuggestion[] = [];
+  @Input() suggestions: any[] = [];
 
   /**
    * The time waited to detect if any other input will follow before requesting the suggestions
@@ -204,16 +193,15 @@ export class InputSuggestionsComponent implements ControlValueAccessor, OnChange
     return isNotEmpty(data);
   }
 
+  onSubmit(data: any) {
+    // sub class should decide how to handle the date
+  }
+
   /**
    * Make sure that if a suggestion is clicked, the suggestions dropdown closes, does not reopen and the focus moves to the input field
    */
-  onClickSuggestion(data) {
+  onClickSuggestion(data: any) {
-    this.value = data;
+    // sub class should decide how to handle the date
-    this.clickSuggestion.emit(data);
-    this.close();
-    this.blockReopen = true;
-    this.queryInput.nativeElement.focus();
-    return false;
   }
 
   /**
@@ -228,11 +216,6 @@ export class InputSuggestionsComponent implements ControlValueAccessor, OnChange
     this.blockReopen = false;
   }
 
-  onSubmit(data) {
-    this.value = data;
-    this.submitSuggestion.emit(data);
-  }
-
   /* START - Method's needed to add ngModel (ControlValueAccessor) to a component */
   registerOnChange(fn: any): void {
     this.propagateChange = fn;

src/app/shared/shared.module.ts

@@ -146,6 +146,8 @@ import { RoleDirective } from './roles/role.directive';
 import { UserMenuComponent } from './auth-nav-menu/user-menu/user-menu.component';
 import { ClaimedTaskActionsReturnToPoolComponent } from './mydspace-actions/claimed-task/return-to-pool/claimed-task-actions-return-to-pool.component';
 import { ItemDetailPreviewFieldComponent } from './object-detail/my-dspace-result-detail-element/item-detail-preview/item-detail-preview-field/item-detail-preview-field.component';
+import { FilterInputSuggestionsComponent } from './input-suggestions/filter-suggestions/filter-input-suggestions.component';
+import { DsoInputSuggestionsComponent } from './input-suggestions/dso-input-suggestions/dso-input-suggestions.component';
 
 const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -167,7 +169,7 @@ const MODULES = [
   NouisliderModule,
   MomentModule,
   TextMaskModule,
-  MenuModule
+  MenuModule,
 ];
 
 const ROOT_MODULES = [
@@ -253,6 +255,8 @@ const COMPONENTS = [
   TruncatablePartComponent,
   BrowseByComponent,
   InputSuggestionsComponent,
+  FilterInputSuggestionsComponent,
+  DsoInputSuggestionsComponent,
   DSOSelectorComponent,
   CreateCommunityParentSelectorComponent,
   CreateCollectionParentSelectorComponent,