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/JobQueue.jsx |   55 +++++++++++++++++++------------------------------------
 1 files changed, 19 insertions(+), 36 deletions(-)

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