Creating paginationArea component on ohif:core package
This commit is contained in:
Bruno Alves de Faria committed
1 parent
fda272fd7d
commit
03ea57c162
12 files changed
+52
-54
No files matched your search
@@ -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';
|
||||
-20
@@ -1,20 +0,0 @@
|
||||
<template name="studylistPagination">
|
||||
{{#form class='studylistPagination' 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}}
|
||||
<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>
|
||||
-72
@@ -1,72 +0,0 @@
|
||||
import { Template } from 'meteor/templating';
|
||||
import { SimpleSchema } from 'meteor/aldeed:simple-schema';
|
||||
|
||||
import './studylistPagination.html';
|
||||
|
||||
const visiblePages = 10;
|
||||
|
||||
Template.studylistPagination.onCreated(function() {
|
||||
const instance = Template.instance();
|
||||
// replace parentVariable with the name of the instance variable
|
||||
instance.parent = this.parent(1);
|
||||
instance.schema = new SimpleSchema({
|
||||
rowsPerPage: {
|
||||
type: Number,
|
||||
allowedValues: [25, 50, 100],
|
||||
defaultValue: 25
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
Template.studylistPagination.onRendered(() => {
|
||||
const instance = Template.instance();
|
||||
const $paginationControl = instance.$('.pagination-control');
|
||||
|
||||
// Track changes on recordCount and rowsPerPage
|
||||
instance.autorun(() => {
|
||||
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 totalPages = Math.ceil(recordCount / rowsPerPage);
|
||||
|
||||
// Initialize plugin
|
||||
$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);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
Template.studylistPagination.helpers({
|
||||
recordCount() {
|
||||
const instance = Template.instance();
|
||||
return instance.parent.recordCount.get();
|
||||
},
|
||||
|
||||
isRowsPerPageSelected(rowsPerPage) {
|
||||
const instance = Template.instance();
|
||||
return rowsPerPage === instance.parent.rowsPerPage.get();
|
||||
}
|
||||
});
|
||||
|
||||
Template.studylistPagination.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));
|
||||
}
|
||||
});
|
||||
-65
@@ -1,65 +0,0 @@
|
||||
@import "{ohif:design}/app"
|
||||
|
||||
.studylistPagination
|
||||
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')
|
||||
|
||||
@media only screen and (max-width: 1069px)
|
||||
.studylistPagination > .row
|
||||
margin-right: 0;
|
||||
+1
-1
@@ -75,7 +75,7 @@
|
||||
</table>
|
||||
|
||||
<!-- Pagination -->
|
||||
{{>studylistPagination}}
|
||||
{{>paginationArea instance.paginationData}}
|
||||
|
||||
{{#if session "showLoadingText"}}
|
||||
{{>loadingText}}
|
||||
|
||||
+9
-8
@@ -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');
|
||||
|
||||
+4
@@ -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;
|
||||
Reference in new issue
Block a user