OHIF-48: Add pagination for worklist

OHIFViewer/.meteor/packages

@@ -41,3 +41,4 @@ standard-minifier-css@1.1.8
 standard-minifier-js@1.1.8
 aldeed:simple-schema
 johdirr:meteor-git-rev
+aldeed:template-extension

OHIFViewer/.meteor/versions

@@ -1,4 +1,5 @@
 aldeed:simple-schema@1.5.3
+aldeed:template-extension@4.0.0
 allow-deny@1.0.5
 arsnebula:reactive-promise@0.9.1
 autoupdate@1.3.11

Packages/worklist/client/components/worklistPagination/worklistPagination.html

@@ -0,0 +1,29 @@
+<template name="worklistPagination">
+        <div class="worklistPagination">
+            <div class="row">
+                <div class="col-xs-4 col-sm-3 col-md-3">
+                    {{#with recordCount}}
+                         <div class="form-inline form-group rows-per-page">
+                            <label>
+                                <span>Show</span>
+                                <select class="js-select-rows-per-page">
+                                    <option value="25">25</option>
+                                    <option value="50">50</option>
+                                    <option value="100">100</option>
+                                </select>
+
+                                <span class="rows-per-page-label">rows per page</span>
+                            </label>
+                        </div>
+                    {{/with}}
+                </div>
+                <div class="col-xs-8 col-sm-9 col-md-9">
+                    <div class="form-inline form-group page-number">
+                        <label>
+                            <ul id="pagination" class="no-margins"></ul>
+                        </label>
+                    </div>
+                </div>
+            </div>
+        </div>
+</template>

Packages/worklist/client/components/worklistPagination/worklistPagination.js

@@ -0,0 +1,58 @@
+import { Template } from 'meteor/templating';
+
+import './worklistPagination.html';
+
+const visiblePages = 10;
+Template.worklistPagination.onCreated(function() {
+    let instance = Template.instance();
+    // replace parentVariable with the name of the instance variable
+    instance.parent = this.parent(1);
+});
+
+Template.worklistPagination.onRendered(function() {
+    const instance = Template.instance();
+    const $paginationControl = instance.$('#pagination');
+
+    // Track changes on recordCount and rowsPerPage
+    instance.autorun(function() {
+        const recordCount = instance.parent.recordCount.get();
+        const rowsPerPage = instance.parent.rowsPerPage.get();
+
+        // Destroy plugin if exists
+        if ($paginationControl.data().twbsPagination) {
+            $paginationControl.twbsPagination('destroy');
+        }
+
+        if (recordCount && rowsPerPage) {
+            const totalPageNumber = Math.ceil(recordCount / rowsPerPage);
+
+            // Initialize plugin
+            $paginationControl.twbsPagination({
+                totalPages: totalPageNumber,
+                visiblePages: visiblePages,
+                onPageClick: function (event, page) {
+                    // Update currentPage
+                    // Decrease page by 1 to set currentPage
+                    // Since reactive table current page index starts by 0
+                    instance.parent.currentPage.set(page - 1);
+                }
+            });
+        }
+    });
+});
+
+Template.worklistPagination.helpers({
+    recordCount() {
+        const instance = Template.instance();
+        return instance.parent.recordCount.get();
+    }
+});
+
+Template.worklistPagination.events({
+    'change .js-select-rows-per-page'(event, instance) {
+        const rowsPerPage = $(event.currentTarget).val();
+
+        // Update rowsPerPage of parent
+        instance.parent.rowsPerPage.set(parseInt(rowsPerPage, 10));
+    }
+});

Packages/worklist/client/components/worklistPagination/worklistPagination.styl

@@ -0,0 +1,39 @@
+@import "{design}/app"
+
+.worklistPagination
+    font-size: 13px
+    font-weight: normal !important
+
+  .rows-per-page
+    padding-top: 20px
+
+    label
+      font-weight: normal
+
+    select
+      background-color: $primaryBackgroundColor
+      color: white
+
+  .page-number
+    text-align: right
+
+    label
+      font-weight: normal
+
+      ul#pagination
+
+        li
+          a
+            padding: 4px 8px
+            background-color: $primaryBackgroundColor
+            color: white
+
+            &:hover
+              color: $activeColor
+
+        .active
+
+          a
+            background-color: $uiGrayDarker
+            color: white
+

Packages/worklist/client/components/worklistResult/worklistResult.html

@@ -92,6 +92,10 @@
             {{/each}}
             </tbody>
         </table>
+
+        <!-- Pagination -->
+        {{> worklistPagination }}
+
         {{#if session "showLoadingText"}}
             {{>loadingText}}
         {{ else }}

Packages/worklist/client/components/worklistResult/worklistResult.js

@@ -6,19 +6,37 @@ Template.worklistResult.helpers({
      * by Patient name and Study Date in Ascending order.
      */
     studies() {
-        const sortOption = Session.get('sortOption');
+        const instance = Template.instance();
-        if (sortOption) {
+        let studies;
-            return WorklistStudies.find({}, {
+        let sortOption = {
-                sort: sortOption
+            patientName: 1,
-            });
+            studyDate: 1
+        };
+
+        // Update sort option if session is defined
+        if (Session.get('sortOption')) {
+            sortOption = Session.get('sortOption');
         }
 
-        return WorklistStudies.find({}, {
+        // Pagination parameters
-            sort: {
+        const rowsPerPage = instance.rowsPerPage.get();
-                patientName: 1,
+        const currentPage = instance.currentPage.get();
-                studyDate: 1
+        const offset = rowsPerPage * currentPage;
-            }
+        const limit = offset + rowsPerPage;
-        });
+
+        studies = WorklistStudies.find({}, {
+            sort: sortOption
+        }).fetch();
+
+        if (!studies) {
+            return;
+        }
+
+        // Update record count
+        instance.recordCount.set(studies.length);
+
+        // Limit studies
+        return studies.slice(offset, limit);
     },
 
     numberOfStudies() {
@@ -163,6 +181,15 @@ Template.worklistResult.onCreated(() => {
     instance.sortOption = new ReactiveVar();
     instance.sortingColumns = new ReactiveDict();
 
+    // Pagination parameters
+
+    // Rows per page is 25 as default
+    instance.rowsPerPage = new ReactiveVar(25);
+
+    // Set currentPage indexed 0
+    instance.currentPage = new ReactiveVar(0);
+    instance.recordCount = new ReactiveVar();
+
     // Set sortOption
     const sortOptionSession = Session.get('sortOption');
     if (sortOptionSession) {

Packages/worklist/package.js

@@ -69,6 +69,10 @@ Package.onUse(function (api) {
     api.addFiles('client/components/progressDialog/progressDialog.html', 'client');
     api.addFiles('client/components/progressDialog/progressDialog.styl', 'client');
     api.addFiles('client/components/progressDialog/progressDialog.js', 'client');
+
+    api.addFiles('client/components/worklistPagination/worklistPagination.html', 'client');
+    api.addFiles('client/components/worklistPagination/worklistPagination.styl', 'client');
+    api.addFiles('client/components/worklistPagination/worklistPagination.js', 'client');
     
     // Client-side library functions
     api.addFiles('client/lib/getStudyMetadata.js', 'client');
@@ -79,6 +83,7 @@ Package.onUse(function (api) {
     api.addFiles('client/lib/worklist.js', 'client');
     api.addFiles('client/lib/queryStudies.js', 'client');
     api.addFiles('client/lib/importStudies.js', 'client');
+    api.addFiles('client/lib/jquery.twbsPagination/jquery.twbsPagination.min.js', 'client');
 
     // Server-side functions
     api.addFiles('server/publications.js', 'server');