added datepicker

Deepak
1 parent 796a9c53f5
Showing 5 changed files with 110 additions and 13 deletions Show diff stats
imports/client/views/org/admin/students/StudentView.js
imports/client/views/org/admin/students/UploadCsv.js
imports/client/views/org/admin/students/addStudent.js
imports/client/views/org/admin/students/addStudentForm.js
imports/client/views/org/admin/students/student.css
@@ -10,6 +10,8 @@ import { AddStudent }                     from &#39;./addStudent&#39;;
 import { StudentTable }                   from './StudentTable';
 import { Header }                         from './Header';
 import { FabMenuView }                    from './FabMenu';
+import { UploadCsv }                      from './UploadCsv';
+
  
 export class StudentView extends Component {
  
@@ -44,7 +46,7 @@ export class StudentView extends Component {
             data = {this.props.data}
             />
           <AddStudent/>
-
+          <UploadCsv />
 				</div>
 			</div>
 			<div className="sidebar-detached affix-top">
@@ -0,0 +1,67 @@
+import _                                  from 'lodash';
+import { Meteor }                         from 'meteor/meteor';
+
+import React, { Component }               from 'react';
+import { Link,browserHistory }            from 'react-router';
+import { FormGroup,Panel,Table,
+  ButtonToolbar,Modal, FieldGroup,
+  FormControl,Glyphicon,Button }          from 'react-bootstrap';
+import { AddStudentForm }               from './addStudentForm';
+
+const style = {
+  margin: 12,
+};
+export class UploadCsv extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      show: false
+    };
+    this.showModal = this.showModal.bind(this);
+    this.hideModal = this.hideModal.bind(this);
+    this.onUpdate = this.onUpdate.bind(this);
+  };
+
+    showModal() {
+      this.setState({show: true});
+    }
+
+    hideModal() {
+      this.setState({show: false});
+    }
+  onUpdate(key, value) {
+    this.setState({[key]: value});
+  };
+
+  render() {
+    return (
+      <ButtonToolbar>
+        <Button bsStyle="primary" onClick={this.showModal}>
+          Upload CSV
+        </Button>
+        <Modal
+          {...this.props}
+          show={this.state.show}
+          onHide={this.hideModal}
+          dialogClassName="custom-modal"
+        >
+          <Modal.Header closeButton>
+            <Modal.Title id="contained-modal-title-lg">New Student</Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+          <FieldGroup
+            id="formControlsFile"
+            type="file"
+            label="File"
+            help="Example block-level help text here."
+          />
+          </Modal.Body>
+          <Modal.Footer>
+            <Button onClick={this.hideModal}>Close</Button>
+          </Modal.Footer>
+        </Modal>
+      </ButtonToolbar>
+    );
+  };
+
+};
 import _                                  from 'lodash';
 import { Meteor }                         from 'meteor/meteor';
-
+import './student.css'
 import React, { Component }               from 'react';
 import { Link,browserHistory }            from 'react-router';
 import { FormGroup,Panel,Table,
@@ -35,7 +35,6 @@ export class AddStudent extends Component {
  
   render() {
     return (
-      <div>
       <ButtonToolbar>
         <Button bsStyle="primary" onClick={this.showModal}>
           Add Student
@@ -57,7 +56,6 @@ export class AddStudent extends Component {
           </Modal.Footer>
         </Modal>
       </ButtonToolbar>
-      </div>
     );
   };
  
@@ -7,7 +7,7 @@ import { Form, FormGroup,InputGroup,
   DropdownButton,MenuItem,ControlLabel,
   SplitButton,
   FormControl,Glyphicon,Button }          from 'react-bootstrap';
-import {DatePicker}                       from 'react-bootstrap-date-picker'
+import DatePicker                         from 'react-bootstrap-date-picker'
 import {addStudentManually}               from '/imports/collections/students/methods';
  
 export class AddStudentForm extends Component {
@@ -21,6 +21,7 @@ export class AddStudentForm extends Component {
       middleName:     "",
       email:          "",
       dob:            "",
+      formattedDob:   "",
       gender:         "",
       rollNo:         "",
       class:          "",
@@ -42,11 +43,19 @@ export class AddStudentForm extends Component {
       parentZipcode:  "",
     };
     this.onUpdate = this.onUpdate.bind(this);
+    this.handleDob = this.handleDob.bind(this);
   };
  
   onUpdate(key, value) {
     this.setState({[key]: value});
   };
+
+  handleDob(value, formattedValue) {
+  this.setState({
+    dob: value, // ISO String, ex: "2016-11-19T12:00:00.000Z"
+    formattedDob: formattedValue // Formatted String, ex: "11/19/2016"
+  });
+}
   addStudent(e){
     e.preventDefault();
     e.persist();
@@ -70,18 +79,18 @@ export class AddStudentForm extends Component {
   }
   render() {
     return (
-      <Form onSubmit={ (e) => this.addStudent(e) }>
-        <FormGroup controlId="formBasicText">
+      <Form onSubmit={ (e) => this.addStudent(e) } inline>
+        <FormGroup controlId="admissionId">
           <ControlLabel>Admission Id</ControlLabel>
           <FormControl
             type="text"
-            value={this.state.firstName}
-            placeholder="First Name"
-            onChange={e=>this.onUpdate('firstName',e.target.value)}
+            value={this.state.admissionId}
+            placeholder="admission Id"
+            onChange={e=>this.onUpdate('admissionId',e.target.value)}
           />
         </FormGroup>
  
-        <FormGroup controlId="formBasicText">
+        <FormGroup controlId="firstName">
           <ControlLabel>First Name</ControlLabel>
           <FormControl
             type="text"
@@ -90,7 +99,7 @@ export class AddStudentForm extends Component {
             onChange={e=>this.onUpdate('firstName',e.target.value)}
           />
         </FormGroup>
-        <FormGroup controlId="formBasicText">
+        <FormGroup controlId="middleName">
           <ControlLabel>Middle Name</ControlLabel>
           <FormControl
             type="text"
@@ -99,7 +108,7 @@ export class AddStudentForm extends Component {
             onChange={e=>this.onUpdate('middleName',e.target.value)}
           />
         </FormGroup>
-        <FormGroup controlId="formBasicText">
+        <FormGroup controlId="lastName">
           <ControlLabel>Last Name</ControlLabel>
           <FormControl
             type="text"
@@ -108,6 +117,22 @@ export class AddStudentForm extends Component {
             onChange={e=>this.onUpdate('lastName',e.target.value)}
           />
         </FormGroup>
+        <FormGroup controlId="email">
+          <ControlLabel>Email</ControlLabel>
+          <FormControl
+            type="email"
+            value={this.state.email}
+            placeholder="Email"
+            onChange={e=>this.onUpdate('email',e.target.value)}
+          />
+        </FormGroup>
+        <FormGroup>
+          <ControlLabel>Date of birth</ControlLabel>
+          <DatePicker id="dob"
+          value={this.state.dob}
+          onChange={this.handleDob}
+          />
+        </FormGroup>
         <Button type="submit" bsStyle="default">Add Student</Button>
       </Form>
     );
@@ -0,0 +1,5 @@
+.btn-toolbar {
+    display: inline-block;
+    font-size: 0;
+    margin-right: 12px;
+}
...	...	@@ -10,6 +10,8 @@ import { AddStudent } from './addStudent';
10	10	import { StudentTable } from './StudentTable';
11	11	import { Header } from './Header';
12	12	import { FabMenuView } from './FabMenu';
	13	+import { UploadCsv } from './UploadCsv';
	14	+
13	15
14	16	export class StudentView extends Component {
15	17
...	...	@@ -44,7 +46,7 @@ export class StudentView extends Component {
44	46	data = {this.props.data}
45	47	/>
46	48	<AddStudent/>
47		-
	49	+ <UploadCsv />
48	50	</div>
49	51	</div>
50	52	<div className="sidebar-detached affix-top">
...	...
...	...	@@ -0,0 +1,67 @@
	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	+};
...	...
1	1	import _ from 'lodash';
2	2	import { Meteor } from 'meteor/meteor';
3		-
	3	+import './student.css'
4	4	import React, { Component } from 'react';
5	5	import { Link,browserHistory } from 'react-router';
6	6	import { FormGroup,Panel,Table,
...	...	@@ -35,7 +35,6 @@ export class AddStudent extends Component {
35	35
36	36	render() {
37	37	return (
38		- <div>
39	38	<ButtonToolbar>
40	39	<Button bsStyle="primary" onClick={this.showModal}>
41	40	Add Student
...	...	@@ -57,7 +56,6 @@ export class AddStudent extends Component {
57	56	</Modal.Footer>
58	57	</Modal>
59	58	</ButtonToolbar>
60		- </div>
61	59	);
62	60	};
63	61
...	...
...	...	@@ -7,7 +7,7 @@ import { Form, FormGroup,InputGroup,
7	7	DropdownButton,MenuItem,ControlLabel,
8	8	SplitButton,
9	9	FormControl,Glyphicon,Button } from 'react-bootstrap';
10		-import {DatePicker} from 'react-bootstrap-date-picker'
	10	+import DatePicker from 'react-bootstrap-date-picker'
11	11	import {addStudentManually} from '/imports/collections/students/methods';
12	12
13	13	export class AddStudentForm extends Component {
...	...	@@ -21,6 +21,7 @@ export class AddStudentForm extends Component {
21	21	middleName: "",
22	22	email: "",
23	23	dob: "",
	24	+ formattedDob: "",
24	25	gender: "",
25	26	rollNo: "",
26	27	class: "",
...	...	@@ -42,11 +43,19 @@ export class AddStudentForm extends Component {
42	43	parentZipcode: "",
43	44	};
44	45	this.onUpdate = this.onUpdate.bind(this);
	46	+ this.handleDob = this.handleDob.bind(this);
45	47	};
46	48
47	49	onUpdate(key, value) {
48	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	59	addStudent(e){
51	60	e.preventDefault();
52	61	e.persist();
...	...	@@ -70,18 +79,18 @@ export class AddStudentForm extends Component {
70	79	}
71	80	render() {
72	81	return (
73		- <Form onSubmit={ (e) => this.addStudent(e) }>
74		- <FormGroup controlId="formBasicText">
	82	+ <Form onSubmit={ (e) => this.addStudent(e) } inline>
	83	+ <FormGroup controlId="admissionId">
75	84	<ControlLabel>Admission Id</ControlLabel>
76	85	<FormControl
77	86	type="text"
78		- value={this.state.firstName}
79		- placeholder="First Name"
80		- onChange={e=>this.onUpdate('firstName',e.target.value)}
	87	+ value={this.state.admissionId}
	88	+ placeholder="admission Id"
	89	+ onChange={e=>this.onUpdate('admissionId',e.target.value)}
81	90	/>
82	91	</FormGroup>
83	92
84		- <FormGroup controlId="formBasicText">
	93	+ <FormGroup controlId="firstName">
85	94	<ControlLabel>First Name</ControlLabel>
86	95	<FormControl
87	96	type="text"
...	...	@@ -90,7 +99,7 @@ export class AddStudentForm extends Component {
90	99	onChange={e=>this.onUpdate('firstName',e.target.value)}
91	100	/>
92	101	</FormGroup>
93		- <FormGroup controlId="formBasicText">
	102	+ <FormGroup controlId="middleName">
94	103	<ControlLabel>Middle Name</ControlLabel>
95	104	<FormControl
96	105	type="text"
...	...	@@ -99,7 +108,7 @@ export class AddStudentForm extends Component {
99	108	onChange={e=>this.onUpdate('middleName',e.target.value)}
100	109	/>
101	110	</FormGroup>
102		- <FormGroup controlId="formBasicText">
	111	+ <FormGroup controlId="lastName">
103	112	<ControlLabel>Last Name</ControlLabel>
104	113	<FormControl
105	114	type="text"
...	...	@@ -108,6 +117,22 @@ export class AddStudentForm extends Component {
108	117	onChange={e=>this.onUpdate('lastName',e.target.value)}
109	118	/>
110	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	136	<Button type="submit" bsStyle="default">Add Student</Button>
112	137	</Form>
113	138	);
...	...
...	...	@@ -0,0 +1,5 @@
	1	+.btn-toolbar {
	2	+ display: inline-block;
	3	+ font-size: 0;
	4	+ margin-right: 12px;
	5	+}
...	...