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;
|
||||
@@ -1,5 +1,3 @@
|
||||
import './third-party/jquery.twbsPagination.min.js';
|
||||
|
||||
import './exportSelectedStudies.js';
|
||||
import './exportStudies.js';
|
||||
import './getSelectedStudies.js';
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
/*
|
||||
* jQuery Bootstrap Pagination v1.3.1
|
||||
* https://github.com/esimakin/twbs-pagination
|
||||
*
|
||||
* Copyright 2014-2015 Eugene Simakin <eugenesimakin@mail.ru>
|
||||
* Released under Apache 2.0 license
|
||||
* http://apache.org/licenses/LICENSE-2.0.html
|
||||
*/
|
||||
!function(a,b,c,d){"use strict";var e=a.fn.twbsPagination,f=function(c,d){if(this.$element=a(c),this.options=a.extend({},a.fn.twbsPagination.defaults,d),this.options.startPage<1||this.options.startPage>this.options.totalPages)throw new Error("Start page option is incorrect");if(this.options.totalPages=parseInt(this.options.totalPages),isNaN(this.options.totalPages))throw new Error("Total pages option is not correct!");if(this.options.visiblePages=parseInt(this.options.visiblePages),isNaN(this.options.visiblePages))throw new Error("Visible pages option is not correct!");if(this.options.totalPages<this.options.visiblePages&&(this.options.visiblePages=this.options.totalPages),this.options.onPageClick instanceof Function&&this.$element.first().on("page",this.options.onPageClick),this.options.href){var e,f=this.options.href.replace(/[-\/\\^$*+?.|[\]]/g,"\\$&");f=f.replace(this.options.hrefVariable,"(\\d+)"),null!=(e=new RegExp(f,"i").exec(b.location.href))&&(this.options.startPage=parseInt(e[1],10))}var g="function"==typeof this.$element.prop?this.$element.prop("tagName"):this.$element.attr("tagName");return"UL"===g?this.$listContainer=this.$element:this.$listContainer=a("<ul></ul>"),this.$listContainer.addClass(this.options.paginationClass),"UL"!==g&&this.$element.append(this.$listContainer),this.render(this.getPages(this.options.startPage)),this.setupEvents(),this.options.initiateStartPageClick&&this.$element.trigger("page",this.options.startPage),this};f.prototype={constructor:f,destroy:function(){return this.$element.empty(),this.$element.removeData("twbs-pagination"),this.$element.off("page"),this},show:function(a){if(1>a||a>this.options.totalPages)throw new Error("Page is incorrect.");return this.render(this.getPages(a)),this.setupEvents(),this.$element.trigger("page",a),this},buildListItems:function(a){var b=[];if(this.options.first&&b.push(this.buildItem("first",1)),this.options.prev){var c=a.currentPage>1?a.currentPage-1:this.options.loop?this.options.totalPages:1;b.push(this.buildItem("prev",c))}for(var d=0;d<a.numeric.length;d++)b.push(this.buildItem("page",a.numeric[d]));if(this.options.next){var e=a.currentPage<this.options.totalPages?a.currentPage+1:this.options.loop?1:this.options.totalPages;b.push(this.buildItem("next",e))}return this.options.last&&b.push(this.buildItem("last",this.options.totalPages)),b},buildItem:function(b,c){var d=a("<li></li>"),e=a("<a></a>"),f=null;switch(b){case"page":f=c,d.addClass(this.options.pageClass);break;case"first":f=this.options.first,d.addClass(this.options.firstClass);break;case"prev":f=this.options.prev,d.addClass(this.options.prevClass);break;case"next":f=this.options.next,d.addClass(this.options.nextClass);break;case"last":f=this.options.last,d.addClass(this.options.lastClass)}return d.data("page",c),d.data("page-type",b),d.append(e.attr("href",this.makeHref(c)).html(f)),d},getPages:function(a){var b=[],c=Math.floor(this.options.visiblePages/2),d=a-c+1-this.options.visiblePages%2,e=a+c;0>=d&&(d=1,e=this.options.visiblePages),e>this.options.totalPages&&(d=this.options.totalPages-this.options.visiblePages+1,e=this.options.totalPages);for(var f=d;e>=f;)b.push(f),f++;return{currentPage:a,numeric:b}},render:function(b){var c=this;this.$listContainer.children().remove(),this.$listContainer.append(this.buildListItems(b)),this.$listContainer.children().each(function(){var d=a(this),e=d.data("page-type");switch(e){case"page":d.data("page")===b.currentPage&&d.addClass(c.options.activeClass);break;case"first":d.toggleClass(c.options.disabledClass,1===b.currentPage);break;case"last":d.toggleClass(c.options.disabledClass,b.currentPage===c.options.totalPages);break;case"prev":d.toggleClass(c.options.disabledClass,!c.options.loop&&1===b.currentPage);break;case"next":d.toggleClass(c.options.disabledClass,!c.options.loop&&b.currentPage===c.options.totalPages)}})},setupEvents:function(){var b=this;this.$listContainer.find("li").each(function(){var c=a(this);return c.off(),c.hasClass(b.options.disabledClass)||c.hasClass(b.options.activeClass)?void c.on("click",!1):void c.click(function(a){!b.options.href&&a.preventDefault(),b.show(parseInt(c.data("page")))})})},makeHref:function(a){return this.options.href?this.options.href.replace(this.options.hrefVariable,a):"#"}},a.fn.twbsPagination=function(b){var c,e=Array.prototype.slice.call(arguments,1),g=a(this),h=g.data("twbs-pagination"),i="object"==typeof b&&b;return h||g.data("twbs-pagination",h=new f(this,i)),"string"==typeof b&&(c=h[b].apply(h,e)),c===d?g:c},a.fn.twbsPagination.defaults={totalPages:0,startPage:1,visiblePages:5,initiateStartPageClick:!0,href:!1,hrefVariable:"{{number}}",first:"First",prev:"Previous",next:"Next",last:"Last",loop:!1,onPageClick:null,paginationClass:"pagination",nextClass:"next",prevClass:"prev",lastClass:"last",firstClass:"first",pageClass:"page",activeClass:"active",disabledClass:"disabled"},a.fn.twbsPagination.Constructor=f,a.fn.twbsPagination.noConflict=function(){return a.fn.twbsPagination=e,tLine truncated
|
||||
Reference in new issue
Block a user