Refactor of issue boards to work with Vue2

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();
     }
   });
 });

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);
-    }
   });
 })();

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();
 

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);

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();
+    },
   });
 })();

app/assets/javascripts/boards/components/new_list_dropdown.js.es6

 /* 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
+              }
+            });
+          }
         }
-      }
+      });
     });
-  });
-});
+  };
+})();

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,

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();
     },

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);
   }
 }
 

app/views/projects/boards/_show.html.haml

+- @no_container = true
+- @content_class = "issue-boards-content"
+- page_title "Boards"
+
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_tag('boards/boards_bundle.js')
+  = page_specific_javascript_tag('boards/test_utils/simulate_drag.js') if Rails.env.test?
+
+  %script#js-board-template{ type: "text/x-template" }= render "projects/boards/components/board"
+  %script#js-board-list-template{ type: "text/x-template" }= render "projects/boards/components/board_list"
+  %script#js-board-list-card{ type: "text/x-template" }= render "projects/boards/components/card"
+
+= render "projects/issues/head"
+
+= render 'shared/issuable/filter', type: :boards
+
+#board-app.boards-app{ "v-cloak" => true, data: board_data }
+  .boards-list{ ":class" => "{ 'is-compact': detailIssueVisible }" }
+    .boards-app-loading.text-center{ "v-if" => "loading" }
+      = icon("spinner spin")
+    %board{ "v-cloak" => true,
+      "v-for" => "list in state.lists",
+      "ref" => "board",
+      ":list" => "list",
+      ":disabled" => "disabled",
+      ":issue-link-base" => "issueLinkBase",
+      ":key" => "_uid" }
+  = render "projects/boards/components/sidebar"

app/views/projects/boards/components/_blank_state.html.haml

 %board-blank-state{ "inline-template" => true,
-  "v-if" => "list.id == 'blank'" }
+  "v-if" => 'list.id == "blank"' }
   .board-blank-state
     %p
       Add the following default lists to your Issue Board with one click:

app/views/projects/boards/components/_board.html.haml

-%board{ "inline-template" => true,
-  "v-cloak" => true,
-  "v-for" => "list in state.lists | orderBy 'position'",
-  "v-ref:board" => true,
-  ":list" => "list",
-  ":disabled" => "disabled",
-  ":issue-link-base" => "issueLinkBase",
-  "track-by" => "_uid" }
-  .board{ ":class" => "{ 'is-draggable': !list.preset }",
-    ":data-id" => "list.id" }
-    .board-inner
-      %header.board-header{ ":class" => "{ 'has-border': list.label }", ":style" => "{ borderTopColor: (list.label ? list.label.color : null) }" }
-        %h3.board-title.js-board-handle{ ":class" => "{ 'user-can-drag': (!disabled && !list.preset) }" }
-          %span.has-tooltip{ ":title" => "(list.label ? list.label.description : '')",
-            data: { container: "body", placement: "bottom" } }
-            {{ list.title }}
-          .board-issue-count-holder.pull-right.clearfix{ "v-if" => "list.type !== 'blank'" }
-            %span.board-issue-count.pull-left{ ":class" => "{ 'has-btn': list.type !== 'done' }" }
-              {{ list.issuesSize }}
-            - if can?(current_user, :admin_issue, @project)
-              %button.btn.btn-small.btn-default.pull-right.has-tooltip{ type: "button",
-                "@click" => "showNewIssueForm",
-                "v-if" => "list.type !== 'done'",
-                "aria-label" => "Add an issue",
-                "title" => "Add an issue",
-                data: { placement: "top", container: "body" } }
-                = icon("plus")
-          - if can?(current_user, :admin_list, @project)
-            %board-delete{ "inline-template" => true,
-              ":list" => "list",
-              "v-if" => "!list.preset && list.id" }
-              %button.board-delete.has-tooltip.pull-right{ type: "button", title: "Delete list", "aria-label" => "Delete list", data: { placement: "bottom" }, "@click.stop" => "deleteBoard" }
-                = icon("trash")
-      %board-list{ "inline-template" => true,
-        "v-if" => "list.type !== 'blank'",
-        ":list" => "list",
-        ":issues" => "list.issues",
-        ":loading" => "list.loading",
-        ":disabled" => "disabled",
-        ":show-issue-form.sync" => "showIssueForm",
-        ":issue-link-base" => "issueLinkBase" }
-        .board-list-loading.text-center{ "v-if" => "loading" }
-          = icon("spinner spin")
-        - if can? current_user, :create_issue, @project
-          %board-new-issue{ "inline-template" => true,
+.board{ ":class" => '{ "is-draggable": !list.preset }',
+  ":data-id" => "list.id" }
+  .board-inner
+    %header.board-header{ ":class" => '{ "has-border": list.label }', ":style" => "{ borderTopColor: (list.label ? list.label.color : null) }" }
+      %h3.board-title.js-board-handle{ ":class" => '{ "user-can-drag": (!disabled && !list.preset) }' }
+        %span.has-tooltip{ ":title" => '(list.label ? list.label.description : "")',
+          data: { container: "body", placement: "bottom" } }
+          {{ list.title }}
+        .board-issue-count-holder.pull-right.clearfix{ "v-if" => 'list.type !== "blank"' }
+          %span.board-issue-count.pull-left{ ":class" => '{ "has-btn": list.type !== "done" }' }
+            {{ list.issuesSize }}
+          - if can?(current_user, :admin_issue, @project)
+            %button.btn.btn-small.btn-default.pull-right.has-tooltip{ type: "button",
+              "@click" => "showNewIssueForm",
+              "v-if" => 'list.type !== "done"',
+              "aria-label" => "Add an issue",
+              "title" => "Add an issue",
+              data: { placement: "top", container: "body" } }
+              = icon("plus")
+        - if can?(current_user, :admin_list, @project)
+          %board-delete{ "inline-template" => true,
             ":list" => "list",
-            ":show-issue-form.sync" => "showIssueForm",
-            "v-show" => "list.type !== 'done' && showIssueForm" }
-            .card.board-new-issue-form
-              %form{ "@submit" => "submit($event)" }
-                .flash-container{ "v-if" => "error" }
-                  .flash-alert
-                    An error occured. Please try again.
-                %label.label-light{ ":for" => "list.id + '-title'" }
-                  Title
-                %input.form-control{ type: "text",
-                  "v-model" => "title",
-                  "v-el:input" => true,
-                  ":id" => "list.id + '-title'" }
-                .clearfix.prepend-top-10
-                  %button.btn.btn-success.pull-left{ type: "submit",
-                    ":disabled" => "title === ''",
-                    "v-el:submit-button" => true }
-                    Submit issue
-                  %button.btn.btn-default.pull-right{ type: "button",
-                    "@click" => "cancel" }
-                    Cancel
-        %ul.board-list{ "v-el:list" => true,
-          "v-show" => "!loading",
-          ":data-board" => "list.id",
-          ":class" => "{ 'is-smaller': showIssueForm }" }
-          = render "projects/boards/components/card"
-          %li.board-list-count.text-center{ "v-if" => "showCount" }
-            = icon("spinner spin", "v-show" => "list.loadingMore" )
-            %span{ "v-if" => "list.issues.length === list.issuesSize" }
-              Showing all issues
-            %span{ "v-else" => true }
-              Showing {{ list.issues.length }} of {{ list.issuesSize }} issues
-      - if can?(current_user, :admin_list, @project)
-        = render "projects/boards/components/blank_state"
+            "v-if" => "!list.preset && list.id" }
+            %button.board-delete.has-tooltip.pull-right{ type: "button", title: "Delete list", "aria-label" => "Delete list", data: { placement: "bottom" }, "@click.stop" => "deleteBoard" }
+              = icon("trash")
+    %board-list{ "v-if" => 'list.type !== "blank"',
+      ":list" => "list",
+      ":issues" => "list.issues",
+      ":loading" => "list.loading",
+      ":disabled" => "disabled",
+      ":issue-link-base" => "issueLinkBase",
+      "ref" => "board-list" }
+    - if can?(current_user, :admin_list, @project)
+      = render "projects/boards/components/blank_state"

app/views/projects/boards/components/_board_list.html.haml

+.board-list-component
+  .board-list-loading.text-center{ "v-if" => "loading" }
+    = icon("spinner spin")
+  - if can? current_user, :create_issue, @project
+    %board-new-issue{ "inline-template" => true,
+      ":list" => "list",
+      "v-if" => 'list.type !== "done" && showIssueForm' }
+      .card.board-new-issue-form
+        %form{ "@submit" => "submit($event)" }
+          .flash-container{ "v-if" => "error" }
+            .flash-alert
+              An error occured. Please try again.
+          %label.label-light{ ":for" => 'list.id + "-title"' }
+            Title
+          %input.form-control{ type: "text",
+            "v-model" => "title",
+            "ref" => "input",
+            ":id" => 'list.id + "-title"' }
+          .clearfix.prepend-top-10
+            %button.btn.btn-success.pull-left{ type: "submit",
+              ":disabled" => 'title === ""',
+              "ref" => "submit-button" }
+              Submit issue
+            %button.btn.btn-default.pull-right{ type: "button",
+              "@click" => "cancel" }
+              Cancel
+  %ul.board-list{ "ref" => "list",
+    "v-show" => "!loading",
+    ":data-board" => "list.id",
+    ":class" => '{ "is-smaller": showIssueForm }' }
+    %board-card{ "v-for" => "(issue, index) in orderedIssues",
+      "ref" => "issue",
+      ":index" => "index",
+      ":list" => "list",
+      ":issue" => "issue",
+      ":issue-link-base" => "issueLinkBase",
+      ":disabled" => "disabled",
+      "key" => "id" }
+    %li.board-list-count.text-center{ "v-if" => "showCount" }
+      = icon("spinner spin", "v-show" => "list.loadingMore" )
+      %span{ "v-if" => "list.issues.length === list.issuesSize" }
+        Showing all issues
+      %span{ "v-else" => true }
+        Showing {{ list.issues.length }} of {{ list.issuesSize }} issues

app/views/projects/boards/components/_card.html.haml

-%board-card{ "inline-template" => true,
-  "v-for" => "issue in issues | orderBy 'priority'",
-  "v-ref:issue" => true,
-  ":index" => "$index",
-  ":list" => "list",
-  ":issue" => "issue",
-  ":issue-link-base" => "issueLinkBase",
-  ":disabled" => "disabled",
-  "track-by" => "id" }
-  %li.card{ ":class" => "{ 'user-can-drag': !disabled && issue.id, 'is-disabled': disabled || !issue.id, 'is-active': issueDetailVisible }",
-    ":index" => "index",
-    "@mousedown" => "mouseDown",
-    "@mouseMove" => "mouseMove",
-    "@mouseup" => "showIssue($event)" }
-    %h4.card-title
-      = icon("eye-slash", class: "confidential-icon", "v-if" => "issue.confidential")
-      %a{ ":href" => "issueLinkBase + '/' + issue.id",
-        ":title" => "issue.title" }
-        {{ issue.title }}
-    .card-footer
-      %span.card-number{ "v-if" => "issue.id" }
-        = precede '#' do
-          {{ issue.id }}
-      %a.has-tooltip{ ":href" => "'#{root_path}' + issue.assignee.username",
-        ":title" => "'Assigned to ' + issue.assignee.name",
-        "v-if" => "issue.assignee",
-        data: { container: 'body' } }
-        %img.avatar.avatar-inline.s20{ ":src" => "issue.assignee.avatar", width: 20, height: 20 }
-      %button.label.color-label.has-tooltip{ "v-for" => "label in issue.labels",
-        type: "button",
-        "v-if" => "(!list.label || label.id !== list.label.id)",
-        "@click" => "filterByLabel(label, $event)",
-        ":style" => "{ backgroundColor: label.color, color: label.textColor }",
-        ":title" => "label.description",
-        data: { container: 'body' } }
-        {{ label.title }}
+%li.card{ ":class" => '{ "user-can-drag": !disabled && issue.id, "is-disabled": disabled || !issue.id, "is-active": issueDetailVisible }',
+  ":index" => "index",
+  "@mousedown" => "mouseDown",
+  "@mouseup" => "showIssue($event)" }
+  %h4.card-title
+    = icon("eye-slash", class: "confidential-icon", "v-if" => "issue.confidential")
+    %a{ ":href" => 'issueLinkBase + "/" + issue.id',
+      ":title" => "issue.title" }
+      {{ issue.title }}
+  .card-footer
+    %span.card-number{ "v-if" => "issue.id" }
+      = precede '#' do
+        {{ issue.id }}
+    %a.has-tooltip{ ":href" => "\"#{root_path}\" + issue.assignee.username",
+      ":title" => '"Assigned to " + issue.assignee.name',
+      "v-if" => "issue.assignee",
+      data: { container: 'body' } }
+      %img.avatar.avatar-inline.s20{ ":src" => "issue.assignee.avatar", width: 20, height: 20 }
+    %button.label.color-label.has-tooltip{ "v-for" => "label in issue.labels",
+      type: "button",
+      "v-if" => "(!list.label || label.id !== list.label.id)",
+      "@click" => "filterByLabel(label, $event)",
+      ":style" => "{ backgroundColor: label.color, color: label.textColor }",
+      ":title" => "label.description",
+      data: { container: 'body' } }
+      {{ label.title }}

app/views/projects/boards/index.html.haml

-- @no_container = true
-- @content_class = "issue-boards-content"
-- page_title "Boards"
-
-- content_for :page_specific_javascripts do
-  = page_specific_javascript_tag('boards/boards_bundle.js')
-  = page_specific_javascript_tag('boards/test_utils/simulate_drag.js') if Rails.env.test?
-
-= render "projects/issues/head"
-
-= render 'shared/issuable/filter', type: :boards
-
-#board-app.boards-app{ "v-cloak" => true, data: board_data }
-  .boards-list{ ":class" => "{ 'is-compact': detailIssueVisible }" }
-    .boards-app-loading.text-center{ "v-if" => "loading" }
-      = icon("spinner spin")
-    = render "projects/boards/components/board"
-  = render "projects/boards/components/sidebar"
+= render "show"

app/views/projects/boards/show.html.haml

-- @no_container = true
-- @content_class = "issue-boards-content"
-- page_title "Boards"
-
-- content_for :page_specific_javascripts do
-  = page_specific_javascript_tag('boards/boards_bundle.js')
-  = page_specific_javascript_tag('boards/test_utils/simulate_drag.js') if Rails.env.test?
-
-= render "projects/issues/head"
-
-= render 'shared/issuable/filter', type: :boards
-
-#board-app.boards-app{ "v-cloak" => true, data: board_data }
-  .boards-list{ ":class" => "{ 'is-compact': detailIssueVisible }" }
-    .boards-app-loading.text-center{ "v-if" => "loading" }
-      = icon("spinner spin")
-    = render "projects/boards/components/board"
-  = render "projects/boards/components/sidebar"
+= render "show"