Refactor of issue boards to work with Vue2

5 files changed, 76 insertions, 77 deletions

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 = $('<li />'),
-              $a = $('<a />', {
-                class: (active ? `is-active js-board-list-${active.id}` : ''),
-                text: label.title,
-                href: '#'
-              }),
-              $labelColor = $('<span />', {
-                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 = $('<li />'),
+                $a = $('<a />', {
+                  class: (active ? `is-active js-board-list-${active.id}` : ''),
+                  text: label.title,
+                  href: '#'
+                }),
+                $labelColor = $('<span />', {
+                  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
+              }
+            });
+          }
         }
-      }
+      });
     });
-  });
-});
+  };
+})();