debian-mirror-gitlab/app/assets/javascripts/notes/components/discussion_counter.vue

<script>
import { mapActions, 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';

export default {
  directives: {
    tooltip,
  },
  computed: {
    ...mapGetters([
      'getUserData',
      'getNoteableData',
      'discussionCount',
      'unresolvedDiscussions',
      'resolvedDiscussionCount',
    ]),
    isLoggedIn() {
      return this.getUserData.id;
    },
    hasNextButton() {
      return this.isLoggedIn && !this.allResolved;
    },
    countText() {
      return pluralize('discussion', this.discussionCount);
    },
    allResolved() {
      return this.resolvedDiscussionCount === this.discussionCount;
    },
    resolveAllDiscussionsIssuePath() {
      return this.getNoteableData.create_issue_to_resolve_discussions_path;
    },
    firstUnresolvedDiscussionId() {
      const item = this.unresolvedDiscussions[0] || {};

      return item.id;
    },
  },
  created() {
    this.resolveSvg = resolveSvg;
    this.resolvedSvg = resolvedSvg;
    this.mrIssueSvg = mrIssueSvg;
    this.nextDiscussionSvg = nextDiscussionSvg;
  },
  methods: {
    ...mapActions(['expandDiscussion']),
    jumpToFirstUnresolvedDiscussion() {
      const discussionId = this.firstUnresolvedDiscussionId;
      if (!discussionId) {
        return;
      }

      const el = document.querySelector(`[data-discussion-id="${discussionId}"]`);
      const activeTab = window.mrTabs.currentAction;

      if (activeTab === 'commits' || activeTab === 'pipelines') {
        window.mrTabs.activateTab('show');
      }

      if (el) {
        this.expandDiscussion({ discussionId });
        scrollToElement(el);
      }
    },
  },
};
</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>
        <span class="line-resolve-text">
          {{ resolvedDiscussionCount }}/{{ discussionCount }} {{ countText }} resolved
        </span>
      </div>
      <div
        v-if="resolveAllDiscussionsIssuePath && !allResolved"
        class="btn-group"
        role="group">
        <a
          v-tooltip
          :href="resolveAllDiscussionsIssuePath"
          :title="s__('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"
          class="btn btn-default discussion-next-btn"
          @click="jumpToFirstUnresolvedDiscussion">
          <span v-html="nextDiscussionSvg"></span>
        </button>
      </div>
    </div>
  </div>
</template>