diff options
author | Phil Hughes <me@iamphill.com> | 2017-02-23 15:27:01 +0000 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-02-23 15:27:01 +0000 |
commit | 7512af29fc5fd94da2ac74a3188eb76b9a366c2a (patch) | |
tree | f70b63c02f0e9805f6880614508d64eea4c9f095 /app/assets | |
parent | 8cc61d0b2a3507609665c3c5d3e8a475772c6b87 (diff) | |
download | gitlab-ce-7512af29fc5fd94da2ac74a3188eb76b9a366c2a.tar.gz |
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
Diffstat (limited to 'app/assets')
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: { |