Making issue status editable on the listing

app/coffee/modules/common/popovers.coffee

@@ -28,8 +28,6 @@ module = angular.module("taigaCommon")
 ## UserStory status Directive (popover for change status)
 #############################################################################
 
-# FIXME: change to less generic name.
-
 UsStatusDirective = ($repo, popoverService) ->
     ###
     Print the status of a US and a popover to change it.

app/coffee/modules/issues/list.coffee

@@ -593,3 +593,79 @@ IssuesFiltersDirective = ($log, $location) ->
 
 module.directive("tgIssuesFilters", ["$log", "$tgLocation", IssuesFiltersDirective])
 module.directive("tgIssues", ["$log", "$tgLocation", IssuesDirective])
+
+
+
+
+
+
+#############################################################################
+## Issue status Directive (popover for change status)
+#############################################################################
+
+IssueStatusInlineEditionDirective = ($repo, popoverService) ->
+    ###
+    Print the status of a Issue and a popover to change it.
+    - tg-issue-status: The user story
+
+    Example:
+
+      div.status(tg-issue-status="issue")
+        a.issue-status(href="", title="Status Name")
+
+    NOTE: This directive need 'issueStatusById' and 'project'.
+    ###
+    selectionTemplate = _.template("""
+    <ul class="popover pop-status">
+        <% _.forEach(statuses, function(status) { %>
+        <li>
+            <a href="" class="status" title="<%- status.name %>" data-status-id="<%- status.id %>">
+                <%- status.name %>
+            </a>
+        </li>
+        <% }); %>
+    </ul>""")
+
+    updateIssueStatus = ($el, issue, issueStatusById) ->
+        issueStatusDomParent = $el.find(".issue-status")
+        issueStatusDom = $el.find(".issue-status .issue-status-bind")
+
+        if issueStatusById[issue.status]
+            issueStatusDom.text(issueStatusById[issue.status].name)
+            issueStatusDomParent.css('color', issueStatusById[issue.status].color)
+
+    link = ($scope, $el, $attrs) ->
+        $ctrl = $el.controller()
+        issue = $scope.$eval($attrs.tgIssueStatusInlineEdition)
+
+        $el.on "click", ".issue-status", (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)
+            issue.status = target.data("status-id")
+            $el.find(".pop-status").popover().close()
+            updateIssueStatus($el, issue, $scope.issueStatusById)
+
+            $scope.$apply () ->
+                $repo.save(issue).then
+
+        taiga.bindOnce $scope, "project", (project) ->
+            $el.append(selectionTemplate({ 'statuses':  project.issue_statuses }))
+            updateIssueStatus($el, issue, $scope.issueStatusById)
+
+            # If the user has not enough permissions the click events are unbinded
+            if project.my_permissions.indexOf("modify_issue") == -1
+                $el.unbind("click")
+                $el.find("a").addClass("not-clickable")
+
+        $scope.$on "$destroy", ->
+            $el.off()
+
+    return {link: link}
+
+module.directive("tgIssueStatusInlineEdition", ["$tgRepo", IssueStatusInlineEditionDirective])

app/partials/views/modules/issues-table.jade

@@ -15,7 +15,12 @@ section.issues-table.basic-table(ng-class="{empty: !issues.length}")
             a(href="", tg-nav="project-issues-detail:project=project.slug,ref=issue.ref")
                 span(tg-bo-ref="issue.ref")
                 span(tg-bo-bind="issue.subject")
-        div.issue-field(tg-listitem-issue-status="issue")
+
+        div.issue-field(tg-issue-status-inline-edition="issue")
+            a.issue-status(href="", title="Status Name")
+                span.issue-status-bind
+                span.icon.icon-arrow-bottom(tg-check-permission, permission="modify_issue")
+
         div.created-field(tg-bo-bind="issue.created_date")
         div.assigned-field(tg-listitem-assignedto="issue")
 

app/styles/modules/issues/issues-table.scss

@@ -9,6 +9,9 @@
             background: lighten($green-taiga, 60%);
             @include transition (background .2s ease-in);
         }
+        .icon {
+            display: inline;
+        }
     }
     .row-selected {
         background: lighten($green-taiga, 60%);
@@ -59,4 +62,11 @@
         padding: 0 1rem;
         text-align: left;
     }
+    .pop-status {
+        @include popover(200px, 0, 65%, '', '');
+        &.fix {
+            bottom: 0;
+            top: auto;
+        }
+    }
 }