LT-367: Saving user selection for "Rows Per Pages" in study list in Session Storage

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

@@ -7,9 +7,9 @@
                             <label>
                                 <span>Show</span>
                                 <select class="js-select-rows-per-page">
-                                    <option value="25">25</option>
+                                    {{#each pageSize in pageSizes}}
-                                    <option value="50">50</option>
+                                        <option value={{pageSize}} selected={{#if (isRowsPerPageSelected pageSize)}}selected{{/if}}>{{pageSize}}</option>
-                                    <option value="100">100</option>
+                                    {{/each}}
                                 </select>
 
                                 <span class="rows-per-page-label">rows per page</span>

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

@@ -3,18 +3,19 @@ import { Template } from 'meteor/templating';
 import './studylistPagination.html';
 
 const visiblePages = 10;
+
 Template.studylistPagination.onCreated(function() {
-    let instance = Template.instance();
+    const instance = Template.instance();
     // replace parentVariable with the name of the instance variable
     instance.parent = this.parent(1);
 });
 
-Template.studylistPagination.onRendered(function() {
+Template.studylistPagination.onRendered(() => {
     const instance = Template.instance();
     const $paginationControl = instance.$('#pagination');
 
     // Track changes on recordCount and rowsPerPage
-    instance.autorun(function() {
+    instance.autorun(() => {
         const recordCount = instance.parent.recordCount.get();
         const rowsPerPage = instance.parent.rowsPerPage.get();
 
@@ -24,13 +25,13 @@ Template.studylistPagination.onRendered(function() {
         }
 
         if (recordCount && rowsPerPage) {
-            const totalPageNumber = Math.ceil(recordCount / rowsPerPage);
+            const totalPages = Math.ceil(recordCount / rowsPerPage);
 
             // Initialize plugin
             $paginationControl.twbsPagination({
-                totalPages: totalPageNumber,
+                totalPages,
-                visiblePages: visiblePages,
+                visiblePages,
-                onPageClick: function (event, page) {
+                onPageClick: (event, page) => {
                     // Update currentPage
                     // Decrease page by 1 to set currentPage
                     // Since reactive table current page index starts by 0
@@ -42,9 +43,16 @@ Template.studylistPagination.onRendered(function() {
 });
 
 Template.studylistPagination.helpers({
+    pageSizes() {
+        return [ 25, 50, 100 ];
+    },
     recordCount() {
         const instance = Template.instance();
         return instance.parent.recordCount.get();
+    },
+    isRowsPerPageSelected(rowsPerPage) {
+        const instance = Template.instance();
+        return rowsPerPage === instance.parent.rowsPerPage.get();
     }
 });
 

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

@@ -179,15 +179,32 @@ function search() {
     });
 }
 
+const getRowsPerPage = () => sessionStorage.getItem('rowsPerPage');
+
+// Wraps ReactiveVar equalsFunc function. Whenever ReactiveVar is 
+// set to a new value, it will save it in the Session Storage.
+// The return is the default ReactiveVar equalsFunc if available
+// or values are === compared
+const setRowsPerPage = (oldValue, newValue) => {
+    sessionStorage.setItem('rowsPerPage', newValue);
+    return typeof ReactiveVar._isEqual === 'function' ? ReactiveVar._isEqual(oldValue, newValue) : oldValue === newValue;
+};
+
 Template.studylistResult.onCreated(() => {
-    let instance = Template.instance();
+    const instance = Template.instance();
     instance.sortOption = new ReactiveVar();
     instance.sortingColumns = new ReactiveDict();
 
     // Pagination parameters
 
-    // Rows per page is 25 as default
+    // Rows per page
-    instance.rowsPerPage = new ReactiveVar(25);
+    // Check session storage or set 25 as default
+    const cachedRowsPerPage = getRowsPerPage();
+    if(!cachedRowsPerPage) {
+        setRowsPerPage(0, 25);
+    }
+    const rowsPerPage = getRowsPerPage();
+    instance.rowsPerPage = new ReactiveVar(parseInt(rowsPerPage, 10), setRowsPerPage);
 
     // Set currentPage indexed 0
     instance.currentPage = new ReactiveVar(0);
@@ -197,7 +214,8 @@ Template.studylistResult.onCreated(() => {
     const sortOptionSession = Session.get('sortOption');
     if (sortOptionSession) {
         instance.sortingColumns.set(sortOptionSession);
-    } else {
+    } 
+    else {
         instance.sortingColumns.set({
             patientName: 1,
             studyDate: 1,