Skip to content
Snippets Groups Projects
Unverified Commit 0e2cd267 authored by meskio's avatar meskio :tent:
Browse files

Arrived and collected UI workflow

parent 6af2b72e
No related branches found
No related tags found
No related merge requests found
import React, { useState } from "react"; import React, { useState } from "react";
import { Card, Row, Col, Button } from "react-bootstrap"; import { Card, Row, Col, Button } from "react-bootstrap";
import { LinkContainer } from "react-router-bootstrap"; import { LinkContainer } from "react-router-bootstrap";
import Sender from "../Sender";
import Fetcher from "../Fetcher"; import Fetcher from "../Fetcher";
function OrderCards() { function OrderCards() {
const [orders, setOrders] = useState([]); const [unarrived, setUnarrived] = useState([]);
const order_list = orders.map((o) => ( const [collectable, setCollectable] = useState([]);
<Card key={o.ID} as={Col} sm={4}> const [active, setActive] = useState([]);
const [refetch, setRefetch] = useState(0);
const unarrived_list = unarrived.map((o) => (
<Card bg="dark" text="white" key={o.ID} as={Col} sm={4}>
<Card.Body> <Card.Body>
<Card.Title>{o.name}</Card.Title>
<Card.Text>{o.description}</Card.Text>
<LinkContainer to={"/order/" + o.ID}> <LinkContainer to={"/order/" + o.ID}>
<Button>Realizar pedido</Button> <div>
<Card.Title>{o.name}</Card.Title>
<Card.Text>{o.description}</Card.Text>
</div>
</LinkContainer> </LinkContainer>
<Sender
url={"/api/order/" + o.ID + "/arrive"}
method="PUT"
onSuccess={() => setRefetch(refetch + 1)}
>
<Button type="submit" variant="light">
Informar llegada
</Button>
</Sender>
</Card.Body> </Card.Body>
</Card> </Card>
)); ));
const collectable_list = collectable.map((t) => {
const purchase_list = t.order_purchase.map((o) => {
if (o.amount === 0) {
return "";
}
return (
<div key={o.order_product.code}>
{o.order_product.product.name}: {o.amount}
<br />
</div>
);
});
return (
<Card bg="secondary" text="white" key={"T-" + t.ID} as={Col} sm={4}>
<Card.Body>
<LinkContainer to={"/order/" + t.order.ID}>
<div>
<Card.Title>{t.order.name}</Card.Title>
<Card.Text>{purchase_list}</Card.Text>
</div>
</LinkContainer>
<Sender
url={"/api/order/" + t.order.ID + "/collected"}
method="PUT"
onSuccess={() => setRefetch(refetch + 1)}
>
<Button type="submit" variant="light">
Recogido
</Button>
</Sender>
</Card.Body>
</Card>
);
});
const active_list = active.map((o) => (
<LinkContainer to={"/order/" + o.ID}>
<Card bg="info" text="white" key={o.ID} as={Col} sm={4}>
<Card.Body>
<Card.Title>{o.name}</Card.Title>
<Card.Text>{o.description}</Card.Text>
<Button variant="light">Realizar pedido</Button>
</Card.Body>
</Card>
</LinkContainer>
));
return ( return (
<Fetcher url={"/api/order/active"} onFetch={setOrders}> <Row>
<Row>{order_list}</Row> <Fetcher
</Fetcher> url={"/api/order/unarrived"}
onFetch={setUnarrived}
refetch={refetch}
>
{unarrived_list}
</Fetcher>
<Fetcher
url={"/api/order/collectable"}
onFetch={setCollectable}
refetch={refetch}
>
{collectable_list}
</Fetcher>
<Fetcher url={"/api/order/active"} onFetch={setActive}>
{active_list}
</Fetcher>
</Row>
); );
} }
......
...@@ -13,6 +13,7 @@ import { ...@@ -13,6 +13,7 @@ import {
Modal, Modal,
} from "react-bootstrap"; } from "react-bootstrap";
import PurchaseOrder from "./PurchaseOrder"; import PurchaseOrder from "./PurchaseOrder";
import Sender from "../Sender";
import { printDate } from "../util"; import { printDate } from "../util";
import AuthContext from "../AuthContext"; import AuthContext from "../AuthContext";
import { printMoney, url } from "../util"; import { printMoney, url } from "../util";
...@@ -65,6 +66,7 @@ function ShowOrderResults(props) { ...@@ -65,6 +66,7 @@ function ShowOrderResults(props) {
return ( return (
<li key={t.member.num}> <li key={t.member.num}>
{t.member.name} ({t.member.num}): {t.member.name} ({t.member.num}):
{t.collected && <Badge variant="success">Recogido</Badge>}
<ul>{list}</ul> <ul>{list}</ul>
</li> </li>
); );
...@@ -170,29 +172,66 @@ class ShowOrder extends React.Component { ...@@ -170,29 +172,66 @@ class ShowOrder extends React.Component {
const { id } = this.props.match.params; const { id } = this.props.match.params;
let update_button; let update_button;
let collect_button;
if (this.state.isLoading) { if (this.state.isLoading) {
update_button = <Spinner animation="border" />; update_button = <Spinner animation="border" />;
} else { } else {
let deadline_week = new Date(order.deadline); let deadline_week = new Date(order.deadline);
deadline_week.setDate(deadline_week.getDate() + 7); deadline_week.setDate(deadline_week.getDate() + 7);
if ( if (deadline_week > Date.now()) {
(order.member_num === parseInt(this.context.num) || if (order.arrived && !this.state.transaction.collected) {
this.context.role === "admin") && collect_button = (
deadline_week > Date.now() <Sender
) { url={"/api/order/" + id + "/collected"}
update_button = ( method="PUT"
<ButtonGroup> onSuccess={() =>
<LinkContainer to={"/order/edit/" + id}> this.setState({ refetch: this.state.refetch + 1 })
<Button variant="info">Modificar</Button> }
</LinkContainer>
<Button
variant="danger"
onClick={() => this.setState({ showDelete: true })}
> >
Cancelar <Button type="submit" variant="secondary">
</Button> Recogido
</ButtonGroup> </Button>
); </Sender>
);
}
if (
order.member_num === parseInt(this.context.num) ||
this.context.role === "admin"
) {
let arrived_button;
if (!order.active && !order.arrived) {
arrived_button = (
<Sender
url={"/api/order/" + id + "/arrive"}
method="PUT"
onSuccess={() =>
this.setState({ refetch: this.state.refetch + 1 })
}
>
<Button type="submit" variant="dark">
Informar llegada
</Button>
</Sender>
);
}
update_button = (
<div>
<ButtonGroup>
<LinkContainer to={"/order/edit/" + id}>
<Button variant="info">Modificar</Button>
</LinkContainer>
<Button
variant="danger"
onClick={() => this.setState({ showDelete: true })}
>
Cancelar
</Button>
</ButtonGroup>
<br />
{arrived_button}
</div>
);
}
} }
} }
...@@ -220,6 +259,7 @@ class ShowOrder extends React.Component { ...@@ -220,6 +259,7 @@ class ShowOrder extends React.Component {
{expired} {expired}
</p> </p>
{update_button} {update_button}
{collect_button}
</Col> </Col>
</Row> </Row>
<p>{this.state.order.description}</p> <p>{this.state.order.description}</p>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment