AS1024/Kanboard-Prod
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Rewrite task move position component and remove Vuejs

Browse Source
This commit is contained in:
Frederic Guillot
2016-11-26 16:00:52 -05:00
parent e64faae69a
commit 04ff67e26b
17 changed files with 464 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

242
assets/js/components/task-move-position.js
View File

@@ -1,86 +1,164 @@
Vue.component('task-move-position', {
props: ['board', 'saveUrl'],
template: '#template-task-move-position',
data: function () {
return {
swimlaneId: 0,
columnId: 0,
position: 1,
columns: [],
tasks: [],
positionChoice: 'before',
errorMessage: ''
KB.component('task-move-position', function (containerElement, options) {
function getSelectedValue(id) {
var element = KB.dom(document).find('#' + id);
if (element) {
return parseInt(element.options[element.selectedIndex].value);
}
},
ready: function () {
this.columns = this.board[0].columns;
this.columnId = this.columns[0].id;
this.tasks = this.columns[0].tasks;
this.errorMessage = '';
},
methods: {
onChangeSwimlane: function () {
var self = this;
this.columnId = 0;
this.position = 1;
this.columns = [];
this.tasks = [];
this.positionChoice = 'before';
this.board.forEach(function(swimlane) {
if (swimlane.id === self.swimlaneId) {
self.columns = swimlane.columns;
self.tasks = self.columns[0].tasks;
self.columnId = self.columns[0].id;
}
});
},
onChangeColumn: function () {
var self = this;
this.position = 1;
this.tasks = [];
this.positionChoice = 'before';
this.columns.forEach(function(column) {
if (column.id == self.columnId) {
self.tasks = column.tasks;
if (self.tasks.length > 0) {
self.position = parseInt(self.tasks[0]['position']);
}
}
});
},
onSubmit: function () {
var self = this;
if (this.positionChoice == 'after') {
this.position++;
}
$.ajax({
cache: false,
url: this.saveUrl,
contentType: "application/json",
type: "POST",
processData: false,
data: JSON.stringify({
"column_id": this.columnId,
"swimlane_id": this.swimlaneId,
"position": this.position
}),
statusCode: {
200: function() {
window.location.reload(true);
},
403: function(jqXHR) {
var response = JSON.parse(jqXHR.responseText);
self.errorMessage = response.message;
self.$broadcast('submitCancelled');
}
}
});
}
return null;
}
function getSwimlaneId() {
var swimlaneId = getSelectedValue('form-swimlanes');
return swimlaneId === null ? options.board[0].id : swimlaneId;
}
function getColumnId() {
var columnId = getSelectedValue('form-columns');
return columnId === null ? options.board[0].columns[0].id : columnId;
}
function getPosition() {
var position = getSelectedValue('form-position');
return position === null ? 1 : position;
}
function getPositionChoice() {
var element = KB.find('input[name=positionChoice]:checked');
if (element) {
return element.value;
}
return 'before';
}
function onSwimlaneChanged() {
var columnSelect = KB.dom(document).find('#form-columns');
KB.dom(columnSelect).replace(buildColumnSelect());
var taskSection = KB.dom(document).find('#form-tasks');
KB.dom(taskSection).replace(buildTasks());
}
function onColumnChanged() {
var taskSection = KB.dom(document).find('#form-tasks');
KB.dom(taskSection).replace(buildTasks());
}
function onError(message) {
KB.trigger('modal.stop');
KB.find('#message-container')
.replace(KB.dom('div')
.attr('id', 'message-container')
.attr('class', 'alert alert-error')
.text(message)
.build()
);
}
function onSubmit() {
var position = getPosition();
var positionChoice = getPositionChoice();
if (positionChoice === 'after') {
position++;
}
KB.find('#message-container').replace(KB.dom('div').attr('id', 'message-container').build());
KB.http.postJson(options.saveUrl, {
"column_id": getColumnId(),
"swimlane_id": getSwimlaneId(),
"position": position
}).success(function () {
window.location.reload(true);
}).error(function (response) {
if (response) {
onError(response.message);
}
});
}
function buildSwimlaneSelect() {
var swimlanes = [];
options.board.forEach(function(swimlane) {
swimlanes.push({'value': swimlane.id, 'text': swimlane.name});
});
return KB.dom('select')
.attr('id', 'form-swimlanes')
.change(onSwimlaneChanged)
.for('option', swimlanes)
.build();
}
function buildColumnSelect() {
var columns = [];
var swimlaneId = getSwimlaneId();
options.board.forEach(function(swimlane) {
if (swimlaneId === swimlane.id) {
swimlane.columns.forEach(function(column) {
columns.push({'value': column.id, 'text': column.title});
});
}
});
return KB.dom('select')
.attr('id', 'form-columns')
.change(onColumnChanged)
.for('option', columns)
.build();
}
function buildTasks() {
var tasks = [];
var swimlaneId = getSwimlaneId();
var columnId = getColumnId();
var container = KB.dom('div').attr('id', 'form-tasks');
options.board.forEach(function(swimlane) {
if (swimlaneId === swimlane.id) {
swimlane.columns.forEach(function(column) {
if (columnId === column.id) {
column.tasks.forEach(function(task) {
tasks.push({'value': task.position, 'text': '#' + task.id + ' - ' + task.title});
});
}
});
}
});
if (tasks.length > 0) {
container
.add(KB.html.label(options.positionLabel, 'form-position'))
.add(KB.dom('select').attr('id', 'form-position').for('option', tasks).build())
.add(KB.html.radio(options.beforeLabel, 'positionChoice', 'before'))
.add(KB.html.radio(options.afterLabel, 'positionChoice', 'after'))
;
}
return container.build();
}
this.render = function () {
KB.on('modal.submit', onSubmit);
var form = KB.dom('div')
.on('submit', onSubmit)
.add(KB.dom('div').attr('id', 'message-container').build())
.add(KB.html.label(options.swimlaneLabel, 'form-swimlanes'))
.add(buildSwimlaneSelect())
.add(KB.html.label(options.columnLabel, 'form-columns'))
.add(buildColumnSelect())
.add(buildTasks())
.build();
containerElement.appendChild(form);
};
});