Fixed Vue2 errors with multiple issue boards

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

@@ -2,29 +2,27 @@
   window.gl = window.gl || {};
   window.gl.issueBoards = window.gl.issueBoards || {};
 
+  const Store = gl.issueBoards.BoardsStore;
+
   gl.issueBoards.BoardSelectorForm = Vue.extend({
-    props: {
-      type: String,
-      currentBoard: Object,
-      currentPage: String,
-      reload: Boolean,
-    },
     data() {
       return {
         board: {
           id: false,
           name: '',
         },
+        currentBoard: Store.state.currentBoard,
+        currentPage: Store.state.currentPage,
       };
     },
-    ready() {
-      if (this.currentBoard && Object.keys(this.currentBoard).length) {
+    mounted() {
+      if (this.currentBoard && Object.keys(this.currentBoard).length && this.currentPage === 'edit') {
         this.board = Vue.util.extend({}, this.currentBoard);
       }
     },
     computed: {
       buttonText() {
-        if (this.type === 'new') {
+        if (this.currentPage === 'new') {
           return 'Create';
         }
 
@@ -35,16 +33,16 @@
       submit() {
         gl.boardService.createBoard(this.board)
           .then(() => {
-            if (this.currentBoard) {
+            if (this.currentBoard && this.currentPage === 'edit') {
               this.currentBoard.name = this.board.name;
             }
 
             // Enable the button thanks to our jQuery disabling it
-            $(this.$els.submitBtn).enable();
+            $(this.$refs.submitBtn).enable();
 
             // Reset the selectors current page
-            this.currentPage = '';
-            this.reload = true;
+            Store.state.currentPage = '';
+            Store.state.reload = true;
           });
       },
     },

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

@@ -4,6 +4,10 @@
   window.gl = window.gl || {};
   window.gl.issueBoards = window.gl.issueBoards || {};
 
+  const Store = gl.issueBoards.BoardsStore;
+
+  Store.createNewListDropdownData();
+
   gl.issueBoards.BoardsSelector = Vue.extend({
     components: {
       'board-selector-form': gl.issueBoards.BoardSelectorForm,
@@ -17,8 +21,7 @@
         open: false,
         loading: true,
         boards: [],
-        currentPage: '',
-        reload: false,
+        state: Store.state,
       };
     },
     watch: {
@@ -33,6 +36,15 @@
       },
     },
     computed: {
+      currentPage() {
+        return this.state.currentPage;
+      },
+      reload() {
+        return this.state.reload;
+      },
+      board() {
+        return this.state.currentBoard;
+      },
       showDelete() {
         return this.boards.length > 1;
       },
@@ -50,7 +62,7 @@
     },
     methods: {
       showPage(page) {
-        this.currentPage = page;
+        this.state.currentPage = page;
       },
       toggleDropdown() {
         this.open = !this.open;
@@ -68,5 +80,8 @@
         }
       },
     },
+    created() {
+      this.state.currentBoard = this.currentBoard;
+    },
   });
 })();

app/assets/javascripts/boards/stores/boards_store.js.es6

@@ -23,6 +23,11 @@
         search: ''
       };
     },
+    createNewListDropdownData() {
+      this.state.currentBoard = {};
+      this.state.currentPage = '';
+      this.state.reload = false;
+    },
     addList (listObj) {
       const list = new List(listObj);
       this.state.lists.push(list);

app/models/issue.rb

@@ -280,7 +280,7 @@ class Issue < ActiveRecord::Base
 
   def as_json(options = {})
     super(options).tap do |json|
-      json[:subscribed] = subscribed?(options[:user]) if options.has_key?(:user)
+      json[:subscribed] = subscribed?(options[:user]) if options.has_key?(:user) && options[:user]
 
       if options.has_key?(:labels)
         json[:labels] = labels.as_json(

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

@@ -3,7 +3,7 @@
   .boards-title-holder.dropdown
     %button.boards-switcher{ "@click" => "loadBoards",
       data: { toggle: "dropdown" } }
-      {{ currentBoard.name }}
+      {{ board.name }}
       = icon("caret-down")
     .dropdown-menu{ ":class" => "{ 'is-loading': loading }" }
       .dropdown-title
@@ -25,17 +25,7 @@
         = icon("spin spinner")
       - if can?(current_user, :admin_board, @project)
         %board-selector-form{ "inline-template" => true,
-          "v-if" => "currentPage === 'edit'",
-          "type" => "edit",
-          ":current-board.sync" => "currentBoard",
-          ":current-page.sync" => "currentPage",
-          ":reload.sync" => "reload" }
-          = render "projects/boards/components/form"
-        %board-selector-form{ "inline-template" => true,
-          "v-if" => "currentPage === 'new'",
-          "type" => "new",
-          ":current-page.sync" => "currentPage",
-          ":reload.sync" => "reload" }
+          "v-if" => "currentPage === 'new' || currentPage === 'edit'" }
           = render "projects/boards/components/form"
         .dropdown-content.board-selector-page-two{ "v-if" => "currentPage === 'delete'" }
           %p
@@ -44,7 +34,7 @@
             = link_to "",
               class: "btn btn-danger pull-left",
               method: :delete,
-              ":href" => "'#{namespace_project_boards_path(@project.namespace, @project)}/' + currentBoard.id" do
+              ":href" => "'#{namespace_project_boards_path(@project.namespace, @project)}/' + board.id" do
               Delete
             %button.btn.btn-default.pull-right{ type: "button",
               "@click.stop.prevent" => "currentPage = ''" }

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

@@ -8,7 +8,7 @@
     .clearfix.prepend-top-10
       %button.btn.btn-primary.pull-left{ type: "submit",
         ":disabled" => "board.name === ''",
-        "v-el:submit-btn" => true }
+        "ref" => "'submit-btn'" }
         {{ buttonText }}
       %button.btn.btn-default.pull-right{ type: "button",
         "@click.stop.prevent" => "currentPage = ''" }

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

 %board-sidebar{ "inline-template" => true,
-  ":current-user" => "#{current_user.to_json(only: [:username, :id, :name], methods: [:avatar_url]) if current_user}" }
+  ":current-user" => "#{current_user ? current_user.to_json(only: [:username, :id, :name], methods: [:avatar_url]) : {}}" }
   %aside.right-sidebar.right-sidebar-expanded.issue-boards-sidebar{ "v-show" => "showSidebar" }
     .issuable-sidebar
       .block.issuable-sidebar-header