othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

OHIF-48: Add pagination for worklist

Browse Source
This commit is contained in:
Aysel Afsar 2016-08-24 17:36:03 -04:00
parent c266599ed7
commit 4b627198b7
9 changed files with 184 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
OHIFViewer/.meteor/packages
View File

@ -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

1
OHIFViewer/.meteor/versions
View File

@ -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

29
Packages/worklist/client/components/worklistPagination/worklistPagination.html Normal file
View File

@ -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>

58
Packages/worklist/client/components/worklistPagination/worklistPagination.js Normal file
View File

@ -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));
}
});

39
Packages/worklist/client/components/worklistPagination/worklistPagination.styl Normal file
View File

@ -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

4
Packages/worklist/client/components/worklistResult/worklistResult.html
View File

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

49
Packages/worklist/client/components/worklistResult/worklistResult.js
View File

@ -6,19 +6,37 @@ Template.worklistResult.helpers({
* by Patient name and Study Date in Ascending order.
*/
studies() {
const sortOption = Session.get('sortOption');
if (sortOption) {
return WorklistStudies.find({}, {
sort: sortOption
});
const instance = Template.instance();
let studies;
let sortOption = {
patientName: 1,
studyDate: 1
};
// Update sort option if session is defined
if (Session.get('sortOption')) {
sortOption = Session.get('sortOption');
}
return WorklistStudies.find({}, {
sort: {
patientName: 1,
studyDate: 1
}
});
// Pagination parameters
const rowsPerPage = instance.rowsPerPage.get();
const currentPage = instance.currentPage.get();
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) {

9
Packages/worklist/client/lib/jquery.twbsPagination/jquery.twbsPagination.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

5
Packages/worklist/package.js
View File

@ -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');