Edits + better layout

2021-03-18 17:41:10 +01:00
parent b16d70314b
commit 3afe7cb5d4
20 changed files with 1066 additions and 241 deletions
--- a/src/components/groceryComponents/StorageList.js
+++ b/src/components/groceryComponents/StorageList.js
@@ -0,0 +1,114 @@
+import React, { useState } from 'react';
+import { StyleSheet, TouchableOpacity, View, Text } from 'react-native';
+
+//components
+import ListedStorageItem from './ListedStorageItem';
+//themes
+import { COLORS } from '../../themes/Colors';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+//redux
+import { useSelector, useDispatch } from 'react-redux';
+export default StorageList = (props) => {
+    const products = useSelector(state => state.products)
+    const storageFiltered = useSelector(state => state.storage.filter((item) => products.find((product) => product.id === item.id).tag === props.tag))
+    const tag = useSelector(state => state.tags.find((tag) => tag.tagName === props.tag))
+
+    const [visible, setVisible] = useState(false);
+
+    if (storageFiltered.length !== 0) {
+        return(
+            <View style={styles.container}>
+                <TouchableOpacity style={[styles.categoryButton]}
+                    onPress={() => setVisible(!visible)}>
+                    {visible ?
+                        <MaterialCommunityIcons name="menu-down" color={COLORS.textW3} size={28} />
+                        : <MaterialCommunityIcons name="menu-right" color={COLORS.textW3} size={28} />
+                    }
+                    <Text style={[styles.textItem, { color: tag.color + 'aa' }]}>{props.tag}</Text>
+                </TouchableOpacity>
+                <View style={[styles.list]}>
+                    {visible ? storageFiltered.map((storageItem, index) => {
+                        const product = products.find((product) => product.id === storageItem.id)
+                        return <ListedStorageItem key={index} product = {product} storageItem = {storageItem} tag = {tag}/>
+                    }) : <View />}
+                </View>
+            </View>
+        )
+    }
+    else {
+        return <View />
+    }
+}
+const height = 30;
+const styles = StyleSheet.create({
+    container: {
+        marginBottom: 5,
+    },
+    list: {
+        alignItems: 'flex-end',
+    },
+    categoryButton: {
+        flex: 1,
+        paddingLeft: 0,
+        paddingRight: 8,
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        justifyContent: 'space-between',
+    },
+    listedItem: {
+        borderTopLeftRadius: 15,
+        borderBottomLeftRadius: 15,
+        width: '90%',
+        paddingLeft: 8,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginTop: 2,
+        marginBottom: 2,
+    },
+    textItem: {
+        flex: 1,
+        left: 8,
+        fontFamily: 'Roboto',
+        fontSize: height * 0.65,
+        color: COLORS.textW0 + 'bb',
+    },
+    textAmount: {
+        width: '10%',
+        backgroundColor: '#ffffff' + '10',
+        paddingLeft: 3,
+        borderRadius: 6,
+
+        marginRight: 3,
+        fontFamily: 'Roboto',
+        fontSize: height * 0.6,
+        color: COLORS.textW1,
+    },
+    amountButtons: {
+        flexDirection: 'row',
+        marginTop: 3,
+        marginBottom: 3,
+        borderTopLeftRadius: 10,
+        borderBottomLeftRadius: 10,
+        height: 25,
+        width: 70,
+        alignItems: 'center',
+        alignSelf: 'flex-start',
+        justifyContent: 'space-evenly',
+
+        backgroundColor: '#ffffff' + '10',
+    },
+    amountIncrement: {
+    },
+    amountDecrement: {
+    },
+    deleteItem: {
+        height: 27,
+        width: 27,
+        backgroundColor: '#ffffff' + '10',
+        borderRadius: 12.5,
+        marginLeft: 5,
+        justifyContent: 'center',
+        alignItems: 'center',
+    }
+})