diff --git a/src/ProductList.js b/src/ProductList.js index 3d60ec466bb585e9d836f77381ef76ad78c66ea4..c706574f3e7b5a455bca909851b868dbe1447b8a 100644 --- a/src/ProductList.js +++ b/src/ProductList.js @@ -1,5 +1,5 @@ import React from "react"; -import { Table, Alert } from "react-bootstrap"; +import { Table, Button, Alert } from "react-bootstrap"; import Fetcher from "./Fetcher"; import EditableCell from "./EditableCell"; import AuthContext from "./AuthContext"; @@ -49,6 +49,24 @@ class ProductList extends React.Component { }); } + delProduct(code) { + let products = this.state.products; + const index = products.findIndex((p) => p.code === code); + products.splice(index, 1); + this.setState({ products }); + + fetch("/api/product/" + code, { + headers: { "x-authentication": this.context.token }, + method: "DELETE", + }).then((response) => { + if (!response.ok) { + this.setState({ + error: response.status.toString() + " " + response.statusText, + }); + } + }); + } + render() { let alert = null; if (this.state.error !== null) { @@ -59,30 +77,40 @@ class ProductList extends React.Component { ); } - const isAdmin = this.context.role !== "admin"; + const isAdmin = this.context.role === "admin"; const entries = this.state.products.map((product, row) => { return ( <tr key={product.code}> <EditableCell onChange={(v) => this.update(row, "code", v)} value={product.code} - ro={isAdmin} + ro={!isAdmin} /> <EditableCell onChange={(v) => this.update(row, "name", v)} value={product.name} - ro={isAdmin} + ro={!isAdmin} /> <EditableCell onChange={(v) => this.update(row, "price", v)} value={printMoney(product.price)} - ro={isAdmin} + ro={!isAdmin} /> <EditableCell onChange={(v) => this.update(row, "stock", v)} value={product.stock} - ro={isAdmin} + ro={!isAdmin} /> + {isAdmin && ( + <td sm={1}> + <Button + variant="danger" + onClick={() => this.delProduct(product.code)} + > + - + </Button> + </td> + )} </tr> ); }); @@ -100,6 +128,7 @@ class ProductList extends React.Component { <th>Nombre</th> <th>Precio</th> <th>Existencias</th> + {isAdmin && <th sm={1}></th>} </tr> </thead> <tbody>{entries}</tbody>