From 7c01866526ff967530a9a4626e59bb306c7fb2a1 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Wed, 23 Jul 2014 09:42:19 +0200 Subject: [PATCH] Refactorized assigned to lightbox. --- app/coffee/modules/common/lightboxes.coffee | 133 +++++++++++++----- .../views/modules/lightbox-assigned-to.jade | 18 +-- app/styles/modules/common/lightbox.scss | 2 + 3 files changed, 98 insertions(+), 55 deletions(-) diff --git a/app/coffee/modules/common/lightboxes.coffee b/app/coffee/modules/common/lightboxes.coffee index f765aea9..5d4cf5be 100644 --- a/app/coffee/modules/common/lightboxes.coffee +++ b/app/coffee/modules/common/lightboxes.coffee @@ -21,6 +21,8 @@ module = angular.module("taigaCommon") +bindOnce = @.taiga.bindOnce + ############################################################################# ## Block Directive ############################################################################# @@ -201,60 +203,110 @@ module.directive("tgLbCreateBulkUserstories", [ ## AssignedTo Lightbox Directive ############################################################################# -AssignedToLightboxDirective = -> +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) -> - editingElement = null + selectedUser = null + selectedItem = null - updateScopeFilteringUsers = (searchingText) -> - console.log "updateScopeFilteringUsers", searchingText - usersById = _.clone($scope.usersById, false) - # Exclude selected user - if $scope.selectedUser? - delete usersById[$scope.selectedUser.id] + filterUsers = (text, user) -> + username = user.full_name_display.toUpperCase() + text = text.toUpperCase() + return _.contains(username, text) - # Filter text - usersById = _.filter usersById, (user) -> - return _.contains(user.full_name_display.toUpperCase(), searchingText.toUpperCase()) - - # Return max of 5 elements - users = _.map(usersById, (user) -> user) - $scope.AssignedToUsersSearch = searchingText - $scope.filteringUsers = users.length > 5 - $scope.filteredUsers = _.first(users, 5) - - $scope.$on "assigned-to:add", (ctx, element) -> - editingElement = element - assignedToId = editingElement?.assigned_to - - $scope.selectedUser = null - $scope.selectedUser = $scope.usersById[assignedToId] if assignedToId? - updateScopeFilteringUsers("") - - $el.removeClass("hidden") + render = (selected, text) -> $el.find("input").focus() - $scope.$watch "AssignedToUsersSearch", (searchingText) -> - updateScopeFilteringUsers(searchingText) + users = _.clone($scope.users, true) + users = _.reject(users, {"id": selected.id}) if selected? + users = _.filter(users, _.partial(filterUsers, text)) if text? + + ctx = { + selected: selected + users: _.first(users, 5) + showMore: users.length > 5 + } + + html = template(ctx) + $el.find("div.watchers").html(html) + + $scope.$on "assigned-to:add", (ctx, item) -> + selectedItem = item + assignedToId = item.assigned_to + selectedUser = $scope.usersById[assignedToId] + + render(selectedUser) + $el.removeClass("hidden") + + $scope.$watch "usersSearch", (searchingText) -> + render(selectedUser, searchingText) if searchingText? $el.on "click", ".watcher-single", (event) -> event.preventDefault() target = angular.element(event.currentTarget) - if editingElement? - user = target.scope().user - editingElement.assigned_to = user.id $el.addClass("hidden") - $scope.$broadcast("assigned-to:added", editingElement) + if not selectedItem? + return + + selectedItem.assigned_to = target.data("user-id") + $scope.$apply -> + promise = $repo.save(selectedItem) + promise.then -> + $scope.$broadcast("assigned-to:added", selectedItem) + promise.then null, -> + console.log "FAIL" # TODO $el.on "click", ".remove-assigned-to", (event) -> event.preventDefault() event.stopPropagation() - if editingElement? - editingElement.assigned_to = null - $el.addClass("hidden") - $scope.$broadcast("assigned-to:added", editingElement) + if not selectedItem? + return + + selectedItem.assigned_to = null + $scope.$apply -> + promise = $repo.save(selectedItem) + promise.then -> + $scope.$broadcast("assigned-to:added", selectedItem) + promise.then null, -> + console.log "FAIL" # TODO $el.on "click", ".close", (event) -> event.preventDefault() @@ -263,7 +315,10 @@ AssignedToLightboxDirective = -> $scope.$on "$destroy", -> $el.off() - return {link:link} + return { + templateUrl: "/partials/views/modules/lightbox-assigned-to.html" + link:link + } -module.directive("tgLbAssignedto", AssignedToLightboxDirective) +module.directive("tgLbAssignedto", ["$tgRepo", AssignedToLightboxDirective]) diff --git a/app/partials/views/modules/lightbox-assigned-to.jade b/app/partials/views/modules/lightbox-assigned-to.jade index 95697901..c761b0f1 100644 --- a/app/partials/views/modules/lightbox-assigned-to.jade +++ b/app/partials/views/modules/lightbox-assigned-to.jade @@ -3,21 +3,7 @@ a.close(href="", title="close") form h2.title Select assigned to fieldset - input(type="text", data-maxlength="500", placeholder="Search for users", ng-model="AssignedToUsersSearch") + input(type="text", data-maxlength="500", placeholder="Search for users", ng-model="usersSearch") + //-This block is rendered by the directive div.watchers - div.watcher-single.active(ng-if="selectedUser") - div.watcher-avatar - a.avatar(href="", title="Assigned to") - img(src="{{ selectedUser.photo }}", alt="{{ selectedUser.full_name_display }}") - a.watcher-name(href="", title="{{ selectedUser.full_name_display }}", ng-bind="selectedUser.full_name_display") - a.icon.icon-delete.remove-assigned-to(href="", title="Remove assigned") - - div.watcher-single(ng-repeat="user in filteredUsers") - 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(ng-show="filteringUsers") - span ...too many users, keep filtering diff --git a/app/styles/modules/common/lightbox.scss b/app/styles/modules/common/lightbox.scss index 1ee07d30..a70fa243 100644 --- a/app/styles/modules/common/lightbox.scss +++ b/app/styles/modules/common/lightbox.scss @@ -338,6 +338,8 @@ } .watchers { margin-top: 1rem; + min-height: 440px; + .watcher-name { @include table-flex-child(12, 0); }