diff options
author | Phil Hughes <me@iamphill.com> | 2017-05-15 14:51:40 +0100 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-05-15 14:51:40 +0100 |
commit | efc9408fbf2a0524ca249842a429792dc7019810 (patch) | |
tree | bd6d267459e79ec514db27675badb673c552e5ae | |
parent | 14387b49a56bf31e7d250611cf2b40b2a8928c08 (diff) | |
download | gitlab-ce-efc9408fbf2a0524ca249842a429792dc7019810.tar.gz |
Added description template selector
[ci skip]
7 files changed, 138 insertions, 15 deletions
diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue index ee780afc44d..34171c22c0a 100644 --- a/app/assets/javascripts/issue_show/components/app.vue +++ b/app/assets/javascripts/issue_show/components/app.vue @@ -41,6 +41,11 @@ export default { required: false, default: '', }, + issuableTemplates: { + type: Array, + required: false, + default: () => [], + }, }, data() { const store = new Store({ @@ -146,7 +151,8 @@ export default { :show-form="showForm" :issuable-ref="issuableRef" :title-html="state.titleHtml" - :title-text="state.titleText" /> + :title-text="state.titleText" + :issuable-templates="issuableTemplates" /> <description-component v-if="state.descriptionHtml" :can-update="canUpdate" diff --git a/app/assets/javascripts/issue_show/components/fields/template.vue b/app/assets/javascripts/issue_show/components/fields/template.vue new file mode 100644 index 00000000000..074d0df3803 --- /dev/null +++ b/app/assets/javascripts/issue_show/components/fields/template.vue @@ -0,0 +1,84 @@ +<script> + export default { + props: { + issuableTemplates: { + type: Array, + required: false, + default: () => [], + }, + }, + mounted() { + return new gl.IssuableTemplateSelectors(); + }, + }; +</script> + +<template> + <div + class="dropdown js-issuable-selector-wrap" + data-issuable-type="issue"> + <button + class="dropdown-menu-toggle js-issuable-selector" + type="button" + :data-data="JSON.stringify(issuableTemplates)" + data-field-name="issuable_template" + data-selected="null" + data-project-path="gitlab-ce" + data-namespace-path="gitlab-org" + data-toggle="dropdown"> + <span class="dropdown-toggle-text "> + Choose a template + </span> + <i + aria-hidden="true" + class="fa fa-chevron-down"> + </i> + </button> + <div class="dropdown-menu dropdown-select"> + <div class="dropdown-title"> + Choose a template + <button + class="dropdown-title-button dropdown-menu-close" + aria-label="Close" + type="button"> + <i + aria-hidden="true" + class="fa fa-times dropdown-menu-close-icon"> + </i> + </button> + </div> + <div class="dropdown-input"> + <input + type="search" + class="dropdown-input-field" + placeholder="Filter" + autocomplete="off" /> + <i + aria-hidden="true" + class="fa fa-search dropdown-input-search"> + </i> + <i + role="button" + aria-hidden="true" + class="fa fa-times dropdown-input-clear js-dropdown-input-clear"> + </i> + </div> + <div class="dropdown-content "> + </div> + <div class="dropdown-footer"> + <ul class="dropdown-footer-list"> + <li> + <a class="no-template"> + No template + </a> + </li> + <li> + <a class="reset-template"> + Reset template + </a> + </li> + </ul> + </div> + </div> + </div> +</template> diff --git a/app/assets/javascripts/issue_show/components/fields/title.vue b/app/assets/javascripts/issue_show/components/fields/title.vue index 732a4021205..41accdec37f 100644 --- a/app/assets/javascripts/issue_show/components/fields/title.vue +++ b/app/assets/javascripts/issue_show/components/fields/title.vue @@ -1,32 +1,48 @@ <script> + import descriptionTemplate from './template.vue'; + export default { props: { store: { type: Object, required: true, }, + issuableTemplates: { + type: Array, + required: false, + default: () => [], + }, }, data() { return { state: this.store.formState, }; }, + components: { + descriptionTemplate, + }, }; </script> <template> - <fieldset> - <label - class="sr-only" - for="issue-title"> - Title - </label> - <input - id="issue-title" - class="form-control" - type="text" - placeholder="Issue title" - aria-label="Issue title" - v-model="state.title" /> + <fieldset class="row"> + <div class="col-sm-4 col-lg-3"> + <description-template + :issuable-templates="issuableTemplates" /> + </div> + <div class="col-sm-8 col-lg-9"> + <label + class="sr-only" + for="issue-title"> + Title + </label> + <input + id="issue-title" + class="form-control" + type="text" + placeholder="Issue title" + aria-label="Issue title" + v-model="state.title" /> + </div> </fieldset> </template> diff --git a/app/assets/javascripts/issue_show/components/title.vue b/app/assets/javascripts/issue_show/components/title.vue index a61ce414891..18e8d6b696d 100644 --- a/app/assets/javascripts/issue_show/components/title.vue +++ b/app/assets/javascripts/issue_show/components/title.vue @@ -35,6 +35,11 @@ type: Boolean, required: true, }, + issuableTemplates: { + type: Array, + required: true, + default: () => [], + }, }, watch: { titleHtml() { @@ -56,7 +61,8 @@ <div> <title-field v-if="showForm" - :store="store" /> + :store="store" + :issuable-templates="issuableTemplates" /> <h2 v-else class="title" diff --git a/app/assets/javascripts/issue_show/index.js b/app/assets/javascripts/issue_show/index.js index a2ad1a0e034..8c1e1d5879e 100644 --- a/app/assets/javascripts/issue_show/index.js +++ b/app/assets/javascripts/issue_show/index.js @@ -4,6 +4,8 @@ import issuableApp from './components/app.vue'; import '../vue_shared/vue_resource_interceptor'; document.addEventListener('DOMContentLoaded', () => { + const initialDataEl = document.getElementById('js-issuable-app-initial-data'); + const initialData = JSON.parse(initialDataEl.innerHTML.replace(/"/g, '"')); $('.issuable-edit').on('click', (e) => { e.preventDefault(); @@ -35,6 +37,7 @@ document.addEventListener('DOMContentLoaded', () => { initialTitle: issuableTitleElement.innerHTML, initialDescriptionHtml: issuableDescriptionElement ? issuableDescriptionElement.innerHTML : '', initialDescriptionText: issuableDescriptionTextarea ? issuableDescriptionTextarea.textContent : '', + issuableTemplates: initialData.templates, }; }, render(createElement) { @@ -47,6 +50,7 @@ document.addEventListener('DOMContentLoaded', () => { initialTitle: this.initialTitle, initialDescriptionHtml: this.initialDescriptionHtml, initialDescriptionText: this.initialDescriptionText, + issuableTemplates: this.issuableTemplates, }, }); }, diff --git a/app/helpers/issuables_helper.rb b/app/helpers/issuables_helper.rb index 9290e4ec133..8358fd43e72 100644 --- a/app/helpers/issuables_helper.rb +++ b/app/helpers/issuables_helper.rb @@ -199,6 +199,12 @@ module IssuablesHelper issuable_filter_params.any? { |k| params.key?(k) } end + def issuable_initial_data(issuable) + { + templates: issuable_templates(issuable) + }.to_json + end + private def sidebar_gutter_collapsed? diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml index d0783009a58..6e0267aed39 100644 --- a/app/views/projects/issues/show.html.haml +++ b/app/views/projects/issues/show.html.haml @@ -51,6 +51,7 @@ .issue-details.issuable-details .detail-page-description.content-block + %script#js-issuable-app-initial-data{ type: "application/json" }= issuable_initial_data(@issue) #js-issuable-app{ "data" => { "endpoint" => namespace_project_issue_path(@project.namespace, @project, @issue), "can-update" => can?(current_user, :update_issue, @issue).to_s, "can-destroy" => can?(current_user, :destroy_issue, @issue).to_s, |