Adding assigned to functionality in issue detail

app/coffee/modules/issues/detail.coffee

@@ -220,7 +220,6 @@ WatchersDirective = ($rootscope, $confirm) ->
     </div>""")
 
     renderWatchers = ($scope, $el, watcherIds, editable) ->
-        console.log "renderWatchers", watcherIds
         watchers = _.map(watcherIds, (watcherId) -> $scope.usersById[watcherId])
         html = template({watchers: watchers, editable:editable})
         $el.html(html)
@@ -259,3 +258,60 @@ WatchersDirective = ($rootscope, $confirm) ->
     return {link:link, require:"ngModel"}
 
 module.directive("tgWatchers", ["$rootScope", "$tgConfirm", WatchersDirective])
+
+#############################################################################
+## Assigned to directive
+#############################################################################
+
+AssignedToDirective = ($rootscope) ->
+    #TODO: i18n
+    template = _.template("""
+        <% if (assignedTo) { %>
+        <div class="user-avatar">
+            <a href="" title="Assigned to" class="avatar"><img src="<%= assignedTo.photo %>" alt="<%= assignedTo.full_name_display %>"></a>
+        </div>
+        <% } %>
+        <div class="assigned-to">
+            <span class="assigned-title">Assigned to</span>
+            <span class="user-assigned">
+            <% if (assignedTo) { %>
+            <%= assignedTo.full_name_display %>
+            <% } else { %>
+            --
+            <% } %>
+            </span>
+            <% if (editable) { %>
+            <a href="" title="delete assignment" class="icon icon-delete"></a>
+            <a href="" title="edit assignment" class="icon icon-edit"></a>
+            <% } %>
+        </div>
+    """)
+
+    renderAssignedTo = ($scope, $el, assignedToId, editable) ->
+        assignedTo = null
+        assignedTo = $scope.usersById[assignedToId] if assignedToId?
+        html = template({assignedTo: assignedTo, editable:editable})
+        $el.html(html)
+
+    link = ($scope, $el, $attrs, $model) ->
+        editable = $attrs.editable?
+        $scope.$watch $attrs.ngModel, (assignedToId) ->
+            renderAssignedTo($scope, $el, assignedToId, editable)
+
+        $el.on "click", ".icon-edit", (event) ->
+            event.preventDefault()
+            $rootscope.$broadcast("assigned-to:add")
+
+        $el.on "click", ".icon-delete", (event) ->
+            event.preventDefault()
+            $scope.$apply ->
+                $model.$setViewValue(null)
+
+        $scope.$on "assigned-to:added", (ctx, user) ->
+            $scope.$apply ->
+                $model.$setViewValue(user.id)
+
+
+    return {link:link, require:"ngModel"}
+
+module.directive("tgAssignedTo", ["$rootScope", AssignedToDirective])

app/coffee/modules/issues/lightboxes.coffee

@@ -71,3 +71,31 @@ AddWatcherDirective = () ->
     return {link:link}
 
 module.directive("tgLbAddWatcher", AddWatcherDirective)
+
+
+AddAssignedToDirective = () ->
+    link = ($scope, $el, $attrs) ->
+        $scope.watcherSearch = {}
+        console.log "ASDASDASD"
+        $scope.$on "assigned-to:add", ->
+            $el.removeClass("hidden")
+            $scope.$apply ->
+                $scope.watcherSearch = {}
+
+        $scope.$on "$destroy", ->
+            $el.off()
+
+        $el.on "click", ".close", (event) ->
+            event.preventDefault()
+            $el.addClass("hidden")
+
+        $el.on "click", ".watcher-single", (event) ->
+            event.preventDefault()
+            target = angular.element(event.currentTarget)
+            watcher = target.scope().user
+            $el.addClass("hidden")
+            $scope.$broadcast("assigned-to:added", watcher)
+
+    return {link:link}
+
+module.directive("tgLbAddAssignedTo", AddAssignedToDirective)

app/partials/issues-detail-edit.jade

@@ -42,8 +42,6 @@ block content
                 include views/modules/comments
                 // include views/modules/activity
         sidebar.menu-secondary.sidebar
-            // TODO: should be replaced with correct html
-            // for issues detail
             h1
                 span Open
                 span.us-detail-status In progress
@@ -62,17 +60,19 @@ block content
                     span.status-status new
                     span.level-name status
 
-            include views/components/assigned-to
+            section.us-detail-assigned-to(tg-assigned-to, ng-model="issue.assigned_to", editable="true")
             section.watchers(tg-watchers, ng-model="issue.watchers", editable="true")
 
-            // NOTE: only for user story?
+            section.us-detail-settings
-            // section.us-detail-settings
+                a.button.button-gray(href="", title="Client requirement") Client requirement
-            //     a.button.button-gray(href="", title="Client requirement") Client requirement
+                a.button.button-gray(href="", title="Team requirement") Team requirement
-            //     a.button.button-gray(href="", title="Team requirement") Team requirement
+                a.button.button-red(href="", title="Block") Block
-            //     a.button.button-red(href="", title="Block") Block
 
         div.lightbox.lightbox_block.hidden
             include views/modules/lightbox_block
 
-        div.lightbox.lightbox_watchers.hidden(tg-lb-add-watcher)
+        div.lightbox.lightbox_select_user.hidden(tg-lb-add-assigned-to)
-            include views/modules/lightbox_watchers
+            include views/modules/lightbox-assigned-to
+
+        div.lightbox.lightbox_select_user.hidden(tg-lb-add-watcher)
+            include views/modules/lightbox_users

app/partials/issues-detail.jade

@@ -19,6 +19,7 @@ block content
                     div.issue-nav
                         a.icon.icon-arrow-left(href="", title="next issue")
                         a.icon.icon-arrow-right(href="", title="previous issue")
+
                 // div.blocked-warning
                 //     span.icon.icon-warning
                 //     p.blocked Blocked!
@@ -44,8 +45,6 @@ block content
                 include views/modules/comments
                 // include views/modules/activity
         sidebar.menu-secondary.sidebar
-            // TODO: should be replaced with correct html
-            // for issues detail
             h1
                 span Open
                 span.us-detail-status In progress
@@ -64,14 +63,13 @@ block content
                     span.status-status new
                     span.level-name status
 
-            include views/components/assigned-to
+            section.us-detail-assigned-to(tg-assigned-to, ng-model="issue.assigned_to")
             section.watchers(tg-watchers, ng-model="issue.watchers")
 
-            // NOTE: only for user story?
+            section.us-detail-settings
-            // section.us-detail-settings
+                a.button.button-gray(href="", title="Client requirement") Client requirement
-            //     a.button.button-gray(href="", title="Client requirement") Client requirement
+                a.button.button-gray(href="", title="Team requirement") Team requirement
-            //     a.button.button-gray(href="", title="Team requirement") Team requirement
+                a.button.button-red(href="", title="Block") Block
-            //     a.button.button-red(href="", title="Block") Block
 
         div.lightbox.lightbox_block.hidden
             include views/modules/lightbox_block

app/partials/views/modules/lightbox-assigned-to.jade

@@ -0,0 +1,16 @@
+a.close(href="", title="close")
+    span.icon.icon-delete
+form
+    h2.title Select assigned to
+    fieldset
+        input(type="text", data-maxlength="500", placeholder="Search for users", ng-model="watcherSearch.$")
+
+    div.watchers
+        div.watcher-single(ng-repeat="user in users|filter:watcherSearch:strict|limitTo:5 track by user.id")
+            div.watcher-avatar
+                a.avatar(href="", title="Assigned to")
+                    img(tg-bo-src="user.photo", tg-bo-alt="user.photo")
+            a.watcher-name(href="", tg-bo-title="user.full_name_display", tg-bo-html="user.full_name_display")
+
+        div.more-watchers
+            span ...too many users, keep filtering

app/styles/layout/us-detail.scss

@@ -228,12 +228,6 @@
         @include table-flex-child(3, 0);
         margin-left: 1rem;
         margin-top: 15px;
-        &:hover {
-            .icon-edit {
-                @include transition(opacity .2s ease-in);
-                opacity: 1;
-            }
-        }
         .assigned-title {
             color: $gray-light;
             display: block;
@@ -243,9 +237,8 @@
             color: $green-taiga;
         }
         .icon-edit {
-            @include transition(opacity .2s ease-in);
             color: $gray-light;
-            opacity: 0;
+            opacity: 1;
             position: absolute;
             right: 1rem;
             top: 1rem;

app/styles/modules/lightbox.scss

@@ -290,7 +290,7 @@
     }
 }
 
-.lightbox_watchers {
+.lightbox_select_user {
     form {
         @include table-flex-child(0, 600px, 0, 600px);
     }