From 94f5d8a98c40975dbcf39e8c116cfeea5bf3719d Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 17 Aug 2016 12:02:24 +0100
Subject: [PATCH] Improved code readability
---
.../boards/components/board.js.es6 | 16 +------
.../components/board_blank_state.js.es6 | 24 ++++-------
.../boards/components/board_delete.js.es6 | 3 +-
.../boards/components/board_list.js.es6 | 43 +++++++------------
.../components/new_list_dropdown.js.es6 | 11 +++--
.../javascripts/boards/models/issue.js.es6 | 35 ++++-----------
.../javascripts/boards/models/list.js.es6 | 18 +++-----
.../boards/services/board_service.js.es6 | 21 +++------
.../boards/components/_board.html.haml | 10 ++---
9 files changed, 57 insertions(+), 124 deletions(-)
diff --git a/app/assets/javascripts/boards/components/board.js.es6 b/app/assets/javascripts/boards/components/board.js.es6
index b8070cdc30d..e17784e7948 100644
--- a/app/assets/javascripts/boards/components/board.js.es6
+++ b/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,
diff --git a/app/assets/javascripts/boards/components/board_blank_state.js.es6 b/app/assets/javascripts/boards/components/board_blank_state.js.es6
index c55c23e1023..63d72d857d9 100644
--- a/app/assets/javascripts/boards/components/board_blank_state.js.es6
+++ b/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)
}
});
})();
diff --git a/app/assets/javascripts/boards/components/board_delete.js.es6 b/app/assets/javascripts/boards/components/board_delete.js.es6
index ad6a320f086..34653cd48ef 100644
--- a/app/assets/javascripts/boards/components/board_delete.js.es6
+++ b/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?')) {
diff --git a/app/assets/javascripts/boards/components/board_list.js.es6 b/app/assets/javascripts/boards/components/board_list.js.es6
index 564e878db05..1503d14c508 100644
--- a/app/assets/javascripts/boards/components/board_list.js.es6
+++ b/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();
}
});
})();
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 597a5b03ee2..1a4d8157970 100644
--- a/app/assets/javascripts/boards/components/new_list_dropdown.js.es6
+++ b/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,
diff --git a/app/assets/javascripts/boards/models/issue.js.es6 b/app/assets/javascripts/boards/models/issue.js.es6
index 9d918b1d79a..28fad539f2f 100644
--- a/app/assets/javascripts/boards/models/issue.js.es6
+++ b/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) );
}
}
diff --git a/app/assets/javascripts/boards/models/list.js.es6 b/app/assets/javascripts/boards/models/list.js.es6
index 79bb5573b36..d240f5e1f89 100644
--- a/app/assets/javascripts/boards/models/list.js.es6
+++ b/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) {
diff --git a/app/assets/javascripts/boards/services/board_service.js.es6 b/app/assets/javascripts/boards/services/board_service.js.es6
index 74b20481c5a..9b80fb2e99f 100644
--- a/app/assets/javascripts/boards/services/board_service.js.es6
+++ b/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);
}
diff --git a/app/views/projects/boards/components/_board.html.haml b/app/views/projects/boards/components/_board.html.haml
index 55ae99be50d..f8ebf397ee2 100644
--- a/app/views/projects/boards/components/_board.html.haml
+++ b/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'",
--
GitLab