BigW Consortium Gitlab

issue_card_inner.js 4.81 KB
Newer Older
1
import Vue from 'vue';
2
import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
3 4
import eventHub from '../eventhub';

5
const Store = gl.issueBoards.BoardsStore;
6

7 8
window.gl = window.gl || {};
window.gl.issueBoards = window.gl.issueBoards || {};
Phil Hughes committed
9

10 11 12 13 14
gl.issueBoards.IssueCardInner = Vue.extend({
  props: {
    issue: {
      type: Object,
      required: true,
15
    },
16 17 18
    issueLinkBase: {
      type: String,
      required: true,
19
    },
20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
    list: {
      type: Object,
      required: false,
      default: () => ({}),
    },
    rootPath: {
      type: String,
      required: true,
    },
    updateFilters: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
35 36 37 38 39 40 41
  data() {
    return {
      limitBeforeCounter: 3,
      maxRender: 4,
      maxCounter: 99,
    };
  },
42 43 44
  components: {
    userAvatarLink,
  },
45
  computed: {
46 47
    numberOverLimit() {
      return this.issue.assignees.length - this.limitBeforeCounter;
48
    },
49 50 51 52 53 54 55 56 57
    assigneeCounterTooltip() {
      return `${this.assigneeCounterLabel} more`;
    },
    assigneeCounterLabel() {
      if (this.numberOverLimit > this.maxCounter) {
        return `${this.maxCounter}+`;
      }

      return `+${this.numberOverLimit}`;
58
    },
59 60 61 62 63 64
    shouldRenderCounter() {
      if (this.issue.assignees.length <= this.maxRender) {
        return false;
      }

      return this.issue.assignees.length > this.numberOverLimit;
65
    },
66 67
    cardUrl() {
      return `${this.issueLinkBase}/${this.issue.id}`;
68 69 70 71 72 73 74 75 76
    },
    issueId() {
      return `#${this.issue.id}`;
    },
    showLabelFooter() {
      return this.issue.labels.find(l => this.showLabel(l)) !== undefined;
    },
  },
  methods: {
77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98
    isIndexLessThanlimit(index) {
      return index < this.limitBeforeCounter;
    },
    shouldRenderAssignee(index) {
      // Eg. maxRender is 4,
      // Render up to all 4 assignees if there are only 4 assigness
      // Otherwise render up to the limitBeforeCounter
      if (this.issue.assignees.length <= this.maxRender) {
        return index < this.maxRender;
      }

      return index < this.limitBeforeCounter;
    },
    assigneeUrl(assignee) {
      return `${this.rootPath}${assignee.username}`;
    },
    assigneeUrlTitle(assignee) {
      return `Assigned to ${assignee.name}`;
    },
    avatarUrlTitle(assignee) {
      return `Avatar for ${assignee.name}`;
    },
99
    showLabel(label) {
100
      if (!label.id) return false;
Regis Boudinot committed
101
      return true;
102 103 104
    },
    filterByLabel(label, e) {
      if (!this.updateFilters) return;
105

106 107 108 109 110
      const filterPath = gl.issueBoards.BoardsStore.filter.path.split('&');
      const labelTitle = encodeURIComponent(label.title);
      const param = `label_name[]=${labelTitle}`;
      const labelIndex = filterPath.indexOf(param);
      $(e.currentTarget).tooltip('hide');
111

112 113 114 115 116
      if (labelIndex === -1) {
        filterPath.push(param);
      } else {
        filterPath.splice(labelIndex, 1);
      }
117

118
      gl.issueBoards.BoardsStore.filter.path = filterPath.join('&');
119

120
      Store.updateFiltersUrl();
121

122 123 124 125 126 127 128
      eventHub.$emit('updateTokens');
    },
    labelStyle(label) {
      return {
        backgroundColor: label.color,
        color: label.textColor,
      };
129
    },
130 131 132 133 134 135 136 137 138 139
  },
  template: `
    <div>
      <div class="card-header">
        <h4 class="card-title">
          <i
            class="fa fa-eye-slash confidential-icon"
            v-if="issue.confidential"
            aria-hidden="true"
          />
140
          <a
141 142 143 144 145 146
            class="js-no-trigger"
            :href="cardUrl"
            :title="issue.title">{{ issue.title }}</a>
          <span
            class="card-number"
            v-if="issue.id"
147
          >
148 149 150
            {{ issueId }}
          </span>
        </h4>
151
        <div class="card-assignee">
152
          <user-avatar-link
153
            v-for="(assignee, index) in issue.assignees"
Phil Hughes committed
154
            :key="assignee.id"
155
            v-if="shouldRenderAssignee(index)"
156 157 158 159 160 161 162
            class="js-no-trigger"
            :link-href="assigneeUrl(assignee)"
            :img-alt="avatarUrlTitle(assignee)"
            :img-src="assignee.avatar"
            :tooltip-text="assigneeUrlTitle(assignee)"
            tooltip-placement="bottom"
          />
163 164 165 166 167 168 169 170
          <span
            class="avatar-counter has-tooltip"
            :title="assigneeCounterTooltip"
            v-if="shouldRenderCounter"
          >
           {{ assigneeCounterLabel }}
          </span>
        </div>
171
      </div>
172 173 174 175
      <div
        class="card-footer"
        v-if="showLabelFooter"
      >
176
        <button
177
          class="label color-label has-tooltip"
178 179 180 181 182 183 184 185 186
          v-for="label in issue.labels"
          type="button"
          v-if="showLabel(label)"
          @click="filterByLabel(label, $event)"
          :style="labelStyle(label)"
          :title="label.description"
          data-container="body">
          {{ label.title }}
        </button>
187
      </div>
188 189 190
    </div>
  `,
});