Collapsing now supported.

Kai Reinhard

16.55.2019 ceca9b965030f1e6e55222aab8f187aac2e79489

Collapsing now supported.

 borgbutler-webapp/src/components/views/jobs/JobQueue.jsx

@@ -1,25 +1,45 @@
import React from 'react';
import {Card, CardBody, CardHeader, ListGroup} from 'reactstrap';
import {Card, CardBody, CardHeader, Collapse, ListGroup} from 'reactstrap';
import Job from "./Job";

function JobQueue({queue, embedded}) {
    return (
        <div>
            <Card>
                <CardHeader>Job queue: {queue.repo}</CardHeader>
                <CardBody>
                    <ListGroup>
                        {queue.jobs
                            .map((job, index) => <Job
                                embedded={embedded}
                                job={job}
                                key={job.uniqueJobNumber}
                            />)}
                    </ListGroup>
                </CardBody>
            </Card>
        </div>
    );
class JobQueue extends React.Component {
    state = {
        collapsed: true
    };

    toggle() {
        this.setState({collapsed: !this.state.collapsed});
    }


    render() {
        const queue = this.props.queue;
        return (
            <div>
                <Card>
                    <CardHeader className={'onclick'} onClick={this.toggle}>Job queue: {queue.repo}</CardHeader>
                    <Collapse isOpen={this.state.collapsed}>
                        <CardBody>
                            <ListGroup>
                                {queue.jobs
                                    .map((job, index) => <Job
                                        embedded={this.props.embedded}
                                        job={job}
                                        key={job.uniqueJobNumber}
                                    />)}
                            </ListGroup>
                        </CardBody>
                    </Collapse>
                </Card>
            </div>
        );
    }

    constructor(props) {
        super(props);
        this.toggle = this.toggle.bind(this);

    }
}

export default JobQueue;