Improved code readability

This commit is contained in:
Phil Hughes 2016-08-17 12:02:24 +01:00
parent c7b0732c05
commit 94f5d8a98c
9 changed files with 57 additions and 124 deletions

View file

@ -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,

View file

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

View file

@ -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?')) {

View file

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

View file

@ -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,

View file

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

View file

@ -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) {

View file

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

View file

@ -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'",