Desing: ListGroups, CardTitle, no Collapse for queues.

Kai Reinhard

06.43.2019 8634afa1a42a3722d4ac61d4ce7765857797fd57

Desing: ListGroups, CardTitle, no Collapse for queues.

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

@@ -1,6 +1,6 @@
import React from 'react';
import {Redirect} from 'react-router-dom';
import {Button, Card, CardBody, Collapse, Progress} from 'reactstrap';
import {Button, Card, CardBody, Collapse, ListGroupItem, Progress} from 'reactstrap';
import {IconCancel} from '../../general/IconComponents'
import {getRestServiceUrl} from "../../../utilities/global";
import PropTypes from "prop-types";
@@ -56,7 +56,7 @@
            cancelDisabled = true;
        }
        return (
            <div>
            <ListGroupItem>
                {this.renderRedirect()}
                <Button color="link" onClick={this.toggle}>{job.description}</Button>
                <div>{content}
@@ -81,7 +81,7 @@
                        </CardBody>
                    </Card>
                </Collapse>
            </div>
            </ListGroupItem>
        )
    }
}

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

@@ -97,11 +97,10 @@
                            geändert hat. Schön wäre, wenn sich nur die Komponenten neu rendern, die auch in den
                            REST-Daten von fetch sich geändert haben.
                        </li>
                        <li>Toggle-Status z. B. von My Computer und von einem einzelnen Job merken (zum Reproduzieren:
                            Klick auf "My Computer" bzw. "Loading info of ...".
                        <li>Toggle-Status einzelner Jobs merken (zum Reproduzieren:
                            Klick auf "Loading info of ...".
                            <br/>Es wäre
                            auch OK, wenn genau nur ein Job aufgeklappt wäre. Auf das Auf- und Zuklappen von "My
                            Computer" kann ich verzichten, wenn es einfacher werden würde.
                            auch OK, wenn genau nur ein Job aufgeklappt wäre.
                        </li>
                        <li>Cancel-Button soll rechts neben die Progressbar.</li>
                    </ol>

 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;