taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Refactoring lightboxes.

stable
Andrey Antukh 2014-07-23 13:08:43 +02:00
parent 489c4ea02a
commit 83919e92dc
9 changed files with 127 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
app/coffee/modules/common/lightboxes.coffee
View File

@ -24,10 +24,10 @@ module = angular.module("taigaCommon")
bindOnce = @.taiga.bindOnce bindOnce = @.taiga.bindOnce
############################################################################# #############################################################################
## Block Directive ## Block Lightbox Directive
############################################################################# #############################################################################
BlockDirective = -> BlockLightboxDirective = ->
link = ($scope, $el, $attrs, $model) -> link = ($scope, $el, $attrs, $model) ->
title = $attrs.title title = $attrs.title
$el.find("h2.title").text(title) $el.find("h2.title").text(title)
@ -55,9 +55,13 @@ BlockDirective = ->
$el.addClass("hidden") $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,10 +207,9 @@ module.directive("tgLbCreateBulkUserstories", [
## AssignedTo Lightbox Directive ## AssignedTo Lightbox Directive
############################################################################# #############################################################################
AssignedToLightboxDirective = ($repo) -> usersTemplate = _.template("""
template = _.template(""" <% if (selected) { %>
<% if (selected) { %> <div class="watcher-single active">
<div class="watcher-single active">
<div class="watcher-avatar"> <div class="watcher-avatar">
<a href="" title="Assigned to" class="avatar"> <a href="" title="Assigned to" class="avatar">
<img src="<%= selected.photo %>"/> <img src="<%= selected.photo %>"/>
@ -216,11 +219,11 @@ AssignedToLightboxDirective = ($repo) ->
<%-selected.full_name_display %> <%-selected.full_name_display %>
</a> </a>
<a href="" title="Remove assigned" class="icon icon-delete remove-assigned-to"></a> <a href="" title="Remove assigned" class="icon icon-delete remove-assigned-to"></a>
</div> </div>
<% } %> <% } %>
<% _.each(users, function(user) { %> <% _.each(users, function(user) { %>
<div class="watcher-single" data-user-id="<%- user.id %>"> <div class="watcher-single" data-user-id="<%- user.id %>">
<div class="watcher-avatar"> <div class="watcher-avatar">
<a href="#" title="Assigned to" class="avatar"> <a href="#" title="Assigned to" class="avatar">
<img src="<%= user.photo %>" /> <img src="<%= user.photo %>" />
@ -229,17 +232,17 @@ AssignedToLightboxDirective = ($repo) ->
<a href="" title="<%- user.full_name_display %>" class="watcher-name"> <a href="" title="<%- user.full_name_display %>" class="watcher-name">
<%- user.full_name_display %> <%- user.full_name_display %>
</a> </a>
</div> </div>
<% }) %> <% }) %>
<% if (showMore) { %> <% if (showMore) { %>
<div ng-show="filteringUsers" class="more-watchers"> <div ng-show="filteringUsers" class="more-watchers">
<span>...too many users, keep filtering</span> <span>...too many users, keep filtering</span>
</div> </div>
<% } %> <% } %>
""") """)
AssignedToLightboxDirective = ($repo) ->
link = ($scope, $el, $attrs) -> link = ($scope, $el, $attrs) ->
selectedUser = null selectedUser = null
selectedItem = null selectedItem = null
@ -262,10 +265,11 @@ AssignedToLightboxDirective = ($repo) ->
showMore: users.length > 5 showMore: users.length > 5
} }
html = template(ctx) html = usersTemplate(ctx)
$el.find("div.watchers").html(html) $el.find("div.watchers").html(html)
$scope.$on "assigned-to:add", (ctx, item) -> $scope.$on "assigned-to:add", (ctx, item) ->
console.log $scope.usersSearch
selectedItem = item selectedItem = item
assignedToId = item.assigned_to assignedToId = item.assigned_to
selectedUser = $scope.usersById[assignedToId] selectedUser = $scope.usersById[assignedToId]
@ -322,3 +326,74 @@ AssignedToLightboxDirective = ($repo) ->
module.directive("tgLbAssignedto", ["$tgRepo", AssignedToLightboxDirective]) 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])

38
app/coffee/modules/issues/lightboxes.coffee
View File

@ -115,41 +115,3 @@ module.directive("tgLbCreateIssue", [
# CreateIssueDirective # 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)

9
app/partials/issues-detail-edit.jade
View File

@ -32,17 +32,12 @@ block content
sidebar.menu-secondary.sidebar sidebar.menu-secondary.sidebar
section.us-status(tg-issue-status, ng-model="issue", editable="true") section.us-status(tg-issue-status, ng-model="issue", editable="true")
section.us-assigned-to(tg-assigned-to, 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 section.us-detail-settings
a.button.button-gray.clickable(ng-show="!issue.is_blocked", ng-click="ctrl.block()") Block 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 a.button.button-red(ng-click="ctrl.delete()", href="") Delete
div.lightbox.lightbox_block.hidden(tg-lb-block, title="Blocking issue", ng-model="issue") 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) div.lightbox.lightbox_select_user.hidden(tg-lb-assignedto)
include views/modules/lightbox-assigned-to div.lightbox.lightbox_select_user.hidden(tg-lb-watchers)
div.lightbox.lightbox_select_user.hidden(tg-lb-add-watcher)
include views/modules/lightbox_users

5
app/partials/issues-detail.jade
View File

@ -48,7 +48,4 @@ block content
sidebar.menu-secondary.sidebar sidebar.menu-secondary.sidebar
section.us-status(tg-issue-status, ng-model="issue") section.us-status(tg-issue-status, ng-model="issue")
section.us-assigned-to(tg-assigned-to, ng-model="issue") section.us-assigned-to(tg-assigned-to, ng-model="issue")
section.watchers(tg-watchers, ng-model="issue.watchers") section.watchers(tg-watchers, ng-model="issue")
div.lightbox.lightbox_block.hidden
include views/modules/lightbox_block

9
app/partials/task-detail-edit.jade
View File

@ -32,7 +32,7 @@ block content
sidebar.menu-secondary.sidebar sidebar.menu-secondary.sidebar
section.us-status(tg-task-status, ng-model="task", editable="true") section.us-status(tg-task-status, ng-model="task", editable="true")
section.us-assigned-to(tg-assigned-to, 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 section.us-detail-settings
fieldset fieldset
@ -43,10 +43,5 @@ block content
a.button.button-red(ng-click="ctrl.delete()", href="") Delete a.button.button-red(ng-click="ctrl.delete()", href="") Delete
div.lightbox.lightbox_block.hidden(tg-lb-block, title="Blocking task", ng-model="task") 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) div.lightbox.lightbox_select_user.hidden(tg-lb-assignedto)
include views/modules/lightbox-assigned-to div.lightbox.lightbox_select_user.hidden(tg-lb-watchers)
div.lightbox.lightbox_select_user.hidden(tg-lb-add-watcher)
include views/modules/lightbox_users

5
app/partials/task-detail.jade
View File

@ -48,10 +48,7 @@ block content
sidebar.menu-secondary.sidebar sidebar.menu-secondary.sidebar
section.us-status(tg-task-status, ng-model="task") section.us-status(tg-task-status, ng-model="task")
section.us-assigned-to(tg-assigned-to, 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 section.us-detail-settings
span.button.button-gray(href="", title="Is iocaine", ng-class="task.is_iocaine ? 'active' : ''") Iocaine 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

9
app/partials/us-detail-edit.jade
View File

@ -32,7 +32,7 @@ block content
sidebar.menu-secondary.sidebar sidebar.menu-secondary.sidebar
section.us-status(tg-us-status-detail, ng-model="us", editable="true") 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.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 section.us-detail-settings
fieldset fieldset
@ -46,10 +46,5 @@ block content
a.button.button-red(ng-click="ctrl.delete()", href="") Delete a.button.button-red(ng-click="ctrl.delete()", href="") Delete
div.lightbox.lightbox_block.hidden(tg-lb-block, title="Blocking issue", ng-model="us") 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) div.lightbox.lightbox_select_user.hidden(tg-lb-assignedto)
include views/modules/lightbox-assigned-to div.lightbox.lightbox_select_user.hidden(tg-lb-watchers)
div.lightbox.lightbox_select_user.hidden(tg-lb-add-watcher)
include views/modules/lightbox_users

5
app/partials/us-detail.jade
View File

@ -47,11 +47,8 @@ block content
sidebar.menu-secondary.sidebar sidebar.menu-secondary.sidebar
section.us-status(tg-us-status-detail, ng-model="us") section.us-status(tg-us-status-detail, ng-model="us")
section.us-assigned-to(tg-assigned-to, 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 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="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 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

13
app/partials/views/modules/lightbox_users.jade
View File

@ -3,14 +3,5 @@ a.close(href="", title="close")
form form
h2.title Add watchers h2.title Add watchers
fieldset fieldset
input(type="text", data-maxlength="500", placeholder="Search for users", ng-model="usersSearch.$") input(type="text", data-maxlength="500", placeholder="Search for users", ng-model="usersSearch")
div.watchers //- The content of this is rendered by directive
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