From 83919e92dc7f6addbe96d21fb394063253afda3b Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Wed, 23 Jul 2014 13:08:43 +0200 Subject: [PATCH] Refactoring lightboxes. --- app/coffee/modules/common/lightboxes.coffee | 157 +++++++++++++----- app/coffee/modules/issues/lightboxes.coffee | 38 ----- app/partials/issues-detail-edit.jade | 9 +- app/partials/issues-detail.jade | 5 +- app/partials/task-detail-edit.jade | 9 +- app/partials/task-detail.jade | 5 +- app/partials/us-detail-edit.jade | 9 +- app/partials/us-detail.jade | 5 +- .../views/modules/lightbox_users.jade | 13 +- 9 files changed, 127 insertions(+), 123 deletions(-) diff --git a/app/coffee/modules/common/lightboxes.coffee b/app/coffee/modules/common/lightboxes.coffee index 5d4cf5be..af25d3bb 100644 --- a/app/coffee/modules/common/lightboxes.coffee +++ b/app/coffee/modules/common/lightboxes.coffee @@ -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) { %> +
+
+ + + +
+ + <%-selected.full_name_display %> + + +
+<% } %> + +<% _.each(users, function(user) { %> +
+
+ + + +
+ + <%- user.full_name_display %> + +
+<% }) %> + +<% if (showMore) { %> +
+ ...too many users, keep filtering +
+<% } %> +""") + AssignedToLightboxDirective = ($repo) -> - template = _.template(""" - <% if (selected) { %> -
-
- - - -
- - <%-selected.full_name_display %> - - -
- <% } %> - - <% _.each(users, function(user) { %> -
-
- - - -
- - <%- user.full_name_display %> - -
- <% }) %> - - <% if (showMore) { %> -
- ...too many users, keep filtering -
- <% } %> - """) - - 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]) diff --git a/app/coffee/modules/issues/lightboxes.coffee b/app/coffee/modules/issues/lightboxes.coffee index a2b5fa43..81f1bfc8 100644 --- a/app/coffee/modules/issues/lightboxes.coffee +++ b/app/coffee/modules/issues/lightboxes.coffee @@ -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) diff --git a/app/partials/issues-detail-edit.jade b/app/partials/issues-detail-edit.jade index bea30a76..39c96de6 100644 --- a/app/partials/issues-detail-edit.jade +++ b/app/partials/issues-detail-edit.jade @@ -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) diff --git a/app/partials/issues-detail.jade b/app/partials/issues-detail.jade index 088046f8..0eb0cc7e 100644 --- a/app/partials/issues-detail.jade +++ b/app/partials/issues-detail.jade @@ -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") diff --git a/app/partials/task-detail-edit.jade b/app/partials/task-detail-edit.jade index 0be33f2d..78d185ee 100644 --- a/app/partials/task-detail-edit.jade +++ b/app/partials/task-detail-edit.jade @@ -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) diff --git a/app/partials/task-detail.jade b/app/partials/task-detail.jade index fc906887..286e27f8 100644 --- a/app/partials/task-detail.jade +++ b/app/partials/task-detail.jade @@ -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 diff --git a/app/partials/us-detail-edit.jade b/app/partials/us-detail-edit.jade index 5e4d4be8..c51fc7f3 100644 --- a/app/partials/us-detail-edit.jade +++ b/app/partials/us-detail-edit.jade @@ -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) diff --git a/app/partials/us-detail.jade b/app/partials/us-detail.jade index e6db0aad..25578f6d 100644 --- a/app/partials/us-detail.jade +++ b/app/partials/us-detail.jade @@ -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 diff --git a/app/partials/views/modules/lightbox_users.jade b/app/partials/views/modules/lightbox_users.jade index 27258e30..da045f54 100644 --- a/app/partials/views/modules/lightbox_users.jade +++ b/app/partials/views/modules/lightbox_users.jade @@ -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