fix(study-list): Use offset and limit in the dicomweb queries used to search studies with next/prev pagination in study list (#290)

Packages/ohif-core/client/components/paginationArea/paginationArea.html

@@ -8,13 +8,22 @@
                     <span>rows per page</span>
                 </div>
             </div>
-            <div class="col-xs-8 col-sm-9 col-md-9">
-                <div class="form-inline form-group page-number">
-                    <label>
-                        <ul class="pagination-control no-margins"></ul>
-                    </label>
+            {{#if paginationButtonsEnabled}}
+                <div class="col-xs-8 col-sm-9 col-md-9">
+                    <div class="form-inline form-group page-buttons noselect">
+                        <label>
+                            <ul class="pagination-control no-margins">
+                                <li class="page-item prev disabled">
+                                    <a href="#" class="page-link">Previous</a>
+                                </li>
+                                <li class="page-item next disabled">
+                                    <a href="#" class="page-link">Next</a>
+                                </li>
+                            </ul>
+                        </label>
+                    </div>
                 </div>
-            </div>
+            {{/if}}
         </div>
     {{/form}}
 </template>

Packages/ohif-core/client/components/paginationArea/paginationArea.js

@@ -1,8 +1,6 @@
 import { Template } from 'meteor/templating';
 import { SimpleSchema } from 'meteor/aldeed:simple-schema';
-import 'twbs-pagination';
-
-const visiblePages = 10;
+import { $ } from 'meteor/jquery';
 
 Template.paginationArea.onCreated(function() {
     const instance = Template.instance();
@@ -19,60 +17,66 @@ Template.paginationArea.onCreated(function() {
 
 Template.paginationArea.onRendered(() => {
     const instance = Template.instance();
-    instance.$paginationControl = instance.$('.pagination-control');
 
     // Track changes on recordCount and rowsPerPage
     instance.autorun(() => {
         const recordCount = instance.data.recordCount.get();
         const rowsPerPage = instance.data.rowsPerPage.get();
+        const currentPage = instance.data.currentPage.get();
 
-        // Destroy plugin if exists
-        if (instance.$paginationControl.data().twbsPagination) {
-            instance.$paginationControl.twbsPagination('destroy');
-        }
+        Meteor.defer(() => {
+            const prevButton = instance.$('.prev')[0];
+            const nextButton = instance.$('.next')[0];
+            if (!prevButton || !nextButton) {
+                return;
+            }
 
-        if (recordCount && rowsPerPage) {
-            const totalPages = Math.ceil(recordCount / rowsPerPage);
+            // Enable if there are potentially more records, otherwise disable it
+            if (recordCount >= rowsPerPage) {
+                nextButton.classList.remove('disabled');
+            } else {
+                nextButton.classList.add('disabled');
+            }
 
-            // Initialize plugin
-            instance.$paginationControl.twbsPagination({
-                totalPages,
-                visiblePages,
-                onPageClick: (event, page) => {
-                    // Update currentPage
-                    // Decrease page by 1 to set currentPage
-                    // Since reactive table current page index starts by 0
-                    instance.data.currentPage.set(page - 1);
-                }
-            });
-        }
+            // Enable the previous button if it is not the first page, otherwise disable it
+            if (currentPage > 0) {
+                prevButton.classList.remove('disabled');
+            } else {
+                prevButton.classList.add('disabled');
+            }
+        });
     });
 });
 
-Template.paginationArea.onDestroyed(() => {
-    const instance = Template.instance();
-    if (instance.$paginationControl.data().twbsPagination) {
-        instance.$paginationControl.twbsPagination('destroy');
-    }
-});
-
 Template.paginationArea.helpers({
-    recordCount() {
+    paginationButtonsEnabled() {
         const instance = Template.instance();
-        return instance.data.recordCount.get();
-    },
 
-    isRowsPerPageSelected(rowsPerPage) {
-        const instance = Template.instance();
-        return rowsPerPage === instance.data.rowsPerPage.get();
+        const recordCount = instance.data.recordCount.get();
+        const rowsPerPage = instance.data.rowsPerPage.get();
+        const currentPage = instance.data.currentPage.get();
+
+        // Show pagination if it is not first page or there are potentially more records
+        return currentPage > 0 || recordCount >= rowsPerPage;
     }
 });
 
 Template.paginationArea.events({
+    'click .prev > a'(event, instance) {
+        const currentPage = instance.data.currentPage.get();
+        instance.data.currentPage.set(currentPage - 1);
+    },
+
+    'click .next > a'(event, instance) {
+        const currentPage = instance.data.currentPage.get();
+        instance.data.currentPage.set(currentPage + 1);
+    },
+
     'change [data-key=rowsPerPage]'(event, instance) {
         const rowsPerPage = $(event.currentTarget).data('component').value();
 
         // Update rowsPerPage
         instance.data.rowsPerPage.set(parseInt(rowsPerPage, 10));
+        instance.data.currentPage.set(0);
     }
 });

Packages/ohif-core/client/components/paginationArea/paginationArea.styl

@@ -18,7 +18,7 @@
     select
       width: 42px
 
-  .page-number
+  .page-buttons
     margin: 0
     text-align: right
 
@@ -29,28 +29,34 @@
         margin: 0
 
         li
+          display: table-cell
+          padding: 5px 2px
+
           a
             padding: 4px 8px
             theme('background-color', '$primaryBackgroundColor')
             theme('border-color', '$uiGray')
             theme('background-color', '$uiGrayDarkest')
             color: white
-            padding: 4px 8px
+            text-decoration: none
 
             &:hover
               theme('color', '$activeColor')
 
-        .active
-          a
-            theme('background-color', '$uiGray')
-            border-color: #ddd
-            color: white
+          .active
+            a
+              theme('background-color', '$uiGray')
+              border-color: #ddd
+              color: white
 
         .disabled
+          cursor: not-allowed
+
           a, a:hover, a:focus, a:active
             theme('background-color', '$uiGrayDarkest')
             theme('border-color', '$uiGray')
             theme('color', '$uiGrayLight')
+            pointer-events: none
 
           &:not(.disabled):hover a
             theme('background-color', '$uiGrayDark')