Ask for confirmation before adding the inventary entry

* Closes: #22

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";
 

src/inventary/CreateInventary.js

-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>
   );
 }

src/inventary/InventaryEntry.js

+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;

src/inventary/ShowInventary.js

 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>
   );
 }