ui.bootstrap.pagination for list, cleanup

diff --git a/angular-server.pl b/angular-server.pl
index 030d0fe..ba1cc10 100755 (executable)
--- a/angular-server.pl
+++ b/angular-server.pl
@@ -106,6 +106,12 @@ get '/lang/:lang/.template' => sub {
        $self->render( $self->stash('template') , lang => $self->stash('lang') );
 };
 
+get '/lang/:lang/template/*template' => sub { # angular-ui templates
+       my $self = shift;
+       my $path = '/lib/angular-ui/bootstrap/template/' . $self->stash('template');
+       warn "# render_static $path";
+       $self->render_static( $path );
+};
 
 get '/data/' => sub {
        my $self = shift;

diff --git a/app/drzb2013.html.ep b/app/drzb2013.html.ep
index 51d8598..9d089fb 100644 (file)
--- a/app/drzb2013.html.ep
+++ b/app/drzb2013.html.ep
@@ -82,6 +82,9 @@ body {
   -->
   <script src="/lib/angular/angular.js"></script>
   <script src="/lib/angular/angular-resource.js"></script>
+
+  <script src="/js/pagination.js"></script>
+
   <script src="/js/app.js"></script>
   <script src="/js/services.js"></script>
   <script src="/js/controllers.js"></script>

diff --git a/app/js/app.js b/app/js/app.js
index cf0efeb..0d81180 100644 (file)
--- a/app/js/app.js
+++ b/app/js/app.js
@@ -2,7 +2,7 @@
 
 
 // Declare app level module which depends on filters, and services
-angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives' ]).
+angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ui.bootstrap.pagination' ]).
   config(['$routeProvider', function($routeProvider) {
     $routeProvider.when('/registration/:registrationId', {templateUrl: 'partials/registration.html', controller: RegistrationCtrl});
     $routeProvider.when('/confirmation/:registrationId', {templateUrl: 'partials/confirmation.html', controller: RegistrationCtrl});

diff --git a/app/js/controllers.js b/app/js/controllers.js
index c3f74b7..ef67a50 100644 (file)
--- a/app/js/controllers.js
+++ b/app/js/controllers.js
@@ -168,12 +168,19 @@ function ListCtrl($scope, $log, Registration, RegistrationTypes, $filter) {
        $scope.pager = {
                page: 1,
                limit: 10,
-               results: 0,
-               last_page: 0
+               results: 1,
+               last_page: 1
        };
        $scope.search = {};
        $scope.ready = false;
        $scope.filters = [ 'student', 'hpd_member', 'reception', 'dinner' ];
+       $scope.show = {
+               registration_type: true,
+               filters: true,
+               search: true,
+               states: true,
+               pager_numeric: false
+       };
 
        $scope.all_registrations = Registration.query( function() {
                var Counts = {};
@@ -214,9 +221,10 @@ function ListCtrl($scope, $log, Registration, RegistrationTypes, $filter) {
                $log.info('Counts', Counts);
                $scope.Counts = Counts;
 
-//             $scope.list = $scope.all_registrations; // FIXME show all registrations on page loadyy
                $scope.ready = true;
 
+               $scope.reset();
+
        });
 
        $scope.filter_list = function(newVal, oldVal) {
@@ -225,12 +233,10 @@ function ListCtrl($scope, $log, Registration, RegistrationTypes, $filter) {
                var filtered =
                        $filter('filter')($scope.all_registrations, $scope.search);
 
-//             $scope.pager.page = 1;
+               $log.info('pager before apply', $scope.pager);
+
                $scope.pager.results = filtered.length;
                $scope.pager.last_page = Math.ceil( $scope.pager.results / $scope.pager.limit );
-               if ( $scope.pager.page > $scope.pager.last_page ) {
-                       $scope.pager.page = 1;
-               }
                $log.info('pager', $scope.pager);
 
                var from = ( $scope.pager.page - 1 ) * $scope.pager.limit;
@@ -243,17 +249,16 @@ function ListCtrl($scope, $log, Registration, RegistrationTypes, $filter) {
                }, $scope.list );
                $log.info('list length=', $scope.list.length, "offset=", from);
        };
-       angular.forEach( $scope.filters, function(f) {
-               $scope.$watch('search.'+f, $scope.filter_list);
-               $log.info('watch search.'+f);
-       });
-       $scope.$watch('search.registration_type', $scope.filter_list);
-       $scope.$watch('search.$', $scope.filter_list);
-       $scope.$watch('pager.page', $scope.filter_list);
-       $scope.$watch('pager.limit', $scope.filter_list);
+       $scope.$watch('search', $scope.filter_list, true);
+       $scope.$watch('pager', $scope.filter_list, true);
 
        $scope.RegistrationTypes = RegistrationTypes;
        $log.info( "RegistrationTypes", RegistrationTypes );
+
+       $scope.reset = function() {
+               $scope.search = { registration_type: '' };
+               $log.info('reset', $scope.search );
+       }
 }
 
 

diff --git a/app/js/directives.js b/app/js/directives.js
index 8220101..20b1127 100644 (file)
--- a/app/js/directives.js
+++ b/app/js/directives.js
@@ -127,4 +127,68 @@ directive('myLabelInput', function() {
                }
        };
 }])
+.directive('myPagination', function() { // modified ui.bootstrap.pagination
+  return {
+    restrict: 'E',
+    scope: {
+      numPages: '=',
+      currentPage: '=',
+      maxSize: '=',
+      onSelectPage: '&'
+    },
+    templateUrl: 'template/pagination/pagination.html',
+    replace: true,
+    link: function(scope) {
+      scope.$watch('numPages + currentPage + maxSize', function() {
+        scope.pages = [];
+
+        //set the default maxSize to numPages
+        var maxSize = ( scope.maxSize && scope.maxSize < scope.numPages ) ? scope.maxSize : scope.numPages;
+        var startPage = scope.currentPage - Math.floor(maxSize/2);
+        
+        //adjust the startPage within boundary
+        if(startPage < 1) {
+            startPage = 1;
+        }
+        if ((startPage + maxSize - 1) > scope.numPages) {
+            startPage = startPage - ((startPage + maxSize - 1) - scope.numPages );
+        }
+
+        for(var i=0; i < maxSize && i < scope.numPages ;i++) {
+          scope.pages.push(startPage + i);
+        }
+        if ( scope.currentPage > scope.numPages ) {
+          scope.selectPage(scope.numPages);
+        }
+      });
+      scope.noPrevious = function() {
+        return scope.currentPage === 1;
+      };
+      scope.noNext = function() {
+        return scope.currentPage === scope.numPages;
+      };
+      scope.isActive = function(page) {
+        return scope.currentPage === page;
+      };
+
+      scope.selectPage = function(page) {
+        if ( ! scope.isActive(page) ) {
+          scope.currentPage = page;
+          scope.onSelectPage({ page: page });
+        }
+      };
+
+      scope.selectPrevious = function() {
+        if ( !scope.noPrevious() ) {
+          scope.selectPage(scope.currentPage-1);
+        }
+      };
+      scope.selectNext = function() {
+        if ( !scope.noNext() ) {
+          scope.selectPage(scope.currentPage+1);
+        }
+      };
+    }
+  };
+})
 ;

diff --git a/app/js/pagination.js b/app/js/pagination.js
new file mode 120000 (symlink)
index 0000000..cfd2d8c
--- /dev/null
+++ b/app/js/pagination.js
@@ -0,0 +1 @@
+../lib/angular-ui/bootstrap/src/pagination/pagination.js
\ No newline at end of file

diff --git a/app/partials/list.html.ep b/app/partials/list.html.ep
index 6f48847..e62c88a 100644 (file)
--- a/app/partials/list.html.ep
+++ b/app/partials/list.html.ep
@@ -1,13 +1,15 @@
-<div ng-show="! ready">
+
+<div ng-show="! ready" class="alert alert-important">
 Loading data...
 </div>
 
-
 <form ng-controller="ListCtrl" class="form-search" ng-show="ready">
 
-<div class="controls-row">
 
-<h2>Odaberite tip registracije</h2>
+<fieldset ng-show="show.registration_type">
+<legend>
+Odaberite tip registracije
+</legend>
 
 <label class="radio input-block-level" ng-repeat="type in RegistrationTypes" ng-switch on="type.code" ng-show="Counts[type.code] > 0">
 <hr ng-switch-when="false">
@@ -24,59 +26,75 @@ Loading data...
 </span>
 </label>
 
-</div>
+</fieldset>
+
+<fieldset ng-show="show.filters">
+<legend>
+Filters
+</legend>
 
-<div class="controls-row">
-Filters:
 <label class="badge filter-{{search[filter]}}" ng-repeat="filter in filters">
  <input ng-model="search[filter]" type="checkbox">
  {{Counts[filter]}}
  {{filter}}
 </label>
 
-</div>
+</fieldset>
 
-<div class="controls-row">
+<fieldset>
+<legend>
+Search
+</legend>
 
-<label>
-Search:
-<input class="search-query" ng-model="search.$">
-</label>
+<input class="my-lebel-input search-query" ng-model="search.$" label="Search">
 
-<a class="btn btn-invert" href="" ng-click="search = {}">
+<a class="btn btn-invert" href="" ng-click="reset()">
 <i class="icon-remove"></i></a>
+
 <b>{{pager.results}} results</b>
 <tt>{{search}}</tt>
 
-<br>
+</fieldset>
+
+<fieldset ng-show="show.states">
+
 <button ng-click="search.$ = 'draft'" class="btn draft">draft</button>
 <button ng-click="search.$ = 'confirmation'" class="btn confirmation">confirmation</button>
 <button ng-click="search.$ = 'verified'" class="btn verified">verified</button>
-<input type="number" ng-model="pager.page" min="1" max="{{pager.last_page}}">
-<input type="number" ng-model="pager.limit">
 
-</div>
+</fieldset>
 
+<fieldset ng-show="show.pager_numeric">
+<input type="number" ng-model="pager.page" size="3" min="1" max="{{pager.last_page}}">
+<input type="number" ng-model="pager.limit">
+</fieldset>
 
-<div ng-show="list.length">
-
-<h2>Prijavljenje registracije {{search.registration_type}}</h2>
 
+<div ng-show="list.length" class="content">
 
-<ul>
+<pagination class="pagination-large" max-size="12"
+       num-pages="pager.last_page"
+       current-page="pager.page"
+></pagination>
 
-<li ng-repeat="registration in list">
+<dl ng-repeat="registration in list">
+%= include 'registration/view', before => begin
 {{registration.nr}}
 <a class="btn btn-primary" href="#/verified/{{registration.id}}" target="{{registration.id}}">change status</a>
-%= include 'registration/view'
-</li>
+% end
+</dl>
 
-</ul>
+<pagination class="pagination-large" max-size="12"
+       num-pages="pager.last_page"
+       current-page="pager.page"
+></pagination>
 
 </div><!-- ng-show="list.length"-->
 
 % if ( $lang =~ m/-dev/ ) {
 <pre class="controls-row">
+{{pager}}
+
 {{Counts}}
 </pre>
 % }

diff --git a/app/registration/view.html.ep b/app/registration/view.html.ep
index 3b9b4cb..17f0db2 100644 (file)
--- a/app/registration/view.html.ep
+++ b/app/registration/view.html.ep
@@ -1,4 +1,5 @@
-
+<dt>
+%= $before->()
  <a id="edit-registration" class="btn" href="#/registration/{{registration.id}}">edit</a>
  {{registration.user.registration_type}}
  {{registration._id | registration_date_time}}
@@ -7,8 +8,11 @@
 % if ( $lang =~ m/-dev/ ) {
  <a class="btn" href="<%= $couchdb_view %>/{{registration._id}}" target="couchdb">couchdb</a>
 % }
+</dt>
+
+<dd>
 
-       <p>
+       <p class="well">
         {{registration.user.firstname}}
         {{registration.user.surname}}
         <em>{{registration.user.organization}}</em>,
@@ -50,3 +54,4 @@
 
     <p class="abstract">{{work.abstract}}</p>
 
+</dd>

diff --git a/test/unit/directivesSpec.js b/test/unit/directivesSpec.js
index ead1584..32c0ae3 100644 (file)
--- a/test/unit/directivesSpec.js
+++ b/test/unit/directivesSpec.js
@@ -41,9 +41,9 @@ describe('directives', function() {
     beforeEach(module('myApp.services'));
     it('div+label+input', function() {
       inject(function($compile, $rootScope, RegistrationState) {
-               dump( RegistrationState() );
+               //dump( RegistrationState() );
         var element = $compile('<div><select class="my-label-select" ng-model="m" label="label" ng-options="value for value in RegistrationState()"></select></div>')($rootScope);
-               dump(element.html());
+               //dump(element.html());
         expect(element.html()).toMatch(/div.*label.*label.*div.*select.*select.*div.*div/i);
       });
     });