From 058ad7792a6a50821865184978d0d9dfe09f963c Mon Sep 17 00:00:00 2001
From: meskio <meskio@sindominio.net>
Date: Tue, 16 Mar 2021 19:05:22 +0100
Subject: [PATCH] List past orders
---
src/Dashboard.js | 4 +--
src/Head.js | 24 +++++++++++---
src/Panel.js | 4 +++
src/inventary/InventaryList.js | 2 +-
src/order/OrderCards.js | 26 +++++++++++++++
src/order/OrderList.js | 58 ++++++++++++++++++++++++++--------
6 files changed, 97 insertions(+), 21 deletions(-)
create mode 100644 src/order/OrderCards.js
diff --git a/src/Dashboard.js b/src/Dashboard.js
index ac17ef6..e87613c 100644
--- a/src/Dashboard.js
+++ b/src/Dashboard.js
@@ -3,7 +3,7 @@ import { Row, Col, Button } from "react-bootstrap";
import { LinkContainer } from "react-router-bootstrap";
import AuthContext from "./AuthContext";
import Fetcher from "./Fetcher";
-import OrderList from "./order/OrderList";
+import OrderCards from "./order/OrderCards";
import MyTransactions from "./transaction/MyTransactions";
import { printMoney } from "./util";
@@ -40,7 +40,7 @@ class Dashboard extends React.Component {
</LinkContainer>
</Col>
</Row>
- <OrderList />
+ <OrderCards />
<MyTransactions />
</Fetcher>
);
diff --git a/src/Head.js b/src/Head.js
index 54a32fb..9934e1f 100644
--- a/src/Head.js
+++ b/src/Head.js
@@ -56,6 +56,24 @@ function Head(props) {
);
}
+ let orderNav = (
+ <LinkContainer to="/orders">
+ <Nav.Link>Pedidos</Nav.Link>
+ </LinkContainer>
+ );
+ if (auth.role === "order" || auth.role === "admin") {
+ orderNav = (
+ <NavDropdown title="Pedidos" id="admin">
+ <LinkContainer to="/orders">
+ <NavDropdown.Item>Pedidos</NavDropdown.Item>
+ </LinkContainer>
+ <LinkContainer to="/order/create">
+ <NavDropdown.Item>Abrir pedido</NavDropdown.Item>
+ </LinkContainer>
+ </NavDropdown>
+ );
+ }
+
return (
<Navbar bg="light" expand="sm">
<LinkContainer to="/">
@@ -76,11 +94,7 @@ function Head(props) {
<Nav.Link>Comprar</Nav.Link>
</LinkContainer>
{productNav}
- {(auth.role === "order" || auth.role === "admin") && (
- <LinkContainer to="/order/create">
- <Nav.Link>Abrir pedido</Nav.Link>
- </LinkContainer>
- )}
+ {orderNav}
</Nav>
<Nav className="ml-auto" activeKey={location.pathname}>
diff --git a/src/Panel.js b/src/Panel.js
index 1fce501..9a7e68f 100644
--- a/src/Panel.js
+++ b/src/Panel.js
@@ -18,6 +18,7 @@ import ShowTransaction from "./transaction/ShowTransaction";
import TransactionList from "./transaction/TransactionList";
import ShowOrder from "./order/ShowOrder";
import CreateOrder from "./order/CreateOrder";
+import OrderList from "./order/OrderList";
import EditOrder from "./order/EditOrder";
import SignIn from "./SignIn";
import ResetRequest from "./ResetRequest";
@@ -87,6 +88,9 @@ function LogedPanel(props) {
<Route path="/topup">
<Topup />
</Route>
+ <Route path="/orders">
+ <OrderList />
+ </Route>
<Route path="/order/create">
<CreateOrder />
</Route>
diff --git a/src/inventary/InventaryList.js b/src/inventary/InventaryList.js
index 80011f3..9a6fecf 100644
--- a/src/inventary/InventaryList.js
+++ b/src/inventary/InventaryList.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
import { Table, OverlayTrigger, Popover } from "react-bootstrap";
import { LinkContainer } from "react-router-bootstrap";
import { printDate, printMoney, printInventaryID } from "../util";
diff --git a/src/order/OrderCards.js b/src/order/OrderCards.js
new file mode 100644
index 0000000..3e38060
--- /dev/null
+++ b/src/order/OrderCards.js
@@ -0,0 +1,26 @@
+import React, { useState } from "react";
+import { Card, Row, Col, Button } from "react-bootstrap";
+import { LinkContainer } from "react-router-bootstrap";
+import Fetcher from "../Fetcher";
+
+function OrderCards() {
+ const [orders, setOrders] = useState([]);
+ const order_list = orders.map((o) => (
+ <Card key={o.ID} as={Col} sm={4}>
+ <Card.Body>
+ <Card.Title>{o.name}</Card.Title>
+ <Card.Text>{o.description}</Card.Text>
+ <LinkContainer to={"/order/" + o.ID}>
+ <Button>Realizar pedido</Button>
+ </LinkContainer>
+ </Card.Body>
+ </Card>
+ ));
+ return (
+ <Fetcher url={"/api/order/active"} onFetch={setOrders}>
+ <Row>{order_list}</Row>
+ </Fetcher>
+ );
+}
+
+export default OrderCards;
diff --git a/src/order/OrderList.js b/src/order/OrderList.js
index d7bd38f..b791b62 100644
--- a/src/order/OrderList.js
+++ b/src/order/OrderList.js
@@ -1,24 +1,56 @@
import React, { useState } from "react";
-import { Card, Row, Col, Button } from "react-bootstrap";
+import { Table, OverlayTrigger, Popover } from "react-bootstrap";
import { LinkContainer } from "react-router-bootstrap";
import Fetcher from "../Fetcher";
+import { printDate } from "../util";
+
+function orderOverlay(order) {
+ const content = order.products.map((p) => {
+ if (p.product === null) {
+ return null;
+ }
+
+ return (
+ <div key={"OL" + order.ID + "-" + p.ID}>
+ {p.product.name}
+ <br />
+ </div>
+ );
+ });
+
+ return (
+ <Popover>
+ <Popover.Title>{order.description}</Popover.Title>
+ <Popover.Content>{content}</Popover.Content>
+ </Popover>
+ );
+}
function OrderList() {
const [orders, setOrders] = useState([]);
- const order_list = orders.map((o) => (
- <Card key={o.ID} as={Col} sm={4}>
- <Card.Body>
- <Card.Title>{o.name}</Card.Title>
- <Card.Text>{o.description}</Card.Text>
- <LinkContainer to={"/order/" + o.ID}>
- <Button>Realizar pedido</Button>
- </LinkContainer>
- </Card.Body>
- </Card>
+
+ const entries = orders.map((order) => (
+ <OverlayTrigger key={order.ID} overlay={orderOverlay(order)}>
+ <LinkContainer to={"/order/" + order.ID}>
+ <tr className={order.active ? "table-primary" : "table-secondary"}>
+ <td>{printDate(order.deadline)}</td>
+ <td>{order.name}</td>
+ </tr>
+ </LinkContainer>
+ </OverlayTrigger>
));
+
return (
- <Fetcher url={"/api/order/active"} onFetch={setOrders}>
- <Row>{order_list}</Row>
+ <Fetcher url="/api/order" onFetch={setOrders}>
+ <Table className="text-center" responsive>
+ <thead>
+ <tr>
+ <th>Fecha</th>
+ <th>Nombre</th>
+ </tr>
+ </thead>
+ <tbody>{entries}</tbody>
+ </Table>
</Fetcher>
);
}
--
GitLab