pagination for runs in browser

StanfordBioinformatics · Oct 6, 2017 · 44b3543 · 44b3543
1 parent 8be51bf
commit 44b3543
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 7 deletions.
diff --git a/loomengine/portal/dashboard.css → loomengine/portal/app.css b/loomengine/portal/dashboard.css → loomengine/portal/app.css
@@ -136,3 +136,7 @@ g {
     fill: #333;
     stroke-width: 1.5px;
 }
+
+.textarea-sm {
+  width: 50px !important;
+}
diff --git a/loomengine/portal/index.html b/loomengine/portal/index.html
@@ -17,7 +17,7 @@
     <link href="bootstrap/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
 
     <!-- Custom styles for this template -->
-    <link href="dashboard.css" rel="stylesheet">
+    <link href="app.css" rel="stylesheet">
 
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
@@ -79,6 +79,9 @@
     <script src="d3/d3.v3.min.js"></script>
     <script src="d3/dagre-d3.js"></script>
 
+    <!-- https://github.com/brantwills/Angular-Paging -->
+    <script src="paging/paging.min.js"></script>
+
     <!-- Loom app and controllers -->
     <script src="scripts/loom.js"></script>
     <script src="scripts/loom.routes.js"></script>

diff --git a/loomengine/portal/paging/paging.min.js b/loomengine/portal/paging/paging.min.js
diff --git a/loomengine/portal/scripts/controllers/runList.controller.js b/loomengine/portal/scripts/controllers/runList.controller.js
@@ -7,10 +7,18 @@ angular
 RunListController.$inject = ['$scope', 'DataService', '$location'];
 
 function RunListController($scope, DataService, $location) {
+    function loadRuns() {
+	var offset = ($scope.currentPage - 1) * $scope.pageSize
+	DataService.getRuns($scope.pageSize, offset).then(function(data) {
+	    $scope.runs = data.results;
+	    $scope.total = data.count;
+	    $scope.loading = false;
+	});
+    }
     $scope.$location = $location;
+    $scope.$watch('currentPage', loadRuns, true);
+    $scope.pageSize = 10;
+    $scope.currentPage=1;
     $scope.loading = true;
-    DataService.getRuns().then(function(runs) {
-	    $scope.loading = false;
-	    $scope.runs = runs;
-    });
+    loadRuns();
 };
diff --git a/loomengine/portal/scripts/loom.js b/loomengine/portal/scripts/loom.js
@@ -7,6 +7,7 @@ angular
 	'loom.filters',
 	'loom.routes',
 	'loom.services',
+	'bw.paging',
     ]);
 
 angular

diff --git a/loomengine/portal/scripts/services/data.service.js b/loomengine/portal/scripts/services/data.service.js
@@ -101,8 +101,8 @@ function DataService($http, $q) {
 		return response.data;
 	    });
     }
-    function getRuns() {
-        return $http.get("/api/runs/?parent_only")
+    function getRuns(limit, offset) {
+        return $http.get("/api/runs/?parent_only&limit="+limit+"&offset="+offset)
             .then(function(response) {
 		return response.data;
             });

diff --git a/loomengine/portal/views/run-list.html b/loomengine/portal/views/run-list.html
@@ -1,3 +1,14 @@
+<div class="container-fluid">
+  <div class="row pull-right">
+    <div class="col-xs-12 pull-right">
+      <div paging
+	   page="currentPage"
+	   page-size="pageSize"
+	   total="total">
+      </div>
+    </div>
+  </div>
+</div>
 <img src="assets/loading.gif" alt="Loading..." ng-show="loading" class="center-block">
 <div ng-hide="loading">
   <div class = "table-responsive" ng-show="runs.length">
@@ -19,3 +30,24 @@
   </div>
   <div ng-hide="runs.length">no runs</div>
 </div>
+<div class="container-fluid pull-right" ng-show="total>pageSize">
+  <div class="row">
+    <div class="col-xs-12">
+      <div paging
+	   page="currentPage"
+	   page-size="pageSize"
+	   total="total">
+      </div>
+    </div>
+  </div>
+  <div class="row pull-right">
+    <div class="form-inline col-xs-12">
+      <label>page</label>
+      <input
+	placeholder="page"
+	class="form-control textarea-sm"
+	maxlength="16"
+	ng-model="currentPage"/>
+    </div>
+  </div>
+</div>