diff options
Diffstat (limited to 'app/assets/javascripts/issuable_show/components/issuable_body.vue')
-rw-r--r-- | app/assets/javascripts/issuable_show/components/issuable_body.vue | 70 |
1 files changed, 68 insertions, 2 deletions
diff --git a/app/assets/javascripts/issuable_show/components/issuable_body.vue b/app/assets/javascripts/issuable_show/components/issuable_body.vue index 02cf7a67727..fe102e942c9 100644 --- a/app/assets/javascripts/issuable_show/components/issuable_body.vue +++ b/app/assets/javascripts/issuable_show/components/issuable_body.vue @@ -1,6 +1,8 @@ <script> import { GlLink } from '@gitlab/ui'; +import TaskList from '~/task_list'; + import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; import IssuableDescription from './issuable_description.vue'; @@ -40,6 +42,11 @@ export default { type: Boolean, required: true, }, + enableTaskList: { + type: Boolean, + required: false, + default: false, + }, editFormVisible: { type: Boolean, required: true, @@ -56,6 +63,16 @@ export default { type: String, required: true, }, + taskListUpdatePath: { + type: String, + required: false, + default: '', + }, + taskListLockVersion: { + type: Number, + required: false, + default: 0, + }, }, computed: { isUpdated() { @@ -65,7 +82,50 @@ export default { return this.issuable.updatedBy; }, }, + watch: { + /** + * When user switches between view and edit modes, + * taskList instance becomes invalid so whenever + * view mode is rendered, we need to re-initialize + * taskList to ensure the behaviour functional. + */ + editFormVisible(value) { + if (!value) { + this.$nextTick(() => { + this.initTaskList(); + }); + } + }, + }, + mounted() { + if (this.enableEdit && this.enableTaskList) { + this.initTaskList(); + } + }, methods: { + initTaskList() { + this.taskList = new TaskList({ + /** + * We have hard-coded dataType to `issue` + * as currently only `issue` types can handle + * task-lists, however, we can still use + * task lists in Issue, Test Cases and Incidents + * as all of those are derived from `issue`. + */ + dataType: 'issue', + fieldName: 'description', + lockVersion: this.taskListLockVersion, + selector: '.js-detail-page-description', + onSuccess: this.handleTaskListUpdateSuccess.bind(this), + onError: this.handleTaskListUpdateFailure.bind(this), + }); + }, + handleTaskListUpdateSuccess(updatedIssuable) { + this.$emit('task-list-update-success', updatedIssuable); + }, + handleTaskListUpdateFailure() { + this.$emit('task-list-update-failure'); + }, handleKeydownTitle(e, issuableMeta) { this.$emit('keydown-title', e, issuableMeta); }, @@ -78,7 +138,7 @@ export default { <template> <div class="issue-details issuable-details"> - <div class="detail-page-description content-block"> + <div class="detail-page-description js-detail-page-description content-block"> <issuable-edit-form v-if="editFormVisible" :issuable="issuable" @@ -106,7 +166,13 @@ export default { <slot name="status-badge"></slot> </template> </issuable-title> - <issuable-description v-if="issuable.descriptionHtml" :issuable="issuable" /> + <issuable-description + v-if="issuable.descriptionHtml" + :issuable="issuable" + :enable-task-list="enableTaskList" + :can-edit="enableEdit" + :task-list-update-path="taskListUpdatePath" + /> <small v-if="isUpdated" class="edited-text gl-font-sm!"> {{ __('Edited') }} <time-ago-tooltip :time="issuable.updatedAt" tooltip-placement="bottom" /> |