1 files changed, 170 insertions, 94 deletions

diff --git a/app/assets/javascripts/boards/components/issue_card_inner.js b/app/assets/javascripts/boards/components/issue_card_inner.js
index a4629b092bf..4699ef5a51c 100644
--- a/app/assets/javascripts/boards/components/issue_card_inner.js
+++ b/app/assets/javascripts/boards/components/issue_card_inner.js
@@ -1,114 +1,190 @@
 import Vue from 'vue';
+import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
 import eventHub from '../eventhub';
 
-(() => {
-  const Store = gl.issueBoards.BoardsStore;
+const Store = gl.issueBoards.BoardsStore;
 
-  window.gl = window.gl || {};
-  window.gl.issueBoards = window.gl.issueBoards || {};
+window.gl = window.gl || {};
+window.gl.issueBoards = window.gl.issueBoards || {};
 
-  gl.issueBoards.IssueCardInner = Vue.extend({
-    props: {
-      issue: {
-        type: Object,
-        required: true,
-      },
-      issueLinkBase: {
-        type: String,
-        required: true,
-      },
-      list: {
-        type: Object,
-        required: false,
-      },
-      rootPath: {
-        type: String,
-        required: true,
-      },
-      updateFilters: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-    },
-    methods: {
-      showLabel(label) {
-        if (!this.list) return true;
+gl.issueBoards.IssueCardInner = Vue.extend({
+  props: {
+    issue: {
+      type: Object,
+      required: true,
+    },
+    issueLinkBase: {
+      type: String,
+      required: true,
+    },
+    list: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    rootPath: {
+      type: String,
+      required: true,
+    },
+    updateFilters: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      limitBeforeCounter: 3,
+      maxRender: 4,
+      maxCounter: 99,
+    };
+  },
+  components: {
+    userAvatarLink,
+  },
+  computed: {
+    numberOverLimit() {
+      return this.issue.assignees.length - this.limitBeforeCounter;
+    },
+    assigneeCounterTooltip() {
+      return `${this.assigneeCounterLabel} more`;
+    },
+    assigneeCounterLabel() {
+      if (this.numberOverLimit > this.maxCounter) {
+        return `${this.maxCounter}+`;
+      }
 
-        return !this.list.label || label.id !== this.list.label.id;
-      },
-      filterByLabel(label, e) {
-        if (!this.updateFilters) return;
+      return `+${this.numberOverLimit}`;
+    },
+    shouldRenderCounter() {
+      if (this.issue.assignees.length <= this.maxRender) {
+        return false;
+      }
 
-        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');
+      return this.issue.assignees.length > this.numberOverLimit;
+    },
+    cardUrl() {
+      return `${this.issueLinkBase}/${this.issue.id}`;
+    },
+    issueId() {
+      return `#${this.issue.id}`;
+    },
+    showLabelFooter() {
+      return this.issue.labels.find(l => this.showLabel(l)) !== undefined;
+    },
+  },
+  methods: {
+    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;
+      }
 
-        if (labelIndex === -1) {
-          filterPath.push(param);
-        } else {
-          filterPath.splice(labelIndex, 1);
-        }
+      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}`;
+    },
+    showLabel(label) {
+      if (!this.list) return true;
+
+      return !this.list.label || label.id !== this.list.label.id;
+    },
+    filterByLabel(label, e) {
+      if (!this.updateFilters) return;
 
-        gl.issueBoards.BoardsStore.filter.path = filterPath.join('&');
+      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');
 
-        Store.updateFiltersUrl();
+      if (labelIndex === -1) {
+        filterPath.push(param);
+      } else {
+        filterPath.splice(labelIndex, 1);
+      }
 
-        eventHub.$emit('updateTokens');
-      },
-      labelStyle(label) {
-        return {
-          backgroundColor: label.color,
-          color: label.textColor,
-        };
-      },
-    },
-    template: `
-      <div>
+      gl.issueBoards.BoardsStore.filter.path = filterPath.join('&');
+
+      Store.updateFiltersUrl();
+
+      eventHub.$emit('updateTokens');
+    },
+    labelStyle(label) {
+      return {
+        backgroundColor: label.color,
+        color: label.textColor,
+      };
+    },
+  },
+  template: `
+    <div>
+      <div class="card-header">
         <h4 class="card-title">
           <i
             class="fa fa-eye-slash confidential-icon"
-            v-if="issue.confidential"></i>
+            v-if="issue.confidential"
+            aria-hidden="true"
+          />
           <a
-            :href="issueLinkBase + '/' + issue.id"
-            :title="issue.title">
-            {{ issue.title }}
-          </a>
-        </h4>
-        <div class="card-footer">
+            class="js-no-trigger"
+            :href="cardUrl"
+            :title="issue.title">{{ issue.title }}</a>
           <span
             class="card-number"
-            v-if="issue.id">
-            #{{ issue.id }}
+            v-if="issue.id"
+          >
+            {{ issueId }}
+          </span>
+        </h4>
+        <div class="card-assignee">
+          <user-avatar-link
+            v-for="(assignee, index) in issue.assignees"
+            v-if="shouldRenderAssignee(index)"
+            class="js-no-trigger"
+            :link-href="assigneeUrl(assignee)"
+            :img-alt="avatarUrlTitle(assignee)"
+            :img-src="assignee.avatar"
+            :tooltip-text="assigneeUrlTitle(assignee)"
+            tooltip-placement="bottom"
+          />
+          <span
+            class="avatar-counter has-tooltip"
+            :title="assigneeCounterTooltip"
+            v-if="shouldRenderCounter"
+          >
+           {{ assigneeCounterLabel }}
           </span>
-          <a
-            class="card-assignee has-tooltip js-no-trigger"
-            :href="rootPath + issue.assignee.username"
-            :title="'Assigned to ' + issue.assignee.name"
-            v-if="issue.assignee"
-            data-container="body">
-            <img
-              class="avatar avatar-inline s20 js-no-trigger"
-              :src="issue.assignee.avatar"
-              width="20"
-              height="20"
-              :alt="'Avatar for ' + issue.assignee.name" />
-          </a>
-          <button
-            class="label color-label has-tooltip js-no-trigger"
-            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>
         </div>
       </div>
-    `,
-  });
-})();
+      <div
+        class="card-footer"
+        v-if="showLabelFooter"
+      >
+        <button
+          class="label color-label has-tooltip"
+          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>
+      </div>
+    </div>
+  `,
+});