Changed where data gets loaded

Changed what is hidden when data is loading

app/assets/javascripts/boards/components/modal/footer.js.es6

@@ -10,13 +10,10 @@
     data() {
       return {
         store: Store.modal,
-        disabled: false,
       };
     },
     computed: {
       submitDisabled() {
-        if (this.disabled) return true;
-
         return !Store.modalSelectedCount();
       },
       submitText() {
@@ -30,15 +27,19 @@
         this.store.showAddIssuesModal = false;
       },
       addIssues() {
+        const list = this.store.selectedList;
         const issueIds = this.store.issues.filter(issue => issue.selected).map(issue => issue.id);
 
+        // Post the data to the backend
+        gl.boardService.addMultipleIssues(list, issueIds);
+
+        // Add the issues on the frontend
         issueIds.forEach((id) => {
           const issue = this.store.issues.filter(issue => issue.id == id)[0];
-          this.store.selectedList.addIssue(issue);
-          this.store.selectedList.issuesSize += 1;
+          list.addIssue(issue);
+          list.issuesSize += 1;
         });
 
-        this.disabled = true;
         this.hideModal();
       },
     },

app/assets/javascripts/boards/components/modal/header.js.es6

@@ -18,14 +18,16 @@
       'modal-search': gl.issueBoards.ModalSearch,
     },
     template: `
-      <header class="add-issues-header">
-        <h2>
-          Add issues to board
-          <modal-dismiss></modal-dismiss>
-        </h2>
-        <modal-tabs></modal-tabs>
-        <modal-search></modal-search>
-      </header>
+      <div>
+        <header class="add-issues-header form-actions">
+          <h2>
+            Add issues
+            <modal-dismiss></modal-dismiss>
+          </h2>
+        </header>
+        <modal-tabs v-if="issues.length"></modal-tabs>
+        <modal-search v-if="issues.length"></modal-search>
+      </div>
     `,
   });
 })();

app/assets/javascripts/boards/components/modal/list.js.es6

@@ -21,11 +21,11 @@
       },
       issues: {
         handler() {
-          if (this.activeTab === 'selected') {
-            this.$nextTick(() => {
+          this.$nextTick(() => {
+            if (this.activeTab === 'selected') {
               listMasonry.layout();
-            });
-          }
+            }
+          });
         },
         deep: true,
       }
@@ -61,18 +61,7 @@
       },
     },
     mounted() {
-      gl.boardService.getBacklog()
-        .then((res) => {
-          const data = res.json();
-
-          data.forEach((issueObj) => {
-            this.issues.push(new ListIssue(issueObj));
-          });
-
-          this.$nextTick(() => {
-            this.initMasonry();
-          });
-        });
+      this.initMasonry();
     },
     destroyed() {
       this.issues = [];
@@ -83,11 +72,6 @@
     },
     template: `
       <section class="add-issues-list">
-        <div
-          class="add-issues-list-loading"
-          v-if="loading">
-          <i class="fa fa-spinner fa-spin"></i>
-        </div>
         <div
           class="add-issues-list-columns list-unstyled"
           ref="list"
@@ -112,11 +96,6 @@
             </div>
           </div>
         </div>
-        <p
-          class="all-issues-selected-empty"
-          v-if="activeTab == 'selected' && selectedCount == 0">
-          You don't have any issues selected, <a href="#" @click="activeTab = 'all'">select some</a>.
-        </p>
       </section>
     `,
   });

app/assets/javascripts/boards/components/modal/modal.es6

@@ -12,6 +12,16 @@
     data() {
       return Store.modal;
     },
+    mounted() {
+      gl.boardService.getBacklog()
+        .then((res) => {
+          const data = res.json();
+
+          data.forEach((issueObj) => {
+            this.issues.push(new ListIssue(issueObj));
+          });
+        });
+    },
     components: {
       'modal-header': gl.issueBoards.IssuesModalHeader,
       'modal-list': gl.issueBoards.ModalList,
@@ -23,7 +33,14 @@
         v-if="showAddIssuesModal">
         <div class="add-issues-container">
           <modal-header></modal-header>
-          <modal-list></modal-list>
+          <modal-list v-if="issues.length"></modal-list>
+          <section
+            class="add-issues-list"
+            v-if="issues.length == 0">
+            <div class="add-issues-list-loading">
+              <i class="fa fa-spinner fa-spin"></i>
+            </div>
+          </section>
           <modal-footer></modal-footer>
         </div>
       </div>

app/assets/javascripts/boards/services/board_service.js.es6

@@ -13,7 +13,11 @@ class BoardService {
       generate: {
         method: 'POST',
         url: `${root}/${boardId}/lists/generate.json`
-      }
+      },
+      multiple: {
+        method: 'POST',
+        url: `${root}/${boardId}/lists{/id}/multiple`
+      },
     });
     this.issue = Vue.resource(`${root}/${boardId}/issues{/id}`, {});
     this.issues = Vue.resource(`${root}/${boardId}/lists{/id}/issues`, {});
@@ -75,6 +79,12 @@ class BoardService {
   getBacklog() {
     return this.boards.backlog();
   }
+
+  addMultipleIssues(list, issue_ids) {
+    return this.lists.multiple(list.id, {
+      issue_ids,
+    });
+  }
 }
 
 window.BoardService = BoardService;

app/assets/stylesheets/pages/boards.scss

@@ -383,6 +383,10 @@
 }
 
 .add-issues-header {
+  margin: -25px -15px -5px;
+  border-top: 0;
+  border-bottom: 1px solid $border-color;
+
   > h2 {
     margin: 0;
     font-size: 18px;
@@ -396,6 +400,7 @@
 .add-issues-search {
   display: flex;
   margin-bottom: 10px;
+  margin-top: 10px;
 
   .btn {
     margin-left: 10px;

app/controllers/projects/boards/lists_controller.rb

@@ -50,6 +50,10 @@ module Projects
         end
       end
 
+      def multiple
+        head :ok
+      end
+
       private
 
       def authorize_admin_list!

app/controllers/projects/boards_controller.rb

@@ -33,7 +33,7 @@ class Projects::BoardsController < Projects::ApplicationController
       LabelLink.where("label_links.target_type = 'Issue' AND label_links.target_id = issues.id")
                .where(label_id: board.lists.movable.pluck(:label_id)).limit(1).arel.exists
     )
-    @issues = @issues.page(params[:page])
+    @issues = @issues.page(params[:page]).per(50)
 
     render json: @issues.as_json(
       labels: true,

config/routes/project.rb

@@ -267,13 +267,14 @@ constraints(ProjectUrlConstrainer.new) do
 
       resources :boards, only: [:index, :show] do
         get :backlog, on: :member
-        
+
         scope module: :boards do
           resources :issues, only: [:update]
 
           resources :lists, only: [:index, :create, :update, :destroy] do
             collection do
               post :generate
+              post :multiple
             end
 
             resources :issues, only: [:index, :create]