From 6f4e87ef6f0cfae0b6f6d07c524fe34d75c8d48c Mon Sep 17 00:00:00 2001
From: meskio <meskio@sindominio.net>
Date: Tue, 16 Mar 2021 13:47:08 +0100
Subject: [PATCH] Create products in it's own page
* Closes: #23
---
src/Head.js | 3 ++
src/Panel.js | 6 ++-
src/ProductAdder.js | 66 --------------------------
src/inventary/CreateInventary.js | 2 +-
src/order/OrderEditor.js | 2 +-
src/product/CreateProduct.js | 75 ++++++++++++++++++++++++++++++
src/{ => product}/ProductList.js | 34 ++------------
src/{ => product}/ProductPicker.js | 6 +--
src/purchase/Purchase.js | 2 +-
9 files changed, 93 insertions(+), 103 deletions(-)
delete mode 100644 src/ProductAdder.js
create mode 100644 src/product/CreateProduct.js
rename src/{ => product}/ProductList.js (83%)
rename src/{ => product}/ProductPicker.js (97%)
diff --git a/src/Head.js b/src/Head.js
index cc55b70..9dfa636 100644
--- a/src/Head.js
+++ b/src/Head.js
@@ -43,6 +43,9 @@ function Head(props) {
<LinkContainer to="/products">
<NavDropdown.Item>Productos</NavDropdown.Item>
</LinkContainer>
+ <LinkContainer to="/product/add">
+ <NavDropdown.Item>Alta codigos</NavDropdown.Item>
+ </LinkContainer>
<LinkContainer to="/inventary">
<NavDropdown.Item>Inventario</NavDropdown.Item>
</LinkContainer>
diff --git a/src/Panel.js b/src/Panel.js
index abd5ea8..ab0633f 100644
--- a/src/Panel.js
+++ b/src/Panel.js
@@ -4,7 +4,8 @@ import { Container, Row } from "react-bootstrap";
import MemberAdder from "./member/MemberAdder";
import MemberEditer from "./member/MemberEditer";
import MemberList from "./member/MemberList";
-import ProductList from "./ProductList";
+import ProductList from "./product/ProductList";
+import CreateProduct from "./product/CreateProduct";
import CreateInventary from "./inventary/CreateInventary";
import InventaryList from "./inventary/InventaryList";
import ShowInventary from "./inventary/ShowInventary";
@@ -53,6 +54,9 @@ function LogedPanel(props) {
<Route path="/products">
<ProductList />
</Route>
+ <Route path="/product/add">
+ <CreateProduct />
+ </Route>
<Route path="/inventary/add">
<CreateInventary />
</Route>
diff --git a/src/ProductAdder.js b/src/ProductAdder.js
deleted file mode 100644
index 186db84..0000000
--- a/src/ProductAdder.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import React, { useState } from "react";
-import { Form, Button } from "react-bootstrap";
-import PriceEditor from "./PriceEditor";
-
-function ProductAdder(props) {
- const [code, setCode] = useState("");
- const [name, setName] = useState("");
- const [price, setPrice] = useState(0);
- const [stock, setStock] = useState(0);
-
- const add = (e) => {
- e.preventDefault();
- props.addProduct({
- code: parseInt(code),
- price: price,
- stock: parseInt(stock),
- name,
- });
- setCode("");
- setName("");
- setPrice(0);
- setStock("");
- };
-
- const disabled = isNaN(price) || isNaN(parseInt(code)) || !name;
-
- return (
- <Form onSubmit={add}>
- <Form.Group>
- <Form.Label>Codigo:</Form.Label>
- <Form.Control
- type="number"
- placeholder="codigo"
- value={code}
- onChange={(e) => setCode(e.target.value)}
- />
- </Form.Group>
- <Form.Group>
- <Form.Label>Nombre:</Form.Label>
- <Form.Control
- placeholder="nombre"
- value={name}
- onChange={(e) => setName(e.target.value)}
- />
- </Form.Group>
- <Form.Group>
- <Form.Label>Precio:</Form.Label>
- <PriceEditor value={price} onChange={setPrice} />
- </Form.Group>
- <Form.Group>
- <Form.Label>Cantidad:</Form.Label>
- <Form.Control
- type="number"
- placeholder="cantidad"
- value={stock}
- onChange={(e) => setStock(e.target.value)}
- />
- </Form.Group>
- <Button disabled={disabled} type="submit">
- Añadir
- </Button>
- </Form>
- );
-}
-
-export default ProductAdder;
diff --git a/src/inventary/CreateInventary.js b/src/inventary/CreateInventary.js
index 2c1674c..19364ff 100644
--- a/src/inventary/CreateInventary.js
+++ b/src/inventary/CreateInventary.js
@@ -1,7 +1,7 @@
import React, { useState } from "react";
import { Redirect } from "react-router-dom";
import { Form, Row, Col, Button } from "react-bootstrap";
-import ProductPicker from "../ProductPicker";
+import ProductPicker from "../product/ProductPicker";
import Fetcher from "../Fetcher";
import Sender from "../Sender";
diff --git a/src/order/OrderEditor.js b/src/order/OrderEditor.js
index e7dc08e..66d263f 100644
--- a/src/order/OrderEditor.js
+++ b/src/order/OrderEditor.js
@@ -1,6 +1,6 @@
import React, { useState } from "react";
import { Form, Row, Col } from "react-bootstrap";
-import ProductPicker from "../ProductPicker";
+import ProductPicker from "../product/ProductPicker";
import Fetcher from "../Fetcher";
import { date2string, time2string, daysAfterNow } from "../util";
diff --git a/src/product/CreateProduct.js b/src/product/CreateProduct.js
new file mode 100644
index 0000000..79c0a4f
--- /dev/null
+++ b/src/product/CreateProduct.js
@@ -0,0 +1,75 @@
+import React, { useState } from "react";
+import { Redirect } from "react-router-dom";
+import { Col, Form, Button } from "react-bootstrap";
+import Sender from "../Sender";
+import PriceEditor from "../PriceEditor";
+
+function CreateProduct() {
+ const [code, setCode] = useState("");
+ const [name, setName] = useState("");
+ const [price, setPrice] = useState(0);
+ const [stock, setStock] = useState(0);
+ const [redirect, setRedirect] = useState(null);
+
+ if (redirect != null) {
+ return <Redirect to={"/product/" + redirect.code} />;
+ }
+
+ const body = () => {
+ return {
+ code: parseInt(code),
+ price: price,
+ stock: parseInt(stock),
+ name,
+ };
+ };
+
+ const disabled = isNaN(price) || isNaN(parseInt(code)) || !name;
+
+ return (
+ <div>
+ <h2>Crear un nuevo código de producto</h2>
+ <Sender url="/api/product" body={body} onSuccess={setRedirect}>
+ <Form.Row>
+ <Form.Group as={Col}>
+ <Form.Label>Codigo:</Form.Label>
+ <Form.Control
+ type="number"
+ placeholder="codigo"
+ value={code}
+ onChange={(e) => setCode(e.target.value)}
+ />
+ </Form.Group>
+ <Form.Group as={Col} xs={12} sm={10}>
+ <Form.Label>Producto:</Form.Label>
+ <Form.Control
+ placeholder="nombre"
+ value={name}
+ onChange={(e) => setName(e.target.value)}
+ />
+ </Form.Group>
+ </Form.Row>
+ <Form.Row>
+ <Form.Group as={Col}>
+ <Form.Label>Precio:</Form.Label>
+ <PriceEditor value={price} onChange={setPrice} />
+ </Form.Group>
+ <Form.Group as={Col}>
+ <Form.Label>Cantidad:</Form.Label>
+ <Form.Control
+ type="number"
+ placeholder="cantidad"
+ value={stock}
+ onChange={(e) => setStock(e.target.value)}
+ />
+ </Form.Group>
+ </Form.Row>
+ <Button variant="primary" disabled={disabled} type="submit">
+ Añadir
+ </Button>
+ </Sender>
+ </div>
+ );
+}
+
+export default CreateProduct;
diff --git a/src/ProductList.js b/src/product/ProductList.js
similarity index 83%
rename from src/ProductList.js
rename to src/product/ProductList.js
index ea872c3..d3a4ef7 100644
--- a/src/ProductList.js
+++ b/src/product/ProductList.js
@@ -1,10 +1,9 @@
import React from "react";
import { Table, Button, Alert, Modal } from "react-bootstrap";
-import Fetcher from "./Fetcher";
-import EditableCell from "./EditableCell";
-import ProductAdder from "./ProductAdder";
-import AuthContext from "./AuthContext";
-import { url } from "./util";
+import Fetcher from "../Fetcher";
+import EditableCell from "../EditableCell";
+import AuthContext from "../AuthContext";
+import { url } from "../util";
class ProductList extends React.Component {
static contextType = AuthContext;
@@ -75,25 +74,6 @@ class ProductList extends React.Component {
});
}
- addProduct(product) {
- let products = this.state.products;
- products.push(product);
- this.setState({ products });
-
- const body = JSON.stringify(product);
- fetch(url("/api/product"), {
- headers: { "x-authentication": this.context.token },
- method: "POST",
- body,
- }).then((response) => {
- if (!response.ok) {
- this.setState({
- error: response.status.toString() + " " + response.statusText,
- });
- }
- });
- }
-
modalClose() {
this.setState({ delete: { name: null } });
}
@@ -165,12 +145,6 @@ class ProductList extends React.Component {
</thead>
<tbody>{entries}</tbody>
</Table>
- {isAdmin && (
- <div>
- <p>Añadir producto:</p>
- <ProductAdder addProduct={(p) => this.addProduct(p)} />
- </div>
- )}
<Modal show={this.state.delete.name != null} onHide={this.modalClose}>
<Modal.Header closeButton>
diff --git a/src/ProductPicker.js b/src/product/ProductPicker.js
similarity index 97%
rename from src/ProductPicker.js
rename to src/product/ProductPicker.js
index bf57421..33ca161 100644
--- a/src/ProductPicker.js
+++ b/src/product/ProductPicker.js
@@ -1,9 +1,9 @@
import React from "react";
import { Form, Row, Col, Button } from "react-bootstrap";
import { Typeahead } from "react-bootstrap-typeahead";
-import Fetcher from "./Fetcher";
-import { printMoney } from "./util";
-import PriceEditor from "./PriceEditor";
+import Fetcher from "../Fetcher";
+import { printMoney } from "../util";
+import PriceEditor from "../PriceEditor";
class ProductPicker extends React.Component {
constructor(props) {
diff --git a/src/purchase/Purchase.js b/src/purchase/Purchase.js
index be07694..a4ea428 100644
--- a/src/purchase/Purchase.js
+++ b/src/purchase/Purchase.js
@@ -1,7 +1,7 @@
import React, { useState } from "react";
import { Redirect } from "react-router-dom";
import { Row, Col, Button, Alert } from "react-bootstrap";
-import ProductPicker from "../ProductPicker";
+import ProductPicker from "../product/ProductPicker";
import MemberPicker from "../member/MemberPicker";
import Sender from "../Sender";
import { printMoney } from "../util";
--
GitLab