Refactor lightbox
Álex Hermida
parent
b1668eef9f
commit
b7bc5dd636
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
# and without now assigned users.
|
||||
getFilteredUsers = (text="") ->
|
||||
_filterUsers = (text, user) ->
|
||||
if selectedItem && _.find(selectedItem.assigned_users, (x) -> x == user.id)
|
||||
return false
|
||||
normalizeString = (string) ->
|
||||
normalizedString = string
|
||||
normalizedString = normalizedString.replace("Á", "A").replace("Ä", "A").replace("À", "A")
|
||||
normalizedString = normalizedString.replace("É", "E").replace("Ë", "E").replace("È", "E")
|
||||
normalizedString = normalizedString.replace("Í", "I").replace("Ï", "I").replace("Ì", "I")
|
||||
normalizedString = normalizedString.replace("Ó", "O").replace("Ö", "O").replace("Ò", "O")
|
||||
normalizedString = normalizedString.replace("Ú", "U").replace("Ü", "U").replace("Ù", "U")
|
||||
return normalizedString
|
||||
|
||||
username = user.full_name_display.toUpperCase()
|
||||
text = text.toUpperCase()
|
||||
return _.includes(username, text)
|
||||
filterUsers = (text, user) ->
|
||||
username = user.full_name_display.toUpperCase()
|
||||
username = normalizeString(username)
|
||||
text = text.toUpperCase()
|
||||
text = normalizeString(text)
|
||||
|
||||
users = _.clone($scope.activeUsers, true)
|
||||
users = _.filter(users, _.partial(_filterUsers, text))
|
||||
return users
|
||||
return _.includes(username, text)
|
||||
|
||||
# Render the specific list of users.
|
||||
render = (users) ->
|
||||
visibleUsers = _.slice(users, 0, 5)
|
||||
render = (assignedUsersIds, text) ->
|
||||
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) ->
|
||||
user.avatar = avatarService.getAvatar(user)
|
||||
# Add selected users
|
||||
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
|
||||
users: visibleUsers
|
||||
selected: selected
|
||||
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()
|
||||
render(users)
|
||||
selectedUsers = item.assigned_users
|
||||
render(selectedUsers)
|
||||
|
||||
lightboxService.open($el).then ->
|
||||
$el.find("input").focus()
|
||||
lightboxKeyboardNavigationService.init($el)
|
||||
|
||||
$scope.$watch "usersSearch", (searchingText) ->
|
||||
if not searchingText?
|
||||
return
|
||||
|
||||
users = getFilteredUsers(searchingText)
|
||||
render(users)
|
||||
$el.find("input").focus()
|
||||
if searchingText?
|
||||
render(selectedUsers, searchingText)
|
||||
$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()
|
||||
|
||||
|
|
|
|||
|
|
@ -1,25 +1,27 @@
|
|||
<% if (selected) { %>
|
||||
.user-list-single.is-active
|
||||
//- <% if (selected) { %>
|
||||
<% _.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 %>"
|
||||
src!="<%- selected.avatar.url %>"
|
||||
style!="background: <%- user.avatar.bg %>"
|
||||
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 %>")
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue