Sunny Negi / Meteor-projects

Download as
Browse Code ยป

Commit 15998a6afdd47a7e249319305035d65e467389c3

Authored by Deepak
1 parent 796a9c53f5
Exists in master

added datepicker

Showing 5 changed files with 110 additions and 13 deletions   Show diff stats
imports/client/views/org/admin/students/StudentView.js
Diff comments   View file @15998a6
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 { AddStudent } from './addStudent'; 9 import { AddStudent } from './addStudent';
10 import { StudentTable } from './StudentTable'; 10 import { StudentTable } from './StudentTable';
11 import { Header } from './Header'; 11 import { Header } from './Header';
12 import { FabMenuView } from './FabMenu'; 12 import { FabMenuView } from './FabMenu';
13 import { UploadCsv } from './UploadCsv';
14
13 15
14 export class StudentView extends Component { 16 export class StudentView extends Component {
15 17
16 constructor(props) { 18 constructor(props) {
17 super(props); 19 super(props);
18 this.state = { 20 this.state = {
19 show: false 21 show: false
20 }; 22 };
21 this.showModal = this.showModal.bind(this); 23 this.showModal = this.showModal.bind(this);
22 this.hideModal = this.hideModal.bind(this); 24 this.hideModal = this.hideModal.bind(this);
23 this.onUpdate = this.onUpdate.bind(this); 25 this.onUpdate = this.onUpdate.bind(this);
24 }; 26 };
25 27
26 showModal() { 28 showModal() {
27 this.setState({show: true}); 29 this.setState({show: true});
28 } 30 }
29 31
30 hideModal() { 32 hideModal() {
31 this.setState({show: false}); 33 this.setState({show: false});
32 } 34 }
33 onUpdate(key, value) { 35 onUpdate(key, value) {
34 this.setState({[key]: value}); 36 this.setState({[key]: value});
35 }; 37 };
36 38
37 render() { 39 render() {
38 return ( 40 return (
39 <div className="content has-detached-left"> 41 <div className="content has-detached-left">
40 <div className="container-detached"> 42 <div className="container-detached">
41 <div className="content-detached"> 43 <div className="content-detached">
42 <Header/> 44 <Header/>
43 <StudentTable 45 <StudentTable
44 data = {this.props.data} 46 data = {this.props.data}
45 /> 47 />
46 <AddStudent/> 48 <AddStudent/>
47 49 <UploadCsv />
48 </div> 50 </div>
49 </div> 51 </div>
50 <div className="sidebar-detached affix-top"> 52 <div className="sidebar-detached affix-top">
51 <div className="sidebar sidebar-default"> 53 <div className="sidebar sidebar-default">
52 <div className="sidebar-content"> 54 <div className="sidebar-content">
53 55
54 <div className="sidebar-category"> 56 <div className="sidebar-category">
55 <div className="category-title"> 57 <div className="category-title">
56 <span>Advanced Search</span> 58 <span>Advanced Search</span>
57 <ul className="icons-list"> 59 <ul className="icons-list">
58 <li><a href="#" data-action="collapse"></a></li> 60 <li><a href="#" data-action="collapse"></a></li>
59 </ul> 61 </ul>
60 </div> 62 </div>
61 63
62 <div className="category-content"> 64 <div className="category-content">
63 <form action="#"> 65 <form action="#">
64 <div className="has-feedback has-feedback-left"> 66 <div className="has-feedback has-feedback-left">
65 <input type="search" className="form-control" placeholder="First Name" /> 67 <input type="search" className="form-control" placeholder="First Name" />
66 <div className="form-control-feedback"> 68 <div className="form-control-feedback">
67 <i className="icon-search4 text-size-base text-muted"></i> 69 <i className="icon-search4 text-size-base text-muted"></i>
68 </div> 70 </div>
69 </div> 71 </div>
70 </form> 72 </form>
71 </div> 73 </div>
72 <div className="category-content"> 74 <div className="category-content">
73 <form action="#"> 75 <form action="#">
74 <div className="has-feedback has-feedback-left"> 76 <div className="has-feedback has-feedback-left">
75 <input type="search" className="form-control" placeholder="Last Name" /> 77 <input type="search" className="form-control" placeholder="Last Name" />
76 <div className="form-control-feedback"> 78 <div className="form-control-feedback">
77 <i className="icon-search4 text-size-base text-muted"></i> 79 <i className="icon-search4 text-size-base text-muted"></i>
78 </div> 80 </div>
79 </div> 81 </div>
80 </form> 82 </form>
81 </div> 83 </div>
82 84
83 </div> 85 </div>
84 86
85 87
86 </div> 88 </div>
87 </div> 89 </div>
88 </div> 90 </div>
89 </div> 91 </div>
90 ); 92 );
91 }; 93 };
92 94
93 }; 95 };
94 96
imports/client/views/org/admin/students/UploadCsv.js
Diff comments   View file @15998a6
File was created 1 import _ from 'lodash';
2 import { Meteor } from 'meteor/meteor';
3
4 import React, { Component } from 'react';
5 import { Link,browserHistory } from 'react-router';
6 import { FormGroup,Panel,Table,
7 ButtonToolbar,Modal, FieldGroup,
8 FormControl,Glyphicon,Button } from 'react-bootstrap';
9 import { AddStudentForm } from './addStudentForm';
10
11 const style = {
12 margin: 12,
13 };
14 export class UploadCsv extends Component {
15 constructor(props) {
16 super(props);
17 this.state = {
18 show: false
19 };
20 this.showModal = this.showModal.bind(this);
21 this.hideModal = this.hideModal.bind(this);
22 this.onUpdate = this.onUpdate.bind(this);
23 };
24
25 showModal() {
26 this.setState({show: true});
27 }
28
29 hideModal() {
30 this.setState({show: false});
31 }
32 onUpdate(key, value) {
33 this.setState({[key]: value});
34 };
35
36 render() {
37 return (
38 <ButtonToolbar>
39 <Button bsStyle="primary" onClick={this.showModal}>
40 Upload CSV
41 </Button>
42 <Modal
43 {...this.props}
44 show={this.state.show}
45 onHide={this.hideModal}
46 dialogClassName="custom-modal"
47 >
48 <Modal.Header closeButton>
49 <Modal.Title id="contained-modal-title-lg">New Student</Modal.Title>
50 </Modal.Header>
51 <Modal.Body>
52 <FieldGroup
53 id="formControlsFile"
54 type="file"
55 label="File"
56 help="Example block-level help text here."
57 />
58 </Modal.Body>
59 <Modal.Footer>
60 <Button onClick={this.hideModal}>Close</Button>
61 </Modal.Footer>
62 </Modal>
63 </ButtonToolbar>
64 );
65 };
66
67 };
68
imports/client/views/org/admin/students/addStudent.js
Diff comments   View file @15998a6
1 import _ from 'lodash'; 1 import _ from 'lodash';
2 import { Meteor } from 'meteor/meteor'; 2 import { Meteor } from 'meteor/meteor';
3 3 import './student.css'
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 { AddStudentForm } from './addStudentForm'; 9 import { AddStudentForm } from './addStudentForm';
10 10
11 const style = { 11 const style = {
12 margin: 12, 12 margin: 12,
13 }; 13 };
14 export class AddStudent extends Component { 14 export class AddStudent extends Component {
15 constructor(props) { 15 constructor(props) {
16 super(props); 16 super(props);
17 this.state = { 17 this.state = {
18 show: false 18 show: false
19 }; 19 };
20 this.showModal = this.showModal.bind(this); 20 this.showModal = this.showModal.bind(this);
21 this.hideModal = this.hideModal.bind(this); 21 this.hideModal = this.hideModal.bind(this);
22 this.onUpdate = this.onUpdate.bind(this); 22 this.onUpdate = this.onUpdate.bind(this);
23 }; 23 };
24 24
25 showModal() { 25 showModal() {
26 this.setState({show: true}); 26 this.setState({show: true});
27 } 27 }
28 28
29 hideModal() { 29 hideModal() {
30 this.setState({show: false}); 30 this.setState({show: false});
31 } 31 }
32 onUpdate(key, value) { 32 onUpdate(key, value) {
33 this.setState({[key]: value}); 33 this.setState({[key]: value});
34 }; 34 };
35 35
36 render() { 36 render() {
37 return ( 37 return (
38 <div>
39 <ButtonToolbar> 38 <ButtonToolbar>
40 <Button bsStyle="primary" onClick={this.showModal}> 39 <Button bsStyle="primary" onClick={this.showModal}>
41 Add Student 40 Add Student
42 </Button> 41 </Button>
43 <Modal 42 <Modal
44 {...this.props} 43 {...this.props}
45 show={this.state.show} 44 show={this.state.show}
46 onHide={this.hideModal} 45 onHide={this.hideModal}
47 dialogClassName="custom-modal" 46 dialogClassName="custom-modal"
48 > 47 >
49 <Modal.Header closeButton> 48 <Modal.Header closeButton>
50 <Modal.Title id="contained-modal-title-lg">New Student</Modal.Title> 49 <Modal.Title id="contained-modal-title-lg">New Student</Modal.Title>
51 </Modal.Header> 50 </Modal.Header>
52 <Modal.Body> 51 <Modal.Body>
53 <AddStudentForm /> 52 <AddStudentForm />
54 </Modal.Body> 53 </Modal.Body>
55 <Modal.Footer> 54 <Modal.Footer>
56 <Button onClick={this.hideModal}>Close</Button> 55 <Button onClick={this.hideModal}>Close</Button>
57 </Modal.Footer> 56 </Modal.Footer>
58 </Modal> 57 </Modal>
59 </ButtonToolbar> 58 </ButtonToolbar>
60 </div>
61 ); 59 );
62 }; 60 };
63 61
64 }; 62 };
65 63
imports/client/views/org/admin/students/addStudentForm.js
Diff comments   View file @15998a6
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 { Form, FormGroup,InputGroup, 6 import { Form, FormGroup,InputGroup,
7 DropdownButton,MenuItem,ControlLabel, 7 DropdownButton,MenuItem,ControlLabel,
8 SplitButton, 8 SplitButton,
9 FormControl,Glyphicon,Button } from 'react-bootstrap'; 9 FormControl,Glyphicon,Button } from 'react-bootstrap';
10 import {DatePicker} from 'react-bootstrap-date-picker' 10 import DatePicker from 'react-bootstrap-date-picker'
11 import {addStudentManually} from '/imports/collections/students/methods'; 11 import {addStudentManually} from '/imports/collections/students/methods';
12 12
13 export class AddStudentForm extends Component { 13 export class AddStudentForm extends Component {
14 14
15 constructor(props) { 15 constructor(props) {
16 super(props); 16 super(props);
17 this.state = { 17 this.state = {
18 admissionId: "", 18 admissionId: "",
19 firstName: "", 19 firstName: "",
20 lastName: "", 20 lastName: "",
21 middleName: "", 21 middleName: "",
22 email: "", 22 email: "",
23 dob: "", 23 dob: "",
24 formattedDob: "",
24 gender: "", 25 gender: "",
25 rollNo: "", 26 rollNo: "",
26 class: "", 27 class: "",
27 section: "", 28 section: "",
28 bloodGroup: "", 29 bloodGroup: "",
29 phone: "", 30 phone: "",
30 address: "", 31 address: "",
31 city: "", 32 city: "",
32 state: "", 33 state: "",
33 parentName: "", 34 parentName: "",
34 parentEmail: "", 35 parentEmail: "",
35 relation: "", 36 relation: "",
36 profession: "", 37 profession: "",
37 parentGender: "", 38 parentGender: "",
38 parentPhone: "", 39 parentPhone: "",
39 parentAddress: "", 40 parentAddress: "",
40 parentCity: "", 41 parentCity: "",
41 parentState: "", 42 parentState: "",
42 parentZipcode: "", 43 parentZipcode: "",
43 }; 44 };
44 this.onUpdate = this.onUpdate.bind(this); 45 this.onUpdate = this.onUpdate.bind(this);
46 this.handleDob = this.handleDob.bind(this);
45 }; 47 };
46 48
47 onUpdate(key, value) { 49 onUpdate(key, value) {
48 this.setState({[key]: value}); 50 this.setState({[key]: value});
49 }; 51 };
52
53 handleDob(value, formattedValue) {
54 this.setState({
55 dob: value, // ISO String, ex: "2016-11-19T12:00:00.000Z"
56 formattedDob: formattedValue // Formatted String, ex: "11/19/2016"
57 });
58 }
50 addStudent(e){ 59 addStudent(e){
51 e.preventDefault(); 60 e.preventDefault();
52 e.persist(); 61 e.persist();
53 const firstName = this.state.firstName; 62 const firstName = this.state.firstName;
54 const middleName = this.state.middleName; 63 const middleName = this.state.middleName;
55 const lastName = this.state.lastName; 64 const lastName = this.state.lastName;
56 if(firstName==""){ 65 if(firstName==""){
57 Bert.alert('Enter Fist Name', 'danger'); 66 Bert.alert('Enter Fist Name', 'danger');
58 } else if(middleName==""){ 67 } else if(middleName==""){
59 Bert.alert('Enter Middle name!', 'danger'); 68 Bert.alert('Enter Middle name!', 'danger');
60 } else{ 69 } else{
61 addStudentManually.call({ 70 addStudentManually.call({
62 firstName: firstName, 71 firstName: firstName,
63 middleName: middleName, 72 middleName: middleName,
64 lastName: lastName 73 lastName: lastName
65 }, function (error, result) { 74 }, function (error, result) {
66 console.log(error); 75 console.log(error);
67 console.log(result); 76 console.log(result);
68 }); 77 });
69 } 78 }
70 } 79 }
71 render() { 80 render() {
72 return ( 81 return (
73 <Form onSubmit={ (e) => this.addStudent(e) }> 82 <Form onSubmit={ (e) => this.addStudent(e) } inline>
74 <FormGroup controlId="formBasicText"> 83 <FormGroup controlId="admissionId">
75 <ControlLabel>Admission Id</ControlLabel> 84 <ControlLabel>Admission Id</ControlLabel>
76 <FormControl 85 <FormControl
77 type="text" 86 type="text"
78 value={this.state.firstName} 87 value={this.state.admissionId}
79 placeholder="First Name" 88 placeholder="admission Id"
80 onChange={e=>this.onUpdate('firstName',e.target.value)} 89 onChange={e=>this.onUpdate('admissionId',e.target.value)}
81 /> 90 />
82 </FormGroup> 91 </FormGroup>
83 92
84 <FormGroup controlId="formBasicText"> 93 <FormGroup controlId="firstName">
85 <ControlLabel>First Name</ControlLabel> 94 <ControlLabel>First Name</ControlLabel>
86 <FormControl 95 <FormControl
87 type="text" 96 type="text"
88 value={this.state.firstName} 97 value={this.state.firstName}
89 placeholder="First Name" 98 placeholder="First Name"
90 onChange={e=>this.onUpdate('firstName',e.target.value)} 99 onChange={e=>this.onUpdate('firstName',e.target.value)}
91 /> 100 />
92 </FormGroup> 101 </FormGroup>
93 <FormGroup controlId="formBasicText"> 102 <FormGroup controlId="middleName">
94 <ControlLabel>Middle Name</ControlLabel> 103 <ControlLabel>Middle Name</ControlLabel>
95 <FormControl 104 <FormControl
96 type="text" 105 type="text"
97 value={this.state.middleName} 106 value={this.state.middleName}
98 placeholder="Middle Name" 107 placeholder="Middle Name"
99 onChange={e=>this.onUpdate('middleName',e.target.value)} 108 onChange={e=>this.onUpdate('middleName',e.target.value)}
100 /> 109 />
101 </FormGroup> 110 </FormGroup>
102 <FormGroup controlId="formBasicText"> 111 <FormGroup controlId="lastName">
103 <ControlLabel>Last Name</ControlLabel> 112 <ControlLabel>Last Name</ControlLabel>
104 <FormControl 113 <FormControl
105 type="text" 114 type="text"
106 value={this.state.lastName} 115 value={this.state.lastName}
107 placeholder="Last Name" 116 placeholder="Last Name"
108 onChange={e=>this.onUpdate('lastName',e.target.value)} 117 onChange={e=>this.onUpdate('lastName',e.target.value)}
109 /> 118 />
110 </FormGroup> 119 </FormGroup>
120 <FormGroup controlId="email">
121 <ControlLabel>Email</ControlLabel>
122 <FormControl
123 type="email"
124 value={this.state.email}
125 placeholder="Email"
126 onChange={e=>this.onUpdate('email',e.target.value)}
127 />
128 </FormGroup>
129 <FormGroup>
130 <ControlLabel>Date of birth</ControlLabel>
131 <DatePicker id="dob"
132 value={this.state.dob}
133 onChange={this.handleDob}
134 />
135 </FormGroup>
111 <Button type="submit" bsStyle="default">Add Student</Button> 136 <Button type="submit" bsStyle="default">Add Student</Button>
112 </Form> 137 </Form>
113 ); 138 );
114 }; 139 };
115 140
116 }; 141 };
117 142
imports/client/views/org/admin/students/student.css
Diff comments   View file @15998a6
File was created 1 .btn-toolbar {
2 display: inline-block;
3 font-size: 0;
4 margin-right: 12px;
5 }
6