From 4dc7087283ecc02ba7df230b82daaf8fab38409f Mon Sep 17 00:00:00 2001
From: Clement Ho <ClemMakesApps@gmail.com>
Date: Mon, 27 Mar 2017 18:16:31 -0500
Subject: [PATCH] [skip ci] issue board card redesign

---
 .../boards/components/board_card.js           | 13 +++-
 .../boards/components/issue_card_header.js    | 38 +++++++++++
 .../boards/components/issue_card_labels.js    | 67 +++++++++++++++++++
 3 files changed, 117 insertions(+), 1 deletion(-)
 create mode 100644 app/assets/javascripts/boards/components/issue_card_header.js
 create mode 100644 app/assets/javascripts/boards/components/issue_card_labels.js

diff --git a/app/assets/javascripts/boards/components/board_card.js b/app/assets/javascripts/boards/components/board_card.js
index 9320848bcca901..1d1bfc5de6a00d 100644
--- a/app/assets/javascripts/boards/components/board_card.js
+++ b/app/assets/javascripts/boards/components/board_card.js
@@ -1,3 +1,6 @@
+import IssueCardHeader from './issue_card_header';
+import IssueCardLabels from './issue_card_labels';
+
 require('./issue_card_inner');
 
 const Store = gl.issueBoards.BoardsStore;
@@ -12,7 +15,13 @@ export default {
       @mousedown="mouseDown"
       @mousemove="mouseMove"
       @mouseup="showIssue($event)">
-      <issue-card-inner
+      <issue-card-header
+        :list="list"
+        :issue="issue"
+        :issue-link-base="issueLinkBase"
+        :root-path="rootPath"
+        :update-filters="true" />
+      <issue-card-labels
         :list="list"
         :issue="issue"
         :issue-link-base="issueLinkBase"
@@ -22,6 +31,8 @@ export default {
   `,
   components: {
     'issue-card-inner': gl.issueBoards.IssueCardInner,
+    'issue-card-header': IssueCardHeader,
+    'issue-card-labels': IssueCardLabels,
   },
   props: {
     list: Object,
diff --git a/app/assets/javascripts/boards/components/issue_card_header.js b/app/assets/javascripts/boards/components/issue_card_header.js
new file mode 100644
index 00000000000000..0c9df5e0067302
--- /dev/null
+++ b/app/assets/javascripts/boards/components/issue_card_header.js
@@ -0,0 +1,38 @@
+export default {
+  name: 'IssueCardHeader',
+  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 },
+  },
+  template: `
+    <div style="display:flex">
+      <h4 class="card-title">
+        <a style="color: rgba(0,0,0,.85);"
+          :href="issueLinkBase + '/' + issue.id"
+          :title="issue.title">
+          {{ issue.title }}
+        </a>
+      </h4>
+      <span style="margin-left:5px;font-size: 12px;color: rgba(0,0,0,.55);"
+        v-if="issue.id">
+        #{{ issue.id }}
+      </span>
+      <a style="margin-left:auto;padding-left:10px;"
+        class="card-assignee has-tooltip"
+        :href="rootPath + issue.assignee.username"
+        :title="'Assigned to ' + issue.assignee.name"
+        v-if="issue.assignee"
+        data-container="body">
+        <img style="margin:0"
+          class="avatar avatar-inline s20"
+          :src="issue.assignee.avatar"
+          width="20"
+          height="20"
+          :alt="'Avatar for ' + issue.assignee.name" />
+      </a>
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/boards/components/issue_card_labels.js b/app/assets/javascripts/boards/components/issue_card_labels.js
new file mode 100644
index 00000000000000..9055963a1ef81b
--- /dev/null
+++ b/app/assets/javascripts/boards/components/issue_card_labels.js
@@ -0,0 +1,67 @@
+import eventHub from '../eventhub';
+
+const Store = gl.issueBoards.BoardsStore;
+
+window.gl = window.gl || {};
+window.gl.issueBoards = window.gl.issueBoards || {};
+
+export default {
+  name: 'IssueCardLabels',
+  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;
+
+      return !this.list.label || label.id !== this.list.label.id;
+    },
+    filterByLabel(label, e) {
+      if (!this.updateFilters) return;
+
+      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');
+
+      if (labelIndex === -1) {
+        filterPath.push(param);
+      } else {
+        filterPath.splice(labelIndex, 1);
+      }
+
+      gl.issueBoards.BoardsStore.filter.path = filterPath.join('&');
+
+      Store.updateFiltersUrl();
+
+      eventHub.$emit('updateTokens');
+    },
+    labelStyle(label) {
+      return {
+        backgroundColor: label.color,
+        color: label.textColor,
+      };
+    },
+  },
+  template: `
+    <div style="margin-top: 3px;display: flex;flex-wrap: wrap;">
+      <button
+        style="margin-top:5px;margin-right:6px;"
+        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>
+  `,
+};
-- 
GitLab