discussion_counter.vue 3.34 KB
Newer Older
1
<script>
Fatih Acet's avatar
Fatih Acet committed
2 3 4 5 6 7 8 9
import { mapGetters } from 'vuex';
import resolveSvg from 'icons/_icon_resolve_discussion.svg';
import resolvedSvg from 'icons/_icon_status_success_solid.svg';
import mrIssueSvg from 'icons/_icon_mr_issue.svg';
import nextDiscussionSvg from 'icons/_next_discussion.svg';
import { pluralize } from '../../lib/utils/text_utility';
import { scrollToElement } from '../../lib/utils/common_utils';
import tooltip from '../../vue_shared/directives/tooltip';
10

Fatih Acet's avatar
Fatih Acet committed
11 12 13 14 15 16 17 18 19 20 21 22 23 24
export default {
  directives: {
    tooltip,
  },
  computed: {
    ...mapGetters([
      'getUserData',
      'getNoteableData',
      'discussionCount',
      'unresolvedDiscussions',
      'resolvedDiscussionCount',
    ]),
    isLoggedIn() {
      return this.getUserData.id;
25
    },
Fatih Acet's avatar
Fatih Acet committed
26 27 28 29 30 31 32 33
    hasNextButton() {
      return this.isLoggedIn && !this.allResolved;
    },
    countText() {
      return pluralize('discussion', this.discussionCount);
    },
    allResolved() {
      return this.resolvedDiscussionCount === this.discussionCount;
34
    },
Fatih Acet's avatar
Fatih Acet committed
35 36 37 38 39 40 41
    resolveAllDiscussionsIssuePath() {
      return this.getNoteableData.create_issue_to_resolve_discussions_path;
    },
    firstUnresolvedDiscussionId() {
      const item = this.unresolvedDiscussions[0] || {};

      return item.id;
42
    },
Fatih Acet's avatar
Fatih Acet committed
43 44 45 46 47 48 49 50 51 52 53 54 55
  },
  created() {
    this.resolveSvg = resolveSvg;
    this.resolvedSvg = resolvedSvg;
    this.mrIssueSvg = mrIssueSvg;
    this.nextDiscussionSvg = nextDiscussionSvg;
  },
  methods: {
    jumpToFirstDiscussion() {
      const el = document.querySelector(
        `[data-discussion-id="${this.firstUnresolvedDiscussionId}"]`,
      );
      const activeTab = window.mrTabs.currentAction;
56

Fatih Acet's avatar
Fatih Acet committed
57 58 59
      if (activeTab === 'commits' || activeTab === 'pipelines') {
        window.mrTabs.activateTab('show');
      }
60

Fatih Acet's avatar
Fatih Acet committed
61 62 63
      if (el) {
        scrollToElement(el);
      }
64
    },
Fatih Acet's avatar
Fatih Acet committed
65 66
  },
};
67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88
</script>

<template>
  <div class="line-resolve-all-container prepend-top-10">
    <div>
      <div
        v-if="discussionCount > 0"
        :class="{ 'has-next-btn': hasNextButton }"
        class="line-resolve-all">
        <span
          :class="{ 'is-active': allResolved }"
          class="line-resolve-btn is-disabled"
          type="button">
          <span
            v-if="allResolved"
            v-html="resolvedSvg"
          ></span>
          <span
            v-else
            v-html="resolveSvg"
          ></span>
        </span>
89
        <span class="line-resolve-text">
90 91 92 93 94 95 96 97 98
          {{ resolvedDiscussionCount }}/{{ discussionCount }} {{ countText }} resolved
        </span>
      </div>
      <div
        v-if="resolveAllDiscussionsIssuePath && !allResolved"
        class="btn-group"
        role="group">
        <a
          v-tooltip
Filipa Lacerda's avatar
Filipa Lacerda committed
99
          :href="resolveAllDiscussionsIssuePath"
100 101 102 103 104 105 106 107 108 109 110 111 112 113
          title="Resolve all discussions in new issue"
          data-container="body"
          class="new-issue-for-discussion btn btn-default discussion-create-issue-btn">
          <span v-html="mrIssueSvg"></span>
        </a>
      </div>
      <div
        v-if="isLoggedIn && !allResolved"
        class="btn-group"
        role="group">
        <button
          v-tooltip
          title="Jump to first unresolved discussion"
          data-container="body"
Filipa Lacerda's avatar
Filipa Lacerda committed
114 115
          class="btn btn-default discussion-next-btn"
          @click="jumpToFirstDiscussion">
116 117 118 119 120 121
          <span v-html="nextDiscussionSvg"></span>
        </button>
      </div>
    </div>
  </div>
</template>