diff options
Diffstat (limited to 'app/assets/javascripts/issuable/issuable_template_selector.js')
-rw-r--r-- | app/assets/javascripts/issuable/issuable_template_selector.js | 111 |
1 files changed, 111 insertions, 0 deletions
diff --git a/app/assets/javascripts/issuable/issuable_template_selector.js b/app/assets/javascripts/issuable/issuable_template_selector.js new file mode 100644 index 00000000000..cce903d388d --- /dev/null +++ b/app/assets/javascripts/issuable/issuable_template_selector.js @@ -0,0 +1,111 @@ +import $ from 'jquery'; +import TemplateSelector from '~/blob/template_selector'; +import { __ } from '~/locale'; +import Api from '../api'; + +export default class IssuableTemplateSelector extends TemplateSelector { + constructor(...args) { + super(...args); + + this.projectId = this.dropdown.data('projectId'); + this.issuableType = this.$dropdownContainer.data('issuableType'); + this.titleInput = $(`#${this.issuableType}_title`); + this.templateWarningEl = $('.js-issuable-template-warning'); + this.warnTemplateOverride = args[0].warnTemplateOverride; + + const initialQuery = { + name: this.dropdown.data('selected'), + }; + + if (initialQuery.name) this.requestFile(initialQuery); + + $('.reset-template', this.dropdown.parent()).on('click', () => { + this.setInputValueToTemplateContent(); + }); + + $('.no-template', this.dropdown.parent()).on('click', () => { + this.reset(); + }); + + this.templateWarningEl.find('.js-close-btn').on('click', () => { + // Explicitly check against 0 value + if (this.previousSelectedIndex !== undefined) { + this.dropdown.data('deprecatedJQueryDropdown').selectRowAtIndex(this.previousSelectedIndex); + } else { + this.reset(); + } + + this.templateWarningEl.addClass('hidden'); + }); + + this.templateWarningEl.find('.js-override-template').on('click', () => { + this.requestFile(this.overridingTemplate); + this.setSelectedIndex(); + + this.templateWarningEl.addClass('hidden'); + this.overridingTemplate = null; + }); + } + + reset() { + if (this.currentTemplate) { + this.currentTemplate.content = ''; + } + + this.setInputValueToTemplateContent(); + $('.dropdown-toggle-text', this.dropdown).text(__('Choose a template')); + this.previousSelectedIndex = null; + } + + setSelectedIndex() { + this.previousSelectedIndex = this.dropdown.data('deprecatedJQueryDropdown').selectedIndex; + } + + onDropdownClicked(query) { + const content = this.getEditorContent(); + const isContentUnchanged = + content === '' || (this.currentTemplate && content === this.currentTemplate.content); + + if (!this.warnTemplateOverride || isContentUnchanged) { + super.onDropdownClicked(query); + this.setSelectedIndex(); + + return; + } + + this.overridingTemplate = query.selectedObj; + this.templateWarningEl.removeClass('hidden'); + } + + requestFile(query) { + const callback = (currentTemplate) => { + this.currentTemplate = currentTemplate; + this.stopLoadingSpinner(); + this.setInputValueToTemplateContent(); + }; + + this.startLoadingSpinner(); + + Api.projectTemplate( + this.projectId, + this.issuableType, + query.name, + { source_template_project_id: query.project_id }, + callback, + ); + } + + setInputValueToTemplateContent() { + // `this.setEditorContent` sets the value of the description input field + // to the content of the template selected. + if (this.titleInput.val() === '') { + // If the title has not yet been set, focus the title input and + // skip focusing the description input by setting `true` as the + // `skipFocus` option to `setEditorContent`. + this.setEditorContent(this.currentTemplate, { skipFocus: true }); + this.titleInput.focus(); + } else { + this.setEditorContent(this.currentTemplate, { skipFocus: false }); + } + } +} |