Sunny Negi / Meteor-projects

Browse Code »

Commit af71e7fcd51532e7038343c4b4be94e5070573c8

Authored by Deepak 2017-03-20 04:19:24 -0400

1 parent 1c4a8cc5d4

Exists in master

added search functionality

Showing 3 changed files with 51 additions and 61 deletions Show diff stats

imports/client/views/org/admin/students/StudentTable.js

Diff comments View file @af71e7f

1	import _ from 'lodash';	1	import _ from 'lodash';
2	import { Meteor } from 'meteor/meteor';	2	import { Meteor } from 'meteor/meteor';
3		3
4	import React, { Component } from 'react';	4	import React, { Component } from 'react';
5	import { Link,browserHistory } from 'react-router';	5	import { Link,browserHistory } from 'react-router';
6	import { FormGroup,Panel,Table,	6	import { FormGroup,Panel,Table,
7	ButtonToolbar,Modal,	7	ButtonToolbar,Modal,
8	FormControl,Glyphicon,Button } from 'react-bootstrap';	8	FormControl,Glyphicon,Button } from 'react-bootstrap';
9	import { AddStudentForm } from './addStudentForm';	9	import { AddStudentForm } from './addStudentForm';
10		10
11	export class StudentTable extends Component {	11	export class StudentTable extends Component {
12		12
13	constructor(props) {	13	constructor(props) {
14	super(props);	14	super(props);
15	this.state = {	15	this.state = {
16	show: false	16	show: false
17	};	17	};
18	this.onUpdate = this.onUpdate.bind(this);	18	this.onUpdate = this.onUpdate.bind(this);
19	};	19	};
20	onUpdate(key, value) {	20	onUpdate(key, value) {
21	this.setState({[key]: value});	21	this.setState({[key]: value});
22	};	22	};
23		23
24	render() {	24	render() {
25	return (	25	return (
26	<div className="panel panel-flat">	26	<div className="panel panel-flat">
27	<div className="panel-heading">	27	<div className="panel-heading">
28	<h5 className="panel-title">Student Details</h5>	28	<h5 className="panel-title">Student Details</h5>
29	<div className="heading-elements">	29	<div className="heading-elements">
30	<ul className="icons-list">	30	<ul className="icons-list">
31	<li><a data-action="collapse"></a></li>	31	<li><a data-action="collapse"></a></li>
32	<li><a data-action="reload"></a></li>	32	<li><a data-action="reload"></a></li>
33	</ul>	33	</ul>
34	</div>	34	</div>
35	</div>	35	</div>
36
37
38	<Table striped bordered condensed hover>	36	<Table striped bordered condensed hover>
39	<thead>	37	<thead>
40	<tr>	38	<tr>
41	<th>First Name</th>	39	<th>First Name</th>
42	<th>Last Name</th>	40	<th>Last Name</th>
43	<th>className</th>	41	<th>className</th>
44	<th>DOB</th>	42	<th>DOB</th>
45	<th>Status</th>	43	<th>Status</th>
46	<th className="text-center">Actions</th>	44	<th className="text-center">Actions</th>
47	</tr>	45	</tr>
48	</thead>	46	</thead>
49	<tbody>	47	<tbody>
50	{	48	{
51	this.props.data.students.map(function(student, i)	49	this.props.students.map(function(student, i)
52	{	50	{
53	return(	51	return(
54	<tr key={i}>	52	<tr key={i}>
55	<td>{student.firstName}</td>	53	<td>{student.firstName}</td>
56	<td>{student.lastName}</td>	54	<td>{student.lastName}</td>
57	<td>VII</td>	55	<td>{student.class}</td>
58	<td>22 Jun 1972</td>	56	<td>{}</td>
59	<td><span className="label label-success">Active</span></td>	57	<td><span className="label label-success">Active</span></td>
60	<td className="text-center">	58	<td className="text-center">
61	<ul className="icons-list">	59	<ul className="icons-list">
62	<li className="dropdown">	60	<li className="dropdown">
63	<a href="#" className="dropdown-toggle" data-toggle="dropdown">	61	<a href="#" className="dropdown-toggle" data-toggle="dropdown">
64	<i className="icon-menu9"></i>	62	<i className="icon-menu9"></i>
65	</a>	63	</a>
66		64	<ul className="dropdown-menu dropdown-menu-right">
67	<ul className="dropdown-menu dropdown-menu-right">	65	<li><a href="#"><i className="icon-file-pdf"></i> Export to .pdf</a></li>
68	<li><a href="#"><i className="icon-file-pdf"></i> Export to .pdf</a></li>	66	<li><a href="#"><i className="icon-file-excel"></i> Export to .csv</a></li>
69	<li><a href="#"><i className="icon-file-excel"></i> Export to .csv</a></li>	67	<li><a href="#"><i className="icon-file-word"></i> Export to .doc</a></li>
70	<li><a href="#"><i className="icon-file-word"></i> Export to .doc</a></li>	68	</ul>
71	</ul>	69	</li>
72	</li>	70	</ul>
73	</ul>	71	</td>
74	</td>	72	</tr>
75	</tr>	73	)
76	)	74	})
77	})	75	}
78	}
79	<tr>
80	<td>Jackelyn</td>
81	<td>Weible</td>
82	<td><a href="#">XI</a></td>
83	<td>3 Oct 1981</td>
84	<td><span className="label label-default">Inactive</span></td>
85	<td className="text-center">
86	<ul className="icons-list">
87	<li className="dropdown">
88	<a href="#" className="dropdown-toggle" data-toggle="dropdown">
89	<i className="icon-menu9"></i>
90	</a>
91
92	<ul className="dropdown-menu dropdown-menu-right">
93	<li><a href="#"><i className="icon-file-pdf"></i> Export to .pdf</a></li>
94	<li><a href="#"><i className="icon-file-excel"></i> Export to .csv</a></li>
95	<li><a href="#"><i className="icon-file-word"></i> Export to .doc</a></li>
96	</ul>
97	</li>
98	</ul>
99	</td>
100	</tr>
101	</tbody>	76	</tbody>
102	</Table>	77	</Table>
103	</div>	78	</div>
104	);	79	);
105	};	80	};
106		81
107	};	82	};
108		83

imports/client/views/org/admin/students/StudentView.js

Diff comments View file @af71e7f

 import _                                  from 'lodash';
 import { Meteor }                         from 'meteor/meteor';
 import React, { Component }               from 'react';
 import { Link,browserHistory }            from 'react-router';
 import { FormGroup,Panel,Table,
   ButtonToolbar,Modal,
   FormControl,Glyphicon,Button }          from 'react-bootstrap';
 import { AddStudent }                     from './addStudent';
 import { StudentTable }                   from './StudentTable';
 import { Header }                         from './Header';
 import { FabMenuView }                    from './FabMenu';
 import { UploadCsv }                      from './UploadCsv';
 export class StudentView extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      show: false
+      show: false,
+      firstNameSearch: "",
+      lastNameSearch: "",
     };
     this.showModal = this.showModal.bind(this);
     this.hideModal = this.hideModal.bind(this);
     this.onUpdate = this.onUpdate.bind(this);
   };
     showModal() {
       this.setState({show: true});
     }
     hideModal() {
       this.setState({show: false});
     }
   onUpdate(key, value) {
     this.setState({[key]: value});
   };
   render() {
+    firstNameSearch = this.state.firstNameSearch;
+    var students =_.filter(this.props.data.students,function(item){
+      console.log(item);
+      return _.includes(item.firstName.toLowerCase(),firstNameSearch.toLowerCase());
+    });
+    console.log(students);
     return (
       <div className="content has-detached-left">
 					<div className="container-detached">
 						<div className="content-detached">
             <Header/>
             <StudentTable
             data = {this.props.data}
+            students = {students}
             />
           <AddStudent/>
           <UploadCsv />
 				</div>
 			</div>
 			<div className="sidebar-detached affix-top">
 				<div className="sidebar sidebar-default">
 					<div className="sidebar-content">
 						<div className="sidebar-category">
 							<div className="category-title">
 								<span>Advanced Search</span>
 								<ul className="icons-list">
 									<li><a href="#" data-action="collapse"></a></li>
 								</ul>
 							</div>
 							<div className="category-content">
 								<form action="#">
 									<div className="has-feedback has-feedback-left">
-										<input type="search" className="form-control" placeholder="First Name" />
+										<input type="search" className="form-control"
+                    value={this.state.firstNameSearch}
+                    onChange={e=>this.onUpdate('firstNameSearch',e.target.value)}
+                    placeholder="First Name"
+                    />
 										<div className="form-control-feedback">
 											<i className="icon-search4 text-size-base text-muted"></i>
 										</div>
 									</div>
 								</form>
 							</div>
 							<div className="category-content">
 								<form action="#">
 									<div className="has-feedback has-feedback-left">
-										<input type="search" className="form-control" placeholder="Last Name" />
+										<input type="search" className="form-control"
+                    value={this.state.lastNameSearch}
+                    onChange={e=>this.onUpdate('lastNameSearch',e.target.value)}
+                    placeholder="Last Name" />
 										<div className="form-control-feedback">
 											<i className="icon-search4 text-size-base text-muted"></i>
 										</div>
 									</div>
 								</form>
 							</div>
 						</div>
 					</div>
 				</div>
 			</div>
 </div>
     );
   };
 };

imports/client/views/org/admin/students/index.js

Diff comments View file @af71e7f

 // import { StudentDataController }            from '/imports/client/views/org/admin/students/index'
 import _                                  from 'lodash';
 import {
          composeWithTracker,
          compose,
          composeAll
        }                                  from 'react-komposer';
 import { Loading }                        from '/imports/client/components/Loading';
 import { Orgs }                           from '/imports/collections/orgs/index';
 import { Users }                          from '/imports/collections/users/index';
 import { StudentView }                    from './StudentView';
 import { Students }                       from '/imports/collections/students/methods'
 const meteorTick = (props, onData) => {
   const handles = [
     Meteor.subscribe('users.current'),
     Meteor.subscribe('orgs.current'),
     Meteor.subscribe('users.forMyOrg')
   ];
   if(_.every(handles, (handle) => (handle.ready()) )) {
     const user = Users.current();
     const org = Orgs.current();
     const students = Users.find({"role":"STUDENT"}).fetch();
-    console.log(students);
     onData(null, {
       data: {
         user: user,
         org: org,
         students:students
       },
     });
   }
   return () => {
     _.each(handles, (handle) => handle.stop() );
   };
 };
 const reduxTick = (props, onData) => {
   onData(null, {
     data: {}
   });
 };
 export const StudentDataController = composeAll(
   composeWithTracker(meteorTick, Loading),
   compose(reduxTick, Loading),
 )(StudentView);