Merge pull request #1046 from taigaio/enhancement/3924/vote-listing

Upvote and Downvote issues from listing

CHANGELOG.md

@@ -12,6 +12,7 @@
 - Display the current user (me) at first in assignment lightbox (thanks to [@mikaoelitiana](https://github.com/mikaoelitiana))
 - Add a new permissions to allow add comments instead of use the existent modify permission for this purpose.
 - Ability to edit comments, view edition history and redesign comments module UI
+- Upvote and downvote issues from the issues list.
 
 ### Misc
 - Lots of small and not so small bugfixes.

app/coffee/modules/issues/list.coffee

@@ -62,6 +62,7 @@ class IssuesController extends mixOf(taiga.Controller, taiga.PageMixin, taiga.Fi
                   @navUrls, @events, @analytics, @translate, @errorHandlingService) ->
         @scope.sectionName = "Issues"
         @scope.filters = {}
+        @.voting = false
 
         if _.isEmpty(@location.search())
             filters = @rs.issues.getFilters(@params.pslug)
@@ -315,6 +316,27 @@ class IssuesController extends mixOf(taiga.Controller, taiga.PageMixin, taiga.Fi
     addIssuesInBulk: ->
         @rootscope.$broadcast("issueform:bulk", @scope.projectId)
 
+    upVoteIssue: (issueId) ->
+        @.voting = issueId
+        onSuccess = =>
+            @.loadIssues()
+            @.voting = null
+        onError = =>
+            @confirm.notify("error")
+            @.voting = null
+
+        return @rs.issues.upvote(issueId).then(onSuccess, onError)
+
+    downVoteIssue: (issueId) ->
+        @.voting = issueId
+        onSuccess = =>
+            @.loadIssues()
+            @.voting = null
+        onError = =>
+            @confirm.notify("error")
+            @.voting = null
+
+        return @rs.issues.downvote(issueId).then(onSuccess, onError)
 
 module.controller("IssuesController", IssuesController)
 

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

@@ -16,12 +16,24 @@ section.issues-table.basic-table(ng-class="{empty: !issues.length}")
         div.level-field(tg-listitem-type="issue")
         div.level-field(tg-listitem-severity="issue")
         div.level-field(tg-listitem-priority="issue")
-        div.votes(
+        div.votes.ng-animate-disabled(
-            ng-class="{'inactive': !issue.total_voters, 'is-voted': issue.is_voter}"
+            ng-class="{'inactive': !issue.total_voters}"
+            ng-if="!issue.is_voter"
             title="{{ 'COMMON.VOTE_BUTTON.COUNTER_TITLE'|translate:{total:issue.total_voters||0}:'messageformat' }}"
+            ng-click="ctrl.upVoteIssue(issue.id)"
+            tg-loading="ctrl.voting == issue.id"
         )
             tg-svg(svg-icon="icon-upvote")
-            span {{ ::issue.total_voters }}
+            span {{ issue.total_voters }}
+        div.votes.ng-animate-disabled(
+            ng-class="{'is-voted': issue.is_voter}"
+            ng-if="issue.is_voter"
+            title="{{ 'COMMON.VOTE_BUTTON.COUNTER_TITLE'|translate:{total:issue.total_voters||0}:'messageformat' }}"
+            ng-click="ctrl.downVoteIssue(issue.id)"
+            tg-loading="ctrl.voting == issue.id"
+        )
+            tg-svg(svg-icon="icon-upvote")
+            span {{ issue.total_voters }}
         div.subject
             a(
                 href=""

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

@@ -59,16 +59,22 @@
     }
     .votes {
         color: $gray;
+        cursor: pointer;
         flex-basis: 75px;
         flex-shrink: 0;
         text-align: center;
         width: 75px;
+        &:hover {
+            color: $primary-light;
+            transition: all .2s linear;
+            svg {
+                fill: $primary-light;
+                transition: all .2s linear;
+            }
+        }
         &.inactive {
             color: $gray-light;
         }
-        &.is-voted {
-            color: $primary-light;
-        }
         svg {
             @include svg-size(.75rem);
             fill: $gray;
@@ -76,6 +82,22 @@
             vertical-align: middle;
         }
     }
+    .is-voted {
+        color: $primary-light;
+        transition: all .2s linear;
+        svg {
+            fill: $primary-light;
+            transition: all .2s linear;
+        }
+        &:hover {
+            color: $red-light;
+            svg {
+                fill: $red-light;
+                transform: rotate(180deg);
+            }
+
+        }
+    }
     .subject {
         overflow: hidden;
         padding-right: 1rem;