Improved code readability

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

@@ -27,10 +27,8 @@
     },
     watch: {
       query () {
-        if (this.list.canSearch()) {
-          this.list.filters = this.getFilterData();
-          this.list.getIssues(true);
-        }
+        this.list.filters = this.getFilterData();
+        this.list.getIssues(true);
       },
       filters: {
         handler () {
@@ -41,12 +39,7 @@
       }
     },
     methods: {
-      clearSearch () {
-        this.query = '';
-      },
       getFilterData () {
-        if (!this.list.canSearch()) return this.filters;
-
         const filters = this.filters;
         let queryData = { search: this.query };
 
@@ -55,11 +48,6 @@
         return queryData;
       }
     },
-    computed: {
-      isPreset () {
-        return ['backlog', 'done', 'blank'].indexOf(this.list.type) > -1;
-      }
-    },
     ready () {
       const options = gl.issueBoards.getBoardSortableDefaultOptions({
         disabled: this.disabled,

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

@@ -17,11 +17,9 @@
     },
     methods: {
       addDefaultLists () {
-        Store.removeBlankState();
-
-        for (let i = 0, labelsLength = this.predefinedLabels.length; i < labelsLength; i++) {
-          const label = this.predefinedLabels[i];
+        this.clearBlankState();
 
+        this.predefinedLabels.forEach((label, i) => {
           Store.addList({
             title: label.title,
             position: i,
@@ -31,27 +29,21 @@
               color: label.color
             }
           });
-        }
+        });
 
         // Save the labels
-        gl.boardService
-          .generateDefaultLists()
+        gl.boardService.generateDefaultLists()
           .then((resp) => {
-            const data = resp.json();
-
-            for (let i = 0, dataLength = data.length; i < dataLength; i++) {
-              const listObj = data[i],
-                    list = Store.findList('title', listObj.title);
+            resp.json().forEach((listObj) => {
+              const list = Store.findList('title', listObj.title);
 
               list.id = listObj.id;
               list.label.id = listObj.label.id;
               list.getIssues();
-            }
+            });
           });
       },
-      clearBlankState () {
-        Store.removeBlankState();
-      }
+      clearBlankState: Store.removeBlankState.bind(Store)
     }
   });
 })();

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

@@ -7,8 +7,7 @@
       list: Object
     },
     methods: {
-      deleteBoard (e) {
-        e.stopImmediatePropagation();
+      deleteBoard () {
         $(this.$el).tooltip('hide');
 
         if (confirm('Are you sure you want to delete this list?')) {

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

@@ -55,32 +55,22 @@
     },
     ready () {
       const options = gl.issueBoards.getBoardSortableDefaultOptions({
-          group: 'issues',
-          sort: false,
-          disabled: this.disabled,
-          onStart: (e) => {
-            const card = this.$refs.issue[e.oldIndex];
+        group: 'issues',
+        sort: false,
+        disabled: this.disabled,
+        onStart: (e) => {
+          const card = this.$refs.issue[e.oldIndex];
 
-            Store.moving.issue = card.issue;
-            Store.moving.list = card.list;
-          },
-          onAdd: (e) => {
-            const fromList = Store.moving.list,
-                  issue = Store.moving.issue;
-
-            gl.issueBoards.BoardsStore.moveIssueToList(fromList, this.list, issue);
-          },
-          onRemove (e) {
-            const card = e.item,
-                  list = Store.moving.list,
-                  issue = Store.moving.issue;
-
-            // Remove the new dom element & let vue add the element
-            card.parentNode.removeChild(card);
-
-            list.removeIssue(issue);
-          }
-        });
+          Store.moving.issue = card.issue;
+          Store.moving.list = card.list;
+        },
+        onAdd: (e) => {
+          gl.issueBoards.BoardsStore.moveIssueToList(Store.moving.list, this.list, Store.moving.issue);
+        },
+        onRemove: (e) => {
+          this.$refs.issue[e.oldIndex].$destroy(true);
+        }
+      });
 
       if (bp.getBreakpointSize() === 'xs') {
         options.handle = '.js-card-drag-handle';
@@ -94,9 +84,6 @@
           this.loadNextPage();
         }
       };
-    },
-    beforeDestroy () {
-      this.sortable.destroy();
     }
   });
 })();

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

@@ -8,15 +8,14 @@ $(() => {
 
     $this.glDropdown({
       data(term, callback) {
-        $.ajax({
-          url: $this.attr('data-labels')
-        }).then((resp) => {
-          callback(resp);
-        });
+        $.get($this.attr('data-labels'))
+          .then((resp) => {
+            callback(resp);
+          });
       },
       renderRow (label) {
         const active = Store.findList('title', label.title),
-              $li = $('<li />',),
+              $li = $('<li />'),
               $a = $('<a />', {
                 class: (active ? `is-active js-board-list-${active.id}` : ''),
                 text: label.title,

app/assets/javascripts/boards/models/issue.js.es6

@@ -3,17 +3,15 @@ class ListIssue {
     this.id = obj.iid;
     this.title = obj.title;
     this.confidential = obj.confidential;
+    this.labels = [];
 
     if (obj.assignee) {
       this.assignee = new ListUser(obj.assignee);
     }
 
-    this.labels = [];
-
-    for (let i = 0, objLabelsLength = obj.labels.length; i < objLabelsLength; i++) {
-      const label = obj.labels[i];
+    obj.labels.forEach((label) => {
       this.labels.push(new ListLabel(label));
-    }
+    });
 
     this.priority = this.labels.reduce((max, label) => {
       return (label.priority < max) ? label.priority : max;
@@ -21,39 +19,24 @@ class ListIssue {
   }
 
   addLabel (label) {
-    if (label) {
-      const hasLabel = this.findLabel(label);
-
-      if (!hasLabel) {
-        this.labels.push(new ListLabel(label));
-      }
+    if (!this.findLabel(label)) {
+      this.labels.push(new ListLabel(label));
     }
   }
 
   findLabel (findLabel) {
-    return this.labels.filter((label) => {
-      return label.title === findLabel.title;
-    })[0];
+    return this.labels.filter( label => label.title === findLabel.title )[0];
   }
 
   removeLabel (removeLabel) {
-    if (removeLabel) {
-      this.labels = this.labels.filter((label) => {
-        return removeLabel.title !== label.title;
-      });
-    }
+    this.labels = this.labels.filter( label => removeLabel.title !== label.title );
   }
 
   removeLabels (labels) {
-    for (let i = 0, labelsLength = labels.length; i < labelsLength; i++) {
-      const label = labels[i];
-      this.removeLabel(label);
-    }
+    labels.forEach(this.removeLabel.bind(this));
   }
 
   getLists () {
-    return gl.issueBoards.BoardsStore.state.lists.filter((list) => {
-      return list.findIssue(this.id);
-    });
+    return gl.issueBoards.BoardsStore.state.lists.filter( list => list.findIssue(this.id) );
   }
 }

app/assets/javascripts/boards/models/list.js.es6

@@ -5,6 +5,7 @@ class List {
     this.position = obj.position;
     this.title = obj.title;
     this.type = obj.list_type;
+    this.preset = ['backlog', 'done', 'blank'].indexOf(this.type) > -1;
     this.filters = gl.issueBoards.BoardsStore.state.filters;
     this.page = 1;
     this.loading = true;
@@ -21,9 +22,7 @@ class List {
   }
 
   guid() {
-    const s4 = () => {
-      return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
-    }
+    const s4 = () => Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
     return `${s4()}${s4()}-${s4()}-${s4()}-${s4()}-${s4()}${s4()}${s4()}`;
   }
 
@@ -72,9 +71,7 @@ class List {
     Object.keys(filters).forEach((key) => { data[key] = filters[key]; });
 
     if (this.label) {
-      data.label_name = data.label_name.filter((label) => {
-        return label !== this.label.title;
-      });
+      data.label_name = data.label_name.filter( label => label !== this.label.title );
     }
 
     if (emptyIssues) {
@@ -95,10 +92,9 @@ class List {
   }
 
   createIssues (data) {
-    for (let i = 0, dataLength = data.length; i < dataLength; i++) {
-      const issueObj = data[i];
+    data.forEach((issueObj) => {
       this.issues.push(new ListIssue(issueObj));
-    }
+    });
   }
 
   addIssue (issue, listFrom) {
@@ -110,9 +106,7 @@ class List {
   }
 
   findIssue (id) {
-    return this.issues.filter((issue) => {
-      return issue.id === id;
-    })[0];
+    return this.issues.filter( issue => issue.id === id )[0];
   }
 
   removeIssue (removeIssue) {

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

@@ -10,36 +10,30 @@ class BoardService {
     });
     this.issue = Vue.resource(`${root}/issues{/id}`, {});
     this.issues = Vue.resource(`${root}/lists{/id}/issues`, {});
-  }
 
-  setCSRF () {
-    Vue.http.headers.common['X-CSRF-Token'] = $.rails.csrfToken();
+    Vue.http.interceptors.push((request, next) => {
+      request.headers['X-CSRF-Token'] = $.rails.csrfToken();
+      next();
+    });
   }
 
   all () {
-    this.setCSRF();
     return this.lists.get();
   }
 
   generateDefaultLists () {
-    this.setCSRF();
-
     return this.lists.generate({});
   }
 
-  createList (labelId) {
-    this.setCSRF();
-
+  createList (label_id) {
     return this.lists.save({}, {
       list: {
-        label_id: labelId
+        label_id
       }
     });
   }
 
   updateList (id, position) {
-    this.setCSRF();
-
     return this.lists.update({ id }, {
       list: {
         position
@@ -48,15 +42,12 @@ class BoardService {
   }
 
   destroyList (id) {
-    this.setCSRF();
-
     return this.lists.delete({ id });
   }
 
   getIssuesForList (id, filter = {}) {
     let data = { id };
     Object.keys(filter).forEach((key) => { data[key] = filter[key]; });
-    this.setCSRF();
 
     return this.issues.get(data);
   }

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

@@ -6,26 +6,26 @@
   ":disabled" => "disabled",
   ":issue-link-base" => "issueLinkBase",
   "track-by" => "_uid" }
-  .board{ ":class" => "{ 'is-draggable': !isPreset }",
+  .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 && !isPreset) }" }
-          = icon("align-justify", class: "board-mobile-handle js-board-drag-handle", "v-if" => "(!disabled && !isPreset)")
+        %h3.board-title.js-board-handle{ ":class" => "{ 'user-can-drag': (!disabled && !list.preset) }" }
+          = icon("align-justify", class: "board-mobile-handle js-board-drag-handle", "v-if" => "(!disabled && !list.preset)")
           {{ list.title }}
           %span.pull-right{ "v-if" => "list.type !== 'blank'" }
             {{ list.issues.length }}
           - if can?(current_user, :admin_list, @project)
             %board-delete{ "inline-template" => true,
               ":list" => "list",
-              "v-if" => "!isPreset && list.id" }
+              "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")
           = icon("spinner spin", class: "board-header-loading-spinner pull-right", "v-show" => "list.loadingMore")
       .board-inner-container.board-search-container{ "v-if" => "list.canSearch()" }
         %input.form-control{ type: "text", placeholder: "Search issues", "v-model" => "query", "debounce" => "250" }
         = icon("search", class: "board-search-icon", "v-show" => "!query")
-        %button.board-search-clear-btn{ type: "button", role: "button", "aria-label" => "Clear search", "@click" => "clearSearch", "v-show" => "query" }
+        %button.board-search-clear-btn{ type: "button", role: "button", "aria-label" => "Clear search", "@click" => "query = ''", "v-show" => "query" }
           = icon("times", class: "board-search-clear")
       %board-list{ "inline-template" => true,
         "v-if" => "list.type !== 'blank'",