From 4c89ff36697423094798f1109b2b012776f4524c 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 16:13:00 +0200
Subject: [PATCH] Disable color selector if the user doesn\t have permission to
 edit epic

---
 .../color-selector/color-selector.controller.coffee    | 10 +++++++++-
 .../color-selector/color-selector.directive.coffee     |  3 ++-
 .../components/color-selector/color-selector.jade      | 10 +++++++++-
 .../components/color-selector/color-selector.scss      |  3 +++
 app/partials/epic/epic-detail.jade                     |  1 +
 5 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/app/modules/components/color-selector/color-selector.controller.coffee b/app/modules/components/color-selector/color-selector.controller.coffee
index e183adfe..47838f23 100644
--- a/app/modules/components/color-selector/color-selector.controller.coffee
+++ b/app/modules/components/color-selector/color-selector.controller.coffee
@@ -22,11 +22,19 @@ getDefaulColorList = taiga.getDefaulColorList
 
 
 class ColorSelectorController
-    constructor: () ->
+    @.$inject = [
+        "tgProjectService",
+    ]
+
+    constructor: (@projectService) ->
         @.colorList = getDefaulColorList()
         @.checkIsColorRequired()
         @.displayColorList = false
 
+    userCanChangeColor: () ->
+        return true if not @.requiredPerm
+        return @projectService.hasPermission(@.requiredPerm)
+
     checkIsColorRequired: () ->
         if !@.isColorRequired
             @.colorList = _.dropRight(@.colorList)
diff --git a/app/modules/components/color-selector/color-selector.directive.coffee b/app/modules/components/color-selector/color-selector.directive.coffee
index cf5aa8f2..f020e408 100644
--- a/app/modules/components/color-selector/color-selector.directive.coffee
+++ b/app/modules/components/color-selector/color-selector.directive.coffee
@@ -56,7 +56,8 @@ ColorSelectorDirective = ($timeout) ->
         bindToController: {
             isColorRequired: "=",
             onSelectColor: "&",
-            initColor: "="
+            initColor: "=",
+            requiredPerm: "@"
         },
         scope: {},
     }
diff --git a/app/modules/components/color-selector/color-selector.jade b/app/modules/components/color-selector/color-selector.jade
index 7a472f02..d4213b62 100644
--- a/app/modules/components/color-selector/color-selector.jade
+++ b/app/modules/components/color-selector/color-selector.jade
@@ -1,4 +1,12 @@
-.color-selector
+//- Read only mode
+.color-selector(ng-if="!vm.userCanChangeColor()")
+    .tag-color.disabled.e2e-open-color-selector(
+        ng-class="{'empty-color': !vm.color}"
+        ng-style="{'background': vm.color}"
+    )
+
+//- Read & Edit mode
+.color-selector(ng-if="vm.userCanChangeColor()")
     .tag-color.e2e-open-color-selector(
         ng-click="vm.toggleColorList()"
         ng-class="{'empty-color': !vm.color}"
diff --git a/app/modules/components/color-selector/color-selector.scss b/app/modules/components/color-selector/color-selector.scss
index 6bf35ad9..3f5a9bc0 100644
--- a/app/modules/components/color-selector/color-selector.scss
+++ b/app/modules/components/color-selector/color-selector.scss
@@ -18,6 +18,9 @@
         border-radius: 0;
         margin: 0;
         transition: background .3s ease-out;
+        &.disabled {
+            cursor: auto;
+        }
         &.empty-color {
             @include empty-color(34);
         }
diff --git a/app/partials/epic/epic-detail.jade b/app/partials/epic/epic-detail.jade
index dcaa775e..52bb688c 100644
--- a/app/partials/epic/epic-detail.jade
+++ b/app/partials/epic/epic-detail.jade
@@ -23,6 +23,7 @@ div.wrapper(
                         is-color-required="true"
                         init-color="epic.color"
                         on-select-color="ctrl.onSelectColor(color)"
+                        required-perm="modify_epic"
                     )
                     tg-detail-header(
                         item="epic"