From 0f7bdd93ae1ad24b0b80e2aceddd0f2dd2abfe0a Mon Sep 17 00:00:00 2001
From: Deepak <deepak125.dk@gmail.com>
Date: Thu, 6 Apr 2017 18:14:24 +0530
Subject: [PATCH] added collapsible panel

---
 client/stylesheets/custom.css                      |  9 +--
 .../views/org/admin/students/view/StudentTable.js  | 65 ++++++++++++----------
 2 files changed, 40 insertions(+), 34 deletions(-)

diff --git a/client/stylesheets/custom.css b/client/stylesheets/custom.css
index a672f16..00bdc24 100644
--- a/client/stylesheets/custom.css
+++ b/client/stylesheets/custom.css
@@ -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 > li > span{
   padding: 6px 16px;
   display: block;
 }
+.panel-body{
+  max-height: 550px;
+  overflow-y: scroll;
+}
diff --git a/imports/client/views/org/admin/students/view/StudentTable.js b/imports/client/views/org/admin/students/view/StudentTable.js
index 743054e..379b900 100644
--- a/imports/client/views/org/admin/students/view/StudentTable.js
+++ b/imports/client/views/org/admin/students/view/StudentTable.js
@@ -5,7 +5,7 @@ import React, { Component }               from 'react';
 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>
     );
   };
-- 
2.0.0