Implemented drag and drop on taskboard.

stable
Andrey Antukh 2014-07-10 15:52:50 +02:00
parent ef71c50f03
commit 92dfffdaf0
4 changed files with 139 additions and 11 deletions

View File

@ -45,6 +45,8 @@ class TaskboardController extends mixOf(taiga.Controller, taiga.PageMixin)
]
constructor: (@scope, @rootscope, @repo, @confirm, @rs, @params, @q) ->
_.bindAll(@)
@scope.sprintId = @params.id
@scope.sectionName = "Taskboard"
@ -58,7 +60,8 @@ class TaskboardController extends mixOf(taiga.Controller, taiga.PageMixin)
@scope.$on("taskform:new:success", => @.loadTaskboard())
@scope.$on("taskform:edit:success", => @.loadTaskboard())
@scope.$on("assigned-to:added", (task) => @scope.$apply(=> @repo.save(task)))
@scope.$on("assigned-to:added", (ctx, task) => @scope.$apply(=> @repo.save(task)))
@scope.$on("taskboard:task:move", @.taskMove)
loadSprintStats: ->
return @rs.sprints.stats(@scope.projectId, @scope.sprintId).then (stats) =>
@ -124,6 +127,24 @@ class TaskboardController extends mixOf(taiga.Controller, taiga.PageMixin)
.then(=> @.loadUsersAndRoles())
.then(=> @.loadTaskboard())
taskMove: (ctx, task, usId, statusId, order) ->
# Remove task from old position
r = @scope.usTasks[task.user_story][task.status].indexOf(task)
@scope.usTasks[task.user_story][task.status].splice(r, 1)
# Add task to new position
@scope.usTasks[usId][statusId].splice(order, 0, task)
task.user_story = usId
task.status = statusId
task.order = order
promise = @repo.save(task)
promise.then ->
console.log "SUCCESS TASK SAVE"
promise.then null, ->
console.log "FAIL TASK SAVE"
## Template actions
addNewTask: (type, us) ->
switch type
@ -165,6 +186,17 @@ TaskboardDirective = ($rootscope) ->
return {link: link}
TaskboardTaskDirective = ->
link = ($scope, $el, $attrs) ->
console.log "taskboard task"
$el.disableSelection()
return {link:link}
module.directive("tgTaskboardTask", TaskboardTaskDirective)
#############################################################################
## Task Row Size Fixer Directive
#############################################################################

View File

@ -0,0 +1,94 @@
###
# Copyright (C) 2014 Andrey Antukh <niwi@niwi.be>
# Copyright (C) 2014 Jesús Espino Garcia <jespinog@gmail.com>
# Copyright (C) 2014 David Barragán Merino <bameda@dbarragan.com>
#
# This program is free software: you can redistribute it and/or modify
# it under the terms of the GNU Affero General Public License as
# published by the Free Software Foundation, either version 3 of the
# License, or (at your option) any later version.
#
# This program is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
# GNU Affero General Public License for more details.
#
# You should have received a copy of the GNU Affero General Public License
# along with this program. If not, see <http://www.gnu.org/licenses/>.
#
# File: modules/taskboard/sortable.coffee
###
taiga = @.taiga
mixOf = @.taiga.mixOf
toggleText = @.taiga.toggleText
scopeDefer = @.taiga.scopeDefer
bindOnce = @.taiga.bindOnce
groupBy = @.taiga.groupBy
module = angular.module("taigaBacklog")
#############################################################################
## Sortable Directive
#############################################################################
TaskboardSortableDirective = ($repo, $rs, $rootscope) ->
#########################
## Drag & Drop Link
#########################
link = ($scope, $el, $attrs) ->
oldParentScope = null
newParentScope = null
itemEl = null
tdom = $el
deleteElement = (itemEl) ->
# Completelly remove item and its scope from dom
itemEl.scope().$destroy()
itemEl.off()
itemEl.remove()
tdom.sortable({
handle: ".icon-drag-h",
dropOnEmpty: true
connectWith: ".taskboard-tasks-box"
revert: 400
})
tdom.on "sortstop", (event, ui) ->
parentEl = ui.item.parent()
itemEl = ui.item
itemTask = itemEl.scope().task
itemIndex = itemEl.index()
newParentScope = parentEl.scope()
oldUsId = if oldParentScope.us then oldParentScope.us.id else null
oldStatusId = oldParentScope.st.id
newUsId = if newParentScope.us then newParentScope.us.id else null
newStatusId = newParentScope.st.id
if newStatusId != oldStatusId or newUsId != oldUsId
deleteElement(itemEl)
$scope.$apply ->
$rootscope.$broadcast("taskboard:task:move", itemTask, newUsId, newStatusId, itemIndex)
tdom.on "sortstart", (event, ui) ->
oldParentScope = ui.item.parent().scope()
$scope.$on "$destroy", ->
$el.off()
return {link: link}
module.directive("tgTaskboardSortable", [
"$tgRepo",
"$tgResources",
"$rootScope",
TaskboardSortableDirective
])

View File

@ -5,8 +5,8 @@ div.taskboard-table
h2.task-colum_name(ng-repeat="s in taskStatusList track by s.id", tg-bo-html="s.name")
div.taskboard-table-body
div.taskboard-table-inner(tg-taskboard-row-size-fixer)
div.task-row(ng-repeat="us in userstories track by us.id", tg-taskboard-taskrow)
div.taskboard_us-list.task-column
div.task-row(ng-repeat="us in userstories track by us.id")
div.taskboard-userstory-box.task-column
div.tag-list
span.tag(ng-repeat="tag in us.tags") {{ tag }}
h3.us-title
@ -19,16 +19,18 @@ div.taskboard-table
ul.points-list(tg-taskboard-us-points="us")
include ../components/addnewtask
div.taskboard_task-playground.task-column(ng-repeat="st in taskStatusList track by st.id")
div.taskboard-task(ng-repeat="task in usTasks[us.id][st.id] track by task.id")
div.taskboard-tasks-box.task-column(ng-repeat="st in taskStatusList track by st.id", tg-taskboard-sortable)
div.taskboard-task(ng-repeat="task in usTasks[us.id][st.id] track by task.id",
tg-taskboard-task)
include ../components/taskboard-task
div.task-row(ng-init="us = null", tg-taskboard-taskrow)
div.taskboard_us-list.task-column
div.task-row(ng-init="us = null")
div.taskboard-userstory-box.task-column
h3.us-title
span Unassigned tasks
include ../components/addnewtask
div.taskboard_task-playground.task-column(ng-repeat="st in taskStatusList track by st.id")
div.taskboard-task(ng-repeat="task in usTasks[null][st.id] track by task.id")
div.taskboard-tasks-box.task-column(ng-repeat="st in taskStatusList track by st.id", tg-taskboard-sortable)
div.taskboard-task(ng-repeat="task in usTasks[null][st.id] track by task.id",
tg-taskboard-task)
include ../components/taskboard-task

View File

@ -53,12 +53,12 @@ $column-margin: 0 10px 0 0;
min-height: 30rem;
width: 100%;
}
.taskboard_task-playground {
.taskboard-tasks-box {
background: $whitish;
}
}
.taskboard_us-list {
.taskboard-userstory-box {
position: relative;
.tag-list {
display: none;