From 1505fc3ac5a596966773abd886fb98c096322803 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Fri, 4 Nov 2016 10:24:59 +0000 Subject: Refactor of issue boards to work with Vue2 --- app/assets/javascripts/boards/boards_bundle.js.es6 | 8 +- .../javascripts/boards/components/board.js.es6 | 14 +--- .../boards/components/board_card.js.es6 | 6 +- .../boards/components/board_list.js.es6 | 22 +++-- .../boards/components/board_new_issue.js.es6 | 14 ++-- .../boards/components/new_list_dropdown.js.es6 | 97 ++++++++++++---------- .../boards/mixins/sortable_default_options.js.es6 | 2 +- .../javascripts/boards/stores/boards_store.js.es6 | 2 + app/assets/stylesheets/pages/boards.scss | 8 +- 9 files changed, 91 insertions(+), 82 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/boards/boards_bundle.js.es6 b/app/assets/javascripts/boards/boards_bundle.js.es6 index 0d26ebcb785..8ca7e13bb50 100644 --- a/app/assets/javascripts/boards/boards_bundle.js.es6 +++ b/app/assets/javascripts/boards/boards_bundle.js.es6 @@ -22,6 +22,8 @@ $(() => { gl.IssueBoardsApp.$destroy(true); } + Store.create(); + gl.IssueBoardsApp = new Vue({ el: $boardApp, components: { @@ -37,11 +39,10 @@ $(() => { issueLinkBase: $boardApp.dataset.issueLinkBase, detailIssue: Store.detail }, - beforeCreate: Store.create.bind(Store), computed: { detailIssueVisible () { return Object.keys(this.detailIssue.issue).length; - } + }, }, created () { gl.boardService = new BoardService(this.endpoint, this.boardId); @@ -70,6 +71,9 @@ $(() => { el: '#js-boards-seach', data: { filters: Store.state.filters + }, + mounted () { + gl.issueBoards.newListDropdownInit(); } }); }); diff --git a/app/assets/javascripts/boards/components/board.js.es6 b/app/assets/javascripts/boards/components/board.js.es6 index e70bf4e5851..31de3b25284 100644 --- a/app/assets/javascripts/boards/components/board.js.es6 +++ b/app/assets/javascripts/boards/components/board.js.es6 @@ -10,6 +10,7 @@ window.gl.issueBoards = window.gl.issueBoards || {}; gl.issueBoards.Board = Vue.extend({ + template: '#js-board-template', components: { 'board-list': gl.issueBoards.BoardList, 'board-delete': gl.issueBoards.BoardDelete, @@ -24,7 +25,6 @@ return { detailIssue: Store.detail, filters: Store.state.filters, - showIssueForm: false }; }, watch: { @@ -58,7 +58,7 @@ }, methods: { showNewIssueForm() { - this.showIssueForm = !this.showIssueForm; + this.$refs['board-list'].showIssueForm = !this.$refs['board-list'].showIssueForm; } }, mounted () { @@ -72,13 +72,9 @@ if (e.newIndex !== undefined && e.oldIndex !== e.newIndex) { const order = this.sortable.toArray(), - $board = this.$parent.$refs.board[e.oldIndex + 1], - list = $board.list; - - $board.$destroy(true); + list = Store.findList('id', parseInt(e.item.dataset.id)); this.$nextTick(() => { - Store.state.lists.splice(e.newIndex, 0, list); Store.moveList(list, order); }); } @@ -87,9 +83,5 @@ this.sortable = Sortable.create(this.$el.parentNode, options); }, - beforeDestroy () { - const index = Store.state.lists.indexOf(this.list); - Store.state.lists.splice(index, 1); - } }); })(); diff --git a/app/assets/javascripts/boards/components/board_card.js.es6 b/app/assets/javascripts/boards/components/board_card.js.es6 index 2f6c03e3538..b1afbe7d97e 100644 --- a/app/assets/javascripts/boards/components/board_card.js.es6 +++ b/app/assets/javascripts/boards/components/board_card.js.es6 @@ -6,6 +6,7 @@ window.gl.issueBoards = window.gl.issueBoards || {}; gl.issueBoards.BoardCard = Vue.extend({ + template: '#js-board-list-card', props: { list: Object, issue: Object, @@ -53,11 +54,6 @@ mouseDown () { this.showDetail = true; }, - mouseMove () { - if (this.showDetail) { - this.showDetail = false; - } - }, showIssue (e) { const targetTagName = e.target.tagName.toLowerCase(); diff --git a/app/assets/javascripts/boards/components/board_list.js.es6 b/app/assets/javascripts/boards/components/board_list.js.es6 index 2ff986dc07b..379f4f0d72b 100644 --- a/app/assets/javascripts/boards/components/board_list.js.es6 +++ b/app/assets/javascripts/boards/components/board_list.js.es6 @@ -9,6 +9,7 @@ window.gl.issueBoards = window.gl.issueBoards || {}; gl.issueBoards.BoardList = Vue.extend({ + template: '#js-board-list-template', components: { 'board-card': gl.issueBoards.BoardCard, 'board-new-issue': gl.issueBoards.BoardNewIssue @@ -19,13 +20,13 @@ issues: Array, loading: Boolean, issueLinkBase: String, - showIssueForm: Boolean }, data () { return { scrollOffset: 250, filters: Store.state.filters, - showCount: false + showCount: false, + showIssueForm: false }; }, watch: { @@ -51,6 +52,11 @@ }); } }, + computed: { + orderedIssues () { + return _.sortBy(this.issues, 'priority'); + }, + }, methods: { listHeight () { return this.$refs.list.getBoundingClientRect().height; @@ -81,17 +87,21 @@ onStart: (e) => { const card = this.$refs.issue[e.oldIndex]; + card.showDetail = false; Store.moving.issue = card.issue; Store.moving.list = card.list; gl.issueBoards.onStart(); }, onAdd: (e) => { - gl.issueBoards.BoardsStore.moveIssueToList(Store.moving.list, this.list, Store.moving.issue); + // Add the element back to original list to allow Vue to handle DOM updates + e.from.appendChild(e.item); + + this.$nextTick(() => { + // Update the issues once we know the element has been moved + gl.issueBoards.BoardsStore.moveIssueToList(Store.moving.list, this.list, Store.moving.issue); + }); }, - onRemove: (e) => { - this.$refs.issue[e.oldIndex].$destroy(true); - } }); this.sortable = Sortable.create(this.$refs.list, options); diff --git a/app/assets/javascripts/boards/components/board_new_issue.js.es6 b/app/assets/javascripts/boards/components/board_new_issue.js.es6 index a5f0938019a..a7989a2ff4c 100644 --- a/app/assets/javascripts/boards/components/board_new_issue.js.es6 +++ b/app/assets/javascripts/boards/components/board_new_issue.js.es6 @@ -7,7 +7,6 @@ gl.issueBoards.BoardNewIssue = Vue.extend({ props: { list: Object, - showIssueForm: Boolean }, data() { return { @@ -15,11 +14,6 @@ error: false }; }, - watch: { - showIssueForm () { - this.$refs.input.focus(); - } - }, methods: { submit(e) { e.preventDefault(); @@ -50,15 +44,17 @@ // Show error message this.error = true; - this.showIssueForm = true; }); this.cancel(); }, cancel() { - this.showIssueForm = false; this.title = ''; + this.$parent.showIssueForm = false; } - } + }, + mounted() { + this.$refs.input.focus(); + }, }); })(); diff --git a/app/assets/javascripts/boards/components/new_list_dropdown.js.es6 b/app/assets/javascripts/boards/components/new_list_dropdown.js.es6 index 14f618fd5d5..9f71b9abdab 100644 --- a/app/assets/javascripts/boards/components/new_list_dropdown.js.es6 +++ b/app/assets/javascripts/boards/components/new_list_dropdown.js.es6 @@ -1,5 +1,8 @@ /* eslint-disable */ -$(() => { +(() => { + window.gl = window.gl || {}; + window.gl.issueBoards = window.gl.issueBoards || {}; + const Store = gl.issueBoards.BoardsStore; $(document).off('created.label').on('created.label', (e, label) => { @@ -15,54 +18,56 @@ $(() => { }); }); - $('.js-new-board-list').each(function () { - const $this = $(this); - new gl.CreateLabelDropdown($this.closest('.dropdown').find('.dropdown-new-label'), $this.data('namespace-path'), $this.data('project-path')); + gl.issueBoards.newListDropdownInit = () => { + $('.js-new-board-list').each(function () { + const $this = $(this); + new gl.CreateLabelDropdown($this.closest('.dropdown').find('.dropdown-new-label'), $this.data('namespace-path'), $this.data('project-path')); - $this.glDropdown({ - data(term, callback) { - $.get($this.attr('data-labels')) - .then((resp) => { - callback(resp); - }); - }, - renderRow (label) { - const active = Store.findList('title', label.title), - $li = $('
  • '), - $a = $('', { - class: (active ? `is-active js-board-list-${active.id}` : ''), - text: label.title, - href: '#' - }), - $labelColor = $('', { - class: 'dropdown-label-box', - style: `background-color: ${label.color}` - }); + $this.glDropdown({ + data(term, callback) { + $.get($this.attr('data-labels')) + .then((resp) => { + callback(resp); + }); + }, + renderRow (label) { + const active = Store.findList('title', label.title), + $li = $('
  • '), + $a = $('', { + class: (active ? `is-active js-board-list-${active.id}` : ''), + text: label.title, + href: '#' + }), + $labelColor = $('', { + class: 'dropdown-label-box', + style: `background-color: ${label.color}` + }); - return $li.append($a.prepend($labelColor)); - }, - search: { - fields: ['title'] - }, - filterable: true, - selectable: true, - multiSelect: true, - clicked (label, $el, e) { - e.preventDefault(); + return $li.append($a.prepend($labelColor)); + }, + search: { + fields: ['title'] + }, + filterable: true, + selectable: true, + multiSelect: true, + clicked (label, $el, e) { + e.preventDefault(); - if (!Store.findList('title', label.title)) { - Store.new({ - title: label.title, - position: Store.state.lists.length - 2, - list_type: 'label', - label: { - id: label.id, + if (!Store.findList('title', label.title)) { + Store.new({ title: label.title, - color: label.color - } - }); + position: Store.state.lists.length - 2, + list_type: 'label', + label: { + id: label.id, + title: label.title, + color: label.color + } + }); + } } - } + }); }); - }); -}); + }; +})(); diff --git a/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6 b/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6 index db9a5a8e40a..5f99de39122 100644 --- a/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6 +++ b/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6 @@ -23,7 +23,7 @@ fallbackOnBody: true, ghostClass: 'is-ghost', filter: '.board-delete, .btn', - delay: gl.issueBoards.touchEnabled ? 100 : 50, + delay: gl.issueBoards.touchEnabled ? 100 : 0, scrollSensitivity: gl.issueBoards.touchEnabled ? 60 : 100, scrollSpeed: 20, onStart: gl.issueBoards.onStart, diff --git a/app/assets/javascripts/boards/stores/boards_store.js.es6 b/app/assets/javascripts/boards/stores/boards_store.js.es6 index 175e034afed..1d5071657b7 100644 --- a/app/assets/javascripts/boards/stores/boards_store.js.es6 +++ b/app/assets/javascripts/boards/stores/boards_store.js.es6 @@ -39,6 +39,8 @@ // Remove any new issues from the backlog // as they will be visible in the new list list.issues.forEach(backlogList.removeIssue.bind(backlogList)); + + this.state.lists = _.sortBy(this.state.lists, 'position'); }); this.removeBlankState(); }, diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index 47a7e84b5c6..4f5753f6fc6 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/app/assets/stylesheets/pages/boards.scss @@ -166,8 +166,12 @@ } } -.board-list { +.board-list-component { height: calc(100% - 49px); +} + +.board-list { + height: 100%; margin-bottom: 0; padding: 5px; list-style: none; @@ -175,7 +179,7 @@ overflow-x: hidden; &.is-smaller { - height: calc(100% - 185px); + height: calc(100% - 136px); } } -- cgit v1.2.1