Edit price when creating order

src/PriceEditor.js

@@ -30,25 +30,25 @@ function str2price(str) {
   return parseInt(value[0]) * 100 + cents;
 }
 
-function PriceEditor(props) {
-  const [value, setValue] = useState("0,00");
-  const [invalid, setInvalid] = useState(false);
-
-  if (!isNaN(props.value) && str2price(value) !== props.value) {
-    let centStr = (props.value % 100).toString();
+function price2str(price) {
+  let centStr = (price % 100).toString();
   if (centStr.length === 1) {
     centStr = "0" + centStr;
   }
-    setValue(Math.floor(props.value / 100) + "," + centStr);
+  return Math.floor(price / 100) + "," + centStr;
 }
 
+function PriceEditor(props) {
+  const [value, setValue] = useState(price2str(props.value));
+
   const change = (e) => {
     setValue(e.target.value);
     const price = str2price(e.target.value);
     props.onChange(price);
-    setInvalid(isNaN(price));
   };
 
+  const invalid = isNaN(props.value);
+
   return <Form.Control value={value} onChange={change} isInvalid={invalid} />;
 }
 

src/ProductPicker.js

@@ -3,6 +3,7 @@ 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";
 
 class ProductPicker extends React.Component {
   constructor(props) {
@@ -25,6 +26,12 @@ class ProductPicker extends React.Component {
     this.props.setPicks(picks);
   }
 
+  setPrice(index, price) {
+    let picks = this.props.picks;
+    picks[index].price = price;
+    this.props.setPicks(picks);
+  }
+
   setCode(codeStr) {
     const code = parseInt(codeStr);
     const product = this.state.products.find((p) => p.code === code);
@@ -69,7 +76,16 @@ class ProductPicker extends React.Component {
           <Col xs={4}>
             <p>{p.name}</p>
           </Col>
-          <Col>{printMoney(p.price) + "€"}</Col>
+          <Col>
+            {this.props.price ? (
+              <PriceEditor
+                value={p.price}
+                onChange={(price) => this.setPrice(i, price)}
+              />
+            ) : (
+              printMoney(p.price) + "€"
+            )}
+          </Col>
           {this.props.amount && (
             <Col>
               <Form.Control

src/order/CreateOrder.js

@@ -45,6 +45,8 @@ function CreateOrder() {
     ? prevOrders.map((o) => <option key={o.name}>{o.name}</option>)
     : "";
 
+  const disabled = picks.find((p) => isNaN(p.price)) !== undefined;
+
   return (
     <Sender url="/api/order" body={body} onSuccess={setOrder}>
       <Form.Group as={Row}>
@@ -100,11 +102,13 @@ function CreateOrder() {
           />
         </Col>
       </Form.Group>
-      <ProductPicker picks={picks} setPicks={setPicks} />
+      <ProductPicker picks={picks} setPicks={setPicks} price />
       <Form.Group as={Row}>
         <Col>
           <div className="text-right">
-            <Button type="submit">Abrir pedido</Button>
+            <Button type="submit" disabled={disabled}>
+              Abrir pedido
+            </Button>
           </div>
         </Col>
       </Form.Group>