Add implementation of portfolio and scenario UI structure

6 files changed, 129 insertions, 15 deletions

diff --git a/frontend/src/components/app/map/MapStageComponent.js b/frontend/src/components/app/map/MapStageComponent.js
index 455604e4..f1c2b211 100644
--- a/frontend/src/components/app/map/MapStageComponent.js
+++ b/frontend/src/components/app/map/MapStageComponent.js
@@ -23,11 +23,9 @@ class MapStageComponent extends React.Component {
         this.updateScale = this.updateScale.bind(this)
     }
 
-    componentWillMount() {
+    componentDidMount() {
         this.updateDimensions()
-    }
 
-    componentDidMount() {
         window.addEventListener('resize', this.updateDimensions)
         window.addEventListener('wheel', this.updateScale)
 
diff --git a/frontend/src/components/app/sidebars/Sidebar.js b/frontend/src/components/app/sidebars/Sidebar.js
index 7ba8639a..a47a67c0 100644
--- a/frontend/src/components/app/sidebars/Sidebar.js
+++ b/frontend/src/components/app/sidebars/Sidebar.js
@@ -1,8 +1,18 @@
+import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import React from 'react'
 import './Sidebar.css'
 
 class Sidebar extends React.Component {
+    static propTypes = {
+        isRight: PropTypes.bool.isRequired,
+        collapsible: PropTypes.bool,
+    }
+
+    static defaultProps = {
+        collapsible: true
+    }
+
     state = {
         collapsed: false,
     }
@@ -41,7 +51,7 @@ class Sidebar extends React.Component {
                 onWheel={e => e.stopPropagation()}
             >
                 {this.props.children}
-                {collapseButton}
+                {this.props.collapsible && collapseButton}
             </div>
         )
     }
diff --git a/frontend/src/components/app/sidebars/project/PortfolioListComponent.js b/frontend/src/components/app/sidebars/project/PortfolioListComponent.js
new file mode 100644
index 00000000..a31f11cf
--- /dev/null
+++ b/frontend/src/components/app/sidebars/project/PortfolioListComponent.js
@@ -0,0 +1,59 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import Shapes from '../../../../shapes'
+import { Link } from 'react-router-dom'
+import FontAwesome from 'react-fontawesome'
+import ScenarioListContainer from '../../../../containers/app/sidebars/project/ScenarioListContainer'
+
+class PortfolioListComponent extends React.Component {
+    static propTypes = {
+        portfolios: PropTypes.arrayOf(Shapes.Portfolio),
+        currentProjectId: PropTypes.string.isRequired,
+        currentPortfolioId: PropTypes.string,
+        onNewPortfolio: PropTypes.func.isRequired,
+        onChoosePortfolio: PropTypes.func.isRequired,
+        onDeletePortfolio: PropTypes.func.isRequired,
+    }
+
+    onDelete(id) {
+        this.props.onDeletePortfolio(id)
+    }
+
+    render() {
+        return (
+            <div className="pb-3">
+                <h2>
+                    Portfolios
+                    <button className="btn btn-outline-primary float-right" onClick={this.props.onNewPortfolio.bind(this)}>
+                        <FontAwesome name="plus"/>
+                    </button>
+                </h2>
+
+                {this.props.portfolios.map((portfolio, idx) => (
+                    <div key={portfolio._id}>
+                        <div className="row mb-1">
+                            <div
+                                className={'col-8 align-self-center ' + (portfolio._id === this.props.currentPortfolioId ? 'font-weight-bold' : '')}>
+                                {portfolio.name}
+                            </div>
+                            <div className="col-4 text-right">
+                                <Link
+                                    className="btn btn-outline-primary mr-1 fa fa-play"
+                                    to={`/projects/${this.props.currentProjectId}/portfolios/${portfolio._id}`}
+                                    onClick={() => this.props.onChoosePortfolio(portfolio._id)}
+                                />
+                                <span
+                                    className="btn btn-outline-danger fa fa-trash"
+                                    onClick={() => this.onDelete(portfolio._id)}
+                                />
+                            </div>
+                        </div>
+                        <ScenarioListContainer portfolioId={portfolio._id}/>
+                    </div>
+                ))}
+            </div>
+        )
+    }
+}
+
+export default PortfolioListComponent
diff --git a/frontend/src/components/app/sidebars/project/ProjectSidebarComponent.js b/frontend/src/components/app/sidebars/project/ProjectSidebarComponent.js
index d6e39ff6..b21b012b 100644
--- a/frontend/src/components/app/sidebars/project/ProjectSidebarComponent.js
+++ b/frontend/src/components/app/sidebars/project/ProjectSidebarComponent.js
@@ -1,11 +1,12 @@
 import React from 'react'
 import Sidebar from '../Sidebar'
 import TopologyListContainer from '../../../../containers/app/sidebars/project/TopologyListContainer'
+import PortfolioListContainer from '../../../../containers/app/sidebars/project/PortfolioListContainer'
 
-const ProjectSidebarComponent = () => (
-        <Sidebar isRight={false}>
+const ProjectSidebarComponent = ({collapsible}) => (
+        <Sidebar isRight={false} collapsible={collapsible}>
             <TopologyListContainer/>
-            <h2>Portfolios</h2>
+            <PortfolioListContainer/>
         </Sidebar>
     )
 
diff --git a/frontend/src/components/app/sidebars/project/ScenarioListComponent.js b/frontend/src/components/app/sidebars/project/ScenarioListComponent.js
new file mode 100644
index 00000000..9d2e261e
--- /dev/null
+++ b/frontend/src/components/app/sidebars/project/ScenarioListComponent.js
@@ -0,0 +1,54 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import Shapes from '../../../../shapes'
+import { Link } from 'react-router-dom'
+import FontAwesome from 'react-fontawesome'
+
+class ScenarioListComponent extends React.Component {
+    static propTypes = {
+        scenarios: PropTypes.arrayOf(Shapes.Scenario),
+        portfolioId: PropTypes.string,
+        currentProjectId: PropTypes.string.isRequired,
+        currentScenarioId: PropTypes.string,
+        onNewScenario: PropTypes.func.isRequired,
+        onChooseScenario: PropTypes.func.isRequired,
+        onDeleteScenario: PropTypes.func.isRequired,
+    }
+
+    onDelete(id) {
+        this.props.onDeleteScenario(id)
+    }
+
+    render() {
+        return (
+            <>
+                {this.props.scenarios.map((scenario, idx) => (
+                    <div key={scenario._id} className="row mb-1">
+                        <div className={'col-8 pl-5 align-self-center ' + (scenario._id === this.props.currentScenarioId ? 'font-weight-bold' : '')}>
+                            {scenario.name}
+                        </div>
+                        <div className="col-4 text-right">
+                            <Link
+                                className="btn btn-outline-primary mr-1 fa fa-play"
+                                to={`/projects/${this.props.currentProjectId}/portfolios/${scenario.portfolioId}/scenarios/${scenario._id}`}
+                                onClick={() => this.props.onChooseScenario(scenario.portfolioId, scenario._id)}
+                            />
+                            <span
+                                className={'btn btn-outline-danger fa fa-trash ' + (idx === 0 ? 'disabled' : '')}
+                                onClick={() => idx !== 0 ? this.onDelete(scenario._id) : undefined}
+                            />
+                        </div>
+                    </div>
+                ))}
+                <div className="pl-4 mb-2">
+                    <div className="btn btn-outline-primary" onClick={() => this.props.onNewScenario(this.props.portfolioId)}>
+                        <FontAwesome name="plus" className="mr-1"/>
+                        New scenario
+                    </div>
+                </div>
+            </>
+        )
+    }
+}
+
+export default ScenarioListComponent
diff --git a/frontend/src/components/app/sidebars/project/TopologyListComponent.js b/frontend/src/components/app/sidebars/project/TopologyListComponent.js
index 98615711..b8b41200 100644
--- a/frontend/src/components/app/sidebars/project/TopologyListComponent.js
+++ b/frontend/src/components/app/sidebars/project/TopologyListComponent.js
@@ -5,7 +5,6 @@ import FontAwesome from 'react-fontawesome'
 
 class TopologyListComponent extends React.Component {
     static propTypes = {
-        show: PropTypes.bool.isRequired,
         topologies: PropTypes.arrayOf(Shapes.Topology),
         currentTopologyId: PropTypes.string,
         onChooseTopology: PropTypes.func.isRequired,
@@ -17,13 +16,6 @@ class TopologyListComponent extends React.Component {
         this.props.onChooseTopology(id)
     }
 
-    onDuplicate() {
-        this.props.onNewTopology(
-            this.textInput.value,
-            this.originTopology.value,
-        )
-    }
-
     onDelete(id) {
         this.props.onDeleteTopology(id)
     }