From b7cc9e9c1e4cd5197f38d7052870a87ba3061a18 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Barrag=C3=A1n=20Merino?=
 <david.barragan@kaleidos.net>
Date: Wed, 21 Sep 2016 21:10:27 +0200
Subject: [PATCH] Fix related userstories view for users without edit
 permission

---
 .../related-userstories-controller.coffee     | 10 +++++--
 .../related-userstories.jade                  |  2 +-
 .../related-userstory-row.jade                |  5 +++-
 .../related-userstory-row.scss                | 30 ++++++++++---------
 4 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/app/modules/epics/related-userstories/related-userstories-controller.coffee b/app/modules/epics/related-userstories/related-userstories-controller.coffee
index 0ab2fd1f..d2624ec6 100644
--- a/app/modules/epics/related-userstories/related-userstories-controller.coffee
+++ b/app/modules/epics/related-userstories/related-userstories-controller.coffee
@@ -20,12 +20,18 @@
 module = angular.module("taigaEpics")
 
 class RelatedUserStoriesController
-    @.$inject = ["tgEpicsService"]
+    @.$inject = [
+        "tgProjectService",
+        "tgEpicsService"
+    ]
 
-    constructor: (@epicsService) ->
+    constructor: (@projectService, @epicsService) ->
         @.sectionName = "Epics"
         @.showCreateRelatedUserstoriesLightbox = false
 
+    userCanSort: () ->
+        return @projectService.hasPermission("modify_epic")
+
     loadRelatedUserstories: () ->
         @epicsService.listRelatedUserStories(@.epic)
             .then (userstories) =>
diff --git a/app/modules/epics/related-userstories/related-userstories.jade b/app/modules/epics/related-userstories/related-userstories.jade
index 35a848b7..e1f8a79e 100644
--- a/app/modules/epics/related-userstories/related-userstories.jade
+++ b/app/modules/epics/related-userstories/related-userstories.jade
@@ -15,7 +15,7 @@ section.related-userstories
     )
         tg-related-userstory-row.row(
             tg-repeat="us in vm.userstories track by us.get('id')"
-            ng-class="{closed: us.get('is_closed'), blocked: us.get('is_blocked')}"
+            ng-class="{closed: us.get('is_closed'), blocked: us.get('is_blocked'), sortable: vm.userCanSort()}"
             userstory="us"
             epic="vm.epic"
             project="vm.project"
diff --git a/app/modules/epics/related-userstories/related-userstory-row/related-userstory-row.jade b/app/modules/epics/related-userstories/related-userstory-row/related-userstory-row.jade
index c7790332..a4d74a88 100644
--- a/app/modules/epics/related-userstories/related-userstory-row/related-userstory-row.jade
+++ b/app/modules/epics/related-userstories/related-userstory-row/related-userstory-row.jade
@@ -1,5 +1,6 @@
 tg-svg.icon-drag(
     svg-icon="icon-drag"
+    tg-check-permission="modify_epic"
 )
 
 .userstory-name
@@ -33,7 +34,9 @@ tg-svg.icon-drag(
     )
 
 .status
-    span.userstory-status(ng-style="{'color': vm.userstory.getIn(['status_extra_info', 'color'])}") {{vm.userstory.getIn(['status_extra_info', 'name'])}}
+    span.userstory-status(
+        ng-style="{'color': vm.userstory.getIn(['status_extra_info', 'color'])}"
+    ) {{vm.userstory.getIn(['status_extra_info', 'name'])}}
 
 .assigned-to-column
     figure.avatar
diff --git a/app/modules/epics/related-userstories/related-userstory-row/related-userstory-row.scss b/app/modules/epics/related-userstories/related-userstory-row/related-userstory-row.scss
index ad3cabc3..c9fc2f32 100644
--- a/app/modules/epics/related-userstories/related-userstory-row/related-userstory-row.scss
+++ b/app/modules/epics/related-userstories/related-userstory-row/related-userstory-row.scss
@@ -2,26 +2,28 @@ tg-related-userstory-row {
     @include font-size(small);
     align-items: center;
     border-bottom: 1px solid $whitish;
-    cursor: move;
     display: flex;
     padding: .5rem 0 .5rem .5rem;
-    &:hover {
-        background: rgba($primary-light, .05);
-        .userstory-settings {
-            opacity: 1;
-            transition: all .2s ease-in;
+    &.sortable {
+        cursor: move;
+        &:hover {
+            background: rgba($primary-light, .05);
+            .userstory-settings {
+                opacity: 1;
+                transition: all .2s ease-in;
+            }
+            .icon-drag {
+                opacity: 1;
+            }
         }
         .icon-drag {
-            opacity: 1;
+            @include svg-size(.75rem);
+            cursor: move;
+            fill: $whitish;
+            opacity: 0;
+            transition: opacity .1s;
         }
     }
-    .icon-drag {
-        @include svg-size(.75rem);
-        cursor: move;
-        fill: $whitish;
-        opacity: 0;
-        transition: opacity .1s;
-    }
     .status {
         flex-shrink: 0;
         position: relative;