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

@@ -0,0 +1,20 @@
+<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' key='rowsPerPage' hideSearch=true}}
+                    <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>
+                </div>
+            </div>
+        </div>
+    {{/form}}
+</template>

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

@@ -0,0 +1,76 @@
+import { Template } from 'meteor/templating';
+import { SimpleSchema } from 'meteor/aldeed:simple-schema';
+import 'twbs-pagination';
+
+const visiblePages = 10;
+
+Template.paginationArea.onCreated(function() {
+    const instance = Template.instance();
+
+    // Create the rowsPerPage schema
+    instance.schema = new SimpleSchema({
+        rowsPerPage: {
+            type: Number,
+            allowedValues: [25, 50, 100],
+            defaultValue: 25
+        }
+    });
+});
+
+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();
+
+        // Destroy plugin if exists
+        if (instance.$paginationControl.data().twbsPagination) {
+            instance.$paginationControl.twbsPagination('destroy');
+        }
+
+        if (recordCount && rowsPerPage) {
+            const totalPages = Math.ceil(recordCount / rowsPerPage);
+
+            // 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);
+                }
+            });
+        }
+    });
+});
+
+Template.paginationArea.onDestroyed(() => {
+    const instance = Template.instance();
+    instance.$paginationControl.twbsPagination('destroy');
+});
+
+Template.paginationArea.helpers({
+    recordCount() {
+        const instance = Template.instance();
+        return instance.data.recordCount.get();
+    },
+
+    isRowsPerPageSelected(rowsPerPage) {
+        const instance = Template.instance();
+        return rowsPerPage === instance.data.rowsPerPage.get();
+    }
+});
+
+Template.paginationArea.events({
+    'change [data-key=rowsPerPage]'(event, instance) {
+        const rowsPerPage = $(event.currentTarget).data('component').value();
+
+        // Update rowsPerPage
+        instance.data.rowsPerPage.set(parseInt(rowsPerPage, 10));
+    }
+});

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

@@ -0,0 +1,61 @@
+@require '{ohif:design}/app'
+
+.pagination-area
+    font-size: 13px
+    font-weight: normal !important
+
+    label
+      font-weight: normal
+
+    select
+      theme('background-color', '$primaryBackgroundColor')
+      color: white
+
+  .rows-per-page label.wrapperLabel
+    display: inline-table !important
+    margin: 0 4px
+
+    select
+      width: 42px
+
+  .page-number
+    margin: 0
+    text-align: right
+
+    label
+      font-weight: normal
+
+      ul.pagination-control
+        margin: 0
+
+        li
+          a
+            padding: 4px 8px
+            theme('background-color', '$primaryBackgroundColor')
+            theme('border-color', '$uiGray')
+            theme('background-color', '$uiGrayDarkest')
+            color: white
+            padding: 4px 8px
+
+            &:hover
+              theme('color', '$activeColor')
+
+        .active
+          a
+            theme('background-color', '$uiGray')
+            border-color: #ddd
+            color: white
+
+        .disabled
+          a, a:hover, a:focus, a:active
+            theme('background-color', '$uiGrayDarkest')
+            theme('border-color', '$uiGray')
+            theme('color', '$uiGrayLight')
+
+          &:not(.disabled):hover a
+            theme('background-color', '$uiGrayDark')
+            theme('color', '$activeColor')
+
+          &.active a
+            theme('background-color', '$uiGrayDark')
+            theme('color', '$activeColor')