debian-mirror-gitlab/app/assets/javascripts/issue_show/components/description.vue

159 lines
3.5 KiB
Vue
Raw Normal View History

2017-09-10 17:25:29 +05:30
<script>
2020-11-24 15:15:51 +05:30
import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
2021-03-11 19:13:27 +05:30
import $ from 'jquery';
2021-09-04 01:27:46 +05:30
import createFlash from '~/flash';
2021-03-11 19:13:27 +05:30
import { s__, sprintf } from '~/locale';
2018-12-13 13:39:08 +05:30
import TaskList from '../../task_list';
2021-03-11 19:13:27 +05:30
import animateMixin from '../mixins/animate';
2017-09-10 17:25:29 +05:30
2018-12-13 13:39:08 +05:30
export default {
2020-11-24 15:15:51 +05:30
directives: {
SafeHtml,
},
2021-04-17 20:07:23 +05:30
mixins: [animateMixin],
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
props: {
canUpdate: {
type: Boolean,
required: true,
2017-09-10 17:25:29 +05:30
},
2018-12-13 13:39:08 +05:30
descriptionHtml: {
type: String,
required: true,
2017-09-10 17:25:29 +05:30
},
2018-12-13 13:39:08 +05:30
descriptionText: {
type: String,
2020-11-24 15:15:51 +05:30
required: false,
default: '',
2018-12-13 13:39:08 +05:30
},
taskStatus: {
type: String,
required: false,
default: '',
},
issuableType: {
type: String,
required: false,
default: 'issue',
},
updateUrl: {
type: String,
required: false,
default: null,
},
2019-03-02 22:35:43 +05:30
lockVersion: {
type: Number,
required: false,
default: 0,
},
2018-12-13 13:39:08 +05:30
},
data() {
return {
preAnimation: false,
pulseAnimation: false,
2020-11-24 15:15:51 +05:30
initialUpdate: true,
2018-12-13 13:39:08 +05:30
};
},
watch: {
2020-11-24 15:15:51 +05:30
descriptionHtml(newDescription, oldDescription) {
if (!this.initialUpdate && newDescription !== oldDescription) {
this.animateChange();
} else {
this.initialUpdate = false;
}
2017-09-10 17:25:29 +05:30
2018-12-13 13:39:08 +05:30
this.$nextTick(() => {
this.renderGFM();
});
2017-09-10 17:25:29 +05:30
},
2018-12-13 13:39:08 +05:30
taskStatus() {
2018-03-17 18:26:18 +05:30
this.updateTaskStatusText();
},
2018-12-13 13:39:08 +05:30
},
mounted() {
this.renderGFM();
this.updateTaskStatusText();
},
methods: {
renderGFM() {
$(this.$refs['gfm-content']).renderGFM();
2017-09-10 17:25:29 +05:30
2018-12-13 13:39:08 +05:30
if (this.canUpdate) {
// eslint-disable-next-line no-new
new TaskList({
dataType: this.issuableType,
fieldName: 'description',
2019-03-02 22:35:43 +05:30
lockVersion: this.lockVersion,
2018-12-13 13:39:08 +05:30
selector: '.detail-page-description',
2019-03-02 22:35:43 +05:30
onError: this.taskListUpdateError.bind(this),
2018-12-13 13:39:08 +05:30
});
}
},
2018-03-17 18:26:18 +05:30
2019-03-02 22:35:43 +05:30
taskListUpdateError() {
2021-09-04 01:27:46 +05:30
createFlash({
message: sprintf(
2019-03-02 22:35:43 +05:30
s__(
'Someone edited this %{issueType} at the same time you did. The description has been updated and you will need to make your changes again.',
),
{
issueType: this.issuableType,
},
),
2021-09-04 01:27:46 +05:30
});
2019-03-02 22:35:43 +05:30
this.$emit('taskListUpdateFailed');
},
2018-12-13 13:39:08 +05:30
updateTaskStatusText() {
const taskRegexMatches = this.taskStatus.match(/(\d+) of ((?!0)\d+)/);
const $issuableHeader = $('.issuable-meta');
const $tasks = $('#task_status', $issuableHeader);
const $tasksShort = $('#task_status_short', $issuableHeader);
2017-09-10 17:25:29 +05:30
2018-12-13 13:39:08 +05:30
if (taskRegexMatches) {
$tasks.text(this.taskStatus);
$tasksShort.text(
`${taskRegexMatches[1]}/${taskRegexMatches[2]} task${taskRegexMatches[2] > 1 ? 's' : ''}`,
);
} else {
$tasks.text('');
$tasksShort.text('');
}
2017-09-10 17:25:29 +05:30
},
2018-12-13 13:39:08 +05:30
},
};
2017-09-10 17:25:29 +05:30
</script>
<template>
<div
v-if="descriptionHtml"
:class="{
2019-02-15 15:39:39 +05:30
'js-task-list-container': canUpdate,
2018-03-17 18:26:18 +05:30
}"
2018-11-08 19:23:39 +05:30
class="description"
2018-03-17 18:26:18 +05:30
>
2017-09-10 17:25:29 +05:30
<div
2018-11-08 19:23:39 +05:30
ref="gfm-content"
2020-11-24 15:15:51 +05:30
v-safe-html="descriptionHtml"
2017-09-10 17:25:29 +05:30
:class="{
'issue-realtime-pre-pulse': preAnimation,
2019-02-15 15:39:39 +05:30
'issue-realtime-trigger-pulse': pulseAnimation,
2017-09-10 17:25:29 +05:30
}"
2019-07-07 11:18:12 +05:30
class="md"
2019-02-15 15:39:39 +05:30
></div>
2021-03-11 19:13:27 +05:30
<!-- eslint-disable vue/no-mutating-props -->
2017-09-10 17:25:29 +05:30
<textarea
v-if="descriptionText"
2019-07-31 22:56:46 +05:30
ref="textarea"
2018-03-17 18:26:18 +05:30
v-model="descriptionText"
:data-update-url="updateUrl"
2018-11-08 19:23:39 +05:30
class="hidden js-task-list-field"
2019-07-31 22:56:46 +05:30
dir="auto"
2018-03-17 18:26:18 +05:30
>
2017-09-10 17:25:29 +05:30
</textarea>
2021-03-11 19:13:27 +05:30
<!-- eslint-enable vue/no-mutating-props -->
2017-09-10 17:25:29 +05:30
</div>
</template>