Refactor lightbox

app/coffee/modules/common/components.coffee

@@ -386,6 +386,12 @@ AssignedUsersDirective = ($rootscope, $confirm, $repo, $modelTransform, $templat
 
                 deleteAssignedUser(assignedUserIds)
 
+        $scope.$on "assigned-user:deleted", (ctx, assignedUserId) ->
+            assignedUsersIds = _.clone($model.$modelValue.assigned_users, false)
+            assignedUsersIds = _.pull(assignedUsersIds, assignedUserId)
+            assignedUsersIds = _.uniq(assignedUsersIds)
+            deleteAssignedUser(assignedUsersIds)
+
         $scope.$on "assigned-user:added", (ctx, assignedUserId) ->
             assignedUsers = _.clone($model.$modelValue.assigned_users, false)
             assignedUsers.push(assignedUserId)

app/coffee/modules/common/lightboxes.coffee

@@ -701,36 +701,51 @@ module.directive("tgLbAssignedto", ["lightboxService", "lightboxKeyboardNavigati
 
 AssignedUsersLightboxDirective = ($repo, lightboxService, lightboxKeyboardNavigationService, $template, $compile, avatarService) ->
     link = ($scope, $el, $attrs) ->
+        selectedUsers = []
         selectedItem = null
         usersTemplate = $template.get("common/lightbox/lightbox-assigned-to-users.html", true)
 
-        # Get prefiltered users by text
+        normalizeString = (string) ->
-        # and without now assigned users.
+            normalizedString = string
-        getFilteredUsers = (text="") ->
+            normalizedString = normalizedString.replace("Á", "A").replace("Ä", "A").replace("À", "A")
-            _filterUsers = (text, user) ->
+            normalizedString = normalizedString.replace("É", "E").replace("Ë", "E").replace("È", "E")
-                if selectedItem && _.find(selectedItem.assigned_users, (x) -> x == user.id)
+            normalizedString = normalizedString.replace("Í", "I").replace("Ï", "I").replace("Ì", "I")
-                    return false
+            normalizedString = normalizedString.replace("Ó", "O").replace("Ö", "O").replace("Ò", "O")
+            normalizedString = normalizedString.replace("Ú", "U").replace("Ü", "U").replace("Ù", "U")
+            return normalizedString
 
-                username = user.full_name_display.toUpperCase()
+        filterUsers = (text, user) ->
-                text = text.toUpperCase()
+            username = user.full_name_display.toUpperCase()
-                return _.includes(username, text)
+            username = normalizeString(username)
+            text = text.toUpperCase()
+            text = normalizeString(text)
 
-            users = _.clone($scope.activeUsers, true)
+            return _.includes(username, text)
-            users = _.filter(users, _.partial(_filterUsers, text))
-            return users
 
         # Render the specific list of users.
-        render = (users) ->
+        render = (assignedUsersIds, text) ->
-            visibleUsers = _.slice(users, 0, 5)
+            users = _.clone($scope.activeUsers, true)
+            users = _.sortBy(users, (o) -> if o.id is $scope.user.id then 0 else o.id)
+            users = _.filter(users, _.partial(filterUsers, text)) if text?
 
-            visibleUsers = _.map visibleUsers, (user) ->
+            # Add selected users
-                user.avatar = avatarService.getAvatar(user)
+            selected = []
+            _.map users, (user) ->
+                if user.id in assignedUsersIds
+                    user.avatar = avatarService.getAvatar(user)
+                    selected.push(user)
 
-                return user
+            # Filter users in searchs
+
+            visible = []
+            _.map users, (user) ->
+                if user.id not in assignedUsersIds
+                    user.avatar = avatarService.getAvatar(user)
+                    visible.push(user)
 
             ctx = {
-                selected: false
+                selected: selected
-                users: visibleUsers
+                users:  _.slice(visible, 0, 5)
                 showMore: users.length > 5
             }
 
@@ -744,20 +759,17 @@ AssignedUsersLightboxDirective = ($repo, lightboxService, lightboxKeyboardNaviga
 
         $scope.$on "assigned-user:add", (ctx, item) ->
             selectedItem = item
-            users = getFilteredUsers()
+            selectedUsers = item.assigned_users
-            render(users)
+            render(selectedUsers)
 
             lightboxService.open($el).then ->
                 $el.find("input").focus()
                 lightboxKeyboardNavigationService.init($el)
 
         $scope.$watch "usersSearch", (searchingText) ->
-            if not searchingText?
+            if searchingText?
-                return
+                render(selectedUsers, searchingText)
-
+                $el.find('input').focus()
-            users = getFilteredUsers(searchingText)
-            render(users)
-            $el.find("input").focus()
 
         $el.on "click", ".user-list-single", debounce 200, (event) ->
             closeLightbox()
@@ -769,14 +781,21 @@ AssignedUsersLightboxDirective = ($repo, lightboxService, lightboxKeyboardNaviga
                 $scope.usersSearch = null
                 $scope.$broadcast("assigned-user:added", target.data("user-id"), selectedItem)
 
+        $el.on "click", ".remove-assigned-to", (event) ->
+            event.preventDefault()
+            target = angular.element(event.currentTarget)
+            event.stopPropagation()
+
+            $scope.$apply ->
+                $scope.usersSearch = null
+                $scope.$broadcast("assigned-user:deleted", target.data("user-id"), selectedItem)
+            closeLightbox()
+
         $el.on "click", ".close", (event) ->
             event.preventDefault()
 
             closeLightbox()
 
-            $scope.$apply ->
-                $scope.usersSearch = null
-
         $scope.$on "$destroy", ->
             $el.off()
 

app/partials/common/lightbox/lightbox-assigned-to-users.jade

@@ -1,25 +1,27 @@
-<% if (selected) { %>
+//- <% if (selected) { %>
-.user-list-single.is-active
+<% _.each(selected, function(user) { %>
+.user-list-multiple.is-active(data-user-id!="<%- user.id %>")
     .user-list-avatar
         a(
             href=""
             title="{{'COMMON.ASSIGNED_TO' | translate}}"
         )
             img(
-                style!="background: <%- selected.avatar.bg %>"
+                style!="background: <%- user.avatar.bg %>"
-                src!="<%- selected.avatar.url %>"
+                src!="<%- user.avatar.url %>"
             )
     a.user-list-name(
         href=""
-        title!="<%- selected.full_name_display %>"
+        title!="<%- user.full_name_display %>"
         ng-non-bindable
     )
-        | <%-selected.full_name_display %>
+        | <%-user.full_name_display %>
     tg-svg.remove-assigned-to(
         svg-icon="icon-close",
-        svg-title-translate="COMMON.ASSIGNED_TO.REMOVE_ASSIGNED"
+        svg-title-translate="COMMON.ASSIGNED_TO.REMOVE_ASSIGNED",
+        data-user-id!="<%- user.id %>"
     )
-<% } %>
+<% }) %>
 
 <% _.each(users, function(user) { %>
 .user-list-single(data-user-id!="<%- user.id %>")

app/styles/components/user-list.scss

@@ -12,6 +12,19 @@
             border: 0;
         }
     }
+    .user-list-multiple {
+        align-content: center;
+        align-items: center;
+        background: transparent;
+        border-bottom: 1px solid $whitish;
+        display: flex;
+        padding: .25rem 0;
+        vertical-align: middle;
+
+        &:last-child {
+            border: 0;
+        }
+    }
     .user-list-avatar {
         flex-basis: 3rem;
         margin-right: .25rem;
@@ -61,6 +74,37 @@
             }
         }
     }
+
+    .user-list-multiple {
+        &:hover,
+        &.selected {
+            background: rgba(lighten($primary-light, 30%), .3);
+            cursor: pointer;
+        }
+        &:hover {
+            transition: background .3s linear;
+            transition-delay: .2s;
+        }
+        &.is-active {
+            background: rgba(lighten($primary-light, 30%), .3);
+            cursor: pointer;
+            position: relative;
+            transition: background .3s linear;
+            transition-delay: .1s;
+        }
+        .remove-assigned-to {
+            display: block;
+            fill: $grayer;
+            opacity: 1;
+            position: absolute;
+            right: 1rem;
+            top: 1.5rem;
+            transition: all .2s ease-in;
+            &:hover {
+                fill: $red;
+            }
+        }
+    }
 }
 
 .ticket-watchers {