From b88c78e3cf2bef22aa2f1c4d0bf305e303bc15f0 Mon Sep 17 00:00:00 2001 From: Koren Lev Date: Thu, 27 Jul 2017 16:42:15 +0300 Subject: adding calipso ui Change-Id: Ifa6f63daebb07f45580f747341960e898fdb00c4 Signed-off-by: Koren Lev --- ui/imports/ui/components/pager/pager.js | 123 ++++++++++++++++++++++++++++++++ 1 file changed, 123 insertions(+) create mode 100644 ui/imports/ui/components/pager/pager.js (limited to 'ui/imports/ui/components/pager/pager.js') diff --git a/ui/imports/ui/components/pager/pager.js b/ui/imports/ui/components/pager/pager.js new file mode 100644 index 0000000..19b2789 --- /dev/null +++ b/ui/imports/ui/components/pager/pager.js @@ -0,0 +1,123 @@ +///////////////////////////////////////////////////////////////////////////////////////// +// Copyright (c) 2017 Koren Lev (Cisco Systems), Yaron Yogev (Cisco Systems) and others / +// / +// All rights reserved. This program and the accompanying materials / +// are made available under the terms of the Apache License, Version 2.0 / +// which accompanies this distribution, and is available at / +// http://www.apache.org/licenses/LICENSE-2.0 / +///////////////////////////////////////////////////////////////////////////////////////// +/* + * Template Component: Pager + */ + +//import { Meteor } from 'meteor/meteor'; +import * as R from 'ramda'; +import { Template } from 'meteor/templating'; +import { SimpleSchema } from 'meteor/aldeed:simple-schema'; +import { ReactiveDict } from 'meteor/reactive-dict'; + +import './pager.html'; + +/* + * Lifecycles + */ + +Template.Pager.onCreated(function() { + var instance = this; + instance.state = new ReactiveDict(); + instance.state.setDefault({ + pagesButtons: [{ label: '1', number: 1 }], + currentPage: 1, + }); + + instance.autorun(function () { + let data = Template.currentData(); + new SimpleSchema({ + disableNext: { type: Boolean }, + disablePrev: { type: Boolean }, + totalPages: { type: Number }, + currentPage: { type: Number }, + onReqNext: { type: Function }, + onReqPrev: { type: Function }, + onReqPage: { type: Function }, + onReqFirst: { type: Function }, + onReqLast: { type: Function }, + }).validate(data); + + instance.state.set('totalPages', data.totalPages); + instance.state.set('currentPage', data.currentPage); + }); + + instance.autorun(function () { + let numOfPagesInPager = 5; + let totalPages = instance.state.get('totalPages'); + let currentPage = instance.state.get('currentPage'); + let first = R.ifElse((x) => x < 1, R.always(1), R.identity)(currentPage - numOfPagesInPager + 1); + let last = R.ifElse((x) => x > totalPages, R.always(totalPages + 1), R.identity)( + first + numOfPagesInPager); + + let pagesButtons = R.map((pageNumber) => { + return { + label: R.toString(pageNumber), number: pageNumber + }; + }, R.range(first, last)); + + instance.state.set('pagesButtons', pagesButtons); + }); +}); + +/* +Template.Pager.rendered = function() { +}; +*/ + +/* + * Events + */ + +Template.Pager.events({ + 'click .sm-prev-button': function (_event, _instance) { + let data = Template.currentData(); + data.onReqPrev(); + }, + + 'click .sm-next-button': function (_event, _instance) { + let data = Template.currentData(); + data.onReqNext(); + }, + + 'click .sm-first-button': function (_event, _instance) { + let data = Template.currentData(); + data.onReqFirst(); + }, + + 'click .sm-last-button': function (_event, _instance) { + let data = Template.currentData(); + data.onReqLast(); + }, + + 'click .sm-page-button': function (event, _instance) { + let data = Template.currentData(); + let pageNumber = parseInt(event.target.dataset.pageNumber); + data.onReqPage(pageNumber); + }, + + +}); + +/* + * Helpers + */ + +Template.Pager.helpers({ + pagesButtons: function () { + let instance = Template.instance(); + return instance.state.get('pagesButtons'); + }, + + isCurrentPage: function (pageNum, currentPage) { + return pageNum === currentPage; + }, +}); // end: helpers + + -- cgit 1.2.3-korg