Skip to content

I
InvestCustomer
Commit 811b48c0 by Nguyễn Thị Thúy
Options

complete calculator escrow and profit loss UI

parent 8f273cc7
Showing with 333 additions and 228 deletions
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,
},
{
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 [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,
})
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) => {
......@@ -16,84 +15,86 @@ const CalculatorProfitLossView = (props) => {
<View style={{flex: 1, flexDirection: 'column', backgroundColor: 'white'}}>
<HeaderBack title={'CalculatorProfitLoss'} isWhite={true}/>
<ScrollView>
<View style={{paddingHorizontal: WIDTHXD(60), paddingVertical: HEIGHTXD(60)}}>
<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}
/>
<Text
style={[styles.textTitle, {marginTop: HEIGHTXD(30)}]}>
{I18n.t('Tradding')}
</Text>
<View style={{width: WIDTHXD(600), height: HEIGHTXD(85)}}>
<RadioForm
radio_props={RadioBuySale}
labelStyle={{fontSize: getFontXD(42)}}
formHorizontal={true}
style={styles.row}
initial={0}
buttonSize={WIDTHXD(30)}
onPress={(value) => {
props.setTransactionType(value);
<View style={{paddingHorizontal: WIDTHXD(60), paddingVertical: HEIGHTXD(60)}}>
<Text
style={styles.textTitle}>
{I18n.t('Product')}
</Text>
<PickerItem
data={props.dataProduct}
onValueChange={(value, item) => {
props.setProduct(item);
}}
defaultValue={props.product?.name}
iconSize={WIDTHXD(40)}
iconColor={R.colors.black}
/>
<Text
style={[styles.textTitle, {marginTop: HEIGHTXD(30)}]}>
{I18n.t('Tradding')}
</Text>
<View style={{width: WIDTHXD(600), height: HEIGHTXD(85)}}>
<RadioForm
radio_props={RadioBuySale}
labelStyle={{fontSize: getFontXD(42)}}
formHorizontal={true}
style={styles.row}
initial={0}
buttonSize={WIDTHXD(30)}
onPress={(value) => {
props.setTransactionType(value);
}}
/>
</View>
<TextMoney
onChangeText={(val) => {
props.setLotNumber(val);
}}
title={I18n.t('LotTransactionNumber')}
value={toPriceVnd(props.lotTransactionNumber)}
titleStyle={{marginTop: HEIGHTXD(20), fontSize: getFontXD(39)}}
/>
<TextMoney
onChangeText={(val) => {
props.setOpenPrice(val);
}}
title={I18n.t('OpenPrice')}
value={toPriceVnd(props.openPrice)}
titleStyle={{marginTop: HEIGHTXD(20), fontSize: getFontXD(39)}}
/>
<TextMoney
onChangeText={(val) => {
props.setCloseStatusPrice(val);
}}
title={I18n.t('CloseStatusPrice')}
value={toPriceVnd(props.closeStatusPrice)}
titleStyle={{marginTop: HEIGHTXD(20), fontSize: getFontXD(39)}}
/>
<View style={{
width: '100%',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
marginTop: HEIGHTXD(50),
}}>
<TouchableOpacity onPress={() => {
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();
}} style={styles.btn}>
<Text style={styles.txtButton}>{I18n.t('Calculator')}</Text>
</TouchableOpacity>
</View>
</View>
<TextMoney
onChangeText={(val) => {
props.setLotNUmber(val)
}}
title={I18n.t('LotTransactionNumber')}
value={toPriceVnd(props.lotTransactionNUmber)}
titleStyle={{marginTop: HEIGHTXD(20), fontSize: getFontXD(39)}}
/>
<TextMoney
onChangeText={(val) => {
props.setOpenPrice(val)
}}
title={I18n.t('OpenPrice')}
value={toPriceVnd(props.openPrice)}
titleStyle={{marginTop: HEIGHTXD(20), fontSize: getFontXD(39)}}
/>
<TextMoney
onChangeText={(val) => {
props.setCloseStatusPrice(val)
}}
title={I18n.t('CloseStatusPrice')}
value={toPriceVnd(props.closeStatusPrice)}
titleStyle={{marginTop: HEIGHTXD(20), fontSize: getFontXD(39)}}
/>
<View style={{
width: '100%',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
marginTop: HEIGHTXD(50),
}}>
<TouchableOpacity onPress={() => {
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()
}} style={styles.btn}>
<Text style={styles.txtButton}>{I18n.t('Calculator')}</Text>
</TouchableOpacity>
</View>
</View>
<FlatList
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}/>}
<FlatList
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}/>}
/>
</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);
}}
iconSize={WIDTHXD(40)}
iconColor={R.colors.black}
<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)
}}
setLotNumber={(lotNumber) => {
item.lotNumber = lotNumber.split('.').join('')
item.firstEscrow = parseFloat(item.lotNumber)*12312
props.setItemInput(item, index)
}}/>}
/>
<View style={{flexDirection: 'row', justifyContent: 'flex-end'}}>
<TouchableOpacity
onPress={() => {
props.onAdd();
}}
style={styles.containerBtn}>
<Icon name={'plus'} size={27} color={R.colors.white}/>
</TouchableOpacity>
</View>
<View style={{paddingHorizontal: WIDTHXD(60)}}>
<TextMoney
onChangeText={(val) => {
props.setFirstEscrow(val.split('.').join(''))
}}
title={I18n.t('FirstEscrow')}
value={props.firstEscrow}
titleStyle={{
marginTop: HEIGHTXD(180),
fontSize: getFontXD(39),
}}
/>
<TextMoney
editable={false}
title={I18n.t('FirstEscrowTotal')}
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>
<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()
}}
style={styles.containerBtn}>
<Icon name={'plus'} size={27} color={R.colors.white}/>
</TouchableOpacity>
</View>
<View style={{paddingHorizontal: WIDTHXD(60)}}>
<TextMoney
onChangeText={(val) => {
}}
title={I18n.t('FirstEscrow')}
value={props.firstEscrow}
titleStyle={{
marginTop: HEIGHTXD(180),
fontSize: getFontXD(39),
}}
/>
<TextMoney
editable={false}
title={I18n.t('FirstEscrowTotal')}
value={props.firstEscrow}
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),
}}>
<TouchableOpacity onPress={() => {
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()
}} style={styles.btn}>
<Text style={styles.txtButton}>{I18n.t('Calculator')}</Text>
</TouchableOpacity>
<View style={{
width: '100%',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
marginTop: HEIGHTXD(80),
marginBottom: HEIGHTXD(150)
}}>
<TouchableOpacity onPress={() => {
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();
}} 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 0 → 100644
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',
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment