Let version autocompleter inherit from generic component to avoid code duplication

pull/7317/head
Henriette Dinger 6 years ago
parent 67032ac14c
commit 7ba63a07fd
  1. 4
      frontend/src/app/modules/boards/board/add-list-modal/add-list-modal.component.ts
  2. 29
      frontend/src/app/modules/common/autocomplete/create-autocompleter.component.ts
  3. 63
      frontend/src/app/modules/common/autocomplete/version-autocompleter.component.ts
  4. 3
      frontend/src/app/modules/fields/edit/field-types/select-edit-field.component.html
  5. 13
      frontend/src/app/modules/fields/edit/field-types/select-edit-field.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,

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

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

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

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

Loading…
Cancel
Save