From 10b6cd02a432e4b3cd98973e4974772c2adf4b52 Mon Sep 17 00:00:00 2001
From: Deepak <deepak125.dk@gmail.com>
Date: Thu, 6 Apr 2017 20:32:38 +0530
Subject: [PATCH] added pagination

---
 imports/client/views/org/admin/students/index.js   |  5 +-
 .../views/org/admin/students/view/StudentTable.js  | 65 +++++++++++++---------
 package.json                                       |  2 +-
 3 files changed, 44 insertions(+), 28 deletions(-)

diff --git a/imports/client/views/org/admin/students/index.js b/imports/client/views/org/admin/students/index.js
index f0d6b76..c19225c 100644
--- a/imports/client/views/org/admin/students/index.js
+++ b/imports/client/views/org/admin/students/index.js
@@ -27,9 +27,12 @@ const meteorTick = (props, onData) => {
     const org = Orgs.current();
     students = Users.find({"role":"STUDENT"}).fetch() ? Users.find({"role":"STUDENT"}).fetch() : "";
     studentData = Students.find().fetch() ? Students.find().fetch() : "";
+    var mergedData;
+    console.log(studentData);
     for(var i=0; i< students.length; i++){
       for(var j=0; j< studentData.length; j++){
-        if(students[i]._id == studentData[j].userId){
+        if(students[i]._id == studentData[j].userId && studentData[j].admissionId){
+          students[i].admissionId = studentData[j].admissionId;
           students[i].class = studentData[j].class;
           students[i].dob = studentData[j].dob;
         }
diff --git a/imports/client/views/org/admin/students/view/StudentTable.js b/imports/client/views/org/admin/students/view/StudentTable.js
index 379b900..fc56fa1 100644
--- a/imports/client/views/org/admin/students/view/StudentTable.js
+++ b/imports/client/views/org/admin/students/view/StudentTable.js
@@ -5,10 +5,39 @@ import React, { Component }               from 'react';
 import { Link,browserHistory }            from 'react-router';
 import { FormGroup,Panel,Table,
   ButtonToolbar,Modal,
-  FormControl,Glyphicon,Button, }          from 'react-bootstrap';
+  FormControl,Glyphicon,Button, }         from 'react-bootstrap';
 import {moment}                           from 'meteor/momentjs:moment'
 import {StudentRow}                       from './StudentRow'
+import {BootstrapTable, TableHeaderColumn}from 'react-bootstrap-table';
 
+const options = {
+    page: 0,  // which page you want to show as default
+    sizePerPageList: [ {
+      text: '5', value: 5
+    }, {
+      text: '10', value: 10
+    }], // you can change the dropdown list for size per page
+    sizePerPage: 5,  // which size per page you want to locate as default
+    pageStartIndex: 0, // where to start counting the pages
+    paginationSize: 3,  // the pagination bar size.
+    prePage: 'Prev', // Previous page button text
+    nextPage: 'Next', // Next page button text
+    firstPage: 'First', // First page button text
+    lastPage: 'Last', // Last page button text
+    paginationShowsTotal: false,  // Accept bool or function
+    paginationPosition: 'bottom'  // default is bottom, top and both is all available
+    // hideSizePerPage: true > You can hide the dropdown for sizePerPage
+    // alwaysShowAllBtns: true // Always show next and previous button
+    // withFirstAndLast: false > Hide the going to First and Last page button
+  };
+
+function dateFormatter(cell, row) {
+  if(cell){
+    console.log(cell);
+    return `${('0' + cell.getDate()).slice(-2)}/${('0' + (cell.getMonth() + 1)).slice(-2)}/${cell.getFullYear()}`;
+  }
+
+}
 export class StudentTable extends Component {
 
   constructor(props) {
@@ -26,6 +55,7 @@ export class StudentTable extends Component {
   togglePanel(){
     this.setState({panleOpen: !this.state.panleOpen});
   }
+
   render() {
     return (
       <div className="panel panel-flat">
@@ -38,31 +68,14 @@ export class StudentTable extends Component {
           </div>
         </div>
         <Panel collapsible expanded={this.state.panleOpen}>
-          <Table striped bordered condensed hover>
-            <thead>
-              <tr>
-                <th>First Name</th>
-                <th>Last Name</th>
-                <th>Class</th>
-                <th>DOB</th>
-                <th>Status</th>
-                <th className="text-center">Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              {
-                this.props.students.map(function(student, i)
-                  {
-                    return(
-                      <StudentRow
-                        key = { i }
-                        student = {student}
-                      />
-                  )
-                })
-              }
-            </tbody>
-          </Table>
+          <BootstrapTable data={ this.props.students } pagination={ true } options={ options } >
+            <TableHeaderColumn dataField='admissionId' isKey={ true } dataSort={ true }>Admission Id</TableHeaderColumn>
+            <TableHeaderColumn dataField='firstName' dataSort={ true }>First Name</TableHeaderColumn>
+            <TableHeaderColumn dataField='lastName' dataSort={ true }>Last Name</TableHeaderColumn>
+            <TableHeaderColumn dataField='class' dataSort={ true }>Class</TableHeaderColumn>
+            <TableHeaderColumn dataField='dob' filter={ { type: 'DateFilter' } }>DOB</TableHeaderColumn>
+          </BootstrapTable>
+
         </Panel>
       </div>
     );
diff --git a/package.json b/package.json
index 41b79a8..ef2da33 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,6 @@
     "jquery-validation": "^1.15.1",
     "json2csv": "^3.7.3",
     "lodash": "^4.17.4",
-    "material-fabmenu": "0.0.1",
     "material-ui": "^0.17.1",
     "meteor-node-stubs": "^0.2.6",
     "moment": "^2.18.0",
@@ -84,6 +83,7 @@
     "react-addons-transition-group": "^15.4.2",
     "react-bootstrap": "^0.30.8",
     "react-bootstrap-date-picker": "^4.0.0",
+    "react-bootstrap-table": "^3.1.6",
     "react-burger-menu": "^1.10.14",
     "react-dom": "^15.4.2",
     "react-fontawesome": "^1.5.0",
-- 
2.0.0