1 files changed, 103 insertions, 85 deletions

diff --git a/app/assets/javascripts/boards/components/issue_card_inner.js b/app/assets/javascripts/boards/components/issue_card_inner.js
index f01d0c2219a..e0feb72a532 100644
--- a/app/assets/javascripts/boards/components/issue_card_inner.js
+++ b/app/assets/javascripts/boards/components/issue_card_inner.js
@@ -35,29 +35,48 @@ import eventHub from '../eventhub';
         default: () => ({}),
       },
     },
-    computed: {
-      cardUrl() {
-        return `${this.issueLinkBase}/${this.issue.id}`;
-      },
-      assigneeUrl() {
-        return `${this.rootPath}${this.issue.assignee.username}`;
-      },
-      assigneeUrlTitle() {
-        return `Assigned to ${this.issue.assignee.name}`;
-      },
-      avatarUrlTitle() {
-        return `Avatar for ${this.issue.assignee.name}`;
-      },
-      issueId() {
-        return `#${this.issue.id}`;
-      },
-      showLabelFooter() {
-        return this.issue.labels.find(l => this.showLabel(l)) !== undefined;
-      },
+    issueLinkBase: {
+      type: String,
+      required: true,
+    },
+    list: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    rootPath: {
+      type: String,
+      required: true,
+    },
+    updateFilters: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    cardUrl() {
+      return `${this.issueLinkBase}/${this.issue.id}`;
     },
-    methods: {
-      showLabel(label) {
-        if (!this.list) return true;
+    assigneeUrl() {
+      return `${this.rootPath}${this.issue.assignee.username}`;
+    },
+    assigneeUrlTitle() {
+      return `Assigned to ${this.issue.assignee.name}`;
+    },
+    avatarUrlTitle() {
+      return `Avatar for ${this.issue.assignee.name}`;
+    },
+    issueId() {
+      return `#${this.issue.id}`;
+    },
+    showLabelFooter() {
+      return this.issue.labels.find(l => this.showLabel(l)) !== undefined;
+    },
+  },
+  methods: {
+    showLabel(label) {
+      if (!this.list) return true;
 
         return !this.list.label || label.id !== this.list.label.id;
       },
@@ -70,75 +89,74 @@ import eventHub from '../eventhub';
         const labelIndex = filterPath.indexOf(param);
         $(e.currentTarget).tooltip('hide');
 
-        if (labelIndex === -1) {
-          filterPath.push(param);
-        } else {
-          filterPath.splice(labelIndex, 1);
-        }
+      if (labelIndex === -1) {
+        filterPath.push(param);
+      } else {
+        filterPath.splice(labelIndex, 1);
+      }
 
         this.store.filter.path = filterPath.join('&');
 
         this.store.updateFiltersUrl();
 
-        eventHub.$emit('updateTokens');
-      },
-      labelStyle(label) {
-        return {
-          backgroundColor: label.color,
-          color: label.textColor,
-        };
-      },
+      eventHub.$emit('updateTokens');
     },
-    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"
-            />
-            <a
-              class="js-no-trigger"
-              :href="cardUrl"
-              :title="issue.title">{{ issue.title }}</a>
-            <span
-              class="card-number"
-              v-if="issue.id"
-            >
-              {{ issueId }}
-            </span>
-          </h4>
+    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"
+            aria-hidden="true"
+          />
           <a
-            class="card-assignee has-tooltip js-no-trigger"
-            :href="assigneeUrl"
-            :title="assigneeUrlTitle"
-            v-if="issue.assignee"
-            data-container="body"
+            class="js-no-trigger"
+            :href="cardUrl"
+            :title="issue.title">{{ issue.title }}</a>
+          <span
+            class="card-number"
+            v-if="issue.id"
           >
-            <img
-              class="avatar avatar-inline s20 js-no-trigger"
-              :src="issue.assignee.avatar"
-              width="20"
-              height="20"
-              :alt="avatarUrlTitle"
-            />
-          </a>
-        </div>
-        <div class="card-footer" v-if="showLabelFooter">
-          <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>
+            {{ 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"
+          />
+        </a>
+      </div>
+      <div class="card-footer" v-if="showLabelFooter">
+        <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>
+  `,
+});
\ No newline at end of file