diff options
author | Phil Hughes <me@iamphill.com> | 2017-05-16 10:37:05 +0100 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-05-16 10:37:10 +0100 |
commit | 86ab9edbb2836feb3eb52fe859f1bc9521787fc2 (patch) | |
tree | be902c3844b2ebd97b284ab8bdfff492809bf91a /app/assets/javascripts/issue_show | |
parent | 96a46521002f17aff2fc09f02778432ae049c6ee (diff) | |
parent | 5f2b142b66ed8f355b36b91907ca9bea17c070f2 (diff) | |
download | gitlab-ce-86ab9edbb2836feb3eb52fe859f1bc9521787fc2.tar.gz |
Merge branch 'issue-edit-inline' into issue-edit-inline-description-field
[ci skip]
Diffstat (limited to 'app/assets/javascripts/issue_show')
7 files changed, 118 insertions, 118 deletions
diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue index 6ec66da0ed4..eb594cfb60b 100644 --- a/app/assets/javascripts/issue_show/components/app.vue +++ b/app/assets/javascripts/issue_show/components/app.vue @@ -7,7 +7,7 @@ import Service from '../services/index'; import Store from '../stores'; import titleComponent from './title.vue'; import descriptionComponent from './description.vue'; -import editActions from './edit_actions.vue'; +import formComponent from './form.vue'; export default { props: { @@ -60,19 +60,18 @@ export default { return { store, state: store.state, - formState: store.formState, showForm: false, }; }, computed: { - elementType() { - return this.showForm ? 'form' : 'div'; + formState() { + return this.store.formState; }, }, components: { descriptionComponent, titleComponent, - editActions, + formComponent, }, methods: { openForm() { @@ -82,8 +81,11 @@ export default { description: this.state.descriptionText, }; }, + closeForm() { + this.showForm = false; + }, updateIssuable() { - this.service.updateIssuable(this.formState) + this.service.updateIssuable(this.store.formState) .then(() => { eventHub.$emit('close.form'); }) @@ -134,32 +136,38 @@ export default { eventHub.$on('delete.issuable', this.deleteIssuable); eventHub.$on('update.issuable', this.updateIssuable); + eventHub.$on('close.form', this.closeForm); eventHub.$on('open.form', this.openForm); }, beforeDestroy() { eventHub.$off('delete.issuable', this.deleteIssuable); eventHub.$off('update.issuable', this.updateIssuable); - eventHub.$on('open.form', this.openForm); + eventHub.$off('close.form', this.closeForm); + eventHub.$off('open.form', this.openForm); }, }; </script> <template> - <div :is="elementType"> - <title-component - :store="store" - :show-form="showForm" - :issuable-ref="issuableRef" - :title-html="state.titleHtml" - :title-text="state.titleText" /> - <description-component - :store="store" - :show-form="showForm" - :can-update="canUpdate" - :markdown-preview-url="markdownPreviewUrl" - :markdown-docs="markdownDocs" /> - <edit-actions + <div> + <form-component v-if="canUpdate && showForm" - :can-destroy="canDestroy" /> + :form-state="formState" + :can-destroy="canDestroy" + :markdown-docs="markdownDocs" + :markdown-preview-url="markdownPreviewUrl" /> + <div v-else> + <title-component + :issuable-ref="issuableRef" + :title-html="state.titleHtml" + :title-text="state.titleText" /> + <description-component + v-if="state.descriptionHtml" + :can-update="canUpdate" + :description-html="state.descriptionHtml" + :description-text="state.descriptionText" + :updated-at="state.updatedAt" + :task-status="state.taskStatus" /> + </div> </div> </template> diff --git a/app/assets/javascripts/issue_show/components/description.vue b/app/assets/javascripts/issue_show/components/description.vue index fb542c70489..fc73d5db899 100644 --- a/app/assets/javascripts/issue_show/components/description.vue +++ b/app/assets/javascripts/issue_show/components/description.vue @@ -1,6 +1,5 @@ <script> import animateMixin from '../mixins/animate'; - import descriptionField from './fields/description.vue'; export default { mixins: [animateMixin], @@ -9,45 +8,32 @@ type: Boolean, required: true, }, - store: { - type: Object, + descriptionHtml: { + type: String, required: true, }, - showForm: { - type: Boolean, + descriptionText: { + type: String, required: true, }, - markdownPreviewUrl: { + updatedAt: { type: String, - required: true, + required: false, + default: '', }, - markdownDocs: { + taskStatus: { type: String, - required: true, + required: false, + default: '', }, }, data() { return { - state: this.store.state, preAnimation: false, pulseAnimation: false, timeAgoEl: $('.js-issue-edited-ago'), }; }, - computed: { - descriptionHtml() { - return this.state.descriptionHtml; - }, - descriptionText() { - return this.state.descriptionText; - }, - updatedAt() { - return this.state.updated_at; - }, - taskStatus() { - return this.state.taskStatus; - }, - }, watch: { descriptionHtml() { this.animateChange(); @@ -91,9 +77,6 @@ } }, }, - components: { - descriptionField, - }, mounted() { this.renderGFM(); }, @@ -101,32 +84,25 @@ </script> <template> - <div :class="{ 'common-note-form': showForm }"> - <description-field - v-if="showForm" - :store="store" - :markdown-preview-url="markdownPreviewUrl" - :markdown-docs="markdownDocs" /> + <div + v-else-if="descriptionHtml" + class="description" + :class="{ + 'js-task-list-container': canUpdate + }"> <div - v-else-if="descriptionHtml" - class="description" + class="wiki" :class="{ - 'js-task-list-container': canUpdate - }"> - <div - class="wiki" - :class="{ - 'issue-realtime-pre-pulse': preAnimation, - 'issue-realtime-trigger-pulse': pulseAnimation - }" - v-html="descriptionHtml" - ref="gfm-content"> - </div> - <textarea - class="hidden js-task-list-field" - v-if="descriptionText" - v-model="descriptionText"> - </textarea> + 'issue-realtime-pre-pulse': preAnimation, + 'issue-realtime-trigger-pulse': pulseAnimation + }" + v-html="descriptionHtml" + ref="gfm-content"> </div> + <textarea + class="hidden js-task-list-field" + v-if="descriptionText" + v-model="descriptionText"> + </textarea> </div> </template> diff --git a/app/assets/javascripts/issue_show/components/fields/description.vue b/app/assets/javascripts/issue_show/components/fields/description.vue index bade7634e72..b4c31811a0b 100644 --- a/app/assets/javascripts/issue_show/components/fields/description.vue +++ b/app/assets/javascripts/issue_show/components/fields/description.vue @@ -4,7 +4,7 @@ export default { props: { - store: { + formState: { type: Object, required: true, }, @@ -17,11 +17,6 @@ required: true, }, }, - data() { - return { - state: this.store.formState, - }; - }, components: { markdownField, }, @@ -29,7 +24,7 @@ </script> <template> - <div> + <div class="common-note-form"> <label class="sr-only" for="issue-description"> @@ -43,7 +38,7 @@ class="note-textarea js-gfm-input js-autosize markdown-area" data-supports-slash-commands="false" aria-label="Description" - v-model="state.description" + v-model="formState.description" ref="textatea" slot="textarea"> </textarea> diff --git a/app/assets/javascripts/issue_show/components/fields/title.vue b/app/assets/javascripts/issue_show/components/fields/title.vue index 732a4021205..01ae6fd3dd2 100644 --- a/app/assets/javascripts/issue_show/components/fields/title.vue +++ b/app/assets/javascripts/issue_show/components/fields/title.vue @@ -1,16 +1,11 @@ <script> export default { props: { - store: { + formState: { type: Object, required: true, }, }, - data() { - return { - state: this.store.formState, - }; - }, }; </script> @@ -27,6 +22,6 @@ type="text" placeholder="Issue title" aria-label="Issue title" - v-model="state.title" /> + v-model="formState.title" /> </fieldset> </template> diff --git a/app/assets/javascripts/issue_show/components/form.vue b/app/assets/javascripts/issue_show/components/form.vue new file mode 100644 index 00000000000..7732a1c194a --- /dev/null +++ b/app/assets/javascripts/issue_show/components/form.vue @@ -0,0 +1,44 @@ +<script> + import titleField from './fields/title.vue'; + import descriptionField from './fields/description.vue'; + import editActions from './edit_actions.vue'; + + export default { + props: { + canDestroy: { + type: Boolean, + required: true, + }, + formState: { + type: Object, + required: true, + }, + markdownPreviewUrl: { + type: String, + required: true, + }, + markdownDocs: { + type: String, + required: true, + }, + }, + components: { + titleField, + descriptionField, + editActions, + }, + }; +</script> + +<template> + <form> + <title-field + :form-state="formState" /> + <description-field + :form-state="formState" + :markdown-preview-url="markdownPreviewUrl" + :markdown-docs="markdownDocs" /> + <edit-actions + :can-destroy="canDestroy" /> + </form> +</template> diff --git a/app/assets/javascripts/issue_show/components/title.vue b/app/assets/javascripts/issue_show/components/title.vue index a61ce414891..a9dabd4cff1 100644 --- a/app/assets/javascripts/issue_show/components/title.vue +++ b/app/assets/javascripts/issue_show/components/title.vue @@ -1,12 +1,8 @@ <script> import animateMixin from '../mixins/animate'; - import titleField from './fields/title.vue'; export default { mixins: [animateMixin], - components: { - titleField, - }, data() { return { preAnimation: false, @@ -27,14 +23,6 @@ type: String, required: true, }, - store: { - type: Object, - required: true, - }, - showForm: { - type: Boolean, - required: true, - }, }, watch: { titleHtml() { @@ -53,19 +41,13 @@ </script> <template> - <div> - <title-field - v-if="showForm" - :store="store" /> - <h2 - v-else - class="title" - :class="{ - 'issue-realtime-pre-pulse': preAnimation, - 'issue-realtime-trigger-pulse': pulseAnimation - }" - v-html="titleHtml" - > - </h2> - </div> + <h2 + class="title" + :class="{ + 'issue-realtime-pre-pulse': preAnimation, + 'issue-realtime-trigger-pulse': pulseAnimation + }" + v-html="titleHtml" + > + </h2> </template> diff --git a/app/assets/javascripts/issue_show/services/index.js b/app/assets/javascripts/issue_show/services/index.js index 5da15882c25..0ceff34cf8b 100644 --- a/app/assets/javascripts/issue_show/services/index.js +++ b/app/assets/javascripts/issue_show/services/index.js @@ -8,15 +8,15 @@ export default class Service { this.endpoint = endpoint; this.resource = Vue.resource(this.endpoint, {}, { - rendered_title: { + realtimeChanges: { method: 'GET', - url: `${this.endpoint}/rendered_title`, + url: `${this.endpoint}/realtime_changes`, }, }); } getData() { - return this.resource.rendered_title(); + return this.resource.realtimeChanges(); } deleteIssuable() { |