From 8634afa1a42a3722d4ac61d4ce7765857797fd57 Mon Sep 17 00:00:00 2001
From: Kai Reinhard <K.Reinhard@micromata.de>
Date: Sun, 06 Jan 2019 08:43:01 +0000
Subject: [PATCH] Desing: ListGroups, CardTitle, no Collapse for queues.
---
borgbutler-webapp/src/components/views/jobs/JobMonitorPanel.jsx | 7 +--
borgbutler-webapp/src/components/views/jobs/Job.jsx | 6 +-
borgbutler-webapp/src/components/views/jobs/JobQueue.jsx | 55 +++++++++------------------
3 files changed, 25 insertions(+), 43 deletions(-)
diff --git a/borgbutler-webapp/src/components/views/jobs/Job.jsx b/borgbutler-webapp/src/components/views/jobs/Job.jsx
index 8bcdff0..f41120c 100644
--- a/borgbutler-webapp/src/components/views/jobs/Job.jsx
+++ b/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>
)
}
}
diff --git a/borgbutler-webapp/src/components/views/jobs/JobMonitorPanel.jsx b/borgbutler-webapp/src/components/views/jobs/JobMonitorPanel.jsx
index 35d41f1..df5929a 100644
--- a/borgbutler-webapp/src/components/views/jobs/JobMonitorPanel.jsx
+++ b/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>
diff --git a/borgbutler-webapp/src/components/views/jobs/JobQueue.jsx b/borgbutler-webapp/src/components/views/jobs/JobQueue.jsx
index c321c11..e11aec0 100644
--- a/borgbutler-webapp/src/components/views/jobs/JobQueue.jsx
+++ b/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;
--
Gitblit v1.10.0