added search functionality

Deepak
1 parent 1c4a8cc5d4
Showing 3 changed files with 51 additions and 61 deletions Show diff stats
imports/client/views/org/admin/students/StudentTable.js
imports/client/views/org/admin/students/StudentView.js
imports/client/views/org/admin/students/index.js
@@ -28,13 +28,11 @@ export class StudentTable extends Component {
           <h5 className="panel-title">Student Details</h5>
           <div className="heading-elements">
             <ul className="icons-list">
-                      <li><a data-action="collapse"></a></li>
-                      <li><a data-action="reload"></a></li>
-                    </ul>
-                  </div>
+              <li><a data-action="collapse"></a></li>
+              <li><a data-action="reload"></a></li>
+            </ul>
+          </div>
         </div>
-
-
         <Table striped bordered condensed hover>
           <thead>
             <tr>
@@ -47,57 +45,34 @@ export class StudentTable extends Component {
             </tr>
           </thead>
           <tbody>
-          {
-            this.props.data.students.map(function(student, i)
-              {
-                return(
-                  <tr key={i}>
-              <td>{student.firstName}</td>
-              <td>{student.lastName}</td>
-              <td>VII</td>
-              <td>22 Jun 1972</td>
-              <td><span className="label label-success">Active</span></td>
-              <td className="text-center">
-                <ul className="icons-list">
-                  <li className="dropdown">
-                    <a href="#" className="dropdown-toggle" data-toggle="dropdown">
-                      <i className="icon-menu9"></i>
-                    </a>
-
-                    <ul className="dropdown-menu dropdown-menu-right">
-                      <li><a href="#"><i className="icon-file-pdf"></i> Export to .pdf</a></li>
-                      <li><a href="#"><i className="icon-file-excel"></i> Export to .csv</a></li>
-                      <li><a href="#"><i className="icon-file-word"></i> Export to .doc</a></li>
-                    </ul>
-                  </li>
-                </ul>
-              </td>
-            </tr>
-          )
-        })
-      }
-            <tr>
-              <td>Jackelyn</td>
-              <td>Weible</td>
-              <td><a href="#">XI</a></td>
-              <td>3 Oct 1981</td>
-              <td><span className="label label-default">Inactive</span></td>
-              <td className="text-center">
-                <ul className="icons-list">
-                  <li className="dropdown">
-                    <a href="#" className="dropdown-toggle" data-toggle="dropdown">
-                      <i className="icon-menu9"></i>
-                    </a>
-
-                    <ul className="dropdown-menu dropdown-menu-right">
-                      <li><a href="#"><i className="icon-file-pdf"></i> Export to .pdf</a></li>
-                      <li><a href="#"><i className="icon-file-excel"></i> Export to .csv</a></li>
-                      <li><a href="#"><i className="icon-file-word"></i> Export to .doc</a></li>
-                    </ul>
-                  </li>
-                </ul>
-              </td>
-            </tr>
+            {
+              this.props.students.map(function(student, i)
+                {
+                  return(
+                    <tr key={i}>
+                      <td>{student.firstName}</td>
+                      <td>{student.lastName}</td>
+                      <td>{student.class}</td>
+                      <td>{}</td>
+                      <td><span className="label label-success">Active</span></td>
+                      <td className="text-center">
+                        <ul className="icons-list">
+                          <li className="dropdown">
+                            <a href="#" className="dropdown-toggle" data-toggle="dropdown">
+                              <i className="icon-menu9"></i>
+                            </a>
+                            <ul className="dropdown-menu dropdown-menu-right">
+                              <li><a href="#"><i className="icon-file-pdf"></i> Export to .pdf</a></li>
+                              <li><a href="#"><i className="icon-file-excel"></i> Export to .csv</a></li>
+                              <li><a href="#"><i className="icon-file-word"></i> Export to .doc</a></li>
+                            </ul>
+                          </li>
+                        </ul>
+                      </td>
+                  </tr>
+                )
+              })
+            }
           </tbody>
         </Table>
       </div>
@@ -18,7 +18,9 @@ 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);
@@ -37,6 +39,12 @@ export class StudentView extends Component {
   };
  
   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">
@@ -44,6 +52,7 @@ export class StudentView extends Component {
             <Header/>
             <StudentTable
             data = {this.props.data}
+            students = {students}
             />
           <AddStudent/>
           <UploadCsv />
@@ -64,7 +73,11 @@ export class StudentView extends Component {
 							<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>
@@ -74,7 +87,10 @@ export class StudentView extends Component {
 							<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>
@@ -25,7 +25,6 @@ const meteorTick = (props, onData) =&gt; {
     const user = Users.current();
     const org = Orgs.current();
     const students = Users.find({"role":"STUDENT"}).fetch();
-    console.log(students);
     onData(null, {
       data: {
         user: user,
...	...	@@ -28,13 +28,11 @@ export class StudentTable extends Component {
28	28	<h5 className="panel-title">Student Details</h5>
29	29	<div className="heading-elements">
30	30	<ul className="icons-list">
31		- <li><a data-action="collapse"></a></li>
32		- <li><a data-action="reload"></a></li>
33		- </ul>
34		- </div>
	31	+ <li><a data-action="collapse"></a></li>
	32	+ <li><a data-action="reload"></a></li>
	33	+ </ul>
	34	+ </div>
35	35	</div>
36		-
37		-
38	36	<Table striped bordered condensed hover>
39	37	<thead>
40	38	<tr>
...	...	@@ -47,57 +45,34 @@ export class StudentTable extends Component {
47	45	</tr>
48	46	</thead>
49	47	<tbody>
50		- {
51		- this.props.data.students.map(function(student, i)
52		- {
53		- return(
54		- <tr key={i}>
55		- <td>{student.firstName}</td>
56		- <td>{student.lastName}</td>
57		- <td>VII</td>
58		- <td>22 Jun 1972</td>
59		- <td><span className="label label-success">Active</span></td>
60		- <td className="text-center">
61		- <ul className="icons-list">
62		- <li className="dropdown">
63		- <a href="#" className="dropdown-toggle" data-toggle="dropdown">
64		- <i className="icon-menu9"></i>
65		- </a>
66		-
67		- <ul className="dropdown-menu dropdown-menu-right">
68		- <li><a href="#"><i className="icon-file-pdf"></i> Export to .pdf</a></li>
69		- <li><a href="#"><i className="icon-file-excel"></i> Export to .csv</a></li>
70		- <li><a href="#"><i className="icon-file-word"></i> Export to .doc</a></li>
71		- </ul>
72		- </li>
73		- </ul>
74		- </td>
75		- </tr>
76		- )
77		- })
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>
	48	+ {
	49	+ this.props.students.map(function(student, i)
	50	+ {
	51	+ return(
	52	+ <tr key={i}>
	53	+ <td>{student.firstName}</td>
	54	+ <td>{student.lastName}</td>
	55	+ <td>{student.class}</td>
	56	+ <td>{}</td>
	57	+ <td><span className="label label-success">Active</span></td>
	58	+ <td className="text-center">
	59	+ <ul className="icons-list">
	60	+ <li className="dropdown">
	61	+ <a href="#" className="dropdown-toggle" data-toggle="dropdown">
	62	+ <i className="icon-menu9"></i>
	63	+ </a>
	64	+ <ul className="dropdown-menu dropdown-menu-right">
	65	+ <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>
	67	+ <li><a href="#"><i className="icon-file-word"></i> Export to .doc</a></li>
	68	+ </ul>
	69	+ </li>
	70	+ </ul>
	71	+ </td>
	72	+ </tr>
	73	+ )
	74	+ })
	75	+ }
101	76	</tbody>
102	77	</Table>
103	78	</div>
...	...
...	...	@@ -18,7 +18,9 @@ export class StudentView extends Component {
18	18	constructor(props) {
19	19	super(props);
20	20	this.state = {
21		- show: false
	21	+ show: false,
	22	+ firstNameSearch: "",
	23	+ lastNameSearch: "",
22	24	};
23	25	this.showModal = this.showModal.bind(this);
24	26	this.hideModal = this.hideModal.bind(this);
...	...	@@ -37,6 +39,12 @@ export class StudentView extends Component {
37	39	};
38	40
39	41	render() {
	42	+ firstNameSearch = this.state.firstNameSearch;
	43	+ var students =_.filter(this.props.data.students,function(item){
	44	+ console.log(item);
	45	+ return _.includes(item.firstName.toLowerCase(),firstNameSearch.toLowerCase());
	46	+ });
	47	+ console.log(students);
40	48	return (
41	49	<div className="content has-detached-left">
42	50	<div className="container-detached">
...	...	@@ -44,6 +52,7 @@ export class StudentView extends Component {
44	52	<Header/>
45	53	<StudentTable
46	54	data = {this.props.data}
	55	+ students = {students}
47	56	/>
48	57	<AddStudent/>
49	58	<UploadCsv />
...	...	@@ -64,7 +73,11 @@ export class StudentView extends Component {
64	73	<div className="category-content">
65	74	<form action="#">
66	75	<div className="has-feedback has-feedback-left">
67		- <input type="search" className="form-control" placeholder="First Name" />
	76	+ <input type="search" className="form-control"
	77	+ value={this.state.firstNameSearch}
	78	+ onChange={e=>this.onUpdate('firstNameSearch',e.target.value)}
	79	+ placeholder="First Name"
	80	+ />
68	81	<div className="form-control-feedback">
69	82	<i className="icon-search4 text-size-base text-muted"></i>
70	83	</div>
...	...	@@ -74,7 +87,10 @@ export class StudentView extends Component {
74	87	<div className="category-content">
75	88	<form action="#">
76	89	<div className="has-feedback has-feedback-left">
77		- <input type="search" className="form-control" placeholder="Last Name" />
	90	+ <input type="search" className="form-control"
	91	+ value={this.state.lastNameSearch}
	92	+ onChange={e=>this.onUpdate('lastNameSearch',e.target.value)}
	93	+ placeholder="Last Name" />
78	94	<div className="form-control-feedback">
79	95	<i className="icon-search4 text-size-base text-muted"></i>
80	96	</div>
...	...
...	...	@@ -25,7 +25,6 @@ const meteorTick = (props, onData) => {
25	25	const user = Users.current();
26	26	const org = Orgs.current();
27	27	const students = Users.find({"role":"STUDENT"}).fetch();
28		- console.log(students);
29	28	onData(null, {
30	29	data: {
31	30	user: user,
...	...