1 files changed, 78 insertions, 27 deletions
diff --git a/app/assets/javascripts/boards/components/issue_card_inner.js b/app/assets/javascripts/boards/components/issue_card_inner.js
index fc154ee7b8b..d3de1830895 100644
--- a/app/assets/javascripts/boards/components/issue_card_inner.js
+++ b/app/assets/javascripts/boards/components/issue_card_inner.js
@@ -1,4 +1,5 @@
 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;
@@ -31,18 +32,39 @@ gl.issueBoards.IssueCardInner = Vue.extend({
       default: false,
     },
   },
+  data() {
+    return {
+      limitBeforeCounter: 3,
+      maxRender: 4,
+      maxCounter: 99,
+    };
+  },
+  components: {
+    userAvatarLink,
+  },
   computed: {
-    cardUrl() {
-      return `${this.issueLinkBase}/${this.issue.id}`;
+    numberOverLimit() {
+      return this.issue.assignees.length - this.limitBeforeCounter;
+    },
+    assigneeCounterTooltip() {
+      return `${this.assigneeCounterLabel} more`;
     },
-    assigneeUrl() {
-      return `${this.rootPath}${this.issue.assignee.username}`;
+    assigneeCounterLabel() {
+      if (this.numberOverLimit > this.maxCounter) {
+        return `${this.maxCounter}+`;
+      }
+
+      return `+${this.numberOverLimit}`;
     },
-    assigneeUrlTitle() {
-      return `Assigned to ${this.issue.assignee.name}`;
+    shouldRenderCounter() {
+      if (this.issue.assignees.length <= this.maxRender) {
+        return false;
+      }
+
+      return this.issue.assignees.length > this.numberOverLimit;
     },
-    avatarUrlTitle() {
-      return `Avatar for ${this.issue.assignee.name}`;
+    cardUrl() {
+      return `${this.issueLinkBase}/${this.issue.id}`;
     },
     issueId() {
       return `#${this.issue.id}`;
@@ -52,10 +74,31 @@ gl.issueBoards.IssueCardInner = Vue.extend({
     },
   },
   methods: {
-    showLabel(label) {
-      if (!this.list) return true;
+    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 !this.list.label || label.id !== this.list.label.id;
+      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 || !label) return true;
+      return true;
     },
     filterByLabel(label, e) {
       if (!this.updateFilters) return;
@@ -105,25 +148,33 @@ gl.issueBoards.IssueCardInner = Vue.extend({
             {{ issueId }}
           </span>
         </h4>
-        <a
-          class="card-assignee has-tooltip js-no-trigger"
-          :href="assigneeUrl"
-          :title="assigneeUrlTitle"
-          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="avatarUrlTitle"
+        <div class="card-assignee">
+          <user-avatar-link
+            v-for="(assignee, index) in issue.assignees"
+            :key="assignee.id"
+            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"
           />
-        </a>
+          <span
+            class="avatar-counter has-tooltip"
+            :title="assigneeCounterTooltip"
+            v-if="shouldRenderCounter"
+          >
+           {{ assigneeCounterLabel }}
+          </span>
+        </div>
       </div>
-      <div class="card-footer" v-if="showLabelFooter">
+      <div
+        class="card-footer"
+        v-if="showLabelFooter"
+      >
         <button
-          class="label color-label has-tooltip js-no-trigger"
+          class="label color-label has-tooltip"
           v-for="label in issue.labels"
           type="button"
           v-if="showLabel(label)"