diff --git a/src/Sender.js b/src/Sender.js
index ae8a140f18208ac01832bdabfb4abbe8bfa7f90c..df7fd8d845d3bc9ac25b41d69e0aea162ae1b9a8 100644
--- a/src/Sender.js
+++ b/src/Sender.js
@@ -16,7 +16,10 @@ class Sender extends React.Component {
}
submit(e) {
- e.preventDefault();
+ if (e) {
+ e.preventDefault();
+ }
+
this.setState({ isLoading: true });
const method = this.props.method ? this.props.method : "POST";
diff --git a/src/inventary/CreateInventary.js b/src/inventary/CreateInventary.js
index 04f7b8dc999a90224dac88d2ddb65dd6f6d2e41a..4f0d0aa6644cacdcbe2c5cc7b72486256048c3c5 100644
--- a/src/inventary/CreateInventary.js
+++ b/src/inventary/CreateInventary.js
@@ -1,11 +1,16 @@
-import React, { useState } from "react";
-import { Form, Row, Col, Button } from "react-bootstrap";
+import React, { useState, useRef } from "react";
+import { Form, Row, Col, Button, Modal } from "react-bootstrap";
+import InventaryEntry from "./InventaryEntry";
import ProductPicker from "../product/ProductPicker";
import Fetcher from "../Fetcher";
import Sender from "../Sender";
+function getSupplier(suppliers, name) {
+ return suppliers.find((s) => s.name === name);
+}
+
function supplierNameToId(suppliers, name) {
- const found = suppliers.find((s) => s.name === name);
+ const found = getSupplier(suppliers, name);
if (found) {
return found.ID;
}
@@ -17,6 +22,10 @@ function CreateInventary(props) {
const [comment, setComment] = useState("");
const [supplier, setSupplier] = useState(null);
const [picks, setPicks] = useState([]);
+ const [showConfirmation, setShowConfirmation] = useState(false);
+ const sender = useRef(null);
+
+ const handleClose = () => setShowConfirmation(false);
const onSuccess = (entry) => {
setComment("");
@@ -25,18 +34,23 @@ function CreateInventary(props) {
props.setEntry(entry);
};
- const body = () => {
- return {
- comment,
- supplier_id: supplierNameToId(suppliers, supplier),
- products: picks.map((p) => {
- return {
- code: p.code,
- price: p.price !== p.origPrice ? p.price : null,
- stock: p.amount ? p.amount : null,
- };
- }),
- };
+ const body = {
+ comment,
+ supplier_id: supplierNameToId(suppliers, supplier),
+ supplier: getSupplier(suppliers, supplier),
+ products: picks.map((p) => {
+ return {
+ code: p.code,
+ price: p.price !== p.origPrice ? p.price : null,
+ stock: p.amount ? p.amount : null,
+ product: p,
+ };
+ }),
+ };
+
+ const submit = () => {
+ handleClose();
+ sender.current.submit();
};
const disabled = picks.length === 0;
@@ -46,7 +60,7 @@ function CreateInventary(props) {
);
return (
- <Sender url="/api/inventary" body={body} onSuccess={onSuccess}>
+ <Sender ref={sender} url="/api/inventary" body={body} onSuccess={onSuccess}>
<Form.Group as={Row}>
<Form.Label as="legend" column sm={3}>
Proveedor
@@ -78,12 +92,33 @@ function CreateInventary(props) {
<Form.Group as={Row}>
<Col>
<div className="text-right">
- <Button variant="primary" type="submit" disabled={disabled}>
+ <Button
+ variant="primary"
+ disabled={disabled}
+ onClick={() => setShowConfirmation(true)}
+ >
Añadir entrada
</Button>
</div>
</Col>
</Form.Group>
+
+ <Modal show={showConfirmation} onHide={handleClose}>
+ <Modal.Header closeButton>
+ <Modal.Title>Confirmar la entrada de almacén</Modal.Title>
+ </Modal.Header>
+ <Modal.Body>
+ <InventaryEntry entry={body} />
+ </Modal.Body>
+ <Modal.Footer>
+ <Button variant="secondary" onClick={handleClose}>
+ Cancelar
+ </Button>
+ <Button variant="primary" disabled={disabled} onClick={submit}>
+ Añadir entrada
+ </Button>
+ </Modal.Footer>
+ </Modal>
</Sender>
);
}
diff --git a/src/inventary/InventaryEntry.js b/src/inventary/InventaryEntry.js
new file mode 100644
index 0000000000000000000000000000000000000000..e7a6c4b2b709a3dfdbf7a43250f009081d73a8dd
--- /dev/null
+++ b/src/inventary/InventaryEntry.js
@@ -0,0 +1,49 @@
+import React from "react";
+import { Row, Col, Table } from "react-bootstrap";
+import { printMoney, printDate, printInventaryID } from "../util";
+
+function InventaryEntry(props) {
+ const products = props.entry.products.map((p) => (
+ <tr key={p.code}>
+ <td>{p.product !== null ? p.product.name : p.code}</td>
+ <td>{p.stock}</td>
+ <td>{p.price !== null ? printMoney(p.price) : ""}</td>
+ </tr>
+ ));
+
+ return (
+ <div>
+ <Row>
+ {props.entry.supplier && (
+ <Col>
+ <h3>{props.entry.supplier.name}</h3>
+ </Col>
+ )}
+ <Col>
+ <p className="text-right">
+ {props.entry.ID && (
+ <div>
+ {printDate(props.entry.date)} {printInventaryID(props.entry)}
+ <br />
+ </div>
+ )}
+ {props.entry.member && props.entry.member.name}
+ </p>
+ </Col>
+ </Row>
+ <p>{props.entry.comment}</p>
+ <Table striped bordered hover responsive>
+ <thead>
+ <tr>
+ <th>Producto</th>
+ <th>Stock</th>
+ <th>Precio</th>
+ </tr>
+ </thead>
+ <tbody>{products}</tbody>
+ </Table>
+ </div>
+ );
+}
+
+export default InventaryEntry;
diff --git a/src/inventary/ShowInventary.js b/src/inventary/ShowInventary.js
index 600fc715753717be3b596572e2258bf73458163b..d431c205ad6fe0e98d95b484e11060232388204b 100644
--- a/src/inventary/ShowInventary.js
+++ b/src/inventary/ShowInventary.js
@@ -1,44 +1,15 @@
import React, { useState } from "react";
import { useParams } from "react-router-dom";
-import { Row, Col, Table } from "react-bootstrap";
+import InventaryEntry from "./InventaryEntry";
import Fetcher from "../Fetcher";
-import { printMoney, printDate, printInventaryID } from "../util";
function ShowInventary() {
const { id } = useParams();
const [entry, setEntry] = useState({ ID: 0, products: [] });
- const products = entry.products.map((p) => (
- <tr>
- <td>{p.product !== null ? p.product.name : p.code}</td>
- <td>{p.stock}</td>
- <td>{p.price !== null ? printMoney(p.price) : ""}</td>
- </tr>
- ));
-
return (
<Fetcher url={"/api/inventary/" + id} onFetch={setEntry}>
- <Row>
- <Col>{entry.supplier && <h3>{entry.supplier.name}</h3>}</Col>
- <Col>
- <p className="text-right">
- {printDate(entry.date)} {printInventaryID(entry)}
- <br />
- {entry.member && entry.member.name}
- </p>
- </Col>
- </Row>
- <p>{entry.comment}</p>
- <Table striped bordered hover responsive>
- <thead>
- <tr>
- <th>Producto</th>
- <th>Stock</th>
- <th>Precio</th>
- </tr>
- </thead>
- <tbody>{products}</tbody>
- </Table>
+ <InventaryEntry entry={entry} />
</Fetcher>
);
}