hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-07 01:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

74609: Fix TypeError on search pages

Browse Source
This commit is contained in:
Yana De Pauw
2020-11-17 14:21:14 +01:00
parent 2ee815908f
commit 0a0decfc33
9 changed files with 189 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>

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

@@ -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 },

12
src/app/shared/input-suggestions/filter-suggestions/filter-input-suggestions.component.html
View File

@@ -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>

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

@@ -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 }

47
src/app/shared/input-suggestions/filter-suggestions/filter-input-suggestions.component.ts
View File

@@ -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;
}
}

24
src/app/shared/input-suggestions/validation-suggestions/validation-suggestions.component.html Normal file
View File

@@ -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>

63
src/app/shared/input-suggestions/validation-suggestions/validation-suggestions.component.spec.ts Normal file
View File

@@ -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);
});
});
});

85
src/app/shared/input-suggestions/validation-suggestions/validation-suggestions.component.ts Normal file
View File

@@ -0,0 +1,85 @@
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() {
console.log('ping');
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;
}
}

2
src/app/shared/shared.module.ts
View File

@@ -210,6 +210,7 @@ import { CollectionDropdownComponent } from './collection-dropdown/collection-dr
import { DsSelectComponent } from './ds-select/ds-select.component';
import { VocabularyTreeviewComponent } from './vocabulary-treeview/vocabulary-treeview.component';
import { CurationFormComponent } from '../curation-form/curation-form.component';
import { ValidationSuggestionsComponent } from './input-suggestions/validation-suggestions/validation-suggestions.component';
const MODULES = [
// Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -331,6 +332,7 @@ const COMPONENTS = [
BrowseByComponent,
InputSuggestionsComponent,
FilterInputSuggestionsComponent,
ValidationSuggestionsComponent,
DsoInputSuggestionsComponent,
DSOSelectorComponent,
CreateCommunityParentSelectorComponent,