complete calculator escrow and profit loss UI

src/Screens/Tool/CalculatorProfitLoss/CalculatorProfitLoss.js

-import React, {Component, useState} from 'react';
-import {View, Text} from 'react-native';
+import React, {useEffect, useState} from 'react';
 import CalculatorProfitLossView from './CalculatorProfitLossView';
-import EscrowCalculatorView from '../EscrowCalculator/EscrowCalculatorView';
 import {RadioBuySale} from '../../../Config/constants';
+import I18n from '../../../helper/i18/i18n';
+import {checkFormatArray} from '../../../Config/Functions';
+import {showAlert, TYPE} from '../../../components/DropdownAlert';
+import {getTransactionListByCategory} from '../../../apis/Functions/Transaction';
+import {Platform} from 'react-native';
 
 const CalculatorProfitLoss = (props) => {
-    const [dataProduct, setDataProduct] = useState([
-        {
-            id: 0,
-            name: 'Ngô',
-        },
-        {
-            id: 1,
-            name: 'Đậu tương',
-        }]);
+    const [dataProduct, setDataProduct] = useState([]);
     const [product, setProduct] = useState(null);
     const [transactionType, setTransactionType] = useState(RadioBuySale[0].value);
-    const [dataCalculator, setDataCalculator] = useState([
-        {
-            name: 'Ngô',
-            status: 'Mua',
-            slot_number: 6,
-            profit_loss_usd: 639324325,
-            profit_loss_vnd: 1234349235455,
-        },
-        {
-            name: 'Đậu tương',
-            status: 'Bán',
-            slot_number: 6,
-            profit_loss_usd: 639324325,
-            profit_loss_vnd: 1234349235455,
-        },
-        {
+    const [dataCalculator, setDataCalculator] = useState([]);
+    const [lotTransactionNumber, setLotTransactionNumber] = useState(null);
+    const [openPrice, setOpenPrice] = useState(null);
+    const [closeStatusPrice, setCloseStatusPrice] = useState(null);
+    useEffect(() => {
+        getProductData()
+    }, [])
+
+    const getProductData = async () => {
+        const res = await getTransactionListByCategory({
+            keyword: '',
+            platform: Platform.OS,
+            page_size: 1000,
+            page_index: 1,
+            type: 'PRICE_TABLE',
+            category_id: -1,
+        });
+        if (res.status == 200 && res.data.code == 200) {
+            setDataProduct(res.data.data);
+        } else {
+            showAlert(TYPE.ERROR, I18n.t('Notification', I18n.t('Can_not_get_data')))
+        }
+    };
+
+
+    const onCalculator = () => {
+        const titles = [
+            I18n.t('Product'),
+            I18n.t('LotTransactionNumber'),
+            I18n.t('OpenPrice'),
+            I18n.t('CloseStatusPrice'),
+        ];
+        const index = checkFormatArray([
+            product,
+            lotTransactionNumber,
+            openPrice,
+            closeStatusPrice,
+        ]);
+
+        if (index === true) {
+            let newData = [...dataCalculator]
+            newData.push({
                 name: 'Bạc',
                 status: 'Mua',
                 slot_number: 6,
                 profit_loss_usd: 639324325,
                 profit_loss_vnd: 1234349235455,
-        },
-    ]);
-    const [lotTransactionNUmber, setLotTransactionNUmber] = useState(0);
-    const [openPrice, setOpenPrice] = useState(0);
-    const [closeStatusPrice, setCloseStatusPrice] = useState(0);
-
-    const onCalculator = () => {
-
+            })
+            setDataCalculator(newData)
+            setLotTransactionNumber(null)
+            setOpenPrice(null)
+            setCloseStatusPrice(null)
+        } else {
+            showAlert(TYPE.ERROR, I18n.t('Notification'), `${I18n.t('Please_fill_in')}${titles[index]}`)
+        }
     };
 
     const onDelete = () => {
-
+        setDataCalculator([])
+        setLotTransactionNumber(null)
+        setOpenPrice(null)
+        setCloseStatusPrice(null)
     };
 
-    const setLotNUmber = (text) => {
-        setLotTransactionNUmber(text.split(',').join(''));
+    const setLotNumber = (text) => {
+        setLotTransactionNumber(text.split(',').join(''));
     };
 
     const setOpenPriceEvent = (text) => {
@@ -66,12 +90,13 @@ const CalculatorProfitLoss = (props) => {
         <CalculatorProfitLossView
             dataProduct={dataProduct}
             setProduct={setProduct}
+            product={product}
             dataCalculator={dataCalculator}
             onCalculator={onCalculator}
             onDelete={onDelete}
             setTransactionType={setTransactionType}
-            setLotNUmber={setLotNUmber}
-            lotTransactionNUmber={lotTransactionNUmber}
+            setLotNumber={setLotNumber}
+            lotTransactionNumber={lotTransactionNumber}
             openPrice={openPrice}
             setOpenPrice={setOpenPriceEvent}
             closeStatusPrice={closeStatusPrice}

src/Screens/Tool/CalculatorProfitLoss/CalculatorProfitLossView.js

@@ -8,7 +8,6 @@ import R from '../../../assets/R';
 import RadioForm from 'react-native-simple-radio-button';
 import {RadioBuySale} from '../../../Config/constants';
 import TextMoney from '../../../components/Input/InputMoney';
-import ItemPrice from '../../Home/ItemPrice';
 import ItemCalculator from './ItemCalculator';
 
 const CalculatorProfitLossView = (props) => {
@@ -26,6 +25,7 @@ const CalculatorProfitLossView = (props) => {
                         onValueChange={(value, item) => {
                             props.setProduct(item);
                         }}
+                        defaultValue={props.product?.name}
                         iconSize={WIDTHXD(40)}
                         iconColor={R.colors.black}
                     />
@@ -48,15 +48,15 @@ const CalculatorProfitLossView = (props) => {
                     </View>
                     <TextMoney
                         onChangeText={(val) => {
-                        props.setLotNUmber(val)
+                            props.setLotNumber(val);
                         }}
                         title={I18n.t('LotTransactionNumber')}
-                    value={toPriceVnd(props.lotTransactionNUmber)}
+                        value={toPriceVnd(props.lotTransactionNumber)}
                         titleStyle={{marginTop: HEIGHTXD(20), fontSize: getFontXD(39)}}
                     />
                     <TextMoney
                         onChangeText={(val) => {
-                        props.setOpenPrice(val)
+                            props.setOpenPrice(val);
                         }}
                         title={I18n.t('OpenPrice')}
                         value={toPriceVnd(props.openPrice)}
@@ -64,7 +64,7 @@ const CalculatorProfitLossView = (props) => {
                     />
                     <TextMoney
                         onChangeText={(val) => {
-                        props.setCloseStatusPrice(val)
+                            props.setCloseStatusPrice(val);
                         }}
                         title={I18n.t('CloseStatusPrice')}
                         value={toPriceVnd(props.closeStatusPrice)}
@@ -78,12 +78,12 @@ const CalculatorProfitLossView = (props) => {
                         marginTop: HEIGHTXD(50),
                     }}>
                         <TouchableOpacity onPress={() => {
-                        props.onDelete()
+                            props.onDelete();
                         }} style={[styles.btn, {backgroundColor: R.colors.red2, marginRight: WIDTHXD(72)}]}>
                             <Text style={styles.txtButton}>{I18n.t('Delete')}</Text>
                         </TouchableOpacity>
                         <TouchableOpacity onPress={() => {
-                        props.onCalculator()
+                            props.onCalculator();
                         }} style={styles.btn}>
                             <Text style={styles.txtButton}>{I18n.t('Calculator')}</Text>
                         </TouchableOpacity>
@@ -93,7 +93,8 @@ const CalculatorProfitLossView = (props) => {
                     style={{paddingBottom: HEIGHTXD(15), backgroundColor: R.colors.white}}
                     keyExtractor={(item) => item.id}
                     data={props.dataCalculator}
-                renderItem={({item, index}) => <ItemCalculator item={item} isLastItem={index === props.dataCalculator.length - 1}/>}
+                    renderItem={({item, index}) => <ItemCalculator item={item}
+                                                                   isLastItem={index === props.dataCalculator.length - 1}/>}
                 />
             </ScrollView>
         </View>

src/Screens/Tool/EscrowCalculator/EscrowCalculator.js

 import React, {useEffect, useState} from 'react';
 import EscrowCalculatorView from './EscrowCalculatorView';
+import {getTransactionListByCategory} from '../../../apis/Functions/Transaction';
+import {Platform} from 'react-native';
+import {showAlert, TYPE} from '../../../components/DropdownAlert';
+import I18n from '../../../helper/i18/i18n';
 
 const EscrowCalculator = (props) => {
-    const [dataProduct, setDataProduct] = useState([
-        {
-            id: 0,
-            name: 'Ngô',
-        },
-        {
-            id: 1,
-            name: 'Đậu tương',
-        }])
-    const [product, setProduct] = useState(null)
-    const [lotNumber, setLotNumber] = useState(null)
-    const [firstEscrow, setFirstEscrow] = useState(null)
-
-    const setLotNumberEvent = (text) => {
-        setLotNumber(text.split(',').join(''));
-        setFirstEscrow(text.split(',').join(''));
+    const [dataProduct, setDataProduct] = useState([]);
+    const [listInput, setListInput] = useState([{
+        product: null,
+        lotNumber: null,
+        firstEscrow: 0,
+    }]);
+    const [firstEscrow, setFirstEscrow] = useState(null);
+    const [firstEscrowTotal, setFirstEscrowTotal] = useState(0);
+    useEffect(() => {
+        getProductData()
+    }, [])
+
+    const getProductData = async () => {
+        const res = await getTransactionListByCategory({
+            keyword: '',
+            platform: Platform.OS,
+            page_size: 1000,
+            page_index: 1,
+            type: 'PRICE_TABLE',
+            category_id: -1,
+        });
+        if (res.status == 200 && res.data.code == 200) {
+            setDataProduct(res.data.data);
+        } else {
+            showAlert(TYPE.ERROR, I18n.t('Notification', I18n.t('Can_not_get_data')))
+        }
     };
 
     const onCalculator = () => {
 
-    }
+    };
 
     const onDelete = () => {
 
-    }
-
-    const onAdd = () => {
+    };
 
+    const setItemInput = (item, index) => {
+        let data = [...listInput]
+        data[index] = item
+        setListInput(data)
+        let firstEscrowTotalTmp = 0
+        data.map((item) => {
+            if(item.firstEscrow) firstEscrowTotalTmp = firstEscrowTotalTmp + item.firstEscrow
+        })
+        setFirstEscrowTotal(firstEscrowTotalTmp)
     }
+    const onAdd = () => {
+        let data = [...listInput];
+        data.push({
+            product: null,
+            lotNumber: null,
+            firstEscrow: null,
+        });
+        setListInput(data);
+    };
 
     return (
         <EscrowCalculatorView
             dataProduct={dataProduct}
-            setProduct={setProduct}
-            lotNumber={lotNumber}
             firstEscrow={firstEscrow}
-            setLotNumber={setLotNumberEvent}
             onCalculator={onCalculator}
             onDelete={onDelete}
             onAdd={onAdd}
+            listInput={listInput}
+            firstEscrowTotal={firstEscrowTotal}
+            setItemInput={setItemInput}
+            setFirstEscrow={setFirstEscrow}
         />
     );
 };

src/Screens/Tool/EscrowCalculator/EscrowCalculatorView.js

 import React from 'react';
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import {FlatList, StyleSheet, Text, TouchableOpacity, View, ScrollView} from 'react-native';
 import HeaderBack from '../../../components/Header/HeaderBack';
-import {getFontXD, getWidth, HEIGHTXD, toPriceVnd, WIDTHXD} from '../../../Config/Functions';
+import {getFontXD, HEIGHTXD, toPriceVnd, WIDTHXD} from '../../../Config/Functions';
 import R from '../../../assets/R';
 import I18n from '../../../helper/i18/i18n';
-import PickerItem from '../../../components/Picker/PickerItem';
 import TextMoney from '../../../components/Input/InputMoney';
-import {ADDMETHODPAY} from '../../../routers/ScreenNames';
 import Icon from 'react-native-vector-icons/Entypo';
+import ItemEscrowCalculator from './ItemEscrowCalculator';
 
 const EscrowCalculatorView = (props) => {
     return (
         <View style={{flex: 1, flexDirection: 'column', backgroundColor: 'white'}}>
             <HeaderBack title={'EscrowCalculator'} isWhite={true}/>
-            <View style={styles.viewInput}>
-                <Text
-                    style={styles.textTitle}>
-                    {I18n.t('Product')}
-                </Text>
-                <PickerItem
-                    data={props.dataProduct}
-                    onValueChange={(value, item) => {
-                        props.setProduct(item);
+            <ScrollView style={{paddingVertical:HEIGHTXD(60)}}>
+            <View >
+                <FlatList
+                    keyExtractor={(item) => item.id}
+                    data={props.listInput}
+                    renderItem={({item, index}) => <ItemEscrowCalculator item={item}
+                                                                         dataProduct={props.dataProduct}
+                                                                         setProduct={(product) => {
+                                                                             item.product = product
+                                                                             props.setItemInput(item, index)
                                                                          }}
-                    iconSize={WIDTHXD(40)}
-                    iconColor={R.colors.black}
+                                                                         setLotNumber={(lotNumber) => {
+                                                                             item.lotNumber = lotNumber.split('.').join('')
+                                                                             item.firstEscrow = parseFloat(item.lotNumber)*12312
+                                                                             props.setItemInput(item, index)
+                                                                         }}/>}
                 />
-
-                <TextMoney
-                    onChangeText={(val) => {
-                        props.setLotNumber(val)
-                    }}
-                    title={I18n.t('LotTransactionNumber')}
-                    value={toPriceVnd(props.lotNumber)}
-                    titleStyle={{marginTop: HEIGHTXD(20), fontSize: getFontXD(39)}}
-                />
-                <TextMoney
-                    onChangeText={(val) => {
-                    }}
-                    title={I18n.t('FirstEscrow')}
-                    value={props.firstEscrow}
-                    titleStyle={{ontSize: getFontXD(39)}}
-                    editable={false}
-                    inputStyle={{backgroundColor: R.colors.gray7}}
-                />
-            </View>
                 <View style={{flexDirection: 'row', justifyContent: 'flex-end'}}>
                     <TouchableOpacity
                         onPress={() => {
-                        props.onAdd()
+                            props.onAdd();
                         }}
                         style={styles.containerBtn}>
                         <Icon name={'plus'} size={27} color={R.colors.white}/>
@@ -57,6 +41,7 @@ const EscrowCalculatorView = (props) => {
                 <View style={{paddingHorizontal: WIDTHXD(60)}}>
                     <TextMoney
                         onChangeText={(val) => {
+                            props.setFirstEscrow(val.split('.').join(''))
                         }}
                         title={I18n.t('FirstEscrow')}
                         value={props.firstEscrow}
@@ -68,33 +53,36 @@ const EscrowCalculatorView = (props) => {
                     <TextMoney
                         editable={false}
                         title={I18n.t('FirstEscrowTotal')}
-                    value={props.firstEscrow}
+                        value={props.firstEscrowTotal}
                         titleStyle={{marginTop: HEIGHTXD(20), fontSize: getFontXD(39)}}
                         inputStyle={{backgroundColor: R.colors.gray7}}
                     />
                     <Text style={styles.textMessage}>Bạn có thể giao dịch các hợp đồng kể trên với mức ký quỹ
                         khả dung hiện tại</Text>
                 </View>
+
                 <View style={{
                     width: '100%',
                     flexDirection: 'row',
                     justifyContent: 'center',
                     alignItems: 'center',
-                position: 'absolute',
-                bottom: HEIGHTXD(50),
+                    marginTop: HEIGHTXD(80),
+                    marginBottom: HEIGHTXD(150)
                 }}>
                     <TouchableOpacity onPress={() => {
-                    props.onDelete()
+                        props.onDelete();
                     }} style={[styles.btn, {backgroundColor: R.colors.red2, marginRight: WIDTHXD(72)}]}>
                         <Text style={styles.txtButton}>{I18n.t('Delete')}</Text>
                     </TouchableOpacity>
                     <TouchableOpacity onPress={() => {
-                    props.onCalculator()
+                        props.onCalculator();
                     }} style={styles.btn}>
                         <Text style={styles.txtButton}>{I18n.t('Calculator')}</Text>
                     </TouchableOpacity>
                 </View>
             </View>
+            </ScrollView>
+        </View>
     );
 
 };
@@ -116,7 +104,7 @@ const styles = StyleSheet.create({
     textMessage: {
         fontSize: getFontXD(39),
         color: R.colors.black,
-        marginTop: HEIGHTXD(68)
+        marginTop: HEIGHTXD(68),
     },
     containerBtn: {
         marginHorizontal: WIDTHXD(36),

src/Screens/Tool/EscrowCalculator/ItemEscrowCalculator.js

+import React from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import I18n from '../../../helper/i18/i18n';
+import PickerItem from '../../../components/Picker/PickerItem';
+import {getFontXD, HEIGHTXD, toPriceVnd, WIDTHXD} from '../../../Config/Functions';
+import R from '../../../assets/R';
+import TextMoney from '../../../components/Input/InputMoney';
+import Icon from 'react-native-vector-icons/Entypo';
+
+const ItemEscrowCalculator = (props) => {
+    return (
+        <View style={styles.viewInput}>
+            <Text
+                style={styles.textTitle}>
+                {I18n.t('Product')}
+            </Text>
+            <PickerItem
+                data={props.dataProduct}
+                onValueChange={(value, item) => {
+                    props.setProduct(item);
+                }}
+                iconSize={WIDTHXD(40)}
+                iconColor={R.colors.black}
+            />
+
+            <TextMoney
+                onChangeText={(val) => {
+                    props.setLotNumber(val);
+                }}
+                title={I18n.t('LotTransactionNumber')}
+                value={toPriceVnd(props.item.lotNumber)}
+                titleStyle={{marginTop: HEIGHTXD(20), fontSize: getFontXD(39)}}
+            />
+            <TextMoney
+                onChangeText={(val) => {
+                }}
+                title={I18n.t('FirstEscrow')}
+                value={props.item.firstEscrow}
+                titleStyle={{ontSize: getFontXD(39)}}
+                editable={false}
+                inputStyle={{backgroundColor: R.colors.gray7}}
+            />
+        </View>
+    );
+};
+const styles = StyleSheet.create({
+    viewInput: {
+        marginHorizontal: WIDTHXD(36),
+        marginBottom: WIDTHXD(30),
+        borderWidth: 0.3,
+        borderColor: '#707070',
+        paddingHorizontal: WIDTHXD(24),
+        paddingVertical: WIDTHXD(24),
+    },
+    textTitle: {
+        fontSize: getFontXD(39),
+        color: R.colors.color777,
+    },
+})
+export default ItemEscrowCalculator;

src/helper/i18/locales/en.js

@@ -248,7 +248,7 @@ export default {
   Buy: 'Buy',
   Sale: 'Sale',
   OpenPrice: 'Open price',
-  CloseStatusPrice: 'Giá đóng trạng thái',
-  SlotNumber: 'Số slot',
-  ProfitLoss: 'Lãi/lỗ',
+  CloseStatusPrice: 'Close stauts price',
+  SlotNumber: 'Slot number',
+  ProfitLoss: 'Profit/Loss',
 };