[jsx/Panel.js] Improved Panel component with optional multiple views

htdocs/bootstrap/css/custom-css.css

@@ -760,6 +760,16 @@ a.btn.btn-primary:hover:not(.download, .split-nav) {
     box-shadow: 2px 3px 4px 1px rgba(0,0,0,0.175);
 }
 
+.panel-heading {
+    display: flex;
+    align-items: center;
+}
+
+.panel-title {
+    width: 100%;
+    padding-right: 10px;
+}
+
 .panel-default {
     border-color: #C3D5DB;
 }

jsx/Panel.js

@@ -1,116 +1,140 @@
+import React, {useEffect, useState} from 'react';
+import PropTypes from 'prop-types';
+
 /**
- * This file contains React component for Panel
+ * Panel - a collapsible panel component with optional multiple views.
  *
  * @author Alex I.
- * @version 1.0.0
+ * @version 2.0.0
+ * @param {object} props
+ * @return {JSX.Element}
  */
+const Panel = (props) => {
+  const [collapsed, setCollapsed] = useState(false);
+  const [activeView, setActiveView] = useState(0);
 
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-
-/**
- * Panel component
- * Wraps children in a collapsible bootstrap panel
- */
-class Panel extends Component {
   /**
-   * @constructor
-   * @param {object} props - React Component properties
+   * Similar to componentDidMount and componentDidUpdate.
    */
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      collapsed: this.props.initCollapsed,
-    };
-
-    // Initialize panel class based on collapsed status
-    this.panelClass = (
-      this.props.initCollapsed ?
-        'panel-collapse collapse' :
-        'panel-collapse collapse in'
-    );
-
-    this.toggleCollapsed = this.toggleCollapsed.bind(this);
-  }
+  useEffect(() => {
+    setCollapsed(props.initCollapsed);
+  }, []);
 
   /**
-   * Toggle whether this Panel is displayed as collapsed
+   * Toggle whether panel is displayed as collapsed
    */
-  toggleCollapsed() {
-    if (this.props.collapsing) {
-      this.setState({collapsed: !this.state.collapsed});
+  const toggleCollapsed = () => {
+    if (props.collapsing) {
+      setCollapsed(!collapsed);
     }
-  }
+  };
 
   /**
-   * Render the React component
+   * User clicked a view to display.
    *
-   * @return {object}
+   * @param {number} index
    */
-  render() {
-    // Change arrow direction based on collapse status
-    let glyphClass = (
-      this.state.collapsed ?
-        'glyphicon pull-right glyphicon-chevron-down' :
-        'glyphicon pull-right glyphicon-chevron-up'
-    );
+  const viewClicked = (index) => {
+    setActiveView(index);
+  };
 
-    const title = this.props.bold ? (
-      <h3 className={'panel-title'}>
-        {this.props.title}
-      </h3>
-    ) : this.props.title;
-
-    // Add panel header, if title is set
-    const panelHeading = this.props.title ? (
-      <div
-        className="panel-heading"
-        onClick={this.toggleCollapsed}
-        data-toggle={this.props.collapsing ? 'collapse' : null}
-        data-target={'#' + this.props.id}
-        data-parent={this.props.parentId ?
-          '#'+this.props.parentId :
-          false
-        }
-        style={{
-          cursor: this.props.collapsing ? 'pointer' : 'default',
-          height: '3em',
-          fontWeight: 'bold',
-        }}
-      >
-        {title}
-        {this.props.collapsing ? <span className={glyphClass}/> : ''}
-      </div>
-    ) : '';
-
-    return (
-      <div className={'panel ' + this.props.class}
-           style={{height: this.props.panelSize}}
-      >
-        {panelHeading}
-        <div id={this.props.id}
-             className={this.panelClass}
-             role='tabpanel'
-             style={this.props.collapsing ? {} : {height: 'calc(100% - 3em)'}}
-        >
-          <div className="panel-body"
-               style={{...this.props.style, height: this.props.height}}>
-            {this.props.children}
-          </div>
+  // Panel Views (START)
+  let views = [];
+  let content = [];
+  let panelViews;
+  if (props.views) {
+    for (const [index, view] of props.views.entries()) {
+      views.push(
+        <li key={index}
+            onClick={() => viewClicked(index)}
+            className={index === activeView ? 'active' : null}>
+          <a data-target={`${index}_panel_content`}>
+            {view['title']}
+          </a>
+        </li>
+      );
+      content.push(
+        <div key={index}
+             id={`${index}_panel_content_${props.id}`}
+             className={index === activeView ?
+               `${index}_panel_content` : `${index}_panel_content hidden`}>
+          {view['content']}
         </div>
+      );
+    }
+    panelViews = (
+      <div className='btn-group views'>
+        <button type='button'
+                className='btn btn-default btn-xs dropdown-toggle'
+                data-toggle='dropdown'>
+          Views<span className='caret'/>
+        </button>
+        <ul className='dropdown-menu pull-right'
+            role='menu'>
+          {views}
+        </ul>
       </div>
     );
   }
-}
+  // Panel Views (END)
+
+  // Add panel header, if title is set
+  const panelHeading = props.title || props.views ? (
+    <div className='panel-heading'
+         data-parent={props.parentId
+           ? `#${props.parentId}`
+           : null}>
+      <h3 className='panel-title'>
+        {props.views && props.views[activeView]['title']
+          ? props.views[activeView]['title']
+          : props.title}
+      </h3>
+      {panelViews}
+      {props.collapsing
+        ? <span className={collapsed ?
+          'glyphicon glyphicon-chevron-down' :
+          'glyphicon glyphicon-chevron-up'}
+                onClick={toggleCollapsed}
+                data-toggle='collapse'
+                data-target={`#${props.id}`}
+                style={{cursor: 'pointer'}}/>
+        : null}
+    </div>
+  ) : '';
 
+  /**
+   * Renders the React component.
+   *
+   * @return {JSX.Element} - React markup for component.
+   */
+  return (
+    <div className={`panel ${props.class}`}
+         style={{height: props.panelSize}}>
+      {panelHeading}
+      <div id={props.id}
+           className={props.collapsed ?
+             'panel-collapse collapse' :
+             'panel-collapse collapse in'}
+           role='tabpanel'
+           style={{height: 'calc(100% - 3em)'}}>
+        <div className='panel-body'
+             style={{...props.style, height: props.height}}>
+          {content.length > 0 ? content : props.children}
+        </div>
+      </div>
+    </div>
+  );
+};
 Panel.propTypes = {
   initCollapsed: PropTypes.bool,
+  collapsed: PropTypes.bool,
   parentId: PropTypes.string,
   id: PropTypes.string,
   height: PropTypes.string,
   title: PropTypes.string,
   class: PropTypes.string,
+  children: PropTypes.node,
+  views: PropTypes.array,
   collapsing: PropTypes.bool,
   bold: PropTypes.bool,
   panelSize: PropTypes.string,
@@ -124,8 +148,6 @@ Panel.defaultProps = {
   height: '100%',
   class: 'panel-primary',
   collapsing: true,
-  bold: false,
-  title: '',
 };
 
 export default Panel;

modules/dashboard/css/dashboard.css

@@ -51,7 +51,6 @@
 
 .views {
     margin-right: 10px;
-    margin-top: -10px;
 }
 
 .welcome {

modules/dashboard/templates/panel.tpl

@@ -2,9 +2,7 @@
     {if $title}
     <div class="panel-heading">
         <h3 class="panel-title">{$title}</h3>
-        <span class="pull-right clickable glyphicon glyphicon-chevron-up"></span>
         {if !empty($menus)}
-        <div class="pull-right">
             <div class="btn-group views">
                 <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">Views<span class="caret"></span></button>
                 <ul class="dropdown-menu pull-right" role="menu">
@@ -13,8 +11,8 @@
                     {/foreach}
                 </ul>
             </div>
-        </div>
         {/if}
+        <span class="clickable glyphicon glyphicon-chevron-up"></span>
     </div>
     {/if}
     <div class="panel-body">

modules/dashboard/test/DashboardTest.php

@@ -358,21 +358,21 @@ public function testDashboardRecruitmentView()
         $views = $this->safeFindElement(
             WebDriverBy::Xpath(
                 "//*[@id='lorisworkspace']/div[1]".
-                    "/div[2]/div[1]/div/div/button"
+                    "/div[2]/div[1]/div/button"
             )
         );
         $views->click();
 
         $assertText1 = $this->safeFindElement(
             WebDriverBy::XPath(
                 "//*[@id='lorisworkspace']/div[1]".
-                    "/div[2]/div[1]/div/div/ul/li[1]/a"
+                    "/div[2]/div[1]/div/ul/li[1]/a"
             )
         )->getText();
         $assertText2 = $this->safeFindElement(
             WebDriverBy::XPath(
                 "//*[@id='lorisworkspace']/div[1]".
-                    "/div[2]/div[1]/div/div/ul/li[2]/a"
+                    "/div[2]/div[1]/div/ul/li[2]/a"
             )
         )->getText();
         $this->assertStringContainsString("View overall recruitment", $assertText1);

modules/imaging_browser/css/imaging_browser.css

@@ -75,7 +75,6 @@ h3 {
 
 .views {
     margin-right: 10px;
-    margin-top: -2px;
 }
 
 .mri-second-row-panel {

modules/imaging_browser/jsx/ImagePanel.js

@@ -59,17 +59,15 @@ class ImagePanelHeader extends Component {
               </span>;
     }
     let headerButton = (
-      <div className="pull-right">
-        <div className="btn-group views">
-          <button
-            type="button"
-            className="btn btn-default btn-xs dropdown-toggle"
-            onClick={this.props.onToggleHeaders}
-            aria-expanded={this.props.HeadersExpanded}>
-            Header Info
-          </button>
-          <span className="caret"></span>
-        </div>
+      <div className="btn-group views">
+        <button
+          type="button"
+          className="btn btn-default btn-xs dropdown-toggle"
+          onClick={this.props.onToggleHeaders}
+          aria-expanded={this.props.HeadersExpanded}>
+          Header Info
+        </button>
+        <span className="caret"></span>
       </div>
     );
     return (
@@ -84,8 +82,8 @@ class ImagePanelHeader extends Component {
           {this.props.Filename}
         </h3>
         {QCStatusLabel}
-        {arrow}
         {headerButton}
+        {arrow}
       </div>
     );
   }

modules/issue_tracker/css/issue_tracker.css

@@ -54,7 +54,6 @@ h3 {
 
 .views {
     margin-right: 10px;
-    margin-top: -2px;
 }
 
 .btn-volume-viewer {