Commit e277faafa49eaaea41b5bbea47e4ba9baf97e00e
1 parent
c84a4ec94c
Exists in
master
added different users view
Showing
57 changed files
with
3448 additions
and
3240 deletions
Show diff stats
imports/client/app/routes.js
... | ... | @@ -26,10 +26,14 @@ import { importCsvController } from '/imports/client/views/org/impo |
26 | 26 | /** |
27 | 27 | Admin |
28 | 28 | **/ |
29 | -import { StudentDataController } from '/imports/client/views/org/admin/settings/students/index' | |
30 | -import { staffViewController } from '/imports/client/views/org/admin/settings/staff/index' | |
31 | -import { ParentViewController } from '/imports/client/views/org/admin/settings/parents/index' | |
32 | 29 | import { AdminSettingsController } from '/imports/client/views/org/admin/settings/index' |
30 | +// | |
31 | +import { AdminUsersModule } from '/imports/client/views/org/admin/users/module/index' | |
32 | +import { AdminUsersListController } from '/imports/client/views/org/admin/users/list/index' | |
33 | +import { StudentDataController } from '/imports/client/views/org/admin/users/students/index' | |
34 | +import { staffViewController } from '/imports/client/views/org/admin/users/staff/index' | |
35 | +import { ParentViewController } from '/imports/client/views/org/admin/users/parents/index' | |
36 | + | |
33 | 37 | //Admin mail |
34 | 38 | import { AdminMailModule } from '/imports/client/views/org/admin/mailbox/module/index' |
35 | 39 | import { AdminInboxController } from '/imports/client/views/org/admin/mailbox/inbox/index' |
... | ... | @@ -56,20 +60,23 @@ There are three types of routes |
56 | 60 | **/ |
57 | 61 | const getOrgAdminRoutes = () => ( |
58 | 62 | <Router history={ browserHistory }> |
59 | - <Route path="/" component={ AdminAppModule } > | |
60 | - <IndexRoute name="index" component={ DashboardController } /> | |
61 | - <Route name="import" path="/import" component={ importCsvController } /> | |
62 | - <Route name="student" path="/students" component={ StudentDataController } /> | |
63 | - <Route name="staff" path="/staff" component={ staffViewController } /> | |
64 | - <Route name="parent" path="/parents" component={ ParentViewController } /> | |
65 | - <Route name="settings" path="/settings" component={ AdminSettingsController } /> | |
63 | + <Route path="/" component = { AdminAppModule } > | |
64 | + <IndexRoute name="index" component = { DashboardController } /> | |
65 | + <Route name="import" path="/import" component = { importCsvController } /> | |
66 | + <Route name="settings" path="/settings" component = { AdminSettingsController } /> | |
67 | + <Route name="users" path = "/users" component = {AdminUsersModule}> | |
68 | + <IndexRoute component = {AdminUsersListController} /> | |
69 | + <Route name="students" path = "/users/students" component = {StudentDataController} /> | |
70 | + <Route name="staff" path = "/users/staff" component = {staffViewController} /> | |
71 | + <Route name="parents" path = "/users/parents" component = {ParentViewController} /> | |
72 | + </Route> | |
66 | 73 | <Route name="mail" path = "/mail" component = {AdminMailModule}> |
67 | 74 | <IndexRoute component = {AdminInboxController} /> |
68 | 75 | <Route name="mail-compose" path = "/mail/compose" component = {AdminComposeMailController} /> |
69 | 76 | <Route name="mail-sent" path = "/mail/sent" component = {AdminSentMailController} /> |
70 | 77 | <Route name="mail-important" path = "/mail/important" component = {AdminImportantMailController} /> |
71 | 78 | </Route> |
72 | - <Route path="*" component={ NotFound } /> | |
79 | + <Route path="*" component = { NotFound } /> | |
73 | 80 | </Route> |
74 | 81 | </Router> |
75 | 82 | ) | ... | ... |
imports/client/views/org/admin/settings/Header.js
... | ... | @@ -1,85 +0,0 @@ |
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, | |
7 | - FormControl,Glyphicon,Button } from 'react-bootstrap'; | |
8 | -import './header.css'; | |
9 | - | |
10 | - | |
11 | -export class Header extends Component { | |
12 | - | |
13 | - constructor(props) { | |
14 | - super(props); | |
15 | - this.state = { | |
16 | - | |
17 | - }; | |
18 | - this.onUpdate = this.onUpdate.bind(this); | |
19 | - }; | |
20 | - | |
21 | - onUpdate(key, value) { | |
22 | - this.setState({[key]: value}); | |
23 | - }; | |
24 | - | |
25 | - render() { | |
26 | - return ( | |
27 | - <div className = "enterPane-box"> | |
28 | - <div className="row"> | |
29 | - | |
30 | - <div className="col-lg-4 col-md-8"> | |
31 | - <Link to="/students" > | |
32 | - <div className="panel panel-body"> | |
33 | - <div className="media"> | |
34 | - <div className="media-left"> | |
35 | - <img src="assets/images/download2.png" className="img-circle" alt=""/> | |
36 | - </div> | |
37 | - | |
38 | - <div className="media-body"> | |
39 | - <h6 className="media-heading">Students</h6> | |
40 | - <p className="text-muted">Click to view</p> | |
41 | - </div> | |
42 | - </div> | |
43 | - </div> | |
44 | - </Link> | |
45 | - </div> | |
46 | - <div className="col-lg-4 col-md-8"> | |
47 | - <Link to="/staff" > | |
48 | - <div className="panel panel-body"> | |
49 | - <div className="media"> | |
50 | - <div className="media-left"> | |
51 | - <img src="assets/images/download.png" className="img-circle" alt=""/> | |
52 | - </div> | |
53 | - | |
54 | - <div className="media-body"> | |
55 | - <h6 className="media-heading">Teachers</h6> | |
56 | - <p className="text-muted">Click to view</p> | |
57 | - </div> | |
58 | - </div> | |
59 | - </div> | |
60 | - </Link> | |
61 | - </div> | |
62 | - | |
63 | - <div className="col-lg-4 col-md-8"> | |
64 | - <Link to="/parents" > | |
65 | - <div className="panel panel-body"> | |
66 | - <div className="media"> | |
67 | - <div className="media-left"> | |
68 | - <img src="assets/images/download3.png" className="img-circle" alt=""/> | |
69 | - </div> | |
70 | - | |
71 | - <div className="media-body"> | |
72 | - <h6 className="media-heading">Parents</h6> | |
73 | - <p className="text-muted">Click to view</p> | |
74 | - </div> | |
75 | - </div> | |
76 | - </div> | |
77 | - </Link> | |
78 | - </div> | |
79 | - | |
80 | - </div> | |
81 | - </div> | |
82 | - ); | |
83 | - }; | |
84 | - | |
85 | -}; |
imports/client/views/org/admin/settings/header.css
imports/client/views/org/admin/settings/parents/index.js
... | ... | @@ -1,72 +0,0 @@ |
1 | -import _ from 'lodash'; | |
2 | -import { | |
3 | - composeWithTracker, | |
4 | - compose, | |
5 | - composeAll | |
6 | - } from 'react-komposer'; | |
7 | -import { Loading } from '/imports/client/components/Loading'; | |
8 | - | |
9 | -import { Orgs } from '/imports/collections/orgs/index'; | |
10 | -import { Users } from '/imports/collections/users/index'; | |
11 | -import { Parents } from '/imports/collections/parents/index'; | |
12 | -import { ParentsView } from './parentsview'; | |
13 | - | |
14 | - | |
15 | - | |
16 | -const meteorTick = (props, onData) => { | |
17 | - Shelf.layout.set({ | |
18 | - bulb: 'SETTINGS', | |
19 | - subbulb: 'USERS', | |
20 | - view: 'PARENTS' | |
21 | - }); | |
22 | - const handles = [ | |
23 | - Meteor.subscribe('users.current'), | |
24 | - Meteor.subscribe('orgs.current'), | |
25 | - Meteor.subscribe('users.forMyOrg'), | |
26 | - Meteor.subscribe('parent.forMyOrg'), | |
27 | - ]; | |
28 | - | |
29 | - if(_.every(handles, (handle) => (handle.ready()) )) { | |
30 | - const user = Users.current(); | |
31 | - const org = Orgs.current(); | |
32 | - console.log("parents"); | |
33 | - parent = Users.find({"role":"PARENT"}).fetch() ? Users.find({"role":"PARENT"}).fetch() : ""; | |
34 | - console.log(Users.find({"role":"PARENT"}).fetch()); | |
35 | - parentData = Parents.find().fetch() ? Parents.find().fetch() : ""; | |
36 | - console.log("parentData"); | |
37 | - console.log(parentData); | |
38 | - for(var i=0; i< parent.length; i++){ | |
39 | - for(var j=0; j< parentData.length; j++){ | |
40 | - if(parent[i]._id == parentData[j].userId){ | |
41 | - parent[i].relationship = parentData[j].relationship; | |
42 | - parent[i].profession = parentData[j].profession; | |
43 | - parent[i].relationship = parentData[j].relationship; | |
44 | - } | |
45 | - } | |
46 | - } | |
47 | - onData(null, { | |
48 | - data: { | |
49 | - user: user, | |
50 | - org: org, | |
51 | - parent: parent | |
52 | - }, | |
53 | - }); | |
54 | - } | |
55 | - | |
56 | - return () => { | |
57 | - _.each(handles, (handle) => handle.stop() ); | |
58 | - }; | |
59 | -}; | |
60 | - | |
61 | - | |
62 | -const reduxTick = (props, onData) => { | |
63 | - onData(null, { | |
64 | - data: {} | |
65 | - }); | |
66 | -}; | |
67 | - | |
68 | - | |
69 | -export const ParentViewController = composeAll( | |
70 | - composeWithTracker(meteorTick, Loading), | |
71 | - compose(reduxTick, Loading), | |
72 | -)(ParentsView); |
imports/client/views/org/admin/settings/parents/parentsview.js
... | ... | @@ -1,48 +0,0 @@ |
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, | |
7 | - FormControl,Glyphicon,Button } from 'react-bootstrap'; | |
8 | -import { Header } from '../Header'; | |
9 | -import { ParentTable } from './view/ParentTable' | |
10 | - | |
11 | - | |
12 | -export class ParentsView extends Component { | |
13 | - | |
14 | - constructor(props) { | |
15 | - super(props); | |
16 | - this.state = { | |
17 | - | |
18 | - }; | |
19 | - this.onUpdate = this.onUpdate.bind(this); | |
20 | - }; | |
21 | - | |
22 | - onUpdate(key, value) { | |
23 | - this.setState({[key]: value}); | |
24 | - }; | |
25 | - togglePanel(){ | |
26 | - this.setState({panleOpen: !this.state.panleOpen}); | |
27 | - } | |
28 | - | |
29 | - render() { | |
30 | - const {user, org, parent} = this.props.data; | |
31 | - return ( | |
32 | - <div className="container-detached"> | |
33 | - <Header | |
34 | - user = {user} | |
35 | - org = {org} | |
36 | - /> | |
37 | - <ParentTable | |
38 | - data = {this.props.data} | |
39 | - parent = {parent} | |
40 | - /> | |
41 | - {/* <AddStaff/> | |
42 | - <UploadCsvStaff /> */} | |
43 | - </div> | |
44 | - ); | |
45 | - }; | |
46 | - | |
47 | - | |
48 | -}; |
imports/client/views/org/admin/settings/parents/view/ParentRow.js
... | ... | @@ -1,54 +0,0 @@ |
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, | |
7 | - FormControl,Glyphicon,Button } from 'react-bootstrap'; | |
8 | - | |
9 | - | |
10 | - export class ParentRow extends Component { | |
11 | - | |
12 | - constructor(props) { | |
13 | - super(props); | |
14 | - this.state = { | |
15 | - | |
16 | - }; | |
17 | - this.onUpdate = this.onUpdate.bind(this); | |
18 | - }; | |
19 | - | |
20 | - onUpdate(key, value) { | |
21 | - this.setState({[key]: value}); | |
22 | - }; | |
23 | - | |
24 | - render() { | |
25 | - const {parent} = this.props; | |
26 | - if(parent.firstName){ | |
27 | - return ( | |
28 | - <tr> | |
29 | - <td>{parent.firstName}</td> | |
30 | - <td>{parent.relationship}</td> {/* relationship doesnt reflect here */} | |
31 | - <td><span className="label label-success">Active</span></td> | |
32 | - <td className="text-center"> | |
33 | - <ul className="icons-list"> | |
34 | - <li className="dropdown"> | |
35 | - <a href="#" className="dropdown-toggle" data-toggle="dropdown"> | |
36 | - <i className="icon-menu9"></i> | |
37 | - </a> | |
38 | - <ul className="dropdown-menu dropdown-menu-right"> | |
39 | - <li><a href="#"><i className="icon-file-pdf"></i> Export to .pdf</a></li> | |
40 | - <li><a href="#"><i className="icon-file-excel"></i> Export to .csv</a></li> | |
41 | - <li><a href="#"><i className="icon-file-word"></i> Export to .doc</a></li> | |
42 | - </ul> | |
43 | - </li> | |
44 | - </ul> | |
45 | - </td> | |
46 | - </tr> | |
47 | - ); | |
48 | - }else { | |
49 | - return null; | |
50 | - } | |
51 | - | |
52 | - }; | |
53 | - | |
54 | - }; |
imports/client/views/org/admin/settings/parents/view/ParentTable.js
... | ... | @@ -1,70 +0,0 @@ |
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, | |
8 | - FormControl,Glyphicon,Button } from 'react-bootstrap'; | |
9 | -import {moment} from 'meteor/momentjs:moment' | |
10 | -import {ParentRow} from './ParentRow' | |
11 | -import {BootstrapTable, TableHeaderColumn}from 'react-bootstrap-table'; | |
12 | -const options = { | |
13 | - page: 0, // which page you want to show as default | |
14 | - sizePerPageList: [ { | |
15 | - text: '5', value: 5 | |
16 | - }, { | |
17 | - text: '10', value: 10 | |
18 | - }], // you can change the dropdown list for size per page | |
19 | - sizePerPage: 5, // which size per page you want to locate as default | |
20 | - pageStartIndex: 0, // where to start counting the pages | |
21 | - paginationSize: 3, // the pagination bar size. | |
22 | - prePage: 'Prev', // Previous page button text | |
23 | - nextPage: 'Next', // Next page button text | |
24 | - firstPage: 'First', // First page button text | |
25 | - lastPage: 'Last', // Last page button text | |
26 | - paginationShowsTotal: false, // Accept bool or function | |
27 | - paginationPosition: 'bottom' // default is bottom, top and both is all available | |
28 | - // hideSizePerPage: true > You can hide the dropdown for sizePerPage | |
29 | - // alwaysShowAllBtns: true // Always show next and previous button | |
30 | - // withFirstAndLast: false > Hide the going to First and Last page button | |
31 | - }; | |
32 | - | |
33 | -export class ParentTable extends Component { | |
34 | - | |
35 | - constructor(props) { | |
36 | - super(props); | |
37 | - this.state = { | |
38 | - show: false, | |
39 | - panleOpen: true, | |
40 | - }; | |
41 | - this.onUpdate = this.onUpdate.bind(this); | |
42 | - }; | |
43 | - onUpdate(key, value) { | |
44 | - this.setState({[key]: value}); | |
45 | - }; | |
46 | - | |
47 | - render() { | |
48 | - return ( | |
49 | - <div className="panel panel-flat"> | |
50 | - <div className="panel-heading"> | |
51 | - <h5 className="panel-title">Parent Details</h5> | |
52 | - <div className="heading-elements"> | |
53 | - <ul className="icons-list"> | |
54 | - <li onClick={this.togglePanel}><a data-action="collapse" className={this.state.panleOpen?"rotate-180":null}></a></li> | |
55 | - </ul> | |
56 | - </div> | |
57 | - </div> | |
58 | - <Panel collapsible expanded={this.state.panleOpen}> | |
59 | - <BootstrapTable data={ this.props.parent } pagination={ true } options={ options } > | |
60 | - <TableHeaderColumn dataField='srno' isKey={ true } dataSort={ true } filter={ { type: 'TextFilter' } }>Sr No</TableHeaderColumn> | |
61 | - <TableHeaderColumn dataField='firstName' dataSort={ true } filter={ { type: 'TextFilter' } }>Name</TableHeaderColumn> | |
62 | - <TableHeaderColumn dataField='relationship' dataSort={ true } filter={ { type: 'TextFilter' } }>Relationship</TableHeaderColumn> | |
63 | - <TableHeaderColumn dataField='profession' dataSort={ true } filter={ { type: 'TextFilter' } }>Profession</TableHeaderColumn> | |
64 | - </BootstrapTable> | |
65 | - </Panel> | |
66 | - </div> | |
67 | - ); | |
68 | - }; | |
69 | - | |
70 | -}; |
imports/client/views/org/admin/settings/staff/StaffView.js
... | ... | @@ -1,44 +0,0 @@ |
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, | |
7 | - FormControl,Glyphicon,Button } from 'react-bootstrap'; | |
8 | -import { Header } from '../Header'; | |
9 | -import { StaffTable } from './view/StaffTable' | |
10 | -import { AddStaff } from './add/addStaff' | |
11 | -import { UploadCsvStaff } from './UploadCsvStaff' | |
12 | - | |
13 | -export class StaffView extends Component { | |
14 | - constructor(props) { | |
15 | - super(props); | |
16 | - this.state = { | |
17 | - | |
18 | - }; | |
19 | - this.onUpdate = this.onUpdate.bind(this); | |
20 | - }; | |
21 | - | |
22 | - onUpdate(key, value) { | |
23 | - this.setState({[key]: value}); | |
24 | - }; | |
25 | - | |
26 | - render() { | |
27 | - const {user, org, staff} = this.props.data; | |
28 | - return ( | |
29 | - <div className="container-detached"> | |
30 | - <Header | |
31 | - user = {user} | |
32 | - org = {org} | |
33 | - /> | |
34 | - <StaffTable | |
35 | - data = {this.props.data} | |
36 | - staff = {staff} | |
37 | - /> | |
38 | - <AddStaff/> | |
39 | - <UploadCsvStaff /> | |
40 | - </div> | |
41 | - ); | |
42 | - }; | |
43 | - | |
44 | -}; |
imports/client/views/org/admin/settings/staff/UploadCsvStaff.js
... | ... | @@ -1,103 +0,0 @@ |
1 | -// import {UploadCsv } from '/imports/collections/students/UploadCsv' | |
2 | -import _ from 'lodash'; | |
3 | -import { Meteor } from 'meteor/meteor'; | |
4 | - | |
5 | -import React, { Component } from 'react'; | |
6 | -import { Link,browserHistory } from 'react-router'; | |
7 | -import { FormGroup,Panel,Table, | |
8 | - ButtonToolbar,Modal,ControlLabel,HelpBlock, | |
9 | - FormControl,Glyphicon,Button } from 'react-bootstrap'; | |
10 | -// import { AddStudentForm } from './addStudentForm'; | |
11 | -import { FilesCollection } from 'meteor/ostrio:files'; | |
12 | -const Papa = this.Papa; | |
13 | -// console.log(this); | |
14 | -const style = { | |
15 | - margin: 12, | |
16 | -}; | |
17 | -function FieldGroup({ id, label, help, ...props }) { | |
18 | - return ( | |
19 | - <FormGroup controlId={id}> | |
20 | - <ControlLabel>{label}</ControlLabel> | |
21 | - <FormControl {...props} /> | |
22 | - {help && <HelpBlock>{help}</HelpBlock>} | |
23 | - </FormGroup> | |
24 | - ); | |
25 | -} | |
26 | -export class UploadCsvStaff extends Component { | |
27 | - constructor(props) { | |
28 | - super(props); | |
29 | - this.state = { | |
30 | - show: false | |
31 | - }; | |
32 | - this.showModal = this.showModal.bind(this); | |
33 | - this.hideModal = this.hideModal.bind(this); | |
34 | - this.onUpdate = this.onUpdate.bind(this); | |
35 | - }; | |
36 | - | |
37 | - showModal() { | |
38 | - this.setState({show: true}); | |
39 | - } | |
40 | - | |
41 | - hideModal() { | |
42 | - this.setState({show: false}); | |
43 | - } | |
44 | - onUpdate(key, value) { | |
45 | - this.setState({[key]: value}); | |
46 | - }; | |
47 | - uploadStaffCsv(e){ | |
48 | - e.preventDefault(); | |
49 | - e.persist(); | |
50 | - var file = $('input[type="file"]').prop("files")[0]; | |
51 | - Papa.parse(file, { | |
52 | - header: true, | |
53 | - complete: function(csvData) { | |
54 | - console.log("csvData"); | |
55 | - console.log(csvData); | |
56 | - if(csvData){ | |
57 | - Meteor.call('staff.uploadCsv', csvData, function (error, result) { | |
58 | - console.log("error"); | |
59 | - console.log(error); | |
60 | - console.log("result"); | |
61 | - console.log(result); | |
62 | - }) | |
63 | - } | |
64 | - } | |
65 | - }); | |
66 | - } | |
67 | - | |
68 | - render() { | |
69 | - console.log(this.props); | |
70 | - return ( | |
71 | - <ButtonToolbar> | |
72 | - <Button bsStyle="primary" onClick={this.showModal}> | |
73 | - Upload CSV | |
74 | - </Button> | |
75 | - <Modal | |
76 | - {...this.props} | |
77 | - show={this.state.show} | |
78 | - onHide={this.hideModal} | |
79 | - dialogClassName="custom-modal" | |
80 | - > | |
81 | - <Modal.Header closeButton> | |
82 | - <Modal.Title id="contained-modal-title-lg">Upload Csv</Modal.Title> | |
83 | - </Modal.Header> | |
84 | - <Modal.Body> | |
85 | - <form onSubmit={ (e) => this.uploadStaffCsv(e) } > | |
86 | - <FieldGroup | |
87 | - id="formControlsFile" | |
88 | - type="file" | |
89 | - label="File" | |
90 | - help="Upload you CSV here." | |
91 | - /> | |
92 | - <Button type="submit" bsStyle="default">Upload File</Button> | |
93 | - </form> | |
94 | - </Modal.Body> | |
95 | - <Modal.Footer> | |
96 | - <Button onClick={this.hideModal}>Close</Button> | |
97 | - </Modal.Footer> | |
98 | - </Modal> | |
99 | - </ButtonToolbar> | |
100 | - ); | |
101 | - }; | |
102 | - | |
103 | -}; |
imports/client/views/org/admin/settings/staff/add/AddStaffFormContainer.js
... | ... | @@ -1,123 +0,0 @@ |
1 | -import React, { Component } from 'react' | |
2 | -import StaffForm from './StaffForm' | |
3 | -import Form from '/imports/client/views/core/Form' | |
4 | -import Validator from '/imports/client/views/core/Validator' | |
5 | -import { isRequired, isValidEmail } from '/imports/client/views/core/validations' | |
6 | - | |
7 | -export class AddStaffFormContainer extends Component { | |
8 | - | |
9 | - constructor(props) { | |
10 | - super(props) | |
11 | - this.state = { currentStep: 0 } | |
12 | - this.handleNextClick = this.handleNextClick.bind(this) | |
13 | - this.handleBackClick = this.handleBackClick.bind(this) | |
14 | - this.handleSubmit = this.handleSubmit.bind(this) | |
15 | - } | |
16 | - | |
17 | - handleNextClick() { | |
18 | - console.log("clicked"); | |
19 | - this.form.handleSubmit() | |
20 | - if (this.validator.getErrors() && Object.keys(this.validator.getErrors()).length > 0) return | |
21 | - console.log("after submit"); | |
22 | - this.setState({ currentStep: this.state.currentStep + 1 }) | |
23 | - this.form.resetSubmitted() | |
24 | - } | |
25 | - | |
26 | - handleBackClick() { | |
27 | - this.setState({ currentStep: this.state.currentStep + -1 }) | |
28 | - } | |
29 | - | |
30 | - handleSubmit() { | |
31 | - if (this.state.currentStep === 3) { | |
32 | - Meteor.call('staff.addNew', this.form.state.values, (error, result) => { | |
33 | - console.log(error); | |
34 | - console.log(result); | |
35 | - if(!error){ | |
36 | - this.props.modalState(); | |
37 | - } | |
38 | - }); | |
39 | - } | |
40 | - } | |
41 | - | |
42 | - //render callback | |
43 | - render() { | |
44 | - return ( | |
45 | - <Form | |
46 | - onSubmit={this.handleSubmit} | |
47 | - ref={form => this.form = form} | |
48 | - initialValues={{ | |
49 | - employeeId: '12345', | |
50 | - firstName: 'Test', | |
51 | - lastName: 'Last', | |
52 | - | |
53 | - martialStatus: 'single', | |
54 | - gender: 'male', | |
55 | - dob: '07/03/1993', | |
56 | - | |
57 | - email: 'deepak125.dk+400@gmail.com', | |
58 | - phone: '9876543210', | |
59 | - address: '123', | |
60 | - | |
61 | - teaching: "yes", | |
62 | - type: 'permanent', | |
63 | - doj: '07/03/2016', | |
64 | - | |
65 | - qualifaication: 'Phd', | |
66 | - specialization: 'Maths', | |
67 | - university: 'Pune University', | |
68 | - | |
69 | - degreeFrom: '07/03/2009', | |
70 | - degreeEnded: '07/03/2013', | |
71 | - }} | |
72 | - > | |
73 | - {({ values, setValue, getValue, isSubmitted, isDirty }) => ( | |
74 | - <Validator | |
75 | - values={values} | |
76 | - ref={validator => this.validator = validator} | |
77 | - validations={{ | |
78 | - employeeId: [(value) => isRequired('Admission id', value)], | |
79 | - firstName: [(value) => isRequired('First name', value)], | |
80 | - lastName: [(value) => isRequired('Last name', value)], | |
81 | - | |
82 | - gender: [(value) => isRequired('Gender', value)], | |
83 | - martialStatus: [(value) => isRequired('martialStatus', value)], | |
84 | - dob: [(value) => isRequired('Date of birth', value)], | |
85 | - | |
86 | - teaching: [(value) => this.state.currentStep === 1 && isRequired('teaching', value)], | |
87 | - type: [(value) => this.state.currentStep === 1 && isRequired('type', value)], | |
88 | - doj: [(value) => this.state.currentStep === 1 && isRequired('doj', value)], | |
89 | - desgnation: [(value) => this.state.currentStep === 1 && isRequired('desgnation', value)], | |
90 | - | |
91 | - qualifaication: [(value) => this.state.currentStep === 2 && isRequired('qualifaication', value)], | |
92 | - specialization: [(value) => this.state.currentStep === 2 && isRequired('specialization', value)], | |
93 | - university: [(value) => this.state.currentStep === 2 && isRequired('university', value)], | |
94 | - | |
95 | - degreeFrom: [(value) => this.state.currentStep === 2 && isRequired('degreeFrom', value)], | |
96 | - degreeEnded: [(value) => this.state.currentStep === 2 && isRequired('degreeEnded', value)], | |
97 | - | |
98 | - email: [(value) => this.state.currentStep === 3 && isRequired('Email', value), (value) => this.state.currentStep === 1 && isValidEmail(value)], | |
99 | - phone: [(value) => this.state.currentStep === 3 && isRequired('Phone', value)], | |
100 | - address: [(value) => this.state.currentStep === 3 && isRequired('Address', value)], | |
101 | - city: [(value) => this.state.currentStep === 3 && isRequired('City', value)], | |
102 | - state: [(value) => this.state.currentStep === 3 && isRequired('State', value)], | |
103 | - | |
104 | - }} | |
105 | - > | |
106 | - {({ errors }) => ( | |
107 | - <StaffForm | |
108 | - isDirty={isDirty} | |
109 | - setValue={setValue} | |
110 | - getValue={getValue} | |
111 | - isSubmitted={isSubmitted} | |
112 | - errors={errors} | |
113 | - onNextClick={this.handleNextClick} | |
114 | - onBackClick={this.handleBackClick} | |
115 | - currentStep={this.state.currentStep} | |
116 | - /> | |
117 | - )} | |
118 | - </Validator> | |
119 | - )} | |
120 | - </Form> | |
121 | - ) | |
122 | - } | |
123 | -} |
imports/client/views/org/admin/settings/staff/add/StaffForm.js
... | ... | @@ -1,417 +0,0 @@ |
1 | -import React, { PropTypes } from 'react' | |
2 | -import { | |
3 | - Row, | |
4 | - Col, | |
5 | - FormGroup, | |
6 | - FormControl, | |
7 | - Button | |
8 | -} from 'react-bootstrap' | |
9 | -import DatePicker from '/imports/client/views/core/DatePicker' | |
10 | -import Label from '/imports/client/views/core/Label' | |
11 | -import Stepper from '/imports/client/views/core/Stepper' | |
12 | -import ErrorLabel from '/imports/client/views/core/ErrorLabel' | |
13 | - | |
14 | -const StaffForm = props => ( | |
15 | - <div className="stepy-validation"> | |
16 | - <Stepper | |
17 | - steps={[ | |
18 | - { | |
19 | - label: 'Personal data', | |
20 | - active: props.currentStep === 0, | |
21 | - }, | |
22 | - { | |
23 | - label: 'Additional Info', | |
24 | - active: props.currentStep === 1, | |
25 | - }, | |
26 | - { | |
27 | - label: 'Professional Info', | |
28 | - active: props.currentStep === 2, | |
29 | - }, | |
30 | - { | |
31 | - label: 'Contact Info', | |
32 | - active: props.currentStep === 3, | |
33 | - }, | |
34 | - ]} | |
35 | - /> | |
36 | - {props.currentStep === 0 && ( | |
37 | - <fieldset title="1"> | |
38 | - <legend className="text-semibold">Personal data</legend> | |
39 | - <Row> | |
40 | - <Col xs={12} sm={4}> | |
41 | - <FormGroup controlId="employeeId"> | |
42 | - <Label required>Employee ID</Label> | |
43 | - <FormControl | |
44 | - type="text" | |
45 | - value={props.getValue('employeeId')} | |
46 | - placeholder="employee Id" | |
47 | - onChange={e => props.setValue('employeeId', e.target.value)} | |
48 | - /> | |
49 | - {props.isSubmitted() && props.errors && props.errors.employeeId && ( | |
50 | - <ErrorLabel> {props.errors.employeeId} </ErrorLabel> | |
51 | - )} | |
52 | - </FormGroup> | |
53 | - </Col> | |
54 | - | |
55 | - <Col xs={12} sm={4}> | |
56 | - <FormGroup controlId="firstName"> | |
57 | - <Label required>First Name</Label> | |
58 | - <FormControl | |
59 | - type="text" | |
60 | - value={props.getValue('firstName')} | |
61 | - placeholder="First Name" | |
62 | - onChange={e => props.setValue('firstName', e.target.value)} | |
63 | - /> | |
64 | - {props.isSubmitted() && props.errors && props.errors.firstName && ( | |
65 | - <ErrorLabel> {props.errors.firstName} </ErrorLabel> | |
66 | - )} | |
67 | - </FormGroup> | |
68 | - </Col> | |
69 | - | |
70 | - <Col xs={12} sm={4}> | |
71 | - <FormGroup controlId="lastName"> | |
72 | - <Label required>Last Name</Label> | |
73 | - <FormControl | |
74 | - type="text" | |
75 | - value={props.getValue('lastName')} | |
76 | - placeholder="Last Name" | |
77 | - onChange={e => props.setValue('lastName', e.target.value)} | |
78 | - /> | |
79 | - {props.isSubmitted() && props.errors && props.errors.lastName && ( | |
80 | - <ErrorLabel> {props.errors.lastName} </ErrorLabel> | |
81 | - )} | |
82 | - </FormGroup> | |
83 | - </Col> | |
84 | - </Row> | |
85 | - <Row> | |
86 | - <Col xs={12} sm={4}> | |
87 | - <FormGroup controlId="formControlsSelect"> | |
88 | - <Label>Gender</Label> | |
89 | - <FormControl componentClass="select" | |
90 | - placeholder="select" | |
91 | - value={props.getValue('gender')} | |
92 | - onChange={e => props.setValue('gender', e.target.value)} | |
93 | - > | |
94 | - <option value="male">Male</option> | |
95 | - <option value="female">Female</option> | |
96 | - </FormControl> | |
97 | - {props.isSubmitted() && props.errors && props.errors.gender && ( | |
98 | - <ErrorLabel> {props.errors.gender} </ErrorLabel> | |
99 | - )} | |
100 | - </FormGroup> | |
101 | - </Col> | |
102 | - | |
103 | - <Col xs={12} sm={4}> | |
104 | - <FormGroup controlId="formControlsSelect"> | |
105 | - <Label>martialStatus</Label> | |
106 | - <FormControl componentClass="select" | |
107 | - placeholder="select" | |
108 | - value={props.getValue('martialStatus')} | |
109 | - onChange={e => props.setValue('martialStatus', e.target.value)} | |
110 | - > | |
111 | - <option value="single">Single</option> | |
112 | - <option value="married">Married</option> | |
113 | - <option value="divorced">Divorced</option> | |
114 | - </FormControl> | |
115 | - {props.isSubmitted() && props.errors && props.errors.martialStatus && ( | |
116 | - <ErrorLabel> {props.errors.martialStatus} </ErrorLabel> | |
117 | - )} | |
118 | - </FormGroup> | |
119 | - </Col> | |
120 | - | |
121 | - <Col xs={12} sm={4}> | |
122 | - <FormGroup> | |
123 | - <Label required>Date of birth</Label> | |
124 | - <DatePicker | |
125 | - id="dob" | |
126 | - setValue = {props.setValue} | |
127 | - value={props.getValue('dob')} | |
128 | - onChange={(e) => { | |
129 | - props.setValue('dob', e.target.value) | |
130 | - }} | |
131 | - /> | |
132 | - {props.isSubmitted() && props.errors && props.errors.dob && ( | |
133 | - <ErrorLabel> {props.errors.dob} </ErrorLabel> | |
134 | - )} | |
135 | - </FormGroup> | |
136 | - </Col> | |
137 | - </Row> | |
138 | - </fieldset> | |
139 | - )} | |
140 | - {props.currentStep === 1 && ( | |
141 | - <fieldset title="Academic"> | |
142 | - <legend className="text-semibold">Additional Info</legend> | |
143 | - <Row> | |
144 | - <Col xs={12} sm={4}> | |
145 | - <FormGroup controlId="desgnation"> | |
146 | - <Label required>Desgnation</Label> | |
147 | - <FormControl | |
148 | - type="text" | |
149 | - value={props.getValue('desgnation')} | |
150 | - placeholder="Professor" | |
151 | - onChange={e => props.setValue('desgnation', e.target.value)} | |
152 | - /> | |
153 | - {props.isSubmitted() && props.errors && props.errors.desgnation && ( | |
154 | - <ErrorLabel> {props.errors.desgnation} </ErrorLabel> | |
155 | - )} | |
156 | - </FormGroup> | |
157 | - </Col> | |
158 | - <Col xs={12} sm={4}> | |
159 | - <FormGroup controlId="formControlsSelect"> | |
160 | - <Label>Teaching Staff?</Label> | |
161 | - <FormControl componentClass="select" | |
162 | - placeholder="select" | |
163 | - value={props.getValue('teaching')} | |
164 | - onChange={e => props.setValue('teaching', e.target.value)} | |
165 | - > | |
166 | - <option value="yes">Yes</option> | |
167 | - <option value="no">No</option> | |
168 | - </FormControl> | |
169 | - {props.isSubmitted() && props.errors && props.errors.teaching && ( | |
170 | - <ErrorLabel> {props.errors.teaching} </ErrorLabel> | |
171 | - )} | |
172 | - </FormGroup> | |
173 | - </Col> | |
174 | - <Col xs={12} sm={4}> | |
175 | - <FormGroup controlId="formControlsSelect"> | |
176 | - <Label>Type</Label> | |
177 | - <FormControl componentClass="select" | |
178 | - placeholder="select" | |
179 | - value={props.getValue('type')} | |
180 | - onChange={e => props.setValue('type', e.target.value)} | |
181 | - > | |
182 | - <option value="permanent">Permanent</option> | |
183 | - <option value="temporary">Temporary</option> | |
184 | - </FormControl> | |
185 | - {props.isSubmitted() && props.errors && props.errors.type && ( | |
186 | - <ErrorLabel> {props.errors.type} </ErrorLabel> | |
187 | - )} | |
188 | - </FormGroup> | |
189 | - </Col> | |
190 | - </Row> | |
191 | - <Row> | |
192 | - <Col xs={12} sm={4}> | |
193 | - <FormGroup> | |
194 | - <Label required>Date of Joining</Label> | |
195 | - <DatePicker | |
196 | - id="doj" | |
197 | - setValue = {props.setValue} | |
198 | - value={props.getValue('doj')} | |
199 | - onChange={(e) => { | |
200 | - props.setValue('doj', e.target.value) | |
201 | - }} | |
202 | - /> | |
203 | - {props.isSubmitted() && props.errors && props.errors.doj && ( | |
204 | - <ErrorLabel> {props.errors.doj} </ErrorLabel> | |
205 | - )} | |
206 | - </FormGroup> | |
207 | - </Col> | |
208 | - </Row> | |
209 | - </fieldset> | |
210 | - )} | |
211 | - {props.currentStep === 2 && ( | |
212 | - <fieldset title="Professional Info"> | |
213 | - <legend className="text-semibold">Professional Info</legend> | |
214 | - <Row> | |
215 | - <Col xs={12} sm={4}> | |
216 | - <FormGroup controlId="qualifaication"> | |
217 | - <Label required>Qualifaication</Label> | |
218 | - <FormControl | |
219 | - type="text" | |
220 | - value={props.getValue('qualifaication')} | |
221 | - placeholder="Ex: Phd" | |
222 | - onChange={e => props.setValue('qualifaication', e.target.value)} | |
223 | - /> | |
224 | - {props.isSubmitted() && props.errors && props.errors.qualifaication && ( | |
225 | - <ErrorLabel> {props.errors.qualifaication} </ErrorLabel> | |
226 | - )} | |
227 | - </FormGroup> | |
228 | - </Col> | |
229 | - <Col xs={12} sm={4}> | |
230 | - <FormGroup controlId="specialization"> | |
231 | - <Label required>Specialization</Label> | |
232 | - <FormControl | |
233 | - type="text" | |
234 | - value={props.getValue('specialization')} | |
235 | - placeholder="Ex: Maths" | |
236 | - onChange={e => props.setValue('specialization', e.target.value)} | |
237 | - /> | |
238 | - {props.isSubmitted() && props.errors && props.errors.specialization && ( | |
239 | - <ErrorLabel> {props.errors.specialization} </ErrorLabel> | |
240 | - )} | |
241 | - </FormGroup> | |
242 | - </Col> | |
243 | - <Col xs={12} sm={4}> | |
244 | - <FormGroup controlId="university"> | |
245 | - <Label required>University</Label> | |
246 | - <FormControl | |
247 | - type="text" | |
248 | - value={props.getValue('university')} | |
249 | - placeholder="Ex: Pune University" | |
250 | - onChange={e => props.setValue('university', e.target.value)} | |
251 | - /> | |
252 | - {props.isSubmitted() && props.errors && props.errors.university && ( | |
253 | - <ErrorLabel> {props.errors.university} </ErrorLabel> | |
254 | - )} | |
255 | - </FormGroup> | |
256 | - </Col> | |
257 | - </Row> | |
258 | - <Row> | |
259 | - <Col xs={12} sm={4}> | |
260 | - <FormGroup> | |
261 | - <Label required>Latest Degree started At</Label> | |
262 | - <DatePicker | |
263 | - id="degreeFrom" | |
264 | - setValue = {props.setValue} | |
265 | - value={props.getValue('degreeFrom')} | |
266 | - onChange={(e) => { | |
267 | - props.setValue('degreeFrom', e.target.value) | |
268 | - }} | |
269 | - /> | |
270 | - {props.isSubmitted() && props.errors && props.errors.degreeFrom && ( | |
271 | - <ErrorLabel> {props.errors.degreeFrom} </ErrorLabel> | |
272 | - )} | |
273 | - </FormGroup> | |
274 | - </Col> | |
275 | - <Col xs={12} sm={4}> | |
276 | - <FormGroup> | |
277 | - <Label required>Latest Degree ended At</Label> | |
278 | - <DatePicker | |
279 | - id="degreeEnded" | |
280 | - setValue = {props.setValue} | |
281 | - value={props.getValue('degreeEnded')} | |
282 | - onChange={(e) => { | |
283 | - props.setValue('degreeEnded', e.target.value) | |
284 | - }} | |
285 | - /> | |
286 | - {props.isSubmitted() && props.errors && props.errors.degreeEnded && ( | |
287 | - <ErrorLabel> {props.errors.degreeEnded} </ErrorLabel> | |
288 | - )} | |
289 | - </FormGroup> | |
290 | - </Col> | |
291 | - </Row> | |
292 | - </fieldset> | |
293 | - )} | |
294 | - {props.currentStep === 3 && ( | |
295 | - <fieldset title="Academic"> | |
296 | - <legend className="text-semibold">Additional Info</legend> | |
297 | - <Row> | |
298 | - <Col xs={12} sm={4}> | |
299 | - <FormGroup controlId="email"> | |
300 | - <Label required>Email</Label> | |
301 | - <FormControl | |
302 | - type="email" | |
303 | - value={props.getValue('email')} | |
304 | - placeholder="Email" | |
305 | - onChange={e => props.setValue('email', e.target.value)} | |
306 | - /> | |
307 | - {props.isSubmitted() && props.errors && props.errors.email && ( | |
308 | - <ErrorLabel> {props.errors.email} </ErrorLabel> | |
309 | - )} | |
310 | - </FormGroup> | |
311 | - </Col> | |
312 | - <Col xs={12} sm={4}> | |
313 | - <FormGroup controlId="phone"> | |
314 | - <Label required>Phone</Label> | |
315 | - <FormControl | |
316 | - type="text" | |
317 | - value={props.getValue('phone')} | |
318 | - placeholder="Martial Status" | |
319 | - onChange={e => props.setValue('phone', e.target.value)} | |
320 | - /> | |
321 | - {props.isSubmitted() && props.errors && props.errors.phone && ( | |
322 | - <ErrorLabel> {props.errors.phone} </ErrorLabel> | |
323 | - )} | |
324 | - </FormGroup> | |
325 | - </Col> | |
326 | - </Row> | |
327 | - <Row> | |
328 | - <Col xs={12} sm={4}> | |
329 | - <FormGroup controlId="address"> | |
330 | - <Label required>Address</Label> | |
331 | - <FormControl | |
332 | - type="text" | |
333 | - value={props.getValue('address')} | |
334 | - placeholder="#876, Street, town" | |
335 | - onChange={e => props.setValue('address', e.target.value)} | |
336 | - /> | |
337 | - {props.isSubmitted() && props.errors && props.errors.address && ( | |
338 | - <ErrorLabel> {props.errors.address} </ErrorLabel> | |
339 | - )} | |
340 | - </FormGroup> | |
341 | - </Col> | |
342 | - <Col xs={12} sm={4}> | |
343 | - <FormGroup controlId="city"> | |
344 | - <Label required>City</Label> | |
345 | - <FormControl | |
346 | - type="text" | |
347 | - value={props.getValue('city')} | |
348 | - placeholder="Chennai" | |
349 | - onChange={e => props.setValue('city', e.target.value)} | |
350 | - /> | |
351 | - {props.isSubmitted() && props.errors && props.errors.city && ( | |
352 | - <ErrorLabel> {props.errors.city} </ErrorLabel> | |
353 | - )} | |
354 | - </FormGroup> | |
355 | - </Col> | |
356 | - <Col xs={12} sm={4}> | |
357 | - <FormGroup controlId="state"> | |
358 | - <Label required>State</Label> | |
359 | - <FormControl | |
360 | - type="text" | |
361 | - value={props.getValue('state')} | |
362 | - placeholder="Tamilnadu" | |
363 | - onChange={e => props.setValue('state', e.target.value)} | |
364 | - /> | |
365 | - {props.isSubmitted() && props.errors && props.errors.state && ( | |
366 | - <ErrorLabel> {props.errors.state} </ErrorLabel> | |
367 | - )} | |
368 | - </FormGroup> | |
369 | - </Col> | |
370 | - </Row> | |
371 | - </fieldset> | |
372 | - )} | |
373 | - <div style={{ textAlign: 'left' }}> | |
374 | - {props.currentStep > 0 && ( | |
375 | - <div style={{ display: 'inline-block', marginRight: 10 }}> | |
376 | - <Button onClick={props.onBackClick}> | |
377 | - <i className="icon-arrow-left13 position-left"></i> | |
378 | - BACK | |
379 | - </Button> | |
380 | - | |
381 | - </div> | |
382 | - )} | |
383 | - {props.currentStep < 3 && ( | |
384 | - <div style={{ display: 'inline-block' }}> | |
385 | - <Button | |
386 | - bsStyle="primary" | |
387 | - onClick={props.onNextClick} | |
388 | - > | |
389 | - NEXT | |
390 | - <i className="icon-arrow-right14 position-right" /> | |
391 | - </Button> | |
392 | - </div> | |
393 | - )} | |
394 | - {props.currentStep === 3 && ( | |
395 | - <div style={{ display: 'inline-block' }}> | |
396 | - <Button | |
397 | - bsStyle="primary" | |
398 | - onClick={props.onNextClick} | |
399 | - > | |
400 | - SAVE | |
401 | - <i className="fa fa-check" /> | |
402 | - </Button> | |
403 | - </div> | |
404 | - )} | |
405 | - </div> | |
406 | - </div> | |
407 | -) | |
408 | - | |
409 | -StaffForm.propTypes = { | |
410 | - currentStep: PropTypes.number.isRequired, | |
411 | - onNextClick: PropTypes.func.isRequired, | |
412 | - onBackClick: PropTypes.func.isRequired, | |
413 | - setValue: PropTypes.func.isRequired, | |
414 | - getValue: PropTypes.func.isRequired, | |
415 | -} | |
416 | - | |
417 | -export default StaffForm |
imports/client/views/org/admin/settings/staff/add/addStaff.js
... | ... | @@ -1,66 +0,0 @@ |
1 | -import _ from 'lodash'; | |
2 | -import { Meteor } from 'meteor/meteor'; | |
3 | -import React, { Component } from 'react'; | |
4 | -import { Link,browserHistory } from 'react-router'; | |
5 | -import { FormGroup,Panel,Table, | |
6 | - ButtonToolbar,Modal, | |
7 | - FormControl,Glyphicon,Button } from 'react-bootstrap'; | |
8 | -import { AddStaffFormContainer } from './AddStaffFormContainer'; | |
9 | - | |
10 | -const style = { | |
11 | - margin: 12, | |
12 | -}; | |
13 | -export class AddStaff extends Component { | |
14 | - constructor(props) { | |
15 | - super(props); | |
16 | - this.state = { | |
17 | - show: false | |
18 | - }; | |
19 | - this.showModal = this.showModal.bind(this); | |
20 | - this.hideModal = this.hideModal.bind(this); | |
21 | - this.onUpdate = this.onUpdate.bind(this); | |
22 | - }; | |
23 | - | |
24 | - showModal() { | |
25 | - this.setState({show: true}); | |
26 | - } | |
27 | - | |
28 | - hideModal() { | |
29 | - this.setState({show: false}); | |
30 | - } | |
31 | - onUpdate(key, value) { | |
32 | - this.setState({[key]: value}); | |
33 | - }; | |
34 | - | |
35 | - render() { | |
36 | - return ( | |
37 | - <ButtonToolbar> | |
38 | - <Button bsStyle="primary" onClick={this.showModal}> | |
39 | - Add Staff | |
40 | - </Button> | |
41 | - <Modal | |
42 | - {...this.props} | |
43 | - show={this.state.show} | |
44 | - onHide={this.hideModal} | |
45 | - dialogClassName="custom-modal" | |
46 | - bsSize="large" | |
47 | - > | |
48 | - <Modal.Header closeButton> | |
49 | - <Modal.Title id="contained-modal-title-lg">Add New Staff</Modal.Title> | |
50 | - </Modal.Header> | |
51 | - <Modal.Body> | |
52 | - <AddStaffFormContainer | |
53 | - modalState = {this.hideModal} | |
54 | - /> | |
55 | - </Modal.Body> | |
56 | - {/* | |
57 | - <Modal.Footer> | |
58 | - <Button onClick={this.hideModal}>Close</Button> | |
59 | - </Modal.Footer> | |
60 | - */} | |
61 | - </Modal> | |
62 | - </ButtonToolbar> | |
63 | - ); | |
64 | - }; | |
65 | - | |
66 | -}; |
imports/client/views/org/admin/settings/staff/index.js
... | ... | @@ -1,70 +0,0 @@ |
1 | -// import { InviteSignupController } from '/imports/client/views/invite/signup/index' | |
2 | -import _ from 'lodash'; | |
3 | -import { | |
4 | - composeWithTracker, | |
5 | - compose, | |
6 | - composeAll | |
7 | - } from 'react-komposer'; | |
8 | -import { Loading } from '/imports/client/components/Loading'; | |
9 | - | |
10 | -import { Orgs } from '/imports/collections/orgs/index'; | |
11 | -import { Users } from '/imports/collections/users/index'; | |
12 | -import { Staffs } from '/imports/collections/staff/index'; | |
13 | -import { StaffView } from './StaffView'; | |
14 | - | |
15 | -const meteorTick = (props, onData) => { | |
16 | - Shelf.layout.set({ | |
17 | - bulb: 'SETTINGS', | |
18 | - subbulb: 'USERS', | |
19 | - view: 'STAFF' | |
20 | - }); | |
21 | - const handles = [ | |
22 | - Meteor.subscribe('users.current'), | |
23 | - Meteor.subscribe('orgs.current'), | |
24 | - Meteor.subscribe('users.forMyOrg'), | |
25 | - Meteor.subscribe('staff.forMyOrg'), | |
26 | - ]; | |
27 | - | |
28 | - if(_.every(handles, (handle) => (handle.ready()) )) { | |
29 | - const user = Users.current(); | |
30 | - const org = Orgs.current(); | |
31 | - staff = Users.find({"role":"STAFF"}).fetch() ? Users.find({"role":"STAFF"}).fetch() : ""; | |
32 | - console.log(Users.find({"role":"STAFF"}).fetch()); | |
33 | - staffData = Staffs.find().fetch() ? Staffs.find().fetch() : ""; | |
34 | - console.log("staffData"); | |
35 | - console.log(staffData); | |
36 | - for(var i=0; i< staff.length; i++){ | |
37 | - for(var j=0; j< staffData.length; j++){ | |
38 | - if(staff[i]._id == staffData[j].userId){ | |
39 | - staff[i].type = staffData[j].type; | |
40 | - staff[i].employeeId = staffData[j].employeeId; | |
41 | - staff[i].dob = staffData[j].dob; | |
42 | - } | |
43 | - } | |
44 | - } | |
45 | - onData(null, { | |
46 | - data: { | |
47 | - user: user, | |
48 | - org: org, | |
49 | - staff: staff | |
50 | - }, | |
51 | - }); | |
52 | - } | |
53 | - | |
54 | - return () => { | |
55 | - _.each(handles, (handle) => handle.stop() ); | |
56 | - }; | |
57 | -}; | |
58 | - | |
59 | - | |
60 | -const reduxTick = (props, onData) => { | |
61 | - onData(null, { | |
62 | - data: {} | |
63 | - }); | |
64 | -}; | |
65 | - | |
66 | - | |
67 | -export const staffViewController = composeAll( | |
68 | - composeWithTracker(meteorTick, Loading), | |
69 | - compose(reduxTick, Loading), | |
70 | -)(StaffView); |
imports/client/views/org/admin/settings/staff/view/StaffRow.js
... | ... | @@ -1,56 +0,0 @@ |
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, | |
7 | - FormControl,Glyphicon,Button } from 'react-bootstrap'; | |
8 | - | |
9 | - | |
10 | -export class StaffRow extends Component { | |
11 | - | |
12 | - constructor(props) { | |
13 | - super(props); | |
14 | - this.state = { | |
15 | - | |
16 | - }; | |
17 | - this.onUpdate = this.onUpdate.bind(this); | |
18 | - }; | |
19 | - | |
20 | - onUpdate(key, value) { | |
21 | - this.setState({[key]: value}); | |
22 | - }; | |
23 | - | |
24 | - render() { | |
25 | - const {staff} = this.props; | |
26 | - if(staff.firstName){ | |
27 | - return ( | |
28 | - <tr> | |
29 | - <td>{staff.firstName}</td> | |
30 | - <td>{staff.lastName}</td> | |
31 | - <td>{staff.type}</td> | |
32 | - <td>{staff.dob? moment(staff.dob).format("LL") : <span></span>}</td> | |
33 | - <td><span className="label label-success">Active</span></td> | |
34 | - <td className="text-center"> | |
35 | - <ul className="icons-list"> | |
36 | - <li className="dropdown"> | |
37 | - <a href="#" className="dropdown-toggle" data-toggle="dropdown"> | |
38 | - <i className="icon-menu9"></i> | |
39 | - </a> | |
40 | - <ul className="dropdown-menu dropdown-menu-right"> | |
41 | - <li><a href="#"><i className="icon-file-pdf"></i> Export to .pdf</a></li> | |
42 | - <li><a href="#"><i className="icon-file-excel"></i> Export to .csv</a></li> | |
43 | - <li><a href="#"><i className="icon-file-word"></i> Export to .doc</a></li> | |
44 | - </ul> | |
45 | - </li> | |
46 | - </ul> | |
47 | - </td> | |
48 | - </tr> | |
49 | - ); | |
50 | - }else { | |
51 | - return null; | |
52 | - } | |
53 | - | |
54 | - }; | |
55 | - | |
56 | -}; |
imports/client/views/org/admin/settings/staff/view/StaffTable.js
... | ... | @@ -1,85 +0,0 @@ |
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, | |
8 | - FormControl,Glyphicon,Button } from 'react-bootstrap'; | |
9 | -import {moment} from 'meteor/momentjs:moment' | |
10 | -import {StaffRow} from './StaffRow' | |
11 | -import {BootstrapTable, TableHeaderColumn}from 'react-bootstrap-table'; | |
12 | -const options = { | |
13 | - page: 0, // which page you want to show as default | |
14 | - sizePerPageList: [ { | |
15 | - text: '5', value: 5 | |
16 | - }, { | |
17 | - text: '10', value: 10 | |
18 | - }], // you can change the dropdown list for size per page | |
19 | - sizePerPage: 5, // which size per page you want to locate as default | |
20 | - pageStartIndex: 0, // where to start counting the pages | |
21 | - paginationSize: 3, // the pagination bar size. | |
22 | - prePage: 'Prev', // Previous page button text | |
23 | - nextPage: 'Next', // Next page button text | |
24 | - firstPage: 'First', // First page button text | |
25 | - lastPage: 'Last', // Last page button text | |
26 | - paginationShowsTotal: false, // Accept bool or function | |
27 | - paginationPosition: 'bottom' // default is bottom, top and both is all available | |
28 | - // hideSizePerPage: true > You can hide the dropdown for sizePerPage | |
29 | - // alwaysShowAllBtns: true // Always show next and previous button | |
30 | - // withFirstAndLast: false > Hide the going to First and Last page button | |
31 | - }; | |
32 | - | |
33 | -function dateFormatter(cell, row) { | |
34 | - console.log("cell"); | |
35 | - console.log(cell); | |
36 | - if(cell){ | |
37 | - cell = new Date(cell); | |
38 | - console.log(cell); | |
39 | - return `${('0' + cell.getDate()).slice(-2)}/${('0' + (cell.getMonth() + 1)).slice(-2)}/${cell.getFullYear()}`; | |
40 | - } | |
41 | -} | |
42 | - | |
43 | -export class StaffTable extends Component { | |
44 | - | |
45 | - constructor(props) { | |
46 | - super(props); | |
47 | - this.state = { | |
48 | - show: false, | |
49 | - panleOpen: true, | |
50 | - }; | |
51 | - this.onUpdate = this.onUpdate.bind(this); | |
52 | - }; | |
53 | - onUpdate(key, value) { | |
54 | - this.setState({[key]: value}); | |
55 | - }; | |
56 | - togglePanel(){ | |
57 | - this.setState({panleOpen: !this.state.panleOpen}); | |
58 | - } | |
59 | - render() { | |
60 | - console.log("this.props.staff"); | |
61 | - console.log(this.props.staff); | |
62 | - return ( | |
63 | - <div className="panel panel-flat"> | |
64 | - <div className="panel-heading"> | |
65 | - <h5 className="panel-title">Teachers Details</h5> | |
66 | - <div className="heading-elements"> | |
67 | - <ul className="icons-list"> | |
68 | - <li onClick={this.togglePanel}><a data-action="collapse" className={this.state.panleOpen?"rotate-180":null}></a></li> | |
69 | - </ul> | |
70 | - </div> | |
71 | - </div> | |
72 | - <Panel collapsible expanded={this.state.panleOpen}> | |
73 | - <BootstrapTable data={ this.props.staff } pagination={ true } options={ options } > | |
74 | - <TableHeaderColumn dataField='employeeId' isKey={ true } dataSort={ true } filter={ { type: 'TextFilter' } }>Employee Id</TableHeaderColumn> | |
75 | - <TableHeaderColumn dataField='firstName' dataSort={ true } filter={ { type: 'TextFilter' } }>First Name</TableHeaderColumn> | |
76 | - <TableHeaderColumn dataField='lastName' dataSort={ true } filter={ { type: 'TextFilter' } }>Last Name</TableHeaderColumn> | |
77 | - <TableHeaderColumn dataField='type' dataSort={ true } filter={ { type: 'TextFilter' } }>Type</TableHeaderColumn> | |
78 | - <TableHeaderColumn dataField='dob' dataFormat={ dateFormatter } >DOB</TableHeaderColumn> | |
79 | - </BootstrapTable> | |
80 | - </Panel> | |
81 | - </div> | |
82 | - ); | |
83 | - }; | |
84 | - | |
85 | -}; |
imports/client/views/org/admin/settings/students/StudentDataView.js
... | ... | @@ -1,274 +0,0 @@ |
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, | |
8 | - FormControl,Glyphicon,Button } from 'react-bootstrap'; | |
9 | - import { AddStudentForm } from './addStudentForm'; | |
10 | - | |
11 | -export class StudentDataView extends Component { | |
12 | - | |
13 | - constructor(props) { | |
14 | - super(props); | |
15 | - this.state = { | |
16 | - show: false | |
17 | - }; | |
18 | - this.showModal = this.showModal.bind(this); | |
19 | - this.hideModal = this.hideModal.bind(this); | |
20 | - this.onUpdate = this.onUpdate.bind(this); | |
21 | - }; | |
22 | - | |
23 | - showModal() { | |
24 | - this.setState({show: true}); | |
25 | - } | |
26 | - | |
27 | - hideModal() { | |
28 | - this.setState({show: false}); | |
29 | - } | |
30 | - onUpdate(key, value) { | |
31 | - this.setState({[key]: value}); | |
32 | - }; | |
33 | - | |
34 | - render() { | |
35 | - return ( | |
36 | - <div className="content has-detached-left"> | |
37 | - | |
38 | - <div className="container-detached"> | |
39 | - <div className="content-detached"> | |
40 | - <div className="row"> | |
41 | - <div className="col-lg-3 col-md-6"> | |
42 | - <div className="panel panel-body"> | |
43 | - <div className="media"> | |
44 | - <div className="media-left"> | |
45 | - <a href="assets/images/placeholder.png" data-popup="lightbox"> | |
46 | - <img src="assets/images/download2.png" className="img-circle img-lg" alt="" /> | |
47 | - </a> | |
48 | - </div> | |
49 | - | |
50 | - <div className="media-body"> | |
51 | - <h6 className="media-heading">Students</h6> | |
52 | - <span className="text-muted">Click to view</span> | |
53 | - </div> | |
54 | - </div> | |
55 | - </div> | |
56 | - </div> | |
57 | - | |
58 | - <div className="col-lg-3 col-md-6"> | |
59 | - <div className="panel panel-body"> | |
60 | - <div className="media"> | |
61 | - <div className="media-left"> | |
62 | - <a href="assets/images/placeholder.jpg" data-popup="lightbox"> | |
63 | - <img src="assets/images/download.png" className="img-circle img-lg" alt="" /> | |
64 | - </a> | |
65 | - </div> | |
66 | - | |
67 | - <div className="media-body"> | |
68 | - <h6 className="media-heading">Teachers</h6> | |
69 | - <span className="text-muted">Click to view</span> | |
70 | - </div> | |
71 | - </div> | |
72 | - </div> | |
73 | - </div> | |
74 | - | |
75 | - <div className="col-lg-3 col-md-6"> | |
76 | - <div className="panel panel-body"> | |
77 | - <div className="media"> | |
78 | - <div className="media-left"> | |
79 | - <a href="assets/images/placeholder.jpg" data-popup="lightbox"> | |
80 | - <img src="assets/images/download3.png" className="img-circle img-lg" alt="" /> | |
81 | - </a> | |
82 | - </div> | |
83 | - | |
84 | - <div className="media-body"> | |
85 | - <h6 className="media-heading">Parents</h6> | |
86 | - <span className="text-muted">Click to view</span> | |
87 | - </div> | |
88 | - </div> | |
89 | - </div> | |
90 | - </div> | |
91 | - | |
92 | - <div className="col-lg-3 col-md-6"> | |
93 | - <div className="panel panel-body"> | |
94 | - <div className="media"> | |
95 | - <div className="media-left"> | |
96 | - <a href="assets/images/placeholder.jpg" data-popup="lightbox"> | |
97 | - <img src="assets/images/download1.png" className="img-circle img-lg" alt="" /> | |
98 | - </a> | |
99 | - </div> | |
100 | - | |
101 | - <div className="media-body"> | |
102 | - <h6 className="media-heading">Non Teaching Staff</h6> | |
103 | - <span className="text-muted">Click to view</span> | |
104 | - </div> | |
105 | - </div> | |
106 | - </div> | |
107 | - </div> | |
108 | - </div> | |
109 | - | |
110 | - <div className="panel panel-flat"> | |
111 | - <div className="panel-heading"> | |
112 | - <h5 className="panel-title">Student Details</h5> | |
113 | - <div className="heading-elements"> | |
114 | - <ul className="icons-list"> | |
115 | - <li><a data-action="collapse"></a></li> | |
116 | - <li><a data-action="reload"></a></li> | |
117 | - </ul> | |
118 | - </div> | |
119 | - </div> | |
120 | - | |
121 | - | |
122 | - <table className="table datatable-basic table-striped"> | |
123 | - <thead> | |
124 | - <tr> | |
125 | - <th>First Name</th> | |
126 | - <th>Last Name</th> | |
127 | - <th>className</th> | |
128 | - <th>DOB</th> | |
129 | - <th>Status</th> | |
130 | - <th className="text-center">Actions</th> | |
131 | - </tr> | |
132 | - </thead> | |
133 | - <tbody> | |
134 | - <tr> | |
135 | - <td>Marth</td> | |
136 | - <td><a href="#">Enright</a></td> | |
137 | - <td>VII</td> | |
138 | - <td>22 Jun 1972</td> | |
139 | - <td><span className="label label-success">Active</span></td> | |
140 | - <td className="text-center"> | |
141 | - <ul className="icons-list"> | |
142 | - <li className="dropdown"> | |
143 | - <a href="#" className="dropdown-toggle" data-toggle="dropdown"> | |
144 | - <i className="icon-menu9"></i> | |
145 | - </a> | |
146 | - | |
147 | - <ul className="dropdown-menu dropdown-menu-right"> | |
148 | - <li><a href="#"><i className="icon-file-pdf"></i> Export to .pdf</a></li> | |
149 | - <li><a href="#"><i className="icon-file-excel"></i> Export to .csv</a></li> | |
150 | - <li><a href="#"><i className="icon-file-word"></i> Export to .doc</a></li> | |
151 | - </ul> | |
152 | - </li> | |
153 | - </ul> | |
154 | - </td> | |
155 | - </tr> | |
156 | - <tr> | |
157 | - <td>Jackelyn</td> | |
158 | - <td>Weible</td> | |
159 | - <td><a href="#">XI</a></td> | |
160 | - <td>3 Oct 1981</td> | |
161 | - <td><span className="label label-default">Inactive</span></td> | |
162 | - <td className="text-center"> | |
163 | - <ul className="icons-list"> | |
164 | - <li className="dropdown"> | |
165 | - <a href="#" className="dropdown-toggle" data-toggle="dropdown"> | |
166 | - <i className="icon-menu9"></i> | |
167 | - </a> | |
168 | - | |
169 | - <ul className="dropdown-menu dropdown-menu-right"> | |
170 | - <li><a href="#"><i className="icon-file-pdf"></i> Export to .pdf</a></li> | |
171 | - <li><a href="#"><i className="icon-file-excel"></i> Export to .csv</a></li> | |
172 | - <li><a href="#"><i className="icon-file-word"></i> Export to .doc</a></li> | |
173 | - </ul> | |
174 | - </li> | |
175 | - </ul> | |
176 | - </td> | |
177 | - </tr> | |
178 | - </tbody> | |
179 | - </table> | |
180 | - </div> | |
181 | - | |
182 | - | |
183 | - <ul className="fab-menu fab-menu-fixed fab-menu-bottom-right" data-fab-toggle="click"> | |
184 | - <li> | |
185 | - <a className="fab-menu-btn btn bg-teal-400 btn-float btn-rounded btn-icon"> | |
186 | - <i className="fab-icon-open icon-plus3"></i> | |
187 | - <i className="fab-icon-close icon-cross2"></i> | |
188 | - </a> | |
189 | - | |
190 | - <ul className="fab-menu-inner"> | |
191 | - <li> | |
192 | - <div data-fab-label="Upload bulk data"> | |
193 | - <a href="#" className="btn btn-default btn-rounded btn-icon btn-float"> | |
194 | - <i className="icon-file-upload2"></i> | |
195 | - </a> | |
196 | - </div> | |
197 | - </li> | |
198 | - <li> | |
199 | - <div data-fab-label="Add Student"> | |
200 | - <a href="#" className="btn btn-default btn-rounded btn-icon btn-float"> | |
201 | - <i className=" icon-file-plus2"></i> | |
202 | - </a> | |
203 | - <span className="badge bg-primary-400">5</span> | |
204 | - </div> | |
205 | - </li> | |
206 | - </ul> | |
207 | - </li> | |
208 | - </ul> | |
209 | - | |
210 | - </div> | |
211 | - </div> | |
212 | - <div className="sidebar-detached affix-top"> | |
213 | - <div className="sidebar sidebar-default"> | |
214 | - <div className="sidebar-content"> | |
215 | - | |
216 | - <div className="sidebar-category"> | |
217 | - <div className="category-title"> | |
218 | - <span>Advanced Search</span> | |
219 | - <ul className="icons-list"> | |
220 | - <li><a href="#" data-action="collapse"></a></li> | |
221 | - </ul> | |
222 | - </div> | |
223 | - | |
224 | - <div className="category-content"> | |
225 | - <form action="#"> | |
226 | - <div className="has-feedback has-feedback-left"> | |
227 | - <input type="search" className="form-control" placeholder="First Name" /> | |
228 | - <div className="form-control-feedback"> | |
229 | - <i className="icon-search4 text-size-base text-muted"></i> | |
230 | - </div> | |
231 | - </div> | |
232 | - </form> | |
233 | - </div> | |
234 | - <div className="category-content"> | |
235 | - <form action="#"> | |
236 | - <div className="has-feedback has-feedback-left"> | |
237 | - <input type="search" className="form-control" placeholder="Last Name" /> | |
238 | - <div className="form-control-feedback"> | |
239 | - <i className="icon-search4 text-size-base text-muted"></i> | |
240 | - </div> | |
241 | - </div> | |
242 | - </form> | |
243 | - </div> | |
244 | - <div className="category-content"> | |
245 | - <form action="#"> | |
246 | - <div className="has-feedback has-feedback-left"> | |
247 | - <div className="btn-group"> | |
248 | - <button type="button" className="dropdown-toggle form-control" data-toggle="dropdown"> | |
249 | - <span data-bind="label">Select className</span> <span className="caret"></span> | |
250 | - </button> | |
251 | - <ul className="dropdown-menu" role="menu"> | |
252 | - <li><a href="#">Item 1</a></li> | |
253 | - <li><a href="#">Another item</a></li> | |
254 | - <li><a href="#">This is a longer item that will not fit properly</a></li> | |
255 | - </ul> | |
256 | - </div> | |
257 | - <div className="form-control-feedback"> | |
258 | - <i className="icon-search4 text-size-base text-muted"></i> | |
259 | - </div> | |
260 | - </div> | |
261 | - </form> | |
262 | - </div> | |
263 | - </div> | |
264 | - | |
265 | - | |
266 | - </div> | |
267 | - </div> | |
268 | - </div> | |
269 | -</div> | |
270 | - | |
271 | - ); | |
272 | - }; | |
273 | - | |
274 | -}; |
imports/client/views/org/admin/settings/students/StudentDataView0.js
... | ... | @@ -1,88 +0,0 @@ |
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, | |
8 | - FormControl,Glyphicon,Button } from 'react-bootstrap'; | |
9 | - import { AddStudentForm } from './addStudentForm'; | |
10 | - | |
11 | -export class StudentDataView extends Component { | |
12 | - | |
13 | - constructor(props) { | |
14 | - super(props); | |
15 | - this.state = { | |
16 | - show: false | |
17 | - }; | |
18 | - this.showModal = this.showModal.bind(this); | |
19 | - this.hideModal = this.hideModal.bind(this); | |
20 | - this.onUpdate = this.onUpdate.bind(this); | |
21 | - }; | |
22 | - | |
23 | - showModal() { | |
24 | - this.setState({show: true}); | |
25 | - } | |
26 | - | |
27 | - hideModal() { | |
28 | - this.setState({show: false}); | |
29 | - } | |
30 | - onUpdate(key, value) { | |
31 | - this.setState({[key]: value}); | |
32 | - }; | |
33 | - | |
34 | - render() { | |
35 | - return ( | |
36 | - <div className = "enterPane-box"> | |
37 | - <Panel header="Students Info" bsStyle="primary"> | |
38 | - <Table striped bordered condensed hover> | |
39 | - <thead> | |
40 | - <tr> | |
41 | - <th>#</th> | |
42 | - <th>First Name</th> | |
43 | - <th>Last Name</th> | |
44 | - </tr> | |
45 | - </thead> | |
46 | - <tbody> | |
47 | - { | |
48 | - this.props.data.students.map(function(student, i) | |
49 | - { | |
50 | - return( | |
51 | - <tr> | |
52 | - <td>{i+1}</td> | |
53 | - <td>{student.firstName}</td> | |
54 | - <td>{student.lastName}</td> | |
55 | - </tr> | |
56 | - ) | |
57 | - }) | |
58 | - } | |
59 | - | |
60 | - </tbody> | |
61 | - </Table> | |
62 | - <ButtonToolbar> | |
63 | - <Button bsStyle="primary" onClick={this.showModal}> | |
64 | - Add Student | |
65 | - </Button> | |
66 | - <Modal | |
67 | - {...this.props} | |
68 | - show={this.state.show} | |
69 | - onHide={this.hideModal} | |
70 | - dialogClassName="custom-modal" | |
71 | - > | |
72 | - <Modal.Header closeButton> | |
73 | - <Modal.Title id="contained-modal-title-lg">New Student</Modal.Title> | |
74 | - </Modal.Header> | |
75 | - <Modal.Body> | |
76 | - <AddStudentForm /> | |
77 | - </Modal.Body> | |
78 | - <Modal.Footer> | |
79 | - <Button onClick={this.hideModal}>Close</Button> | |
80 | - </Modal.Footer> | |
81 | - </Modal> | |
82 | - </ButtonToolbar> | |
83 | - </Panel> | |
84 | - </div> | |
85 | - ); | |
86 | - }; | |
87 | - | |
88 | -}; |
imports/client/views/org/admin/settings/students/StudentView.js
... | ... | @@ -1,66 +0,0 @@ |
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 { Navbar,Modal, Nav, NavItem, | |
7 | - Glyphicon, Collapse, FormGroup, FormControl, Panel, | |
8 | - NavbarToggler, NavbarBrand, Table, ButtonToolbar, | |
9 | - NavLink, DropdownItem, DropdownToggle, DropdownMenu, | |
10 | - NavDropdown, MenuItem, Breadcrumb, Button } from 'react-bootstrap'; | |
11 | -import { StudentTable } from './view/StudentTable'; | |
12 | -import { Header } from '../Header'; | |
13 | -import { UploadCsv } from './UploadCsv'; | |
14 | -import { AddStudent } from './add/addStudent'; | |
15 | -import { Students } from '/imports/collections/students/index'; | |
16 | -import './student.css' | |
17 | - | |
18 | -export class StudentView extends Component { | |
19 | - | |
20 | - constructor(props) { | |
21 | - super(props); | |
22 | - this.state = { | |
23 | - show: false, | |
24 | - firstNameSearch: "", | |
25 | - lastNameSearch: "", | |
26 | - }; | |
27 | - this.showModal = this.showModal.bind(this); | |
28 | - this.hideModal = this.hideModal.bind(this); | |
29 | - this.onUpdate = this.onUpdate.bind(this); | |
30 | - }; | |
31 | - | |
32 | - showModal() { | |
33 | - this.setState({show: true}); | |
34 | - } | |
35 | - | |
36 | - hideModal() { | |
37 | - this.setState({show: false}); | |
38 | - } | |
39 | - onUpdate(key, value) { | |
40 | - this.setState({[key]: value}); | |
41 | - }; | |
42 | - | |
43 | - render() { | |
44 | - firstNameSearch = this.state.firstNameSearch; | |
45 | - lastNameSearch = this.state.lastNameSearch; | |
46 | - var students =_.filter(this.props.data.students,function(item){ | |
47 | - if(item.firstName){ | |
48 | - return _.includes(item.firstName.toLowerCase(),firstNameSearch.toLowerCase()); | |
49 | - } | |
50 | - }); | |
51 | - return ( | |
52 | - <div className="container-detached"> | |
53 | - <div className=""> | |
54 | - <Header/> | |
55 | - <StudentTable | |
56 | - data = {this.props.data} | |
57 | - studentData = {studentData} | |
58 | - /> | |
59 | - <AddStudent/> | |
60 | - <UploadCsv /> | |
61 | - </div> | |
62 | - </div> | |
63 | - ); | |
64 | - }; | |
65 | - | |
66 | -}; |
imports/client/views/org/admin/settings/students/UploadCsv.js
... | ... | @@ -1,103 +0,0 @@ |
1 | -// import {UploadCsv } from '/imports/collections/students/UploadCsv' | |
2 | -import _ from 'lodash'; | |
3 | -import { Meteor } from 'meteor/meteor'; | |
4 | - | |
5 | -import React, { Component } from 'react'; | |
6 | -import { Link,browserHistory } from 'react-router'; | |
7 | -import { FormGroup,Panel,Table, | |
8 | - ButtonToolbar,Modal,ControlLabel,HelpBlock, | |
9 | - FormControl,Glyphicon,Button } from 'react-bootstrap'; | |
10 | -// import { AddStudentForm } from './addStudentForm'; | |
11 | -import { FilesCollection } from 'meteor/ostrio:files'; | |
12 | -const Papa = this.Papa; | |
13 | -// console.log(this); | |
14 | -const style = { | |
15 | - margin: 12, | |
16 | -}; | |
17 | -function FieldGroup({ id, label, help, ...props }) { | |
18 | - return ( | |
19 | - <FormGroup controlId={id}> | |
20 | - <ControlLabel>{label}</ControlLabel> | |
21 | - <FormControl {...props} /> | |
22 | - {help && <HelpBlock>{help}</HelpBlock>} | |
23 | - </FormGroup> | |
24 | - ); | |
25 | -} | |
26 | -export class UploadCsv extends Component { | |
27 | - constructor(props) { | |
28 | - super(props); | |
29 | - this.state = { | |
30 | - show: false | |
31 | - }; | |
32 | - this.showModal = this.showModal.bind(this); | |
33 | - this.hideModal = this.hideModal.bind(this); | |
34 | - this.onUpdate = this.onUpdate.bind(this); | |
35 | - }; | |
36 | - | |
37 | - showModal() { | |
38 | - this.setState({show: true}); | |
39 | - } | |
40 | - | |
41 | - hideModal() { | |
42 | - this.setState({show: false}); | |
43 | - } | |
44 | - onUpdate(key, value) { | |
45 | - this.setState({[key]: value}); | |
46 | - }; | |
47 | - uploadStudentCsv(e){ | |
48 | - e.preventDefault(); | |
49 | - e.persist(); | |
50 | - var file = $('input[type="file"]').prop("files")[0]; | |
51 | - Papa.parse(file, { | |
52 | - header: true, | |
53 | - complete: function(csvData) { | |
54 | - console.log("csvData"); | |
55 | - console.log(csvData); | |
56 | - if(csvData){ | |
57 | - Meteor.call('student.uploadCsv', csvData, function (error, result) { | |
58 | - console.log("error"); | |
59 | - console.log(error); | |
60 | - console.log("result"); | |
61 | - console.log(result); | |
62 | - }) | |
63 | - } | |
64 | - } | |
65 | - }); | |
66 | - } | |
67 | - | |
68 | - render() { | |
69 | - console.log(this.props); | |
70 | - return ( | |
71 | - <ButtonToolbar> | |
72 | - <Button bsStyle="primary" onClick={this.showModal}> | |
73 | - Upload CSV | |
74 | - </Button> | |
75 | - <Modal | |
76 | - {...this.props} | |
77 | - show={this.state.show} | |
78 | - onHide={this.hideModal} | |
79 | - dialogClassName="custom-modal" | |
80 | - > | |
81 | - <Modal.Header closeButton> | |
82 | - <Modal.Title id="contained-modal-title-lg">Upload Csv file</Modal.Title> | |
83 | - </Modal.Header> | |
84 | - <Modal.Body> | |
85 | - <form onSubmit={ (e) => this.uploadStudentCsv(e) } > | |
86 | - <FieldGroup | |
87 | - id="formControlsFile" | |
88 | - type="file" | |
89 | - label="File" | |
90 | - help="Upload you CSV here." | |
91 | - /> | |
92 | - <Button type="submit" bsStyle="default">Upload File</Button> | |
93 | - </form> | |
94 | - </Modal.Body> | |
95 | - <Modal.Footer> | |
96 | - <Button onClick={this.hideModal}>Close</Button> | |
97 | - </Modal.Footer> | |
98 | - </Modal> | |
99 | - </ButtonToolbar> | |
100 | - ); | |
101 | - }; | |
102 | - | |
103 | -}; |
imports/client/views/org/admin/settings/students/add/AddStudentFormContainer.js
... | ... | @@ -1,130 +0,0 @@ |
1 | -import React, { Component } from 'react' | |
2 | -import { AddStudentForm } from './addStudentForm' | |
3 | -import StudentForm from './StudentForm' | |
4 | -import Form from '/imports/client/views/core/Form' | |
5 | -import Validator from '/imports/client/views/core/Validator' | |
6 | -import { isRequired, isValidEmail } from '/imports/client/views/core/validations' | |
7 | - | |
8 | - | |
9 | -export class AddStudentFormContainer extends Component { | |
10 | - | |
11 | - constructor(props) { | |
12 | - super(props) | |
13 | - this.state = { currentStep: 0 } | |
14 | - this.handleNextClick = this.handleNextClick.bind(this) | |
15 | - this.handleBackClick = this.handleBackClick.bind(this) | |
16 | - this.handleSubmit = this.handleSubmit.bind(this) | |
17 | - } | |
18 | - | |
19 | - handleNextClick() { | |
20 | - this.form.handleSubmit() | |
21 | - if (this.validator.getErrors() && Object.keys(this.validator.getErrors()).length > 0) return | |
22 | - this.setState({ currentStep: this.state.currentStep + 1 }) | |
23 | - this.form.resetSubmitted() | |
24 | - } | |
25 | - | |
26 | - handleBackClick() { | |
27 | - this.setState({ currentStep: this.state.currentStep + -1 }) | |
28 | - } | |
29 | - | |
30 | - handleSubmit() { | |
31 | - self = this; | |
32 | - if (this.state.currentStep === 3) { | |
33 | - Meteor.call('student.addManually',this.form.state.values, function(err, result){ | |
34 | - console.log("err"); | |
35 | - console.log(err); | |
36 | - console.log("result"); | |
37 | - console.log(result); | |
38 | - if(!err){ | |
39 | - self.props.hideModal(); | |
40 | - } | |
41 | - }); | |
42 | - } | |
43 | - } | |
44 | - | |
45 | - //render callback | |
46 | - render() { | |
47 | - return ( | |
48 | - <Form | |
49 | - onSubmit={this.handleSubmit} | |
50 | - ref={form => this.form = form} | |
51 | - initialValues={{ | |
52 | - gender: 'male', | |
53 | - parentGender: 'male', | |
54 | - admissionId: "123", | |
55 | - firstName: "first", | |
56 | - lastName: "last", | |
57 | - email: "deepak125.dk+21@gmail.com", | |
58 | - dob: "04/04/1989", | |
59 | - gender: "male", | |
60 | - rollNo: "1", | |
61 | - studentClass: "2", | |
62 | - section: "B", | |
63 | - community: "SC", | |
64 | - bloodGroup: "B+", | |
65 | - phone: "9876543321", | |
66 | - address: "address", | |
67 | - city: "chennai", | |
68 | - state: "tn", | |
69 | - parentName: "parentName", | |
70 | - parentEmail: "deepak125.dk+41@gmail.com", | |
71 | - relation: "father", | |
72 | - profession: "farmer", | |
73 | - parentGender: "male", | |
74 | - parentPhone: "987655412", | |
75 | - parentAddress: "parentAddress", | |
76 | - parentCity: "parentCity", | |
77 | - parentState: "parentState", | |
78 | - parentZipcode: "parentZipcode", | |
79 | - }} | |
80 | - > | |
81 | - {({ values, setValue, getValue, isSubmitted, isDirty }) => ( | |
82 | - <Validator | |
83 | - values={values} | |
84 | - ref={validator => this.validator = validator} | |
85 | - validations={{ | |
86 | - admissionId: [(value) => isRequired('Admission id', value)], | |
87 | - firstName: [(value) => isRequired('First name', value)], | |
88 | - lastName: [(value) => isRequired('Last name', value)], | |
89 | - email: [(value) => isRequired('Email', value), isValidEmail], | |
90 | - dob: [(value) => isRequired('Date of birth', value)], | |
91 | - gender: [(value) => isRequired('Gender', value)], | |
92 | - rollNo: [(value) => this.state.currentStep === 1 && isRequired('Roll no', value)], | |
93 | - studentClass: [(value) => this.state.currentStep === 1 && isRequired('Class', value)], | |
94 | - section: [(value) => this.state.currentStep === 1 && isRequired('Section', value)], | |
95 | - community: [(value) => this.state.currentStep === 1 && isRequired('Community', value)], | |
96 | - bloodGroup: [(value) => this.state.currentStep === 1 && isRequired('Blood group', value)], | |
97 | - phone: [(value) => this.state.currentStep === 1 && isRequired('Phone', value)], | |
98 | - address: [(value) => this.state.currentStep === 2 && isRequired('Address', value)], | |
99 | - city: [(value) => this.state.currentStep === 2 && isRequired('City', value)], | |
100 | - state: [(value) => this.state.currentStep === 2 && isRequired('State', value)], | |
101 | - parentName: [(value) => this.state.currentStep === 3 && isRequired('Parent name', value)], | |
102 | - parentEmail: [(value) => this.state.currentStep === 3 && isRequired('Parent email', value), (value) => this.state.currentStep === 3 && isValidEmail(value)], | |
103 | - relation: [(value) => this.state.currentStep === 3 && isRequired('Relation', value)], | |
104 | - profession: [(value) => this.state.currentStep === 3 && isRequired('Profession', value)], | |
105 | - parentGender: [(value) => this.state.currentStep === 3 && isRequired('Parent gender', value)], | |
106 | - parentPhone: [(value) => this.state.currentStep === 3 && isRequired('Parent phone', value)], | |
107 | - parentAddress: [(value) => this.state.currentStep === 3 && isRequired('Parent address', value)], | |
108 | - parentCity: [(value) => this.state.currentStep === 3 && isRequired('Parent city', value)], | |
109 | - parentState: [(value) => this.state.currentStep === 3 && isRequired('Parent state', value)], | |
110 | - parentZipcode: [(value) => this.state.currentStep === 3 && isRequired('Parent zip code', value)], | |
111 | - }} | |
112 | - > | |
113 | - {({ errors }) => ( | |
114 | - <StudentForm | |
115 | - isDirty={isDirty} | |
116 | - setValue={setValue} | |
117 | - getValue={getValue} | |
118 | - isSubmitted={isSubmitted} | |
119 | - errors={errors} | |
120 | - onNextClick={this.handleNextClick} | |
121 | - onBackClick={this.handleBackClick} | |
122 | - currentStep={this.state.currentStep} | |
123 | - /> | |
124 | - )} | |
125 | - </Validator> | |
126 | - )} | |
127 | - </Form> | |
128 | - ) | |
129 | - } | |
130 | -} |
imports/client/views/org/admin/settings/students/add/StudentForm.js
... | ... | @@ -1,474 +0,0 @@ |
1 | -import React, { PropTypes } from 'react' | |
2 | -import { | |
3 | - Row, | |
4 | - Col, | |
5 | - FormGroup, | |
6 | - FormControl, | |
7 | - Button | |
8 | -} from 'react-bootstrap' | |
9 | -import DatePicker from '/imports/client/views/core/DatePicker' | |
10 | -import Label from '/imports/client/views/core/Label' | |
11 | -import Stepper from '/imports/client/views/core/Stepper' | |
12 | -import ErrorLabel from '/imports/client/views/core/ErrorLabel' | |
13 | - | |
14 | -const StudentForm = props => ( | |
15 | - <div className="stepy-validation"> | |
16 | - <Stepper | |
17 | - steps={[ | |
18 | - { | |
19 | - label: 'Personal data', | |
20 | - active: props.currentStep === 0, | |
21 | - }, | |
22 | - { | |
23 | - label: 'Academic', | |
24 | - active: props.currentStep === 1, | |
25 | - }, | |
26 | - { | |
27 | - label: 'Address', | |
28 | - active: props.currentStep === 2, | |
29 | - }, | |
30 | - { | |
31 | - label: 'Parent info', | |
32 | - active: props.currentStep === 3, | |
33 | - } | |
34 | - ]} | |
35 | - /> | |
36 | - {props.currentStep === 0 && ( | |
37 | - <fieldset title="1"> | |
38 | - <legend className="text-semibold">Personal data</legend> | |
39 | - <Row> | |
40 | - <Col xs={12} sm={4}> | |
41 | - <FormGroup controlId="admissionId"> | |
42 | - <Label required>Admission Id</Label> | |
43 | - <FormControl | |
44 | - type="text" | |
45 | - value={props.getValue('admissionId')} | |
46 | - placeholder="admission Id" | |
47 | - onChange={e => props.setValue('admissionId', e.target.value)} | |
48 | - /> | |
49 | - {props.isSubmitted() && props.errors && props.errors.admissionId && ( | |
50 | - <ErrorLabel> {props.errors.admissionId} </ErrorLabel> | |
51 | - )} | |
52 | - </FormGroup> | |
53 | - </Col> | |
54 | - <Col xs={12} sm={4}> | |
55 | - <FormGroup controlId="firstName"> | |
56 | - <Label required>First Name</Label> | |
57 | - <FormControl | |
58 | - type="text" | |
59 | - value={props.getValue('firstName')} | |
60 | - placeholder="First Name" | |
61 | - onChange={e => props.setValue('firstName', e.target.value)} | |
62 | - /> | |
63 | - {props.isSubmitted() && props.errors && props.errors.firstName && ( | |
64 | - <ErrorLabel> {props.errors.firstName} </ErrorLabel> | |
65 | - )} | |
66 | - </FormGroup> | |
67 | - </Col> | |
68 | - <Col xs={12} sm={4}> | |
69 | - <FormGroup controlId="lastName"> | |
70 | - <Label required>Last Name</Label> | |
71 | - <FormControl | |
72 | - type="text" | |
73 | - value={props.getValue('lastName')} | |
74 | - placeholder="Last Name" | |
75 | - onChange={e => props.setValue('lastName', e.target.value)} | |
76 | - /> | |
77 | - {props.isSubmitted() && props.errors && props.errors.lastName && ( | |
78 | - <ErrorLabel> {props.errors.lastName} </ErrorLabel> | |
79 | - )} | |
80 | - </FormGroup> | |
81 | - </Col> | |
82 | - </Row> | |
83 | - <Row> | |
84 | - <Col xs={12} sm={4}> | |
85 | - <FormGroup controlId="formControlsSelect"> | |
86 | - <Label>Gender</Label> | |
87 | - <FormControl componentClass="select" | |
88 | - placeholder="select" | |
89 | - value={props.getValue('gender')} | |
90 | - onChange={e => props.setValue('gender', e.target.value)} | |
91 | - > | |
92 | - <option value="male">Male</option> | |
93 | - <option value="female">Female</option> | |
94 | - </FormControl> | |
95 | - {props.isSubmitted() && props.errors && props.errors.gender && ( | |
96 | - <ErrorLabel> {props.errors.gender} </ErrorLabel> | |
97 | - )} | |
98 | - </FormGroup> | |
99 | - </Col> | |
100 | - <Col xs={12} sm={4}> | |
101 | - <FormGroup controlId="email"> | |
102 | - <Label required>Email</Label> | |
103 | - <FormControl | |
104 | - type="email" | |
105 | - value={props.getValue('email')} | |
106 | - placeholder="Email" | |
107 | - onChange={e => props.setValue('email', e.target.value)} | |
108 | - /> | |
109 | - {props.isSubmitted() && props.errors && props.errors.email && ( | |
110 | - <ErrorLabel> {props.errors.email} </ErrorLabel> | |
111 | - )} | |
112 | - </FormGroup> | |
113 | - </Col> | |
114 | - <Col xs={12} sm={4}> | |
115 | - <FormGroup> | |
116 | - <Label required>Date of birth</Label> | |
117 | - <DatePicker | |
118 | - id="dob" | |
119 | - setValue = {props.setValue} | |
120 | - value={props.getValue('dob')} | |
121 | - onChange={(e) => { | |
122 | - props.setValue('dob', e.target.value) | |
123 | - }} | |
124 | - /> | |
125 | - {props.isSubmitted() && props.errors && props.errors.dob && ( | |
126 | - <ErrorLabel> {props.errors.dob} </ErrorLabel> | |
127 | - )} | |
128 | - </FormGroup> | |
129 | - </Col> | |
130 | - </Row> | |
131 | - </fieldset> | |
132 | - )} | |
133 | - {props.currentStep === 1 && ( | |
134 | - <fieldset title="Academic"> | |
135 | - <legend className="text-semibold">Academic</legend> | |
136 | - <Row> | |
137 | - <Col xs={12} sm={4}> | |
138 | - <FormGroup controlId="rollNo"> | |
139 | - <Label required>Roll No</Label> | |
140 | - <FormControl | |
141 | - type="text" | |
142 | - value={props.getValue('rollNo')} | |
143 | - placeholder="Roll No" | |
144 | - onChange={e => props.setValue('rollNo', e.target.value)} | |
145 | - /> | |
146 | - {props.isSubmitted() && props.errors && props.errors.rollNo && ( | |
147 | - <ErrorLabel> {props.errors.rollNo} </ErrorLabel> | |
148 | - )} | |
149 | - </FormGroup> | |
150 | - </Col> | |
151 | - <Col xs={12} sm={4}> | |
152 | - <FormGroup controlId="class"> | |
153 | - <Label required>Class</Label> | |
154 | - <FormControl | |
155 | - type="text" | |
156 | - value={props.getValue('studentClass')} | |
157 | - placeholder="7" | |
158 | - onChange={e => props.setValue('studentClass', e.target.value)} | |
159 | - /> | |
160 | - {props.isSubmitted() && props.errors && props.errors.studentClass && ( | |
161 | - <ErrorLabel> {props.errors.studentClass} </ErrorLabel> | |
162 | - )} | |
163 | - </FormGroup> | |
164 | - </Col> | |
165 | - <Col xs={12} sm={4}> | |
166 | - <FormGroup controlId="section"> | |
167 | - <Label required>Section</Label> | |
168 | - <FormControl | |
169 | - type="text" | |
170 | - value={props.getValue('section')} | |
171 | - placeholder="B" | |
172 | - onChange={e => props.setValue('section', e.target.value)} | |
173 | - /> | |
174 | - {props.isSubmitted() && props.errors && props.errors.section && ( | |
175 | - <ErrorLabel> {props.errors.section} </ErrorLabel> | |
176 | - )} | |
177 | - </FormGroup> | |
178 | - </Col> | |
179 | - </Row> | |
180 | - <Row> | |
181 | - <Col xs={12} sm={4}> | |
182 | - <FormGroup controlId="community"> | |
183 | - <Label required>Community</Label> | |
184 | - <FormControl | |
185 | - type="text" | |
186 | - value={props.getValue('community')} | |
187 | - placeholder="General" | |
188 | - onChange={e => props.setValue('community', e.target.value)} | |
189 | - /> | |
190 | - {props.isSubmitted() && props.errors && props.errors.community && ( | |
191 | - <ErrorLabel> {props.errors.community} </ErrorLabel> | |
192 | - )} | |
193 | - </FormGroup> | |
194 | - </Col> | |
195 | - <Col xs={12} sm={4}> | |
196 | - <FormGroup controlId="bloodGroup"> | |
197 | - <Label required>bloodGroup</Label> | |
198 | - <FormControl | |
199 | - type="text" | |
200 | - value={props.getValue('bloodGroup')} | |
201 | - placeholder="B+" | |
202 | - onChange={e => props.setValue('bloodGroup', e.target.value)} | |
203 | - /> | |
204 | - {props.isSubmitted() && props.errors && props.errors.bloodGroup && ( | |
205 | - <ErrorLabel> {props.errors.bloodGroup} </ErrorLabel> | |
206 | - )} | |
207 | - </FormGroup> | |
208 | - </Col> | |
209 | - <Col xs={12} sm={4}> | |
210 | - <FormGroup controlId="phone"> | |
211 | - <Label required>Phone</Label> | |
212 | - <FormControl | |
213 | - type="text" | |
214 | - value={props.getValue('phone')} | |
215 | - placeholder="9999999999" | |
216 | - onChange={e => props.setValue('phone', e.target.value)} | |
217 | - /> | |
218 | - {props.isSubmitted() && props.errors && props.errors.phone && ( | |
219 | - <ErrorLabel> {props.errors.phone} </ErrorLabel> | |
220 | - )} | |
221 | - </FormGroup> | |
222 | - </Col> | |
223 | - </Row> | |
224 | - </fieldset> | |
225 | - )} | |
226 | - {props.currentStep === 2 && ( | |
227 | - <fieldset title="Address"> | |
228 | - <legend className="text-semibold">Address</legend> | |
229 | - <Row> | |
230 | - <Col xs={12} sm={4}> | |
231 | - <FormGroup controlId="address"> | |
232 | - <Label required>Address</Label> | |
233 | - <FormControl | |
234 | - type="text" | |
235 | - value={props.getValue('address')} | |
236 | - placeholder="#876, Street, town" | |
237 | - onChange={e => props.setValue('address', e.target.value)} | |
238 | - /> | |
239 | - {props.isSubmitted() && props.errors && props.errors.address && ( | |
240 | - <ErrorLabel> {props.errors.address} </ErrorLabel> | |
241 | - )} | |
242 | - </FormGroup> | |
243 | - </Col> | |
244 | - <Col xs={12} sm={4}> | |
245 | - <FormGroup controlId="city"> | |
246 | - <Label required>City</Label> | |
247 | - <FormControl | |
248 | - type="text" | |
249 | - value={props.getValue('city')} | |
250 | - placeholder="Chennai" | |
251 | - onChange={e => props.setValue('city', e.target.value)} | |
252 | - /> | |
253 | - {props.isSubmitted() && props.errors && props.errors.city && ( | |
254 | - <ErrorLabel> {props.errors.city} </ErrorLabel> | |
255 | - )} | |
256 | - </FormGroup> | |
257 | - </Col> | |
258 | - <Col xs={12} sm={4}> | |
259 | - <FormGroup controlId="state"> | |
260 | - <Label required>State</Label> | |
261 | - <FormControl | |
262 | - type="text" | |
263 | - value={props.getValue('state')} | |
264 | - placeholder="Tamilnadu" | |
265 | - onChange={e => props.setValue('state', e.target.value)} | |
266 | - /> | |
267 | - {props.isSubmitted() && props.errors && props.errors.state && ( | |
268 | - <ErrorLabel> {props.errors.state} </ErrorLabel> | |
269 | - )} | |
270 | - </FormGroup> | |
271 | - </Col> | |
272 | - </Row> | |
273 | - </fieldset> | |
274 | - )} | |
275 | - {props.currentStep === 3 && ( | |
276 | - <fieldset title="2"> | |
277 | - <legend className="text-semibold">Parent information</legend> | |
278 | - <Row> | |
279 | - <Col xs={12} sm={4}> | |
280 | - <FormGroup controlId="parentName"> | |
281 | - <Label required>Parent Name</Label> | |
282 | - <FormControl | |
283 | - type="text" | |
284 | - value={props.getValue('parentName')} | |
285 | - placeholder="John" | |
286 | - onChange={e => props.setValue('parentName', e.target.value)} | |
287 | - /> | |
288 | - {props.isSubmitted() && props.errors && props.errors.parentName && ( | |
289 | - <ErrorLabel> {props.errors.parentName} </ErrorLabel> | |
290 | - )} | |
291 | - </FormGroup> | |
292 | - </Col> | |
293 | - <Col xs={12} sm={4}> | |
294 | - <FormGroup controlId="parentEmail"> | |
295 | - <Label required>Parent Email</Label> | |
296 | - <FormControl | |
297 | - type="text" | |
298 | - value={props.getValue('parentEmail')} | |
299 | - placeholder="john@email.com" | |
300 | - onChange={e => props.setValue('parentEmail', e.target.value)} | |
301 | - /> | |
302 | - {props.isSubmitted() && props.errors && props.errors.parentEmail && ( | |
303 | - <ErrorLabel> {props.errors.parentEmail} </ErrorLabel> | |
304 | - )} | |
305 | - </FormGroup> | |
306 | - </Col> | |
307 | - <Col xs={12} sm={4}> | |
308 | - <FormGroup controlId="relation"> | |
309 | - <Label required>Relation</Label> | |
310 | - <FormControl | |
311 | - type="text" | |
312 | - value={props.getValue('relation')} | |
313 | - placeholder="Father" | |
314 | - onChange={e => props.setValue('relation', e.target.value)} | |
315 | - /> | |
316 | - {props.isSubmitted() && props.errors && props.errors.relation && ( | |
317 | - <ErrorLabel> {props.errors.relation} </ErrorLabel> | |
318 | - )} | |
319 | - </FormGroup> | |
320 | - </Col> | |
321 | - </Row> | |
322 | - <Row> | |
323 | - <Col xs={12} sm={4}> | |
324 | - <FormGroup controlId="profession"> | |
325 | - <Label required>Profession</Label> | |
326 | - <FormControl | |
327 | - type="text" | |
328 | - value={props.getValue('profession')} | |
329 | - placeholder="Farmer" | |
330 | - onChange={e => props.setValue('profession', e.target.value)} | |
331 | - /> | |
332 | - {props.isSubmitted() && props.errors && props.errors.profession && ( | |
333 | - <ErrorLabel> {props.errors.profession} </ErrorLabel> | |
334 | - )} | |
335 | - </FormGroup> | |
336 | - </Col> | |
337 | - <Col xs={12} sm={4}> | |
338 | - <FormGroup controlId="parentGender"> | |
339 | - <Label>Parent Gender</Label> | |
340 | - <FormControl componentClass="select" | |
341 | - placeholder="select" | |
342 | - value={props.getValue('parentGender')} | |
343 | - onChange={e => props.setValue('parentGender', e.target.value)} | |
344 | - > | |
345 | - <option value="male">Male</option> | |
346 | - <option value="female">Female</option> | |
347 | - </FormControl> | |
348 | - {props.isSubmitted() && props.errors && props.errors.parentGender && ( | |
349 | - <ErrorLabel> {props.errors.parentGender} </ErrorLabel> | |
350 | - )} | |
351 | - </FormGroup> | |
352 | - </Col> | |
353 | - <Col xs={12} sm={4}> | |
354 | - <FormGroup controlId="parentPhone"> | |
355 | - <Label required>Parent Phone</Label> | |
356 | - <FormControl | |
357 | - type="text" | |
358 | - value={props.getValue('parentPhone')} | |
359 | - placeholder="9876543210" | |
360 | - onChange={e => props.setValue('parentPhone', e.target.value)} | |
361 | - /> | |
362 | - {props.isSubmitted() && props.errors && props.errors.parentPhone && ( | |
363 | - <ErrorLabel> {props.errors.parentPhone} </ErrorLabel> | |
364 | - )} | |
365 | - </FormGroup> | |
366 | - </Col> | |
367 | - </Row> | |
368 | - <Row> | |
369 | - <Col xs={12} sm={4}> | |
370 | - <FormGroup controlId="parentAddress"> | |
371 | - <Label required>Parent Address</Label> | |
372 | - <FormControl | |
373 | - type="text" | |
374 | - value={props.getValue('parentAddress')} | |
375 | - placeholder="#12, street, town" | |
376 | - onChange={e => props.setValue('parentAddress', e.target.value)} | |
377 | - /> | |
378 | - {props.isSubmitted() && props.errors && props.errors.parentAddress && ( | |
379 | - <ErrorLabel> {props.errors.parentAddress} </ErrorLabel> | |
380 | - )} | |
381 | - </FormGroup> | |
382 | - </Col> | |
383 | - <Col xs={12} sm={4}> | |
384 | - <FormGroup controlId="parentCity"> | |
385 | - <Label required>Parent City</Label> | |
386 | - <FormControl | |
387 | - type="text" | |
388 | - value={props.getValue('parentCity')} | |
389 | - placeholder="Chennai" | |
390 | - onChange={e => props.setValue('parentCity', e.target.value)} | |
391 | - /> | |
392 | - {props.isSubmitted() && props.errors && props.errors.parentCity && ( | |
393 | - <ErrorLabel> {props.errors.parentCity} </ErrorLabel> | |
394 | - )} | |
395 | - </FormGroup> | |
396 | - </Col> | |
397 | - <Col xs={12} sm={4}> | |
398 | - <FormGroup controlId="parentState"> | |
399 | - <Label required>Parent State</Label> | |
400 | - <FormControl | |
401 | - type="text" | |
402 | - value={props.getValue('parentState')} | |
403 | - placeholder="600031" | |
404 | - onChange={e => props.setValue('parentState', e.target.value)} | |
405 | - /> | |
406 | - {props.isSubmitted() && props.errors && props.errors.parentState && ( | |
407 | - <ErrorLabel> {props.errors.parentState} </ErrorLabel> | |
408 | - )} | |
409 | - </FormGroup> | |
410 | - </Col> | |
411 | - </Row> | |
412 | - <Row> | |
413 | - <Col xs={12} sm={4}> | |
414 | - <FormGroup controlId="parentZipcode"> | |
415 | - <Label required>Parent Zipcode</Label> | |
416 | - <FormControl | |
417 | - type="text" | |
418 | - value={props.getValue('parentZipcode')} | |
419 | - placeholder="600031" | |
420 | - onChange={e => props.setValue('parentZipcode', e.target.value)} | |
421 | - /> | |
422 | - {props.isSubmitted() && props.errors && props.errors.parentZipcode && ( | |
423 | - <ErrorLabel> {props.errors.parentZipcode} </ErrorLabel> | |
424 | - )} | |
425 | - </FormGroup> | |
426 | - </Col> | |
427 | - </Row> | |
428 | - </fieldset> | |
429 | - )} | |
430 | - <div style={{ textAlign: 'left' }}> | |
431 | - {props.currentStep > 0 && ( | |
432 | - <div style={{ display: 'inline-block', marginRight: 10 }}> | |
433 | - <Button onClick={props.onBackClick}> | |
434 | - <i className="icon-arrow-left13 position-left"></i> | |
435 | - BACK | |
436 | - </Button> | |
437 | - | |
438 | - </div> | |
439 | - )} | |
440 | - {props.currentStep < 3 && ( | |
441 | - <div style={{ display: 'inline-block' }}> | |
442 | - <Button | |
443 | - bsStyle="primary" | |
444 | - onClick={props.onNextClick} | |
445 | - > | |
446 | - NEXT | |
447 | - <i className="icon-arrow-right14 position-right" /> | |
448 | - </Button> | |
449 | - </div> | |
450 | - )} | |
451 | - {props.currentStep === 3 && ( | |
452 | - <div style={{ display: 'inline-block' }}> | |
453 | - <Button | |
454 | - bsStyle="primary" | |
455 | - onClick={props.onNextClick} | |
456 | - > | |
457 | - SAVE | |
458 | - <i className="fa fa-check" /> | |
459 | - </Button> | |
460 | - </div> | |
461 | - )} | |
462 | - </div> | |
463 | - </div> | |
464 | -) | |
465 | - | |
466 | -StudentForm.propTypes = { | |
467 | - currentStep: PropTypes.number.isRequired, | |
468 | - onNextClick: PropTypes.func.isRequired, | |
469 | - onBackClick: PropTypes.func.isRequired, | |
470 | - setValue: PropTypes.func.isRequired, | |
471 | - getValue: PropTypes.func.isRequired, | |
472 | -} | |
473 | - | |
474 | -export default StudentForm |
imports/client/views/org/admin/settings/students/add/addStudent.js
... | ... | @@ -1,66 +0,0 @@ |
1 | -import _ from 'lodash'; | |
2 | -import { Meteor } from 'meteor/meteor'; | |
3 | -import React, { Component } from 'react'; | |
4 | -import { Link,browserHistory } from 'react-router'; | |
5 | -import { FormGroup,Panel,Table, | |
6 | - ButtonToolbar,Modal, | |
7 | - FormControl,Glyphicon,Button } from 'react-bootstrap'; | |
8 | -import { AddStudentFormContainer } from './AddStudentFormContainer'; | |
9 | - | |
10 | -const style = { | |
11 | - margin: 12, | |
12 | -}; | |
13 | -export class AddStudent extends Component { | |
14 | - constructor(props) { | |
15 | - super(props); | |
16 | - this.state = { | |
17 | - show: false | |
18 | - }; | |
19 | - this.showModal = this.showModal.bind(this); | |
20 | - this.hideModal = this.hideModal.bind(this); | |
21 | - this.onUpdate = this.onUpdate.bind(this); | |
22 | - }; | |
23 | - | |
24 | - showModal() { | |
25 | - this.setState({show: true}); | |
26 | - } | |
27 | - | |
28 | - hideModal() { | |
29 | - this.setState({show: false}); | |
30 | - } | |
31 | - onUpdate(key, value) { | |
32 | - this.setState({[key]: value}); | |
33 | - }; | |
34 | - | |
35 | - render() { | |
36 | - return ( | |
37 | - <ButtonToolbar> | |
38 | - <Button bsStyle="primary" onClick={this.showModal}> | |
39 | - Add Student | |
40 | - </Button> | |
41 | - <Modal | |
42 | - {...this.props} | |
43 | - show={this.state.show} | |
44 | - onHide={this.hideModal} | |
45 | - dialogClassName="custom-modal" | |
46 | - bsSize="large" | |
47 | - > | |
48 | - <Modal.Header closeButton> | |
49 | - <Modal.Title id="contained-modal-title-lg">Add Student</Modal.Title> | |
50 | - </Modal.Header> | |
51 | - <Modal.Body> | |
52 | - <AddStudentFormContainer | |
53 | - hideModal = {this.hideModal} | |
54 | - /> | |
55 | - </Modal.Body> | |
56 | - {/* | |
57 | - <Modal.Footer> | |
58 | - <Button onClick={this.hideModal}>Close</Button> | |
59 | - </Modal.Footer> | |
60 | - */} | |
61 | - </Modal> | |
62 | - </ButtonToolbar> | |
63 | - ); | |
64 | - }; | |
65 | - | |
66 | -}; |
imports/client/views/org/admin/settings/students/add/addStudentForm.js
... | ... | @@ -1,500 +0,0 @@ |
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 { Form, FormGroup,InputGroup, | |
7 | - DropdownButton,MenuItem,ControlLabel, | |
8 | - SplitButton, | |
9 | - FormControl,Glyphicon,Button } from 'react-bootstrap'; | |
10 | -import DatePicker from 'react-bootstrap-date-picker' | |
11 | -import {addStudentManually} from '/imports/collections/students/methods'; | |
12 | - | |
13 | -export class AddStudentForm extends Component { | |
14 | - | |
15 | - constructor(props) { | |
16 | - super(props); | |
17 | - this.state = { | |
18 | - admissionId: "123", | |
19 | - firstName: "first", | |
20 | - lastName: "last", | |
21 | - middleName: "middle", | |
22 | - email: "deepak125.dk+21@gmail.com", | |
23 | - dob: "", | |
24 | - formattedDob: "", | |
25 | - gender: "male", | |
26 | - rollNo: "1", | |
27 | - class: "2", | |
28 | - section: "B", | |
29 | - community: "SC", | |
30 | - bloodGroup: "B+", | |
31 | - phone: "9876543321", | |
32 | - address: "address", | |
33 | - city: "chennai", | |
34 | - state: "tn", | |
35 | - parentName: "parentName", | |
36 | - parentEmail: "deepak125.dk+41@gmail.com", | |
37 | - relation: "father", | |
38 | - profession: "farmer", | |
39 | - parentGender: "male", | |
40 | - parentPhone: "987655412", | |
41 | - parentAddress: "parentAddress", | |
42 | - parentCity: "parentCity", | |
43 | - parentState: "parentState", | |
44 | - parentZipcode: "parentZipcode", | |
45 | - }; | |
46 | - this.onUpdate = this.onUpdate.bind(this); | |
47 | - this.handleDob = this.handleDob.bind(this); | |
48 | - }; | |
49 | - | |
50 | - onUpdate(key, value) { | |
51 | - this.setState({[key]: value}); | |
52 | - }; | |
53 | - | |
54 | - handleDob(value, formattedValue) { | |
55 | - this.setState({ | |
56 | - dob: value, // ISO String, ex: "2016-11-19T12:00:00.000Z" | |
57 | - formattedDob: formattedValue // Formatted String, ex: "11/19/2016" | |
58 | - }); | |
59 | -} | |
60 | - addStudent(e){ | |
61 | - e.preventDefault(); | |
62 | - e.persist(); | |
63 | - const firstName = this.state.firstName; | |
64 | - const middleName = this.state.middleName; | |
65 | - const lastName = this.state.lastName; | |
66 | - const admissionId = this.state.admissionId; | |
67 | - const email = this.state.email; | |
68 | - const dob = this.state.dob; | |
69 | - const formattedDob = this.state.formattedDob; | |
70 | - const gender = this.state.gender; | |
71 | - const rollNo = this.state.rollNo; | |
72 | - const studentclass = this.state.class; | |
73 | - const section = this.state.section; | |
74 | - const community = this.state.community; | |
75 | - const bloodGroup = this.state.bloodGroup; | |
76 | - const phone = this.state.phone; | |
77 | - const address = this.state.address; | |
78 | - const city = this.state.city; | |
79 | - const state = this.state.state; | |
80 | - const parentName = this.state.parentName; | |
81 | - const parentEmail = this.state.parentEmail; | |
82 | - const relation = this.state.relation; | |
83 | - const profession = this.state.profession; | |
84 | - const parentGender = this.state.parentGender; | |
85 | - const parentPhone = this.state.parentPhone; | |
86 | - const parentAddress = this.state.parentAddress; | |
87 | - const parentCity = this.state.parentCity; | |
88 | - const parentState = this.state.parentState; | |
89 | - const parentZipcode = this.state.parentZipcode; | |
90 | - if(admissionId==""){ | |
91 | - Bert.alert('Enter Admission Id!', 'danger'); | |
92 | - }else if(firstName==""){ | |
93 | - Bert.alert('Enter Fist Name', 'danger'); | |
94 | - } else if(middleName==""){ | |
95 | - Bert.alert('Enter Middle name!', 'danger'); | |
96 | - }else if(lastName==""){ | |
97 | - Bert.alert('Enter Last name!', 'danger'); | |
98 | - }else if(email==""){ | |
99 | - Bert.alert('Enter email!', 'danger'); | |
100 | - }else if(dob==""){ | |
101 | - Bert.alert('Enter DOB!', 'danger'); | |
102 | - }else if(gender==""){ | |
103 | - Bert.alert('Enter Student Gender!', 'danger'); | |
104 | - }else if(studentclass==""){ | |
105 | - Bert.alert('Enter Class!', 'danger'); | |
106 | - }else if(section==""){ | |
107 | - Bert.alert('Enter Section!', 'danger'); | |
108 | - }else if(community==""){ | |
109 | - Bert.alert('Enter Section!', 'danger'); | |
110 | - }else if(bloodGroup==""){ | |
111 | - Bert.alert('Enter Blood Group!', 'danger'); | |
112 | - }else if(phone==""){ | |
113 | - Bert.alert('Enter phone!', 'danger'); | |
114 | - }else if(address==""){ | |
115 | - Bert.alert('Enter address!', 'danger'); | |
116 | - }else if(city==""){ | |
117 | - Bert.alert('Enter city!', 'danger'); | |
118 | - }else if(state==""){ | |
119 | - Bert.alert('Enter state!', 'danger'); | |
120 | - }else if(parentName==""){ | |
121 | - Bert.alert('Enter Parent name!', 'danger'); | |
122 | - }else if(parentEmail==""){ | |
123 | - Bert.alert('Enter Parent Email!', 'danger'); | |
124 | - }else if(relation==""){ | |
125 | - Bert.alert('Enter relation!', 'danger'); | |
126 | - }else if(profession==""){ | |
127 | - Bert.alert('Enter parent profession!', 'danger'); | |
128 | - }else if(parentGender==""){ | |
129 | - Bert.alert("Enter Parent's Gender!", 'danger'); | |
130 | - }else if(parentPhone==""){ | |
131 | - Bert.alert("Enter Parent's Phone!", 'danger'); | |
132 | - }else if(parentAddress==""){ | |
133 | - Bert.alert("Enter Parent's Address!", 'danger'); | |
134 | - }else if(parentCity==""){ | |
135 | - Bert.alert("Enter Parent's City!", 'danger'); | |
136 | - }else if(parentState==""){ | |
137 | - Bert.alert("Enter Parent's State!", 'danger'); | |
138 | - }else if(parentZipcode==""){ | |
139 | - Bert.alert("Enter Parent's zipcode!", 'danger'); | |
140 | - }else{ | |
141 | - addStudentManually.call({ | |
142 | - admissionId, | |
143 | - firstName, | |
144 | - middleName, | |
145 | - lastName, | |
146 | - email, | |
147 | - dob, | |
148 | - formattedDob, | |
149 | - gender, | |
150 | - rollNo, | |
151 | - studentclass, | |
152 | - section, | |
153 | - community, | |
154 | - bloodGroup, | |
155 | - phone, | |
156 | - address, | |
157 | - city, | |
158 | - state, | |
159 | - parentName, | |
160 | - parentEmail, | |
161 | - relation, | |
162 | - profession, | |
163 | - parentGender, | |
164 | - parentPhone, | |
165 | - parentAddress, | |
166 | - parentCity, | |
167 | - parentState, | |
168 | - parentZipcode | |
169 | - }, function (error, result) { | |
170 | - console.log(error); | |
171 | - console.log(result); | |
172 | - }); | |
173 | - } | |
174 | - } | |
175 | - render() { | |
176 | - return ( | |
177 | - <Form className="steps-validation wizard clearfix" onSubmit={ (e) => this.addStudent(e) } inline> | |
178 | - <div className="steps clearfix"> | |
179 | - <ul role="tablist"> | |
180 | - <li role="tab" className="first current" aria-disabled="false" aria-selected="true"> | |
181 | - <a id="steps-uid-4-t-0" href="#steps-uid-4-h-0" aria-controls="steps-uid-4-p-0"> | |
182 | - <span className="current-info audible">current step: </span><span className="number">1</span> Personal data | |
183 | - </a> | |
184 | - </li> | |
185 | - <li role="tab" className="disabled" aria-disabled="true"> | |
186 | - <a id="steps-uid-4-t-1" href="#steps-uid-4-h-1" aria-controls="steps-uid-4-p-1"> | |
187 | - <span className="number">2</span> Your education\n\ | |
188 | - </a> | |
189 | - </li> | |
190 | - <li role="tab" className="disabled" aria-disabled="true"> | |
191 | - <a id="steps-uid-4-t-2" href="#steps-uid-4-h-2" aria-controls="steps-uid-4-p-2"> | |
192 | - <span className="number">3</span> Your experience | |
193 | - </a> | |
194 | - </li> | |
195 | - <li role="tab" className="disabled last" aria-disabled="true"> | |
196 | - <a id="steps-uid-4-t-3" href="#steps-uid-4-h-3" aria-controls="steps-uid-4-p-3"> | |
197 | - <span className="number">4</span> Additional info | |
198 | - </a> | |
199 | - </li> | |
200 | - </ul> | |
201 | - </div> | |
202 | - <div className="content clearfix"> | |
203 | - <h6 id="steps-uid-4-h-0" tabindex="-1" className="title current">Personal data</h6> | |
204 | - <div id="steps-uid-4-p-0" role="tabpanel" aria-labelledby="steps-uid-4-h-0" className="body current"> | |
205 | - <div className="row"> | |
206 | - <div className="col-md-6"> | |
207 | - | |
208 | - <FormGroup controlId="admissionId"> | |
209 | - <ControlLabel>Admission Id</ControlLabel> | |
210 | - <FormControl | |
211 | - type="text" | |
212 | - value={this.state.admissionId} | |
213 | - placeholder="admission Id" | |
214 | - onChange={e=>this.onUpdate('admissionId',e.target.value)} | |
215 | - /> | |
216 | - </FormGroup> | |
217 | - | |
218 | - </div> | |
219 | - | |
220 | - <div className="col-md-6"> | |
221 | - | |
222 | - <FormGroup controlId="firstName"> | |
223 | - <ControlLabel>First Name</ControlLabel> | |
224 | - <FormControl | |
225 | - type="text" | |
226 | - value={this.state.firstName} | |
227 | - placeholder="First Name" | |
228 | - onChange={e=>this.onUpdate('firstName',e.target.value)} | |
229 | - /> | |
230 | - </FormGroup> | |
231 | - | |
232 | - </div> | |
233 | - </div> | |
234 | - </div> | |
235 | - </div> | |
236 | - | |
237 | - | |
238 | - <FormGroup controlId="admissionId"> | |
239 | - <ControlLabel>Admission Id</ControlLabel> | |
240 | - <FormControl | |
241 | - type="text" | |
242 | - value={this.state.admissionId} | |
243 | - placeholder="admission Id" | |
244 | - onChange={e=>this.onUpdate('admissionId',e.target.value)} | |
245 | - /> | |
246 | - </FormGroup> | |
247 | - | |
248 | - <FormGroup controlId="firstName"> | |
249 | - <ControlLabel>First Name</ControlLabel> | |
250 | - <FormControl | |
251 | - type="text" | |
252 | - value={this.state.firstName} | |
253 | - placeholder="First Name" | |
254 | - onChange={e=>this.onUpdate('firstName',e.target.value)} | |
255 | - /> | |
256 | - </FormGroup> | |
257 | - <FormGroup controlId="middleName"> | |
258 | - <ControlLabel>Middle Name</ControlLabel> | |
259 | - <FormControl | |
260 | - type="text" | |
261 | - value={this.state.middleName} | |
262 | - placeholder="Middle Name" | |
263 | - onChange={e=>this.onUpdate('middleName',e.target.value)} | |
264 | - /> | |
265 | - </FormGroup> | |
266 | - | |
267 | - <FormGroup controlId="lastName"> | |
268 | - <ControlLabel>Last Name</ControlLabel> | |
269 | - <FormControl | |
270 | - type="text" | |
271 | - value={this.state.lastName} | |
272 | - placeholder="Last Name" | |
273 | - onChange={e=>this.onUpdate('lastName',e.target.value)} | |
274 | - /> | |
275 | - | |
276 | - </FormGroup> | |
277 | - <FormGroup controlId="email"> | |
278 | - <ControlLabel>Email</ControlLabel> | |
279 | - <FormControl | |
280 | - type="email" | |
281 | - value={this.state.email} | |
282 | - placeholder="Email" | |
283 | - onChange={e=>this.onUpdate('email',e.target.value)} | |
284 | - /> | |
285 | - </FormGroup> | |
286 | - <FormGroup> | |
287 | - <ControlLabel>Date of birth</ControlLabel> | |
288 | - <DatePicker id="dob" | |
289 | - value={this.state.dob} | |
290 | - onChange={this.handleDob} | |
291 | - /> | |
292 | - </FormGroup> | |
293 | - | |
294 | - <FormGroup controlId="formControlsSelect"> | |
295 | - <ControlLabel>Gender</ControlLabel> | |
296 | - <FormControl componentClass="select" | |
297 | - placeholder="select" | |
298 | - value={this.state.gender} | |
299 | - onChange={e=>this.onUpdate('gender',e.target.value)} | |
300 | - > | |
301 | - <option value="male">Male</option> | |
302 | - <option value="female">Female</option> | |
303 | - </FormControl> | |
304 | - </FormGroup> | |
305 | - | |
306 | - <FormGroup controlId="rollNo"> | |
307 | - <ControlLabel>Roll No</ControlLabel> | |
308 | - <FormControl | |
309 | - type="text" | |
310 | - value={this.state.rollNo} | |
311 | - placeholder="Roll No" | |
312 | - onChange={e=>this.onUpdate('rollNo',e.target.value)} | |
313 | - /> | |
314 | - </FormGroup> | |
315 | - <FormGroup controlId="class"> | |
316 | - <ControlLabel>Class</ControlLabel> | |
317 | - <FormControl | |
318 | - type="text" | |
319 | - value={this.state.class} | |
320 | - placeholder="7" | |
321 | - onChange={e=>this.onUpdate('class',e.target.value)} | |
322 | - /> | |
323 | - </FormGroup> | |
324 | - <FormGroup controlId="section"> | |
325 | - <ControlLabel>Section</ControlLabel> | |
326 | - <FormControl | |
327 | - type="text" | |
328 | - value={this.state.section} | |
329 | - placeholder="B" | |
330 | - onChange={e=>this.onUpdate('section',e.target.value)} | |
331 | - /> | |
332 | - </FormGroup> | |
333 | - | |
334 | - <FormGroup controlId="community"> | |
335 | - <ControlLabel>Community</ControlLabel> | |
336 | - <FormControl | |
337 | - type="text" | |
338 | - value={this.state.community} | |
339 | - placeholder="General" | |
340 | - onChange={e=>this.onUpdate('community',e.target.value)} | |
341 | - /> | |
342 | - </FormGroup> | |
343 | - | |
344 | - <FormGroup controlId="bloodGroup"> | |
345 | - <ControlLabel>bloodGroup</ControlLabel> | |
346 | - <FormControl | |
347 | - type="text" | |
348 | - value={this.state.bloodGroup} | |
349 | - placeholder="B+" | |
350 | - onChange={e=>this.onUpdate('bloodGroup',e.target.value)} | |
351 | - /> | |
352 | - </FormGroup> | |
353 | - | |
354 | - <FormGroup controlId="phone"> | |
355 | - <ControlLabel>Phone</ControlLabel> | |
356 | - <FormControl | |
357 | - type="text" | |
358 | - value={this.state.phone} | |
359 | - placeholder="9999999999" | |
360 | - onChange={e=>this.onUpdate('phone',e.target.value)} | |
361 | - /> | |
362 | - </FormGroup> | |
363 | - | |
364 | - <FormGroup controlId="address"> | |
365 | - <ControlLabel>Address</ControlLabel> | |
366 | - <FormControl | |
367 | - type="text" | |
368 | - value={this.state.address} | |
369 | - placeholder="#876, Street, town" | |
370 | - onChange={e=>this.onUpdate('address',e.target.value)} | |
371 | - /> | |
372 | - </FormGroup> | |
373 | - | |
374 | - <FormGroup controlId="city"> | |
375 | - <ControlLabel>City</ControlLabel> | |
376 | - <FormControl | |
377 | - type="text" | |
378 | - value={this.state.city} | |
379 | - placeholder="Chennai" | |
380 | - onChange={e=>this.onUpdate('city',e.target.value)} | |
381 | - /> | |
382 | - </FormGroup> | |
383 | - | |
384 | - <FormGroup controlId="state"> | |
385 | - <ControlLabel>State</ControlLabel> | |
386 | - <FormControl | |
387 | - type="text" | |
388 | - value={this.state.state} | |
389 | - placeholder="Tamilnadu" | |
390 | - onChange={e=>this.onUpdate('state',e.target.value)} | |
391 | - /> | |
392 | - </FormGroup> | |
393 | - | |
394 | - <FormGroup controlId="parentName"> | |
395 | - <ControlLabel>Parent Name</ControlLabel> | |
396 | - <FormControl | |
397 | - type="text" | |
398 | - value={this.state.parentName} | |
399 | - placeholder="John" | |
400 | - onChange={e=>this.onUpdate('parentName',e.target.value)} | |
401 | - /> | |
402 | - </FormGroup> | |
403 | - | |
404 | - <FormGroup controlId="parentEmail"> | |
405 | - <ControlLabel>Parent Email</ControlLabel> | |
406 | - <FormControl | |
407 | - type="text" | |
408 | - value={this.state.parentEmail} | |
409 | - placeholder="john@email.com" | |
410 | - onChange={e=>this.onUpdate('parentEmail',e.target.value)} | |
411 | - /> | |
412 | - </FormGroup> | |
413 | - | |
414 | - <FormGroup controlId="relation"> | |
415 | - <ControlLabel>Relation</ControlLabel> | |
416 | - <FormControl | |
417 | - type="text" | |
418 | - value={this.state.relation} | |
419 | - placeholder="Father" | |
420 | - onChange={e=>this.onUpdate('relation',e.target.value)} | |
421 | - /> | |
422 | - </FormGroup> | |
423 | - | |
424 | - <FormGroup controlId="profession"> | |
425 | - <ControlLabel>Profession</ControlLabel> | |
426 | - <FormControl | |
427 | - type="text" | |
428 | - value={this.state.profession} | |
429 | - placeholder="Farmer" | |
430 | - onChange={e=>this.onUpdate('profession',e.target.value)} | |
431 | - /> | |
432 | - </FormGroup> | |
433 | - | |
434 | - <FormGroup controlId="parentGender"> | |
435 | - <ControlLabel>Parent Gender</ControlLabel> | |
436 | - <FormControl componentClass="select" | |
437 | - placeholder="select" | |
438 | - value={this.state.parentGender} | |
439 | - onChange={e=>this.onUpdate('parentGender',e.target.value)} | |
440 | - > | |
441 | - <option value="male">Male</option> | |
442 | - <option value="female">Female</option> | |
443 | - </FormControl> | |
444 | - </FormGroup> | |
445 | - | |
446 | - <FormGroup controlId="parentPhone"> | |
447 | - <ControlLabel>Parent Phone</ControlLabel> | |
448 | - <FormControl | |
449 | - type="text" | |
450 | - value={this.state.parentPhone} | |
451 | - placeholder="9876543210" | |
452 | - onChange={e=>this.onUpdate('parentPhone',e.target.value)} | |
453 | - /> | |
454 | - </FormGroup> | |
455 | - | |
456 | - <FormGroup controlId="parentAddress"> | |
457 | - <ControlLabel>Parent Address</ControlLabel> | |
458 | - <FormControl | |
459 | - type="text" | |
460 | - value={this.state.parentAddress} | |
461 | - placeholder="#12, street, town" | |
462 | - onChange={e=>this.onUpdate('parentAddress',e.target.value)} | |
463 | - /> | |
464 | - </FormGroup> | |
465 | - | |
466 | - <FormGroup controlId="parentCity"> | |
467 | - <ControlLabel>Parent City</ControlLabel> | |
468 | - <FormControl | |
469 | - type="text" | |
470 | - value={this.state.parentCity} | |
471 | - placeholder="Chennai" | |
472 | - onChange={e=>this.onUpdate('parentCity',e.target.value)} | |
473 | - /> | |
474 | - </FormGroup> | |
475 | - | |
476 | - <FormGroup controlId="parentState"> | |
477 | - <ControlLabel>Parent State</ControlLabel> | |
478 | - <FormControl | |
479 | - type="text" | |
480 | - value={this.state.parentState} | |
481 | - placeholder="Tamilnadu" | |
482 | - onChange={e=>this.onUpdate('parentState',e.target.value)} | |
483 | - /> | |
484 | - </FormGroup> | |
485 | - | |
486 | - <FormGroup controlId="parentZipcode"> | |
487 | - <ControlLabel>Parent Zipcode</ControlLabel> | |
488 | - <FormControl | |
489 | - type="text" | |
490 | - value={this.state.parentZipcode} | |
491 | - placeholder="600031" | |
492 | - onChange={e=>this.onUpdate('parentZipcode',e.target.value)} | |
493 | - /> | |
494 | - </FormGroup> | |
495 | - <Button type="submit" bsStyle="default">Add Student</Button> | |
496 | - </Form> | |
497 | - ); | |
498 | - }; | |
499 | - | |
500 | -}; |
imports/client/views/org/admin/settings/students/index.js
... | ... | @@ -1,69 +0,0 @@ |
1 | -// import { StudentDataController } from '/imports/client/views/org/admin/students/index' | |
2 | -import _ from 'lodash'; | |
3 | -import { | |
4 | - composeWithTracker, | |
5 | - compose, | |
6 | - composeAll | |
7 | - } from 'react-komposer'; | |
8 | -import { Loading } from '/imports/client/components/Loading'; | |
9 | - | |
10 | -import { Orgs } from '/imports/collections/orgs/index'; | |
11 | -import { Users } from '/imports/collections/users/index'; | |
12 | -import { StudentView } from './StudentView'; | |
13 | -import { Students } from '/imports/collections/students/index'; | |
14 | - | |
15 | - | |
16 | -const meteorTick = (props, onData) => { | |
17 | - Shelf.layout.set({ | |
18 | - bulb: 'SETTINGS', | |
19 | - subbulb: 'USERS', | |
20 | - view: 'STUDENTS' | |
21 | - }); | |
22 | - const handles = [ | |
23 | - Meteor.subscribe('users.current'), | |
24 | - Meteor.subscribe('orgs.current'), | |
25 | - Meteor.subscribe('users.forMyOrg'), | |
26 | - Meteor.subscribe('student.forMyOrg'), | |
27 | - ]; | |
28 | - | |
29 | - if(_.every(handles, (handle) => (handle.ready()) )) { | |
30 | - const user = Users.current(); | |
31 | - const org = Orgs.current(); | |
32 | - students = Users.find({"role":"STUDENT"}).fetch() ? Users.find({"role":"STUDENT"}).fetch() : ""; | |
33 | - studentData = Students.find().fetch() ? Students.find().fetch() : ""; | |
34 | - for(var i=0; i< studentData.length; i++){ | |
35 | - for(var j=0; j< students.length; j++){ | |
36 | - if(studentData[i].userId == students[j]._id && studentData[i].admissionId){ | |
37 | - studentData[i].firstName = students[j].firstName; | |
38 | - studentData[i].lastName = students[j].lastName; | |
39 | - }else{ | |
40 | - | |
41 | - } | |
42 | - } | |
43 | - } | |
44 | - onData(null, { | |
45 | - data: { | |
46 | - user: user, | |
47 | - org: org, | |
48 | - studentData: studentData | |
49 | - }, | |
50 | - }); | |
51 | - } | |
52 | - | |
53 | - return () => { | |
54 | - _.each(handles, (handle) => handle.stop() ); | |
55 | - }; | |
56 | -}; | |
57 | - | |
58 | - | |
59 | -const reduxTick = (props, onData) => { | |
60 | - onData(null, { | |
61 | - data: {} | |
62 | - }); | |
63 | -}; | |
64 | - | |
65 | - | |
66 | -export const StudentDataController = composeAll( | |
67 | - composeWithTracker(meteorTick, Loading), | |
68 | - compose(reduxTick, Loading), | |
69 | -)(StudentView); |
imports/client/views/org/admin/settings/students/student.css
imports/client/views/org/admin/settings/students/view/StudentRow.js
... | ... | @@ -1,66 +0,0 @@ |
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, | |
7 | - FormControl,Glyphicon,Button } from 'react-bootstrap'; | |
8 | - | |
9 | - | |
10 | -export class StudentRow extends Component { | |
11 | - | |
12 | - constructor(props) { | |
13 | - super(props); | |
14 | - this.state = { | |
15 | - editOpen: false, | |
16 | - }; | |
17 | - this.onUpdate = this.onUpdate.bind(this); | |
18 | - this.toggleEditOpen = this.toggleEditOpen.bind(this); | |
19 | - this.deleteStudent = this.deleteStudent.bind(this); | |
20 | - }; | |
21 | - | |
22 | - onUpdate(key, value) { | |
23 | - this.setState({[key]: value}); | |
24 | - }; | |
25 | - toggleEditOpen(){ | |
26 | - this.setState({ | |
27 | - editOpen : !this.state.editOpen | |
28 | - }) | |
29 | - } | |
30 | - deleteStudent(){ | |
31 | - console.log("Delete"); | |
32 | - console.log(this.props.student._id); | |
33 | - } | |
34 | - render() { | |
35 | - const {student} = this.props; | |
36 | - if(student.firstName){ | |
37 | - return ( | |
38 | - <tr> | |
39 | - <td>{student.firstName}</td> | |
40 | - <td>{student.lastName}</td> | |
41 | - <td>{student.class}</td> | |
42 | - <td>{student.dob? moment(student.dob).format("LL") : <span></span>}</td> | |
43 | - <td><span className="label label-success">Active</span></td> | |
44 | - <td className="text-center"> | |
45 | - <ul className="icons-list"> | |
46 | - <li className={this.state.editOpen? "dropdown open": "dropdown" }> | |
47 | - <span className="dropdown-toggle" onClick={this.toggleEditOpen}> | |
48 | - <i className="icon-menu9"></i> | |
49 | - </span> | |
50 | - <ul className="dropdown-menu dropdown-menu-right"> | |
51 | - <li onClick={this.viewStudent}><Link to={`/student/${student._id}`}><span><i className="fa fa-binoculars"></i>View </span></Link></li> | |
52 | - <li onClick={this.editStudent}><span><i className="fa fa-pencil-square"></i> Edit </span></li> | |
53 | - <li onClick={this.deleteStudent}><span><i className="fa fa-exclamation-triangle"></i> Delete</span></li> | |
54 | - </ul> | |
55 | - </li> | |
56 | - </ul> | |
57 | - </td> | |
58 | - </tr> | |
59 | - ); | |
60 | - }else { | |
61 | - return null; | |
62 | - } | |
63 | - | |
64 | - }; | |
65 | - | |
66 | -}; |
imports/client/views/org/admin/settings/students/view/StudentTable.js
... | ... | @@ -1,85 +0,0 @@ |
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, | |
8 | - FormControl,Glyphicon,Button, } from 'react-bootstrap'; | |
9 | -import {moment} from 'meteor/momentjs:moment' | |
10 | -import {StudentRow} from './StudentRow' | |
11 | -import {BootstrapTable, TableHeaderColumn}from 'react-bootstrap-table'; | |
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 | - cell = new Date(cell); | |
37 | - return `${('0' + cell.getDate()).slice(-2)}/${('0' + (cell.getMonth() + 1)).slice(-2)}/${cell.getFullYear()}`; | |
38 | - } | |
39 | -} | |
40 | -export class StudentTable extends Component { | |
41 | - | |
42 | - constructor(props) { | |
43 | - super(props); | |
44 | - this.state = { | |
45 | - show: false, | |
46 | - panleOpen: true, | |
47 | - }; | |
48 | - this.onUpdate = this.onUpdate.bind(this); | |
49 | - this.togglePanel = this.togglePanel.bind(this); | |
50 | - }; | |
51 | - onUpdate(key, value) { | |
52 | - this.setState({[key]: value}); | |
53 | - }; | |
54 | - togglePanel(){ | |
55 | - this.setState({panleOpen: !this.state.panleOpen}); | |
56 | - } | |
57 | - | |
58 | - render() { | |
59 | - studentData = this.props.studentData; | |
60 | - console.log("this.props.studentData"); | |
61 | - console.log(this.props.studentData); | |
62 | - return ( | |
63 | - <div className="panel panel-flat"> | |
64 | - <div className="panel-heading"> | |
65 | - <h5 className="panel-title">Student Details</h5> | |
66 | - <div className="heading-elements"> | |
67 | - <ul className="icons-list"> | |
68 | - <li onClick={this.togglePanel}><a data-action="collapse" className={this.state.panleOpen?"rotate-180":null}></a></li> | |
69 | - </ul> | |
70 | - </div> | |
71 | - </div> | |
72 | - <Panel collapsible expanded={this.state.panleOpen}> | |
73 | - <BootstrapTable data={ studentData } pagination={ true } options={ options } > | |
74 | - <TableHeaderColumn dataField='_id' isKey={ true } dataSort={ true } filter={ { type: 'TextFilter' } }>Admission Id</TableHeaderColumn> | |
75 | - <TableHeaderColumn dataField='firstName' dataSort={ true } filter={ { type: 'TextFilter' } }>First Name</TableHeaderColumn> | |
76 | - <TableHeaderColumn dataField='lastName' dataSort={ true } filter={ { type: 'TextFilter' } }>Last Name</TableHeaderColumn> | |
77 | - <TableHeaderColumn dataField='class' dataSort={ true } filter={ { type: 'TextFilter' } }>Class</TableHeaderColumn> | |
78 | - <TableHeaderColumn dataField='dob' dataFormat={ dateFormatter } >DOB</TableHeaderColumn> | |
79 | - </BootstrapTable> | |
80 | - </Panel> | |
81 | - </div> | |
82 | - ); | |
83 | - }; | |
84 | - | |
85 | -}; |
imports/client/views/org/admin/users/list/AdminUsersList.js
... | ... | @@ -0,0 +1,63 @@ |
1 | +import _ from 'lodash'; | |
2 | +import { Meteor } from 'meteor/meteor'; | |
3 | +import React, { Component } from 'react'; | |
4 | +import { Link } from 'react-router'; | |
5 | +import { Avatar } from '/imports/client/components/Avatar'; | |
6 | +import { Icon } from '/imports/client/components/Icon'; | |
7 | +import classNames from 'classnames'; | |
8 | +import { EnterModule } from '/imports/client/views/org/enter/module/index'; | |
9 | +// import { VerifyModule } from '/imports/client/views/verify/module/index'; | |
10 | +import { Navbar,Modal, Nav, NavItem, | |
11 | + Glyphicon, Collapse, | |
12 | + NavbarToggler, NavbarBrand, | |
13 | + NavLink, DropdownItem, DropdownToggle, DropdownMenu, | |
14 | + NavDropdown, MenuItem, Breadcrumb } from 'react-bootstrap'; | |
15 | + import { VerifyModule } from '/imports/client/views/verify/module/index' | |
16 | + | |
17 | +var Accordion = require('react-bootstrap').Accordion; | |
18 | +var Panel = require('react-bootstrap').Panel; | |
19 | +export class AdminUsersList extends Component { | |
20 | + render() { | |
21 | + return ( | |
22 | + <div className="row"> | |
23 | + <div className="col-lg-3 col-md-6"> | |
24 | + <div className="thumbnail"> | |
25 | + <Link to="/students" > | |
26 | + <div className="thumb thumb-rounded"> | |
27 | + <img src="assets/images/download2.png" alt="" /> | |
28 | + </div> | |
29 | + <div className="caption text-center"> | |
30 | + <h6 className="text-semibold no-margin">Students <small className="display-block">Click to view</small></h6> | |
31 | + </div> | |
32 | + </Link> | |
33 | + </div> | |
34 | + </div> | |
35 | + <div className="col-lg-3 col-md-6"> | |
36 | + <div className="thumbnail"> | |
37 | + <Link to="/staff" > | |
38 | + <div className="thumb thumb-rounded"> | |
39 | + <img src="assets/images/download3.png" alt=""/> | |
40 | + </div> | |
41 | + <div className="caption text-center"> | |
42 | + <h6 className="text-semibold no-margin">Teachers <small className="display-block">Click to view</small></h6> | |
43 | + </div> | |
44 | + </Link> | |
45 | + </div> | |
46 | + </div> | |
47 | + <div className="col-lg-3 col-md-6"> | |
48 | + <div className="thumbnail"> | |
49 | + <Link to="/parents" > | |
50 | + <div className="thumb thumb-rounded"> | |
51 | + <img src="assets/images/download3.png" alt=""/> | |
52 | + </div> | |
53 | + <div className="caption text-center"> | |
54 | + <h6 className="text-semibold no-margin">Parents <small className="display-block">Click to view</small></h6> | |
55 | + </div> | |
56 | + </Link> | |
57 | + </div> | |
58 | + </div> | |
59 | + </div> | |
60 | + ); | |
61 | + }; | |
62 | + | |
63 | +}; | ... | ... |
imports/client/views/org/admin/users/list/index.js
... | ... | @@ -0,0 +1,50 @@ |
1 | +// import { MailModule } from '/imports/client/views/org/admin/mailbox/module/index' | |
2 | +import { | |
3 | + composeWithTracker, | |
4 | + compose, | |
5 | + composeAll | |
6 | + } from 'react-komposer'; | |
7 | +import { AdminUsersList } from './AdminUsersList'; | |
8 | +import { Loading } from '/imports/client/components/Loading'; | |
9 | + | |
10 | +import { Users } from '/imports/collections/users/index'; | |
11 | +import { Orgs } from '/imports/collections/orgs/index'; | |
12 | + | |
13 | + | |
14 | +const meteorTick = (props, onData) => { | |
15 | + | |
16 | + const handles = [ | |
17 | + Meteor.subscribe('users.current'), | |
18 | + Meteor.subscribe('orgs.current'), | |
19 | + ]; | |
20 | + | |
21 | + const user = Users.current(); | |
22 | + | |
23 | + if(_.every(handles, (handle) => (handle.ready()) ) && user) { | |
24 | + onData(null, { | |
25 | + layout: Shelf.layout.get(), | |
26 | + data: { | |
27 | + companyId: props.params.companyId, | |
28 | + user: Users.current(), | |
29 | + org: Orgs.current(), | |
30 | + }, | |
31 | + }); | |
32 | + } | |
33 | + | |
34 | + return () => { | |
35 | + _.each(handles, (handle) => handle.stop() ); | |
36 | + }; | |
37 | +}; | |
38 | + | |
39 | + | |
40 | +const reduxTick = (props, onData) => { | |
41 | + onData(null, { | |
42 | + data: {} | |
43 | + }); | |
44 | +}; | |
45 | + | |
46 | + | |
47 | +export const AdminUsersListController = composeAll( | |
48 | + composeWithTracker(meteorTick, Loading), | |
49 | + compose(reduxTick, Loading), | |
50 | +)(AdminUsersList); | ... | ... |
imports/client/views/org/admin/users/module/AdminUserViewLayout.js
... | ... | @@ -0,0 +1,50 @@ |
1 | +import _ from 'lodash'; | |
2 | +import { Meteor } from 'meteor/meteor'; | |
3 | + | |
4 | +import React, { Component } from 'react'; | |
5 | +import { Link } from 'react-router'; | |
6 | +import classNames from 'classnames'; | |
7 | +import { Users } from '/imports/collections/users/index'; | |
8 | +import { If, Case } from '/imports/client/components/Logic'; | |
9 | +import {Header} from './Header' | |
10 | + | |
11 | + | |
12 | +export class AdminUserViewLayout extends Component { | |
13 | + | |
14 | + renderMenuItem(bulb, label, path, auth) { | |
15 | + const user = Users.current(); | |
16 | + return ( | |
17 | + <If | |
18 | + if = {(user.getRole() == "SECRETARY") || auth.indexOf(user.getRole()) !== -1 || auth[0] == "ALL"} | |
19 | + then = {() => ( | |
20 | + <Link | |
21 | + to = {path} | |
22 | + className = {classNames( | |
23 | + "tabsLayout-menuItem", | |
24 | + (bulb === this.props.layout.subbulb) && 'active' | |
25 | + )} | |
26 | + > | |
27 | + {label} | |
28 | + </Link> | |
29 | + )} | |
30 | + /> | |
31 | + ); | |
32 | + }; | |
33 | + | |
34 | + renderSeparator() { | |
35 | + return <div className = "tabsLayout-menuSeparator"/>; | |
36 | + }; | |
37 | + | |
38 | + render() { | |
39 | + const user = this.props.data.user; | |
40 | + return ( | |
41 | + <div className = "tabsLayout-box"> | |
42 | + <Header /> | |
43 | + <div className = "tabsLayout-content"> | |
44 | + { this.props.children } | |
45 | + </div> | |
46 | + </div> | |
47 | + ); | |
48 | + }; | |
49 | + | |
50 | +}; | ... | ... |
imports/client/views/org/admin/users/module/Header.js
... | ... | @@ -0,0 +1,85 @@ |
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, | |
7 | + FormControl,Glyphicon,Button } from 'react-bootstrap'; | |
8 | +import './header.css'; | |
9 | + | |
10 | + | |
11 | +export class Header extends Component { | |
12 | + | |
13 | + constructor(props) { | |
14 | + super(props); | |
15 | + this.state = { | |
16 | + | |
17 | + }; | |
18 | + this.onUpdate = this.onUpdate.bind(this); | |
19 | + }; | |
20 | + | |
21 | + onUpdate(key, value) { | |
22 | + this.setState({[key]: value}); | |
23 | + }; | |
24 | + | |
25 | + render() { | |
26 | + return ( | |
27 | + <div className = "enterPane-box"> | |
28 | + <div className="row"> | |
29 | + | |
30 | + <div className="col-lg-4 col-md-8"> | |
31 | + <Link to="/students" > | |
32 | + <div className="panel panel-body"> | |
33 | + <div className="media"> | |
34 | + <div className="media-left"> | |
35 | + <img src="assets/images/download2.png" className="img-circle" alt=""/> | |
36 | + </div> | |
37 | + | |
38 | + <div className="media-body"> | |
39 | + <h6 className="media-heading">Students</h6> | |
40 | + <p className="text-muted">Click to view</p> | |
41 | + </div> | |
42 | + </div> | |
43 | + </div> | |
44 | + </Link> | |
45 | + </div> | |
46 | + <div className="col-lg-4 col-md-8"> | |
47 | + <Link to="/staff" > | |
48 | + <div className="panel panel-body"> | |
49 | + <div className="media"> | |
50 | + <div className="media-left"> | |
51 | + <img src="assets/images/download.png" className="img-circle" alt=""/> | |
52 | + </div> | |
53 | + | |
54 | + <div className="media-body"> | |
55 | + <h6 className="media-heading">Teachers</h6> | |
56 | + <p className="text-muted">Click to view</p> | |
57 | + </div> | |
58 | + </div> | |
59 | + </div> | |
60 | + </Link> | |
61 | + </div> | |
62 | + | |
63 | + <div className="col-lg-4 col-md-8"> | |
64 | + <Link to="/parents" > | |
65 | + <div className="panel panel-body"> | |
66 | + <div className="media"> | |
67 | + <div className="media-left"> | |
68 | + <img src="assets/images/download3.png" className="img-circle" alt=""/> | |
69 | + </div> | |
70 | + | |
71 | + <div className="media-body"> | |
72 | + <h6 className="media-heading">Parents</h6> | |
73 | + <p className="text-muted">Click to view</p> | |
74 | + </div> | |
75 | + </div> | |
76 | + </div> | |
77 | + </Link> | |
78 | + </div> | |
79 | + | |
80 | + </div> | |
81 | + </div> | |
82 | + ); | |
83 | + }; | |
84 | + | |
85 | +}; | ... | ... |
imports/client/views/org/admin/users/module/header.css
imports/client/views/org/admin/users/module/index.js
... | ... | @@ -0,0 +1,50 @@ |
1 | +// import { MailModule } from '/imports/client/views/org/admin/mailbox/module/index' | |
2 | +import { | |
3 | + composeWithTracker, | |
4 | + compose, | |
5 | + composeAll | |
6 | + } from 'react-komposer'; | |
7 | +import { AdminUserViewLayout } from './AdminUserViewLayout'; | |
8 | +import { Loading } from '/imports/client/components/Loading'; | |
9 | + | |
10 | +import { Users } from '/imports/collections/users/index'; | |
11 | +import { Orgs } from '/imports/collections/orgs/index'; | |
12 | + | |
13 | + | |
14 | +const meteorTick = (props, onData) => { | |
15 | + | |
16 | + const handles = [ | |
17 | + Meteor.subscribe('users.current'), | |
18 | + Meteor.subscribe('orgs.current'), | |
19 | + ]; | |
20 | + | |
21 | + const user = Users.current(); | |
22 | + | |
23 | + if(_.every(handles, (handle) => (handle.ready()) ) && user) { | |
24 | + onData(null, { | |
25 | + layout: Shelf.layout.get(), | |
26 | + data: { | |
27 | + companyId: props.params.companyId, | |
28 | + user: Users.current(), | |
29 | + org: Orgs.current(), | |
30 | + }, | |
31 | + }); | |
32 | + } | |
33 | + | |
34 | + return () => { | |
35 | + _.each(handles, (handle) => handle.stop() ); | |
36 | + }; | |
37 | +}; | |
38 | + | |
39 | + | |
40 | +const reduxTick = (props, onData) => { | |
41 | + onData(null, { | |
42 | + data: {} | |
43 | + }); | |
44 | +}; | |
45 | + | |
46 | + | |
47 | +export const AdminUsersModule = composeAll( | |
48 | + composeWithTracker(meteorTick, Loading), | |
49 | + compose(reduxTick, Loading), | |
50 | +)(AdminUserViewLayout); | ... | ... |
imports/client/views/org/admin/users/parents/index.js
... | ... | @@ -0,0 +1,72 @@ |
1 | +import _ from 'lodash'; | |
2 | +import { | |
3 | + composeWithTracker, | |
4 | + compose, | |
5 | + composeAll | |
6 | + } from 'react-komposer'; | |
7 | +import { Loading } from '/imports/client/components/Loading'; | |
8 | + | |
9 | +import { Orgs } from '/imports/collections/orgs/index'; | |
10 | +import { Users } from '/imports/collections/users/index'; | |
11 | +import { Parents } from '/imports/collections/parents/index'; | |
12 | +import { ParentsView } from './parentsview'; | |
13 | + | |
14 | + | |
15 | + | |
16 | +const meteorTick = (props, onData) => { | |
17 | + Shelf.layout.set({ | |
18 | + bulb: 'SETTINGS', | |
19 | + subbulb: 'USERS', | |
20 | + view: 'PARENTS' | |
21 | + }); | |
22 | + const handles = [ | |
23 | + Meteor.subscribe('users.current'), | |
24 | + Meteor.subscribe('orgs.current'), | |
25 | + Meteor.subscribe('users.forMyOrg'), | |
26 | + Meteor.subscribe('parent.forMyOrg'), | |
27 | + ]; | |
28 | + | |
29 | + if(_.every(handles, (handle) => (handle.ready()) )) { | |
30 | + const user = Users.current(); | |
31 | + const org = Orgs.current(); | |
32 | + console.log("parents"); | |
33 | + parent = Users.find({"role":"PARENT"}).fetch() ? Users.find({"role":"PARENT"}).fetch() : ""; | |
34 | + console.log(Users.find({"role":"PARENT"}).fetch()); | |
35 | + parentData = Parents.find().fetch() ? Parents.find().fetch() : ""; | |
36 | + console.log("parentData"); | |
37 | + console.log(parentData); | |
38 | + for(var i=0; i< parent.length; i++){ | |
39 | + for(var j=0; j< parentData.length; j++){ | |
40 | + if(parent[i]._id == parentData[j].userId){ | |
41 | + parent[i].relationship = parentData[j].relationship; | |
42 | + parent[i].profession = parentData[j].profession; | |
43 | + parent[i].relationship = parentData[j].relationship; | |
44 | + } | |
45 | + } | |
46 | + } | |
47 | + onData(null, { | |
48 | + data: { | |
49 | + user: user, | |
50 | + org: org, | |
51 | + parent: parent | |
52 | + }, | |
53 | + }); | |
54 | + } | |
55 | + | |
56 | + return () => { | |
57 | + _.each(handles, (handle) => handle.stop() ); | |
58 | + }; | |
59 | +}; | |
60 | + | |
61 | + | |
62 | +const reduxTick = (props, onData) => { | |
63 | + onData(null, { | |
64 | + data: {} | |
65 | + }); | |
66 | +}; | |
67 | + | |
68 | + | |
69 | +export const ParentViewController = composeAll( | |
70 | + composeWithTracker(meteorTick, Loading), | |
71 | + compose(reduxTick, Loading), | |
72 | +)(ParentsView); | ... | ... |
imports/client/views/org/admin/users/parents/parentsview.js
... | ... | @@ -0,0 +1,43 @@ |
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, | |
7 | + FormControl,Glyphicon,Button } from 'react-bootstrap'; | |
8 | +import { ParentTable } from './view/ParentTable' | |
9 | + | |
10 | + | |
11 | +export class ParentsView extends Component { | |
12 | + | |
13 | + constructor(props) { | |
14 | + super(props); | |
15 | + this.state = { | |
16 | + | |
17 | + }; | |
18 | + this.onUpdate = this.onUpdate.bind(this); | |
19 | + }; | |
20 | + | |
21 | + onUpdate(key, value) { | |
22 | + this.setState({[key]: value}); | |
23 | + }; | |
24 | + togglePanel(){ | |
25 | + this.setState({panleOpen: !this.state.panleOpen}); | |
26 | + } | |
27 | + | |
28 | + render() { | |
29 | + const {user, org, parent} = this.props.data; | |
30 | + return ( | |
31 | + <div className="container-detached"> | |
32 | + <ParentTable | |
33 | + data = {this.props.data} | |
34 | + parent = {parent} | |
35 | + /> | |
36 | + {/* <AddStaff/> | |
37 | + <UploadCsvStaff /> */} | |
38 | + </div> | |
39 | + ); | |
40 | + }; | |
41 | + | |
42 | + | |
43 | +}; | ... | ... |
imports/client/views/org/admin/users/parents/view/ParentRow.js
... | ... | @@ -0,0 +1,54 @@ |
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, | |
7 | + FormControl,Glyphicon,Button } from 'react-bootstrap'; | |
8 | + | |
9 | + | |
10 | + export class ParentRow extends Component { | |
11 | + | |
12 | + constructor(props) { | |
13 | + super(props); | |
14 | + this.state = { | |
15 | + | |
16 | + }; | |
17 | + this.onUpdate = this.onUpdate.bind(this); | |
18 | + }; | |
19 | + | |
20 | + onUpdate(key, value) { | |
21 | + this.setState({[key]: value}); | |
22 | + }; | |
23 | + | |
24 | + render() { | |
25 | + const {parent} = this.props; | |
26 | + if(parent.firstName){ | |
27 | + return ( | |
28 | + <tr> | |
29 | + <td>{parent.firstName}</td> | |
30 | + <td>{parent.relationship}</td> {/* relationship doesnt reflect here */} | |
31 | + <td><span className="label label-success">Active</span></td> | |
32 | + <td className="text-center"> | |
33 | + <ul className="icons-list"> | |
34 | + <li className="dropdown"> | |
35 | + <a href="#" className="dropdown-toggle" data-toggle="dropdown"> | |
36 | + <i className="icon-menu9"></i> | |
37 | + </a> | |
38 | + <ul className="dropdown-menu dropdown-menu-right"> | |
39 | + <li><a href="#"><i className="icon-file-pdf"></i> Export to .pdf</a></li> | |
40 | + <li><a href="#"><i className="icon-file-excel"></i> Export to .csv</a></li> | |
41 | + <li><a href="#"><i className="icon-file-word"></i> Export to .doc</a></li> | |
42 | + </ul> | |
43 | + </li> | |
44 | + </ul> | |
45 | + </td> | |
46 | + </tr> | |
47 | + ); | |
48 | + }else { | |
49 | + return null; | |
50 | + } | |
51 | + | |
52 | + }; | |
53 | + | |
54 | + }; | ... | ... |
imports/client/views/org/admin/users/parents/view/ParentTable.js
... | ... | @@ -0,0 +1,70 @@ |
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, | |
8 | + FormControl,Glyphicon,Button } from 'react-bootstrap'; | |
9 | +import {moment} from 'meteor/momentjs:moment' | |
10 | +import {ParentRow} from './ParentRow' | |
11 | +import {BootstrapTable, TableHeaderColumn}from 'react-bootstrap-table'; | |
12 | +const options = { | |
13 | + page: 0, // which page you want to show as default | |
14 | + sizePerPageList: [ { | |
15 | + text: '5', value: 5 | |
16 | + }, { | |
17 | + text: '10', value: 10 | |
18 | + }], // you can change the dropdown list for size per page | |
19 | + sizePerPage: 5, // which size per page you want to locate as default | |
20 | + pageStartIndex: 0, // where to start counting the pages | |
21 | + paginationSize: 3, // the pagination bar size. | |
22 | + prePage: 'Prev', // Previous page button text | |
23 | + nextPage: 'Next', // Next page button text | |
24 | + firstPage: 'First', // First page button text | |
25 | + lastPage: 'Last', // Last page button text | |
26 | + paginationShowsTotal: false, // Accept bool or function | |
27 | + paginationPosition: 'bottom' // default is bottom, top and both is all available | |
28 | + // hideSizePerPage: true > You can hide the dropdown for sizePerPage | |
29 | + // alwaysShowAllBtns: true // Always show next and previous button | |
30 | + // withFirstAndLast: false > Hide the going to First and Last page button | |
31 | + }; | |
32 | + | |
33 | +export class ParentTable extends Component { | |
34 | + | |
35 | + constructor(props) { | |
36 | + super(props); | |
37 | + this.state = { | |
38 | + show: false, | |
39 | + panleOpen: true, | |
40 | + }; | |
41 | + this.onUpdate = this.onUpdate.bind(this); | |
42 | + }; | |
43 | + onUpdate(key, value) { | |
44 | + this.setState({[key]: value}); | |
45 | + }; | |
46 | + | |
47 | + render() { | |
48 | + return ( | |
49 | + <div className="panel panel-flat"> | |
50 | + <div className="panel-heading"> | |
51 | + <h5 className="panel-title">Parent Details</h5> | |
52 | + <div className="heading-elements"> | |
53 | + <ul className="icons-list"> | |
54 | + <li onClick={this.togglePanel}><a data-action="collapse" className={this.state.panleOpen?"rotate-180":null}></a></li> | |
55 | + </ul> | |
56 | + </div> | |
57 | + </div> | |
58 | + <Panel collapsible expanded={this.state.panleOpen}> | |
59 | + <BootstrapTable data={ this.props.parent } pagination={ true } options={ options } > | |
60 | + <TableHeaderColumn dataField='srno' isKey={ true } dataSort={ true } filter={ { type: 'TextFilter' } }>Sr No</TableHeaderColumn> | |
61 | + <TableHeaderColumn dataField='firstName' dataSort={ true } filter={ { type: 'TextFilter' } }>Name</TableHeaderColumn> | |
62 | + <TableHeaderColumn dataField='relationship' dataSort={ true } filter={ { type: 'TextFilter' } }>Relationship</TableHeaderColumn> | |
63 | + <TableHeaderColumn dataField='profession' dataSort={ true } filter={ { type: 'TextFilter' } }>Profession</TableHeaderColumn> | |
64 | + </BootstrapTable> | |
65 | + </Panel> | |
66 | + </div> | |
67 | + ); | |
68 | + }; | |
69 | + | |
70 | +}; | ... | ... |
imports/client/views/org/admin/users/staff/StaffView.js
... | ... | @@ -0,0 +1,39 @@ |
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, | |
7 | + FormControl,Glyphicon,Button } from 'react-bootstrap'; | |
8 | +import { StaffTable } from './view/StaffTable' | |
9 | +import { AddStaff } from './add/addStaff' | |
10 | +import { UploadCsvStaff } from './UploadCsvStaff' | |
11 | + | |
12 | +export class StaffView extends Component { | |
13 | + constructor(props) { | |
14 | + super(props); | |
15 | + this.state = { | |
16 | + | |
17 | + }; | |
18 | + this.onUpdate = this.onUpdate.bind(this); | |
19 | + }; | |
20 | + | |
21 | + onUpdate(key, value) { | |
22 | + this.setState({[key]: value}); | |
23 | + }; | |
24 | + | |
25 | + render() { | |
26 | + const {user, org, staff} = this.props.data; | |
27 | + return ( | |
28 | + <div className="container-detached"> | |
29 | + <StaffTable | |
30 | + data = {this.props.data} | |
31 | + staff = {staff} | |
32 | + /> | |
33 | + <AddStaff/> | |
34 | + <UploadCsvStaff /> | |
35 | + </div> | |
36 | + ); | |
37 | + }; | |
38 | + | |
39 | +}; | ... | ... |
imports/client/views/org/admin/users/staff/UploadCsvStaff.js
... | ... | @@ -0,0 +1,103 @@ |
1 | +// import {UploadCsv } from '/imports/collections/students/UploadCsv' | |
2 | +import _ from 'lodash'; | |
3 | +import { Meteor } from 'meteor/meteor'; | |
4 | + | |
5 | +import React, { Component } from 'react'; | |
6 | +import { Link,browserHistory } from 'react-router'; | |
7 | +import { FormGroup,Panel,Table, | |
8 | + ButtonToolbar,Modal,ControlLabel,HelpBlock, | |
9 | + FormControl,Glyphicon,Button } from 'react-bootstrap'; | |
10 | +// import { AddStudentForm } from './addStudentForm'; | |
11 | +import { FilesCollection } from 'meteor/ostrio:files'; | |
12 | +const Papa = this.Papa; | |
13 | +// console.log(this); | |
14 | +const style = { | |
15 | + margin: 12, | |
16 | +}; | |
17 | +function FieldGroup({ id, label, help, ...props }) { | |
18 | + return ( | |
19 | + <FormGroup controlId={id}> | |
20 | + <ControlLabel>{label}</ControlLabel> | |
21 | + <FormControl {...props} /> | |
22 | + {help && <HelpBlock>{help}</HelpBlock>} | |
23 | + </FormGroup> | |
24 | + ); | |
25 | +} | |
26 | +export class UploadCsvStaff extends Component { | |
27 | + constructor(props) { | |
28 | + super(props); | |
29 | + this.state = { | |
30 | + show: false | |
31 | + }; | |
32 | + this.showModal = this.showModal.bind(this); | |
33 | + this.hideModal = this.hideModal.bind(this); | |
34 | + this.onUpdate = this.onUpdate.bind(this); | |
35 | + }; | |
36 | + | |
37 | + showModal() { | |
38 | + this.setState({show: true}); | |
39 | + } | |
40 | + | |
41 | + hideModal() { | |
42 | + this.setState({show: false}); | |
43 | + } | |
44 | + onUpdate(key, value) { | |
45 | + this.setState({[key]: value}); | |
46 | + }; | |
47 | + uploadStaffCsv(e){ | |
48 | + e.preventDefault(); | |
49 | + e.persist(); | |
50 | + var file = $('input[type="file"]').prop("files")[0]; | |
51 | + Papa.parse(file, { | |
52 | + header: true, | |
53 | + complete: function(csvData) { | |
54 | + console.log("csvData"); | |
55 | + console.log(csvData); | |
56 | + if(csvData){ | |
57 | + Meteor.call('staff.uploadCsv', csvData, function (error, result) { | |
58 | + console.log("error"); | |
59 | + console.log(error); | |
60 | + console.log("result"); | |
61 | + console.log(result); | |
62 | + }) | |
63 | + } | |
64 | + } | |
65 | + }); | |
66 | + } | |
67 | + | |
68 | + render() { | |
69 | + console.log(this.props); | |
70 | + return ( | |
71 | + <ButtonToolbar> | |
72 | + <Button bsStyle="primary" onClick={this.showModal}> | |
73 | + Upload CSV | |
74 | + </Button> | |
75 | + <Modal | |
76 | + {...this.props} | |
77 | + show={this.state.show} | |
78 | + onHide={this.hideModal} | |
79 | + dialogClassName="custom-modal" | |
80 | + > | |
81 | + <Modal.Header closeButton> | |
82 | + <Modal.Title id="contained-modal-title-lg">Upload Csv</Modal.Title> | |
83 | + </Modal.Header> | |
84 | + <Modal.Body> | |
85 | + <form onSubmit={ (e) => this.uploadStaffCsv(e) } > | |
86 | + <FieldGroup | |
87 | + id="formControlsFile" | |
88 | + type="file" | |
89 | + label="File" | |
90 | + help="Upload you CSV here." | |
91 | + /> | |
92 | + <Button type="submit" bsStyle="default">Upload File</Button> | |
93 | + </form> | |
94 | + </Modal.Body> | |
95 | + <Modal.Footer> | |
96 | + <Button onClick={this.hideModal}>Close</Button> | |
97 | + </Modal.Footer> | |
98 | + </Modal> | |
99 | + </ButtonToolbar> | |
100 | + ); | |
101 | + }; | |
102 | + | |
103 | +}; | ... | ... |
imports/client/views/org/admin/users/staff/add/AddStaffFormContainer.js
... | ... | @@ -0,0 +1,123 @@ |
1 | +import React, { Component } from 'react' | |
2 | +import StaffForm from './StaffForm' | |
3 | +import Form from '/imports/client/views/core/Form' | |
4 | +import Validator from '/imports/client/views/core/Validator' | |
5 | +import { isRequired, isValidEmail } from '/imports/client/views/core/validations' | |
6 | + | |
7 | +export class AddStaffFormContainer extends Component { | |
8 | + | |
9 | + constructor(props) { | |
10 | + super(props) | |
11 | + this.state = { currentStep: 0 } | |
12 | + this.handleNextClick = this.handleNextClick.bind(this) | |
13 | + this.handleBackClick = this.handleBackClick.bind(this) | |
14 | + this.handleSubmit = this.handleSubmit.bind(this) | |
15 | + } | |
16 | + | |
17 | + handleNextClick() { | |
18 | + console.log("clicked"); | |
19 | + this.form.handleSubmit() | |
20 | + if (this.validator.getErrors() && Object.keys(this.validator.getErrors()).length > 0) return | |
21 | + console.log("after submit"); | |
22 | + this.setState({ currentStep: this.state.currentStep + 1 }) | |
23 | + this.form.resetSubmitted() | |
24 | + } | |
25 | + | |
26 | + handleBackClick() { | |
27 | + this.setState({ currentStep: this.state.currentStep + -1 }) | |
28 | + } | |
29 | + | |
30 | + handleSubmit() { | |
31 | + if (this.state.currentStep === 3) { | |
32 | + Meteor.call('staff.addNew', this.form.state.values, (error, result) => { | |
33 | + console.log(error); | |
34 | + console.log(result); | |
35 | + if(!error){ | |
36 | + this.props.modalState(); | |
37 | + } | |
38 | + }); | |
39 | + } | |
40 | + } | |
41 | + | |
42 | + //render callback | |
43 | + render() { | |
44 | + return ( | |
45 | + <Form | |
46 | + onSubmit={this.handleSubmit} | |
47 | + ref={form => this.form = form} | |
48 | + initialValues={{ | |
49 | + employeeId: '12345', | |
50 | + firstName: 'Test', | |
51 | + lastName: 'Last', | |
52 | + | |
53 | + martialStatus: 'single', | |
54 | + gender: 'male', | |
55 | + dob: '07/03/1993', | |
56 | + | |
57 | + email: 'deepak125.dk+400@gmail.com', | |
58 | + phone: '9876543210', | |
59 | + address: '123', | |
60 | + | |
61 | + teaching: "yes", | |
62 | + type: 'permanent', | |
63 | + doj: '07/03/2016', | |
64 | + | |
65 | + qualifaication: 'Phd', | |
66 | + specialization: 'Maths', | |
67 | + university: 'Pune University', | |
68 | + | |
69 | + degreeFrom: '07/03/2009', | |
70 | + degreeEnded: '07/03/2013', | |
71 | + }} | |
72 | + > | |
73 | + {({ values, setValue, getValue, isSubmitted, isDirty }) => ( | |
74 | + <Validator | |
75 | + values={values} | |
76 | + ref={validator => this.validator = validator} | |
77 | + validations={{ | |
78 | + employeeId: [(value) => isRequired('Admission id', value)], | |
79 | + firstName: [(value) => isRequired('First name', value)], | |
80 | + lastName: [(value) => isRequired('Last name', value)], | |
81 | + | |
82 | + gender: [(value) => isRequired('Gender', value)], | |
83 | + martialStatus: [(value) => isRequired('martialStatus', value)], | |
84 | + dob: [(value) => isRequired('Date of birth', value)], | |
85 | + | |
86 | + teaching: [(value) => this.state.currentStep === 1 && isRequired('teaching', value)], | |
87 | + type: [(value) => this.state.currentStep === 1 && isRequired('type', value)], | |
88 | + doj: [(value) => this.state.currentStep === 1 && isRequired('doj', value)], | |
89 | + desgnation: [(value) => this.state.currentStep === 1 && isRequired('desgnation', value)], | |
90 | + | |
91 | + qualifaication: [(value) => this.state.currentStep === 2 && isRequired('qualifaication', value)], | |
92 | + specialization: [(value) => this.state.currentStep === 2 && isRequired('specialization', value)], | |
93 | + university: [(value) => this.state.currentStep === 2 && isRequired('university', value)], | |
94 | + | |
95 | + degreeFrom: [(value) => this.state.currentStep === 2 && isRequired('degreeFrom', value)], | |
96 | + degreeEnded: [(value) => this.state.currentStep === 2 && isRequired('degreeEnded', value)], | |
97 | + | |
98 | + email: [(value) => this.state.currentStep === 3 && isRequired('Email', value), (value) => this.state.currentStep === 1 && isValidEmail(value)], | |
99 | + phone: [(value) => this.state.currentStep === 3 && isRequired('Phone', value)], | |
100 | + address: [(value) => this.state.currentStep === 3 && isRequired('Address', value)], | |
101 | + city: [(value) => this.state.currentStep === 3 && isRequired('City', value)], | |
102 | + state: [(value) => this.state.currentStep === 3 && isRequired('State', value)], | |
103 | + | |
104 | + }} | |
105 | + > | |
106 | + {({ errors }) => ( | |
107 | + <StaffForm | |
108 | + isDirty={isDirty} | |
109 | + setValue={setValue} | |
110 | + getValue={getValue} | |
111 | + isSubmitted={isSubmitted} | |
112 | + errors={errors} | |
113 | + onNextClick={this.handleNextClick} | |
114 | + onBackClick={this.handleBackClick} | |
115 | + currentStep={this.state.currentStep} | |
116 | + /> | |
117 | + )} | |
118 | + </Validator> | |
119 | + )} | |
120 | + </Form> | |
121 | + ) | |
122 | + } | |
123 | +} | ... | ... |
imports/client/views/org/admin/users/staff/add/StaffForm.js
... | ... | @@ -0,0 +1,417 @@ |
1 | +import React, { PropTypes } from 'react' | |
2 | +import { | |
3 | + Row, | |
4 | + Col, | |
5 | + FormGroup, | |
6 | + FormControl, | |
7 | + Button | |
8 | +} from 'react-bootstrap' | |
9 | +import DatePicker from '/imports/client/views/core/DatePicker' | |
10 | +import Label from '/imports/client/views/core/Label' | |
11 | +import Stepper from '/imports/client/views/core/Stepper' | |
12 | +import ErrorLabel from '/imports/client/views/core/ErrorLabel' | |
13 | + | |
14 | +const StaffForm = props => ( | |
15 | + <div className="stepy-validation"> | |
16 | + <Stepper | |
17 | + steps={[ | |
18 | + { | |
19 | + label: 'Personal data', | |
20 | + active: props.currentStep === 0, | |
21 | + }, | |
22 | + { | |
23 | + label: 'Additional Info', | |
24 | + active: props.currentStep === 1, | |
25 | + }, | |
26 | + { | |
27 | + label: 'Professional Info', | |
28 | + active: props.currentStep === 2, | |
29 | + }, | |
30 | + { | |
31 | + label: 'Contact Info', | |
32 | + active: props.currentStep === 3, | |
33 | + }, | |
34 | + ]} | |
35 | + /> | |
36 | + {props.currentStep === 0 && ( | |
37 | + <fieldset title="1"> | |
38 | + <legend className="text-semibold">Personal data</legend> | |
39 | + <Row> | |
40 | + <Col xs={12} sm={4}> | |
41 | + <FormGroup controlId="employeeId"> | |
42 | + <Label required>Employee ID</Label> | |
43 | + <FormControl | |
44 | + type="text" | |
45 | + value={props.getValue('employeeId')} | |
46 | + placeholder="employee Id" | |
47 | + onChange={e => props.setValue('employeeId', e.target.value)} | |
48 | + /> | |
49 | + {props.isSubmitted() && props.errors && props.errors.employeeId && ( | |
50 | + <ErrorLabel> {props.errors.employeeId} </ErrorLabel> | |
51 | + )} | |
52 | + </FormGroup> | |
53 | + </Col> | |
54 | + | |
55 | + <Col xs={12} sm={4}> | |
56 | + <FormGroup controlId="firstName"> | |
57 | + <Label required>First Name</Label> | |
58 | + <FormControl | |
59 | + type="text" | |
60 | + value={props.getValue('firstName')} | |
61 | + placeholder="First Name" | |
62 | + onChange={e => props.setValue('firstName', e.target.value)} | |
63 | + /> | |
64 | + {props.isSubmitted() && props.errors && props.errors.firstName && ( | |
65 | + <ErrorLabel> {props.errors.firstName} </ErrorLabel> | |
66 | + )} | |
67 | + </FormGroup> | |
68 | + </Col> | |
69 | + | |
70 | + <Col xs={12} sm={4}> | |
71 | + <FormGroup controlId="lastName"> | |
72 | + <Label required>Last Name</Label> | |
73 | + <FormControl | |
74 | + type="text" | |
75 | + value={props.getValue('lastName')} | |
76 | + placeholder="Last Name" | |
77 | + onChange={e => props.setValue('lastName', e.target.value)} | |
78 | + /> | |
79 | + {props.isSubmitted() && props.errors && props.errors.lastName && ( | |
80 | + <ErrorLabel> {props.errors.lastName} </ErrorLabel> | |
81 | + )} | |
82 | + </FormGroup> | |
83 | + </Col> | |
84 | + </Row> | |
85 | + <Row> | |
86 | + <Col xs={12} sm={4}> | |
87 | + <FormGroup controlId="formControlsSelect"> | |
88 | + <Label>Gender</Label> | |
89 | + <FormControl componentClass="select" | |
90 | + placeholder="select" | |
91 | + value={props.getValue('gender')} | |
92 | + onChange={e => props.setValue('gender', e.target.value)} | |
93 | + > | |
94 | + <option value="male">Male</option> | |
95 | + <option value="female">Female</option> | |
96 | + </FormControl> | |
97 | + {props.isSubmitted() && props.errors && props.errors.gender && ( | |
98 | + <ErrorLabel> {props.errors.gender} </ErrorLabel> | |
99 | + )} | |
100 | + </FormGroup> | |
101 | + </Col> | |
102 | + | |
103 | + <Col xs={12} sm={4}> | |
104 | + <FormGroup controlId="formControlsSelect"> | |
105 | + <Label>martialStatus</Label> | |
106 | + <FormControl componentClass="select" | |
107 | + placeholder="select" | |
108 | + value={props.getValue('martialStatus')} | |
109 | + onChange={e => props.setValue('martialStatus', e.target.value)} | |
110 | + > | |
111 | + <option value="single">Single</option> | |
112 | + <option value="married">Married</option> | |
113 | + <option value="divorced">Divorced</option> | |
114 | + </FormControl> | |
115 | + {props.isSubmitted() && props.errors && props.errors.martialStatus && ( | |
116 | + <ErrorLabel> {props.errors.martialStatus} </ErrorLabel> | |
117 | + )} | |
118 | + </FormGroup> | |
119 | + </Col> | |
120 | + | |
121 | + <Col xs={12} sm={4}> | |
122 | + <FormGroup> | |
123 | + <Label required>Date of birth</Label> | |
124 | + <DatePicker | |
125 | + id="dob" | |
126 | + setValue = {props.setValue} | |
127 | + value={props.getValue('dob')} | |
128 | + onChange={(e) => { | |
129 | + props.setValue('dob', e.target.value) | |
130 | + }} | |
131 | + /> | |
132 | + {props.isSubmitted() && props.errors && props.errors.dob && ( | |
133 | + <ErrorLabel> {props.errors.dob} </ErrorLabel> | |
134 | + )} | |
135 | + </FormGroup> | |
136 | + </Col> | |
137 | + </Row> | |
138 | + </fieldset> | |
139 | + )} | |
140 | + {props.currentStep === 1 && ( | |
141 | + <fieldset title="Academic"> | |
142 | + <legend className="text-semibold">Additional Info</legend> | |
143 | + <Row> | |
144 | + <Col xs={12} sm={4}> | |
145 | + <FormGroup controlId="desgnation"> | |
146 | + <Label required>Desgnation</Label> | |
147 | + <FormControl | |
148 | + type="text" | |
149 | + value={props.getValue('desgnation')} | |
150 | + placeholder="Professor" | |
151 | + onChange={e => props.setValue('desgnation', e.target.value)} | |
152 | + /> | |
153 | + {props.isSubmitted() && props.errors && props.errors.desgnation && ( | |
154 | + <ErrorLabel> {props.errors.desgnation} </ErrorLabel> | |
155 | + )} | |
156 | + </FormGroup> | |
157 | + </Col> | |
158 | + <Col xs={12} sm={4}> | |
159 | + <FormGroup controlId="formControlsSelect"> | |
160 | + <Label>Teaching Staff?</Label> | |
161 | + <FormControl componentClass="select" | |
162 | + placeholder="select" | |
163 | + value={props.getValue('teaching')} | |
164 | + onChange={e => props.setValue('teaching', e.target.value)} | |
165 | + > | |
166 | + <option value="yes">Yes</option> | |
167 | + <option value="no">No</option> | |
168 | + </FormControl> | |
169 | + {props.isSubmitted() && props.errors && props.errors.teaching && ( | |
170 | + <ErrorLabel> {props.errors.teaching} </ErrorLabel> | |
171 | + )} | |
172 | + </FormGroup> | |
173 | + </Col> | |
174 | + <Col xs={12} sm={4}> | |
175 | + <FormGroup controlId="formControlsSelect"> | |
176 | + <Label>Type</Label> | |
177 | + <FormControl componentClass="select" | |
178 | + placeholder="select" | |
179 | + value={props.getValue('type')} | |
180 | + onChange={e => props.setValue('type', e.target.value)} | |
181 | + > | |
182 | + <option value="permanent">Permanent</option> | |
183 | + <option value="temporary">Temporary</option> | |
184 | + </FormControl> | |
185 | + {props.isSubmitted() && props.errors && props.errors.type && ( | |
186 | + <ErrorLabel> {props.errors.type} </ErrorLabel> | |
187 | + )} | |
188 | + </FormGroup> | |
189 | + </Col> | |
190 | + </Row> | |
191 | + <Row> | |
192 | + <Col xs={12} sm={4}> | |
193 | + <FormGroup> | |
194 | + <Label required>Date of Joining</Label> | |
195 | + <DatePicker | |
196 | + id="doj" | |
197 | + setValue = {props.setValue} | |
198 | + value={props.getValue('doj')} | |
199 | + onChange={(e) => { | |
200 | + props.setValue('doj', e.target.value) | |
201 | + }} | |
202 | + /> | |
203 | + {props.isSubmitted() && props.errors && props.errors.doj && ( | |
204 | + <ErrorLabel> {props.errors.doj} </ErrorLabel> | |
205 | + )} | |
206 | + </FormGroup> | |
207 | + </Col> | |
208 | + </Row> | |
209 | + </fieldset> | |
210 | + )} | |
211 | + {props.currentStep === 2 && ( | |
212 | + <fieldset title="Professional Info"> | |
213 | + <legend className="text-semibold">Professional Info</legend> | |
214 | + <Row> | |
215 | + <Col xs={12} sm={4}> | |
216 | + <FormGroup controlId="qualifaication"> | |
217 | + <Label required>Qualifaication</Label> | |
218 | + <FormControl | |
219 | + type="text" | |
220 | + value={props.getValue('qualifaication')} | |
221 | + placeholder="Ex: Phd" | |
222 | + onChange={e => props.setValue('qualifaication', e.target.value)} | |
223 | + /> | |
224 | + {props.isSubmitted() && props.errors && props.errors.qualifaication && ( | |
225 | + <ErrorLabel> {props.errors.qualifaication} </ErrorLabel> | |
226 | + )} | |
227 | + </FormGroup> | |
228 | + </Col> | |
229 | + <Col xs={12} sm={4}> | |
230 | + <FormGroup controlId="specialization"> | |
231 | + <Label required>Specialization</Label> | |
232 | + <FormControl | |
233 | + type="text" | |
234 | + value={props.getValue('specialization')} | |
235 | + placeholder="Ex: Maths" | |
236 | + onChange={e => props.setValue('specialization', e.target.value)} | |
237 | + /> | |
238 | + {props.isSubmitted() && props.errors && props.errors.specialization && ( | |
239 | + <ErrorLabel> {props.errors.specialization} </ErrorLabel> | |
240 | + )} | |
241 | + </FormGroup> | |
242 | + </Col> | |
243 | + <Col xs={12} sm={4}> | |
244 | + <FormGroup controlId="university"> | |
245 | + <Label required>University</Label> | |
246 | + <FormControl | |
247 | + type="text" | |
248 | + value={props.getValue('university')} | |
249 | + placeholder="Ex: Pune University" | |
250 | + onChange={e => props.setValue('university', e.target.value)} | |
251 | + /> | |
252 | + {props.isSubmitted() && props.errors && props.errors.university && ( | |
253 | + <ErrorLabel> {props.errors.university} </ErrorLabel> | |
254 | + )} | |
255 | + </FormGroup> | |
256 | + </Col> | |
257 | + </Row> | |
258 | + <Row> | |
259 | + <Col xs={12} sm={4}> | |
260 | + <FormGroup> | |
261 | + <Label required>Latest Degree started At</Label> | |
262 | + <DatePicker | |
263 | + id="degreeFrom" | |
264 | + setValue = {props.setValue} | |
265 | + value={props.getValue('degreeFrom')} | |
266 | + onChange={(e) => { | |
267 | + props.setValue('degreeFrom', e.target.value) | |
268 | + }} | |
269 | + /> | |
270 | + {props.isSubmitted() && props.errors && props.errors.degreeFrom && ( | |
271 | + <ErrorLabel> {props.errors.degreeFrom} </ErrorLabel> | |
272 | + )} | |
273 | + </FormGroup> | |
274 | + </Col> | |
275 | + <Col xs={12} sm={4}> | |
276 | + <FormGroup> | |
277 | + <Label required>Latest Degree ended At</Label> | |
278 | + <DatePicker | |
279 | + id="degreeEnded" | |
280 | + setValue = {props.setValue} | |
281 | + value={props.getValue('degreeEnded')} | |
282 | + onChange={(e) => { | |
283 | + props.setValue('degreeEnded', e.target.value) | |
284 | + }} | |
285 | + /> | |
286 | + {props.isSubmitted() && props.errors && props.errors.degreeEnded && ( | |
287 | + <ErrorLabel> {props.errors.degreeEnded} </ErrorLabel> | |
288 | + )} | |
289 | + </FormGroup> | |
290 | + </Col> | |
291 | + </Row> | |
292 | + </fieldset> | |
293 | + )} | |
294 | + {props.currentStep === 3 && ( | |
295 | + <fieldset title="Academic"> | |
296 | + <legend className="text-semibold">Additional Info</legend> | |
297 | + <Row> | |
298 | + <Col xs={12} sm={4}> | |
299 | + <FormGroup controlId="email"> | |
300 | + <Label required>Email</Label> | |
301 | + <FormControl | |
302 | + type="email" | |
303 | + value={props.getValue('email')} | |
304 | + placeholder="Email" | |
305 | + onChange={e => props.setValue('email', e.target.value)} | |
306 | + /> | |
307 | + {props.isSubmitted() && props.errors && props.errors.email && ( | |
308 | + <ErrorLabel> {props.errors.email} </ErrorLabel> | |
309 | + )} | |
310 | + </FormGroup> | |
311 | + </Col> | |
312 | + <Col xs={12} sm={4}> | |
313 | + <FormGroup controlId="phone"> | |
314 | + <Label required>Phone</Label> | |
315 | + <FormControl | |
316 | + type="text" | |
317 | + value={props.getValue('phone')} | |
318 | + placeholder="Martial Status" | |
319 | + onChange={e => props.setValue('phone', e.target.value)} | |
320 | + /> | |
321 | + {props.isSubmitted() && props.errors && props.errors.phone && ( | |
322 | + <ErrorLabel> {props.errors.phone} </ErrorLabel> | |
323 | + )} | |
324 | + </FormGroup> | |
325 | + </Col> | |
326 | + </Row> | |
327 | + <Row> | |
328 | + <Col xs={12} sm={4}> | |
329 | + <FormGroup controlId="address"> | |
330 | + <Label required>Address</Label> | |
331 | + <FormControl | |
332 | + type="text" | |
333 | + value={props.getValue('address')} | |
334 | + placeholder="#876, Street, town" | |
335 | + onChange={e => props.setValue('address', e.target.value)} | |
336 | + /> | |
337 | + {props.isSubmitted() && props.errors && props.errors.address && ( | |
338 | + <ErrorLabel> {props.errors.address} </ErrorLabel> | |
339 | + )} | |
340 | + </FormGroup> | |
341 | + </Col> | |
342 | + <Col xs={12} sm={4}> | |
343 | + <FormGroup controlId="city"> | |
344 | + <Label required>City</Label> | |
345 | + <FormControl | |
346 | + type="text" | |
347 | + value={props.getValue('city')} | |
348 | + placeholder="Chennai" | |
349 | + onChange={e => props.setValue('city', e.target.value)} | |
350 | + /> | |
351 | + {props.isSubmitted() && props.errors && props.errors.city && ( | |
352 | + <ErrorLabel> {props.errors.city} </ErrorLabel> | |
353 | + )} | |
354 | + </FormGroup> | |
355 | + </Col> | |
356 | + <Col xs={12} sm={4}> | |
357 | + <FormGroup controlId="state"> | |
358 | + <Label required>State</Label> | |
359 | + <FormControl | |
360 | + type="text" | |
361 | + value={props.getValue('state')} | |
362 | + placeholder="Tamilnadu" | |
363 | + onChange={e => props.setValue('state', e.target.value)} | |
364 | + /> | |
365 | + {props.isSubmitted() && props.errors && props.errors.state && ( | |
366 | + <ErrorLabel> {props.errors.state} </ErrorLabel> | |
367 | + )} | |
368 | + </FormGroup> | |
369 | + </Col> | |
370 | + </Row> | |
371 | + </fieldset> | |
372 | + )} | |
373 | + <div style={{ textAlign: 'left' }}> | |
374 | + {props.currentStep > 0 && ( | |
375 | + <div style={{ display: 'inline-block', marginRight: 10 }}> | |
376 | + <Button onClick={props.onBackClick}> | |
377 | + <i className="icon-arrow-left13 position-left"></i> | |
378 | + BACK | |
379 | + </Button> | |
380 | + | |
381 | + </div> | |
382 | + )} | |
383 | + {props.currentStep < 3 && ( | |
384 | + <div style={{ display: 'inline-block' }}> | |
385 | + <Button | |
386 | + bsStyle="primary" | |
387 | + onClick={props.onNextClick} | |
388 | + > | |
389 | + NEXT | |
390 | + <i className="icon-arrow-right14 position-right" /> | |
391 | + </Button> | |
392 | + </div> | |
393 | + )} | |
394 | + {props.currentStep === 3 && ( | |
395 | + <div style={{ display: 'inline-block' }}> | |
396 | + <Button | |
397 | + bsStyle="primary" | |
398 | + onClick={props.onNextClick} | |
399 | + > | |
400 | + SAVE | |
401 | + <i className="fa fa-check" /> | |
402 | + </Button> | |
403 | + </div> | |
404 | + )} | |
405 | + </div> | |
406 | + </div> | |
407 | +) | |
408 | + | |
409 | +StaffForm.propTypes = { | |
410 | + currentStep: PropTypes.number.isRequired, | |
411 | + onNextClick: PropTypes.func.isRequired, | |
412 | + onBackClick: PropTypes.func.isRequired, | |
413 | + setValue: PropTypes.func.isRequired, | |
414 | + getValue: PropTypes.func.isRequired, | |
415 | +} | |
416 | + | |
417 | +export default StaffForm | ... | ... |
imports/client/views/org/admin/users/staff/add/addStaff.js
... | ... | @@ -0,0 +1,66 @@ |
1 | +import _ from 'lodash'; | |
2 | +import { Meteor } from 'meteor/meteor'; | |
3 | +import React, { Component } from 'react'; | |
4 | +import { Link,browserHistory } from 'react-router'; | |
5 | +import { FormGroup,Panel,Table, | |
6 | + ButtonToolbar,Modal, | |
7 | + FormControl,Glyphicon,Button } from 'react-bootstrap'; | |
8 | +import { AddStaffFormContainer } from './AddStaffFormContainer'; | |
9 | + | |
10 | +const style = { | |
11 | + margin: 12, | |
12 | +}; | |
13 | +export class AddStaff extends Component { | |
14 | + constructor(props) { | |
15 | + super(props); | |
16 | + this.state = { | |
17 | + show: false | |
18 | + }; | |
19 | + this.showModal = this.showModal.bind(this); | |
20 | + this.hideModal = this.hideModal.bind(this); | |
21 | + this.onUpdate = this.onUpdate.bind(this); | |
22 | + }; | |
23 | + | |
24 | + showModal() { | |
25 | + this.setState({show: true}); | |
26 | + } | |
27 | + | |
28 | + hideModal() { | |
29 | + this.setState({show: false}); | |
30 | + } | |
31 | + onUpdate(key, value) { | |
32 | + this.setState({[key]: value}); | |
33 | + }; | |
34 | + | |
35 | + render() { | |
36 | + return ( | |
37 | + <ButtonToolbar> | |
38 | + <Button bsStyle="primary" onClick={this.showModal}> | |
39 | + Add Staff | |
40 | + </Button> | |
41 | + <Modal | |
42 | + {...this.props} | |
43 | + show={this.state.show} | |
44 | + onHide={this.hideModal} | |
45 | + dialogClassName="custom-modal" | |
46 | + bsSize="large" | |
47 | + > | |
48 | + <Modal.Header closeButton> | |
49 | + <Modal.Title id="contained-modal-title-lg">Add New Staff</Modal.Title> | |
50 | + </Modal.Header> | |
51 | + <Modal.Body> | |
52 | + <AddStaffFormContainer | |
53 | + modalState = {this.hideModal} | |
54 | + /> | |
55 | + </Modal.Body> | |
56 | + {/* | |
57 | + <Modal.Footer> | |
58 | + <Button onClick={this.hideModal}>Close</Button> | |
59 | + </Modal.Footer> | |
60 | + */} | |
61 | + </Modal> | |
62 | + </ButtonToolbar> | |
63 | + ); | |
64 | + }; | |
65 | + | |
66 | +}; | ... | ... |
imports/client/views/org/admin/users/staff/index.js
... | ... | @@ -0,0 +1,70 @@ |
1 | +// import { InviteSignupController } from '/imports/client/views/invite/signup/index' | |
2 | +import _ from 'lodash'; | |
3 | +import { | |
4 | + composeWithTracker, | |
5 | + compose, | |
6 | + composeAll | |
7 | + } from 'react-komposer'; | |
8 | +import { Loading } from '/imports/client/components/Loading'; | |
9 | + | |
10 | +import { Orgs } from '/imports/collections/orgs/index'; | |
11 | +import { Users } from '/imports/collections/users/index'; | |
12 | +import { Staffs } from '/imports/collections/staff/index'; | |
13 | +import { StaffView } from './StaffView'; | |
14 | + | |
15 | +const meteorTick = (props, onData) => { | |
16 | + Shelf.layout.set({ | |
17 | + bulb: 'SETTINGS', | |
18 | + subbulb: 'USERS', | |
19 | + view: 'STAFF' | |
20 | + }); | |
21 | + const handles = [ | |
22 | + Meteor.subscribe('users.current'), | |
23 | + Meteor.subscribe('orgs.current'), | |
24 | + Meteor.subscribe('users.forMyOrg'), | |
25 | + Meteor.subscribe('staff.forMyOrg'), | |
26 | + ]; | |
27 | + | |
28 | + if(_.every(handles, (handle) => (handle.ready()) )) { | |
29 | + const user = Users.current(); | |
30 | + const org = Orgs.current(); | |
31 | + staff = Users.find({"role":"STAFF"}).fetch() ? Users.find({"role":"STAFF"}).fetch() : ""; | |
32 | + console.log(Users.find({"role":"STAFF"}).fetch()); | |
33 | + staffData = Staffs.find().fetch() ? Staffs.find().fetch() : ""; | |
34 | + console.log("staffData"); | |
35 | + console.log(staffData); | |
36 | + for(var i=0; i< staff.length; i++){ | |
37 | + for(var j=0; j< staffData.length; j++){ | |
38 | + if(staff[i]._id == staffData[j].userId){ | |
39 | + staff[i].type = staffData[j].type; | |
40 | + staff[i].employeeId = staffData[j].employeeId; | |
41 | + staff[i].dob = staffData[j].dob; | |
42 | + } | |
43 | + } | |
44 | + } | |
45 | + onData(null, { | |
46 | + data: { | |
47 | + user: user, | |
48 | + org: org, | |
49 | + staff: staff | |
50 | + }, | |
51 | + }); | |
52 | + } | |
53 | + | |
54 | + return () => { | |
55 | + _.each(handles, (handle) => handle.stop() ); | |
56 | + }; | |
57 | +}; | |
58 | + | |
59 | + | |
60 | +const reduxTick = (props, onData) => { | |
61 | + onData(null, { | |
62 | + data: {} | |
63 | + }); | |
64 | +}; | |
65 | + | |
66 | + | |
67 | +export const staffViewController = composeAll( | |
68 | + composeWithTracker(meteorTick, Loading), | |
69 | + compose(reduxTick, Loading), | |
70 | +)(StaffView); | ... | ... |
imports/client/views/org/admin/users/staff/view/StaffRow.js
... | ... | @@ -0,0 +1,56 @@ |
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, | |
7 | + FormControl,Glyphicon,Button } from 'react-bootstrap'; | |
8 | + | |
9 | + | |
10 | +export class StaffRow extends Component { | |
11 | + | |
12 | + constructor(props) { | |
13 | + super(props); | |
14 | + this.state = { | |
15 | + | |
16 | + }; | |
17 | + this.onUpdate = this.onUpdate.bind(this); | |
18 | + }; | |
19 | + | |
20 | + onUpdate(key, value) { | |
21 | + this.setState({[key]: value}); | |
22 | + }; | |
23 | + | |
24 | + render() { | |
25 | + const {staff} = this.props; | |
26 | + if(staff.firstName){ | |
27 | + return ( | |
28 | + <tr> | |
29 | + <td>{staff.firstName}</td> | |
30 | + <td>{staff.lastName}</td> | |
31 | + <td>{staff.type}</td> | |
32 | + <td>{staff.dob? moment(staff.dob).format("LL") : <span></span>}</td> | |
33 | + <td><span className="label label-success">Active</span></td> | |
34 | + <td className="text-center"> | |
35 | + <ul className="icons-list"> | |
36 | + <li className="dropdown"> | |
37 | + <a href="#" className="dropdown-toggle" data-toggle="dropdown"> | |
38 | + <i className="icon-menu9"></i> | |
39 | + </a> | |
40 | + <ul className="dropdown-menu dropdown-menu-right"> | |
41 | + <li><a href="#"><i className="icon-file-pdf"></i> Export to .pdf</a></li> | |
42 | + <li><a href="#"><i className="icon-file-excel"></i> Export to .csv</a></li> | |
43 | + <li><a href="#"><i className="icon-file-word"></i> Export to .doc</a></li> | |
44 | + </ul> | |
45 | + </li> | |
46 | + </ul> | |
47 | + </td> | |
48 | + </tr> | |
49 | + ); | |
50 | + }else { | |
51 | + return null; | |
52 | + } | |
53 | + | |
54 | + }; | |
55 | + | |
56 | +}; | ... | ... |
imports/client/views/org/admin/users/staff/view/StaffTable.js
... | ... | @@ -0,0 +1,85 @@ |
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, | |
8 | + FormControl,Glyphicon,Button } from 'react-bootstrap'; | |
9 | +import {moment} from 'meteor/momentjs:moment' | |
10 | +import {StaffRow} from './StaffRow' | |
11 | +import {BootstrapTable, TableHeaderColumn}from 'react-bootstrap-table'; | |
12 | +const options = { | |
13 | + page: 0, // which page you want to show as default | |
14 | + sizePerPageList: [ { | |
15 | + text: '5', value: 5 | |
16 | + }, { | |
17 | + text: '10', value: 10 | |
18 | + }], // you can change the dropdown list for size per page | |
19 | + sizePerPage: 5, // which size per page you want to locate as default | |
20 | + pageStartIndex: 0, // where to start counting the pages | |
21 | + paginationSize: 3, // the pagination bar size. | |
22 | + prePage: 'Prev', // Previous page button text | |
23 | + nextPage: 'Next', // Next page button text | |
24 | + firstPage: 'First', // First page button text | |
25 | + lastPage: 'Last', // Last page button text | |
26 | + paginationShowsTotal: false, // Accept bool or function | |
27 | + paginationPosition: 'bottom' // default is bottom, top and both is all available | |
28 | + // hideSizePerPage: true > You can hide the dropdown for sizePerPage | |
29 | + // alwaysShowAllBtns: true // Always show next and previous button | |
30 | + // withFirstAndLast: false > Hide the going to First and Last page button | |
31 | + }; | |
32 | + | |
33 | +function dateFormatter(cell, row) { | |
34 | + console.log("cell"); | |
35 | + console.log(cell); | |
36 | + if(cell){ | |
37 | + cell = new Date(cell); | |
38 | + console.log(cell); | |
39 | + return `${('0' + cell.getDate()).slice(-2)}/${('0' + (cell.getMonth() + 1)).slice(-2)}/${cell.getFullYear()}`; | |
40 | + } | |
41 | +} | |
42 | + | |
43 | +export class StaffTable extends Component { | |
44 | + | |
45 | + constructor(props) { | |
46 | + super(props); | |
47 | + this.state = { | |
48 | + show: false, | |
49 | + panleOpen: true, | |
50 | + }; | |
51 | + this.onUpdate = this.onUpdate.bind(this); | |
52 | + }; | |
53 | + onUpdate(key, value) { | |
54 | + this.setState({[key]: value}); | |
55 | + }; | |
56 | + togglePanel(){ | |
57 | + this.setState({panleOpen: !this.state.panleOpen}); | |
58 | + } | |
59 | + render() { | |
60 | + console.log("this.props.staff"); | |
61 | + console.log(this.props.staff); | |
62 | + return ( | |
63 | + <div className="panel panel-flat"> | |
64 | + <div className="panel-heading"> | |
65 | + <h5 className="panel-title">Teachers Details</h5> | |
66 | + <div className="heading-elements"> | |
67 | + <ul className="icons-list"> | |
68 | + <li onClick={this.togglePanel}><a data-action="collapse" className={this.state.panleOpen?"rotate-180":null}></a></li> | |
69 | + </ul> | |
70 | + </div> | |
71 | + </div> | |
72 | + <Panel collapsible expanded={this.state.panleOpen}> | |
73 | + <BootstrapTable data={ this.props.staff } pagination={ true } options={ options } > | |
74 | + <TableHeaderColumn dataField='employeeId' isKey={ true } dataSort={ true } filter={ { type: 'TextFilter' } }>Employee Id</TableHeaderColumn> | |
75 | + <TableHeaderColumn dataField='firstName' dataSort={ true } filter={ { type: 'TextFilter' } }>First Name</TableHeaderColumn> | |
76 | + <TableHeaderColumn dataField='lastName' dataSort={ true } filter={ { type: 'TextFilter' } }>Last Name</TableHeaderColumn> | |
77 | + <TableHeaderColumn dataField='type' dataSort={ true } filter={ { type: 'TextFilter' } }>Type</TableHeaderColumn> | |
78 | + <TableHeaderColumn dataField='dob' dataFormat={ dateFormatter } >DOB</TableHeaderColumn> | |
79 | + </BootstrapTable> | |
80 | + </Panel> | |
81 | + </div> | |
82 | + ); | |
83 | + }; | |
84 | + | |
85 | +}; | ... | ... |
imports/client/views/org/admin/users/students/StudentDataView.js
... | ... | @@ -0,0 +1,274 @@ |
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, | |
8 | + FormControl,Glyphicon,Button } from 'react-bootstrap'; | |
9 | + import { AddStudentForm } from './addStudentForm'; | |
10 | + | |
11 | +export class StudentDataView extends Component { | |
12 | + | |
13 | + constructor(props) { | |
14 | + super(props); | |
15 | + this.state = { | |
16 | + show: false | |
17 | + }; | |
18 | + this.showModal = this.showModal.bind(this); | |
19 | + this.hideModal = this.hideModal.bind(this); | |
20 | + this.onUpdate = this.onUpdate.bind(this); | |
21 | + }; | |
22 | + | |
23 | + showModal() { | |
24 | + this.setState({show: true}); | |
25 | + } | |
26 | + | |
27 | + hideModal() { | |
28 | + this.setState({show: false}); | |
29 | + } | |
30 | + onUpdate(key, value) { | |
31 | + this.setState({[key]: value}); | |
32 | + }; | |
33 | + | |
34 | + render() { | |
35 | + return ( | |
36 | + <div className="content has-detached-left"> | |
37 | + | |
38 | + <div className="container-detached"> | |
39 | + <div className="content-detached"> | |
40 | + <div className="row"> | |
41 | + <div className="col-lg-3 col-md-6"> | |
42 | + <div className="panel panel-body"> | |
43 | + <div className="media"> | |
44 | + <div className="media-left"> | |
45 | + <a href="assets/images/placeholder.png" data-popup="lightbox"> | |
46 | + <img src="assets/images/download2.png" className="img-circle img-lg" alt="" /> | |
47 | + </a> | |
48 | + </div> | |
49 | + | |
50 | + <div className="media-body"> | |
51 | + <h6 className="media-heading">Students</h6> | |
52 | + <span className="text-muted">Click to view</span> | |
53 | + </div> | |
54 | + </div> | |
55 | + </div> | |
56 | + </div> | |
57 | + | |
58 | + <div className="col-lg-3 col-md-6"> | |
59 | + <div className="panel panel-body"> | |
60 | + <div className="media"> | |
61 | + <div className="media-left"> | |
62 | + <a href="assets/images/placeholder.jpg" data-popup="lightbox"> | |
63 | + <img src="assets/images/download.png" className="img-circle img-lg" alt="" /> | |
64 | + </a> | |
65 | + </div> | |
66 | + | |
67 | + <div className="media-body"> | |
68 | + <h6 className="media-heading">Teachers</h6> | |
69 | + <span className="text-muted">Click to view</span> | |
70 | + </div> | |
71 | + </div> | |
72 | + </div> | |
73 | + </div> | |
74 | + | |
75 | + <div className="col-lg-3 col-md-6"> | |
76 | + <div className="panel panel-body"> | |
77 | + <div className="media"> | |
78 | + <div className="media-left"> | |
79 | + <a href="assets/images/placeholder.jpg" data-popup="lightbox"> | |
80 | + <img src="assets/images/download3.png" className="img-circle img-lg" alt="" /> | |
81 | + </a> | |
82 | + </div> | |
83 | + | |
84 | + <div className="media-body"> | |
85 | + <h6 className="media-heading">Parents</h6> | |
86 | + <span className="text-muted">Click to view</span> | |
87 | + </div> | |
88 | + </div> | |
89 | + </div> | |
90 | + </div> | |
91 | + | |
92 | + <div className="col-lg-3 col-md-6"> | |
93 | + <div className="panel panel-body"> | |
94 | + <div className="media"> | |
95 | + <div className="media-left"> | |
96 | + <a href="assets/images/placeholder.jpg" data-popup="lightbox"> | |
97 | + <img src="assets/images/download1.png" className="img-circle img-lg" alt="" /> | |
98 | + </a> | |
99 | + </div> | |
100 | + | |
101 | + <div className="media-body"> | |
102 | + <h6 className="media-heading">Non Teaching Staff</h6> | |
103 | + <span className="text-muted">Click to view</span> | |
104 | + </div> | |
105 | + </div> | |
106 | + </div> | |
107 | + </div> | |
108 | + </div> | |
109 | + | |
110 | + <div className="panel panel-flat"> | |
111 | + <div className="panel-heading"> | |
112 | + <h5 className="panel-title">Student Details</h5> | |
113 | + <div className="heading-elements"> | |
114 | + <ul className="icons-list"> | |
115 | + <li><a data-action="collapse"></a></li> | |
116 | + <li><a data-action="reload"></a></li> | |
117 | + </ul> | |
118 | + </div> | |
119 | + </div> | |
120 | + | |
121 | + | |
122 | + <table className="table datatable-basic table-striped"> | |
123 | + <thead> | |
124 | + <tr> | |
125 | + <th>First Name</th> | |
126 | + <th>Last Name</th> | |
127 | + <th>className</th> | |
128 | + <th>DOB</th> | |
129 | + <th>Status</th> | |
130 | + <th className="text-center">Actions</th> | |
131 | + </tr> | |
132 | + </thead> | |
133 | + <tbody> | |
134 | + <tr> | |
135 | + <td>Marth</td> | |
136 | + <td><a href="#">Enright</a></td> | |
137 | + <td>VII</td> | |
138 | + <td>22 Jun 1972</td> | |
139 | + <td><span className="label label-success">Active</span></td> | |
140 | + <td className="text-center"> | |
141 | + <ul className="icons-list"> | |
142 | + <li className="dropdown"> | |
143 | + <a href="#" className="dropdown-toggle" data-toggle="dropdown"> | |
144 | + <i className="icon-menu9"></i> | |
145 | + </a> | |
146 | + | |
147 | + <ul className="dropdown-menu dropdown-menu-right"> | |
148 | + <li><a href="#"><i className="icon-file-pdf"></i> Export to .pdf</a></li> | |
149 | + <li><a href="#"><i className="icon-file-excel"></i> Export to .csv</a></li> | |
150 | + <li><a href="#"><i className="icon-file-word"></i> Export to .doc</a></li> | |
151 | + </ul> | |
152 | + </li> | |
153 | + </ul> | |
154 | + </td> | |
155 | + </tr> | |
156 | + <tr> | |
157 | + <td>Jackelyn</td> | |
158 | + <td>Weible</td> | |
159 | + <td><a href="#">XI</a></td> | |
160 | + <td>3 Oct 1981</td> | |
161 | + <td><span className="label label-default">Inactive</span></td> | |
162 | + <td className="text-center"> | |
163 | + <ul className="icons-list"> | |
164 | + <li className="dropdown"> | |
165 | + <a href="#" className="dropdown-toggle" data-toggle="dropdown"> | |
166 | + <i className="icon-menu9"></i> | |
167 | + </a> | |
168 | + | |
169 | + <ul className="dropdown-menu dropdown-menu-right"> | |
170 | + <li><a href="#"><i className="icon-file-pdf"></i> Export to .pdf</a></li> | |
171 | + <li><a href="#"><i className="icon-file-excel"></i> Export to .csv</a></li> | |
172 | + <li><a href="#"><i className="icon-file-word"></i> Export to .doc</a></li> | |
173 | + </ul> | |
174 | + </li> | |
175 | + </ul> | |
176 | + </td> | |
177 | + </tr> | |
178 | + </tbody> | |
179 | + </table> | |
180 | + </div> | |
181 | + | |
182 | + | |
183 | + <ul className="fab-menu fab-menu-fixed fab-menu-bottom-right" data-fab-toggle="click"> | |
184 | + <li> | |
185 | + <a className="fab-menu-btn btn bg-teal-400 btn-float btn-rounded btn-icon"> | |
186 | + <i className="fab-icon-open icon-plus3"></i> | |
187 | + <i className="fab-icon-close icon-cross2"></i> | |
188 | + </a> | |
189 | + | |
190 | + <ul className="fab-menu-inner"> | |
191 | + <li> | |
192 | + <div data-fab-label="Upload bulk data"> | |
193 | + <a href="#" className="btn btn-default btn-rounded btn-icon btn-float"> | |
194 | + <i className="icon-file-upload2"></i> | |
195 | + </a> | |
196 | + </div> | |
197 | + </li> | |
198 | + <li> | |
199 | + <div data-fab-label="Add Student"> | |
200 | + <a href="#" className="btn btn-default btn-rounded btn-icon btn-float"> | |
201 | + <i className=" icon-file-plus2"></i> | |
202 | + </a> | |
203 | + <span className="badge bg-primary-400">5</span> | |
204 | + </div> | |
205 | + </li> | |
206 | + </ul> | |
207 | + </li> | |
208 | + </ul> | |
209 | + | |
210 | + </div> | |
211 | + </div> | |
212 | + <div className="sidebar-detached affix-top"> | |
213 | + <div className="sidebar sidebar-default"> | |
214 | + <div className="sidebar-content"> | |
215 | + | |
216 | + <div className="sidebar-category"> | |
217 | + <div className="category-title"> | |
218 | + <span>Advanced Search</span> | |
219 | + <ul className="icons-list"> | |
220 | + <li><a href="#" data-action="collapse"></a></li> | |
221 | + </ul> | |
222 | + </div> | |
223 | + | |
224 | + <div className="category-content"> | |
225 | + <form action="#"> | |
226 | + <div className="has-feedback has-feedback-left"> | |
227 | + <input type="search" className="form-control" placeholder="First Name" /> | |
228 | + <div className="form-control-feedback"> | |
229 | + <i className="icon-search4 text-size-base text-muted"></i> | |
230 | + </div> | |
231 | + </div> | |
232 | + </form> | |
233 | + </div> | |
234 | + <div className="category-content"> | |
235 | + <form action="#"> | |
236 | + <div className="has-feedback has-feedback-left"> | |
237 | + <input type="search" className="form-control" placeholder="Last Name" /> | |
238 | + <div className="form-control-feedback"> | |
239 | + <i className="icon-search4 text-size-base text-muted"></i> | |
240 | + </div> | |
241 | + </div> | |
242 | + </form> | |
243 | + </div> | |
244 | + <div className="category-content"> | |
245 | + <form action="#"> | |
246 | + <div className="has-feedback has-feedback-left"> | |
247 | + <div className="btn-group"> | |
248 | + <button type="button" className="dropdown-toggle form-control" data-toggle="dropdown"> | |
249 | + <span data-bind="label">Select className</span> <span className="caret"></span> | |
250 | + </button> | |
251 | + <ul className="dropdown-menu" role="menu"> | |
252 | + <li><a href="#">Item 1</a></li> | |
253 | + <li><a href="#">Another item</a></li> | |
254 | + <li><a href="#">This is a longer item that will not fit properly</a></li> | |
255 | + </ul> | |
256 | + </div> | |
257 | + <div className="form-control-feedback"> | |
258 | + <i className="icon-search4 text-size-base text-muted"></i> | |
259 | + </div> | |
260 | + </div> | |
261 | + </form> | |
262 | + </div> | |
263 | + </div> | |
264 | + | |
265 | + | |
266 | + </div> | |
267 | + </div> | |
268 | + </div> | |
269 | +</div> | |
270 | + | |
271 | + ); | |
272 | + }; | |
273 | + | |
274 | +}; | ... | ... |
imports/client/views/org/admin/users/students/StudentDataView0.js
... | ... | @@ -0,0 +1,88 @@ |
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, | |
8 | + FormControl,Glyphicon,Button } from 'react-bootstrap'; | |
9 | + import { AddStudentForm } from './addStudentForm'; | |
10 | + | |
11 | +export class StudentDataView extends Component { | |
12 | + | |
13 | + constructor(props) { | |
14 | + super(props); | |
15 | + this.state = { | |
16 | + show: false | |
17 | + }; | |
18 | + this.showModal = this.showModal.bind(this); | |
19 | + this.hideModal = this.hideModal.bind(this); | |
20 | + this.onUpdate = this.onUpdate.bind(this); | |
21 | + }; | |
22 | + | |
23 | + showModal() { | |
24 | + this.setState({show: true}); | |
25 | + } | |
26 | + | |
27 | + hideModal() { | |
28 | + this.setState({show: false}); | |
29 | + } | |
30 | + onUpdate(key, value) { | |
31 | + this.setState({[key]: value}); | |
32 | + }; | |
33 | + | |
34 | + render() { | |
35 | + return ( | |
36 | + <div className = "enterPane-box"> | |
37 | + <Panel header="Students Info" bsStyle="primary"> | |
38 | + <Table striped bordered condensed hover> | |
39 | + <thead> | |
40 | + <tr> | |
41 | + <th>#</th> | |
42 | + <th>First Name</th> | |
43 | + <th>Last Name</th> | |
44 | + </tr> | |
45 | + </thead> | |
46 | + <tbody> | |
47 | + { | |
48 | + this.props.data.students.map(function(student, i) | |
49 | + { | |
50 | + return( | |
51 | + <tr> | |
52 | + <td>{i+1}</td> | |
53 | + <td>{student.firstName}</td> | |
54 | + <td>{student.lastName}</td> | |
55 | + </tr> | |
56 | + ) | |
57 | + }) | |
58 | + } | |
59 | + | |
60 | + </tbody> | |
61 | + </Table> | |
62 | + <ButtonToolbar> | |
63 | + <Button bsStyle="primary" onClick={this.showModal}> | |
64 | + Add Student | |
65 | + </Button> | |
66 | + <Modal | |
67 | + {...this.props} | |
68 | + show={this.state.show} | |
69 | + onHide={this.hideModal} | |
70 | + dialogClassName="custom-modal" | |
71 | + > | |
72 | + <Modal.Header closeButton> | |
73 | + <Modal.Title id="contained-modal-title-lg">New Student</Modal.Title> | |
74 | + </Modal.Header> | |
75 | + <Modal.Body> | |
76 | + <AddStudentForm /> | |
77 | + </Modal.Body> | |
78 | + <Modal.Footer> | |
79 | + <Button onClick={this.hideModal}>Close</Button> | |
80 | + </Modal.Footer> | |
81 | + </Modal> | |
82 | + </ButtonToolbar> | |
83 | + </Panel> | |
84 | + </div> | |
85 | + ); | |
86 | + }; | |
87 | + | |
88 | +}; | ... | ... |
imports/client/views/org/admin/users/students/StudentView.js
... | ... | @@ -0,0 +1,64 @@ |
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 { Navbar,Modal, Nav, NavItem, | |
7 | + Glyphicon, Collapse, FormGroup, FormControl, Panel, | |
8 | + NavbarToggler, NavbarBrand, Table, ButtonToolbar, | |
9 | + NavLink, DropdownItem, DropdownToggle, DropdownMenu, | |
10 | + NavDropdown, MenuItem, Breadcrumb, Button } from 'react-bootstrap'; | |
11 | +import { StudentTable } from './view/StudentTable'; | |
12 | +import { UploadCsv } from './UploadCsv'; | |
13 | +import { AddStudent } from './add/addStudent'; | |
14 | +import { Students } from '/imports/collections/students/index'; | |
15 | +import './student.css' | |
16 | + | |
17 | +export class StudentView extends Component { | |
18 | + | |
19 | + constructor(props) { | |
20 | + super(props); | |
21 | + this.state = { | |
22 | + show: false, | |
23 | + firstNameSearch: "", | |
24 | + lastNameSearch: "", | |
25 | + }; | |
26 | + this.showModal = this.showModal.bind(this); | |
27 | + this.hideModal = this.hideModal.bind(this); | |
28 | + this.onUpdate = this.onUpdate.bind(this); | |
29 | + }; | |
30 | + | |
31 | + showModal() { | |
32 | + this.setState({show: true}); | |
33 | + } | |
34 | + | |
35 | + hideModal() { | |
36 | + this.setState({show: false}); | |
37 | + } | |
38 | + onUpdate(key, value) { | |
39 | + this.setState({[key]: value}); | |
40 | + }; | |
41 | + | |
42 | + render() { | |
43 | + firstNameSearch = this.state.firstNameSearch; | |
44 | + lastNameSearch = this.state.lastNameSearch; | |
45 | + var students =_.filter(this.props.data.students,function(item){ | |
46 | + if(item.firstName){ | |
47 | + return _.includes(item.firstName.toLowerCase(),firstNameSearch.toLowerCase()); | |
48 | + } | |
49 | + }); | |
50 | + return ( | |
51 | + <div className="container-detached"> | |
52 | + <div className=""> | |
53 | + <StudentTable | |
54 | + data = {this.props.data} | |
55 | + studentData = {studentData} | |
56 | + /> | |
57 | + <AddStudent/> | |
58 | + <UploadCsv /> | |
59 | + </div> | |
60 | + </div> | |
61 | + ); | |
62 | + }; | |
63 | + | |
64 | +}; | ... | ... |
imports/client/views/org/admin/users/students/UploadCsv.js
... | ... | @@ -0,0 +1,103 @@ |
1 | +// import {UploadCsv } from '/imports/collections/students/UploadCsv' | |
2 | +import _ from 'lodash'; | |
3 | +import { Meteor } from 'meteor/meteor'; | |
4 | + | |
5 | +import React, { Component } from 'react'; | |
6 | +import { Link,browserHistory } from 'react-router'; | |
7 | +import { FormGroup,Panel,Table, | |
8 | + ButtonToolbar,Modal,ControlLabel,HelpBlock, | |
9 | + FormControl,Glyphicon,Button } from 'react-bootstrap'; | |
10 | +// import { AddStudentForm } from './addStudentForm'; | |
11 | +import { FilesCollection } from 'meteor/ostrio:files'; | |
12 | +const Papa = this.Papa; | |
13 | +// console.log(this); | |
14 | +const style = { | |
15 | + margin: 12, | |
16 | +}; | |
17 | +function FieldGroup({ id, label, help, ...props }) { | |
18 | + return ( | |
19 | + <FormGroup controlId={id}> | |
20 | + <ControlLabel>{label}</ControlLabel> | |
21 | + <FormControl {...props} /> | |
22 | + {help && <HelpBlock>{help}</HelpBlock>} | |
23 | + </FormGroup> | |
24 | + ); | |
25 | +} | |
26 | +export class UploadCsv extends Component { | |
27 | + constructor(props) { | |
28 | + super(props); | |
29 | + this.state = { | |
30 | + show: false | |
31 | + }; | |
32 | + this.showModal = this.showModal.bind(this); | |
33 | + this.hideModal = this.hideModal.bind(this); | |
34 | + this.onUpdate = this.onUpdate.bind(this); | |
35 | + }; | |
36 | + | |
37 | + showModal() { | |
38 | + this.setState({show: true}); | |
39 | + } | |
40 | + | |
41 | + hideModal() { | |
42 | + this.setState({show: false}); | |
43 | + } | |
44 | + onUpdate(key, value) { | |
45 | + this.setState({[key]: value}); | |
46 | + }; | |
47 | + uploadStudentCsv(e){ | |
48 | + e.preventDefault(); | |
49 | + e.persist(); | |
50 | + var file = $('input[type="file"]').prop("files")[0]; | |
51 | + Papa.parse(file, { | |
52 | + header: true, | |
53 | + complete: function(csvData) { | |
54 | + console.log("csvData"); | |
55 | + console.log(csvData); | |
56 | + if(csvData){ | |
57 | + Meteor.call('student.uploadCsv', csvData, function (error, result) { | |
58 | + console.log("error"); | |
59 | + console.log(error); | |
60 | + console.log("result"); | |
61 | + console.log(result); | |
62 | + }) | |
63 | + } | |
64 | + } | |
65 | + }); | |
66 | + } | |
67 | + | |
68 | + render() { | |
69 | + console.log(this.props); | |
70 | + return ( | |
71 | + <ButtonToolbar> | |
72 | + <Button bsStyle="primary" onClick={this.showModal}> | |
73 | + Upload CSV | |
74 | + </Button> | |
75 | + <Modal | |
76 | + {...this.props} | |
77 | + show={this.state.show} | |
78 | + onHide={this.hideModal} | |
79 | + dialogClassName="custom-modal" | |
80 | + > | |
81 | + <Modal.Header closeButton> | |
82 | + <Modal.Title id="contained-modal-title-lg">Upload Csv file</Modal.Title> | |
83 | + </Modal.Header> | |
84 | + <Modal.Body> | |
85 | + <form onSubmit={ (e) => this.uploadStudentCsv(e) } > | |
86 | + <FieldGroup | |
87 | + id="formControlsFile" | |
88 | + type="file" | |
89 | + label="File" | |
90 | + help="Upload you CSV here." | |
91 | + /> | |
92 | + <Button type="submit" bsStyle="default">Upload File</Button> | |
93 | + </form> | |
94 | + </Modal.Body> | |
95 | + <Modal.Footer> | |
96 | + <Button onClick={this.hideModal}>Close</Button> | |
97 | + </Modal.Footer> | |
98 | + </Modal> | |
99 | + </ButtonToolbar> | |
100 | + ); | |
101 | + }; | |
102 | + | |
103 | +}; | ... | ... |
imports/client/views/org/admin/users/students/add/AddStudentFormContainer.js
... | ... | @@ -0,0 +1,130 @@ |
1 | +import React, { Component } from 'react' | |
2 | +import { AddStudentForm } from './addStudentForm' | |
3 | +import StudentForm from './StudentForm' | |
4 | +import Form from '/imports/client/views/core/Form' | |
5 | +import Validator from '/imports/client/views/core/Validator' | |
6 | +import { isRequired, isValidEmail } from '/imports/client/views/core/validations' | |
7 | + | |
8 | + | |
9 | +export class AddStudentFormContainer extends Component { | |
10 | + | |
11 | + constructor(props) { | |
12 | + super(props) | |
13 | + this.state = { currentStep: 0 } | |
14 | + this.handleNextClick = this.handleNextClick.bind(this) | |
15 | + this.handleBackClick = this.handleBackClick.bind(this) | |
16 | + this.handleSubmit = this.handleSubmit.bind(this) | |
17 | + } | |
18 | + | |
19 | + handleNextClick() { | |
20 | + this.form.handleSubmit() | |
21 | + if (this.validator.getErrors() && Object.keys(this.validator.getErrors()).length > 0) return | |
22 | + this.setState({ currentStep: this.state.currentStep + 1 }) | |
23 | + this.form.resetSubmitted() | |
24 | + } | |
25 | + | |
26 | + handleBackClick() { | |
27 | + this.setState({ currentStep: this.state.currentStep + -1 }) | |
28 | + } | |
29 | + | |
30 | + handleSubmit() { | |
31 | + self = this; | |
32 | + if (this.state.currentStep === 3) { | |
33 | + Meteor.call('student.addManually',this.form.state.values, function(err, result){ | |
34 | + console.log("err"); | |
35 | + console.log(err); | |
36 | + console.log("result"); | |
37 | + console.log(result); | |
38 | + if(!err){ | |
39 | + self.props.hideModal(); | |
40 | + } | |
41 | + }); | |
42 | + } | |
43 | + } | |
44 | + | |
45 | + //render callback | |
46 | + render() { | |
47 | + return ( | |
48 | + <Form | |
49 | + onSubmit={this.handleSubmit} | |
50 | + ref={form => this.form = form} | |
51 | + initialValues={{ | |
52 | + gender: 'male', | |
53 | + parentGender: 'male', | |
54 | + admissionId: "123", | |
55 | + firstName: "first", | |
56 | + lastName: "last", | |
57 | + email: "deepak125.dk+21@gmail.com", | |
58 | + dob: "04/04/1989", | |
59 | + gender: "male", | |
60 | + rollNo: "1", | |
61 | + studentClass: "2", | |
62 | + section: "B", | |
63 | + community: "SC", | |
64 | + bloodGroup: "B+", | |
65 | + phone: "9876543321", | |
66 | + address: "address", | |
67 | + city: "chennai", | |
68 | + state: "tn", | |
69 | + parentName: "parentName", | |
70 | + parentEmail: "deepak125.dk+41@gmail.com", | |
71 | + relation: "father", | |
72 | + profession: "farmer", | |
73 | + parentGender: "male", | |
74 | + parentPhone: "987655412", | |
75 | + parentAddress: "parentAddress", | |
76 | + parentCity: "parentCity", | |
77 | + parentState: "parentState", | |
78 | + parentZipcode: "parentZipcode", | |
79 | + }} | |
80 | + > | |
81 | + {({ values, setValue, getValue, isSubmitted, isDirty }) => ( | |
82 | + <Validator | |
83 | + values={values} | |
84 | + ref={validator => this.validator = validator} | |
85 | + validations={{ | |
86 | + admissionId: [(value) => isRequired('Admission id', value)], | |
87 | + firstName: [(value) => isRequired('First name', value)], | |
88 | + lastName: [(value) => isRequired('Last name', value)], | |
89 | + email: [(value) => isRequired('Email', value), isValidEmail], | |
90 | + dob: [(value) => isRequired('Date of birth', value)], | |
91 | + gender: [(value) => isRequired('Gender', value)], | |
92 | + rollNo: [(value) => this.state.currentStep === 1 && isRequired('Roll no', value)], | |
93 | + studentClass: [(value) => this.state.currentStep === 1 && isRequired('Class', value)], | |
94 | + section: [(value) => this.state.currentStep === 1 && isRequired('Section', value)], | |
95 | + community: [(value) => this.state.currentStep === 1 && isRequired('Community', value)], | |
96 | + bloodGroup: [(value) => this.state.currentStep === 1 && isRequired('Blood group', value)], | |
97 | + phone: [(value) => this.state.currentStep === 1 && isRequired('Phone', value)], | |
98 | + address: [(value) => this.state.currentStep === 2 && isRequired('Address', value)], | |
99 | + city: [(value) => this.state.currentStep === 2 && isRequired('City', value)], | |
100 | + state: [(value) => this.state.currentStep === 2 && isRequired('State', value)], | |
101 | + parentName: [(value) => this.state.currentStep === 3 && isRequired('Parent name', value)], | |
102 | + parentEmail: [(value) => this.state.currentStep === 3 && isRequired('Parent email', value), (value) => this.state.currentStep === 3 && isValidEmail(value)], | |
103 | + relation: [(value) => this.state.currentStep === 3 && isRequired('Relation', value)], | |
104 | + profession: [(value) => this.state.currentStep === 3 && isRequired('Profession', value)], | |
105 | + parentGender: [(value) => this.state.currentStep === 3 && isRequired('Parent gender', value)], | |
106 | + parentPhone: [(value) => this.state.currentStep === 3 && isRequired('Parent phone', value)], | |
107 | + parentAddress: [(value) => this.state.currentStep === 3 && isRequired('Parent address', value)], | |
108 | + parentCity: [(value) => this.state.currentStep === 3 && isRequired('Parent city', value)], | |
109 | + parentState: [(value) => this.state.currentStep === 3 && isRequired('Parent state', value)], | |
110 | + parentZipcode: [(value) => this.state.currentStep === 3 && isRequired('Parent zip code', value)], | |
111 | + }} | |
112 | + > | |
113 | + {({ errors }) => ( | |
114 | + <StudentForm | |
115 | + isDirty={isDirty} | |
116 | + setValue={setValue} | |
117 | + getValue={getValue} | |
118 | + isSubmitted={isSubmitted} | |
119 | + errors={errors} | |
120 | + onNextClick={this.handleNextClick} | |
121 | + onBackClick={this.handleBackClick} | |
122 | + currentStep={this.state.currentStep} | |
123 | + /> | |
124 | + )} | |
125 | + </Validator> | |
126 | + )} | |
127 | + </Form> | |
128 | + ) | |
129 | + } | |
130 | +} | ... | ... |
imports/client/views/org/admin/users/students/add/StudentForm.js
... | ... | @@ -0,0 +1,474 @@ |
1 | +import React, { PropTypes } from 'react' | |
2 | +import { | |
3 | + Row, | |
4 | + Col, | |
5 | + FormGroup, | |
6 | + FormControl, | |
7 | + Button | |
8 | +} from 'react-bootstrap' | |
9 | +import DatePicker from '/imports/client/views/core/DatePicker' | |
10 | +import Label from '/imports/client/views/core/Label' | |
11 | +import Stepper from '/imports/client/views/core/Stepper' | |
12 | +import ErrorLabel from '/imports/client/views/core/ErrorLabel' | |
13 | + | |
14 | +const StudentForm = props => ( | |
15 | + <div className="stepy-validation"> | |
16 | + <Stepper | |
17 | + steps={[ | |
18 | + { | |
19 | + label: 'Personal data', | |
20 | + active: props.currentStep === 0, | |
21 | + }, | |
22 | + { | |
23 | + label: 'Academic', | |
24 | + active: props.currentStep === 1, | |
25 | + }, | |
26 | + { | |
27 | + label: 'Address', | |
28 | + active: props.currentStep === 2, | |
29 | + }, | |
30 | + { | |
31 | + label: 'Parent info', | |
32 | + active: props.currentStep === 3, | |
33 | + } | |
34 | + ]} | |
35 | + /> | |
36 | + {props.currentStep === 0 && ( | |
37 | + <fieldset title="1"> | |
38 | + <legend className="text-semibold">Personal data</legend> | |
39 | + <Row> | |
40 | + <Col xs={12} sm={4}> | |
41 | + <FormGroup controlId="admissionId"> | |
42 | + <Label required>Admission Id</Label> | |
43 | + <FormControl | |
44 | + type="text" | |
45 | + value={props.getValue('admissionId')} | |
46 | + placeholder="admission Id" | |
47 | + onChange={e => props.setValue('admissionId', e.target.value)} | |
48 | + /> | |
49 | + {props.isSubmitted() && props.errors && props.errors.admissionId && ( | |
50 | + <ErrorLabel> {props.errors.admissionId} </ErrorLabel> | |
51 | + )} | |
52 | + </FormGroup> | |
53 | + </Col> | |
54 | + <Col xs={12} sm={4}> | |
55 | + <FormGroup controlId="firstName"> | |
56 | + <Label required>First Name</Label> | |
57 | + <FormControl | |
58 | + type="text" | |
59 | + value={props.getValue('firstName')} | |
60 | + placeholder="First Name" | |
61 | + onChange={e => props.setValue('firstName', e.target.value)} | |
62 | + /> | |
63 | + {props.isSubmitted() && props.errors && props.errors.firstName && ( | |
64 | + <ErrorLabel> {props.errors.firstName} </ErrorLabel> | |
65 | + )} | |
66 | + </FormGroup> | |
67 | + </Col> | |
68 | + <Col xs={12} sm={4}> | |
69 | + <FormGroup controlId="lastName"> | |
70 | + <Label required>Last Name</Label> | |
71 | + <FormControl | |
72 | + type="text" | |
73 | + value={props.getValue('lastName')} | |
74 | + placeholder="Last Name" | |
75 | + onChange={e => props.setValue('lastName', e.target.value)} | |
76 | + /> | |
77 | + {props.isSubmitted() && props.errors && props.errors.lastName && ( | |
78 | + <ErrorLabel> {props.errors.lastName} </ErrorLabel> | |
79 | + )} | |
80 | + </FormGroup> | |
81 | + </Col> | |
82 | + </Row> | |
83 | + <Row> | |
84 | + <Col xs={12} sm={4}> | |
85 | + <FormGroup controlId="formControlsSelect"> | |
86 | + <Label>Gender</Label> | |
87 | + <FormControl componentClass="select" | |
88 | + placeholder="select" | |
89 | + value={props.getValue('gender')} | |
90 | + onChange={e => props.setValue('gender', e.target.value)} | |
91 | + > | |
92 | + <option value="male">Male</option> | |
93 | + <option value="female">Female</option> | |
94 | + </FormControl> | |
95 | + {props.isSubmitted() && props.errors && props.errors.gender && ( | |
96 | + <ErrorLabel> {props.errors.gender} </ErrorLabel> | |
97 | + )} | |
98 | + </FormGroup> | |
99 | + </Col> | |
100 | + <Col xs={12} sm={4}> | |
101 | + <FormGroup controlId="email"> | |
102 | + <Label required>Email</Label> | |
103 | + <FormControl | |
104 | + type="email" | |
105 | + value={props.getValue('email')} | |
106 | + placeholder="Email" | |
107 | + onChange={e => props.setValue('email', e.target.value)} | |
108 | + /> | |
109 | + {props.isSubmitted() && props.errors && props.errors.email && ( | |
110 | + <ErrorLabel> {props.errors.email} </ErrorLabel> | |
111 | + )} | |
112 | + </FormGroup> | |
113 | + </Col> | |
114 | + <Col xs={12} sm={4}> | |
115 | + <FormGroup> | |
116 | + <Label required>Date of birth</Label> | |
117 | + <DatePicker | |
118 | + id="dob" | |
119 | + setValue = {props.setValue} | |
120 | + value={props.getValue('dob')} | |
121 | + onChange={(e) => { | |
122 | + props.setValue('dob', e.target.value) | |
123 | + }} | |
124 | + /> | |
125 | + {props.isSubmitted() && props.errors && props.errors.dob && ( | |
126 | + <ErrorLabel> {props.errors.dob} </ErrorLabel> | |
127 | + )} | |
128 | + </FormGroup> | |
129 | + </Col> | |
130 | + </Row> | |
131 | + </fieldset> | |
132 | + )} | |
133 | + {props.currentStep === 1 && ( | |
134 | + <fieldset title="Academic"> | |
135 | + <legend className="text-semibold">Academic</legend> | |
136 | + <Row> | |
137 | + <Col xs={12} sm={4}> | |
138 | + <FormGroup controlId="rollNo"> | |
139 | + <Label required>Roll No</Label> | |
140 | + <FormControl | |
141 | + type="text" | |
142 | + value={props.getValue('rollNo')} | |
143 | + placeholder="Roll No" | |
144 | + onChange={e => props.setValue('rollNo', e.target.value)} | |
145 | + /> | |
146 | + {props.isSubmitted() && props.errors && props.errors.rollNo && ( | |
147 | + <ErrorLabel> {props.errors.rollNo} </ErrorLabel> | |
148 | + )} | |
149 | + </FormGroup> | |
150 | + </Col> | |
151 | + <Col xs={12} sm={4}> | |
152 | + <FormGroup controlId="class"> | |
153 | + <Label required>Class</Label> | |
154 | + <FormControl | |
155 | + type="text" | |
156 | + value={props.getValue('studentClass')} | |
157 | + placeholder="7" | |
158 | + onChange={e => props.setValue('studentClass', e.target.value)} | |
159 | + /> | |
160 | + {props.isSubmitted() && props.errors && props.errors.studentClass && ( | |
161 | + <ErrorLabel> {props.errors.studentClass} </ErrorLabel> | |
162 | + )} | |
163 | + </FormGroup> | |
164 | + </Col> | |
165 | + <Col xs={12} sm={4}> | |
166 | + <FormGroup controlId="section"> | |
167 | + <Label required>Section</Label> | |
168 | + <FormControl | |
169 | + type="text" | |
170 | + value={props.getValue('section')} | |
171 | + placeholder="B" | |
172 | + onChange={e => props.setValue('section', e.target.value)} | |
173 | + /> | |
174 | + {props.isSubmitted() && props.errors && props.errors.section && ( | |
175 | + <ErrorLabel> {props.errors.section} </ErrorLabel> | |
176 | + )} | |
177 | + </FormGroup> | |
178 | + </Col> | |
179 | + </Row> | |
180 | + <Row> | |
181 | + <Col xs={12} sm={4}> | |
182 | + <FormGroup controlId="community"> | |
183 | + <Label required>Community</Label> | |
184 | + <FormControl | |
185 | + type="text" | |
186 | + value={props.getValue('community')} | |
187 | + placeholder="General" | |
188 | + onChange={e => props.setValue('community', e.target.value)} | |
189 | + /> | |
190 | + {props.isSubmitted() && props.errors && props.errors.community && ( | |
191 | + <ErrorLabel> {props.errors.community} </ErrorLabel> | |
192 | + )} | |
193 | + </FormGroup> | |
194 | + </Col> | |
195 | + <Col xs={12} sm={4}> | |
196 | + <FormGroup controlId="bloodGroup"> | |
197 | + <Label required>bloodGroup</Label> | |
198 | + <FormControl | |
199 | + type="text" | |
200 | + value={props.getValue('bloodGroup')} | |
201 | + placeholder="B+" | |
202 | + onChange={e => props.setValue('bloodGroup', e.target.value)} | |
203 | + /> | |
204 | + {props.isSubmitted() && props.errors && props.errors.bloodGroup && ( | |
205 | + <ErrorLabel> {props.errors.bloodGroup} </ErrorLabel> | |
206 | + )} | |
207 | + </FormGroup> | |
208 | + </Col> | |
209 | + <Col xs={12} sm={4}> | |
210 | + <FormGroup controlId="phone"> | |
211 | + <Label required>Phone</Label> | |
212 | + <FormControl | |
213 | + type="text" | |
214 | + value={props.getValue('phone')} | |
215 | + placeholder="9999999999" | |
216 | + onChange={e => props.setValue('phone', e.target.value)} | |
217 | + /> | |
218 | + {props.isSubmitted() && props.errors && props.errors.phone && ( | |
219 | + <ErrorLabel> {props.errors.phone} </ErrorLabel> | |
220 | + )} | |
221 | + </FormGroup> | |
222 | + </Col> | |
223 | + </Row> | |
224 | + </fieldset> | |
225 | + )} | |
226 | + {props.currentStep === 2 && ( | |
227 | + <fieldset title="Address"> | |
228 | + <legend className="text-semibold">Address</legend> | |
229 | + <Row> | |
230 | + <Col xs={12} sm={4}> | |
231 | + <FormGroup controlId="address"> | |
232 | + <Label required>Address</Label> | |
233 | + <FormControl | |
234 | + type="text" | |
235 | + value={props.getValue('address')} | |
236 | + placeholder="#876, Street, town" | |
237 | + onChange={e => props.setValue('address', e.target.value)} | |
238 | + /> | |
239 | + {props.isSubmitted() && props.errors && props.errors.address && ( | |
240 | + <ErrorLabel> {props.errors.address} </ErrorLabel> | |
241 | + )} | |
242 | + </FormGroup> | |
243 | + </Col> | |
244 | + <Col xs={12} sm={4}> | |
245 | + <FormGroup controlId="city"> | |
246 | + <Label required>City</Label> | |
247 | + <FormControl | |
248 | + type="text" | |
249 | + value={props.getValue('city')} | |
250 | + placeholder="Chennai" | |
251 | + onChange={e => props.setValue('city', e.target.value)} | |
252 | + /> | |
253 | + {props.isSubmitted() && props.errors && props.errors.city && ( | |
254 | + <ErrorLabel> {props.errors.city} </ErrorLabel> | |
255 | + )} | |
256 | + </FormGroup> | |
257 | + </Col> | |
258 | + <Col xs={12} sm={4}> | |
259 | + <FormGroup controlId="state"> | |
260 | + <Label required>State</Label> | |
261 | + <FormControl | |
262 | + type="text" | |
263 | + value={props.getValue('state')} | |
264 | + placeholder="Tamilnadu" | |
265 | + onChange={e => props.setValue('state', e.target.value)} | |
266 | + /> | |
267 | + {props.isSubmitted() && props.errors && props.errors.state && ( | |
268 | + <ErrorLabel> {props.errors.state} </ErrorLabel> | |
269 | + )} | |
270 | + </FormGroup> | |
271 | + </Col> | |
272 | + </Row> | |
273 | + </fieldset> | |
274 | + )} | |
275 | + {props.currentStep === 3 && ( | |
276 | + <fieldset title="2"> | |
277 | + <legend className="text-semibold">Parent information</legend> | |
278 | + <Row> | |
279 | + <Col xs={12} sm={4}> | |
280 | + <FormGroup controlId="parentName"> | |
281 | + <Label required>Parent Name</Label> | |
282 | + <FormControl | |
283 | + type="text" | |
284 | + value={props.getValue('parentName')} | |
285 | + placeholder="John" | |
286 | + onChange={e => props.setValue('parentName', e.target.value)} | |
287 | + /> | |
288 | + {props.isSubmitted() && props.errors && props.errors.parentName && ( | |
289 | + <ErrorLabel> {props.errors.parentName} </ErrorLabel> | |
290 | + )} | |
291 | + </FormGroup> | |
292 | + </Col> | |
293 | + <Col xs={12} sm={4}> | |
294 | + <FormGroup controlId="parentEmail"> | |
295 | + <Label required>Parent Email</Label> | |
296 | + <FormControl | |
297 | + type="text" | |
298 | + value={props.getValue('parentEmail')} | |
299 | + placeholder="john@email.com" | |
300 | + onChange={e => props.setValue('parentEmail', e.target.value)} | |
301 | + /> | |
302 | + {props.isSubmitted() && props.errors && props.errors.parentEmail && ( | |
303 | + <ErrorLabel> {props.errors.parentEmail} </ErrorLabel> | |
304 | + )} | |
305 | + </FormGroup> | |
306 | + </Col> | |
307 | + <Col xs={12} sm={4}> | |
308 | + <FormGroup controlId="relation"> | |
309 | + <Label required>Relation</Label> | |
310 | + <FormControl | |
311 | + type="text" | |
312 | + value={props.getValue('relation')} | |
313 | + placeholder="Father" | |
314 | + onChange={e => props.setValue('relation', e.target.value)} | |
315 | + /> | |
316 | + {props.isSubmitted() && props.errors && props.errors.relation && ( | |
317 | + <ErrorLabel> {props.errors.relation} </ErrorLabel> | |
318 | + )} | |
319 | + </FormGroup> | |
320 | + </Col> | |
321 | + </Row> | |
322 | + <Row> | |
323 | + <Col xs={12} sm={4}> | |
324 | + <FormGroup controlId="profession"> | |
325 | + <Label required>Profession</Label> | |
326 | + <FormControl | |
327 | + type="text" | |
328 | + value={props.getValue('profession')} | |
329 | + placeholder="Farmer" | |
330 | + onChange={e => props.setValue('profession', e.target.value)} | |
331 | + /> | |
332 | + {props.isSubmitted() && props.errors && props.errors.profession && ( | |
333 | + <ErrorLabel> {props.errors.profession} </ErrorLabel> | |
334 | + )} | |
335 | + </FormGroup> | |
336 | + </Col> | |
337 | + <Col xs={12} sm={4}> | |
338 | + <FormGroup controlId="parentGender"> | |
339 | + <Label>Parent Gender</Label> | |
340 | + <FormControl componentClass="select" | |
341 | + placeholder="select" | |
342 | + value={props.getValue('parentGender')} | |
343 | + onChange={e => props.setValue('parentGender', e.target.value)} | |
344 | + > | |
345 | + <option value="male">Male</option> | |
346 | + <option value="female">Female</option> | |
347 | + </FormControl> | |
348 | + {props.isSubmitted() && props.errors && props.errors.parentGender && ( | |
349 | + <ErrorLabel> {props.errors.parentGender} </ErrorLabel> | |
350 | + )} | |
351 | + </FormGroup> | |
352 | + </Col> | |
353 | + <Col xs={12} sm={4}> | |
354 | + <FormGroup controlId="parentPhone"> | |
355 | + <Label required>Parent Phone</Label> | |
356 | + <FormControl | |
357 | + type="text" | |
358 | + value={props.getValue('parentPhone')} | |
359 | + placeholder="9876543210" | |
360 | + onChange={e => props.setValue('parentPhone', e.target.value)} | |
361 | + /> | |
362 | + {props.isSubmitted() && props.errors && props.errors.parentPhone && ( | |
363 | + <ErrorLabel> {props.errors.parentPhone} </ErrorLabel> | |
364 | + )} | |
365 | + </FormGroup> | |
366 | + </Col> | |
367 | + </Row> | |
368 | + <Row> | |
369 | + <Col xs={12} sm={4}> | |
370 | + <FormGroup controlId="parentAddress"> | |
371 | + <Label required>Parent Address</Label> | |
372 | + <FormControl | |
373 | + type="text" | |
374 | + value={props.getValue('parentAddress')} | |
375 | + placeholder="#12, street, town" | |
376 | + onChange={e => props.setValue('parentAddress', e.target.value)} | |
377 | + /> | |
378 | + {props.isSubmitted() && props.errors && props.errors.parentAddress && ( | |
379 | + <ErrorLabel> {props.errors.parentAddress} </ErrorLabel> | |
380 | + )} | |
381 | + </FormGroup> | |
382 | + </Col> | |
383 | + <Col xs={12} sm={4}> | |
384 | + <FormGroup controlId="parentCity"> | |
385 | + <Label required>Parent City</Label> | |
386 | + <FormControl | |
387 | + type="text" | |
388 | + value={props.getValue('parentCity')} | |
389 | + placeholder="Chennai" | |
390 | + onChange={e => props.setValue('parentCity', e.target.value)} | |
391 | + /> | |
392 | + {props.isSubmitted() && props.errors && props.errors.parentCity && ( | |
393 | + <ErrorLabel> {props.errors.parentCity} </ErrorLabel> | |
394 | + )} | |
395 | + </FormGroup> | |
396 | + </Col> | |
397 | + <Col xs={12} sm={4}> | |
398 | + <FormGroup controlId="parentState"> | |
399 | + <Label required>Parent State</Label> | |
400 | + <FormControl | |
401 | + type="text" | |
402 | + value={props.getValue('parentState')} | |
403 | + placeholder="600031" | |
404 | + onChange={e => props.setValue('parentState', e.target.value)} | |
405 | + /> | |
406 | + {props.isSubmitted() && props.errors && props.errors.parentState && ( | |
407 | + <ErrorLabel> {props.errors.parentState} </ErrorLabel> | |
408 | + )} | |
409 | + </FormGroup> | |
410 | + </Col> | |
411 | + </Row> | |
412 | + <Row> | |
413 | + <Col xs={12} sm={4}> | |
414 | + <FormGroup controlId="parentZipcode"> | |
415 | + <Label required>Parent Zipcode</Label> | |
416 | + <FormControl | |
417 | + type="text" | |
418 | + value={props.getValue('parentZipcode')} | |
419 | + placeholder="600031" | |
420 | + onChange={e => props.setValue('parentZipcode', e.target.value)} | |
421 | + /> | |
422 | + {props.isSubmitted() && props.errors && props.errors.parentZipcode && ( | |
423 | + <ErrorLabel> {props.errors.parentZipcode} </ErrorLabel> | |
424 | + )} | |
425 | + </FormGroup> | |
426 | + </Col> | |
427 | + </Row> | |
428 | + </fieldset> | |
429 | + )} | |
430 | + <div style={{ textAlign: 'left' }}> | |
431 | + {props.currentStep > 0 && ( | |
432 | + <div style={{ display: 'inline-block', marginRight: 10 }}> | |
433 | + <Button onClick={props.onBackClick}> | |
434 | + <i className="icon-arrow-left13 position-left"></i> | |
435 | + BACK | |
436 | + </Button> | |
437 | + | |
438 | + </div> | |
439 | + )} | |
440 | + {props.currentStep < 3 && ( | |
441 | + <div style={{ display: 'inline-block' }}> | |
442 | + <Button | |
443 | + bsStyle="primary" | |
444 | + onClick={props.onNextClick} | |
445 | + > | |
446 | + NEXT | |
447 | + <i className="icon-arrow-right14 position-right" /> | |
448 | + </Button> | |
449 | + </div> | |
450 | + )} | |
451 | + {props.currentStep === 3 && ( | |
452 | + <div style={{ display: 'inline-block' }}> | |
453 | + <Button | |
454 | + bsStyle="primary" | |
455 | + onClick={props.onNextClick} | |
456 | + > | |
457 | + SAVE | |
458 | + <i className="fa fa-check" /> | |
459 | + </Button> | |
460 | + </div> | |
461 | + )} | |
462 | + </div> | |
463 | + </div> | |
464 | +) | |
465 | + | |
466 | +StudentForm.propTypes = { | |
467 | + currentStep: PropTypes.number.isRequired, | |
468 | + onNextClick: PropTypes.func.isRequired, | |
469 | + onBackClick: PropTypes.func.isRequired, | |
470 | + setValue: PropTypes.func.isRequired, | |
471 | + getValue: PropTypes.func.isRequired, | |
472 | +} | |
473 | + | |
474 | +export default StudentForm | ... | ... |
imports/client/views/org/admin/users/students/add/addStudent.js
... | ... | @@ -0,0 +1,66 @@ |
1 | +import _ from 'lodash'; | |
2 | +import { Meteor } from 'meteor/meteor'; | |
3 | +import React, { Component } from 'react'; | |
4 | +import { Link,browserHistory } from 'react-router'; | |
5 | +import { FormGroup,Panel,Table, | |
6 | + ButtonToolbar,Modal, | |
7 | + FormControl,Glyphicon,Button } from 'react-bootstrap'; | |
8 | +import { AddStudentFormContainer } from './AddStudentFormContainer'; | |
9 | + | |
10 | +const style = { | |
11 | + margin: 12, | |
12 | +}; | |
13 | +export class AddStudent extends Component { | |
14 | + constructor(props) { | |
15 | + super(props); | |
16 | + this.state = { | |
17 | + show: false | |
18 | + }; | |
19 | + this.showModal = this.showModal.bind(this); | |
20 | + this.hideModal = this.hideModal.bind(this); | |
21 | + this.onUpdate = this.onUpdate.bind(this); | |
22 | + }; | |
23 | + | |
24 | + showModal() { | |
25 | + this.setState({show: true}); | |
26 | + } | |
27 | + | |
28 | + hideModal() { | |
29 | + this.setState({show: false}); | |
30 | + } | |
31 | + onUpdate(key, value) { | |
32 | + this.setState({[key]: value}); | |
33 | + }; | |
34 | + | |
35 | + render() { | |
36 | + return ( | |
37 | + <ButtonToolbar> | |
38 | + <Button bsStyle="primary" onClick={this.showModal}> | |
39 | + Add Student | |
40 | + </Button> | |
41 | + <Modal | |
42 | + {...this.props} | |
43 | + show={this.state.show} | |
44 | + onHide={this.hideModal} | |
45 | + dialogClassName="custom-modal" | |
46 | + bsSize="large" | |
47 | + > | |
48 | + <Modal.Header closeButton> | |
49 | + <Modal.Title id="contained-modal-title-lg">Add Student</Modal.Title> | |
50 | + </Modal.Header> | |
51 | + <Modal.Body> | |
52 | + <AddStudentFormContainer | |
53 | + hideModal = {this.hideModal} | |
54 | + /> | |
55 | + </Modal.Body> | |
56 | + {/* | |
57 | + <Modal.Footer> | |
58 | + <Button onClick={this.hideModal}>Close</Button> | |
59 | + </Modal.Footer> | |
60 | + */} | |
61 | + </Modal> | |
62 | + </ButtonToolbar> | |
63 | + ); | |
64 | + }; | |
65 | + | |
66 | +}; | ... | ... |
imports/client/views/org/admin/users/students/add/addStudentForm.js
... | ... | @@ -0,0 +1,500 @@ |
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 { Form, FormGroup,InputGroup, | |
7 | + DropdownButton,MenuItem,ControlLabel, | |
8 | + SplitButton, | |
9 | + FormControl,Glyphicon,Button } from 'react-bootstrap'; | |
10 | +import DatePicker from 'react-bootstrap-date-picker' | |
11 | +import {addStudentManually} from '/imports/collections/students/methods'; | |
12 | + | |
13 | +export class AddStudentForm extends Component { | |
14 | + | |
15 | + constructor(props) { | |
16 | + super(props); | |
17 | + this.state = { | |
18 | + admissionId: "123", | |
19 | + firstName: "first", | |
20 | + lastName: "last", | |
21 | + middleName: "middle", | |
22 | + email: "deepak125.dk+21@gmail.com", | |
23 | + dob: "", | |
24 | + formattedDob: "", | |
25 | + gender: "male", | |
26 | + rollNo: "1", | |
27 | + class: "2", | |
28 | + section: "B", | |
29 | + community: "SC", | |
30 | + bloodGroup: "B+", | |
31 | + phone: "9876543321", | |
32 | + address: "address", | |
33 | + city: "chennai", | |
34 | + state: "tn", | |
35 | + parentName: "parentName", | |
36 | + parentEmail: "deepak125.dk+41@gmail.com", | |
37 | + relation: "father", | |
38 | + profession: "farmer", | |
39 | + parentGender: "male", | |
40 | + parentPhone: "987655412", | |
41 | + parentAddress: "parentAddress", | |
42 | + parentCity: "parentCity", | |
43 | + parentState: "parentState", | |
44 | + parentZipcode: "parentZipcode", | |
45 | + }; | |
46 | + this.onUpdate = this.onUpdate.bind(this); | |
47 | + this.handleDob = this.handleDob.bind(this); | |
48 | + }; | |
49 | + | |
50 | + onUpdate(key, value) { | |
51 | + this.setState({[key]: value}); | |
52 | + }; | |
53 | + | |
54 | + handleDob(value, formattedValue) { | |
55 | + this.setState({ | |
56 | + dob: value, // ISO String, ex: "2016-11-19T12:00:00.000Z" | |
57 | + formattedDob: formattedValue // Formatted String, ex: "11/19/2016" | |
58 | + }); | |
59 | +} | |
60 | + addStudent(e){ | |
61 | + e.preventDefault(); | |
62 | + e.persist(); | |
63 | + const firstName = this.state.firstName; | |
64 | + const middleName = this.state.middleName; | |
65 | + const lastName = this.state.lastName; | |
66 | + const admissionId = this.state.admissionId; | |
67 | + const email = this.state.email; | |
68 | + const dob = this.state.dob; | |
69 | + const formattedDob = this.state.formattedDob; | |
70 | + const gender = this.state.gender; | |
71 | + const rollNo = this.state.rollNo; | |
72 | + const studentclass = this.state.class; | |
73 | + const section = this.state.section; | |
74 | + const community = this.state.community; | |
75 | + const bloodGroup = this.state.bloodGroup; | |
76 | + const phone = this.state.phone; | |
77 | + const address = this.state.address; | |
78 | + const city = this.state.city; | |
79 | + const state = this.state.state; | |
80 | + const parentName = this.state.parentName; | |
81 | + const parentEmail = this.state.parentEmail; | |
82 | + const relation = this.state.relation; | |
83 | + const profession = this.state.profession; | |
84 | + const parentGender = this.state.parentGender; | |
85 | + const parentPhone = this.state.parentPhone; | |
86 | + const parentAddress = this.state.parentAddress; | |
87 | + const parentCity = this.state.parentCity; | |
88 | + const parentState = this.state.parentState; | |
89 | + const parentZipcode = this.state.parentZipcode; | |
90 | + if(admissionId==""){ | |
91 | + Bert.alert('Enter Admission Id!', 'danger'); | |
92 | + }else if(firstName==""){ | |
93 | + Bert.alert('Enter Fist Name', 'danger'); | |
94 | + } else if(middleName==""){ | |
95 | + Bert.alert('Enter Middle name!', 'danger'); | |
96 | + }else if(lastName==""){ | |
97 | + Bert.alert('Enter Last name!', 'danger'); | |
98 | + }else if(email==""){ | |
99 | + Bert.alert('Enter email!', 'danger'); | |
100 | + }else if(dob==""){ | |
101 | + Bert.alert('Enter DOB!', 'danger'); | |
102 | + }else if(gender==""){ | |
103 | + Bert.alert('Enter Student Gender!', 'danger'); | |
104 | + }else if(studentclass==""){ | |
105 | + Bert.alert('Enter Class!', 'danger'); | |
106 | + }else if(section==""){ | |
107 | + Bert.alert('Enter Section!', 'danger'); | |
108 | + }else if(community==""){ | |
109 | + Bert.alert('Enter Section!', 'danger'); | |
110 | + }else if(bloodGroup==""){ | |
111 | + Bert.alert('Enter Blood Group!', 'danger'); | |
112 | + }else if(phone==""){ | |
113 | + Bert.alert('Enter phone!', 'danger'); | |
114 | + }else if(address==""){ | |
115 | + Bert.alert('Enter address!', 'danger'); | |
116 | + }else if(city==""){ | |
117 | + Bert.alert('Enter city!', 'danger'); | |
118 | + }else if(state==""){ | |
119 | + Bert.alert('Enter state!', 'danger'); | |
120 | + }else if(parentName==""){ | |
121 | + Bert.alert('Enter Parent name!', 'danger'); | |
122 | + }else if(parentEmail==""){ | |
123 | + Bert.alert('Enter Parent Email!', 'danger'); | |
124 | + }else if(relation==""){ | |
125 | + Bert.alert('Enter relation!', 'danger'); | |
126 | + }else if(profession==""){ | |
127 | + Bert.alert('Enter parent profession!', 'danger'); | |
128 | + }else if(parentGender==""){ | |
129 | + Bert.alert("Enter Parent's Gender!", 'danger'); | |
130 | + }else if(parentPhone==""){ | |
131 | + Bert.alert("Enter Parent's Phone!", 'danger'); | |
132 | + }else if(parentAddress==""){ | |
133 | + Bert.alert("Enter Parent's Address!", 'danger'); | |
134 | + }else if(parentCity==""){ | |
135 | + Bert.alert("Enter Parent's City!", 'danger'); | |
136 | + }else if(parentState==""){ | |
137 | + Bert.alert("Enter Parent's State!", 'danger'); | |
138 | + }else if(parentZipcode==""){ | |
139 | + Bert.alert("Enter Parent's zipcode!", 'danger'); | |
140 | + }else{ | |
141 | + addStudentManually.call({ | |
142 | + admissionId, | |
143 | + firstName, | |
144 | + middleName, | |
145 | + lastName, | |
146 | + email, | |
147 | + dob, | |
148 | + formattedDob, | |
149 | + gender, | |
150 | + rollNo, | |
151 | + studentclass, | |
152 | + section, | |
153 | + community, | |
154 | + bloodGroup, | |
155 | + phone, | |
156 | + address, | |
157 | + city, | |
158 | + state, | |
159 | + parentName, | |
160 | + parentEmail, | |
161 | + relation, | |
162 | + profession, | |
163 | + parentGender, | |
164 | + parentPhone, | |
165 | + parentAddress, | |
166 | + parentCity, | |
167 | + parentState, | |
168 | + parentZipcode | |
169 | + }, function (error, result) { | |
170 | + console.log(error); | |
171 | + console.log(result); | |
172 | + }); | |
173 | + } | |
174 | + } | |
175 | + render() { | |
176 | + return ( | |
177 | + <Form className="steps-validation wizard clearfix" onSubmit={ (e) => this.addStudent(e) } inline> | |
178 | + <div className="steps clearfix"> | |
179 | + <ul role="tablist"> | |
180 | + <li role="tab" className="first current" aria-disabled="false" aria-selected="true"> | |
181 | + <a id="steps-uid-4-t-0" href="#steps-uid-4-h-0" aria-controls="steps-uid-4-p-0"> | |
182 | + <span className="current-info audible">current step: </span><span className="number">1</span> Personal data | |
183 | + </a> | |
184 | + </li> | |
185 | + <li role="tab" className="disabled" aria-disabled="true"> | |
186 | + <a id="steps-uid-4-t-1" href="#steps-uid-4-h-1" aria-controls="steps-uid-4-p-1"> | |
187 | + <span className="number">2</span> Your education\n\ | |
188 | + </a> | |
189 | + </li> | |
190 | + <li role="tab" className="disabled" aria-disabled="true"> | |
191 | + <a id="steps-uid-4-t-2" href="#steps-uid-4-h-2" aria-controls="steps-uid-4-p-2"> | |
192 | + <span className="number">3</span> Your experience | |
193 | + </a> | |
194 | + </li> | |
195 | + <li role="tab" className="disabled last" aria-disabled="true"> | |
196 | + <a id="steps-uid-4-t-3" href="#steps-uid-4-h-3" aria-controls="steps-uid-4-p-3"> | |
197 | + <span className="number">4</span> Additional info | |
198 | + </a> | |
199 | + </li> | |
200 | + </ul> | |
201 | + </div> | |
202 | + <div className="content clearfix"> | |
203 | + <h6 id="steps-uid-4-h-0" tabindex="-1" className="title current">Personal data</h6> | |
204 | + <div id="steps-uid-4-p-0" role="tabpanel" aria-labelledby="steps-uid-4-h-0" className="body current"> | |
205 | + <div className="row"> | |
206 | + <div className="col-md-6"> | |
207 | + | |
208 | + <FormGroup controlId="admissionId"> | |
209 | + <ControlLabel>Admission Id</ControlLabel> | |
210 | + <FormControl | |
211 | + type="text" | |
212 | + value={this.state.admissionId} | |
213 | + placeholder="admission Id" | |
214 | + onChange={e=>this.onUpdate('admissionId',e.target.value)} | |
215 | + /> | |
216 | + </FormGroup> | |
217 | + | |
218 | + </div> | |
219 | + | |
220 | + <div className="col-md-6"> | |
221 | + | |
222 | + <FormGroup controlId="firstName"> | |
223 | + <ControlLabel>First Name</ControlLabel> | |
224 | + <FormControl | |
225 | + type="text" | |
226 | + value={this.state.firstName} | |
227 | + placeholder="First Name" | |
228 | + onChange={e=>this.onUpdate('firstName',e.target.value)} | |
229 | + /> | |
230 | + </FormGroup> | |
231 | + | |
232 | + </div> | |
233 | + </div> | |
234 | + </div> | |
235 | + </div> | |
236 | + | |
237 | + | |
238 | + <FormGroup controlId="admissionId"> | |
239 | + <ControlLabel>Admission Id</ControlLabel> | |
240 | + <FormControl | |
241 | + type="text" | |
242 | + value={this.state.admissionId} | |
243 | + placeholder="admission Id" | |
244 | + onChange={e=>this.onUpdate('admissionId',e.target.value)} | |
245 | + /> | |
246 | + </FormGroup> | |
247 | + | |
248 | + <FormGroup controlId="firstName"> | |
249 | + <ControlLabel>First Name</ControlLabel> | |
250 | + <FormControl | |
251 | + type="text" | |
252 | + value={this.state.firstName} | |
253 | + placeholder="First Name" | |
254 | + onChange={e=>this.onUpdate('firstName',e.target.value)} | |
255 | + /> | |
256 | + </FormGroup> | |
257 | + <FormGroup controlId="middleName"> | |
258 | + <ControlLabel>Middle Name</ControlLabel> | |
259 | + <FormControl | |
260 | + type="text" | |
261 | + value={this.state.middleName} | |
262 | + placeholder="Middle Name" | |
263 | + onChange={e=>this.onUpdate('middleName',e.target.value)} | |
264 | + /> | |
265 | + </FormGroup> | |
266 | + | |
267 | + <FormGroup controlId="lastName"> | |
268 | + <ControlLabel>Last Name</ControlLabel> | |
269 | + <FormControl | |
270 | + type="text" | |
271 | + value={this.state.lastName} | |
272 | + placeholder="Last Name" | |
273 | + onChange={e=>this.onUpdate('lastName',e.target.value)} | |
274 | + /> | |
275 | + | |
276 | + </FormGroup> | |
277 | + <FormGroup controlId="email"> | |
278 | + <ControlLabel>Email</ControlLabel> | |
279 | + <FormControl | |
280 | + type="email" | |
281 | + value={this.state.email} | |
282 | + placeholder="Email" | |
283 | + onChange={e=>this.onUpdate('email',e.target.value)} | |
284 | + /> | |
285 | + </FormGroup> | |
286 | + <FormGroup> | |
287 | + <ControlLabel>Date of birth</ControlLabel> | |
288 | + <DatePicker id="dob" | |
289 | + value={this.state.dob} | |
290 | + onChange={this.handleDob} | |
291 | + /> | |
292 | + </FormGroup> | |
293 | + | |
294 | + <FormGroup controlId="formControlsSelect"> | |
295 | + <ControlLabel>Gender</ControlLabel> | |
296 | + <FormControl componentClass="select" | |
297 | + placeholder="select" | |
298 | + value={this.state.gender} | |
299 | + onChange={e=>this.onUpdate('gender',e.target.value)} | |
300 | + > | |
301 | + <option value="male">Male</option> | |
302 | + <option value="female">Female</option> | |
303 | + </FormControl> | |
304 | + </FormGroup> | |
305 | + | |
306 | + <FormGroup controlId="rollNo"> | |
307 | + <ControlLabel>Roll No</ControlLabel> | |
308 | + <FormControl | |
309 | + type="text" | |
310 | + value={this.state.rollNo} | |
311 | + placeholder="Roll No" | |
312 | + onChange={e=>this.onUpdate('rollNo',e.target.value)} | |
313 | + /> | |
314 | + </FormGroup> | |
315 | + <FormGroup controlId="class"> | |
316 | + <ControlLabel>Class</ControlLabel> | |
317 | + <FormControl | |
318 | + type="text" | |
319 | + value={this.state.class} | |
320 | + placeholder="7" | |
321 | + onChange={e=>this.onUpdate('class',e.target.value)} | |
322 | + /> | |
323 | + </FormGroup> | |
324 | + <FormGroup controlId="section"> | |
325 | + <ControlLabel>Section</ControlLabel> | |
326 | + <FormControl | |
327 | + type="text" | |
328 | + value={this.state.section} | |
329 | + placeholder="B" | |
330 | + onChange={e=>this.onUpdate('section',e.target.value)} | |
331 | + /> | |
332 | + </FormGroup> | |
333 | + | |
334 | + <FormGroup controlId="community"> | |
335 | + <ControlLabel>Community</ControlLabel> | |
336 | + <FormControl | |
337 | + type="text" | |
338 | + value={this.state.community} | |
339 | + placeholder="General" | |
340 | + onChange={e=>this.onUpdate('community',e.target.value)} | |
341 | + /> | |
342 | + </FormGroup> | |
343 | + | |
344 | + <FormGroup controlId="bloodGroup"> | |
345 | + <ControlLabel>bloodGroup</ControlLabel> | |
346 | + <FormControl | |
347 | + type="text" | |
348 | + value={this.state.bloodGroup} | |
349 | + placeholder="B+" | |
350 | + onChange={e=>this.onUpdate('bloodGroup',e.target.value)} | |
351 | + /> | |
352 | + </FormGroup> | |
353 | + | |
354 | + <FormGroup controlId="phone"> | |
355 | + <ControlLabel>Phone</ControlLabel> | |
356 | + <FormControl | |
357 | + type="text" | |
358 | + value={this.state.phone} | |
359 | + placeholder="9999999999" | |
360 | + onChange={e=>this.onUpdate('phone',e.target.value)} | |
361 | + /> | |
362 | + </FormGroup> | |
363 | + | |
364 | + <FormGroup controlId="address"> | |
365 | + <ControlLabel>Address</ControlLabel> | |
366 | + <FormControl | |
367 | + type="text" | |
368 | + value={this.state.address} | |
369 | + placeholder="#876, Street, town" | |
370 | + onChange={e=>this.onUpdate('address',e.target.value)} | |
371 | + /> | |
372 | + </FormGroup> | |
373 | + | |
374 | + <FormGroup controlId="city"> | |
375 | + <ControlLabel>City</ControlLabel> | |
376 | + <FormControl | |
377 | + type="text" | |
378 | + value={this.state.city} | |
379 | + placeholder="Chennai" | |
380 | + onChange={e=>this.onUpdate('city',e.target.value)} | |
381 | + /> | |
382 | + </FormGroup> | |
383 | + | |
384 | + <FormGroup controlId="state"> | |
385 | + <ControlLabel>State</ControlLabel> | |
386 | + <FormControl | |
387 | + type="text" | |
388 | + value={this.state.state} | |
389 | + placeholder="Tamilnadu" | |
390 | + onChange={e=>this.onUpdate('state',e.target.value)} | |
391 | + /> | |
392 | + </FormGroup> | |
393 | + | |
394 | + <FormGroup controlId="parentName"> | |
395 | + <ControlLabel>Parent Name</ControlLabel> | |
396 | + <FormControl | |
397 | + type="text" | |
398 | + value={this.state.parentName} | |
399 | + placeholder="John" | |
400 | + onChange={e=>this.onUpdate('parentName',e.target.value)} | |
401 | + /> | |
402 | + </FormGroup> | |
403 | + | |
404 | + <FormGroup controlId="parentEmail"> | |
405 | + <ControlLabel>Parent Email</ControlLabel> | |
406 | + <FormControl | |
407 | + type="text" | |
408 | + value={this.state.parentEmail} | |
409 | + placeholder="john@email.com" | |
410 | + onChange={e=>this.onUpdate('parentEmail',e.target.value)} | |
411 | + /> | |
412 | + </FormGroup> | |
413 | + | |
414 | + <FormGroup controlId="relation"> | |
415 | + <ControlLabel>Relation</ControlLabel> | |
416 | + <FormControl | |
417 | + type="text" | |
418 | + value={this.state.relation} | |
419 | + placeholder="Father" | |
420 | + onChange={e=>this.onUpdate('relation',e.target.value)} | |
421 | + /> | |
422 | + </FormGroup> | |
423 | + | |
424 | + <FormGroup controlId="profession"> | |
425 | + <ControlLabel>Profession</ControlLabel> | |
426 | + <FormControl | |
427 | + type="text" | |
428 | + value={this.state.profession} | |
429 | + placeholder="Farmer" | |
430 | + onChange={e=>this.onUpdate('profession',e.target.value)} | |
431 | + /> | |
432 | + </FormGroup> | |
433 | + | |
434 | + <FormGroup controlId="parentGender"> | |
435 | + <ControlLabel>Parent Gender</ControlLabel> | |
436 | + <FormControl componentClass="select" | |
437 | + placeholder="select" | |
438 | + value={this.state.parentGender} | |
439 | + onChange={e=>this.onUpdate('parentGender',e.target.value)} | |
440 | + > | |
441 | + <option value="male">Male</option> | |
442 | + <option value="female">Female</option> | |
443 | + </FormControl> | |
444 | + </FormGroup> | |
445 | + | |
446 | + <FormGroup controlId="parentPhone"> | |
447 | + <ControlLabel>Parent Phone</ControlLabel> | |
448 | + <FormControl | |
449 | + type="text" | |
450 | + value={this.state.parentPhone} | |
451 | + placeholder="9876543210" | |
452 | + onChange={e=>this.onUpdate('parentPhone',e.target.value)} | |
453 | + /> | |
454 | + </FormGroup> | |
455 | + | |
456 | + <FormGroup controlId="parentAddress"> | |
457 | + <ControlLabel>Parent Address</ControlLabel> | |
458 | + <FormControl | |
459 | + type="text" | |
460 | + value={this.state.parentAddress} | |
461 | + placeholder="#12, street, town" | |
462 | + onChange={e=>this.onUpdate('parentAddress',e.target.value)} | |
463 | + /> | |
464 | + </FormGroup> | |
465 | + | |
466 | + <FormGroup controlId="parentCity"> | |
467 | + <ControlLabel>Parent City</ControlLabel> | |
468 | + <FormControl | |
469 | + type="text" | |
470 | + value={this.state.parentCity} | |
471 | + placeholder="Chennai" | |
472 | + onChange={e=>this.onUpdate('parentCity',e.target.value)} | |
473 | + /> | |
474 | + </FormGroup> | |
475 | + | |
476 | + <FormGroup controlId="parentState"> | |
477 | + <ControlLabel>Parent State</ControlLabel> | |
478 | + <FormControl | |
479 | + type="text" | |
480 | + value={this.state.parentState} | |
481 | + placeholder="Tamilnadu" | |
482 | + onChange={e=>this.onUpdate('parentState',e.target.value)} | |
483 | + /> | |
484 | + </FormGroup> | |
485 | + | |
486 | + <FormGroup controlId="parentZipcode"> | |
487 | + <ControlLabel>Parent Zipcode</ControlLabel> | |
488 | + <FormControl | |
489 | + type="text" | |
490 | + value={this.state.parentZipcode} | |
491 | + placeholder="600031" | |
492 | + onChange={e=>this.onUpdate('parentZipcode',e.target.value)} | |
493 | + /> | |
494 | + </FormGroup> | |
495 | + <Button type="submit" bsStyle="default">Add Student</Button> | |
496 | + </Form> | |
497 | + ); | |
498 | + }; | |
499 | + | |
500 | +}; | ... | ... |
imports/client/views/org/admin/users/students/index.js
... | ... | @@ -0,0 +1,69 @@ |
1 | +// import { StudentDataController } from '/imports/client/views/org/admin/students/index' | |
2 | +import _ from 'lodash'; | |
3 | +import { | |
4 | + composeWithTracker, | |
5 | + compose, | |
6 | + composeAll | |
7 | + } from 'react-komposer'; | |
8 | +import { Loading } from '/imports/client/components/Loading'; | |
9 | + | |
10 | +import { Orgs } from '/imports/collections/orgs/index'; | |
11 | +import { Users } from '/imports/collections/users/index'; | |
12 | +import { StudentView } from './StudentView'; | |
13 | +import { Students } from '/imports/collections/students/index'; | |
14 | + | |
15 | + | |
16 | +const meteorTick = (props, onData) => { | |
17 | + Shelf.layout.set({ | |
18 | + bulb: 'SETTINGS', | |
19 | + subbulb: 'USERS', | |
20 | + view: 'STUDENTS' | |
21 | + }); | |
22 | + const handles = [ | |
23 | + Meteor.subscribe('users.current'), | |
24 | + Meteor.subscribe('orgs.current'), | |
25 | + Meteor.subscribe('users.forMyOrg'), | |
26 | + Meteor.subscribe('student.forMyOrg'), | |
27 | + ]; | |
28 | + | |
29 | + if(_.every(handles, (handle) => (handle.ready()) )) { | |
30 | + const user = Users.current(); | |
31 | + const org = Orgs.current(); | |
32 | + students = Users.find({"role":"STUDENT"}).fetch() ? Users.find({"role":"STUDENT"}).fetch() : ""; | |
33 | + studentData = Students.find().fetch() ? Students.find().fetch() : ""; | |
34 | + for(var i=0; i< studentData.length; i++){ | |
35 | + for(var j=0; j< students.length; j++){ | |
36 | + if(studentData[i].userId == students[j]._id && studentData[i].admissionId){ | |
37 | + studentData[i].firstName = students[j].firstName; | |
38 | + studentData[i].lastName = students[j].lastName; | |
39 | + }else{ | |
40 | + | |
41 | + } | |
42 | + } | |
43 | + } | |
44 | + onData(null, { | |
45 | + data: { | |
46 | + user: user, | |
47 | + org: org, | |
48 | + studentData: studentData | |
49 | + }, | |
50 | + }); | |
51 | + } | |
52 | + | |
53 | + return () => { | |
54 | + _.each(handles, (handle) => handle.stop() ); | |
55 | + }; | |
56 | +}; | |
57 | + | |
58 | + | |
59 | +const reduxTick = (props, onData) => { | |
60 | + onData(null, { | |
61 | + data: {} | |
62 | + }); | |
63 | +}; | |
64 | + | |
65 | + | |
66 | +export const StudentDataController = composeAll( | |
67 | + composeWithTracker(meteorTick, Loading), | |
68 | + compose(reduxTick, Loading), | |
69 | +)(StudentView); | ... | ... |
imports/client/views/org/admin/users/students/student.css
imports/client/views/org/admin/users/students/view/StudentRow.js
... | ... | @@ -0,0 +1,66 @@ |
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, | |
7 | + FormControl,Glyphicon,Button } from 'react-bootstrap'; | |
8 | + | |
9 | + | |
10 | +export class StudentRow extends Component { | |
11 | + | |
12 | + constructor(props) { | |
13 | + super(props); | |
14 | + this.state = { | |
15 | + editOpen: false, | |
16 | + }; | |
17 | + this.onUpdate = this.onUpdate.bind(this); | |
18 | + this.toggleEditOpen = this.toggleEditOpen.bind(this); | |
19 | + this.deleteStudent = this.deleteStudent.bind(this); | |
20 | + }; | |
21 | + | |
22 | + onUpdate(key, value) { | |
23 | + this.setState({[key]: value}); | |
24 | + }; | |
25 | + toggleEditOpen(){ | |
26 | + this.setState({ | |
27 | + editOpen : !this.state.editOpen | |
28 | + }) | |
29 | + } | |
30 | + deleteStudent(){ | |
31 | + console.log("Delete"); | |
32 | + console.log(this.props.student._id); | |
33 | + } | |
34 | + render() { | |
35 | + const {student} = this.props; | |
36 | + if(student.firstName){ | |
37 | + return ( | |
38 | + <tr> | |
39 | + <td>{student.firstName}</td> | |
40 | + <td>{student.lastName}</td> | |
41 | + <td>{student.class}</td> | |
42 | + <td>{student.dob? moment(student.dob).format("LL") : <span></span>}</td> | |
43 | + <td><span className="label label-success">Active</span></td> | |
44 | + <td className="text-center"> | |
45 | + <ul className="icons-list"> | |
46 | + <li className={this.state.editOpen? "dropdown open": "dropdown" }> | |
47 | + <span className="dropdown-toggle" onClick={this.toggleEditOpen}> | |
48 | + <i className="icon-menu9"></i> | |
49 | + </span> | |
50 | + <ul className="dropdown-menu dropdown-menu-right"> | |
51 | + <li onClick={this.viewStudent}><Link to={`/student/${student._id}`}><span><i className="fa fa-binoculars"></i>View </span></Link></li> | |
52 | + <li onClick={this.editStudent}><span><i className="fa fa-pencil-square"></i> Edit </span></li> | |
53 | + <li onClick={this.deleteStudent}><span><i className="fa fa-exclamation-triangle"></i> Delete</span></li> | |
54 | + </ul> | |
55 | + </li> | |
56 | + </ul> | |
57 | + </td> | |
58 | + </tr> | |
59 | + ); | |
60 | + }else { | |
61 | + return null; | |
62 | + } | |
63 | + | |
64 | + }; | |
65 | + | |
66 | +}; | ... | ... |
imports/client/views/org/admin/users/students/view/StudentTable.js
... | ... | @@ -0,0 +1,85 @@ |
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, | |
8 | + FormControl,Glyphicon,Button, } from 'react-bootstrap'; | |
9 | +import {moment} from 'meteor/momentjs:moment' | |
10 | +import {StudentRow} from './StudentRow' | |
11 | +import {BootstrapTable, TableHeaderColumn}from 'react-bootstrap-table'; | |
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 | + cell = new Date(cell); | |
37 | + return `${('0' + cell.getDate()).slice(-2)}/${('0' + (cell.getMonth() + 1)).slice(-2)}/${cell.getFullYear()}`; | |
38 | + } | |
39 | +} | |
40 | +export class StudentTable extends Component { | |
41 | + | |
42 | + constructor(props) { | |
43 | + super(props); | |
44 | + this.state = { | |
45 | + show: false, | |
46 | + panleOpen: true, | |
47 | + }; | |
48 | + this.onUpdate = this.onUpdate.bind(this); | |
49 | + this.togglePanel = this.togglePanel.bind(this); | |
50 | + }; | |
51 | + onUpdate(key, value) { | |
52 | + this.setState({[key]: value}); | |
53 | + }; | |
54 | + togglePanel(){ | |
55 | + this.setState({panleOpen: !this.state.panleOpen}); | |
56 | + } | |
57 | + | |
58 | + render() { | |
59 | + studentData = this.props.studentData; | |
60 | + console.log("this.props.studentData"); | |
61 | + console.log(this.props.studentData); | |
62 | + return ( | |
63 | + <div className="panel panel-flat"> | |
64 | + <div className="panel-heading"> | |
65 | + <h5 className="panel-title">Student Details</h5> | |
66 | + <div className="heading-elements"> | |
67 | + <ul className="icons-list"> | |
68 | + <li onClick={this.togglePanel}><a data-action="collapse" className={this.state.panleOpen?"rotate-180":null}></a></li> | |
69 | + </ul> | |
70 | + </div> | |
71 | + </div> | |
72 | + <Panel collapsible expanded={this.state.panleOpen}> | |
73 | + <BootstrapTable data={ studentData } pagination={ true } options={ options } > | |
74 | + <TableHeaderColumn dataField='_id' isKey={ true } dataSort={ true } filter={ { type: 'TextFilter' } }>Admission Id</TableHeaderColumn> | |
75 | + <TableHeaderColumn dataField='firstName' dataSort={ true } filter={ { type: 'TextFilter' } }>First Name</TableHeaderColumn> | |
76 | + <TableHeaderColumn dataField='lastName' dataSort={ true } filter={ { type: 'TextFilter' } }>Last Name</TableHeaderColumn> | |
77 | + <TableHeaderColumn dataField='class' dataSort={ true } filter={ { type: 'TextFilter' } }>Class</TableHeaderColumn> | |
78 | + <TableHeaderColumn dataField='dob' dataFormat={ dateFormatter } >DOB</TableHeaderColumn> | |
79 | + </BootstrapTable> | |
80 | + </Panel> | |
81 | + </div> | |
82 | + ); | |
83 | + }; | |
84 | + | |
85 | +}; | ... | ... |