Desing: ListGroups, CardTitle, no Collapse for queues.

Kai Reinhard

06.43.2019 8634afa1a42a3722d4ac61d4ce7765857797fd57

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

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

class JobQueue extends React.Component {
    constructor(props) {
        super(props);
        this.toggle = this.toggle.bind(this);
        this.state = {collapse: true};
    }

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

    render() {
        return (
            <div>
                <Button color="primary" onClick={this.toggle} style={{ marginBottom: '1rem' }}>{this.props.queue.repo}</Button>
                <Collapse isOpen={this.state.collapse}>
                    <Card>
                        <CardBody>
                            {this.props.queue.jobs
                                .map((job, index) => <Job
                                    embedded={this.props.embedded}
                                    job={job}
                                    key={job.commandLineAsString}
                                />)}
                        </CardBody>
                    </Card>
                </Collapse>
            </div>
        );
    }
function JobQueue({queue, embedded}) {
    return (
        <div>
            <Card>
                <CardHeader>{queue.repo}</CardHeader>
                <CardBody>
                    <ListGroup>
                        {queue.jobs
                            .map((job, index) => <Job
                                embedded={embedded}
                                job={job}
                                key={job.uniqueJobNumber}
                            />)}
                    </ListGroup>
                </CardBody>
            </Card>
        </div>
    );
}

JobQueue.propTypes = {
    embedded: PropTypes.bool
};

export default JobQueue;