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
1 | /* eslint-disable max-len */ | 1 | /* eslint-disable max-len */ |
2 | 2 | ||
3 | import React from 'react'; | 3 | import React from 'react'; |
4 | import { render } from 'react-dom'; | 4 | import { render } from 'react-dom'; |
5 | import { Router, Route, | 5 | import { Router, Route, |
6 | IndexRoute, browserHistory } from 'react-router'; | 6 | IndexRoute, browserHistory } from 'react-router'; |
7 | import { Meteor } from 'meteor/meteor'; | 7 | import { Meteor } from 'meteor/meteor'; |
8 | import { Users } from '/imports/collections/users/index'; | 8 | import { Users } from '/imports/collections/users/index'; |
9 | 9 | ||
10 | /** | 10 | /** |
11 | * General Components | 11 | * General Components |
12 | */ | 12 | */ |
13 | import NotFound from '/imports/client/views/org/NotFound'; | 13 | import NotFound from '/imports/client/views/org/NotFound'; |
14 | 14 | ||
15 | /** | 15 | /** |
16 | * Org Components | 16 | * Org Components |
17 | */ | 17 | */ |
18 | import { EnterModule } from '/imports/client/views/org/enter/module/index'; | 18 | import { EnterModule } from '/imports/client/views/org/enter/module/index'; |
19 | 19 | ||
20 | 20 | ||
21 | import { AdminAppModule } from '/imports/client/views/org/admin/app/module/Index'; | 21 | import { AdminAppModule } from '/imports/client/views/org/admin/app/module/Index'; |
22 | import { DashboardController } from '/imports/client/views/org/admin/dashboard/index'; | 22 | import { DashboardController } from '/imports/client/views/org/admin/dashboard/index'; |
23 | import { Orgs } from '/imports/collections/orgs/index'; | 23 | import { Orgs } from '/imports/collections/orgs/index'; |
24 | import { importCsvController } from '/imports/client/views/org/importCsv/index' | 24 | import { importCsvController } from '/imports/client/views/org/importCsv/index' |
25 | 25 | ||
26 | /** | 26 | /** |
27 | Admin | 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 | import { AdminSettingsController } from '/imports/client/views/org/admin/settings/index' | 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 | //Admin mail | 37 | //Admin mail |
34 | import { AdminMailModule } from '/imports/client/views/org/admin/mailbox/module/index' | 38 | import { AdminMailModule } from '/imports/client/views/org/admin/mailbox/module/index' |
35 | import { AdminInboxController } from '/imports/client/views/org/admin/mailbox/inbox/index' | 39 | import { AdminInboxController } from '/imports/client/views/org/admin/mailbox/inbox/index' |
36 | import { AdminComposeMailController } from '/imports/client/views/org/admin/mailbox/compose/index' | 40 | import { AdminComposeMailController } from '/imports/client/views/org/admin/mailbox/compose/index' |
37 | import { AdminSentMailController } from '/imports/client/views/org/admin/mailbox/sent/index' | 41 | import { AdminSentMailController } from '/imports/client/views/org/admin/mailbox/sent/index' |
38 | import { AdminImportantMailController } from '/imports/client/views/org/admin/mailbox/important/index' | 42 | import { AdminImportantMailController } from '/imports/client/views/org/admin/mailbox/important/index' |
39 | 43 | ||
40 | 44 | ||
41 | //students | 45 | //students |
42 | 46 | ||
43 | //teachers | 47 | //teachers |
44 | 48 | ||
45 | //parents | 49 | //parents |
46 | 50 | ||
47 | /** | 51 | /** |
48 | * Invalid Org Components | 52 | * Invalid Org Components |
49 | */ | 53 | */ |
50 | 54 | ||
51 | /** | 55 | /** |
52 | There are three types of routes | 56 | There are three types of routes |
53 | 1)getOrgRoutes: all the routes that should be present for a registered org | 57 | 1)getOrgRoutes: all the routes that should be present for a registered org |
54 | 2)getInvalidOrgRoute: all the routes where someone tries to enter a subdomain which hasn't been registered yet (404 mostly :D) | 58 | 2)getInvalidOrgRoute: all the routes where someone tries to enter a subdomain which hasn't been registered yet (404 mostly :D) |
55 | 3)getNonOrgRoutes: all routes linked to normal site, ie signing up a new org. CHeking out demo and everything internal | 59 | 3)getNonOrgRoutes: all routes linked to normal site, ie signing up a new org. CHeking out demo and everything internal |
56 | **/ | 60 | **/ |
57 | const getOrgAdminRoutes = () => ( | 61 | const getOrgAdminRoutes = () => ( |
58 | <Router history={ browserHistory }> | 62 | <Router history={ browserHistory }> |
59 | <Route path="/" component={ AdminAppModule } > | 63 | <Route path="/" component = { AdminAppModule } > |
60 | <IndexRoute name="index" component={ DashboardController } /> | 64 | <IndexRoute name="index" component = { DashboardController } /> |
61 | <Route name="import" path="/import" component={ importCsvController } /> | 65 | <Route name="import" path="/import" component = { importCsvController } /> |
62 | <Route name="student" path="/students" component={ StudentDataController } /> | 66 | <Route name="settings" path="/settings" component = { AdminSettingsController } /> |
63 | <Route name="staff" path="/staff" component={ staffViewController } /> | 67 | <Route name="users" path = "/users" component = {AdminUsersModule}> |
64 | <Route name="parent" path="/parents" component={ ParentViewController } /> | 68 | <IndexRoute component = {AdminUsersListController} /> |
65 | <Route name="settings" path="/settings" component={ AdminSettingsController } /> | 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 | <Route name="mail" path = "/mail" component = {AdminMailModule}> | 73 | <Route name="mail" path = "/mail" component = {AdminMailModule}> |
67 | <IndexRoute component = {AdminInboxController} /> | 74 | <IndexRoute component = {AdminInboxController} /> |
68 | <Route name="mail-compose" path = "/mail/compose" component = {AdminComposeMailController} /> | 75 | <Route name="mail-compose" path = "/mail/compose" component = {AdminComposeMailController} /> |
69 | <Route name="mail-sent" path = "/mail/sent" component = {AdminSentMailController} /> | 76 | <Route name="mail-sent" path = "/mail/sent" component = {AdminSentMailController} /> |
70 | <Route name="mail-important" path = "/mail/important" component = {AdminImportantMailController} /> | 77 | <Route name="mail-important" path = "/mail/important" component = {AdminImportantMailController} /> |
71 | </Route> | 78 | </Route> |
72 | <Route path="*" component={ NotFound } /> | 79 | <Route path="*" component = { NotFound } /> |
73 | </Route> | 80 | </Route> |
74 | </Router> | 81 | </Router> |
75 | ) | 82 | ) |
76 | const getOrgNonLoggedInRoutes = () => ( | 83 | const getOrgNonLoggedInRoutes = () => ( |
77 | <Router history={ browserHistory }> | 84 | <Router history={ browserHistory }> |
78 | <Route path="/" component={ EnterModule }> | 85 | <Route path="/" component={ EnterModule }> |
79 | <Route path="*" component={ NotFound } /> | 86 | <Route path="*" component={ NotFound } /> |
80 | </Route> | 87 | </Route> |
81 | </Router> | 88 | </Router> |
82 | ) | 89 | ) |
83 | 90 | ||
84 | const getInvalidOrgRoute = () => ( | 91 | const getInvalidOrgRoute = () => ( |
85 | <Router history={ browserHistory }> | 92 | <Router history={ browserHistory }> |
86 | <Route path="/" component={ App }> | 93 | <Route path="/" component={ App }> |
87 | <IndexRoute name="index" component={ NotFound } /> | 94 | <IndexRoute name="index" component={ NotFound } /> |
88 | <Route path="*" component={ NotFound } /> | 95 | <Route path="*" component={ NotFound } /> |
89 | </Route> | 96 | </Route> |
90 | </Router> | 97 | </Router> |
91 | ) | 98 | ) |
92 | 99 | ||
93 | 100 | ||
94 | /** | 101 | /** |
95 | * NonOrg Components | 102 | * NonOrg Components |
96 | */ | 103 | */ |
97 | import Signup from '/imports/client/views/nonOrg/enter/SignupView'; | 104 | import Signup from '/imports/client/views/nonOrg/enter/SignupView'; |
98 | import { NonOrgApp } from '/imports/client/layouts/NonOrgApp'; | 105 | import { NonOrgApp } from '/imports/client/layouts/NonOrgApp'; |
99 | import {NonOrgAppModule} from '/imports/client/views/nonOrg/app/module/Index'; | 106 | import {NonOrgAppModule} from '/imports/client/views/nonOrg/app/module/Index'; |
100 | 107 | ||
101 | const getNonOrgRoutes = () => ( | 108 | const getNonOrgRoutes = () => ( |
102 | <Router history={ browserHistory }> | 109 | <Router history={ browserHistory }> |
103 | <Route path="/" component={ NonOrgApp }> | 110 | <Route path="/" component={ NonOrgApp }> |
104 | <IndexRoute name="index" component={ NonOrgAppModule } /> | 111 | <IndexRoute name="index" component={ NonOrgAppModule } /> |
105 | <Route name="signup" path="/signup" component={ Signup } /> | 112 | <Route name="signup" path="/signup" component={ Signup } /> |
106 | <Route path="*" component={ NotFound } /> | 113 | <Route path="*" component={ NotFound } /> |
107 | </Route> | 114 | </Route> |
108 | </Router> | 115 | </Router> |
109 | ) | 116 | ) |
110 | 117 | ||
111 | //Authenticate function to give access to users only | 118 | //Authenticate function to give access to users only |
112 | const authenticate = (nextState, replace) => { | 119 | const authenticate = (nextState, replace) => { |
113 | if (!Meteor.loggingIn() && !Meteor.userId()) { | 120 | if (!Meteor.loggingIn() && !Meteor.userId()) { |
114 | replace({ | 121 | replace({ |
115 | pathname: '/login', | 122 | pathname: '/login', |
116 | state: { nextPathname: nextState.location.pathname }, | 123 | state: { nextPathname: nextState.location.pathname }, |
117 | }); | 124 | }); |
118 | } | 125 | } |
119 | }; | 126 | }; |
120 | 127 | ||
121 | 128 | ||
122 | /** | 129 | /** |
123 | 130 | ||
124 | **/ | 131 | **/ |
125 | const detectOrg = () => { | 132 | const detectOrg = () => { |
126 | orgSlug = ""; | 133 | orgSlug = ""; |
127 | //www.app.ydapp.in | 134 | //www.app.ydapp.in |
128 | // | 135 | // |
129 | var hostnameArray = document.location.hostname.split( "." ); | 136 | var hostnameArray = document.location.hostname.split( "." ); |
130 | //['www','app', 'ydapp','in']; | 137 | //['www','app', 'ydapp','in']; |
131 | if(hostnameArray[0] !== "www"){ | 138 | if(hostnameArray[0] !== "www"){ |
132 | if((hostnameArray[1]==='localhost'||hostnameArray[1]==='ydapp')){ | 139 | if((hostnameArray[1]==='localhost'||hostnameArray[1]==='ydapp')){ |
133 | orgSlug = hostnameArray[0]; | 140 | orgSlug = hostnameArray[0]; |
134 | } | 141 | } |
135 | }else{ | 142 | }else{ |
136 | if((hostnameArray[2]==='localhost'||hostnameArray[2]==='ydapp')){ | 143 | if((hostnameArray[2]==='localhost'||hostnameArray[2]==='ydapp')){ |
137 | orgSlug = hostnameArray[1]; | 144 | orgSlug = hostnameArray[1]; |
138 | } | 145 | } |
139 | } | 146 | } |
140 | 147 | ||
141 | if(orgSlug!==""){ | 148 | if(orgSlug!==""){ |
142 | console.log(orgSlug); | 149 | console.log(orgSlug); |
143 | Meteor.call('checkExistingOrg', {slug:orgSlug}, function(err, res) { | 150 | Meteor.call('checkExistingOrg', {slug:orgSlug}, function(err, res) { |
144 | console.log(err); | 151 | console.log(err); |
145 | console.log(res); | 152 | console.log(res); |
146 | 153 | ||
147 | if(res){ | 154 | if(res){ |
148 | Session.set('orgId', res._id); | 155 | Session.set('orgId', res._id); |
149 | Session.set('orgSlug', orgSlug); | 156 | Session.set('orgSlug', orgSlug); |
150 | if(Meteor.loggingIn() || Meteor.userId()){ | 157 | if(Meteor.loggingIn() || Meteor.userId()){ |
151 | userRole = _.find(res.users, {userId: Meteor.user()._id}).role; | 158 | userRole = _.find(res.users, {userId: Meteor.user()._id}).role; |
152 | Session.set('userRole', userRole); | 159 | Session.set('userRole', userRole); |
153 | if(userRole=='ADMIN'){ | 160 | if(userRole=='ADMIN'){ |
154 | render(getOrgAdminRoutes(),document.getElementById('app')); | 161 | render(getOrgAdminRoutes(),document.getElementById('app')); |
155 | }else{ | 162 | }else{ |
156 | 163 | ||
157 | } | 164 | } |
158 | }else{ | 165 | }else{ |
159 | render(getOrgNonLoggedInRoutes(),document.getElementById('app')); | 166 | render(getOrgNonLoggedInRoutes(),document.getElementById('app')); |
160 | } | 167 | } |
161 | }else{ | 168 | }else{ |
162 | render(getInvalidOrgRoute(),document.getElementById('app')); | 169 | render(getInvalidOrgRoute(),document.getElementById('app')); |
163 | } | 170 | } |
164 | }); | 171 | }); |
165 | }else{ | 172 | }else{ |
166 | render(getNonOrgRoutes(),document.getElementById('app')); | 173 | render(getNonOrgRoutes(),document.getElementById('app')); |
167 | } | 174 | } |
168 | } | 175 | } |
169 | const checkSlug = (nextState, replace) => { | 176 | const checkSlug = (nextState, replace) => { |
170 | orgId = Session.get('orgId'); | 177 | orgId = Session.get('orgId'); |
171 | } | 178 | } |
172 | 179 | ||
173 | 180 | ||
174 | Meteor.startup(() => { | 181 | Meteor.startup(() => { |
imports/client/views/org/admin/settings/Header.js
1 | import _ from 'lodash'; | File was deleted | |
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 | }; | ||
86 | 1 | import _ from 'lodash'; |
imports/client/views/org/admin/settings/header.css
1 | .img-circle | File was deleted | |
2 | { | ||
3 | width: 70px; | ||
4 | height: 70px; | ||
5 | } | ||
6 | |||
7 | .panel-body | ||
8 | { | ||
9 | overflow-y:hidden; | ||
10 | } | ||
11 | 1 | .img-circle |
imports/client/views/org/admin/settings/parents/index.js
1 | import _ from 'lodash'; | File was deleted | |
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); | ||
73 | 1 | import _ from 'lodash'; |
imports/client/views/org/admin/settings/parents/parentsview.js
1 | import _ from 'lodash'; | File was deleted | |
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 | }; | ||
49 | 1 | import _ from 'lodash'; |
imports/client/views/org/admin/settings/parents/view/ParentRow.js
1 | import _ from 'lodash'; | File was deleted | |
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 | }; | ||
55 | 1 | import _ from 'lodash'; |
imports/client/views/org/admin/settings/parents/view/ParentTable.js
1 | import _ from 'lodash'; | File was deleted | |
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 | }; | ||
71 | 1 | import _ from 'lodash'; |
imports/client/views/org/admin/settings/staff/StaffView.js
1 | import _ from 'lodash'; | File was deleted | |
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 | }; | ||
45 | 1 | import _ from 'lodash'; |
imports/client/views/org/admin/settings/staff/UploadCsvStaff.js
1 | // import {UploadCsv } from '/imports/collections/students/UploadCsv' | File was deleted | |
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 | }; | ||
104 | 1 | // import {UploadCsv } from '/imports/collections/students/UploadCsv' |
imports/client/views/org/admin/settings/staff/add/AddStaffFormContainer.js
1 | import React, { Component } from 'react' | File was deleted | |
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 | } | ||
124 | 1 | import React, { Component } from 'react' |
imports/client/views/org/admin/settings/staff/add/StaffForm.js
1 | import React, { PropTypes } from 'react' | File was deleted | |
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 | ||
418 | 1 | import React, { PropTypes } from 'react' |
imports/client/views/org/admin/settings/staff/add/addStaff.js
1 | import _ from 'lodash'; | File was deleted | |
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 | }; | ||
67 | 1 | import _ from 'lodash'; |
imports/client/views/org/admin/settings/staff/index.js
1 | // import { InviteSignupController } from '/imports/client/views/invite/signup/index' | File was deleted | |
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); | ||
71 | 1 | // import { InviteSignupController } from '/imports/client/views/invite/signup/index' |
imports/client/views/org/admin/settings/staff/view/StaffRow.js
1 | import _ from 'lodash'; | File was deleted | |
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 | }; | ||
57 | 1 | import _ from 'lodash'; |
imports/client/views/org/admin/settings/staff/view/StaffTable.js
1 | import _ from 'lodash'; | File was deleted | |
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 | }; | ||
86 | 1 | import _ from 'lodash'; |
imports/client/views/org/admin/settings/students/StudentDataView.js
1 | import _ from 'lodash'; | File was deleted | |
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 | }; | ||
275 | 1 | import _ from 'lodash'; |
imports/client/views/org/admin/settings/students/StudentDataView0.js
1 | import _ from 'lodash'; | File was deleted | |
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 | }; | ||
89 | 1 | import _ from 'lodash'; |
imports/client/views/org/admin/settings/students/StudentView.js
1 | import _ from 'lodash'; | File was deleted | |
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 | }; | ||
67 | 1 | import _ from 'lodash'; |
imports/client/views/org/admin/settings/students/UploadCsv.js
1 | // import {UploadCsv } from '/imports/collections/students/UploadCsv' | File was deleted | |
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 | }; | ||
104 | 1 | // import {UploadCsv } from '/imports/collections/students/UploadCsv' |
imports/client/views/org/admin/settings/students/add/AddStudentFormContainer.js
1 | import React, { Component } from 'react' | File was deleted | |
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 | } | ||
131 | 1 | import React, { Component } from 'react' |
imports/client/views/org/admin/settings/students/add/StudentForm.js
1 | import React, { PropTypes } from 'react' | File was deleted | |
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 | ||
475 | 1 | import React, { PropTypes } from 'react' |
imports/client/views/org/admin/settings/students/add/addStudent.js
1 | import _ from 'lodash'; | File was deleted | |
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 | }; | ||
67 | 1 | import _ from 'lodash'; |
imports/client/views/org/admin/settings/students/add/addStudentForm.js
1 | import _ from 'lodash'; | File was deleted | |
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 | }; | ||
501 | 1 | import _ from 'lodash'; |
imports/client/views/org/admin/settings/students/index.js
1 | // import { StudentDataController } from '/imports/client/views/org/admin/students/index' | File was deleted | |
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); | ||
70 | 1 | // import { StudentDataController } from '/imports/client/views/org/admin/students/index' |
imports/client/views/org/admin/settings/students/student.css
1 | .btn-toolbar { | File was deleted | |
2 | display: inline-block; | ||
3 | font-size: 0; | ||
4 | margin-right: 12px; | ||
5 | } | ||
6 | 1 | .btn-toolbar { |
imports/client/views/org/admin/settings/students/view/StudentRow.js
1 | import _ from 'lodash'; | File was deleted | |
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 | }; | ||
67 | 1 | import _ from 'lodash'; |
imports/client/views/org/admin/settings/students/view/StudentTable.js
1 | import _ from 'lodash'; | File was deleted | |
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 | }; | ||
86 | 1 | import _ from 'lodash'; |
imports/client/views/org/admin/users/list/AdminUsersList.js
File was created | 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 | }; | ||
64 |
imports/client/views/org/admin/users/list/index.js
File was created | 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); | ||
51 |
imports/client/views/org/admin/users/module/AdminUserViewLayout.js
File was created | 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 | }; | ||
51 |
imports/client/views/org/admin/users/module/Header.js
File was created | 1 | import _ from 'lodash'; | |
2 | import { Meteor } from 'meteor/meteor'; | ||
3 | |||
4 | import React, { Component } from 'react'; | ||
5 | import { Link,browserHistory } from 'react-router'; | ||
6 | import { FormGroup, | ||
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 | }; | ||
86 |
imports/client/views/org/admin/users/module/header.css
File was created | 1 | .img-circle | |
2 | { | ||
3 | width: 70px; | ||
4 | height: 70px; | ||
5 | } | ||
6 | |||
7 | .panel-body | ||
8 | { | ||
9 | overflow-y:hidden; | ||
10 | } | ||
11 |
imports/client/views/org/admin/users/module/index.js
File was created | 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); | ||
51 |
imports/client/views/org/admin/users/parents/index.js
File was created | 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); | ||
73 |
imports/client/views/org/admin/users/parents/parentsview.js
File was created | 1 | import _ from 'lodash'; | |
2 | import { Meteor } from 'meteor/meteor'; | ||
3 | |||
4 | import React, { Component } from 'react'; | ||
5 | import { Link,browserHistory } from 'react-router'; | ||
6 | import { FormGroup, | ||
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 | }; | ||
44 |
imports/client/views/org/admin/users/parents/view/ParentRow.js
File was created | 1 | import _ from 'lodash'; | |
2 | import { Meteor } from 'meteor/meteor'; | ||
3 | |||
4 | import React, { Component } from 'react'; | ||
5 | import { Link,browserHistory } from 'react-router'; | ||
6 | import { FormGroup, | ||
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 | }; | ||
55 |
imports/client/views/org/admin/users/parents/view/ParentTable.js
File was created | 1 | import _ from 'lodash'; | |
2 | import { Meteor } from 'meteor/meteor'; | ||
3 | |||
4 | import React, { Component } from 'react'; | ||
5 | import { Link,browserHistory } from 'react-router'; | ||
6 | import { FormGroup,Panel,Table, | ||
7 | ButtonToolbar,Modal, | ||
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 | }; | ||
71 |
imports/client/views/org/admin/users/staff/StaffView.js
File was created | 1 | import _ from 'lodash'; | |
2 | import { Meteor } from 'meteor/meteor'; | ||
3 | |||
4 | import React, { Component } from 'react'; | ||
5 | import { Link,browserHistory } from 'react-router'; | ||
6 | import { FormGroup, | ||
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 | }; | ||
40 |
imports/client/views/org/admin/users/staff/UploadCsvStaff.js
File was created | 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 | }; | ||
104 |
imports/client/views/org/admin/users/staff/add/AddStaffFormContainer.js
File was created | 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 | } | ||
124 |
imports/client/views/org/admin/users/staff/add/StaffForm.js
File was created | 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 | ||
418 |
imports/client/views/org/admin/users/staff/add/addStaff.js
File was created | 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 | }; | ||
67 |
imports/client/views/org/admin/users/staff/index.js
File was created | 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); | ||
71 |
imports/client/views/org/admin/users/staff/view/StaffRow.js
File was created | 1 | import _ from 'lodash'; | |
2 | import { Meteor } from 'meteor/meteor'; | ||
3 | |||
4 | import React, { Component } from 'react'; | ||
5 | import { Link,browserHistory } from 'react-router'; | ||
6 | import { FormGroup, | ||
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 | }; | ||
57 |
imports/client/views/org/admin/users/staff/view/StaffTable.js
File was created | 1 | import _ from 'lodash'; | |
2 | import { Meteor } from 'meteor/meteor'; | ||
3 | |||
4 | import React, { Component } from 'react'; | ||
5 | import { Link,browserHistory } from 'react-router'; | ||
6 | import { FormGroup,Panel,Table, | ||
7 | ButtonToolbar,Modal, | ||
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 | }; | ||
86 |
imports/client/views/org/admin/users/students/StudentDataView.js
File was created | 1 | import _ from 'lodash'; | |
2 | import { Meteor } from 'meteor/meteor'; | ||
3 | |||
4 | import React, { Component } from 'react'; | ||
5 | import { Link,browserHistory } from 'react-router'; | ||
6 | import { FormGroup,Panel,Table, | ||
7 | ButtonToolbar,Modal, | ||
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 | }; | ||
275 |
imports/client/views/org/admin/users/students/StudentDataView0.js
File was created | 1 | import _ from 'lodash'; | |
2 | import { Meteor } from 'meteor/meteor'; | ||
3 | |||
4 | import React, { Component } from 'react'; | ||
5 | import { Link,browserHistory } from 'react-router'; | ||
6 | import { FormGroup,Panel,Table, | ||
7 | ButtonToolbar,Modal, | ||
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 | }; | ||
89 |
imports/client/views/org/admin/users/students/StudentView.js
File was created | 1 | import _ from 'lodash'; | |
2 | import { Meteor } from 'meteor/meteor'; | ||
3 | |||
4 | import React, { Component } from 'react'; | ||
5 | import { Link,browserHistory } from 'react-router'; | ||
6 | import { 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 | }; | ||
65 |
imports/client/views/org/admin/users/students/UploadCsv.js
File was created | 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 | }; | ||
104 |
imports/client/views/org/admin/users/students/add/AddStudentFormContainer.js
File was created | 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 | } | ||
131 |
imports/client/views/org/admin/users/students/add/StudentForm.js
File was created | 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 | ||
475 |
imports/client/views/org/admin/users/students/add/addStudent.js
File was created | 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 | }; | ||
67 |
imports/client/views/org/admin/users/students/add/addStudentForm.js
File was created | 1 | import _ from 'lodash'; | |
2 | import { Meteor } from 'meteor/meteor'; | ||
3 | |||
4 | import React, { Component } from 'react'; | ||
5 | import { Link,browserHistory } from 'react-router'; | ||
6 | import { 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 | }; | ||
501 |
imports/client/views/org/admin/users/students/index.js
File was created | 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); | ||
70 |
imports/client/views/org/admin/users/students/student.css
File was created | 1 | .btn-toolbar { | |
2 | display: inline-block; | ||
3 | font-size: 0; | ||
4 | margin-right: 12px; | ||
5 | } | ||
6 |
imports/client/views/org/admin/users/students/view/StudentRow.js
File was created | 1 | import _ from 'lodash'; | |
2 | import { Meteor } from 'meteor/meteor'; | ||
3 | |||
4 | import React, { Component } from 'react'; | ||
5 | import { Link,browserHistory } from 'react-router'; | ||
6 | import { FormGroup, | ||
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 | }; | ||
67 |
imports/client/views/org/admin/users/students/view/StudentTable.js
File was created | 1 | import _ from 'lodash'; | |
2 | import { Meteor } from 'meteor/meteor'; | ||
3 | |||
4 | import React, { Component } from 'react'; | ||
5 | import { Link,browserHistory } from 'react-router'; | ||
6 | import { FormGroup,Panel,Table, | ||
7 | ButtonToolbar,Modal, | ||
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 | }; | ||
86 |