web: Add search results paging

Signed-off-by: Eduardo L. Buratti <elb09@c3sl.ufpr.br>

web/app/partials/search.html

@@ -3,7 +3,7 @@
         <ul ng-repeat="filter in filters">
             <li class="header">{{ filter.title }}:</li>
             <li class="checkbox" ng-repeat="opt in filter.options">
-                <label><input type="checkbox" ng-model="opt.value" ng-click="reload()"> {{ opt.title }}</label>
+                <label><input type="checkbox" ng-model="opt.value" ng-click="updateFilters()"> {{ opt.title }}</label>
             </li>
             <li class="checkbox" ng-show="filter.more"><a href="">outros...</a></li>
         </ul>
@@ -11,6 +11,15 @@
         <div class="clearfix"></div>
     </div>
 
+    <ul class="pagination" ng-show="pageCount > 0">
+        <li ng-class="{disabled: currentPage == 0}"><a href="" ng-click="jumpTo(0)">&laquo;</a></li>
+        <li class="disabled" ng-show="collapsedPages.lower"><a href="">...</a></li>
+        <li ng-repeat="p in pages" ng-class="{active: currentPage == p}"><a href="" ng-click="jumpTo(p)">{{ p +1  }}</a></li>
+        <li class="disabled" ng-show="collapsedPages.upper"><a href="">...</a></li>
+        <li ng-class="{disabled: currentPage >= pageCount}"><a href="" ng-click="jumpTo(pageCount-1)">&raquo;
+        </a></li>
+    </ul>
+
     <table class="table table-striped">
         <thead>
             <tr>

web/assets/js/attendance.search.js

@@ -61,11 +61,16 @@ angular.module('datasid.attendance.search', []).
 
     factory('PointsFactory', function($resource) {
         return $resource('/api/points', {}, {
-            list: {method: 'POST', isArray: true}
+            list: {method: 'POST', isArray: true},
+            count: {method: 'POST', url: '/api/points/count'}
         });
     }).
 
     controller('SearchCtrl', function ($scope, $rootScope, PointsFactory) {
+        $scope.points = [];
+
+        $scope.sorting = 'name';
+
         $scope.filters = [
             {
                 key: 'project',
@@ -90,31 +95,53 @@ angular.module('datasid.attendance.search', []).
                 more: true
             }
         ];
+        $scope.compiledFilters = {};
 
-        $scope.points = [];
+        $scope.currentPage = 0;
+        $scope.pageCount = 0;
+        $scope.pages = [];
+        $scope.collapsedPages = {lower: false, upper: false};
 
-        $scope.sorting = 'name';
+        var pageUpdate = function () {
+            if ($scope.currentPage > $scope.pageCount)
+                $scope.currentPage = $scope.pageCount;
 
-        $scope.reload = function () {
-            var filters = {};
+            var lowerBound = $scope.currentPage - 5,
+                upperBound = $scope.currentPage + 5;
 
-            for (var i=0; i < $scope.filters.length; i++) {
-                var filter = $scope.filters[i];
+            $scope.collapsedPages.lower = true;
+            if (lowerBound <= 0) {
+                upperBound += -lowerBound;
+                $scope.collapsedPages.lower = false;
+                lowerBound = 0;
+            }
 
-                filters[filter.key] = [];
-                for (var j=0; j < filter.options.length; j++) {
-                    if (filter.options[j].value)
-                        filters[filter.key].push(filter.options[j].key);
-                }
+            $scope.collapsedPages.upper = true;
+            if (upperBound >= $scope.pageCount) {
+                lowerBound -= upperBound - $scope.pageCount;
+                $scope.collapsedPages.upper = false;
+                upperBound = $scope.pageCount;
             }
 
+            $scope.pages = [];
+            for (var i=lowerBound; i<upperBound; i++)
+                $scope.pages.push(i);
+        };
+        $scope.$watch('pageCount', pageUpdate);
+        $scope.$watch('currentPage', pageUpdate);
+
+        $scope.jumpTo = function (page) {
+            if ($scope.currentPage == page)
+                return;
+
+            $scope.currentPage = page;
+
             $scope.points = PointsFactory.list({
                 sorting: $scope.sorting,
-                page: 0,
-                filters: filters
+                page: $scope.currentPage,
+                filters: $scope.compiledFilters
             });
         };
-        $scope.reload();
 
         $scope.setSorting = function (column) {
             if ($scope.sorting === column)
@@ -122,6 +149,44 @@ angular.module('datasid.attendance.search', []).
             else
                 $scope.sorting = column;
 
-            $scope.reload();
+            $scope.currentPage = 0;
+
+            $scope.points = PointsFactory.list({
+                sorting: $scope.sorting,
+                page: $scope.currentPage,
+                filters: $scope.compiledFilters
+            });
         };
-    });;
\ No newline at end of file
+
+        $scope.updateFilters = function () {
+            $scope.compiledFilters = {};
+
+            for (var i=0; i < $scope.filters.length; i++) {
+                var filter = $scope.filters[i];
+
+                $scope.compiledFilters[filter.key] = [];
+                for (var j=0; j < filter.options.length; j++) {
+                    if (filter.options[j].value)
+                        $scope.compiledFilters[filter.key].push(filter.options[j].key);
+                }
+            }
+
+            $scope.currentPage = 0;
+
+            PointsFactory.count({
+                sorting: $scope.sorting,
+                page: $scope.currentPage,
+                filters: $scope.compiledFilters
+            }, function (res) {
+                $scope.pageCount = res.pageCount || 0;
+            });
+
+            $scope.points = PointsFactory.list({
+                sorting: $scope.sorting,
+                page: $scope.currentPage,
+                filters: $scope.compiledFilters
+            });
+        };
+
+        $scope.updateFilters();
+    });
\ No newline at end of file

web/routes/points.js

-exports.list = function(req, res) {
+function parseParams(req) {
     var c = 1, filters, sort, offset, conditions = [], parameters = [], where = "";
 
     filters = req.body.filters || {};
@@ -41,6 +41,17 @@ exports.list = function(req, res) {
     if (conditions.length > 0)
         where = " AND (" + conditions.join(') AND (') + ")";
 
+    return {
+        where: where,
+        sort: sort,
+        offset: offset,
+        parameters: parameters
+    };
+}
+
+exports.list = function(req, res) {
+    var params = parseParams(req);
+
     var query = "\
         SELECT \
             pt.id, \
@@ -64,16 +75,48 @@ exports.list = function(req, res) {
                     'GESAC' AS project \
                     FROM convention c, point p \
                     WHERE c.id_point = p.id) pt, city ct \
-            WHERE pt.id_city = ct.id " + where + " \
-            ORDER BY " + sort + " \
+            WHERE pt.id_city = ct.id " + params.where + " \
+            ORDER BY " + params.sort + " \
             LIMIT 50 \
-            OFFSET " + offset;
+            OFFSET " + params.offset;
 
-    // console.log(query);
+    req.db.query(query, params.parameters, function(result) {
+        req.db.done();
+        res.json(result.rows);
+    });
+};
 
-    req.db.query(query, parameters, function(result) {
+exports.count = function(req, res) {
+    var params = parseParams(req);
 
+    var query = "\
+        SELECT \
+            COUNT(*) AS count \
+            FROM \
+                (SELECT \
+                    t.id_point AS id, \
+                    t.name, \
+                    p.id_city, \
+                    CASE WHEN p.is_gesac THEN 'TLBR/GESAC' ELSE 'TLBR' END AS project \
+                    FROM telecenter t, point p \
+                    WHERE t.id_point = p.id \
+                UNION \
+                SELECT \
+                    id_point AS id, \
+                    establishment AS name, \
+                    p.id_city, \
+                    'GESAC' AS project \
+                    FROM convention c, point p \
+                    WHERE c.id_point = p.id) pt, city ct \
+            WHERE pt.id_city = ct.id " + params.where;
+
+    req.db.query(query, params.parameters, function(result) {
         req.db.done();
-        res.json(result.rows);
+
+        if (result.rows.length < 1)
+            return res.json(500, {error: 'db_query_failed'});
+
+        var count = result.rows[0].count;
+        res.json({count: count, pageCount: Math.ceil(count / 50)});
     });
 };
\ No newline at end of file

web/server.js

@@ -16,5 +16,6 @@ app.use(express.static(__dirname + '/app'));
 db.config(config.db_config);
 
 app.all('/api/points', db.connect, points.list);
+app.all('/api/points/count', db.connect, points.count);
 
 app.listen(port);
\ No newline at end of file