<commit_before><script>
  import animateMixin from '../mixins/animate';

  export default {
    mixins: [animateMixin],
    props: {
      canUpdate: {
        type: Boolean,
        required: true,
      },
      descriptionHtml: {
        type: String,
        required: true,
      },
      descriptionText: {
        type: String,
        required: true,
      },
      updatedAt: {
        type: String,
        required: true,
      },
      taskStatus: {
        type: String,
        required: true,
      },
    },
    data() {
      return {
        preAnimation: false,
        pulseAnimation: false,
        timeAgoEl: $('.issue_edited_ago'),
      };
    },
    watch: {
      descriptionHtml() {
        this.animateChange();

        this.$nextTick(() => {
          const toolTipTime = gl.utils.formatDate(this.updatedAt);

          this.timeAgoEl.attr('datetime', this.updatedAt)
            .attr('title', toolTipTime)
            .tooltip('fixTitle');

          $(this.$refs['gfm-entry-content']).renderGFM();

          if (this.canUpdate) {
            // eslint-disable-next-line no-new
            new gl.TaskList({
              dataType: 'issue',
              fieldName: 'description',
              selector: '.detail-page-description',
            });
          }
        });
      },
      taskStatus() {
        const $issueableHeader = $('.issuable-header');
        let $tasks = $('#task_status');
        let $tasksShort = $('#task_status_short');

        if (this.taskStatus.indexOf('0 of 0') >= 0) {
          $tasks.remove();
          $tasksShort.remove();
        } else if (!$tasks.length && !$tasksShort.length) {
          $tasks = $issueableHeader.append('<span id="task_status"></span>');
          $tasksShort = $issueableHeader.append('<span id="task_status_short"></span>');
        }

        $tasks.text(this.taskStatus);
      },
    },
  };
</script>

<template>
  <div
    v-if="descriptionHtml"
    class="description"
    :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"
    >{{ descriptionText }}</textarea>
  </div>
</template>
<commit_msg>Fixed task status with mobile<commit_after><script>
  import animateMixin from '../mixins/animate';

  export default {
    mixins: [animateMixin],
    props: {
      canUpdate: {
        type: Boolean,
        required: true,
      },
      descriptionHtml: {
        type: String,
        required: true,
      },
      descriptionText: {
        type: String,
        required: true,
      },
      updatedAt: {
        type: String,
        required: true,
      },
      taskStatus: {
        type: String,
        required: true,
      },
    },
    data() {
      return {
        preAnimation: false,
        pulseAnimation: false,
        timeAgoEl: $('.issue_edited_ago'),
      };
    },
    watch: {
      descriptionHtml() {
        this.animateChange();

        this.$nextTick(() => {
          const toolTipTime = gl.utils.formatDate(this.updatedAt);

          this.timeAgoEl.attr('datetime', this.updatedAt)
            .attr('title', toolTipTime)
            .tooltip('fixTitle');

          $(this.$refs['gfm-entry-content']).renderGFM();

          if (this.canUpdate) {
            // eslint-disable-next-line no-new
            new gl.TaskList({
              dataType: 'issue',
              fieldName: 'description',
              selector: '.detail-page-description',
            });
          }
        });
      },
      taskStatus() {
        const taskRegexMatches = this.taskStatus.match(/(\d+) of (\d+)/);
        const $issueableHeader = $('.issuable-meta');
        let $tasks = $('#task_status');
        let $tasksShort = $('#task_status_short');

        if (this.taskStatus.indexOf('0 of 0') >= 0 || this.taskStatus.trim() === '') {
          $tasks.remove();
          $tasksShort.remove();
        } else if (!$tasks.length && !$tasksShort.length) {
          $tasks = $issueableHeader.append('<span id="task_status" class="hidden-xs hidden-sm"></span>')
            .find('#task_status');
          $tasksShort = $issueableHeader.append('<span id="task_status_short" class="hidden-md hidden-lg"></span>')
            .find('#task_status_short');
        }

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

<template>
  <div
    v-if="descriptionHtml"
    class="description"
    :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"
    >{{ descriptionText }}</textarea>
  </div>
</template>

{'fraction_non_alphanumeric': 0.15786474164133737, 'fraction_numerical': 0.001899696048632219, 'mean_word_length': 1.8944474986256186, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 36, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5627073', 'n_tokens_mistral': 1597, 'n_tokens_neox': 1545, 'n_words': 266}