timeline infinite scroll

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

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) ->
+    constructor: (@rs, @auth) ->
-        promise = @.loadTimeline()
+        @timelineList = []
-        promise.then null, @.onInitialDataError.bind(@)
+        @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) =>
+        @loadingData = true
-            console.log result.data
+
-            @scope.timelineList = _.filter result.data, @filterValidTimelineItems
+        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)

app/coffee/modules/resources/timeline.coffee

@@ -24,8 +24,8 @@ taiga = @.taiga
 resourceProvider = ($repo) ->
     service = {}
 
-    service.profile = (userId) ->
+    service.profile = (userId, params) ->
-        return $repo.queryOnePaginatedRaw("timeline-profile", userId)
+        return $repo.queryOnePaginatedRaw("timeline-profile", userId, params)
 
     return (instance) ->
         instance.timeline = service

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")
+    div(infinite-scroll="ctrl.loadTimeline()", infinite-scroll-distance="3", infinite-scroll-disabled='ctrl.loadingData')
-    - for (var x = 0; x < 3; x++)
+        div(ng-repeat="timeline in ctrl.timelineList", tg-timeline-item="timeline")
-        // 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.

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",

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",