Refactor tg-us-status directive: Add tg-us-status-burtton directive

app/coffee/modules/userstories/detail.coffee

@@ -611,6 +611,81 @@ UsEstimationDirective = ($rootScope, $repo, $confirm) ->
 module.directive("tgUsEstimation", ["$rootScope", "$tgRepo", "$tgConfirm", UsEstimationDirective])
 
 
+#############################################################################
+## User story status button directive
+#############################################################################
+
+UsStatusButtonDirective = ($rootScope, $repo) ->
+    # Display the status of a US and you can edit it.
+    #
+    # Example:
+    #     tg-us-status-button(ng-model="us")
+    #
+    # Requirements:
+    #   - Us object (ng-model)
+    #   - scope.statusById object
+
+    template = _.template("""
+    <div class="status-data clickable">
+        <span class="level" style="background-color:<%= status.color %>"></span>
+        <span class="status-status"><%= status.name %></span>
+        <span class="icon icon-arrow-bottom"></span>
+        <span class="level-name">status</span>
+
+        <ul class="popover pop-status">
+            <% _.each(statuses, function(st) { %>
+            <li><a href="" class="status" title="<%- st.name %>"
+                   data-status-id="<%- st.id %>"><%- st.name %></a></li>
+            <% }); %>
+        </ul>
+    </div>
+    """) #TODO: i18n
+
+    link = ($scope, $el, $attrs, $model) ->
+        render = (us) =>
+            status = $scope.statusById[us.status]
+
+            html = template({
+                status: status
+                statuses: $scope.statusList
+            })
+            $el.html(html)
+
+        $el.on "click", ".status-data", (event) ->
+            event.preventDefault()
+            event.stopPropagation()
+
+            $el.find(".pop-status").popover().open()
+
+        $el.on "click", ".status", (event) ->
+            event.preventDefault()
+            event.stopPropagation()
+            target = angular.element(event.currentTarget)
+
+            $.fn.popover().closeAll()
+
+            us = $model.$modelValue.clone()
+            us.status = target.data("status-id")
+
+            $model.$setViewValue(us)
+            $repo.save($model.$modelValue).then ->
+                $rootScope.$broadcast("history:reload")
+
+        $scope.$watch $attrs.ngModel, (us) ->
+            render(us) if us
+
+        $scope.$on "$destroy", ->
+            $el.off()
+
+    return {
+        link: link
+        restrict: "EA"
+        require: "ngModel"
+    }
+
+module.directive("tgUsStatusButton", ["$rootScope", "$tgRepo", UsStatusButtonDirective])
+
+
 #############################################################################
 ## User story team requirements button directive
 #############################################################################

app/partials/us-detail.jade

@@ -55,6 +55,7 @@ block content
                 div.us-detail-progress-bar(tg-us-tasks-progress-display, ng-model="tasks")
                 div.us-created-by(tg-created-by-display, ng-model="us")
                 tg-us-estimation(ng-model="us", save-after-modify="true")
+                tg-us-status-button.issue-data(ng-model="us")
 
             section.us-assigned-to(tg-assigned-to, ng-model="us")