From 8f70c26165eff22c19ee2e818e81aced636f01cb Mon Sep 17 00:00:00 2001 From: Juanfran Date: Wed, 15 Apr 2015 08:55:34 +0200 Subject: [PATCH] timeline infinite scroll --- app/coffee/app.coffee | 3 +- ...fee => profile-timeline.controller.coffee} | 22 +++-- app/coffee/modules/resources/timeline.coffee | 4 +- .../modules/profile/profile-timeline.jade | 96 +------------------ bower.json | 3 +- gulpfile.js | 1 + 6 files changed, 22 insertions(+), 107 deletions(-) rename app/coffee/modules/profile/{profileTimeline.controller.coffee => profile-timeline.controller.coffee} (80%) diff --git a/app/coffee/app.coffee b/app/coffee/app.coffee index 1de71f3f..30bc4e3e 100644 --- a/app/coffee/app.coffee +++ b/app/coffee/app.coffee @@ -345,7 +345,8 @@ modules = [ # Vendor modules "ngRoute", "ngAnimate", - "pascalprecht.translate" + "pascalprecht.translate", + "infinite-scroll" ].concat(_.map(@.taigaContribPlugins, (plugin) -> plugin.module)) # Main module definition diff --git a/app/coffee/modules/profile/profileTimeline.controller.coffee b/app/coffee/modules/profile/profile-timeline.controller.coffee similarity index 80% rename from app/coffee/modules/profile/profileTimeline.controller.coffee rename to app/coffee/modules/profile/profile-timeline.controller.coffee index a8656c55..acaaa365 100644 --- a/app/coffee/modules/profile/profileTimeline.controller.coffee +++ b/app/coffee/modules/profile/profile-timeline.controller.coffee @@ -25,18 +25,17 @@ mixOf = @.taiga.mixOf class ProfileTimelineController extends mixOf(taiga.Controller, taiga.PageMixin, taiga.FiltersMixin) @.$inject = [ - "$scope", "$tgResources", "$tgAuth" ] valid_fields: ['status', 'subject', 'description', 'assigned_to', 'points', 'severity', 'priority', 'type', 'attachments', 'milestone', 'is_blocked', 'is_iocaine', 'content_diff', 'name', 'estimated_finish', 'estimated_start'] - constructor: (@scope, @rs, @auth) -> - promise = @.loadTimeline() - promise.then null, @.onInitialDataError.bind(@) + constructor: (@rs, @auth) -> + @timelineList = [] + @pagination = {page: 1} - isValid: (values) => + isValidField: (values) => return _.some values, (value) => @valid_fields.indexOf(value) != -1 filterValidTimelineItems: (timeline) => @@ -44,7 +43,7 @@ class ProfileTimelineController extends mixOf(taiga.Controller, taiga.PageMixin, values = Object.keys(timeline.data.values_diff) if values && values.length - if !@isValid(values) + if !@isValidField(values) return false else if values[0] == 'attachments' && timeline.data.values_diff.attachments.new.length == 0 return false @@ -54,9 +53,14 @@ class ProfileTimelineController extends mixOf(taiga.Controller, taiga.PageMixin, loadTimeline: () -> user = @auth.getUser() - return @rs.timeline.profile(user.id).then (result) => - console.log result.data - @scope.timelineList = _.filter result.data, @filterValidTimelineItems + @loadingData = true + + return @rs.timeline.profile(user.id, @pagination).then (result) => + newTimelineList = _.filter result.data, @filterValidTimelineItems + + @timelineList = @timelineList.concat(newTimelineList) + @pagination.page++ + @loadingData = false angular.module("taigaProfile") .controller("ProfileTimeline", ProfileTimelineController) diff --git a/app/coffee/modules/resources/timeline.coffee b/app/coffee/modules/resources/timeline.coffee index abbff0ae..61c91805 100644 --- a/app/coffee/modules/resources/timeline.coffee +++ b/app/coffee/modules/resources/timeline.coffee @@ -24,8 +24,8 @@ taiga = @.taiga resourceProvider = ($repo) -> service = {} - service.profile = (userId) -> - return $repo.queryOnePaginatedRaw("timeline-profile", userId) + service.profile = (userId, params) -> + return $repo.queryOnePaginatedRaw("timeline-profile", userId, params) return (instance) -> instance.timeline = service diff --git a/app/partials/includes/modules/profile/profile-timeline.jade b/app/partials/includes/modules/profile/profile-timeline.jade index 09ac8855..8bc2c435 100644 --- a/app/partials/includes/modules/profile/profile-timeline.jade +++ b/app/partials/includes/modules/profile/profile-timeline.jade @@ -1,95 +1,3 @@ section.profile-timeline(ng-controller="ProfileTimeline as ctrl") - div(ng-repeat="timeline in timelineList", tg-timeline-item="timeline") - - for (var x = 0; x < 3; x++) - // Simple message for favorites, updates, etc. - div.activity-simple - span.activity-date Yesterday 12.30h - div.activity-info - div.profile-contact-picture - a(href="", title="{{ user.nickname }}") - img(src="https://s3.amazonaws.com/uifaces/faces/twitter/gerrenlamson/128.jpg", alt="{{ user.nickname }}") - p - a(href="", title="See {{ user.nickname }} profile") Jesús Espino - span has updated the status of the US - a(href="", title="See #{{ us.id }}{{ us.title }}") #23 Web comercial/Ayuda from "UX" to "UX Done" - - // Added comment in us, task or issue. - div.activity-comment - span.activity-date 3 days ago - div.activity-info - div.profile-contact-picture - a(href="", title="{{ user.nickname }}") - img(src="https://s3.amazonaws.com/uifaces/faces/twitter/tonystubblebine/128.jpg", alt="{{ user.nickname }}") - p - a(href="", title="See {{ user.nickname }} profile") JuanFrancisco Alcántara - span has commented in the task - a(href="", title="See #{{ us.id }}{{ us.title }}") #15 Revisar el contraste de los grises - div.activity-comment-quote - p "He subido a GitLab unos wireframes. Echadle un vistazo por favor, a ver si falta algo o tenéis al" - - // Added attachment type image in us, task or issue. - div.activity-image - span.activity-date 5 days ago - div.activity-info - div.profile-contact-picture - a(href="", title="{{ user.nickname }}") - img(src="https://s3.amazonaws.com/uifaces/faces/twitter/jina/128.jpg", alt="{{ user.nickname }}") - p - a(href="", title="See {{ user.nickname }} profile") Alejandro Alonso - span has uploaded an image in the US - a(href="", title="See #{{ us.id }}{{ us.title }}") US #23 Web comercial/Ayuda - div.activity-comment-attachment - p "Eh! Look at this amazing Taiga picture!" - img(src="https://ununsplash.imgix.net/photo-1423753623104-718aaace6772?q=75&fm=jpg&w=1080&fit=max&s=f655534aa0fe8bae35c687e80a2ed399", alt="{{ attachment.name }}") - - // Multiple update message, etc. - div.activity-notification - span.activity-date 6 days ago - div.activity-info - div.profile-contact-picture - a(href="", title="{{ user.nickname }}") - img(src="https://s3.amazonaws.com/uifaces/faces/twitter/idiot/128.jpg", alt="{{ user.nickname }}") - p - a(href="", title="See {{ user.nickname }} profile") Jesús Espino - span closed - ul.activity-notification-list - li - a(href="", title="See #{{ us.id }}{{ us.title }}") US #23 Web comercial/Ayuda - li - a(href="", title="See #{{ us.id }}{{ us.title }}") #2156 Search Page UX is hardly understandable - li - a(href="", title="See #{{ us.id }}{{ us.title }}") #456 Search for users - li - a(href="", title="See #{{ us.id }}{{ us.title }}") #2140 Las notificaciones de cambios están fallando - - // Added attachment type image in us, task or issue. - div.activity-member - span.activity-date a week ago - div.activity-info - div.profile-contact-picture - a(href="", title="{{ organization.nickname }}") - img(src="https://s3.amazonaws.com/uifaces/faces/twitter/tofslie/128.jpg", alt="{{ organization.nickname }}") - p - a(href="", title="See {{ organization.nickname }} profile") Mozilla - span has a new member - div.activity-member-view - div.profile-member-picture - img(src="https://s3.amazonaws.com/uifaces/faces/twitter/BillSKenney/128.jpg", alt="{{ organization.nickname }}") - div.activity-member-info - a(href="", title="See {{ user.nickname }} profile") - span Andrés González - p Back-end developer & Stake - - // Added comment in us, task or issue. - div.activity-project - span.activity-date a week ago - div.activity-info - div.profile-contact-picture - a(href="", title="{{ organization.nickname }}") - img(src="https://s3.amazonaws.com/uifaces/faces/twitter/ekvium/128.jpg", alt="{{ organization.nickname }}") - p - a(href="", title="See {{ user.nickname }} profile") Redhat - span has a new project - a(href="", title="See {{ project.name }}") Nanatubos - div.activity-comment-quote - p We plan to build a hundred of so called "telehubs" so people from all over the world can immediately relocate their physical self at any other telehub in microseconds. + div(infinite-scroll="ctrl.loadTimeline()", infinite-scroll-distance="3", infinite-scroll-disabled='ctrl.loadingData') + div(ng-repeat="timeline in ctrl.timelineList", tg-timeline-item="timeline") diff --git a/bower.json b/bower.json index 3b1f68c8..6ea6daad 100644 --- a/bower.json +++ b/bower.json @@ -76,7 +76,8 @@ "l.js": "~0.1.0", "angular-translate": "~2.6.1", "angular-translate-loader-static-files": "~2.6.1", - "angular-translate-interpolation-messageformat": "~2.6.1" + "angular-translate-interpolation-messageformat": "~2.6.1", + "ngInfiniteScroll": "1.0.0" }, "resolutions": { "lodash": "~2.4.1", diff --git a/gulpfile.js b/gulpfile.js index f7e83029..3838ea8a 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -141,6 +141,7 @@ paths.libs = [ paths.vendor + "raven-js/dist/raven.js", paths.vendor + "l.js/l.js", paths.vendor + "messageformat/locale/*.js", + paths.vendor + "ngInfiniteScroll/build/ng-infinite-scroll.js", paths.app + "js/jquery.ui.git-custom.js", paths.app + "js/jquery-ui.drag-multiple-custom.js", paths.app + "js/jquery.ui.touch-punch.min.js",