issue_card_inner.js 5.13 KB
Newer Older
1
import $ from 'jquery';
2
import Vue from 'vue';
3 4
import IssueCardWeight from 'ee/boards/components/issue_card_weight.vue';
import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
5 6
import eventHub from '../eventhub';

7
const Store = gl.issueBoards.BoardsStore;
Phil Hughes's avatar
Phil Hughes committed
8

9 10
window.gl = window.gl || {};
window.gl.issueBoards = window.gl.issueBoards || {};
Phil Hughes's avatar
Phil Hughes committed
11

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

      return `+${this.numberOverLimit}`;
66
    },
67 68 69 70 71 72
    shouldRenderCounter() {
      if (this.issue.assignees.length <= this.maxRender) {
        return false;
      }

      return this.issue.assignees.length > this.numberOverLimit;
73 74
    },
    issueId() {
75 76 77 78
      if (this.issue.iid) {
        return `#${this.issue.iid}`;
      }
      return false;
79 80 81 82 83 84
    },
    showLabelFooter() {
      return this.issue.labels.find(l => this.showLabel(l)) !== undefined;
    },
  },
  methods: {
85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106
    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}`;
    },
107
    showLabel(label) {
108
      if (!label.id) return false;
Regis Boudinot's avatar
Regis Boudinot committed
109
      return true;
110 111 112
    },
    filterByLabel(label, e) {
      if (!this.updateFilters) return;
113

114 115 116 117 118
      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');
Phil Hughes's avatar
Phil Hughes committed
119

120 121 122 123 124
      if (labelIndex === -1) {
        filterPath.push(param);
      } else {
        filterPath.splice(labelIndex, 1);
      }
Phil Hughes's avatar
Phil Hughes committed
125

126
      gl.issueBoards.BoardsStore.filter.path = filterPath.join('&');
Phil Hughes's avatar
Phil Hughes committed
127

128
      Store.updateFiltersUrl();
129

130 131 132 133 134 135 136
      eventHub.$emit('updateTokens');
    },
    labelStyle(label) {
      return {
        backgroundColor: label.color,
        color: label.textColor,
      };
Phil Hughes's avatar
Phil Hughes committed
137
    },
138 139 140
  },
  template: `
    <div>
Clement Ho's avatar
Clement Ho committed
141 142
      <div class="board-card-header">
        <h4 class="board-card-title">
143 144 145 146 147
          <i
            class="fa fa-eye-slash confidential-icon"
            v-if="issue.confidential"
            aria-hidden="true"
          />
Phil Hughes's avatar
Phil Hughes committed
148
          <a
149
            class="js-no-trigger"
150
            :href="issue.path"
151 152
            :title="issue.title">{{ issue.title }}</a>
          <span
Clement Ho's avatar
Clement Ho committed
153
            class="board-card-number"
154
            v-if="issueId"
155
          >
156
            {{ issue.referencePath }}
157
          </span>
Clement Ho's avatar
Clement Ho committed
158 159
          <issue-card-weight
            v-if="issue.weight"
160
            :weight="issue.weight" />
161
        </h4>
Clement Ho's avatar
Clement Ho committed
162
        <div class="board-card-assignee">
163
          <user-avatar-link
164
            v-for="(assignee, index) in issue.assignees"
Phil Hughes's avatar
Phil Hughes committed
165
            :key="assignee.id"
166
            v-if="shouldRenderAssignee(index)"
167 168 169 170 171 172 173
            class="js-no-trigger"
            :link-href="assigneeUrl(assignee)"
            :img-alt="avatarUrlTitle(assignee)"
            :img-src="assignee.avatar"
            :tooltip-text="assigneeUrlTitle(assignee)"
            tooltip-placement="bottom"
          />
174 175 176 177 178 179 180 181
          <span
            class="avatar-counter has-tooltip"
            :title="assigneeCounterTooltip"
            v-if="shouldRenderCounter"
          >
           {{ assigneeCounterLabel }}
          </span>
        </div>
182
      </div>
183
      <div
Clement Ho's avatar
Clement Ho committed
184
        class="board-card-footer"
185 186
        v-if="showLabelFooter"
      >
187
        <button
Clement Ho's avatar
Clement Ho committed
188
          class="badge color-label has-tooltip"
189 190 191 192 193 194 195 196 197
          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>
Phil Hughes's avatar
Phil Hughes committed
198
      </div>
199 200 201
    </div>
  `,
});