add receipt

bk_webapp/src/config.js

@@ -1,3 +1,3 @@
 export default {
-  api_url: "http://api.localhost.pl"
+  api_url: "http://127.0.0.1:8000"
 };

bk_webapp/src/screens/AddReceipt/components/ProductTile/ProductTile.jsx

@@ -10,7 +10,8 @@ function ProductTile(props) {
     <div
       className="product_tile-container"
       onClick={() => {
-        setClicked(!clicked);
+        // setClicked(!clicked);
+        props.onClick();
       }}
     >
       <div className="tile-number">

bk_webapp/src/screens/AddReceipt/components/index.js

@@ -1,4 +1,5 @@
 import ProductTile from "./ProductTile/ProductTile";
 import ModalConfirm from "./ModalConfirm/ModalConfirm";
+import ModalProduct from "./ModalProduct/ModalProduct";
 
-export { ProductTile, ModalConfirm };
+export { ProductTile, ModalConfirm, ModalProduct };

bk_webapp/src/screens/AddReceipt/subscreens/AddMetadata/AddMetadata.jsx

@@ -26,6 +26,7 @@ function AddMetadata() {
   const [shops, setShops] = useState([]);
   const [shopsLoading, setShopsLoading] = useState(true);
   const [globalState, globalActions] = useGlobal();
+  const [pickedShop, changePickedShop] = useState("");
 
   const uploadPhoto = event => {
     setSelectedFile(URL.createObjectURL(event.target.files[0]));
@@ -59,6 +60,11 @@ function AddMetadata() {
   const handleDateChange = (event, { name, value }) => {
     setPickedDate(value);
   };
+
+  const handleShopChange = event => {
+    console.log(event.target.value);
+    changePickedShop(event.target.value);
+  };
   return (
     <div className="site-wrapper">
       <Menu icon className="nav-menu">
@@ -80,7 +86,12 @@ function AddMetadata() {
             value={pickedDate}
             onChange={handleDateChange}
           />
-          <Input fluid list="shops" placeholder="Wybierz sklep..." />
+          <Input
+            onChange={handleShopChange}
+            fluid
+            list="shops"
+            placeholder="Wybierz sklep..."
+          />
           <datalist id="shops">
             {shops.map((shop, index) => (
               <option key={index} value={shop.name} />
@@ -107,18 +118,23 @@ function AddMetadata() {
           <Icon name="camera" />
           Dodaj zdjęcie
         </Button>
+        {pickedDate !== "" && pickedShop !== "" && (
           <Button
             fluid
             icon
             color="olive"
             onClick={() => {
-            history.push("/home/add_receipt/list", { shop: "Biedronka" });
+              history.push("/home/add_receipt/list", {
+                shop: pickedShop,
+                date: pickedDate
+              });
             }}
             className="add-product-btn"
           >
             <Icon name="arrow right" />
             Dalej
           </Button>
+        )}
         {selectedFile && <Image centered src={selectedFile} size="small" />}
       </div>
     </div>

bk_webapp/src/screens/AddReceipt/subscreens/ProductsList/ProductsList.jsx

@@ -2,27 +2,63 @@ import React, { useState } from "react";
 import { Button, Container, Icon, Menu } from "semantic-ui-react";
 import { useHistory } from "react-router-dom";
 
+import axios from "axios";
+
 import { fake_product } from "../../../../utils/gen_fake_data";
-import { ProductTile, ModalConfirm } from "../../components";
+import config from "../../../../config";
+import useGlobal from "../../../../utils/global_state";
+import { ProductTile, ModalConfirm, ModalProduct } from "../../components";
 import "./ProductsList.css";
 
 function ProductsList() {
   const [products, setProducts] = useState([]);
   const [confirmModalOpen, setConfirmModalOpen] = useState(false);
+  const [productModalOpen, setProductModalOpen] = useState(false);
+  const [globalState, globalActions] = useGlobal();
+
+  // none, edit, add
+  const [productModalMode, setProductModalMode] = useState("none");
+  const [pickedProduct, setPickedProduct] = useState(-1);
   const history = useHistory();
 
-  console.log(history.location.state);
+  const meta_info = history.location.state;
 
   const addItem = item => {
     setProducts([...products, item]);
   };
 
+  const updateItem = (item, index) => {
+    console.log(`Update item ${index} to ${item.name} ${item.price}`);
+    products[index] = item;
+  };
+
   const removeItem = index => {
     const new_products = [...products];
     new_products.splice(index, 1);
     setProducts([...new_products]);
   };
 
+  const openProductModal = (mode, picked_index = -1) => {
+    setPickedProduct(picked_index);
+    setProductModalMode(mode);
+    setProductModalOpen(true);
+  };
+
+  const closeProductModal = () => {
+    setProductModalMode("none");
+    setProductModalOpen(false);
+  };
+
+  const handleConfirmProduct = (item, is_in_edit_mode) => {
+    if (is_in_edit_mode) {
+      updateItem(item, pickedProduct);
+    } else {
+      console.log("add new product!", item);
+      addItem(item);
+    }
+    setProductModalOpen(false);
+  };
+
   const openConfirmModal = () => {
     setConfirmModalOpen(true);
   };
@@ -31,7 +67,23 @@ function ProductsList() {
   };
 
   const handleConfirm = () => {
+    const new_receipt = {
+      date: meta_info.date,
+      shop: { name: meta_info.shop, tags: [] },
+      products
+    };
+    console.log(new_receipt);
+    axios
+      .post(`${config.api_url}/api/receipts/`, new_receipt, {
+        headers: { Authorization: `Token ${globalState.auth_token}` }
+      })
+      .then(resp => {
+        console.log(resp);
         history.push("/home");
+      })
+      .catch(err => {
+        console.log(err);
+      });
   };
 
   return (
@@ -50,6 +102,9 @@ function ProductsList() {
               number={index + 1}
               name={product.name}
               price={product.price}
+              onClick={() => {
+                openProductModal("edit", index);
+              }}
               onRemove={() => {
                 removeItem(index);
               }}
@@ -65,7 +120,8 @@ function ProductsList() {
           icon
           color="green"
           onClick={() => {
-            addItem(fake_product());
+            // addItem(fake_product());
+            openProductModal("add", -1);
           }}
           className="add-product-btn"
         >
@@ -90,6 +146,19 @@ function ProductsList() {
         onClose={closeConfirmModal}
         onConfirm={handleConfirm}
       />
+
+      <ModalProduct
+        open={productModalOpen}
+        onClose={closeProductModal}
+        onConfirm={handleConfirmProduct}
+        edit_mode={productModalMode === "edit"}
+        item={pickedProduct === -1 ? {} : products[pickedProduct]}
+        onRemove={() => {
+          setPickedProduct(-1);
+          closeProductModal();
+          removeItem(pickedProduct);
+        }}
+      />
     </div>
   );
 }
@@ -97,6 +166,7 @@ function ProductsList() {
 function sum_products_prices(products) {
   let sum = 0;
   products.forEach(prod => (sum += prod.price));
+  sum.toFixed(2);
   return sum;
 }
 

bk_webapp/src/screens/Login/Login.jsx

@@ -41,7 +41,7 @@ function Login() {
                 fluid
                 icon="user"
                 iconPosition="left"
-                placeholder="Nawa użytkownika"
+                placeholder="Nazwa użytkownika"
                 onChange={e => {
                   setUsername(e.target.value);
                 }}