Creating paginationArea component on ohif:core package

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

@@ -1,5 +1,6 @@
 import './base';
 import './bootstrap';
+import './paginationArea';
 import './playground/playground.html';
 import './playground/playground.styl';
 import './playground/playground.js';

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

@@ -0,0 +1,3 @@
+import './paginationArea.html';
+import './paginationArea.js';
+import './paginationArea.styl';

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

@@ -1,10 +1,10 @@
-<template name="studylistPagination">
-    {{#form class='studylistPagination' schema=instance.schema}}
+<template name="paginationArea">
+    {{#form class=(concat 'pagination-area ' this.class) schema=instance.schema}}
         <div class="row">
             <div class="col-xs-4 col-sm-3 col-md-3">
                  <div class="form-inline form-group rows-per-page">
                     <span>Show</span>
-                    {{>inputSelect class='select-small js-select-rows-per-page' key='rowsPerPage' hideSearch=true}}
+                    {{>inputSelect class='select-small' key='rowsPerPage' hideSearch=true}}
                     <span>rows per page</span>
                 </div>
             </div>

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

@@ -1,14 +1,13 @@
 import { Template } from 'meteor/templating';
 import { SimpleSchema } from 'meteor/aldeed:simple-schema';
-
-import './studylistPagination.html';
+import 'twbs-pagination';
 
 const visiblePages = 10;
 
-Template.studylistPagination.onCreated(function() {
+Template.paginationArea.onCreated(function() {
     const instance = Template.instance();
-    // replace parentVariable with the name of the instance variable
-    instance.parent = this.parent(1);
+
+    // Create the rowsPerPage schema
     instance.schema = new SimpleSchema({
         rowsPerPage: {
             type: Number,
@@ -18,55 +17,60 @@ Template.studylistPagination.onCreated(function() {
     });
 });
 
-Template.studylistPagination.onRendered(() => {
+Template.paginationArea.onRendered(() => {
     const instance = Template.instance();
-    const $paginationControl = instance.$('.pagination-control');
+    instance.$paginationControl = instance.$('.pagination-control');
 
     // Track changes on recordCount and rowsPerPage
     instance.autorun(() => {
-        const recordCount = instance.parent.recordCount.get();
-        const rowsPerPage = instance.parent.rowsPerPage.get();
+        const recordCount = instance.data.recordCount.get();
+        const rowsPerPage = instance.data.rowsPerPage.get();
 
         // Destroy plugin if exists
-        if ($paginationControl.data().twbsPagination) {
-            $paginationControl.twbsPagination('destroy');
+        if (instance.$paginationControl.data().twbsPagination) {
+            instance.$paginationControl.twbsPagination('destroy');
         }
 
         if (recordCount && rowsPerPage) {
             const totalPages = Math.ceil(recordCount / rowsPerPage);
 
             // Initialize plugin
-            $paginationControl.twbsPagination({
+            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.parent.currentPage.set(page - 1);
+                    instance.data.currentPage.set(page - 1);
                 }
             });
         }
     });
 });
 
-Template.studylistPagination.helpers({
+Template.paginationArea.onDestroyed(() => {
+    const instance = Template.instance();
+    instance.$paginationControl.twbsPagination('destroy');
+});
+
+Template.paginationArea.helpers({
     recordCount() {
         const instance = Template.instance();
-        return instance.parent.recordCount.get();
+        return instance.data.recordCount.get();
     },
 
     isRowsPerPageSelected(rowsPerPage) {
         const instance = Template.instance();
-        return rowsPerPage === instance.parent.rowsPerPage.get();
+        return rowsPerPage === instance.data.rowsPerPage.get();
     }
 });
 
-Template.studylistPagination.events({
-    'change .js-select-rows-per-page'(event, instance) {
-        const rowsPerPage = $(event.currentTarget).val();
+Template.paginationArea.events({
+    'change [data-key=rowsPerPage]'(event, instance) {
+        const rowsPerPage = $(event.currentTarget).data('component').value();
 
-        // Update rowsPerPage of parent
-        instance.parent.rowsPerPage.set(parseInt(rowsPerPage, 10));
+        // Update rowsPerPage
+        instance.data.rowsPerPage.set(parseInt(rowsPerPage, 10));
     }
 });

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

@@ -1,6 +1,6 @@
-@import "{ohif:design}/app"
+@require '{ohif:design}/app'
 
-.studylistPagination
+.pagination-area
     font-size: 13px
     font-weight: normal !important
 
@@ -59,7 +59,3 @@
           &.active a
             theme('background-color', '$uiGrayDark')
             theme('color', '$activeColor')
-
-@media only screen and (max-width: 1069px)
-  .studylistPagination > .row
-    margin-right: 0;

Packages/ohif-core/package.js

@@ -1,3 +1,7 @@
+Npm.depends({
+    'twbs-pagination': '1.4.1'
+});
+
 Package.describe({
     name: 'ohif:core',
     summary: 'OHIF core components, helpers and UI functions',

Packages/ohif-study-list/client/components/studylist/index.js

@@ -12,7 +12,3 @@ import './studylistResult/studylistResult.styl';
 import './studylistToolbar/studylistToolbar.html';
 import './studylistToolbar/studylistToolbar.js';
 import './studylistToolbar/studylistToolbar.styl';
-
-import './studylistPagination/studylistPagination.html';
-import './studylistPagination/studylistPagination.styl';
-import './studylistPagination/studylistPagination.js';

Packages/ohif-study-list/client/components/studylist/studylistResult/studylistResult.html

@@ -75,7 +75,7 @@
         </table>
 
         <!-- Pagination -->
-        {{>studylistPagination}}
+        {{>paginationArea instance.paginationData}}
 
         {{#if session "showLoadingText"}}
             {{>loadingText}}

Packages/ohif-study-list/client/components/studylist/studylistResult/studylistResult.js

@@ -27,8 +27,8 @@ Template.studylistResult.helpers({
         }
 
         // Pagination parameters
-        const rowsPerPage = instance.rowsPerPage.get();
-        const currentPage = instance.currentPage.get();
+        const rowsPerPage = instance.paginationData.rowsPerPage.get();
+        const currentPage = instance.paginationData.currentPage.get();
         const offset = rowsPerPage * currentPage;
         const limit = offset + rowsPerPage;
 
@@ -41,7 +41,7 @@ Template.studylistResult.helpers({
         }
 
         // Update record count
-        instance.recordCount.set(studies.length);
+        instance.paginationData.recordCount.set(studies.length);
 
         // Limit studies
         return studies.slice(offset, limit);
@@ -225,11 +225,12 @@ Template.studylistResult.onCreated(() => {
     }
 
     const rowsPerPage = getRowsPerPage();
-    instance.rowsPerPage = new ReactiveVar(parseInt(rowsPerPage, 10), setRowsPerPage);
-
-    // Set currentPage indexed 0
-    instance.currentPage = new ReactiveVar(0);
-    instance.recordCount = new ReactiveVar();
+    instance.paginationData = {
+        class: 'studylist-pagination',
+        currentPage: new ReactiveVar(0),
+        rowsPerPage: new ReactiveVar(parseInt(rowsPerPage, 10), setRowsPerPage),
+        recordCount: new ReactiveVar(0)
+    };
 
     // Set sortOption
     const sortOptionSession = Session.get('sortOption');

Packages/ohif-study-list/client/components/studylist/studylistResult/studylistResult.styl

@@ -250,3 +250,7 @@ $bodyCellHeight = 40px
       .row
         margin-left: 0
         margin-right: 0
+
+@media only screen and (max-width: 1069px)
+  .studylist-pagination > .row
+    margin-right: 0;

Packages/ohif-study-list/client/lib/index.js

@@ -1,5 +1,3 @@
-import './third-party/jquery.twbsPagination.min.js';
-
 import './exportSelectedStudies.js';
 import './exportStudies.js';
 import './getSelectedStudies.js';