remake app ohome setup /notworking

2021-10-24 22:18:31 +02:00
parent 4568076445
commit 55c6704d1b
76 changed files with 22173 additions and 749 deletions
--- a/src/components/modals/groceries/ModalAddItem.js
+++ b/src/components/modals/groceries/ModalAddItem.js
@@ -0,0 +1,141 @@
+import React, { useState } from 'react'
+//components
+import Dropdown, { QtDropdown } from '../../Dropdown'
+
+//styles
+import {
+    StyledModal, ModalHeader, WrapperInput, WrapperDropdown, WrapperButtons, VerticalSeperator, Input, Button, IconWrong, IconCheck, InputSmall
+} from '../styles/modal'
+import { IconProduct, IconAmount, IconPerson, IconDetails } from './styles/addItem'
+import { IconTag, IconDollar } from './styles/addProduct'
+//redux
+import { useDispatch, useSelector } from 'react-redux';
+import { itemAdded } from '../../../redux/slices/groceryList/itemsSlice';
+
+const ModalAddItem = (props) => {
+    const dispatch = useDispatch()
+    const products = useSelector(state => state.products.entities)
+    const tags = useSelector(state => state.tags.entities)
+    const lists = useSelector(state => state.lists.entities)
+
+    const [productName, setProductName] = useState('');
+    const [amount, setAmount] = useState('');
+    const [qt, setQt] = useState('')
+    const [person, setPerson] = useState('');
+    const [details, setDetails] = useState('');
+    const [tag, setTag] = useState('');
+    const [price, setPrice] = useState('');
+
+    const [focusedProduct, setFocusedProduct] = React.useState(false)
+    const [focusedQt, setFocusedQt] = React.useState(false)
+    const [focusedTag, setFocusedTag] = React.useState(false)
+
+    const handleSubmit = () => {
+        if (props.visible && productName !== '') {
+            let amountObj = {
+                am: amount ? Number(amount) : 1,
+                qt: qt
+            }
+            console.log(amountObj)
+            let listId = lists.find((list) => list.open === true)._id
+            if (tags.find(t => t.tagName === tag)) {
+                dispatch(itemAdded({ productName, amount: amountObj, person, details, tag, price, listId }));
+            }
+            else {
+                dispatch(itemAdded({ productName, amount: amountObj, person, details, tag: 'uncategorized', price, listId }));
+            }
+            setProductName('');
+            setAmount('');
+            setQt('');
+            setPerson('');
+            setDetails('');
+            setTag('');
+            setPrice('');
+            props.closeModal();
+        }
+        else {
+            alert('Fill in a valid product name');
+        }
+    }
+
+    const handleDropdownPress = (pName) => {
+        let product = products.find((product) => product.productName === pName);
+        setProductName(product.productName)
+        setTag(product.tag)
+        setPrice(product.price)
+    }
+    return (
+        <StyledModal show={props.visible} centered={true} onHide={props.closeModal} animation={false}>
+            <ModalHeader>Add product</ModalHeader>
+            {/* {product && product.image && <Image src={product.image} />} */}
+            <WrapperInput>
+                <IconProduct />
+                <Input onFocus={() => setFocusedProduct(true)} onBlur={() => { setTimeout(() => { setFocusedProduct(false) }, 100) }}
+                    type="text"
+                    value={productName}
+                    onChange={(text) => setProductName(text.target.value)}
+                    placeholder="Product name" />
+                {productName ? <IconCheck /> : <IconWrong />}
+            </WrapperInput>
+            {focusedProduct && <WrapperDropdown>
+                <Dropdown array={products.map(product => product.productName)} text={productName} setElement={handleDropdownPress} />
+            </WrapperDropdown>}
+            <WrapperInput>
+                <IconAmount />
+                <Input style={{ width: '69%' }}
+                    type="number"
+                    value={amount}
+                    onChange={(text) => setAmount(text.target.value)}
+                    placeholder="Amount" />
+                {amount ? <IconCheck /> : <IconWrong />}
+                <InputSmall style={{ marginLeft: "1%", width: '10%' }}
+                    onFocus={() => setFocusedQt(true)} onBlur={() => { setTimeout(() => { setFocusedQt(false) }, 100) }}
+                    type="text"
+                    value={qt}
+                    onChange={(text) => setQt(text.target.value)}
+                    placeholder="Qt." />
+            </WrapperInput>
+            {focusedQt && <WrapperDropdown style={{ marginLeft: "60%"}}>
+                <QtDropdown  text={qt} setElement={setQt} />
+            </WrapperDropdown>}
+            <WrapperInput>
+                <IconPerson />
+                <Input type="text"
+                    value={person}
+                    onChange={(text) => setPerson(text.target.value)}
+                    placeholder="For" />
+            </WrapperInput>
+            <WrapperInput>
+                <IconDetails />
+                <Input type="text"
+                    value={details}
+                    onChange={(text) => setDetails(text.target.value)}
+                    placeholder="Additional details" />
+            </WrapperInput>
+            <WrapperInput>
+                <IconTag />
+                <Input type="text"
+                    onFocus={() => setFocusedTag(true)} onBlur={() => { setTimeout(() => { setFocusedTag(false) }, 100) }}
+                    value={tag}
+                    onChange={(text) => setTag(text.target.value)}
+                    placeholder="Tag" />
+            </WrapperInput>
+            {focusedTag && <WrapperDropdown>
+                <Dropdown array={tags.map(tag => tag.tagName)} text={tag} setElement={setTag} />
+            </WrapperDropdown>}
+            <WrapperInput>
+                <IconDollar />
+                <Input type="text"
+                    value={price}
+                    onChange={(text) => setPrice(text.target.value)}
+                    placeholder="Price" />
+            </WrapperInput>
+            <WrapperButtons>
+                <Button onClick={props.closeModal}>Close</Button>
+                <VerticalSeperator />
+                <Button onClick={() => handleSubmit()}>Add Item</Button>
+            </WrapperButtons>
+        </StyledModal >
+    )
+}
+export default ModalAddItem