From 7ba63a07fd19e1ac170418d29898a6bbea353509 Mon Sep 17 00:00:00 2001 From: Henriette Dinger Date: Fri, 24 May 2019 10:40:41 +0200 Subject: [PATCH] Let version autocompleter inherit from generic component to avoid code duplication --- .../add-list-modal.component.ts | 4 +- .../create-autocompleter.component.ts | 29 ++++++--- .../version-autocompleter.component.ts | 63 ++++++++----------- .../select-edit-field.component.html | 3 +- .../select-edit-field.component.ts | 13 +--- 5 files changed, 54 insertions(+), 58 deletions(-) diff --git a/frontend/src/app/modules/boards/board/add-list-modal/add-list-modal.component.ts b/frontend/src/app/modules/boards/board/add-list-modal/add-list-modal.component.ts index 29d5a1acac..2d47535321 100644 --- a/frontend/src/app/modules/boards/board/add-list-modal/add-list-modal.component.ts +++ b/frontend/src/app/modules/boards/board/add-list-modal/add-list-modal.component.ts @@ -40,6 +40,7 @@ import {BoardActionsRegistryService} from "core-app/modules/boards/board/board-a import {BoardActionService} from "core-app/modules/boards/board/board-actions/board-action.service"; import {HalResource} from "core-app/modules/hal/resources/hal-resource"; import {AngularTrackingHelpers} from "core-components/angular/tracking-functions"; +import {CreateAutocompleterComponent} from "core-app/modules/common/autocomplete/create-autocompleter.component"; @Component({ templateUrl: './add-list-modal.html' @@ -86,7 +87,8 @@ export class AddListModalComponent extends OpModalComponent implements OnInit { public referenceOutputs = { onCreate: (value:HalResource) => this.onNewActionCreated(value), - onChange: (value:HalResource) => this.onModelChange(value) + onChange: (value:HalResource) => this.onModelChange(value), + onAfterViewInit: (component:CreateAutocompleterComponent) => component.focusInputField() }; constructor(readonly elementRef:ElementRef, diff --git a/frontend/src/app/modules/common/autocomplete/create-autocompleter.component.ts b/frontend/src/app/modules/common/autocomplete/create-autocompleter.component.ts index b056f09d17..673c694e48 100644 --- a/frontend/src/app/modules/common/autocomplete/create-autocompleter.component.ts +++ b/frontend/src/app/modules/common/autocomplete/create-autocompleter.component.ts @@ -89,30 +89,30 @@ export class CreateAutocompleterComponent implements AfterViewInit { @Input() public set createAllowed(val:boolean) { this._createAllowed = val; setTimeout(() => { - this.focusInputField(); + if (this.openDirectly) { this.openSelect(); } }); } - @Output() public onCreate = new EventEmitter(); + @Output() public create = new EventEmitter(); @Output() public onChange = new EventEmitter(); @Output() public onKeydown = new EventEmitter(); @Output() public onOpen = new EventEmitter(); @Output() public onClose = new EventEmitter(); @Output() public onAfterViewInit = new EventEmitter(); - private _createAllowed:boolean = false; - public text:any = { add_new_action: this.I18n.t('js.label_create_new'), }; + private _createAllowed:boolean = false; + private _openDirectly:boolean = false; + constructor(readonly I18n:I18nService, readonly currentProject:CurrentProjectService, readonly pathHelper:PathHelperService) { } ngAfterViewInit() { - this.focusInputField(); this.onAfterViewInit.emit(this); } @@ -121,7 +121,7 @@ export class CreateAutocompleterComponent implements AfterViewInit { } public createNewElement(newElement:string) { - this.onCreate.emit(newElement); + this.create.emit(newElement); } public changeModel(element:HalResource) { @@ -144,8 +144,21 @@ export class CreateAutocompleterComponent implements AfterViewInit { return this._createAllowed; } - private focusInputField() { - this.createAllowed ? this.addAutoCompleter.focus() : this.autoCompleter.focus(); + public get openDirectly() { + return this._openDirectly; + } + + public set openDirectly(val:boolean) { + this._openDirectly = val; + this.openSelect(); + } + + public focusInputField() { + if (this.createAllowed) { + return this.addAutoCompleter && this.addAutoCompleter.focus(); + } else { + return this.autoCompleter && this.autoCompleter.focus(); + } } } diff --git a/frontend/src/app/modules/common/autocomplete/version-autocompleter.component.ts b/frontend/src/app/modules/common/autocomplete/version-autocompleter.component.ts index 39aacf8727..81f7411760 100644 --- a/frontend/src/app/modules/common/autocomplete/version-autocompleter.component.ts +++ b/frontend/src/app/modules/common/autocomplete/version-autocompleter.component.ts @@ -26,45 +26,45 @@ // See doc/COPYRIGHT.rdoc for more details. // ++ -import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; +import {AfterViewInit, Component, EventEmitter, OnInit, Output, ViewChild} from '@angular/core'; import {DynamicBootstrapper} from "core-app/globals/dynamic-bootstrapper"; import {VersionDmService} from "core-app/modules/hal/dm-services/version-dm.service"; import {CurrentProjectService} from "core-components/projects/current-project.service"; import {PathHelperService} from "core-app/modules/common/path-helper/path-helper.service"; import {VersionResource} from "core-app/modules/hal/resources/version-resource"; import {HalResource} from "core-app/modules/hal/resources/hal-resource"; +import {CreateAutocompleterComponent} from "core-app/modules/common/autocomplete/create-autocompleter.component"; +import {I18nService} from "core-app/modules/common/i18n/i18n.service"; @Component({ template: ` - + (onAfterViewInit)="afterViewinited()"> `, selector: 'version-autocompleter' }) -export class VersionAutocompleterComponent implements OnInit { - @Input() public availableValues:any[]; - @Input() public createAllowed:boolean; - +export class VersionAutocompleterComponent extends CreateAutocompleterComponent implements OnInit, AfterViewInit { + @ViewChild('createAutocompleter') public createAutocompleter:CreateAutocompleterComponent; @Output() public onCreate = new EventEmitter(); - @Output() public onChange = new EventEmitter(); - @Output() public onOpen = new EventEmitter(); - @Output() public onKeydown = new EventEmitter(); - @Output() public onClose = new EventEmitter(); - @Output() public onAfterViewInit = new EventEmitter(); - constructor(readonly currentProject:CurrentProjectService, + public createAllowed:boolean = false; + + constructor(readonly I18n:I18nService, + readonly currentProject:CurrentProjectService, readonly pathHelper:PathHelperService, readonly versionDm:VersionDmService) { + super(I18n, currentProject, pathHelper); } ngOnInit() { @@ -73,6 +73,14 @@ export class VersionAutocompleterComponent implements OnInit { }); } + ngAfterViewInit() { + // Prevent a second event to bubble + } + + public afterViewinited() { + this.onAfterViewInit.emit(this.createAutocompleter); + } + /** * Checks for correct permissions * (whether the current project is in the list of allowed values in the version create form) @@ -90,27 +98,6 @@ export class VersionAutocompleterComponent implements OnInit { this.onCreate.emit(version); }); } - - public onModelChanged(element:VersionResource) { - this.onChange.emit(element); - } - - public opened() { - this.onOpen.emit(); - } - - public closed() { - this.onClose.emit(); - } - - public keyPressed(event:JQueryEventObject) { - this.onKeydown.emit(event); - } - - public afterViewinited() { - this.onAfterViewInit.emit(this); - } - private getVersionPayload(name:string) { let payload:any = {}; payload['name'] = name; diff --git a/frontend/src/app/modules/fields/edit/field-types/select-edit-field.component.html b/frontend/src/app/modules/fields/edit/field-types/select-edit-field.component.html index 65f086fa55..73a8b067fb 100644 --- a/frontend/src/app/modules/fields/edit/field-types/select-edit-field.component.html +++ b/frontend/src/app/modules/fields/edit/field-types/select-edit-field.component.html @@ -4,7 +4,8 @@ model: selectedOption ? selectedOption : '', required: required, disabled: inFlight, - id: handler.htmlId }" + id: handler.htmlId, + createAllowed: false }" [ndcDynamicOutputs]="referenceOutputs" [ndcDynamicAttributes]="{ class: 'wp-inline-edit--field' }"> diff --git a/frontend/src/app/modules/fields/edit/field-types/select-edit-field.component.ts b/frontend/src/app/modules/fields/edit/field-types/select-edit-field.component.ts index ccd8cf9512..48410bbc1e 100644 --- a/frontend/src/app/modules/fields/edit/field-types/select-edit-field.component.ts +++ b/frontend/src/app/modules/fields/edit/field-types/select-edit-field.component.ts @@ -83,7 +83,9 @@ export class SelectEditFieldComponent extends EditFieldComponent implements OnIn untilComponentDestroyed(this) ) .subscribe(() => { - loadingPromise.then(() => this.openAutocompleteSelectField()) + loadingPromise.then(() => { + this._autocompleterComponent.openDirectly = true; + }) }); } @@ -163,15 +165,6 @@ export class SelectEditFieldComponent extends EditFieldComponent implements OnIn this.handler.handleUserSubmit(); } - private openAutocompleteSelectField() { - // The timeout takes care that the opening is added to the end of the current call stack. - // Thus we can be sure that the autocompleter is rendered and ready to be opened. - let that = this; - window.setTimeout(function () { - that._autocompleterComponent.openSelect(); - }, 0); - } - private addEmptyOption() { // Empty options are not available for required fields if (this.schema.required) {