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
1 // import { StudentDataController } from '/imports/client/views/org/admin/students/index' 1 // import { StudentDataController } from '/imports/client/views/org/admin/students/index'
2 import _ from 'lodash'; 2 import _ from 'lodash';
3 import { 3 import {
4 composeWithTracker, 4 composeWithTracker,
5 compose, 5 compose,
6 composeAll 6 composeAll
7 } from 'react-komposer'; 7 } from 'react-komposer';
8 import { Loading } from '/imports/client/components/Loading'; 8 import { Loading } from '/imports/client/components/Loading';
9 9
10 import { Orgs } from '/imports/collections/orgs/index'; 10 import { Orgs } from '/imports/collections/orgs/index';
11 import { Users } from '/imports/collections/users/index'; 11 import { Users } from '/imports/collections/users/index';
12 import { StudentView } from './StudentView'; 12 import { StudentView } from './StudentView';
13 import { Students } from '/imports/collections/students/index'; 13 import { Students } from '/imports/collections/students/index';
14 14
15 15
16 const meteorTick = (props, onData) => { 16 const meteorTick = (props, onData) => {
17 17
18 const handles = [ 18 const handles = [
19 Meteor.subscribe('users.current'), 19 Meteor.subscribe('users.current'),
20 Meteor.subscribe('orgs.current'), 20 Meteor.subscribe('orgs.current'),
21 Meteor.subscribe('users.forMyOrg'), 21 Meteor.subscribe('users.forMyOrg'),
22 Meteor.subscribe('student.forMyOrg'), 22 Meteor.subscribe('student.forMyOrg'),
23 ]; 23 ];
24 24
25 if(_.every(handles, (handle) => (handle.ready()) )) { 25 if(_.every(handles, (handle) => (handle.ready()) )) {
26 const user = Users.current(); 26 const user = Users.current();
27 const org = Orgs.current(); 27 const org = Orgs.current();
28 students = Users.find({"role":"STUDENT"}).fetch() ? Users.find({"role":"STUDENT"}).fetch() : ""; 28 students = Users.find({"role":"STUDENT"}).fetch() ? Users.find({"role":"STUDENT"}).fetch() : "";
29 studentData = Students.find().fetch() ? Students.find().fetch() : ""; 29 studentData = Students.find().fetch() ? Students.find().fetch() : "";
30 var mergedData;
31 console.log(studentData);
30 for(var i=0; i< students.length; i++){ 32 for(var i=0; i< students.length; i++){
31 for(var j=0; j< studentData.length; j++){ 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 students[i].class = studentData[j].class; 36 students[i].class = studentData[j].class;
34 students[i].dob = studentData[j].dob; 37 students[i].dob = studentData[j].dob;
35 } 38 }
36 } 39 }
37 } 40 }
38 onData(null, { 41 onData(null, {
39 data: { 42 data: {
40 user: user, 43 user: user,
41 org: org, 44 org: org,
42 students: students, 45 students: students,
43 studentData: studentData 46 studentData: studentData
44 }, 47 },
45 }); 48 });
46 } 49 }
47 50
48 return () => { 51 return () => {
49 _.each(handles, (handle) => handle.stop() ); 52 _.each(handles, (handle) => handle.stop() );
50 }; 53 };
51 }; 54 };
52 55
53 56
54 const reduxTick = (props, onData) => { 57 const reduxTick = (props, onData) => {
55 onData(null, { 58 onData(null, {
56 data: {} 59 data: {}
57 }); 60 });
58 }; 61 };
59 62
60 63
61 export const StudentDataController = composeAll( 64 export const StudentDataController = composeAll(
62 composeWithTracker(meteorTick, Loading), 65 composeWithTracker(meteorTick, Loading),
63 compose(reduxTick, Loading), 66 compose(reduxTick, Loading),
64 )(StudentView); 67 )(StudentView);
65 68
imports/client/views/org/admin/students/view/StudentTable.js
Diff comments   View file @10b6cd0
1 import _ from 'lodash'; 1 import _ from 'lodash';
2 import { Meteor } from 'meteor/meteor'; 2 import { Meteor } from 'meteor/meteor';
3 3
4 import React, { Component } from 'react'; 4 import React, { Component } from 'react';
5 import { Link,browserHistory } from 'react-router'; 5 import { Link,browserHistory } from 'react-router';
6 import { FormGroup,Panel,Table, 6 import { FormGroup,Panel,Table,
7 ButtonToolbar,Modal, 7 ButtonToolbar,Modal,
8 FormControl,Glyphicon,Button, } from 'react-bootstrap'; 8 FormControl,Glyphicon,Button, } from 'react-bootstrap';
9 import {moment} from 'meteor/momentjs:moment' 9 import {moment} from 'meteor/momentjs:moment'
10 import {StudentRow} from './StudentRow' 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 export class StudentTable extends Component { 41 export class StudentTable extends Component {
13 42
14 constructor(props) { 43 constructor(props) {
15 super(props); 44 super(props);
16 this.state = { 45 this.state = {
17 show: false, 46 show: false,
18 panleOpen: true, 47 panleOpen: true,
19 }; 48 };
20 this.onUpdate = this.onUpdate.bind(this); 49 this.onUpdate = this.onUpdate.bind(this);
21 this.togglePanel = this.togglePanel.bind(this); 50 this.togglePanel = this.togglePanel.bind(this);
22 }; 51 };
23 onUpdate(key, value) { 52 onUpdate(key, value) {
24 this.setState({[key]: value}); 53 this.setState({[key]: value});
25 }; 54 };
26 togglePanel(){ 55 togglePanel(){
27 this.setState({panleOpen: !this.state.panleOpen}); 56 this.setState({panleOpen: !this.state.panleOpen});
28 } 57 }
58
29 render() { 59 render() {
30 return ( 60 return (
31 <div className="panel panel-flat"> 61 <div className="panel panel-flat">
32 <div className="panel-heading"> 62 <div className="panel-heading">
33 <h5 className="panel-title">Student Details</h5> 63 <h5 className="panel-title">Student Details</h5>
34 <div className="heading-elements"> 64 <div className="heading-elements">
35 <ul className="icons-list"> 65 <ul className="icons-list">
36 <li onClick={this.togglePanel}><a data-action="collapse" className={this.state.panleOpen?"rotate-180":null}></a></li> 66 <li onClick={this.togglePanel}><a data-action="collapse" className={this.state.panleOpen?"rotate-180":null}></a></li>
37 </ul> 67 </ul>
38 </div> 68 </div>
39 </div> 69 </div>
40 <Panel collapsible expanded={this.state.panleOpen}> 70 <Panel collapsible expanded={this.state.panleOpen}>
41 <Table striped bordered condensed hover> 71 <BootstrapTable data={ this.props.students } pagination={ true } options={ options } >
42 <thead> 72 <TableHeaderColumn dataField='admissionId' isKey={ true } dataSort={ true }>Admission Id</TableHeaderColumn>
43 <tr> 73 <TableHeaderColumn dataField='firstName' dataSort={ true }>First Name</TableHeaderColumn>
44 <th>First Name</th> 74 <TableHeaderColumn dataField='lastName' dataSort={ true }>Last Name</TableHeaderColumn>
45 <th>Last Name</th> 75 <TableHeaderColumn dataField='class' dataSort={ true }>Class</TableHeaderColumn>
46 <th>Class</th> 76 <TableHeaderColumn dataField='dob' filter={ { type: 'DateFilter' } }>DOB</TableHeaderColumn>
47 <th>DOB</th> 77 </BootstrapTable>
48 <th>Status</th> 78
49 <th className="text-center">Actions</th>
50 </tr>
51 </thead>
52 <tbody>
53 {
54 this.props.students.map(function(student, i)
55 {
1 { 1 {
2 "name": "application-name", 2 "name": "application-name",
3 "version": "1.0.0", 3 "version": "1.0.0",
4 "description": "Application description.", 4 "description": "Application description.",
5 "scripts": { 5 "scripts": {
6 "start": "meteor --settings settings-development.json", 6 "start": "meteor --settings settings-development.json",
7 "test": "meteor test --driver-package practicalmeteor:mocha --port 5000", 7 "test": "meteor test --driver-package practicalmeteor:mocha --port 5000",
8 "chimp-watch": "chimp --ddp=http://localhost:3000 --watch --mocha --path=tests", 8 "chimp-watch": "chimp --ddp=http://localhost:3000 --watch --mocha --path=tests",
9 "chimp-test": "chimp --ddp=http://localhost:3000 --mocha --path=tests", 9 "chimp-test": "chimp --ddp=http://localhost:3000 --mocha --path=tests",
10 "staging": "meteor deploy staging.meteor.com --settings settings-development.json", 10 "staging": "meteor deploy staging.meteor.com --settings settings-development.json",
11 "production": "meteor deploy production.meteor.com --settings settings-production.json" 11 "production": "meteor deploy production.meteor.com --settings settings-production.json"
12 }, 12 },
13 "devDependencies": { 13 "devDependencies": {
14 "chimp": "^0.41.2", 14 "chimp": "^0.41.2",
15 "eslint": "^3.8.1", 15 "eslint": "^3.8.1",
16 "eslint-config-airbnb": "^12.0.0", 16 "eslint-config-airbnb": "^12.0.0",
17 "eslint-plugin-import": "^1.16.0", 17 "eslint-plugin-import": "^1.16.0",
18 "eslint-plugin-jsx-a11y": "^2.2.3", 18 "eslint-plugin-jsx-a11y": "^2.2.3",
19 "eslint-plugin-meteor": "^4.0.1", 19 "eslint-plugin-meteor": "^4.0.1",
20 "eslint-plugin-react": "^6.4.1" 20 "eslint-plugin-react": "^6.4.1"
21 }, 21 },
22 "eslintConfig": { 22 "eslintConfig": {
23 "parserOptions": { 23 "parserOptions": {
24 "ecmaFeatures": { 24 "ecmaFeatures": {
25 "jsx": true 25 "jsx": true
26 } 26 }
27 }, 27 },
28 "plugins": [ 28 "plugins": [
29 "meteor", 29 "meteor",
30 "react" 30 "react"
31 ], 31 ],
32 "extends": [ 32 "extends": [
33 "airbnb/base", 33 "airbnb/base",
34 "plugin:meteor/guide", 34 "plugin:meteor/guide",
35 "plugin:react/recommended" 35 "plugin:react/recommended"
36 ], 36 ],
37 "env": { 37 "env": {
38 "browser": true 38 "browser": true
39 }, 39 },
40 "globals": { 40 "globals": {
41 "server": false, 41 "server": false,
42 "browser": false, 42 "browser": false,
43 "expect": false 43 "expect": false
44 }, 44 },
45 "rules": { 45 "rules": {
46 "import/no-unresolved": 0, 46 "import/no-unresolved": 0,
47 "import/no-extraneous-dependencies": 0, 47 "import/no-extraneous-dependencies": 0,
48 "import/extensions": 0, 48 "import/extensions": 0,
49 "no-underscore-dangle": [ 49 "no-underscore-dangle": [
50 "error", 50 "error",
51 { 51 {
52 "allow": [ 52 "allow": [
53 "_id", 53 "_id",
54 "_ensureIndex", 54 "_ensureIndex",
55 "_verifyEmailToken", 55 "_verifyEmailToken",
56 "_resetPasswordToken", 56 "_resetPasswordToken",
57 "_name" 57 "_name"
58 ] 58 ]
59 } 59 }
60 ], 60 ],
61 "class-methods-use-this": 0 61 "class-methods-use-this": 0
62 } 62 }
63 }, 63 },
64 "dependencies": { 64 "dependencies": {
65 "babel-runtime": "^6.18.0", 65 "babel-runtime": "^6.18.0",
66 "babyparse": "^0.4.6", 66 "babyparse": "^0.4.6",
67 "bcrypt": "^0.8.7", 67 "bcrypt": "^0.8.7",
68 "bootstrap": "^4.0.0-alpha.6", 68 "bootstrap": "^4.0.0-alpha.6",
69 "csv2json-convertor": "^1.2.0", 69 "csv2json-convertor": "^1.2.0",
70 "csvtojson": "^1.1.4", 70 "csvtojson": "^1.1.4",
71 "fs": "0.0.1-security", 71 "fs": "0.0.1-security",
72 "jquery": "^2.2.4", 72 "jquery": "^2.2.4",
73 "jquery-ui": "^1.12.1", 73 "jquery-ui": "^1.12.1",
74 "jquery-validation": "^1.15.1", 74 "jquery-validation": "^1.15.1",
75 "json2csv": "^3.7.3", 75 "json2csv": "^3.7.3",
76 "lodash": "^4.17.4", 76 "lodash": "^4.17.4",
77 "material-fabmenu": "0.0.1",
78 "material-ui": "^0.17.1", 77 "material-ui": "^0.17.1",
79 "meteor-node-stubs": "^0.2.6", 78 "meteor-node-stubs": "^0.2.6",
80 "moment": "^2.18.0", 79 "moment": "^2.18.0",
81 "react": "^15.4.2", 80 "react": "^15.4.2",
82 "react-addons-css-transition-group": "^15.4.2", 81 "react-addons-css-transition-group": "^15.4.2",
83 "react-addons-pure-render-mixin": "^15.3.2", 82 "react-addons-pure-render-mixin": "^15.3.2",
84 "react-addons-transition-group": "^15.4.2", 83 "react-addons-transition-group": "^15.4.2",
85 "react-bootstrap": "^0.30.8", 84 "react-bootstrap": "^0.30.8",
86 "react-bootstrap-date-picker": "^4.0.0", 85 "react-bootstrap-date-picker": "^4.0.0",
86 "react-bootstrap-table": "^3.1.6",
87 "react-burger-menu": "^1.10.14", 87 "react-burger-menu": "^1.10.14",
88 "react-dom": "^15.4.2", 88 "react-dom": "^15.4.2",
89 "react-fontawesome": "^1.5.0", 89 "react-fontawesome": "^1.5.0",
90 "react-komposer": "^1.13.1", 90 "react-komposer": "^1.13.1",
91 "react-router": "^2.6.1", 91 "react-router": "^2.6.1",
92 "react-router-bootstrap": "^0.23.1", 92 "react-router-bootstrap": "^0.23.1",
93 "react-stepzilla": "^4.3.4", 93 "react-stepzilla": "^4.3.4",
94 "react-svg": "^2.1.19", 94 "react-svg": "^2.1.19",
95 "react-tap-event-plugin": "^2.0.1", 95 "react-tap-event-plugin": "^2.0.1",
96 "reactstrap": "^4.3.0", 96 "reactstrap": "^4.3.0",
97 "velocity-animate": "^1.4.3", 97 "velocity-animate": "^1.4.3",
98 "velocity-react": "^1.2.1" 98 "velocity-react": "^1.2.1"
99 } 99 }
100 } 100 }