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

<script>
import $ from 'jquery';
import animateMixin from '../mixins/animate';
import TaskList from '../../task_list';
import recaptchaModalImplementor from '../../vue_shared/mixins/recaptcha_modal_implementor';

export default {
  mixins: [animateMixin, recaptchaModalImplementor],

  props: {
    canUpdate: {
      type: Boolean,
      required: true,
    },
    descriptionHtml: {
      type: String,
      required: true,
    },
    descriptionText: {
      type: String,
      required: true,
    },
    taskStatus: {
      type: String,
      required: false,
      default: '',
    },
    issuableType: {
      type: String,
      required: false,
      default: 'issue',
    },
    updateUrl: {
      type: String,
      required: false,
      default: null,
    },
  },
  data() {
    return {
      preAnimation: false,
      pulseAnimation: false,
    };
  },
  watch: {
    descriptionHtml() {
      this.animateChange();

      this.$nextTick(() => {
        this.renderGFM();
      });
    },
    taskStatus() {
      this.updateTaskStatusText();
    },
  },
  mounted() {
    this.renderGFM();
    this.updateTaskStatusText();
  },
  methods: {
    renderGFM() {
      $(this.$refs['gfm-content']).renderGFM();

      if (this.canUpdate) {
        // eslint-disable-next-line no-new
        new TaskList({
          dataType: this.issuableType,
          fieldName: 'description',
          selector: '.detail-page-description',
          onSuccess: this.taskListUpdateSuccess.bind(this),
        });
      }
    },

    taskListUpdateSuccess(data) {
      try {
        this.checkForSpam(data);
        this.closeRecaptcha();
      } catch (error) {
        if (error && error.name === 'SpamError') this.openRecaptcha();
      }
    },

    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);

      if (taskRegexMatches) {
        $tasks.text(this.taskStatus);
        $tasksShort.text(
          `${taskRegexMatches[1]}/${taskRegexMatches[2]} task${taskRegexMatches[2] > 1 ? 's' : ''}`,
        );
      } else {
        $tasks.text('');
        $tasksShort.text('');
      }
    },
  },
};
</script>

<template>
  <div
    v-if="descriptionHtml"
    :class="{
      'js-task-list-container': canUpdate
    }"
    class="description"
  >
    <div
      ref="gfm-content"
      :class="{
        'issue-realtime-pre-pulse': preAnimation,
        'issue-realtime-trigger-pulse': pulseAnimation
      }"
      class="wiki"
      v-html="descriptionHtml">
    </div>
    <textarea
      v-if="descriptionText"
      v-model="descriptionText"
      :data-update-url="updateUrl"
      class="hidden js-task-list-field"
    >
    </textarea>

    <recaptcha-modal
      v-show="showRecaptcha"
      :html="recaptchaHTML"
      @close="closeRecaptcha"
    />
  </div>
</template>