diff --git a/src/Dashboard.js b/src/Dashboard.js index ac17ef6ac66dab91f000ab7c94be544f4a99f957..e87613c1385f6b21d9d100ed1ec6bc76c9b23518 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 54a32fb0912642e8cb2f92e1361d3d4e37ac0793..9934e1fced3a060ba2615d6f9085baa35994dc8e 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 1fce501790f465db07dc873fa57fbbf10bb5f68a..9a7e68fbd301c571b6f688d6da417146ba02e707 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 80011f3d2f5b5738df4abdadcc888cb8261156d9..9a6fecfd57189e9df8b55d7f972b75537768daee 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 0000000000000000000000000000000000000000..3e38060438435fc03fa3f5bb4e0f16ebdc967c54 --- /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 d7bd38fbd6af170f37b4cf51360b4c96c5e0ab5f..b791b62693dce34128d5388cb327fd1ad574d7ec 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> ); }