diff --git a/src/ProductAdder.js b/src/ProductAdder.js new file mode 100644 index 0000000000000000000000000000000000000000..a22c513949dcb76376d815c84500afd20b5f1491 --- /dev/null +++ b/src/ProductAdder.js @@ -0,0 +1,82 @@ +import React, { useState } from "react"; +import { Form, InputGroup, Col, Row, Button } from "react-bootstrap"; + +function ProductAdder(props) { + const [code, setCode] = useState(); + const [name, setName] = useState(); + const [eur, setEur] = useState(); + const [cents, setCents] = useState(); + const [stock, setStock] = useState(); + + const add = (e) => { + e.preventDefault(); + props.addProduct({ + code: parseInt(code), + price: parseInt(eur) * 100 + parseInt(cents), + stock: parseInt(stock), + name, + }); + setCode(""); + setName(""); + setEur(""); + setCents(""); + setStock(""); + }; + + return ( + <Form onSubmit={add}> + <Form.Group as={Row}> + <Col> + <Form.Control + type="number" + placeholder="codigo" + value={code} + onChange={(e) => setCode(e.target.value)} + /> + </Col> + <Col> + <Form.Control + placeholder="nombre" + value={name} + onChange={(e) => setName(e.target.value)} + /> + </Col> + <Col sm={3}> + <InputGroup> + <Form.Control + placeholder="euros" + value={eur} + onChange={(e) => setEur(e.target.value)} + /> + <InputGroup.Append> + <InputGroup.Text>.</InputGroup.Text> + </InputGroup.Append> + <Form.Control + placeholder="centimos" + value={cents} + onChange={(e) => setCents(e.target.value)} + min="0" + max="99" + /> + <InputGroup.Append> + <InputGroup.Text>€</InputGroup.Text> + </InputGroup.Append> + </InputGroup> + </Col> + <Col> + <Form.Control + type="number" + placeholder="cantidad" + value={stock} + onChange={(e) => setStock(e.target.value)} + /> + </Col> + <Col sm={1}> + <Button type="submit">+</Button> + </Col> + </Form.Group> + </Form> + ); +} + +export default ProductAdder; diff --git a/src/ProductList.js b/src/ProductList.js index c706574f3e7b5a455bca909851b868dbe1447b8a..e3bd6fd91421a9b4436a672746d394b59c630ce4 100644 --- a/src/ProductList.js +++ b/src/ProductList.js @@ -2,6 +2,7 @@ import React from "react"; import { Table, Button, Alert } from "react-bootstrap"; import Fetcher from "./Fetcher"; import EditableCell from "./EditableCell"; +import ProductAdder from "./ProductAdder"; import AuthContext from "./AuthContext"; import { printMoney } from "./util"; @@ -67,6 +68,25 @@ class ProductList extends React.Component { }); } + addProduct(product) { + let products = this.state.products; + products.push(product); + this.setState({ products }); + + const body = JSON.stringify(product); + fetch("/api/product", { + headers: { "x-authentication": this.context.token }, + method: "POST", + body, + }).then((response) => { + if (!response.ok) { + this.setState({ + error: response.status.toString() + " " + response.statusText, + }); + } + }); + } + render() { let alert = null; if (this.state.error !== null) { @@ -133,6 +153,12 @@ class ProductList extends React.Component { </thead> <tbody>{entries}</tbody> </Table> + {isAdmin && ( + <div> + <p>Añadir producto:</p> + <ProductAdder addProduct={(p) => this.addProduct(p)} /> + </div> + )} </Fetcher> ); }