Refactoring admin project values us statuses
Alejandro Alonso
parent
4003e1cb04
commit
74aba3394d
|
|
@ -31,10 +31,10 @@ bindOnce = @.taiga.bindOnce
|
||||||
module = angular.module("taigaAdmin")
|
module = angular.module("taigaAdmin")
|
||||||
|
|
||||||
#############################################################################
|
#############################################################################
|
||||||
## Project Values Controller
|
## Project values status Controller
|
||||||
#############################################################################
|
#############################################################################
|
||||||
|
|
||||||
class ProjectValuesController extends mixOf(taiga.Controller, taiga.PageMixin)
|
class ProjectValuesStatusController extends mixOf(taiga.Controller, taiga.PageMixin)
|
||||||
@.$inject = [
|
@.$inject = [
|
||||||
"$scope",
|
"$scope",
|
||||||
"$rootScope",
|
"$rootScope",
|
||||||
|
|
@ -54,17 +54,18 @@ class ProjectValuesController extends mixOf(taiga.Controller, taiga.PageMixin)
|
||||||
promise.then null, ->
|
promise.then null, ->
|
||||||
console.log "FAIL" #TODO
|
console.log "FAIL" #TODO
|
||||||
|
|
||||||
@scope.$on("admin:project-values:us-status:move", @.moveUsStatus)
|
@scope.$on("admin:project-values:status:move", @.moveStatus)
|
||||||
|
|
||||||
loadProject: ->
|
loadProject: ->
|
||||||
return @rs.projects.get(@scope.projectId).then (project) =>
|
return @rs.projects.get(@scope.projectId).then (project) =>
|
||||||
@scope.project = project
|
@scope.project = project
|
||||||
return project
|
return project
|
||||||
|
|
||||||
loadUsStatus: =>
|
loadStatus: =>
|
||||||
return @rs.userstories.listStatuses(@scope.projectId).then (usStatuses) =>
|
#TODO:
|
||||||
@scope.usStatuses = usStatuses
|
return @rs[@scope.resource].listStatuses(@scope.projectId).then (statuses) =>
|
||||||
@scope.maxUsStatusOrder = _.max(usStatuses, "order").order
|
@scope.statuses = statuses
|
||||||
|
@scope.maxStatusOrder = _.max(statuses, "order").order
|
||||||
|
|
||||||
loadInitialData: ->
|
loadInitialData: ->
|
||||||
promise = @repo.resolve({pslug: @params.pslug}).then (data) =>
|
promise = @repo.resolve({pslug: @params.pslug}).then (data) =>
|
||||||
|
|
@ -73,26 +74,26 @@ class ProjectValuesController extends mixOf(taiga.Controller, taiga.PageMixin)
|
||||||
|
|
||||||
return promise.then( => @q.all([
|
return promise.then( => @q.all([
|
||||||
@.loadProject(),
|
@.loadProject(),
|
||||||
@.loadUsStatus(),
|
@.loadStatus(),
|
||||||
]))
|
]))
|
||||||
|
|
||||||
moveUsStatus: (ctx, itemUsStatus, itemIndex) =>
|
moveStatus: (ctx, itemStatus, itemIndex) =>
|
||||||
usStatuses = @scope.usStatuses
|
statuses = @scope.statuses
|
||||||
r = usStatuses.indexOf(itemUsStatus)
|
r = statuses.indexOf(itemStatus)
|
||||||
usStatuses.splice(r, 1)
|
statuses.splice(r, 1)
|
||||||
usStatuses.splice(itemIndex, 0, itemUsStatus)
|
statuses.splice(itemIndex, 0, itemStatus)
|
||||||
_.each usStatuses, (usStatus, index) ->
|
_.each statuses, (usStatus, index) ->
|
||||||
usStatus.order = index
|
usStatus.order = index
|
||||||
|
|
||||||
@repo.saveAll(usStatuses)
|
@repo.saveAll(statuses)
|
||||||
|
|
||||||
module.controller("ProjectValuesController", ProjectValuesController)
|
module.controller("ProjectValuesStatusController", ProjectValuesStatusController)
|
||||||
|
|
||||||
#############################################################################
|
#############################################################################
|
||||||
## Project US Values Directive
|
## Project values status directive
|
||||||
#############################################################################
|
#############################################################################
|
||||||
|
|
||||||
ProjectUsStatusDirective = ($log, $repo, $confirm, $location) ->
|
ProjectStatusDirective = ($log, $repo, $confirm, $location) ->
|
||||||
|
|
||||||
#########################
|
#########################
|
||||||
## Drag & Drop Link
|
## Drag & Drop Link
|
||||||
|
|
@ -121,9 +122,9 @@ ProjectUsStatusDirective = ($log, $repo, $confirm, $location) ->
|
||||||
tdom.on "sortstop", (event, ui) ->
|
tdom.on "sortstop", (event, ui) ->
|
||||||
parentEl = ui.item.parent()
|
parentEl = ui.item.parent()
|
||||||
itemEl = ui.item
|
itemEl = ui.item
|
||||||
itemUsStatus = itemEl.scope().status
|
itemStatus = itemEl.scope().status
|
||||||
itemIndex = itemEl.index()
|
itemIndex = itemEl.index()
|
||||||
$scope.$broadcast("admin:project-values:us-status:move", itemUsStatus, itemIndex)
|
$scope.$broadcast("admin:project-values:status:move", itemStatus, itemIndex)
|
||||||
|
|
||||||
$scope.$on "$destroy", ->
|
$scope.$on "$destroy", ->
|
||||||
$el.off()
|
$el.off()
|
||||||
|
|
@ -134,14 +135,15 @@ ProjectUsStatusDirective = ($log, $repo, $confirm, $location) ->
|
||||||
|
|
||||||
linkStatus = ($scope, $el, $attrs) ->
|
linkStatus = ($scope, $el, $attrs) ->
|
||||||
$ctrl = $el.controller()
|
$ctrl = $el.controller()
|
||||||
|
statusType = $attrs.type
|
||||||
|
|
||||||
initializeNewUs = ->
|
initializeNewStatus = ->
|
||||||
$scope.newUs = {
|
$scope.newStatus = {
|
||||||
"name": ""
|
"name": ""
|
||||||
"is_closed": false
|
"is_closed": false
|
||||||
}
|
}
|
||||||
|
|
||||||
initializeNewUs()
|
initializeNewStatus()
|
||||||
submit = =>
|
submit = =>
|
||||||
promise = $repo.save($scope.project)
|
promise = $repo.save($scope.project)
|
||||||
promise.then ->
|
promise.then ->
|
||||||
|
|
@ -161,30 +163,30 @@ ProjectUsStatusDirective = ($log, $repo, $confirm, $location) ->
|
||||||
|
|
||||||
$el.on "click", ".show-add-new", (event) ->
|
$el.on "click", ".show-add-new", (event) ->
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
$el.find(".new-us-status").css('display': 'flex')
|
$el.find(".new-status").css('display': 'flex')
|
||||||
|
|
||||||
$el.on "click", ".add-new", (event) ->
|
$el.on "click", ".add-new", (event) ->
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
form = $el.find(".new-us-status").parents("form").checksley()
|
form = $el.find(".new-status").parents("form").checksley()
|
||||||
return if not form.validate()
|
return if not form.validate()
|
||||||
|
|
||||||
$scope.newUs.project = $scope.project.id
|
$scope.newStatus.project = $scope.project.id
|
||||||
$scope.newUs.order = $scope.maxUsStatusOrder + 1
|
$scope.newStatus.order = $scope.maxStatusOrder + 1
|
||||||
promise = $repo.create("userstory-statuses", $scope.newUs)
|
promise = $repo.create(statusType, $scope.newStatus)
|
||||||
promise.then =>
|
promise.then =>
|
||||||
$ctrl.loadUsStatus()
|
$ctrl.loadStatus()
|
||||||
$el.find(".new-us-status").hide()
|
$el.find(".new-status").hide()
|
||||||
initializeNewUs()
|
initializeNewStatus()
|
||||||
|
|
||||||
promise.then null, (data) ->
|
promise.then null, (data) ->
|
||||||
form.setErrors(data)
|
form.setErrors(data)
|
||||||
|
|
||||||
$el.on "click", ".delete-new", (event) ->
|
$el.on "click", ".delete-new", (event) ->
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
$el.find(".new-us-status").hide()
|
$el.find(".new-status").hide()
|
||||||
initializeNewUs()
|
initializeNewStatus()
|
||||||
|
|
||||||
$el.on "click", ".edit-us-status", (event) ->
|
$el.on "click", ".edit-status", (event) ->
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
target = angular.element(event.currentTarget)
|
target = angular.element(event.currentTarget)
|
||||||
|
|
||||||
|
|
@ -215,42 +217,17 @@ ProjectUsStatusDirective = ($log, $repo, $confirm, $location) ->
|
||||||
row.hide()
|
row.hide()
|
||||||
row.siblings(".visualization").css("display": "flex")
|
row.siblings(".visualization").css("display": "flex")
|
||||||
|
|
||||||
$el.on "click", ".delete-us-status", (event) ->
|
$el.on "click", ".delete-status", (event) ->
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
target = angular.element(event.currentTarget)
|
target = angular.element(event.currentTarget)
|
||||||
status = target.scope().status
|
status = target.scope().status
|
||||||
|
|
||||||
#TODO: i18n
|
#TODO: i18n
|
||||||
title = "Delete User Story status"
|
title = "Delete status"
|
||||||
subtitle = status.name
|
subtitle = status.name
|
||||||
$confirm.ask(title, subtitle).then =>
|
$confirm.ask(title, subtitle).then =>
|
||||||
$repo.remove(status).then =>
|
$repo.remove(status).then =>
|
||||||
$ctrl.loadUsStatus()
|
$ctrl.loadStatus()
|
||||||
|
|
||||||
$el.on "click", ".edition .current-color", (event) ->
|
|
||||||
# Showing the color selector
|
|
||||||
event.preventDefault()
|
|
||||||
event.stopPropagation()
|
|
||||||
target = angular.element(event.currentTarget)
|
|
||||||
status = target.scope().status
|
|
||||||
$el.find(".select-color").hide()
|
|
||||||
target.siblings(".select-color").show()
|
|
||||||
# Hide when click outside
|
|
||||||
body = angular.element("body")
|
|
||||||
body.on "click", (event) =>
|
|
||||||
if angular.element(event.target).parent(".select-color").length == 0
|
|
||||||
$el.find(".select-color").hide()
|
|
||||||
body.ubind("click")
|
|
||||||
|
|
||||||
|
|
||||||
$el.on "click", ".select-color .color", (event) ->
|
|
||||||
# Selecting one color on color selector
|
|
||||||
event.preventDefault()
|
|
||||||
target = angular.element(event.currentTarget)
|
|
||||||
status = target.scope().status
|
|
||||||
$scope.$apply ->
|
|
||||||
status.color = target.data("color")
|
|
||||||
$el.find(".select-color").hide()
|
|
||||||
|
|
||||||
link = ($scope, $el, $attrs) ->
|
link = ($scope, $el, $attrs) ->
|
||||||
linkDragAndDrop($scope, $el, $attrs)
|
linkDragAndDrop($scope, $el, $attrs)
|
||||||
|
|
@ -261,5 +238,50 @@ ProjectUsStatusDirective = ($log, $repo, $confirm, $location) ->
|
||||||
|
|
||||||
return {link:link}
|
return {link:link}
|
||||||
|
|
||||||
|
module.directive("tgProjectStatus", ["$log", "$tgRepo", "$tgConfirm", "$tgLocation", ProjectStatusDirective])
|
||||||
|
|
||||||
module.directive("tgProjectUsStatus", ["$log", "$tgRepo", "$tgConfirm", "$tgLocation", ProjectUsStatusDirective])
|
|
||||||
|
#############################################################################
|
||||||
|
## Color selection directive
|
||||||
|
#############################################################################
|
||||||
|
|
||||||
|
ColorSelectionDirective = () ->
|
||||||
|
|
||||||
|
#########################
|
||||||
|
## Color selection Link
|
||||||
|
#########################
|
||||||
|
|
||||||
|
link = ($scope, $el, $attrs, $model) ->
|
||||||
|
$ctrl = $el.controller()
|
||||||
|
|
||||||
|
$el.on "click", ".current-color", (event) ->
|
||||||
|
# Showing the color selector
|
||||||
|
event.preventDefault()
|
||||||
|
event.stopPropagation()
|
||||||
|
target = angular.element(event.currentTarget)
|
||||||
|
$el.find(".select-color").hide()
|
||||||
|
target.siblings(".select-color").show()
|
||||||
|
# Hide when click outside
|
||||||
|
body = angular.element("body")
|
||||||
|
body.on "click", (event) =>
|
||||||
|
if angular.element(event.target).parent(".select-color").length == 0
|
||||||
|
$el.find(".select-color").hide()
|
||||||
|
body.unbind("click")
|
||||||
|
|
||||||
|
$el.on "click", ".select-color .color", (event) ->
|
||||||
|
# Selecting one color on color selector
|
||||||
|
event.preventDefault()
|
||||||
|
target = angular.element(event.currentTarget)
|
||||||
|
$scope.$apply ->
|
||||||
|
$model.$modelValue.color = target.data("color")
|
||||||
|
$el.find(".select-color").hide()
|
||||||
|
|
||||||
|
$scope.$on "$destroy", ->
|
||||||
|
$el.off()
|
||||||
|
|
||||||
|
return {
|
||||||
|
link: link
|
||||||
|
require:"ngModel"
|
||||||
|
}
|
||||||
|
|
||||||
|
module.directive("tgColorSelection", ColorSelectionDirective)
|
||||||
|
|
|
||||||
|
|
@ -4,8 +4,8 @@ block head
|
||||||
title Taiga Project management web application with scrum in mind!
|
title Taiga Project management web application with scrum in mind!
|
||||||
|
|
||||||
block content
|
block content
|
||||||
div.wrapper(tg-project-us-status, ng-controller="ProjectValuesController as ctrl",
|
div.wrapper(tg-project-status, ng-controller="ProjectValuesStatusController as ctrl",
|
||||||
ng-init="section='admin'")
|
ng-init="section='admin'; resource='userstories'", type="userstory-statuses")
|
||||||
sidebar.menu-secondary.sidebar(tg-admin-navigation="project-values")
|
sidebar.menu-secondary.sidebar(tg-admin-navigation="project-values")
|
||||||
include views/modules/admin-menu
|
include views/modules/admin-menu
|
||||||
|
|
||||||
|
|
@ -20,4 +20,4 @@ block content
|
||||||
a.button.button-green.show-add-new(href="", title="Add New")
|
a.button.button-green.show-add-new(href="", title="Add New")
|
||||||
span Add new status
|
span Add new status
|
||||||
|
|
||||||
include views/modules/admin/project-us-status
|
include views/modules/admin/project-status
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@ section.colors-table
|
||||||
|
|
||||||
div.table-main
|
div.table-main
|
||||||
form.sortable
|
form.sortable
|
||||||
div(ng-repeat="status in usStatuses")
|
div(ng-repeat="status in statuses")
|
||||||
div.row.table-main.visualization
|
div.row.table-main.visualization
|
||||||
span.icon.icon-drag-v
|
span.icon.icon-drag-v
|
||||||
div.color-column
|
div.color-column
|
||||||
|
|
@ -16,15 +16,16 @@ section.colors-table
|
||||||
div.status-name
|
div.status-name
|
||||||
span {{ status.name }}
|
span {{ status.name }}
|
||||||
div.is-closed-column
|
div.is-closed-column
|
||||||
span {{ status.is_closed|yesNo }}
|
div.icon.icon-check-square(ng-show="status.is_closed")
|
||||||
div.options-column
|
div.options-column
|
||||||
a.edit-us-status.icon.icon-edit(href="", title="Edit value")
|
a.edit-status.icon.icon-edit(href="", title="Edit value")
|
||||||
a.delete-us-status.icon.icon-delete(href="", title="Delete value")
|
a.delete-status.icon.icon-delete(href="", title="Delete value")
|
||||||
|
|
||||||
div.row.table-main.edition.hidden
|
div.row.table-main.edition.hidden
|
||||||
div.color-column
|
div.color-column(tg-color-selection, ng-model="status")
|
||||||
div.current-color(style="background: {{ status.color }}")
|
div.current-color(style="background: {{ status.color }}")
|
||||||
include ../../components/select-color
|
include ../../components/select-color
|
||||||
|
|
||||||
div.status-name
|
div.status-name
|
||||||
input(name="name", type="text", placeholder="Write a name for the new status", ng-model="status.name", data-required="true", data-maxlength="255")
|
input(name="name", type="text", placeholder="Write a name for the new status", ng-model="status.name", data-required="true", data-maxlength="255")
|
||||||
div.is-closed-column
|
div.is-closed-column
|
||||||
|
|
@ -34,14 +35,15 @@ section.colors-table
|
||||||
a.cancel.icon.icon-delete(href="", title="Delete")
|
a.cancel.icon.icon-delete(href="", title="Delete")
|
||||||
|
|
||||||
form
|
form
|
||||||
div.row.table-main.new-us-status.hidden
|
div.row.table-main.new-status.hidden
|
||||||
div.color-column
|
div.color-column(tg-color-selection, ng-model="newStatus")
|
||||||
div.current-color(style="background: {{ status.color }}")
|
div.current-color(style="background: {{ newStatus.color }}")
|
||||||
include ../../components/select-color
|
include ../../components/select-color
|
||||||
|
|
||||||
div.status-name
|
div.status-name
|
||||||
input(name="name", type="text", placeholder="Write a name for the new status", ng-model="newUs.name", data-required="true", data-maxlength="255")
|
input(name="name", type="text", placeholder="Write a name for the new status", ng-model="newStatus.name", data-required="true", data-maxlength="255")
|
||||||
div.is-closed-column
|
div.is-closed-column
|
||||||
select(name="is_closed", ng-model="newUs.is_closed", ng-options="e.id as e.name for e in [{'id':true, 'name':'Yes'},{'id':false, 'name': 'No'}]", data-required="true")
|
select(name="is_closed", ng-model="newStatus.is_closed", ng-options="e.id as e.name for e in [{'id':true, 'name':'Yes'},{'id':false, 'name': 'No'}]", data-required="true")
|
||||||
div.options-column
|
div.options-column
|
||||||
a.add-new.icon.icon-floppy(href="", title="Add")
|
a.add-new.icon.icon-floppy(href="", title="Add")
|
||||||
a.delete-new.icon.icon-delete(href="", title="Delete")
|
a.delete-new.icon.icon-delete(href="", title="Delete")
|
||||||
|
|
@ -13,7 +13,8 @@
|
||||||
.row {
|
.row {
|
||||||
@include table-flex(stretch, center, flex, row, wrap, center);
|
@include table-flex(stretch, center, flex, row, wrap, center);
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
&.edition {
|
&.edition,
|
||||||
|
&.new-status {
|
||||||
padding-left: 50px;
|
padding-left: 50px;
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue