taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request #1 from taigaio/backlog-sortable-refactor 

Backlog sortable refactor
stable
David Barragán Merino 2014-07-26 18:31:21 +02:00
parent fe8c268c31 e0be22d871
commit 553096c496
7 changed files with 1205 additions and 1126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/coffee/modules/backlog/main.coffee
View File

@ -450,7 +450,7 @@ BacklogDirective = ($repo, $rootscope) ->
linkToolbar($scope, $el, $attrs, $ctrl)
linkFilters($scope, $el, $attrs, $ctrl)
linkDoomLine($scope, $el, $attrs, $ctrl)
# linkDoomLine($scope, $el, $attrs, $ctrl)
$el.find(".backlog-table-body").disableSelection()

122
app/coffee/modules/backlog/sortable.coffee
View File

@ -34,67 +34,51 @@ module = angular.module("taigaBacklog")
## Sortable Directive
#############################################################################
BacklogSortableDirective = ($repo, $rs, $rootscope) ->
deleteElement = (el) ->
el.scope().$destroy()
el.off()
el.remove()
#########################
## Drag & Drop Link
#########################
BacklogSortableDirective = ($repo, $rs, $rootscope) ->
# Notes about jquery bug:
# http://stackoverflow.com/questions/5791886/jquery-draggable-shows-
# helper-in-wrong-place-when-scrolled-down-page
linkSortable = ($scope, $el, $attrs, $ctrl) ->
# State
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-v",
items: "div.sprint-table > div.row, .backlog-table-body > div.row"
link = ($scope, $el, $attrs) ->
$el.sortable({
connectWith: ".sprint-table"
handle: ".icon-drag-v",
containment: ".wrapper"
dropOnEmpty: true
# With scroll activated, it has strange behavior
# with not full screen browser window.
scroll: false
# A consequence of length of backlog user story item
# the default tolerance ("intersection") not works properly.
tolerance: "pointer"
# Revert on backlog is disabled bacause it works bad. Something
# on the current taiga backlog structure or style makes jquery ui
# works unexpectly (in some circumstances calculates wrong
# position for revert).
revert: false
})
tdom.on "sortstop", (event, ui) ->
# Common state for stop event handler
parentEl = ui.item.parent()
itemEl = ui.item
itemUs = itemEl.scope().us
itemIndex = itemEl.index()
newParentScope = parentEl.scope()
$el.on "sortreceive", (event, ui) ->
itemUs = ui.item.scope().us
itemIndex = ui.item.index()
if itemEl.is(".milestone-us-item-row") and parentEl.is(".backlog-table-body")
deleteElement(itemEl)
$scope.$broadcast("sprint:us:move", itemUs, itemIndex, null)
deleteElement(ui.item)
$scope.$emit("sprint:us:move", itemUs, itemIndex, null)
else if itemEl.is(".us-item-row") and parentEl.is(".sprint-table")
deleteElement(itemEl)
$scope.$broadcast("sprint:us:move", itemUs, itemIndex, newParentScope.sprint.id)
$el.on "sortstop", (event, ui) ->
# When parent not exists, do nothing
if ui.item.parent().length == 0
return
else if parentEl.is(".sprint-table") and newParentScope.sprint.id != oldParentScope.sprint.id
deleteElement(itemEl)
$scope.$broadcast("sprint:us:move", itemUs, itemIndex, newParentScope.sprint.id)
else
$scope.$broadcast("sprint:us:move", itemUs, itemIndex, itemUs.milestone)
tdom.on "sortstart", (event, ui) ->
oldParentScope = ui.item.parent().scope()
tdom.on "sort", (event, ui) ->
ui.helper.css("background-color", "#ddd")
tdom.on "sortbeforestop", (event, ui) ->
ui.helper.css("background-color", "transparent")
link = ($scope, $el, $attrs) ->
$ctrl = $el.controller()
linkSortable($scope, $el, $attrs, $ctrl)
itemUs = ui.item.scope().us
itemIndex = ui.item.index()
$scope.$emit("sprint:us:move", itemUs, itemIndex, null)
$scope.$on "$destroy", ->
$el.off()
@ -102,9 +86,43 @@ BacklogSortableDirective = ($repo, $rs, $rootscope) ->
return {link: link}
SprintSortableDirective = ($repo, $rs, $rootscope) ->
link = ($scope, $el, $attrs) ->
$el.sortable({
dropOnEmpty: true
connectWith: ".sprint-table,.backlog-table-body"
})
$el.on "sortreceive", (event, ui) ->
itemUs = ui.item.scope().us
itemIndex = ui.item.index()
deleteElement(ui.item)
$scope.$emit("sprint:us:move", itemUs, itemIndex, $scope.sprint.id)
$el.on "sortstop", (event, ui) ->
# When parent not exists, do nothing
if ui.item.parent().length == 0
return
itemUs = ui.item.scope().us
itemIndex = ui.item.index()
$scope.$emit("sprint:us:move", itemUs, itemIndex, $scope.sprint.id)
return {link:link}
module.directive("tgBacklogSortable", [
"$tgRepo",
"$tgResources",
"$rootScope",
BacklogSortableDirective
])
module.directive("tgSprintSortable", [
"$tgRepo",
"$tgResources",
"$rootScope",
SprintSortableDirective
])

2195
app/js/jquery.ui.git.js vendored
View File

File diff suppressed because it is too large Load Diff

2
app/partials/backlog.jade
View File

@ -5,7 +5,7 @@ block head
block content
div.wrapper(tg-backlog, ng-controller="BacklogController as ctrl",
ng-init="section='backlog'", tg-backlog-sortable)
ng-init="section='backlog'")
sidebar.menu-secondary.extrabar.filters-bar(tg-backlog-filters)
include views/modules/backlog-filters
section.main.backlog

2
app/partials/views/modules/backlog-table.jade
View File

@ -6,5 +6,5 @@ section.backlog-table-header
span.header-points Points
span.icon.icon-arrow-bottom
section.backlog-table-body
section.backlog-table-body(tg-backlog-sortable)
include ../components/backlog-row

5
app/partials/views/modules/sprints.jade
View File

@ -10,7 +10,8 @@ section.sprints
a.button.button-green(ng-click="ctrl.addNewSprint()", href="", title="Add New US")
span.text + New sprint
section.sprint(ng-repeat="sprint in sprints track by sprint.id", tg-backlog-sprint="sprint")
section.sprint(ng-repeat="sprint in sprints track by sprint.id"
tg-backlog-sprint="sprint")
header
div.sprint-name
a.icon.icon-arrow-up(href="", title="compact Sprint")
@ -27,7 +28,7 @@ section.sprints
span.description total
div.sprint-progress-bar
div.current-progress(tg-sprint-progressbar="sprint")
div.sprint-table
div.sprint-table(tg-sprint-sortable)
div.row.milestone-us-item-row(ng-repeat="us in sprint.user_stories|orderBy:order track by us.id")
div.column-us.width-8
a.us-name.clickable(tg-nav="project-userstories-detail:project=project.slug,ref=us.ref", title="")

3
app/styles/modules/backlog/sprints.scss
View File

@ -116,6 +116,9 @@
}
.sprint-table {
@include slide(1000px, overflow-y);
&.open {
min-height: 50px;
}
.row {
@include table-flex();
border-bottom: 1px solid $gray-light;