Splited buttons on diferente directives

app/coffee/modules/common/components.coffee

@@ -280,6 +280,91 @@ AssignedToDirective = ($rootscope, $confirm, $tgrepo) ->
 
 module.directive("tgAssignedTo", ["$rootScope", "$tgConfirm", "$tgRepo", AssignedToDirective])
 
+#############################################################################
+## Block Button directive
+#############################################################################
+
+BlockButtonDirective = ($rootscope) ->
+    template = _.template("""
+      <a class="button button-gray item-block">Block</a>
+      <a class="button button-red item-unblock">Unblock</a>
+    """)
+
+    link = ($scope, $el, $attrs, $model) ->
+        render = _.once (item) ->
+            $el.html(template())
+
+        refresh = (item) ->
+            if item?.is_blocked
+                $el.find('.item-block').hide()
+                $el.find('.item-unblock').show()
+            else
+                $el.find('.item-block').show()
+                $el.find('.item-unblock').hide()
+
+        $scope.$watch $attrs.ngModel, (item) ->
+            return if not item
+            render(item)
+            refresh(item)
+
+        $scope.$on "$destroy", ->
+            $el.off()
+
+        $el.on "click", ".item-block", (event) ->
+            $rootscope.$broadcast("block", $model.$modelValue)
+
+        $el.on "click", ".item-unblock", (event) ->
+            $rootscope.$broadcast("unblock", $model.$modelValue)
+
+    return {
+        link: link
+        restrict: "EA"
+        require: "ngModel"
+    }
+
+module.directive("tgBlockButton", ["$rootScope", BlockButtonDirective])
+
+#############################################################################
+## Delete Button directive
+#############################################################################
+
+DeleteButtonDirective = ($tgrepo, $confirm, $navurls, $location) ->
+    template = _.template("""
+      <a href="" class="button button-red">Delete</a>
+    """)
+
+    link = ($scope, $el, $attrs, $model) ->
+        render = _.once (item) ->
+            $el.html(template())
+
+        $scope.$watch $attrs.ngModel, (item) ->
+            return if not item
+            render(item)
+
+        $scope.$on "$destroy", ->
+            $el.off()
+
+        $el.on "click", ".button", (event) ->
+            #TODO: i18n
+            title = "Delete User Story"
+            subtitle = $model.$modelValue.subject
+
+            $confirm.ask(title, subtitle).then (finish) =>
+                promise = $tgrepo.remove($model.$modelValue)
+                promise.then =>
+                    finish()
+                    $location.path($navurls.resolve($attrs.onDeleteGoToUrl, {project: $attrs.projectSlug}))
+                promise.then null, =>
+                    finish(false)
+                    $confirm.notify("error")
+
+    return {
+        link: link
+        restrict: "EA"
+        require: "ngModel"
+    }
+
+module.directive("tgDeleteButton", ["$tgRepo", "$tgConfirm", "$tgNavUrls", "$tgLocation", DeleteButtonDirective])
 
 #############################################################################
 ## Common list directives

app/coffee/modules/issues/detail.coffee

@@ -130,26 +130,6 @@ class IssueDetailController extends mixOf(taiga.Controller, taiga.PageMixin)
                       .then(=> @.loadUsersAndRoles())
                       .then(=> @.loadIssue())
 
-    block: ->
-        @rootscope.$broadcast("block", @scope.issue)
-
-    unblock: ->
-        @rootscope.$broadcast("unblock", @scope.issue)
-
-    delete: ->
-        # TODO: i18n
-        title = "Delete Issue"
-        message = @scope.issue.subject
-
-        @confirm.askOnDelete(title, message).then (finish) =>
-            promise = @.repo.remove(@scope.issue)
-            promise.then =>
-                finish()
-                @location.path(@navUrls.resolve("project-issues", {project: @scope.project.slug}))
-            promise.then null, =>
-                finish(false)
-                @confirm.notify("error")
-
 module.controller("IssueDetailController", IssueDetailController)
 
 

app/coffee/modules/tasks/detail.coffee

@@ -121,12 +121,6 @@ class TaskDetailController extends mixOf(taiga.Controller, taiga.PageMixin)
                       .then(=> @.loadUsersAndRoles())
                       .then(=> @.loadTask())
 
-    block: ->
-        @rootscope.$broadcast("block", @scope.task)
-
-    unblock: ->
-        @rootscope.$broadcast("unblock", @scope.task)
-
 module.controller("TaskDetailController", TaskDetailController)
 
 
@@ -255,33 +249,19 @@ TaskStatusDirective = () ->
 
 module.directive("tgTaskStatus", TaskStatusDirective)
 
-TaskButtonsDirective = ($rootscope, $tgrepo, $confirm, $navurls, $location) ->
+TaskIsIocaineButtonDirective = ($rootscope, $tgrepo) ->
     template = _.template("""
       <fieldset title="Feeling a bit overwhelmed by a task? Make sure others know about it by clicking on Iocaine when editing a task. It's possible to become immune to this (fictional) deadly poison by consuming small amounts over time just as it's possible to get better at what you do by occasionally taking on extra challenges!">
         <label for="is-iocaine" class="clickable button button-gray is-iocaine">Iocaine</label>
         <input type="checkbox" id="is-iocaine" name="is-iocaine"/>
       </fieldset>
-      <a class="button button-gray clickable task-block">Block</a>
-      <a class="button button-red clickable task-unblock">Unblock</a>
-      <% if (deletePerm) { %>
-        <a href="" class="button button-red task-delete">Delete</a>
-      <% } %>
     """)
 
     link = ($scope, $el, $attrs, $model) ->
         render = _.once (us) ->
-            deletePerm = $scope.project.my_permissions.indexOf("delete_us") != -1
+            $el.html(template())
-            html = template({deletePerm: deletePerm})
-            $el.html(html)
 
         refresh = (us) ->
-            if us?.is_blocked
-                $el.find('.task-block').hide()
-                $el.find('.task-unblock').show()
-            else
-                $el.find('.task-block').show()
-                $el.find('.task-unblock').hide()
-
             if us?.is_iocaine
                 $el.find('.is-iocaine').addClass('active')
             else
@@ -302,25 +282,6 @@ TaskButtonsDirective = ($rootscope, $tgrepo, $confirm, $navurls, $location) ->
             $tgrepo.save($model.$modelValue).then ->
                 $rootscope.$broadcast("history:reload")
 
-        $el.on "click", ".task-block", (event) ->
-            $rootscope.$broadcast("block", $model.$modelValue)
-
-        $el.on "click", ".task-unblock", (event) ->
-            $rootscope.$broadcast("unblock", $model.$modelValue)
-
-        $el.on "click", ".task-delete", (event) ->
-            #TODO: i18n
-            title = "Delete Task"
-            subtitle = $model.$modelValue.subject
-
-            $confirm.ask(title, subtitle).then (finish) =>
-                promise = $tgrepo.remove($model.$modelValue)
-                promise.then =>
-                    finish()
-                    $location.path($navurls.resolve("project-backlog", {project: $scope.project.slug}))
-                promise.then null, =>
-                    finish(false)
-                    $confirm.notify("error")
 
     return {
         link: link
@@ -328,4 +289,4 @@ TaskButtonsDirective = ($rootscope, $tgrepo, $confirm, $navurls, $location) ->
         require: "ngModel"
     }
 
-module.directive("tgTaskButtons", ["$rootScope", "$tgRepo", "$tgConfirm", "$tgNavUrls", "$tgLocation", TaskButtonsDirective])
+module.directive("tgTaskIsIocaineButton", ["$rootScope", "$tgRepo", TaskIsIocaineButtonDirective])

app/coffee/modules/userstories/detail.coffee

@@ -482,42 +482,17 @@ UsEstimationDirective = ($log) ->
 
 module.directive("tgUsEstimation", UsEstimationDirective)
 
-UsButtonsDirective = ($rootscope, $tgrepo, $confirm, $navurls, $location) ->
+UsTeamRequirementButtonDirective = ($rootscope, $tgrepo) ->
     template = _.template("""
-      <fieldset>
+      <label for="team-requirement" class="button button-gray team-requirement">Team requirement</label>
-        <label for="client-requirement" class="button button-gray client-requirement">Client requirement</label>
+      <input type="checkbox" id="team-requirement" name="team-requirement"/>
-        <input type="checkbox" id="client-requirement" name="client-requirement"/>
-      </fieldset>
-      <fieldset>
-        <label for="team-requirement" class="button button-gray team-requirement">Team requirement</label>
-        <input type="checkbox" id="team-requirement" name="team-requirement"/>
-      </fieldset>
-      <a class="button button-gray us-block">Block</a>
-      <a class="button button-red us-unblock">Unblock</a>
-      <% if (deletePerm) { %>
-        <a href="" class="button button-red us-delete">Delete</a>
-      <% } %>
     """)
 
     link = ($scope, $el, $attrs, $model) ->
         render = _.once (us) ->
-            deletePerm = $scope.project.my_permissions.indexOf("delete_us") != -1
+            $el.html(template())
-            html = template({deletePerm: deletePerm})
-            $el.html(html)
 
         refresh = (us) ->
-            if us?.is_blocked
-                $el.find('.us-block').hide()
-                $el.find('.us-unblock').show()
-            else
-                $el.find('.us-block').show()
-                $el.find('.us-unblock').hide()
-
-            if us?.client_requirement
-                $el.find('.client-requirement').addClass('active')
-            else
-                $el.find('.client-requirement').removeClass('active')
-
             if us?.team_requirement
                 $el.find('.team-requirement').addClass('active')
             else
@@ -531,6 +506,44 @@ UsButtonsDirective = ($rootscope, $tgrepo, $confirm, $navurls, $location) ->
         $scope.$on "$destroy", ->
             $el.off()
 
+        $el.on "click", ".team-requirement", (event) ->
+            us = $model.$modelValue.clone()
+            us.team_requirement = not us.team_requirement
+            $model.$setViewValue(us)
+            $tgrepo.save($model.$modelValue).then ->
+                $rootscope.$broadcast("history:reload")
+
+    return {
+        link: link
+        restrict: "EA"
+        require: "ngModel"
+    }
+module.directive("tgUsTeamRequirementButton", ["$rootScope", "$tgRepo", UsTeamRequirementButtonDirective])
+
+UsClientRequirementButtonDirective = ($rootscope, $tgrepo) ->
+    template = _.template("""
+      <label for="client-requirement" class="button button-gray client-requirement">Client requirement</label>
+      <input type="checkbox" id="client-requirement" name="client-requirement"/>
+    """)
+
+    link = ($scope, $el, $attrs, $model) ->
+        render = _.once (us) ->
+            $el.html(template())
+
+        refresh = (us) ->
+            if us?.client_requirement
+                $el.find('.client-requirement').addClass('active')
+            else
+                $el.find('.client-requirement').removeClass('active')
+
+        $scope.$watch $attrs.ngModel, (us) ->
+            return if not us
+            render(us)
+            refresh(us)
+
+        $scope.$on "$destroy", ->
+            $el.off()
+
         $el.on "click", ".client-requirement", (event) ->
             us = $model.$modelValue.clone()
             us.client_requirement = not us.client_requirement
@@ -538,37 +551,9 @@ UsButtonsDirective = ($rootscope, $tgrepo, $confirm, $navurls, $location) ->
             $tgrepo.save($model.$modelValue).then ->
                 $rootscope.$broadcast("history:reload")
 
-        $el.on "click", ".team-requirement", (event) ->
-            us = $model.$modelValue.clone()
-            us.team_requirement = not us.team_requirement
-            $model.$setViewValue(us)
-            $tgrepo.save($model.$modelValue).then ->
-                $rootscope.$broadcast("history:reload")
-
-        $el.on "click", ".us-block", (event) ->
-            $rootscope.$broadcast("block", $model.$modelValue)
-
-        $el.on "click", ".us-unblock", (event) ->
-            $rootscope.$broadcast("unblock", $model.$modelValue)
-
-        $el.on "click", ".us-delete", (event) ->
-            #TODO: i18n
-            title = "Delete User Story"
-            subtitle = $model.$modelValue.subject
-
-            $confirm.ask(title, subtitle).then (finish) =>
-                promise = $tgrepo.remove($model.$modelValue)
-                promise.then =>
-                    finish()
-                    $location.path($navurls.resolve("project-backlog", {project: $scope.project.slug}))
-                promise.then null, =>
-                    finish(false)
-                    $confirm.notify("error")
-
     return {
         link: link
         restrict: "EA"
         require: "ngModel"
     }
-
+module.directive("tgUsClientRequirementButton", ["$rootScope", "$tgRepo", UsClientRequirementButtonDirective])
-module.directive("tgUsButtons", ["$rootScope", "$tgRepo", "$tgConfirm", "$tgNavUrls", "$tgLocation", UsButtonsDirective])

app/partials/issues-detail.jade

@@ -47,8 +47,11 @@ block content
 
             section.us-detail-settings
                tg-promote-issue-to-us-button(ng-model="issue")
-               a.button.button-gray.clickable(title="Click to block the issue", ng-show="!issue.is_blocked", ng-click="ctrl.block()") Block
+               div(tg-block-button, ng-model="issue")
-               a.button.button-red(title="Click to delete the issue", tg-check-permission="delete_issue", ng-click="ctrl.delete()", href="") Delete
+               div(tg-check-permission="delete_issue", tg-delete-button,
+                   on-delete-go-to-url="project-issues",
+                   project-slug="{{ project.slug }}" ng-model="issue")
 
+        div.lightbox.lightbox-block.hidden(tg-lb-block, title="Blocking issue", ng-model="issue")
         div.lightbox.lightbox-select-user(tg-lb-assignedto)
         div.lightbox.lightbox-select-user(tg-lb-watchers)

app/partials/task-detail.jade

@@ -49,7 +49,12 @@ block content
             section.us-status(tg-task-status, ng-model="task")
             section.us-assigned-to(tg-assigned-to, ng-model="task")
             section.watchers(tg-watchers, ng-model="task")
-            section.us-detail-settings(tg-task-buttons, ng-model="task")
+            section.us-detail-settings
+               fieldset(tg-task-is-iocaine-button, ng-model="task")
+               div(tg-block-button, ng-model="task")
+               div(tg-check-permission="delete_task", tg-delete-button,
+                   on-delete-go-to-url="project-backlog",
+                   project-slug="{{ project.slug }}" ng-model="task")
 
         div.lightbox.lightbox-block.hidden(tg-lb-block, title="Blocking task", ng-model="task")
         div.lightbox.lightbox-select-user(tg-lb-assignedto)

app/partials/us-detail.jade

@@ -54,8 +54,14 @@ block content
             section.us-assigned-to(tg-assigned-to, ng-model="us")
             section.us-created-by(tg-created-by, ng-model="us")
             section.watchers(tg-watchers, ng-model="us")
-            section.us-detail-settings(tg-us-buttons, ng-model="us")
+            section.us-detail-settings
+                fieldset(tg-us-team-requirement-button, ng-model="us")
+                fieldset(tg-us-client-requirement-button, ng-model="us")
+                div(tg-block-button, ng-model="us")
+                div(tg-check-permission="delete_us", tg-delete-button,
+                    on-delete-go-to-url="project-backlog",
+                    project-slug="{{ project.slug }}" ng-model="us")
 
-        div.lightbox.lightbox-block.hidden(tg-lb-block, title="Blocking issue", ng-model="us")
+        div.lightbox.lightbox-block.hidden(tg-lb-block, title="Blocking us", ng-model="us")
         div.lightbox.lightbox-select-user.hidden(tg-lb-assignedto)
         div.lightbox.lightbox-select-user.hidden(tg-lb-watchers)