diff --git a/app/coffee/modules/nav.coffee b/app/coffee/modules/nav.coffee index c8393845..bba02b29 100644 --- a/app/coffee/modules/nav.coffee +++ b/app/coffee/modules/nav.coffee @@ -29,9 +29,9 @@ module = angular.module("taigaNavMenu", []) ## Projects Navigation ############################################################################# class ProjectsNavigationController extends taiga.Controller - @.$inject = ["$scope", "$tgResources", "$tgNavUrls"] + @.$inject = ["$scope", "$rootScope", "$tgResources", "$tgNavUrls"] - constructor: (@scope, @rs, @navurls) -> + constructor: (@scope, @rootscope, @rs, @navurls) -> promise = @.loadInitialData() promise.then null, -> console.log "FAIL" @@ -39,7 +39,6 @@ class ProjectsNavigationController extends taiga.Controller loadInitialData: -> return @rs.projects.list().then (projects) => - @scope.projects = projects for project in projects if project.is_backlog_activated and project.my_permissions.indexOf("view_us")>-1 url = @navurls.resolve("project-backlog") @@ -53,12 +52,64 @@ class ProjectsNavigationController extends taiga.Controller url = @navurls.resolve("project") project.url = @navurls.formatUrl(url, {'project': project.slug}) + + @scope.projects = projects + @scope.filteredProjects = projects + @scope.filterText = "" return projects + newProject: -> + @rootscope.$broadcast("projects:create") + + filterProjects: (text) -> + @scope.filteredProjects = _.filter(@scope.projects, (project) -> project.name.toLowerCase().indexOf(text) > -1) + @scope.filterText = text + @rootscope.$broadcast("projects:filtered") + +module.controller("ProjectsNavigationController", ProjectsNavigationController) + + +ProjectsNavigationDirective = ($rootscope, animationFrame, $timeout) -> + baseTemplate = _.template(""" +

Your projects

+
+
+ + + +
+
+ +
+ + Create project + +
+ +
+ +
+ +
+ +
+ """) # TODO: i18n + + projectsTemplate = _.template(""" + <% _.each(projects, function(project) { %> +
  • + + <%- project.name %> + + +
    • + <% }) %> + """) # TODO: i18n -ProjectsNavigationDirective = ($rootscope, animationFrame) -> overlay = $(".projects-nav-overlay") loadingStart = 0 + hideMenu = () -> if overlay.is(':visible') difftime = new Date().getTime() - loadingStart @@ -75,7 +126,18 @@ ProjectsNavigationDirective = ($rootscope, animationFrame) -> .removeClass("loading-project open-projects-nav") ), timeout + renderProjects = ($el, projects) -> + html = projectsTemplate({projects: projects}) + $el.find(".projects-list").html(html) + + render = ($el, projects) -> + html = baseTemplate() + $el.html(html) + renderProjects($el, projects) + link = ($scope, $el, $attrs, $ctrl) -> + $ctrl = $el.controller() + $rootscope.$on("project:loaded", hideMenu) overlay.on 'click', () -> @@ -95,13 +157,96 @@ ProjectsNavigationDirective = ($rootscope, animationFrame) -> loadingStart = new Date().getTime() + $el.on "click", ".create-project-button .button", (event) -> + event.preventDefault() + $ctrl.newProject() + + $el.on "keyup", ".search-project", (event) -> + target = angular.element(event.currentTarget) + $ctrl.filterProjects(target.val()) + + $scope.$watch "projects", (projects) -> + render($el, $scope.projects) if projects? + + bindOnce $scope, "projects", (projects) -> + prevBtn = $el.find(".v-pagination-previous") + nextBtn = $el.find(".v-pagination-next") + container = $el.find("ul") + pageSize = 0 + containerSize = 0 + + nextPage = (element, pageSize, callback) -> + top = parseInt(element.css('top'), 10) + newTop = top - pageSize + + element.animate({"top": newTop}, callback); + + return newTop + + prevPage = (element, pageSize, callback) -> + top = parseInt(element.css('top'), 10) + newTop = top + pageSize + + element.animate({"top": newTop}, callback); + + return newTop + + visible = (element) -> + element.css('visibility', 'visible') + + hide = (element) -> + element.css('visibility', 'hidden') + + remove = () -> + container.css('top', 0) + hide(prevBtn) + hide(nextBtn) + + $el.on "click", ".v-pagination-previous", (event) -> + event.preventDefault() + + if container.is(':animated') + return + + visible(nextBtn) + + newTop = prevPage(container, pageSize) + + if newTop == 0 + hide(prevBtn) + + $el.on "click", ".v-pagination-next", (event) -> + event.preventDefault() + + if container.is(':animated') + return + + visible(prevBtn) + + newTop = nextPage(container, pageSize) + + if -newTop + pageSize > containerSize + hide(nextBtn) + + $scope.$on "projects:filtered", -> + renderProjects($el, $scope.filteredProjects) + #wait digest end + $timeout () -> + if $scope.filteredProjects + pageSize = $el.find(".v-pagination-list").height() + containerSize = container.height() + if containerSize > pageSize + visible(nextBtn) + else + remove() + else + remove() + return { link: link - controller: ProjectsNavigationController } - -module.directive("tgProjectsNav", ["$rootScope", "animationFrame", ProjectsNavigationDirective]) +module.directive("tgProjectsNav", ["$rootScope", "animationFrame", "$timeout", ProjectsNavigationDirective]) ############################################################################# diff --git a/app/coffee/modules/projects/main.coffee b/app/coffee/modules/projects/main.coffee index 8cf6cf29..40a6ad2b 100644 --- a/app/coffee/modules/projects/main.coffee +++ b/app/coffee/modules/projects/main.coffee @@ -1,15 +1,6 @@ taiga = @.taiga module = angular.module("taigaProject") -class ProjectNavController extends taiga.Controller - @.$inject = ["$rootScope"] - - constructor: (@rootscope) -> - - newProject: -> - @rootscope.$broadcast("projects:create") - -module.controller("ProjectNavController", ProjectNavController) class ProjectsController extends taiga.Controller @.$inject = ["$scope", "$tgResources", "$rootScope", "$tgNavUrls", "$tgAuth", "$location", "$appTitle"] @@ -82,94 +73,3 @@ class ProjectController extends taiga.Controller module.controller("ProjectController", ProjectController) - -ProjectsPaginationDirective = ($timeout) -> - nextPage = (element, pageSize, callback) -> - top = parseInt(element.css('top'), 10) - newTop = top - pageSize - - element.animate({"top": newTop}, callback) - - return newTop - - prevPage = (element, pageSize, callback) -> - top = parseInt(element.css('top'), 10) - newTop = top + pageSize - - element.animate({"top": newTop}, callback) - - return newTop - - visible = (element) -> - element.css('visibility', 'visible') - - hide = (element) -> - element.css('visibility', 'hidden') - - link = ($scope, $el, $attrs) -> - prevBtn = $el.find(".v-pagination-previous") - nextBtn = $el.find(".v-pagination-next") - container = $el.find("ul") - - pageSize = 0 - containerSize = 0 - - remove = () -> - container.css('top', 0) - hide(prevBtn) - hide(nextBtn) - - prevBtn.on "click", (event) -> - event.preventDefault() - - if container.is(':animated') - return - - visible(nextBtn) - - newTop = prevPage(container, pageSize) - - if newTop == 0 - hide(prevBtn) - - nextBtn.on "click", (event) -> - event.preventDefault() - - if container.is(':animated') - return - - visible(prevBtn) - - newTop = nextPage(container, pageSize) - - if -newTop + pageSize > containerSize - hide(nextBtn) - - $scope.$watch 'active', () -> - #wait digest end - $timeout () -> - if $scope.active - pageSize = $el.find(".v-pagination-list").height() - containerSize = container.height() - - if containerSize > pageSize - visible(nextBtn) - else - remove() - else - remove() - - return { - scope: { - active: '=' - }, - link: link, - transclude: true, - template: """ - -
    - - """ - } - -module.directive("tgProjectsPagination", ['$timeout', ProjectsPaginationDirective]) diff --git a/app/partials/views/modules/projects-nav.jade b/app/partials/views/modules/projects-nav.jade index ee6acc95..d0c39cec 100644 --- a/app/partials/views/modules/projects-nav.jade +++ b/app/partials/views/modules/projects-nav.jade @@ -6,18 +6,4 @@ div.lightbox.lightbox_create-project.hidden(tg-lb-create-project) include lightbox_create-project -nav.projects-nav(ng-controller="ProjectNavController as ctrl", tg-projects-nav) - h1 Your projects - form - fieldset - input(type="text" placeholder="Search in...", ng-model="projectsSearch.$") - a.icon.icon-search - - .create-project-button - a.button.button-green(href="", ng-click="ctrl.newProject()") Create project - - div.projects-pagination(tg-projects-pagination, active="projects.length && !projectsSearch.$.length") - ul.projects-list - li(ng-repeat="project in projects|filter:projectsSearch:strict track by project.id") - a(href="", tg-bo-bind="project.name", ng-href="{{ project.url }}") - span.icon.icon-arrow-right +nav.projects-nav(ng-controller="ProjectsNavigationController", tg-projects-nav)