Refactoring lightboxes.
Andrey Antukh
parent
489c4ea02a
commit
83919e92dc
|
|
@ -24,10 +24,10 @@ module = angular.module("taigaCommon")
|
|||
bindOnce = @.taiga.bindOnce
|
||||
|
||||
#############################################################################
|
||||
## Block Directive
|
||||
## Block Lightbox Directive
|
||||
#############################################################################
|
||||
|
||||
BlockDirective = ->
|
||||
BlockLightboxDirective = ->
|
||||
link = ($scope, $el, $attrs, $model) ->
|
||||
title = $attrs.title
|
||||
$el.find("h2.title").text(title)
|
||||
|
|
@ -55,9 +55,13 @@ BlockDirective = ->
|
|||
|
||||
$el.addClass("hidden")
|
||||
|
||||
return {link:link, require:"ngModel"}
|
||||
return {
|
||||
templateUrl: "/partials/views/modules/lightbox_block.html"
|
||||
link:link,
|
||||
require:"ngModel"
|
||||
}
|
||||
|
||||
module.directive("tgLbBlock", BlockDirective)
|
||||
module.directive("tgLbBlock", BlockLightboxDirective)
|
||||
|
||||
|
||||
#############################################################################
|
||||
|
|
@ -203,43 +207,42 @@ module.directive("tgLbCreateBulkUserstories", [
|
|||
## AssignedTo Lightbox Directive
|
||||
#############################################################################
|
||||
|
||||
usersTemplate = _.template("""
|
||||
<% if (selected) { %>
|
||||
<div class="watcher-single active">
|
||||
<div class="watcher-avatar">
|
||||
<a href="" title="Assigned to" class="avatar">
|
||||
<img src="<%= selected.photo %>"/>
|
||||
</a>
|
||||
</div>
|
||||
<a href="" title="<%- selected.full_name_display %>" class="watcher-name">
|
||||
<%-selected.full_name_display %>
|
||||
</a>
|
||||
<a href="" title="Remove assigned" class="icon icon-delete remove-assigned-to"></a>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
<% _.each(users, function(user) { %>
|
||||
<div class="watcher-single" data-user-id="<%- user.id %>">
|
||||
<div class="watcher-avatar">
|
||||
<a href="#" title="Assigned to" class="avatar">
|
||||
<img src="<%= user.photo %>" />
|
||||
</a>
|
||||
</div>
|
||||
<a href="" title="<%- user.full_name_display %>" class="watcher-name">
|
||||
<%- user.full_name_display %>
|
||||
</a>
|
||||
</div>
|
||||
<% }) %>
|
||||
|
||||
<% if (showMore) { %>
|
||||
<div ng-show="filteringUsers" class="more-watchers">
|
||||
<span>...too many users, keep filtering</span>
|
||||
</div>
|
||||
<% } %>
|
||||
""")
|
||||
|
||||
AssignedToLightboxDirective = ($repo) ->
|
||||
template = _.template("""
|
||||
<% if (selected) { %>
|
||||
<div class="watcher-single active">
|
||||
<div class="watcher-avatar">
|
||||
<a href="" title="Assigned to" class="avatar">
|
||||
<img src="<%= selected.photo %>"/>
|
||||
</a>
|
||||
</div>
|
||||
<a href="" title="<%- selected.full_name_display %>" class="watcher-name">
|
||||
<%-selected.full_name_display %>
|
||||
</a>
|
||||
<a href="" title="Remove assigned" class="icon icon-delete remove-assigned-to"></a>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
<% _.each(users, function(user) { %>
|
||||
<div class="watcher-single" data-user-id="<%- user.id %>">
|
||||
<div class="watcher-avatar">
|
||||
<a href="#" title="Assigned to" class="avatar">
|
||||
<img src="<%= user.photo %>" />
|
||||
</a>
|
||||
</div>
|
||||
<a href="" title="<%- user.full_name_display %>" class="watcher-name">
|
||||
<%- user.full_name_display %>
|
||||
</a>
|
||||
</div>
|
||||
<% }) %>
|
||||
|
||||
<% if (showMore) { %>
|
||||
<div ng-show="filteringUsers" class="more-watchers">
|
||||
<span>...too many users, keep filtering</span>
|
||||
</div>
|
||||
<% } %>
|
||||
""")
|
||||
|
||||
|
||||
link = ($scope, $el, $attrs) ->
|
||||
selectedUser = null
|
||||
selectedItem = null
|
||||
|
|
@ -262,10 +265,11 @@ AssignedToLightboxDirective = ($repo) ->
|
|||
showMore: users.length > 5
|
||||
}
|
||||
|
||||
html = template(ctx)
|
||||
html = usersTemplate(ctx)
|
||||
$el.find("div.watchers").html(html)
|
||||
|
||||
$scope.$on "assigned-to:add", (ctx, item) ->
|
||||
console.log $scope.usersSearch
|
||||
selectedItem = item
|
||||
assignedToId = item.assigned_to
|
||||
selectedUser = $scope.usersById[assignedToId]
|
||||
|
|
@ -322,3 +326,74 @@ AssignedToLightboxDirective = ($repo) ->
|
|||
|
||||
|
||||
module.directive("tgLbAssignedto", ["$tgRepo", AssignedToLightboxDirective])
|
||||
|
||||
|
||||
#############################################################################
|
||||
## Watchers Lightbox directive
|
||||
#############################################################################
|
||||
|
||||
WatchersLightboxDirective = ($repo) ->
|
||||
link = ($scope, $el, $attrs) ->
|
||||
selectedItem = null
|
||||
|
||||
# Get prefiltered users by text
|
||||
# and without now watched users.
|
||||
getFilteredUsers = (text="") ->
|
||||
_filterUsers = (text, user) ->
|
||||
if _.find(selectedItem.watchers, (x) -> x == user.id)
|
||||
return false
|
||||
|
||||
username = user.full_name_display.toUpperCase()
|
||||
text = text.toUpperCase()
|
||||
return _.contains(username, text)
|
||||
|
||||
users = _.clone($scope.users, true)
|
||||
users = _.filter(users, _.partial(_filterUsers, text))
|
||||
return users
|
||||
|
||||
# Render the specific list of users.
|
||||
render = (users) ->
|
||||
$el.find("input").focus()
|
||||
ctx = {
|
||||
selected: false
|
||||
users: _.first(users, 5)
|
||||
showMore: users.length > 5
|
||||
}
|
||||
|
||||
html = usersTemplate(ctx)
|
||||
$el.find("div.watchers").html(html)
|
||||
|
||||
# updateScopeFilteringUsers = () ->
|
||||
# $scope.filteredUsers = _.difference($scope.users, watchers)
|
||||
|
||||
$scope.$on "watcher:add", (ctx, item) ->
|
||||
console.log "JKAJA", item
|
||||
selectedItem = item
|
||||
|
||||
users = getFilteredUsers()
|
||||
render(users)
|
||||
|
||||
$el.removeClass("hidden")
|
||||
|
||||
$el.on "click", ".watcher-single", (event) ->
|
||||
$el.addClass("hidden")
|
||||
|
||||
event.preventDefault()
|
||||
target = angular.element(event.currentTarget)
|
||||
|
||||
$scope.$apply ->
|
||||
$scope.$broadcast("watcher:added", target.data("user-id"))
|
||||
|
||||
$el.on "click", ".close", (event) ->
|
||||
event.preventDefault()
|
||||
$el.addClass("hidden")
|
||||
|
||||
$scope.$on "$destroy", ->
|
||||
$el.off()
|
||||
|
||||
return {
|
||||
templateUrl: "/partials/views/modules/lightbox_users.html"
|
||||
link:link
|
||||
}
|
||||
|
||||
module.directive("tgLbWatchers", ["$tgRepo", WatchersLightboxDirective])
|
||||
|
|
|
|||
|
|
@ -115,41 +115,3 @@ module.directive("tgLbCreateIssue", [
|
|||
# CreateIssueDirective
|
||||
# ])
|
||||
|
||||
#############################################################################
|
||||
## Watchers Lightbox directive
|
||||
#############################################################################
|
||||
|
||||
# FIXME: rename to: WatchersLightboxDirective/tgLbWatchers
|
||||
|
||||
AddWatcherDirective = ->
|
||||
link = ($scope, $el, $attrs) ->
|
||||
$scope.usersSearch = {}
|
||||
watchers = []
|
||||
|
||||
updateScopeFilteringUsers = () ->
|
||||
$scope.filteredUsers = _.difference($scope.users, watchers)
|
||||
|
||||
$scope.$on "watcher:add", ->
|
||||
updateScopeFilteringUsers()
|
||||
$el.removeClass("hidden")
|
||||
$scope.$apply ->
|
||||
$scope.usersSearch = {}
|
||||
|
||||
$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
|
||||
watchers.push watcher
|
||||
$el.addClass("hidden")
|
||||
$scope.$broadcast("watcher:added", watcher)
|
||||
|
||||
return {link:link}
|
||||
|
||||
module.directive("tgLbAddWatcher", AddWatcherDirective)
|
||||
|
|
|
|||
|
|
@ -32,17 +32,12 @@ block content
|
|||
sidebar.menu-secondary.sidebar
|
||||
section.us-status(tg-issue-status, ng-model="issue", editable="true")
|
||||
section.us-assigned-to(tg-assigned-to, ng-model="issue", editable="true")
|
||||
section.watchers(tg-watchers, ng-model="issue.watchers", editable="true")
|
||||
section.watchers(tg-watchers, ng-model="issue", editable="true")
|
||||
|
||||
section.us-detail-settings
|
||||
a.button.button-gray.clickable(ng-show="!issue.is_blocked", ng-click="ctrl.block()") Block
|
||||
a.button.button-red(ng-click="ctrl.delete()", href="") Delete
|
||||
|
||||
div.lightbox.lightbox_block.hidden(tg-lb-block, title="Blocking issue", ng-model="issue")
|
||||
include views/modules/lightbox_block
|
||||
|
||||
div.lightbox.lightbox_select_user.hidden(tg-lb-assignedto)
|
||||
include views/modules/lightbox-assigned-to
|
||||
|
||||
div.lightbox.lightbox_select_user.hidden(tg-lb-add-watcher)
|
||||
include views/modules/lightbox_users
|
||||
div.lightbox.lightbox_select_user.hidden(tg-lb-watchers)
|
||||
|
|
|
|||
|
|
@ -48,7 +48,4 @@ block content
|
|||
sidebar.menu-secondary.sidebar
|
||||
section.us-status(tg-issue-status, ng-model="issue")
|
||||
section.us-assigned-to(tg-assigned-to, ng-model="issue")
|
||||
section.watchers(tg-watchers, ng-model="issue.watchers")
|
||||
|
||||
div.lightbox.lightbox_block.hidden
|
||||
include views/modules/lightbox_block
|
||||
section.watchers(tg-watchers, ng-model="issue")
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ block content
|
|||
sidebar.menu-secondary.sidebar
|
||||
section.us-status(tg-task-status, ng-model="task", editable="true")
|
||||
section.us-assigned-to(tg-assigned-to, ng-model="task", editable="true")
|
||||
section.watchers(tg-watchers, ng-model="task.watchers", editable="true")
|
||||
section.watchers(tg-watchers, ng-model="task", editable="true")
|
||||
|
||||
section.us-detail-settings
|
||||
fieldset
|
||||
|
|
@ -43,10 +43,5 @@ block content
|
|||
a.button.button-red(ng-click="ctrl.delete()", href="") Delete
|
||||
|
||||
div.lightbox.lightbox_block.hidden(tg-lb-block, title="Blocking task", ng-model="task")
|
||||
include views/modules/lightbox_block
|
||||
|
||||
div.lightbox.lightbox_select_user.hidden(tg-lb-assignedto)
|
||||
include views/modules/lightbox-assigned-to
|
||||
|
||||
div.lightbox.lightbox_select_user.hidden(tg-lb-add-watcher)
|
||||
include views/modules/lightbox_users
|
||||
div.lightbox.lightbox_select_user.hidden(tg-lb-watchers)
|
||||
|
|
|
|||
|
|
@ -48,10 +48,7 @@ block content
|
|||
sidebar.menu-secondary.sidebar
|
||||
section.us-status(tg-task-status, ng-model="task")
|
||||
section.us-assigned-to(tg-assigned-to, ng-model="task")
|
||||
section.watchers(tg-watchers, ng-model="task.watchers")
|
||||
section.watchers(tg-watchers, ng-model="task")
|
||||
|
||||
section.us-detail-settings
|
||||
span.button.button-gray(href="", title="Is iocaine", ng-class="task.is_iocaine ? 'active' : ''") Iocaine
|
||||
|
||||
div.lightbox.lightbox_block.hidden
|
||||
include views/modules/lightbox_block
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ block content
|
|||
sidebar.menu-secondary.sidebar
|
||||
section.us-status(tg-us-status-detail, ng-model="us", editable="true")
|
||||
section.us-assigned-to(tg-assigned-to, ng-model="us", editable="true")
|
||||
section.watchers(tg-watchers, ng-model="us.watchers", editable="true")
|
||||
section.watchers(tg-watchers, ng-model="us", editable="true")
|
||||
|
||||
section.us-detail-settings
|
||||
fieldset
|
||||
|
|
@ -46,10 +46,5 @@ block content
|
|||
a.button.button-red(ng-click="ctrl.delete()", href="") Delete
|
||||
|
||||
div.lightbox.lightbox_block.hidden(tg-lb-block, title="Blocking issue", ng-model="us")
|
||||
include views/modules/lightbox_block
|
||||
|
||||
div.lightbox.lightbox_select_user.hidden(tg-lb-assignedto)
|
||||
include views/modules/lightbox-assigned-to
|
||||
|
||||
div.lightbox.lightbox_select_user.hidden(tg-lb-add-watcher)
|
||||
include views/modules/lightbox_users
|
||||
div.lightbox.lightbox_select_user.hidden(tg-lb-watchers)
|
||||
|
|
|
|||
|
|
@ -47,11 +47,8 @@ block content
|
|||
sidebar.menu-secondary.sidebar
|
||||
section.us-status(tg-us-status-detail, ng-model="us")
|
||||
section.us-assigned-to(tg-assigned-to, ng-model="us")
|
||||
section.watchers(tg-watchers, ng-model="us.watchers")
|
||||
section.watchers(tg-watchers, ng-model="us")
|
||||
|
||||
section.us-detail-settings
|
||||
span.button.button-gray(href="", title="Client requirement", ng-class="us.client_requirement ? 'active' : ''") Client requirement
|
||||
span.button.button-gray(href="", title="Team requirement", ng-class="us.team_requirement ? 'active' : ''") Team requirement
|
||||
|
||||
div.lightbox.lightbox_block.hidden
|
||||
include views/modules/lightbox_block
|
||||
|
|
|
|||
|
|
@ -3,14 +3,5 @@ a.close(href="", title="close")
|
|||
form
|
||||
h2.title Add watchers
|
||||
fieldset
|
||||
input(type="text", data-maxlength="500", placeholder="Search for users", ng-model="usersSearch.$")
|
||||
|
||||
div.watchers
|
||||
div.watcher-single(ng-repeat="user in filteredUsers|filter:usersSearch: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
|
||||
input(type="text", data-maxlength="500", placeholder="Search for users", ng-model="usersSearch")
|
||||
div.watchers //- The content of this is rendered by directive
|
||||
|
|
|
|||
Loading…
Reference in New Issue