added collapsible panel

Deepak
1 parent 4446d8fe04
Showing 2 changed files with 40 additions and 34 deletions Show diff stats
client/stylesheets/custom.css
imports/client/views/org/admin/students/view/StudentTable.js
@@ -16,13 +16,10 @@ table .dropdown .fa{
   margin: 6px 6px;
 }
 table .dropdown-menu {
-    min-width: 100px;
+    min-width: 134px;
 }
 table .dropdown-menu > li {
-    margin-bottom: 10px;
     cursor: pointer;
-
-    line-height: 1.5384616;
 }
 table .dropdown-menu > li:hover{
     text-decoration: none;
@@ -33,3 +30,7 @@ table .dropdown-menu &gt; li &gt; span{
   padding: 6px 16px;
   display: block;
 }
+.panel-body{
+  max-height: 550px;
+  overflow-y: scroll;
+}
@@ -5,7 +5,7 @@ import React, { Component }               from &#39;react&#39;;
 import { Link,browserHistory }            from 'react-router';
 import { FormGroup,Panel,Table,
   ButtonToolbar,Modal,
-  FormControl,Glyphicon,Button }          from 'react-bootstrap';
+  FormControl,Glyphicon,Button, }          from 'react-bootstrap';
 import {moment}                           from 'meteor/momentjs:moment'
 import {StudentRow}                       from './StudentRow'
  
@@ -14,14 +14,18 @@ export class StudentTable extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      show: false
+      show: false,
+      panleOpen: true,
     };
     this.onUpdate = this.onUpdate.bind(this);
+    this.togglePanel = this.togglePanel.bind(this);
   };
   onUpdate(key, value) {
     this.setState({[key]: value});
   };
-
+  togglePanel(){
+    this.setState({panleOpen: !this.state.panleOpen});
+  }
   render() {
     return (
       <div className="panel panel-flat">
@@ -29,36 +33,37 @@ 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>
+              <li onClick={this.togglePanel}><a data-action="collapse" className={this.state.panleOpen?"rotate-180":null}></a></li>
             </ul>
           </div>
         </div>
-        <Table striped bordered condensed hover>
-          <thead>
-            <tr>
-              <th>First Name</th>
-              <th>Last Name</th>
-              <th>Class</th>
-              <th>DOB</th>
-              <th>Status</th>
-              <th className="text-center">Actions</th>
-            </tr>
-          </thead>
-          <tbody>
-            {
-              this.props.students.map(function(student, i)
-                {
-                  return(
-                    <StudentRow
-                      key = { i }
-                      student = {student}
-                    />
-                )
-              })
-            }
-          </tbody>
-        </Table>
+        <Panel collapsible expanded={this.state.panleOpen}>
+          <Table striped bordered condensed hover>
+            <thead>
+              <tr>
+                <th>First Name</th>
+                <th>Last Name</th>
+                <th>Class</th>
+                <th>DOB</th>
+                <th>Status</th>
+                <th className="text-center">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {
+                this.props.students.map(function(student, i)
+                  {
+                    return(
+                      <StudentRow
+                        key = { i }
+                        student = {student}
+                      />
+                  )
+                })
+              }
+            </tbody>
+          </Table>
+        </Panel>
       </div>
     );
   };
...	...	@@ -16,13 +16,10 @@ table .dropdown .fa{
16	16	margin: 6px 6px;
17	17	}
18	18	table .dropdown-menu {
19		- min-width: 100px;
	19	+ min-width: 134px;
20	20	}
21	21	table .dropdown-menu > li {
22		- margin-bottom: 10px;
23	22	cursor: pointer;
24		-
25		- line-height: 1.5384616;
26	23	}
27	24	table .dropdown-menu > li:hover{
28	25	text-decoration: none;
...	...	@@ -33,3 +30,7 @@ table .dropdown-menu > li > span{
33	30	padding: 6px 16px;
34	31	display: block;
35	32	}
	33	+.panel-body{
	34	+ max-height: 550px;
	35	+ overflow-y: scroll;
	36	+}
...	...
...	...	@@ -5,7 +5,7 @@ import React, { Component } from 'react';
5	5	import { Link,browserHistory } from 'react-router';
6	6	import { FormGroup,Panel,Table,
7	7	ButtonToolbar,Modal,
8		- FormControl,Glyphicon,Button } from 'react-bootstrap';
	8	+ FormControl,Glyphicon,Button, } from 'react-bootstrap';
9	9	import {moment} from 'meteor/momentjs:moment'
10	10	import {StudentRow} from './StudentRow'
11	11
...	...	@@ -14,14 +14,18 @@ export class StudentTable extends Component {
14	14	constructor(props) {
15	15	super(props);
16	16	this.state = {
17		- show: false
	17	+ show: false,
	18	+ panleOpen: true,
18	19	};
19	20	this.onUpdate = this.onUpdate.bind(this);
	21	+ this.togglePanel = this.togglePanel.bind(this);
20	22	};
21	23	onUpdate(key, value) {
22	24	this.setState({[key]: value});
23	25	};
24		-
	26	+ togglePanel(){
	27	+ this.setState({panleOpen: !this.state.panleOpen});
	28	+ }
25	29	render() {
26	30	return (
27	31	<div className="panel panel-flat">
...	...	@@ -29,36 +33,37 @@ export class StudentTable extends Component {
29	33	<h5 className="panel-title">Student Details</h5>
30	34	<div className="heading-elements">
31	35	<ul className="icons-list">
32		- <li><a data-action="collapse"></a></li>
33		- <li><a data-action="reload"></a></li>
	36	+ <li onClick={this.togglePanel}><a data-action="collapse" className={this.state.panleOpen?"rotate-180":null}></a></li>
34	37	</ul>
35	38	</div>
36	39	</div>
37		- <Table striped bordered condensed hover>
38		- <thead>
39		- <tr>
40		- <th>First Name</th>
41		- <th>Last Name</th>
42		- <th>Class</th>
43		- <th>DOB</th>
44		- <th>Status</th>
45		- <th className="text-center">Actions</th>
46		- </tr>
47		- </thead>
48		- <tbody>
49		- {
50		- this.props.students.map(function(student, i)
51		- {
52		- return(
53		- <StudentRow
54		- key = { i }
55		- student = {student}
56		- />
57		- )
58		- })
59		- }
60		- </tbody>
61		- </Table>
	40	+ <Panel collapsible expanded={this.state.panleOpen}>
	41	+ <Table striped bordered condensed hover>
	42	+ <thead>
	43	+ <tr>
	44	+ <th>First Name</th>
	45	+ <th>Last Name</th>
	46	+ <th>Class</th>
	47	+ <th>DOB</th>
	48	+ <th>Status</th>
	49	+ <th className="text-center">Actions</th>
	50	+ </tr>
	51	+ </thead>
	52	+ <tbody>
	53	+ {
	54	+ this.props.students.map(function(student, i)
	55	+ {
	56	+ return(
	57	+ <StudentRow
	58	+ key = { i }
	59	+ student = {student}
	60	+ />
	61	+ )
	62	+ })
	63	+ }
	64	+ </tbody>
	65	+ </Table>
	66	+ </Panel>
62	67	</div>
63	68	);
64	69	};
...	...