feat(news): add pagination to comments

Author: MarcScheib

scss/include/_animation.scss

@@ -3,6 +3,14 @@ section.au-enter-active {
   animation: fadeIn 1s;
 }
 
+.aurelia-animators > .au-enter {
+  opacity: 0 !important;
+}
+
+.aurelia-animators > .au-enter-active {
+  animation: fadeIn 2s;
+}
+
 /* animation definitions */
 @keyframes fadeIn {
   0% {
@@ -13,4 +21,4 @@ section.au-enter-active {
     opacity: 1;
     transform: none
   }
-}
+}

src/services/news/news-comments-service.js

@@ -7,8 +7,8 @@ export class NewsCommentsService {
     this.apiClient = apiClient;
   }
 
-  getRecent(newsId) {
-    return this.apiClient.find('news/' + newsId + '/comments')
+  getAll(newsId, page = 1) {
+    return this.apiClient.find('news/' + newsId + '/comments', {page: page})
       .catch(error => Promise.reject(error));
   }
 

src/view-models/news/view.js

@@ -24,9 +24,11 @@ export class View {
         this.user = null;
       });
 
-    let commentsPromise = this.newsCommentsService.getRecent(params.id)
+    let commentsPromise = this.newsCommentsService.getAll(params.id)
       .then(comments => {
-        this.comments = comments;
+        this.comments = comments.data.reverse();
+        this.currentPage = comments.current_page;
+        this.lastPage = comments.last_page;
       })
       .catch(() => {
         this.comments = [];
@@ -66,6 +68,18 @@ export class View {
     });
   }
 
+  loadMore() {
+    this.newsCommentsService.getAll(this.newsId, this.currentPage + 1)
+      .then(comments => {
+        this.comments = comments.data.reverse().concat(this.comments);
+        this.currentPage = comments.current_page;
+        this.lastPage = comments.last_page;
+      })
+      .catch(() => {
+        this.comments = [];
+      });
+  }
+
   get isAuthenticated() {
     return this.authService.isAuthenticated();
   }

src/views/auth/sign-in.html

@@ -7,14 +7,13 @@ <h4 class="card-title">Sign In</h4>
           <form submit.delegate="signIn()" novalidate>
             <div class="form-group row">
               <label for="username" class="col-sm-2 form-control-label">Username</label>
-
               <div class="col-sm-10">
                 <input type="text" class="form-control" id="username" placeholder="Username" value.bind="username">
               </div>
             </div>
+
             <div class="form-group row">
               <label for="password" class="col-sm-2 form-control-label">Password</label>
-
               <div class="col-sm-10">
                 <input type="password" class="form-control" id="password" placeholder="Password" value.bind="password">
               </div>

src/views/news/view.html

@@ -21,9 +21,13 @@ <h4><a href="#/news/view/${news.id}">${news.title}</a></h4>
             </div>
             <div class="card-text">${news.text}</div>
           </div>
-          <div class="card-footer" if.bind="isAuthenticated || comments.length > 0">
-            <div class="news-card-comment" repeat.for="item of comments">
+          <div class="card-footer aurelia-animators" if.bind="isAuthenticated || comments.length > 0">
+            <div class="news-card-comment">
+              <a click.delegate="loadMore()">Load more...</a>
+            </div>
+            <div class="news-card-comment au-animate" repeat.for="item of comments">
               <a href="#/profiles/view/${item.user.id}" class="pull-left">
+                <!-- Todo -->
                 <img alt="${item.user.username}" src="http://lr.local/img/avatar/${item.user.avatar}">
               </a>
               <div class="media-body">
@@ -34,6 +38,7 @@ <h4><a href="#/news/view/${news.id}">${news.title}</a></h4>
             </div>
             <div class="news-card-comment" if.bind="isAuthenticated">
               <a href="#/profiles/view/${user.id}" class="pull-left">
+                <!-- Todo: image path -->
                 <img alt="${user.username}" src="http://lr.local/img/avatar/${user.avatar}">
               </a>
               <div class="media-body">