From 98d4eb2b5325714c359ff22b804cea59d74ce90c Mon Sep 17 00:00:00 2001
From: meskio <meskio@sindominio.net>
Date: Fri, 23 Oct 2020 13:18:32 +0200
Subject: [PATCH] Edit products
---
src/EditableCell.js | 27 ++++++++++++++++
src/ProductList.js | 77 +++++++++++++++++++++++++++++++++++++++++----
2 files changed, 98 insertions(+), 6 deletions(-)
create mode 100644 src/EditableCell.js
diff --git a/src/EditableCell.js b/src/EditableCell.js
new file mode 100644
index 0000000..566b7d1
--- /dev/null
+++ b/src/EditableCell.js
@@ -0,0 +1,27 @@
+import React, { useState } from "react";
+import { Form } from "react-bootstrap";
+
+function EditableCell(props) {
+ const [data, setData] = useState(props.value);
+ const [editing, setEditing] = useState(false);
+
+ if (props.ro || !editing) {
+ return <td onClick={() => setEditing(true)}>{props.value}</td>;
+ }
+
+ const submit = (e) => {
+ e.preventDefault();
+ props.onChange(data);
+ setEditing(false);
+ };
+
+ return (
+ <td>
+ <Form onSubmit={submit}>
+ <Form.Control value={data} onChange={(e) => setData(e.target.value)} />
+ </Form>
+ </td>
+ );
+}
+
+export default EditableCell;
diff --git a/src/ProductList.js b/src/ProductList.js
index 015cd35..3d60ec4 100644
--- a/src/ProductList.js
+++ b/src/ProductList.js
@@ -1,24 +1,88 @@
import React from "react";
-import { Table } from "react-bootstrap";
+import { Table, Alert } from "react-bootstrap";
import Fetcher from "./Fetcher";
+import EditableCell from "./EditableCell";
+import AuthContext from "./AuthContext";
import { printMoney } from "./util";
class ProductList extends React.Component {
+ static contextType = AuthContext;
+
constructor(props) {
super(props);
this.state = {
products: [],
+ error: null,
};
}
+ update(row, key, value) {
+ this.setState({ error: null });
+
+ let products = this.state.products;
+ const code = products[row].code;
+
+ switch (key) {
+ case "code":
+ case "stock":
+ value = parseInt(value);
+ break;
+ case "price":
+ value = value * 100;
+ break;
+ }
+ products[row][key] = value;
+ this.setState({ products });
+
+ const body = JSON.stringify(products[row]);
+
+ fetch("/api/product/" + code, {
+ headers: { "x-authentication": this.context.token },
+ method: "PUT",
+ body,
+ }).then((response) => {
+ if (!response.ok) {
+ this.setState({
+ error: response.status.toString() + " " + response.statusText,
+ });
+ }
+ });
+ }
+
render() {
- const entries = this.state.products.map((product) => {
+ let alert = null;
+ if (this.state.error !== null) {
+ alert = (
+ <Alert variant="danger">
+ Ha ocurrido un error enviando cambios: {this.state.error}
+ </Alert>
+ );
+ }
+
+ const isAdmin = this.context.role !== "admin";
+ const entries = this.state.products.map((product, row) => {
return (
<tr key={product.code}>
- <td>{product.code}</td>
- <td>{product.name}</td>
- <td>{printMoney(product.price)}</td>
- <td>{product.stock}</td>
+ <EditableCell
+ onChange={(v) => this.update(row, "code", v)}
+ value={product.code}
+ ro={isAdmin}
+ />
+ <EditableCell
+ onChange={(v) => this.update(row, "name", v)}
+ value={product.name}
+ ro={isAdmin}
+ />
+ <EditableCell
+ onChange={(v) => this.update(row, "price", v)}
+ value={printMoney(product.price)}
+ ro={isAdmin}
+ />
+ <EditableCell
+ onChange={(v) => this.update(row, "stock", v)}
+ value={product.stock}
+ ro={isAdmin}
+ />
</tr>
);
});
@@ -28,6 +92,7 @@ class ProductList extends React.Component {
url="/api/product"
onFetch={(products) => this.setState({ products })}
>
+ {alert}
<Table striped bordered hover>
<thead>
<tr>
--
GitLab