Issue boards card in JS

Moved the issue boards card template into the JS. This helps to improve
the code coverage & will eventually make it easier to move this to .vue
files

3 files changed, 71 insertions, 63 deletions

diff --git a/app/assets/javascripts/boards/components/board_card.js b/app/assets/javascripts/boards/components/board_card.js
new file mode 100644
index 00000000000..39fa183425a
--- /dev/null
+++ b/app/assets/javascripts/boards/components/board_card.js
@@ -0,0 +1,69 @@
+/* global Vue */
+require('./issue_card_inner');
+
+const Store = gl.issueBoards.BoardsStore;
+
+module.exports = {
+  name: 'BoardsIssueCard',
+  template: `
+    <li class="card"
+      :class="{ 'user-can-drag': !disabled && issue.id, 'is-disabled': disabled || !issue.id, 'is-active': issueDetailVisible }"
+      :index="index"
+      :data-issue-id="issue.id"
+      @mousedown="mouseDown"
+      @mousemove="mouseMove"
+      @mouseup="showIssue($event)">
+      <issue-card-inner
+        :list="list"
+        :issue="issue"
+        :issue-link-base="issueLinkBase"
+        :root-path="rootPath" />
+    </li>
+  `,
+  components: {
+    'issue-card-inner': gl.issueBoards.IssueCardInner,
+  },
+  props: {
+    list: Object,
+    issue: Object,
+    issueLinkBase: String,
+    disabled: Boolean,
+    index: Number,
+    rootPath: String,
+  },
+  data () {
+    return {
+      showDetail: false,
+      detailIssue: Store.detail
+    };
+  },
+  computed: {
+    issueDetailVisible () {
+      return this.detailIssue.issue && this.detailIssue.issue.id === this.issue.id;
+    }
+  },
+  methods: {
+    mouseDown () {
+      this.showDetail = true;
+    },
+    mouseMove() {
+      this.showDetail = false;
+    },
+    showIssue (e) {
+      const targetTagName = e.target.tagName.toLowerCase();
+
+      if (targetTagName === 'a' || targetTagName === 'button') return;
+
+      if (this.showDetail) {
+        this.showDetail = false;
+
+        if (Store.detail.issue && Store.detail.issue.id === this.issue.id) {
+          Store.detail.issue = {};
+        } else {
+          Store.detail.issue = this.issue;
+          Store.detail.list = this.list;
+        }
+      }
+    }
+  }
+};
diff --git a/app/assets/javascripts/boards/components/board_card.js.es6 b/app/assets/javascripts/boards/components/board_card.js.es6
deleted file mode 100644
index 0ea66bd027c..00000000000
--- a/app/assets/javascripts/boards/components/board_card.js.es6
+++ /dev/null
@@ -1,61 +0,0 @@
-/* eslint-disable comma-dangle, space-before-function-paren, dot-notation */
-/* global Vue */
-
-require('./issue_card_inner');
-
-(() => {
-  const Store = gl.issueBoards.BoardsStore;
-
-  window.gl = window.gl || {};
-  window.gl.issueBoards = window.gl.issueBoards || {};
-
-  gl.issueBoards.BoardCard = Vue.extend({
-    template: '#js-board-list-card',
-    components: {
-      'issue-card-inner': gl.issueBoards.IssueCardInner,
-    },
-    props: {
-      list: Object,
-      issue: Object,
-      issueLinkBase: String,
-      disabled: Boolean,
-      index: Number,
-      rootPath: String,
-    },
-    data () {
-      return {
-        showDetail: false,
-        detailIssue: Store.detail
-      };
-    },
-    computed: {
-      issueDetailVisible () {
-        return this.detailIssue.issue && this.detailIssue.issue.id === this.issue.id;
-      }
-    },
-    methods: {
-      mouseDown () {
-        this.showDetail = true;
-      },
-      mouseMove() {
-        this.showDetail = false;
-      },
-      showIssue (e) {
-        const targetTagName = e.target.tagName.toLowerCase();
-
-        if (targetTagName === 'a' || targetTagName === 'button') return;
-
-        if (this.showDetail) {
-          this.showDetail = false;
-
-          if (Store.detail.issue && Store.detail.issue.id === this.issue.id) {
-            Store.detail.issue = {};
-          } else {
-            Store.detail.issue = this.issue;
-            Store.detail.list = this.list;
-          }
-        }
-      }
-    }
-  });
-})();
diff --git a/app/assets/javascripts/boards/components/board_list.js.es6 b/app/assets/javascripts/boards/components/board_list.js.es6
index 60b0a30af3f..d92047cc0f8 100644
--- a/app/assets/javascripts/boards/components/board_list.js.es6
+++ b/app/assets/javascripts/boards/components/board_list.js.es6
@@ -2,7 +2,7 @@
 /* global Vue */
 /* global Sortable */
 
-require('./board_card');
+const boardCard = require('./board_card');
 require('./board_new_issue');
 
 (() => {
@@ -14,7 +14,7 @@ require('./board_new_issue');
   gl.issueBoards.BoardList = Vue.extend({
     template: '#js-board-list-template',
     components: {
-      'board-card': gl.issueBoards.BoardCard,
+      boardCard,
       'board-new-issue': gl.issueBoards.BoardNewIssue
     },
     props: {