Let version autocompleter inherit from generic component to avoid code duplication

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,

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<string>();
+  @Output() public create = new EventEmitter<string>();
   @Output() public onChange = new EventEmitter<HalResource>();
   @Output() public onKeydown = new EventEmitter<JQueryEventObject>();
   @Output() public onOpen = new EventEmitter<void>();
   @Output() public onClose = new EventEmitter<void>();
   @Output() public onAfterViewInit = new EventEmitter<CreateAutocompleterComponent>();
 
-  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();
+    }
   }
 }
 

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: `
-    <create-autocompleter [availableValues]="availableValues"
+    <create-autocompleter #createAutocompleter
+                          [availableValues]="availableValues"
                           [createAllowed]="createAllowed"
-                          [appendTo]="'body'"
-                          [model]=""
-                          (onCreate)="createNewVersion($event)"
-                          (onChange)="onModelChanged($event)"
+                          [appendTo]="appendTo"
+                          [model]="model"
+                          (create)="createNewVersion($event)"
+                          (onChange)="changeModel($event)"
                           (onOpen)="opened()"
                           (onClose)="closed()"
                           (onKeydown)="keyPressed($event)"
-                          (onAfterViewInit)="afterViewinited($event)">
+                          (onAfterViewInit)="afterViewinited()">
     </create-autocompleter>
   `,
   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<VersionResource>();
-  @Output() public onChange = new EventEmitter<VersionResource>();
-  @Output() public onOpen = new EventEmitter<void>();
-  @Output() public onKeydown = new EventEmitter<JQueryEventObject>();
-  @Output() public onClose = new EventEmitter<void>();
-  @Output() public onAfterViewInit = new EventEmitter<VersionAutocompleterComponent>();
 
-  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;

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' }">
 </ndc-dynamic>

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) {