* Create generic component for inline create autocompleter which handles the HTML and fires events. * Use dynamic component in the add-modal of boards depending on the typepull/7317/head
Henriette Dinger
6 years ago
parent
4e1104cbd6
commit
04513e5b12
@ -0,0 +1,108 @@ |
||||
// -- copyright
|
||||
// OpenProject is a project management system.
|
||||
// Copyright (C) 2012-2015 the OpenProject Foundation (OPF)
|
||||
//
|
||||
// This program is free software; you can redistribute it and/or
|
||||
// modify it under the terms of the GNU General Public License version 3.
|
||||
//
|
||||
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
|
||||
// Copyright (C) 2006-2013 Jean-Philippe Lang
|
||||
// Copyright (C) 2010-2013 the ChiliProject Team
|
||||
//
|
||||
// This program is free software; you can redistribute it and/or
|
||||
// modify it under the terms of the GNU General Public License
|
||||
// as published by the Free Software Foundation; either version 2
|
||||
// of the License, or (at your option) any later version.
|
||||
//
|
||||
// This program is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
//
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with this program; if not, write to the Free Software
|
||||
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
|
||||
//
|
||||
// See doc/COPYRIGHT.rdoc for more details.
|
||||
// ++
|
||||
|
||||
import {AfterViewInit, Component, EventEmitter, Input, Output, ViewChild} from '@angular/core'; |
||||
import {DynamicBootstrapper} from "core-app/globals/dynamic-bootstrapper"; |
||||
import {NgSelectComponent} from "@ng-select/ng-select/dist"; |
||||
import {I18nService} from "core-app/modules/common/i18n/i18n.service"; |
||||
import {CurrentProjectService} from "core-components/projects/current-project.service"; |
||||
import {PathHelperService} from "core-app/modules/common/path-helper/path-helper.service"; |
||||
import {HalResource} from "core-app/modules/hal/resources/hal-resource"; |
||||
|
||||
@Component({ |
||||
template: ` |
||||
<ng-select *ngIf="createAllowed" |
||||
#addActionAttributeSelect |
||||
[items]="availableValues" |
||||
[addTag]="createNewElement.bind(this)" |
||||
(change)="changeModel($event)" |
||||
bindLabel="name" |
||||
appendTo="body"> |
||||
<ng-template ng-tag-tmp let-search="searchTerm"> |
||||
<b [textContent]="text.add_new_action"></b>: {{search}} |
||||
</ng-template> |
||||
</ng-select> |
||||
|
||||
<ng-select *ngIf="!createAllowed" |
||||
#actionAttributeSelect |
||||
[items]="availableValues" |
||||
(change)="changeModel($event)" |
||||
bindLabel="name" |
||||
appendTo="body"> |
||||
</ng-select> |
||||
`,
|
||||
selector: 'create-autocompleter' |
||||
}) |
||||
export class CreateAutocompleterComponent implements AfterViewInit { |
||||
@ViewChild('addActionAttributeSelect') public addAutoCompleter:NgSelectComponent; |
||||
@ViewChild('actionAttributeSelect') public autoCompleter:NgSelectComponent; |
||||
|
||||
@Input() public availableValues:any[]; |
||||
@Input() public set createAllowed(val:boolean) { |
||||
this._createAllowed = val; |
||||
setTimeout(() => { |
||||
this.focusInputField(); |
||||
}); |
||||
}; |
||||
|
||||
@Output() public onCreate = new EventEmitter<string>(); |
||||
@Output() public onChange = new EventEmitter<HalResource>(); |
||||
|
||||
private _createAllowed:boolean = false; |
||||
|
||||
public text:any = { |
||||
add_new_action: this.I18n.t('js.label_create_new'), |
||||
}; |
||||
|
||||
constructor(readonly I18n:I18nService, |
||||
readonly currentProject:CurrentProjectService, |
||||
readonly pathHelper:PathHelperService) { |
||||
} |
||||
|
||||
ngAfterViewInit() { |
||||
this.focusInputField(); |
||||
} |
||||
|
||||
public createNewElement(name:string) { |
||||
this.onCreate.emit(name); |
||||
} |
||||
|
||||
public changeModel(element:HalResource) { |
||||
this.onChange.emit(element); |
||||
} |
||||
|
||||
public get createAllowed() { |
||||
return this._createAllowed; |
||||
} |
||||
|
||||
private focusInputField() { |
||||
this.createAllowed ? this.addAutoCompleter.focus() : this.autoCompleter.focus(); |
||||
} |
||||
} |
||||
|
||||
DynamicBootstrapper.register({ selector: 'add-attribute-autocompleter', cls: CreateAutocompleterComponent }); |
||||
@ -0,0 +1,101 @@ |
||||
// -- copyright
|
||||
// OpenProject is a project management system.
|
||||
// Copyright (C) 2012-2015 the OpenProject Foundation (OPF)
|
||||
//
|
||||
// This program is free software; you can redistribute it and/or
|
||||
// modify it under the terms of the GNU General Public License version 3.
|
||||
//
|
||||
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
|
||||
// Copyright (C) 2006-2013 Jean-Philippe Lang
|
||||
// Copyright (C) 2010-2013 the ChiliProject Team
|
||||
//
|
||||
// This program is free software; you can redistribute it and/or
|
||||
// modify it under the terms of the GNU General Public License
|
||||
// as published by the Free Software Foundation; either version 2
|
||||
// of the License, or (at your option) any later version.
|
||||
//
|
||||
// This program is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
//
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with this program; if not, write to the Free Software
|
||||
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
|
||||
//
|
||||
// See doc/COPYRIGHT.rdoc for more details.
|
||||
// ++
|
||||
|
||||
import {Component, EventEmitter, Input, OnInit, Output} 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"; |
||||
|
||||
@Component({ |
||||
template: ` |
||||
<create-autocompleter [availableValues]="availableValues" |
||||
[createAllowed]="createAllowed" |
||||
(onCreate)="createNewVersion($event)" |
||||
(onChange)="onModelChanged($event)"> |
||||
</create-autocompleter> |
||||
`,
|
||||
selector: 'version-autocompleter' |
||||
}) |
||||
|
||||
export class VersionAutocompleterComponent implements OnInit { |
||||
@Input() public availableValues:any[]; |
||||
@Input() public createAllowed:boolean; |
||||
|
||||
@Output() public onCreate = new EventEmitter<VersionResource>(); |
||||
@Output() public onChange = new EventEmitter<VersionResource>(); |
||||
|
||||
constructor(readonly currentProject:CurrentProjectService, |
||||
readonly pathHelper:PathHelperService, |
||||
readonly versionDm:VersionDmService) { |
||||
} |
||||
|
||||
ngOnInit() { |
||||
this.canCreateNewActionElements().then((val) => { |
||||
this.createAllowed = val; |
||||
}); |
||||
} |
||||
|
||||
/** |
||||
* Checks for correct permissions |
||||
* (whether the current project is in the list of allowed values in the version create form) |
||||
* @returns {Promise<boolean>} |
||||
*/ |
||||
public canCreateNewActionElements():Promise<boolean> { |
||||
var that = this; |
||||
return this.versionDm.emptyCreateForm(this.getVersionPayload('')).then((form) => { |
||||
return form.schema.definingProject.allowedValues.some((e:HalResource) => e.id === that.currentProject.id!); |
||||
}); |
||||
} |
||||
|
||||
public createNewVersion(name:string) { |
||||
this.versionDm.createVersion(this.getVersionPayload(name)).then((version) => { |
||||
this.onCreate.emit(version) |
||||
}); |
||||
} |
||||
|
||||
public onModelChanged(element:VersionResource) { |
||||
this.onChange.emit(element); |
||||
} |
||||
|
||||
private getVersionPayload(name:string) { |
||||
let payload:any = {}; |
||||
payload['name'] = name; |
||||
payload['_links'] = { |
||||
definingProject: { |
||||
href: this.pathHelper.api.v3.projects.id(this.currentProject.id!).path |
||||
} |
||||
}; |
||||
|
||||
return payload; |
||||
} |
||||
} |
||||
|
||||
DynamicBootstrapper.register({ selector: 'version-autocompleter', cls: VersionAutocompleterComponent }); |
||||
Loading…
Reference in new issue