BigW Consortium Gitlab

issue_card_inner.js 4.87 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
    cardUrl() {
67
      return `${this.issueLinkBase}/${this.issue.iid}`;
68 69
    },
    issueId() {
70 71 72 73
      if (this.issue.iid) {
        return `#${this.issue.iid}`;
      }
      return false;
74 75 76 77 78 79
    },
    showLabelFooter() {
      return this.issue.labels.find(l => this.showLabel(l)) !== undefined;
    },
  },
  methods: {
80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101
    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}`;
    },
102
    showLabel(label) {
103
      if (!label.id) return false;
Regis Boudinot committed
104
      return true;
105 106 107
    },
    filterByLabel(label, e) {
      if (!this.updateFilters) return;
108

109 110 111 112 113
      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');
114

115 116 117 118 119
      if (labelIndex === -1) {
        filterPath.push(param);
      } else {
        filterPath.splice(labelIndex, 1);
      }
120

121
      gl.issueBoards.BoardsStore.filter.path = filterPath.join('&');
122

123
      Store.updateFiltersUrl();
124

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