From 74aba3394d78a141e8468c396794142a3605c74f Mon Sep 17 00:00:00 2001
From: Alejandro Alonso <alejandro.alonso@kaleidos.net>
Date: Wed, 23 Jul 2014 10:39:42 +0200
Subject: [PATCH] Refactoring admin project values us statuses

---
 .../modules/admin/project-values.coffee       | 148 ++++++++++--------
 .../admin-project-values-us-status.jade       |   6 +-
 ...ect-us-status.jade => project-status.jade} |  22 +--
 app/styles/modules/common/colors-table.scss   |   3 +-
 4 files changed, 102 insertions(+), 77 deletions(-)
 rename app/partials/views/modules/admin/{project-us-status.jade => project-status.jade} (67%)

diff --git a/app/coffee/modules/admin/project-values.coffee b/app/coffee/modules/admin/project-values.coffee
index 7380dac9..d4af9835 100644
--- a/app/coffee/modules/admin/project-values.coffee
+++ b/app/coffee/modules/admin/project-values.coffee
@@ -31,10 +31,10 @@ bindOnce = @.taiga.bindOnce
 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 = [
         "$scope",
         "$rootScope",
@@ -54,17 +54,18 @@ class ProjectValuesController extends mixOf(taiga.Controller, taiga.PageMixin)
         promise.then null, ->
             console.log "FAIL" #TODO
 
-        @scope.$on("admin:project-values:us-status:move", @.moveUsStatus)
+        @scope.$on("admin:project-values:status:move", @.moveStatus)
 
     loadProject: ->
         return @rs.projects.get(@scope.projectId).then (project) =>
             @scope.project = project
             return project
 
-    loadUsStatus: =>
-        return @rs.userstories.listStatuses(@scope.projectId).then (usStatuses) =>
-            @scope.usStatuses = usStatuses
-            @scope.maxUsStatusOrder = _.max(usStatuses, "order").order
+    loadStatus: =>
+        #TODO:
+        return @rs[@scope.resource].listStatuses(@scope.projectId).then (statuses) =>
+            @scope.statuses = statuses
+            @scope.maxStatusOrder = _.max(statuses, "order").order
 
     loadInitialData: ->
         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([
             @.loadProject(),
-            @.loadUsStatus(),
+            @.loadStatus(),
         ]))
 
-    moveUsStatus: (ctx, itemUsStatus, itemIndex) =>
-        usStatuses = @scope.usStatuses
-        r = usStatuses.indexOf(itemUsStatus)
-        usStatuses.splice(r, 1)
-        usStatuses.splice(itemIndex, 0, itemUsStatus)
-        _.each usStatuses, (usStatus, index) ->
+    moveStatus: (ctx, itemStatus, itemIndex) =>
+        statuses = @scope.statuses
+        r = statuses.indexOf(itemStatus)
+        statuses.splice(r, 1)
+        statuses.splice(itemIndex, 0, itemStatus)
+        _.each statuses, (usStatus, 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
@@ -121,9 +122,9 @@ ProjectUsStatusDirective = ($log, $repo, $confirm, $location) ->
         tdom.on "sortstop", (event, ui) ->
             parentEl = ui.item.parent()
             itemEl = ui.item
-            itemUsStatus = itemEl.scope().status
+            itemStatus = itemEl.scope().status
             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", ->
             $el.off()
@@ -134,14 +135,15 @@ ProjectUsStatusDirective = ($log, $repo, $confirm, $location) ->
 
     linkStatus = ($scope, $el, $attrs) ->
         $ctrl = $el.controller()
+        statusType = $attrs.type
 
-        initializeNewUs = ->
-            $scope.newUs = {
+        initializeNewStatus = ->
+            $scope.newStatus = {
                 "name": ""
                 "is_closed": false
             }
 
-        initializeNewUs()
+        initializeNewStatus()
         submit = =>
             promise = $repo.save($scope.project)
             promise.then ->
@@ -161,30 +163,30 @@ ProjectUsStatusDirective = ($log, $repo, $confirm, $location) ->
 
         $el.on "click", ".show-add-new", (event) ->
             event.preventDefault()
-            $el.find(".new-us-status").css('display': 'flex')
+            $el.find(".new-status").css('display': 'flex')
 
         $el.on "click", ".add-new", (event) ->
             event.preventDefault()
-            form = $el.find(".new-us-status").parents("form").checksley()
+            form = $el.find(".new-status").parents("form").checksley()
             return if not form.validate()
 
-            $scope.newUs.project = $scope.project.id
-            $scope.newUs.order = $scope.maxUsStatusOrder + 1
-            promise = $repo.create("userstory-statuses", $scope.newUs)
+            $scope.newStatus.project = $scope.project.id
+            $scope.newStatus.order = $scope.maxStatusOrder + 1
+            promise = $repo.create(statusType, $scope.newStatus)
             promise.then =>
-                $ctrl.loadUsStatus()
-                $el.find(".new-us-status").hide()
-                initializeNewUs()
+                $ctrl.loadStatus()
+                $el.find(".new-status").hide()
+                initializeNewStatus()
 
             promise.then null, (data) ->
                 form.setErrors(data)
 
         $el.on "click", ".delete-new", (event) ->
             event.preventDefault()
-            $el.find(".new-us-status").hide()
-            initializeNewUs()
+            $el.find(".new-status").hide()
+            initializeNewStatus()
 
-        $el.on "click", ".edit-us-status", (event) ->
+        $el.on "click", ".edit-status", (event) ->
             event.preventDefault()
             target = angular.element(event.currentTarget)
 
@@ -215,42 +217,17 @@ ProjectUsStatusDirective = ($log, $repo, $confirm, $location) ->
             row.hide()
             row.siblings(".visualization").css("display": "flex")
 
-        $el.on "click", ".delete-us-status", (event) ->
+        $el.on "click", ".delete-status", (event) ->
             event.preventDefault()
             target = angular.element(event.currentTarget)
             status = target.scope().status
 
             #TODO: i18n
-            title = "Delete User Story status"
+            title = "Delete status"
             subtitle = status.name
             $confirm.ask(title, subtitle).then =>
                 $repo.remove(status).then =>
-                    $ctrl.loadUsStatus()
-
-        $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()
+                    $ctrl.loadStatus()
 
     link = ($scope, $el, $attrs) ->
         linkDragAndDrop($scope, $el, $attrs)
@@ -261,5 +238,50 @@ ProjectUsStatusDirective = ($log, $repo, $confirm, $location) ->
 
     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)
diff --git a/app/partials/admin-project-values-us-status.jade b/app/partials/admin-project-values-us-status.jade
index af9b48e9..105d8864 100644
--- a/app/partials/admin-project-values-us-status.jade
+++ b/app/partials/admin-project-values-us-status.jade
@@ -4,8 +4,8 @@ block head
     title Taiga  Project management web application with scrum in mind!
 
 block content
-    div.wrapper(tg-project-us-status, ng-controller="ProjectValuesController as ctrl",
-                ng-init="section='admin'")
+    div.wrapper(tg-project-status, ng-controller="ProjectValuesStatusController as ctrl",
+                ng-init="section='admin'; resource='userstories'", type="userstory-statuses")
         sidebar.menu-secondary.sidebar(tg-admin-navigation="project-values")
             include views/modules/admin-menu
 
@@ -20,4 +20,4 @@ block content
                 a.button.button-green.show-add-new(href="", title="Add New")
                     span Add new status
 
-            include views/modules/admin/project-us-status
+            include views/modules/admin/project-status
diff --git a/app/partials/views/modules/admin/project-us-status.jade b/app/partials/views/modules/admin/project-status.jade
similarity index 67%
rename from app/partials/views/modules/admin/project-us-status.jade
rename to app/partials/views/modules/admin/project-status.jade
index cc33b6bf..b2d9236b 100644
--- a/app/partials/views/modules/admin/project-us-status.jade
+++ b/app/partials/views/modules/admin/project-status.jade
@@ -8,7 +8,7 @@ section.colors-table
 
     div.table-main
         form.sortable
-            div(ng-repeat="status in usStatuses")
+            div(ng-repeat="status in statuses")
                 div.row.table-main.visualization
                     span.icon.icon-drag-v
                     div.color-column
@@ -16,15 +16,16 @@ section.colors-table
                     div.status-name
                         span {{ status.name }}
                     div.is-closed-column
-                        span {{ status.is_closed|yesNo }}
+                        div.icon.icon-check-square(ng-show="status.is_closed")
                     div.options-column
-                        a.edit-us-status.icon.icon-edit(href="", title="Edit value")
-                        a.delete-us-status.icon.icon-delete(href="", title="Delete value")
+                        a.edit-status.icon.icon-edit(href="", title="Edit value")
+                        a.delete-status.icon.icon-delete(href="", title="Delete value")
 
                 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 }}")
                         include ../../components/select-color
+
                     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")
                     div.is-closed-column
@@ -34,14 +35,15 @@ section.colors-table
                         a.cancel.icon.icon-delete(href="", title="Delete")
 
         form
-            div.row.table-main.new-us-status.hidden
-                div.color-column
-                    div.current-color(style="background: {{ status.color }}")
+            div.row.table-main.new-status.hidden
+                div.color-column(tg-color-selection, ng-model="newStatus")
+                    div.current-color(style="background: {{ newStatus.color }}")
                     include ../../components/select-color
+
                 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
-                    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
                     a.add-new.icon.icon-floppy(href="", title="Add")
                     a.delete-new.icon.icon-delete(href="", title="Delete")
diff --git a/app/styles/modules/common/colors-table.scss b/app/styles/modules/common/colors-table.scss
index 90db72b7..e2d815d9 100644
--- a/app/styles/modules/common/colors-table.scss
+++ b/app/styles/modules/common/colors-table.scss
@@ -13,7 +13,8 @@
     .row {
         @include table-flex(stretch, center, flex, row, wrap, center);
         padding: 1rem;
-        &.edition {
+        &.edition,
+        &.new-status {
             padding-left: 50px;
         }
         &:hover {