From a4000ac39e8faaae242fc37f550a3f2cfe338be0 Mon Sep 17 00:00:00 2001 From: Juanfran Date: Fri, 13 Jan 2017 13:40:56 +0100 Subject: [PATCH] request tasks and attachments only if the zoom level need it --- .../modules/kanban/kanban-usertories.coffee | 9 +++- app/coffee/modules/kanban/main.coffee | 46 ++++++++++++++----- app/coffee/modules/resources/tasks.coffee | 5 +- .../modules/resources/userstories.coffee | 6 ++- app/coffee/modules/taskboard/main.coffee | 33 +++++++++---- .../modules/taskboard/taskboard-tasks.coffee | 9 ++-- .../components/board-zoom/board-zoom.scss | 1 + .../card/card-templates/card-unfold.jade | 7 ++- app/modules/components/card/card.scss | 4 ++ app/partials/kanban/kanban.jade | 9 ++-- app/partials/taskboard/taskboard.jade | 9 ++-- app/styles/layout/kanban.scss | 4 ++ app/styles/layout/taskboard.scss | 4 ++ 13 files changed, 113 insertions(+), 33 deletions(-) diff --git a/app/coffee/modules/kanban/kanban-usertories.coffee b/app/coffee/modules/kanban/kanban-usertories.coffee index dc1faf82..f19b8342 100644 --- a/app/coffee/modules/kanban/kanban-usertories.coffee +++ b/app/coffee/modules/kanban/kanban-usertories.coffee @@ -170,9 +170,14 @@ class KanbanUserstoriesService extends taiga.Service userstories = @.userstoriesRaw userstories = _.map userstories, (usModel) => us = {} + + model = usModel.getAttrs() + us.foldStatusChanged = @.foldStatusChanged[usModel.id] - us.model = usModel.getAttrs() - us.images = _.filter usModel.attachments, (it) -> return !!it.thumbnail_card_url + + us.model = model + us.images = _.filter model.attachments, (it) -> return !!it.thumbnail_card_url + us.id = usModel.id us.assigned_to = @.usersById[usModel.assigned_to] us.colorized_tags = _.map us.model.tags, (tag) => diff --git a/app/coffee/modules/kanban/main.coffee b/app/coffee/modules/kanban/main.coffee index b8e7f4fb..05ac9d1a 100644 --- a/app/coffee/modules/kanban/main.coffee +++ b/app/coffee/modules/kanban/main.coffee @@ -77,6 +77,10 @@ class KanbanController extends mixOf(taiga.Controller, taiga.PageMixin, taiga.Fi @scope.sectionName = @translate.instant("KANBAN.SECTION_NAME") @.initializeEventHandlers() + taiga.defineImmutableProperty @.scope, "usByStatus", () => + return @kanbanUserstoriesService.usByStatus + + firstLoad: () -> promise = @.loadInitialData() # On Success @@ -91,16 +95,29 @@ class KanbanController extends mixOf(taiga.Controller, taiga.PageMixin, taiga.Fi # On Error promise.then null, @.onInitialDataError.bind(@) - taiga.defineImmutableProperty @.scope, "usByStatus", () => - return @kanbanUserstoriesService.usByStatus - setZoom: (zoomLevel, zoom) -> - if @.zoomLevel != zoomLevel - @kanbanUserstoriesService.resetFolds() + if @.zoomLevel == zoomLevel + return null + + @.isFirstLoad = !@.zoomLevel + + previousZoomLevel = @.zoomLevel @.zoomLevel = zoomLevel @.zoom = zoom + if @.isFirstLoad + @.firstLoad().then () => + @.isFirstLoad = false + @kanbanUserstoriesService.resetFolds() + + else if @.zoomLevel > 1 && previousZoomLevel <= 1 + @.zoomLoading = true + + @.loadUserstories().then () => + @.zoomLoading = false + @kanbanUserstoriesService.resetFolds() + filtersReloadContent: () -> @.loadUserstories().then () => openArchived = _.difference(@kanbanUserstoriesService.archivedStatus, @@ -182,13 +199,15 @@ class KanbanController extends mixOf(taiga.Controller, taiga.PageMixin, taiga.Fi return @rs.projects.tagsColors(@scope.projectId).then (tags_colors) => @scope.project.tags_colors = tags_colors._attrs - loadUserstories: -> + loadUserstories: () -> params = { - status__is_archived: false, - include_attachments: true, - include_tasks: true + status__is_archived: false } + if @.zoomLevel > 1 + params.include_attachments = 1 + params.include_tasks = 1 + params = _.merge params, @location.search() promise = @rs.userstories.listAll(@scope.projectId, params).then (userstories) => @@ -423,13 +442,18 @@ KanbanSquishColumnDirective = (rs, projectService) -> return 40 else return 310 + totalWidth = _.reduce columnWidths, (total, width) -> return total + width $el.find('.kanban-table-inner').css("width", totalWidth) - $scope.folds = rs.kanban.getStatusColumnModes(projectService.project.get('id')) - updateTableWidth() + unwatch = $scope.$watch 'usByStatus', (usByStatus) -> + if usByStatus.size + $scope.folds = rs.kanban.getStatusColumnModes(projectService.project.get('id')) + updateTableWidth() + + unwatch() return {link: link} diff --git a/app/coffee/modules/resources/tasks.coffee b/app/coffee/modules/resources/tasks.coffee index 4c47ad6e..63aed001 100644 --- a/app/coffee/modules/resources/tasks.coffee +++ b/app/coffee/modules/resources/tasks.coffee @@ -33,9 +33,12 @@ resourceProvider = ($repo, $http, $urls, $storage) -> hashSuffixStatusColumnModes = "tasks-statuscolumnmodels" hashSuffixUsRowModes = "tasks-usrowmodels" - service.get = (projectId, taskId) -> + service.get = (projectId, taskId, extraParams) -> params = service.getQueryParams(projectId) params.project = projectId + + params = _.extend({}, params, extraParams) + return $repo.queryOne("tasks", taskId, params) service.getByRef = (projectId, ref, extraParams) -> diff --git a/app/coffee/modules/resources/userstories.coffee b/app/coffee/modules/resources/userstories.coffee index e95693d2..0ad771b7 100644 --- a/app/coffee/modules/resources/userstories.coffee +++ b/app/coffee/modules/resources/userstories.coffee @@ -30,9 +30,12 @@ resourceProvider = ($repo, $http, $urls, $storage, $q) -> service = {} hashSuffix = "userstories-queryparams" - service.get = (projectId, usId) -> + service.get = (projectId, usId, extraParams) -> params = service.getQueryParams(projectId) params.project = projectId + + params = _.extend({}, params, extraParams) + return $repo.queryOne("userstories", usId, params) service.getByRef = (projectId, ref, extraParams = {}) -> @@ -64,6 +67,7 @@ resourceProvider = ($repo, $http, $urls, $storage, $q) -> params = {"project": projectId} params = _.extend({}, params, filters or {}) service.storeQueryParams(projectId, params) + return $repo.queryMany("userstories", params) service.bulkCreate = (projectId, status, bulk) -> diff --git a/app/coffee/modules/taskboard/main.coffee b/app/coffee/modules/taskboard/main.coffee index 74f95d84..80832d9d 100644 --- a/app/coffee/modules/taskboard/main.coffee +++ b/app/coffee/modules/taskboard/main.coffee @@ -72,6 +72,10 @@ class TaskboardController extends mixOf(taiga.Controller, taiga.PageMixin, taiga @scope.sectionName = @translate.instant("TASKBOARD.SECTION_NAME") @.initializeEventHandlers() + taiga.defineImmutableProperty @.scope, "usTasks", () => + return @taskboardTasksService.usTasks + + firstLoad: () -> promise = @.loadInitialData() # On Success @@ -79,16 +83,28 @@ class TaskboardController extends mixOf(taiga.Controller, taiga.PageMixin, taiga # On Error promise.then null, @.onInitialDataError.bind(@) - taiga.defineImmutableProperty @.scope, "usTasks", () => - return @taskboardTasksService.usTasks - setZoom: (zoomLevel, zoom) -> - if @.zoomLevel != zoomLevel - @taskboardTasksService.resetFolds() + if @.zoomLevel == zoomLevel + return null + + @.isFirstLoad = !@.zoomLevel + + previousZoomLevel = @.zoomLevel @.zoomLevel = zoomLevel @.zoom = zoom + if @.isFirstLoad + @.firstLoad().then () => + @.isFirstLoad = false + @taskboardTasksService.resetFolds() + + else if @.zoomLevel > 1 && previousZoomLevel <= 1 + @.zoomLoading = true + @.loadTasks().then () => + @.zoomLoading = false + @taskboardTasksService.resetFolds() + if @.zoomLevel == '0' @rootscope.$broadcast("sprint:zoom0") @@ -342,9 +358,10 @@ class TaskboardController extends mixOf(taiga.Controller, taiga.PageMixin, taiga return sprint loadTasks: -> - params = { - include_attachments: true, - } + params = {} + + if @.zoomLevel > 1 + params.include_attachments = 1 params = _.merge params, @location.search() diff --git a/app/coffee/modules/taskboard/taskboard-tasks.coffee b/app/coffee/modules/taskboard/taskboard-tasks.coffee index 013238fb..bb3ae87a 100644 --- a/app/coffee/modules/taskboard/taskboard-tasks.coffee +++ b/app/coffee/modules/taskboard/taskboard-tasks.coffee @@ -157,12 +157,15 @@ class TaskboardTasksService extends taiga.Service for taskModel in tasks if usTasks[taskModel.user_story]? and usTasks[taskModel.user_story][taskModel.status]? task = {} + + model = taskModel.getAttrs() + task.foldStatusChanged = @.foldStatusChanged[taskModel.id] - task.model = taskModel.getAttrs() - task.images = _.filter taskModel.attachments, (it) -> return !!it.thumbnail_card_url + task.model = model + task.images = _.filter model.attachments, (it) -> return !!it.thumbnail_card_url task.id = taskModel.id task.assigned_to = @.usersById[taskModel.assigned_to] - task.colorized_tags = _.map task.model.tags, (tag) => + task.colorized_tags = _.map task.model.tags, (tag) => return {name: tag[0], color: tag[1]} usTasks[taskModel.user_story][taskModel.status].push(task) diff --git a/app/modules/components/board-zoom/board-zoom.scss b/app/modules/components/board-zoom/board-zoom.scss index 5e5d7eb2..e8b88433 100644 --- a/app/modules/components/board-zoom/board-zoom.scss +++ b/app/modules/components/board-zoom/board-zoom.scss @@ -36,6 +36,7 @@ $contrast: 2; .range-slider { -webkit-appearance: none; + display: block; margin: $thumb-height / 2 0; width: $track-width; diff --git a/app/modules/components/card/card-templates/card-unfold.jade b/app/modules/components/card/card-templates/card-unfold.jade index 5b734660..cefcfc47 100644 --- a/app/modules/components/card/card-templates/card-unfold.jade +++ b/app/modules/components/card/card-templates/card-unfold.jade @@ -1,6 +1,11 @@ .card-unfold.ng-animate-disabled( ng-click="vm.toggleFold()" - ng-if="vm.visible('unfold') && (vm.item.getIn(['model', 'tasks']).size || vm.item.get('images').size)" + ng-if="vm.visible('unfold')" role="button" ) tg-svg(svg-icon="icon-view-more") + +.loading-extra( + tg-loading="vm.item.get('loading-extra')" + + ) diff --git a/app/modules/components/card/card.scss b/app/modules/components/card/card.scss index 47d3c57d..5dfbbe5b 100644 --- a/app/modules/components/card/card.scss +++ b/app/modules/components/card/card.scss @@ -5,6 +5,10 @@ margin: 0 .6rem .6rem; overflow: hidden; transition: box-shadow .2s ease-in; + .loading-extra.loading { + padding: .2rem; + text-align: center; + } &:hover { box-shadow: 3px 3px 6px darken($whitish, 10%); } diff --git a/app/partials/kanban/kanban.jade b/app/partials/kanban/kanban.jade index 9cc9cb0d..3a63c543 100644 --- a/app/partials/kanban/kanban.jade +++ b/app/partials/kanban/kanban.jade @@ -1,7 +1,10 @@ doctype html -div.wrapper(tg-kanban, ng-controller="KanbanController as ctrl" - ng-init="section='kanban'") +div.wrapper( + tg-kanban, + ng-controller="KanbanController as ctrl" + ng-init="section='kanban'" +) tg-project-menu section.main.kanban @@ -23,8 +26,8 @@ div.wrapper(tg-kanban, ng-controller="KanbanController as ctrl" .kanban-header include ../includes/components/mainTitle .taskboard-actions + .zoom-loading(tg-loading="ctrl.zoomLoading") tg-kanban-board-zoom( - ng-if="usByStatus.size", on-zoom-change="ctrl.setZoom(zoomLevel, zoom)" ) diff --git a/app/partials/taskboard/taskboard.jade b/app/partials/taskboard/taskboard.jade index 1a0d0e62..d9475033 100644 --- a/app/partials/taskboard/taskboard.jade +++ b/app/partials/taskboard/taskboard.jade @@ -1,7 +1,10 @@ doctype html -div.wrapper(tg-taskboard, ng-controller="TaskboardController as ctrl", - ng-init="section='backlog'") +div.wrapper( + tg-taskboard, + ng-controller="TaskboardController as ctrl", + ng-init="section='backlog'" +) tg-project-menu section.main.taskboard tg-filter( @@ -24,8 +27,8 @@ div.wrapper(tg-taskboard, ng-controller="TaskboardController as ctrl", span.green(tg-bo-bind="sprint.name") span.date(tg-date-range="sprint.estimated_start,sprint.estimated_finish") .taskboard-actions + .zoom-loading(tg-loading="ctrl.zoomLoading") tg-taskboard-zoom( - ng-if="usTasks.size", on-zoom-change="ctrl.setZoom(zoomLevel, zoom)" ) button.button-filter.e2e-open-filter( diff --git a/app/styles/layout/kanban.scss b/app/styles/layout/kanban.scss index dca0852f..aad6c8c8 100644 --- a/app/styles/layout/kanban.scss +++ b/app/styles/layout/kanban.scss @@ -14,6 +14,10 @@ .burndown-container { display: none; } + .zoom-loading img { + display: block; + margin-right: 1rem; + } } .kanban-header { diff --git a/app/styles/layout/taskboard.scss b/app/styles/layout/taskboard.scss index e213b56f..45e34a89 100644 --- a/app/styles/layout/taskboard.scss +++ b/app/styles/layout/taskboard.scss @@ -10,6 +10,10 @@ .graphics-container { @include slide(300px, hidden); } + .zoom-loading img { + display: block; + margin-right: 1rem; + } } .taskboard-header {