summaryrefslogtreecommitdiff
path: root/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
blob: e775a663682a3428450300b400176de4be39eef3 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
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-7 pl-5 align-self-center ' +
                                (scenario._id === this.props.currentScenarioId ? 'font-weight-bold' : '')
                            }
                        >
                            {scenario.name}
                        </div>
                        <div className="col-5 text-right">
                            <Link
                                className="btn btn-outline-primary mr-1 fa fa-play disabled"
                                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