#29 - Adicionando paginação funcional na home

iloveblogs · Mar 10, 2016 · d72a1f9 · d72a1f9
1 parent 2bd48bd
commit d72a1f9
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 29 deletions.
diff --git a/src/js/views/home/controllers/list-blogs-directive.controller.js b/src/js/views/home/controllers/list-blogs-directive.controller.js
@@ -13,13 +13,7 @@
         function loadMoreBlogsAndPaginate(){
             vc.vm.loadMoreBlogs();
             var nextPageNumber = vc.vm.pageNumber;
-            // $state.go('home-pagination', {pageNumber: vc.vm.pageNumber}, {notify: false});
-            $state.go('home-pagination', {pageNumber: vc.vm.pageNumber}, {
-                notify: false,
-                reload: false,
-                location: 'replace',
-                inherit: true
-            });
+            $state.go('home-pagination', {pageNumber: vc.vm.pageNumber}, {notify: false});
         }
 
     }

diff --git a/src/js/views/home/controllers/list-blogs-page.controller.js b/src/js/views/home/controllers/list-blogs-page.controller.js
@@ -7,10 +7,12 @@
     function ListBlogsPageController(ListBlogsModel, $stateParams){
         var vc = this;
         var pageParams = {
-            pageNumber: $stateParams.pageNumber > 0 ? $stateParams.pageNumber : 0
+            pageNumber: $stateParams.pageNumber > 0 ? $stateParams.pageNumber : 1
         };
 
         ListBlogsModel.init(pageParams);
+        ListBlogsModel.loadMoreBlogs();
+
     }
 
 })();

diff --git a/src/js/views/home/models/list-blogs.model.js b/src/js/views/home/models/list-blogs.model.js
@@ -6,39 +6,38 @@
 
     function ListBlogsModel(SheetApi){
         var model = {
-            loadMoreBlogs: loadMoreBlogs,
-            isLoadingMoreBlogs: false,
+            blogGroups: [],
             blogsCount: null,
-            pageNumber: 0,
+            pageCount: 0,
+            init: init,
+            isLoadingMoreBlogs: false,
+            loadMoreBlogs: loadMoreBlogs,
+            pageNumber: 1,
+            pageInitialNumber: 0,
             pageSize: 12,
-            blogList: null,
-            init: init
         };
         return model;
 
         function init(pageParams){
             model.pageNumber = parseInt(pageParams.pageNumber);
+            model.pageInitialNumber = parseInt(pageParams.pageNumber);
         }
 
         function loadMoreBlogs(){
             model.isLoadingMoreBlogs = true;
 
             var pageParams = {
-                pageStartAt: model.pageNumber * model.pageSize,
+                pageStartAt: (model.pageNumber - 1) * model.pageSize,
                 pageSize: model.pageSize
             };
 
             var promiseToGetMoreBlogs = SheetApi.getAllBlogs(pageParams);
 
             promiseToGetMoreBlogs.success(function(blogs){
-                if(!model.blogList) {
-                    model.blogList = [];
-                }
-                model.blogList = model.blogList.concat(blogs.query.results.json);
-                console.log(model.blogList);
-
+                var blogGroupsLastIndex = model.blogGroups.length;
+                model.blogGroups[blogGroupsLastIndex] = blogs.query.results.json;
+                ++model.pageNumber;
 
-                model.pageNumber++;
             }).finally(function(){
                 model.isLoadingMoreBlogs = false;
             });

diff --git a/src/js/views/home/templates/home-list.template.html b/src/js/views/home/templates/home-list.template.html
@@ -11,21 +11,30 @@ <h2 class="blog-list__title">
 
         <p class="blog-list__subtitle">Ou <a href>adicione agora mesmo seu blog.</a></p>
 
-        <div ng-show='!vc.vm.isLoadingMoreBlogs'>
-            <div class="blog-list__flex-grid">
+        <div>
+            <section ng-repeat='blogGroup in vc.vm.blogGroups' class="blog-list__flex-grid">
+
+                <span class='blog-list__flex-grid__title'>
+                </span>
+
+                <header class="blog-list__flex-grid__header" ng-if='$index > 0'>
+                    <p class="blog-list__flex-grid__header__title">Blogs que aceitam guest post</p>
+                    <p class="blog-list__flex-grid__header__subtitle">
+                        Página {[{ vc.vm.pageInitialNumber + $index }]}
+                    </p>
+                </header>
 
                 <blog-box blog='blog.json'
-                        ng-repeat='blog in vc.vm.blogList'
+                        ng-repeat='blog in blogGroup'
                         class="blog-list__flex-grid__item">
                 </blog-box>
-
-            </div>
-            <button class='btn btn--is-normal btn--featured blog-list__button p-display-block'
+            </section>
+            <button class='btn btn--is-normal blog-list__button p-display-block'
                     ng-click='vc.loadMoreBlogsAndPaginate()'
                     ng-disabled='vc.vm.isLoadingMoreBlogs'>
                 <span ng-show='!vc.vm.isLoadingMoreBlogs'>Carregar mais blogs</span>
                 <span ng-show='vc.vm.isLoadingMoreBlogs'>
-                    Carregando mais blogs <loader-inline></loader-inline>
+                    Carregando blogs <loader-inline></loader-inline>
                 </span>
             </button>
         </div>

diff --git a/src/styl/module/blog-box.styl b/src/styl/module/blog-box.styl
@@ -3,9 +3,11 @@
     background-color: #fff
     border-radius: 8px
     cursor: pointer
-    transition: all ease-in .5s
     position: relative
 
+    &:hover
+        transform: scale(1.025)
+
     + element(title)
         font-size: 16px
         display: none
@@ -50,6 +52,7 @@
         padding: get-spacing(2)
         position: relative
         top: 3px // ajuste arbitrário :(
+
         &:hover
             color: #ff1654
             animation: pulse .5s infinite alternate ease-in
diff --git a/src/styl/module/blog-list.styl b/src/styl/module/blog-list.styl
@@ -34,6 +34,29 @@
             @media (min-width: screen-tablet-min)
                 flex: "1 0 calc(33% - %s )" %get-spacing(2)
 
+        + element(header)
+            text-align: center
+            color: #999
+            line-height: 18px
+            margin: get-spacing(2) 0 0 0
+            flex-basis: 100%
+
+            + element(title)
+                font-size: 14px
+                padding-bottom: get-spacing(1)
+                border-bottom: 1px solid #f5f5f5
+                display: inline-block
+                position: relative
+                top: 1px
+                padding-left: get-spacing(1)
+                padding-right: get-spacing(1)
+                margin-bottom: 0
+
+            + element(subtitle)
+                border-top: 1px solid #eee
+                font-size: 12px
+                margin-top: 0
+
     + element(button)
         margin: get-spacing(2) auto
         display: block