Sunny Negi / Meteor-projects

Download as
Browse Code ยป

Commit 10b6cd02a432e4b3cd98973e4974772c2adf4b52

Authored by Deepak
1 parent 0f7bdd93ae
Exists in master

added pagination

Showing 3 changed files with 44 additions and 28 deletions   Show diff stats
imports/client/views/org/admin/students/index.js
Diff comments   View file @10b6cd0
... ... @@ -27,9 +27,12 @@ const meteorTick = (props, onData) => {
27 27 const org = Orgs.current();
28 28 students = Users.find({"role":"STUDENT"}).fetch() ? Users.find({"role":"STUDENT"}).fetch() : "";
29 29 studentData = Students.find().fetch() ? Students.find().fetch() : "";
  30 + var mergedData;
  31 + console.log(studentData);
30 32 for(var i=0; i< students.length; i++){
31 33 for(var j=0; j< studentData.length; j++){
32   - if(students[i]._id == studentData[j].userId){
  34 + if(students[i]._id == studentData[j].userId && studentData[j].admissionId){
  35 + students[i].admissionId = studentData[j].admissionId;
33 36 students[i].class = studentData[j].class;
34 37 students[i].dob = studentData[j].dob;
35 38 }
... ...
imports/client/views/org/admin/students/view/StudentTable.js
Diff comments   View file @10b6cd0
... ... @@ -5,10 +5,39 @@ import React, { Component } from &#39;react&#39;;
5 5 import { Link,browserHistory } from 'react-router';
6 6 import { FormGroup,Panel,Table,
7 7 ButtonToolbar,Modal,
8   - FormControl,Glyphicon,Button, } from 'react-bootstrap';
  8 + FormControl,Glyphicon,Button, } from 'react-bootstrap';
9 9 import {moment} from 'meteor/momentjs:moment'
10 10 import {StudentRow} from './StudentRow'
  11 +import {BootstrapTable, TableHeaderColumn}from 'react-bootstrap-table';
11 12  
  13 +const options = {
  14 + page: 0, // which page you want to show as default
  15 + sizePerPageList: [ {
  16 + text: '5', value: 5
  17 + }, {
  18 + text: '10', value: 10
  19 + }], // you can change the dropdown list for size per page
  20 + sizePerPage: 5, // which size per page you want to locate as default
  21 + pageStartIndex: 0, // where to start counting the pages
  22 + paginationSize: 3, // the pagination bar size.
  23 + prePage: 'Prev', // Previous page button text
  24 + nextPage: 'Next', // Next page button text
  25 + firstPage: 'First', // First page button text
  26 + lastPage: 'Last', // Last page button text
  27 + paginationShowsTotal: false, // Accept bool or function
  28 + paginationPosition: 'bottom' // default is bottom, top and both is all available
  29 + // hideSizePerPage: true > You can hide the dropdown for sizePerPage
  30 + // alwaysShowAllBtns: true // Always show next and previous button
  31 + // withFirstAndLast: false > Hide the going to First and Last page button
  32 + };
  33 +
  34 +function dateFormatter(cell, row) {
  35 + if(cell){
  36 + console.log(cell);
  37 + return `${('0' + cell.getDate()).slice(-2)}/${('0' + (cell.getMonth() + 1)).slice(-2)}/${cell.getFullYear()}`;
  38 + }
  39 +
  40 +}
12 41 export class StudentTable extends Component {
13 42  
14 43 constructor(props) {
... ... @@ -26,6 +55,7 @@ export class StudentTable extends Component {
26 55 togglePanel(){
27 56 this.setState({panleOpen: !this.state.panleOpen});
28 57 }
  58 +
29 59 render() {
30 60 return (
31 61 <div className="panel panel-flat">
... ... @@ -38,31 +68,14 @@ export class StudentTable extends Component {
38 68 </div>
39 69 </div>
40 70 <Panel collapsible expanded={this.state.panleOpen}>
41   - <Table striped bordered condensed hover>
42   - <thead>
43   - <tr>
44   - <th>First Name</th>
45   - <th>Last Name</th>
46   - <th>Class</th>
47   - <th>DOB</th>
48   - <th>Status</th>
49   - <th className="text-center">Actions</th>
50   - </tr>
51   - </thead>
52   - <tbody>
53   - {
54   - this.props.students.map(function(student, i)
55   - {
56   - return(
57   - <StudentRow
58   - key = { i }
59   - student = {student}
60   - />
61   - )
62   - })
63   - }
64   - </tbody>
65   - </Table>
  71 + <BootstrapTable data={ this.props.students } pagination={ true } options={ options } >
  72 + <TableHeaderColumn dataField='admissionId' isKey={ true } dataSort={ true }>Admission Id</TableHeaderColumn>
  73 + <TableHeaderColumn dataField='firstName' dataSort={ true }>First Name</TableHeaderColumn>
  74 + <TableHeaderColumn dataField='lastName' dataSort={ true }>Last Name</TableHeaderColumn>
  75 + <TableHeaderColumn dataField='class' dataSort={ true }>Class</TableHeaderColumn>
  76 + <TableHeaderColumn dataField='dob' filter={ { type: 'DateFilter' } }>DOB</TableHeaderColumn>
  77 + </BootstrapTable>
  78 +
66 79 </Panel>
67 80 </div>
68 81 );
... ...
... ... @@ -74,7 +74,6 @@
74 74 "jquery-validation": "^1.15.1",
75 75 "json2csv": "^3.7.3",
76 76 "lodash": "^4.17.4",
77   - "material-fabmenu": "0.0.1",
78 77 "material-ui": "^0.17.1",
79 78 "meteor-node-stubs": "^0.2.6",
80 79 "moment": "^2.18.0",
... ... @@ -84,6 +83,7 @@
84 83 "react-addons-transition-group": "^15.4.2",
85 84 "react-bootstrap": "^0.30.8",
86 85 "react-bootstrap-date-picker": "^4.0.0",
  86 + "react-bootstrap-table": "^3.1.6",
87 87 "react-burger-menu": "^1.10.14",
88 88 "react-dom": "^15.4.2",
89 89 "react-fontawesome": "^1.5.0",
... ...