add AddReceipt subscreens

bk_webapp/package-lock.json

@@ -8107,11 +8107,6 @@
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
       "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA=="
     },
-    "jslib-html5-camera-photo": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/jslib-html5-camera-photo/-/jslib-html5-camera-photo-3.1.3.tgz",
-      "integrity": "sha512-8vJwX0a6o82+AJur7KntGvGLYhfxN5h7HRNd77zuoLOi3/Rd+5L47gL9MwTHdtWu3J3VC3a3MuC4KiW8l8HXzA=="
-    },
     "json-parse-better-errors": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
@@ -8803,6 +8798,11 @@
         }
       }
     },
+    "moment": {
+      "version": "2.24.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
+      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -11083,14 +11083,6 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.4.tgz",
       "integrity": "sha512-ueZzLmHltszTshDMwyfELDq8zOA803wQ1ZuzCccXa1m57k1PxSHfflPD5W9YIiTXLs0JTLzoj6o1LuM5N6zzNA=="
     },
-    "react-html5-camera-photo": {
-      "version": "1.5.4",
-      "resolved": "https://registry.npmjs.org/react-html5-camera-photo/-/react-html5-camera-photo-1.5.4.tgz",
-      "integrity": "sha512-uourTihaJQjqfqyE/Za/SV5DcUzvxOR7Rc85CyxuB+I7p1QpE84VDKyNkr+GweJ2KkbOvWLJ5gZrenRoXLA78g==",
-      "requires": {
-        "jslib-html5-camera-photo": "3.1.3"
-      }
-    },
     "react-is": {
       "version": "16.12.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz",
@@ -11835,6 +11827,17 @@
         "node-forge": "0.9.0"
       }
     },
+    "semantic-ui-calendar-react": {
+      "version": "0.15.3",
+      "resolved": "https://registry.npmjs.org/semantic-ui-calendar-react/-/semantic-ui-calendar-react-0.15.3.tgz",
+      "integrity": "sha512-cXlg/dJf0z/dydnol1GCy9ssccXBAGYhmka9W2KNXqqW+B0mgPhu6ugWOjGD4i99e3dnNl1QVqYvQpQcpkcEIg==",
+      "requires": {
+        "keyboard-key": "^1.0.2",
+        "lodash": "^4.17.15",
+        "moment": "^2.22.2",
+        "prop-types": "^15.6.2"
+      }
+    },
     "semantic-ui-react": {
       "version": "0.88.2",
       "resolved": "https://registry.npmjs.org/semantic-ui-react/-/semantic-ui-react-0.88.2.tgz",

bk_webapp/package.json

@@ -9,10 +9,10 @@
     "axios": "^0.19.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "react-html5-camera-photo": "^1.5.4",
     "react-minimal-pie-chart": "^6.0.1",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.3.0",
+    "semantic-ui-calendar-react": "^0.15.3",
     "semantic-ui-react": "^0.88.2"
   },
   "scripts": {

bk_webapp/src/screens/AddReceipt/AddReceipt.jsx

@@ -1,102 +1,27 @@
 import React, { useState } from "react";
-import { Button, Container, Icon, Menu } from "semantic-ui-react";
+import {
-import { useHistory } from "react-router-dom";
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  useRouteMatch
+} from "react-router-dom";
 
-import { fake_product } from "../../utils/gen_fake_data";
+import { AddMetadata, ProductsList } from "./subscreens";
-import { ProductTile, ModalConfirm } from "./components";
-import { AddMetadata, ProductsList, TakePhoto } from "./subscreens";
 import "./AddReceipt.css";
 
 function AddReceipt() {
-  const [products, setProducts] = useState([]);
+  const match = useRouteMatch();
-  const [confirmModalOpen, setConfirmModalOpen] = useState(false);
+  console.log(match.url);
-  const history = useHistory();
-
-  const addItem = item => {
-    setProducts([...products, item]);
-  };
-
-  const removeItem = index => {
-    const new_products = [...products];
-    new_products.splice(index, 1);
-    setProducts([...new_products]);
-  };
-
-  const openConfirmModal = () => {
-    setConfirmModalOpen(true);
-  };
-  const closeConfirmModal = () => {
-    setConfirmModalOpen(false);
-  };
-
-  const handleConfirm = () => {
-    history.push("/home");
-  };
-
   return (
-    <div className="site-wrapper">
+    <Switch>
-      <Menu icon className="nav-menu">
+      <Route path={`${match.url}/list`}>
-        <Menu.Item onClick={() => history.push("/home")}>
+        <ProductsList />
-          <Icon name="arrow left" />
+      </Route>
-        </Menu.Item>
+      <Route path={`${match.url}`}>
-      </Menu>
+        <AddMetadata />
-      <div className="add_receipt-container">
+      </Route>
-        <Container className="products-list-container">
+    </Switch>
-          {products.map((product, index) => (
-            <ProductTile
-              text="keh"
-              key={index}
-              number={index + 1}
-              name={product.name}
-              price={product.price}
-              onRemove={() => {
-                removeItem(index);
-              }}
-            />
-          ))}
-        </Container>
-        <Container textAlign="right">
-          Razem: {products.length > 0 ? sum_products_prices(products) : "-"}
-          zł
-        </Container>
-        <Button
-          fluid
-          icon
-          color="green"
-          onClick={() => {
-            addItem(fake_product());
-          }}
-          className="add-product-btn"
-        >
-          <Icon name="plus" />
-          Dodaj produkt
-        </Button>
-        {products.length > 0 && (
-          <Button
-            fluid
-            icon
-            color="olive"
-            onClick={openConfirmModal}
-            className="add-product-btn"
-          >
-            <Icon name="upload" />
-            Dodaj paragon
-          </Button>
-        )}
-      </div>
-      <ModalConfirm
-        open={confirmModalOpen}
-        onClose={closeConfirmModal}
-        onConfirm={handleConfirm}
-      />
-    </div>
   );
 }
 
-function sum_products_prices(products) {
-  let sum = 0;
-  products.forEach(prod => (sum += prod.price));
-  return sum;
-}
-
 export default AddReceipt;

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

@@ -1,2 +1,6 @@
+.site-wrapper {
+  height: 100%;
+}
+
 .add_metadata {
 }

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

@@ -1,12 +1,89 @@
-import React from "react";
+import React, { useRef, useState } from "react";
-import { Button } from "semantic-ui-react";
+import {
+  Button,
+  Container,
+  Image,
+  Icon,
+  Menu,
+  Search,
+  Input
+} from "semantic-ui-react";
+import { DateInput } from "semantic-ui-calendar-react";
+import { useHistory } from "react-router-dom";
 
 import "./AddMetadata.css";
 
 function AddMetadata() {
+  const history = useHistory();
+  const fileInputRef = useRef(null);
+  const [selectedFile, setSelectedFile] = useState(null);
+  const [pickedDate, setPickedDate] = useState("");
+
+  const uploadPhoto = event => {
+    console.log(event.target.files[0]);
+    setSelectedFile(URL.createObjectURL(event.target.files[0]));
+  };
+
+  const handleDateChange = (event, { name, value }) => {
+    setPickedDate(value);
+  };
   return (
-    <div className="add_metadata">
+    <div className="site-wrapper">
-      <h2> AddMetadata screen </h2>
+      <Menu icon className="nav-menu">
+        <Menu.Item onClick={() => history.push("/home")}>
+          <Icon name="arrow left" />
+        </Menu.Item>
+      </Menu>
+      <div className="add_metadata">
+        <Container>
+          <DateInput
+            fluid
+            name="date"
+            placeholder="Data zakupu"
+            value={pickedDate}
+            onChange={handleDateChange}
+          />
+          <Input fluid list="languages" placeholder="Choose language..." />
+          <datalist id="languages">
+            <option value="English" />
+            <option value="Chinese" />
+            <option value="Dutch" />
+          </datalist>
+        </Container>
+        <input
+          type="file"
+          hidden
+          id="mypic"
+          accept="image/*"
+          ref={fileInputRef}
+          onChange={stuff => {
+            uploadPhoto(stuff);
+          }}
+        />
+        <Button
+          fluid
+          icon
+          color="orange"
+          onClick={() => fileInputRef.current.click()}
+          className="add-product-btn"
+        >
+          <Icon name="camera" />
+          Dodaj zdjęcie
+        </Button>
+        <Button
+          fluid
+          icon
+          color="olive"
+          onClick={() => {
+            history.push("/home/add_receipt/list", { shop: "Biedronka" });
+          }}
+          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.css

@@ -1,2 +1,27 @@
-.products_list {
+.site-wrapper {
+  height: 100%;
+}
+
+.add_receipt-container {
+  height: 85%;
+}
+
+.nav-menu {
+  /* height: 10%; */
+}
+
+.products-list-container {
+  background-color: rgba(0, 0, 0, 0.4);
+  /* opacity: 0.2; */
+  height: 80%;
+  width: 100%;
+  overflow: scroll;
+}
+
+.add-product-btn {
+  margin-bottom: 2rem !important;
+  /* margin-right: 1rem !important; */
+}
+
+.sum-container {
 }

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

@@ -1,14 +1,103 @@
-import React from "react";
+import React, { useState } from "react";
-import { Button } from "semantic-ui-react";
+import { Button, Container, Icon, Menu } from "semantic-ui-react";
+import { useHistory } from "react-router-dom";
 
+import { fake_product } from "../../../../utils/gen_fake_data";
+import { ProductTile, ModalConfirm } from "../../components";
 import "./ProductsList.css";
 
 function ProductsList() {
+  const [products, setProducts] = useState([]);
+  const [confirmModalOpen, setConfirmModalOpen] = useState(false);
+  const history = useHistory();
+
+  console.log(history.location.state);
+
+  const addItem = item => {
+    setProducts([...products, item]);
+  };
+
+  const removeItem = index => {
+    const new_products = [...products];
+    new_products.splice(index, 1);
+    setProducts([...new_products]);
+  };
+
+  const openConfirmModal = () => {
+    setConfirmModalOpen(true);
+  };
+  const closeConfirmModal = () => {
+    setConfirmModalOpen(false);
+  };
+
+  const handleConfirm = () => {
+    history.push("/home");
+  };
+
   return (
-    <div className="products_list">
+    <div className="site-wrapper">
-      <h1> ProductsList screen </h1>
+      <Menu icon className="nav-menu">
+        <Menu.Item onClick={() => history.push("/home")}>
+          <Icon name="arrow left" />
+        </Menu.Item>
+      </Menu>
+      <div className="add_receipt-container">
+        <Container className="products-list-container">
+          {products.map((product, index) => (
+            <ProductTile
+              text="keh"
+              key={index}
+              number={index + 1}
+              name={product.name}
+              price={product.price}
+              onRemove={() => {
+                removeItem(index);
+              }}
+            />
+          ))}
+        </Container>
+        <Container textAlign="right">
+          Razem: {products.length > 0 ? sum_products_prices(products) : "-"}
+          zł
+        </Container>
+        <Button
+          fluid
+          icon
+          color="green"
+          onClick={() => {
+            addItem(fake_product());
+          }}
+          className="add-product-btn"
+        >
+          <Icon name="plus" />
+          Dodaj produkt
+        </Button>
+        {products.length > 0 && (
+          <Button
+            fluid
+            icon
+            color="olive"
+            onClick={openConfirmModal}
+            className="add-product-btn"
+          >
+            <Icon name="upload" />
+            Dodaj paragon
+          </Button>
+        )}
+      </div>
+      <ModalConfirm
+        open={confirmModalOpen}
+        onClose={closeConfirmModal}
+        onConfirm={handleConfirm}
+      />
     </div>
   );
 }
 
+function sum_products_prices(products) {
+  let sum = 0;
+  products.forEach(prod => (sum += prod.price));
+  return sum;
+}
+
 export default ProductsList;

bk_webapp/src/screens/AddReceipt/subscreens/TakePhoto/TakePhoto.css

@@ -1,2 +0,0 @@
-.take_photo {
-}

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

@@ -1,41 +0,0 @@
-import React, { useState } from "react";
-import { useHistory } from "react-router-dom";
-import Camera, { IMAGE_TYPES } from "react-html5-camera-photo";
-import { Dimmer, Loader } from "semantic-ui-react";
-
-import "react-html5-camera-photo/build/css/index.css";
-import "./TakePhoto.css";
-
-function TakePhoto() {
-  const history = useHistory();
-  const [waitingForResponse, setWaitingForResponse] = useState(false);
-
-  const handleTakePhoto = dataUri => {
-    const afterResponse = () => {
-      history.push("/add_receipt/list");
-    };
-    setWaitingForResponse(true);
-    //simulate API response time
-    const timeout = setTimeout(afterResponse, 2000);
-  };
-
-  return (
-    <div className="take_photo">
-      {waitingForResponse ? (
-        <Dimmer active>
-          <Loader size="huge">Loading</Loader>
-        </Dimmer>
-      ) : (
-        <Camera
-          onTakePhoto={dataUri => {
-            handleTakePhoto(dataUri);
-          }}
-          imageType={IMAGE_TYPES.JPG}
-          idealResolution={{ width: 640, height: 480 }}
-        />
-      )}
-    </div>
-  );
-}
-
-export default TakePhoto;

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

@@ -1,5 +1,4 @@
 import AddMetadata from "./AddMetadata/AddMetadata";
 import ProductsList from "./ProductsList/ProductsList";
-import TakePhoto from "./TakePhoto/TakePhoto";
 
-export { AddMetadata, ProductsList, TakePhoto };
+export { AddMetadata, ProductsList };