Skip to content

I
InvestCustomer
Commit b0f662b1 by Giang Tran
Options

update caculatorprofitloss

parent b0c4f993
Showing with 187 additions and 85 deletions
src/Config/constants.js
import I18n from '../helper/i18/i18n'
import I18n from '../helper/i18/i18n';
export const RadioBuySale = [
{label: I18n.t('Buy'), value: 0},
{label: I18n.t('Sale'), value: 1}
]
{label: I18n.t('Buy'), value: 'BUY_IN'},
{label: I18n.t('Sale'), value: 'SELL_OUT'},
];
src/Screens/Tool/CalculatorProfitLoss/CalculatorProfitLoss.js
......@@ -4,8 +4,13 @@ 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 {
getTransactionListByCategory,
getProfitLost,
} from '../../../apis/Functions/Transaction';
import {Platform} from 'react-native';
import {showLoading, hideLoading} from '../../../actions/loadingAction';
import {connect} from 'react-redux';
const CalculatorProfitLoss = (props) => {
const [dataProduct, setDataProduct] = useState([]);
......@@ -16,8 +21,8 @@ const CalculatorProfitLoss = (props) => {
const [openPrice, setOpenPrice] = useState(null);
const [closeStatusPrice, setCloseStatusPrice] = useState(null);
useEffect(() => {
getProductData()
}, [])
getProductData();
}, []);
const getProductData = async () => {
const res = await getTransactionListByCategory({
......@@ -31,12 +36,11 @@ const CalculatorProfitLoss = (props) => {
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')))
showAlert(TYPE.ERROR, I18n.t('Notification', I18n.t('Can_not_get_data')));
}
};
const onCalculator = () => {
const onCalculator = async () => {
const titles = [
I18n.t('Product'),
I18n.t('LotTransactionNumber'),
......@@ -51,28 +55,56 @@ const CalculatorProfitLoss = (props) => {
]);
if (index === true) {
let newData = [...dataCalculator]
newData.push({
name: product.name,
status: RadioBuySale[transactionType].label,
slot_number: 6,
profit_loss_usd: 639324325,
profit_loss_vnd: 1234349235455,
})
setDataCalculator(newData)
setLotTransactionNumber(null)
setOpenPrice(null)
setCloseStatusPrice(null)
props.showLoading();
const res = await getProfitLost({
commodity_id: product.id,
platform: Platform.OS,
transaction_type: transactionType,
lot_number: lotTransactionNumber,
open_price: openPrice,
close_price: closeStatusPrice,
});
props.hideLoading();
if (res.status == 200 && res.data.code == 200) {
const newList = [res.data.data].concat(dataCalculator);
setDataCalculator(newList);
setLotTransactionNumber(null);
setOpenPrice(null);
setCloseStatusPrice(null);
} else {
showAlert(
TYPE.ERROR,
I18n.t('Notification', I18n.t('Can_not_get_data')),
);
}
// let newData = [...dataCalculator]
// newData.push({
// name: product.name,
// status: RadioBuySale[transactionType].label,
// 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]}`)
showAlert(
TYPE.ERROR,
I18n.t('Notification'),
`${I18n.t('Please_fill_in')}${titles[index]}`,
);
}
};
const onDelete = () => {
setDataCalculator([])
setLotTransactionNumber(null)
setOpenPrice(null)
setCloseStatusPrice(null)
setDataCalculator([]);
setLotTransactionNumber(null);
setOpenPrice(null);
setCloseStatusPrice(null);
};
const setLotNumber = (text) => {
......@@ -105,4 +137,11 @@ const CalculatorProfitLoss = (props) => {
);
};
export default CalculatorProfitLoss;
const mapStateToProps = (state) => {
return {
user: state.userReducer,
};
};
export default connect(mapStateToProps, {showLoading, hideLoading})(
CalculatorProfitLoss,
);
src/Screens/Tool/CalculatorProfitLoss/CalculatorProfitLossView.js
import React, {Component} from 'react';
import {View, Text, StyleSheet, TouchableOpacity, FlatList, ScrollView} from 'react-native';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
FlatList,
ScrollView,
} from 'react-native';
import HeaderBack from '../../../components/Header/HeaderBack';
import {getFontXD, HEIGHTXD, toPriceVnd, WIDTHXD} from '../../../Config/Functions';
import {
getFontXD,
HEIGHTXD,
toPriceVnd,
WIDTHXD,
} from '../../../Config/Functions';
import I18n from '../../../helper/i18/i18n';
import PickerItem from '../../../components/Picker/PickerItem';
import R from '../../../assets/R';
......@@ -9,17 +21,19 @@ import RadioForm from 'react-native-simple-radio-button';
import {RadioBuySale} from '../../../Config/constants';
import TextMoney from '../../../components/Input/InputMoney';
import ItemCalculator from './ItemCalculator';
import AppText from '../../../components/AppText';
const CalculatorProfitLossView = (props) => {
return (
<View style={{flex: 1, flexDirection: 'column', backgroundColor: 'white'}}>
<HeaderBack title={'CalculatorProfitLoss'} isWhite={true}/>
<HeaderBack title={'CalculatorProfitLoss'} isWhite={true} />
<ScrollView>
<View style={{paddingHorizontal: WIDTHXD(60), paddingVertical: HEIGHTXD(60)}}>
<Text
style={styles.textTitle}>
{I18n.t('Product')}
</Text>
<View
style={{
paddingHorizontal: WIDTHXD(60),
paddingVertical: HEIGHTXD(60),
}}>
<Text style={styles.textTitle}>{I18n.t('Product')}</Text>
<PickerItem
data={props.dataProduct}
onValueChange={(value, item) => {
......@@ -29,10 +43,9 @@ const CalculatorProfitLossView = (props) => {
iconSize={WIDTHXD(40)}
iconColor={R.colors.black}
/>
<Text
style={[styles.textTitle, {marginTop: HEIGHTXD(30)}]}>
<AppText style={[styles.textTitle, {marginTop: HEIGHTXD(30)}]}>
{I18n.t('Tradding')}
</Text>
</AppText>
<View style={{width: WIDTHXD(600), height: HEIGHTXD(85)}}>
<RadioForm
radio_props={RadioBuySale}
......@@ -70,22 +83,30 @@ const CalculatorProfitLossView = (props) => {
value={toPriceVnd(props.closeStatusPrice)}
titleStyle={{marginTop: HEIGHTXD(20), fontSize: getFontXD(39)}}
/>
<View style={{
<View
style={{
width: '100%',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
marginTop: HEIGHTXD(50),
}}>
<TouchableOpacity onPress={() => {
<TouchableOpacity
onPress={() => {
props.onDelete();
}} style={[styles.btn, {backgroundColor: R.colors.red2, marginRight: WIDTHXD(72)}]}>
}}
style={[
styles.btn,
{backgroundColor: R.colors.red2, marginRight: WIDTHXD(72)},
]}>
<Text style={styles.txtButton}>{I18n.t('Delete')}</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => {
<TouchableOpacity
onPress={() => {
props.onCalculator();
}} style={styles.btn}>
<Text style={styles.txtButton}>{I18n.t('Calculator')}</Text>
}}
style={styles.btn}>
<Text style={styles.txtButton}>{I18n.t('Caculate')}</Text>
</TouchableOpacity>
</View>
</View>
......@@ -93,8 +114,12 @@ 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/CalculatorProfitLoss/ItemCalculator.js
......@@ -4,12 +4,18 @@ import {
TouchableOpacity,
Text,
LayoutAnimation,
StyleSheet
StyleSheet,
} from 'react-native';
import R from '../../../assets/R';
import Ionicons from 'react-native-vector-icons/Ionicons';
import {getFontXD, getLineHeightXD, HEIGHTXD, toPriceVnd, WIDTHXD} from '../../../Config/Functions';
import {
getFontXD,
getLineHeightXD,
HEIGHTXD,
toPriceVnd,
WIDTHXD,
} from '../../../Config/Functions';
import I18n from '../../../helper/i18/i18n';
import TextField from '../../../components/TextField';
import {RadioBuySale} from '../../../Config/constants';
......@@ -29,66 +35,78 @@ const ItemCalculator = (props) => {
springDamping: 1.7,
},
});
setExpanded(!expanded)
setExpanded(!expanded);
};
console.log(props.item.transaction_type);
return (
<View style={[styles.container, {marginBottom: props.isLastItem? HEIGHTXD(100) : HEIGHTXD(30)}]}>
<View
style={[
styles.container,
{marginBottom: props.isLastItem ? HEIGHTXD(100) : HEIGHTXD(30)},
]}>
<TouchableOpacity
onPress={() => changeLayout()}
style={[styles.flexTitle, { borderBottomWidth: expanded === true ? 0.3 : 0, paddingHorizontal: WIDTHXD(30) }]}
>
style={[
styles.flexTitle,
{
borderBottomWidth: expanded === true ? 0.3 : 0,
paddingHorizontal: WIDTHXD(30),
},
]}>
<Text style={styles.title}>{props.item.name}</Text>
{expanded === true ? (
<Ionicons
name='chevron-up'
name="chevron-up"
size={WIDTHXD(50)}
style={{ marginRight: WIDTHXD(25) }}
style={{marginRight: WIDTHXD(25)}}
color={R.colors.iconGray}
/>
) : (
<Ionicons
name='chevron-down'
name="chevron-down"
size={WIDTHXD(50)}
style={{ marginRight: WIDTHXD(25) }}
style={{marginRight: WIDTHXD(25)}}
color={R.colors.iconGray}
/>
)}
</TouchableOpacity>
{expanded ?
{expanded ? (
<View style={{paddingVertical: HEIGHTXD(20)}}>
<TextField
title={I18n.t('Status')}
content={props.item.status}
color={props.item.status == RadioBuySale[0].label ? R.colors.green : R.colors.red2}
content={I18n.t(props.item.transaction_type)}
color={
props.item.transaction_type == 'SELL_OUT'
? R.colors.green
: R.colors.red2
}
/>
<TextField
title={I18n.t('SlotNumber')}
content={props.item.slot_number}
content={props.item.lot_number}
/>
<TextField
title={`${I18n.t('ProfitLoss')} (USD)`}
content={toPriceVnd(props.item.profit_loss_usd)}
content={toPriceVnd(props.item.profit.USD)}
/>
<TextField
title={`${I18n.t('ProfitLoss')} (VNĐ)`}
content={toPriceVnd(props.item.profit_loss_vnd)}
content={toPriceVnd(props.item.profit.VND)}
/>
</View>
: null
}
) : null}
</View>
)
}
export default ItemCalculator
);
};
export default ItemCalculator;
const styles = StyleSheet.create({
container: {
backgroundColor: R.colors.white,
borderColor: R.colors.borderGray,
borderWidth: 0.3,
marginHorizontal: WIDTHXD(40),
marginBottom: HEIGHTXD(30)
marginBottom: HEIGHTXD(30),
},
flexTitle: {
flexDirection: 'row',
......@@ -102,4 +120,4 @@ const styles = StyleSheet.create({
lineHeight: getLineHeightXD(56),
color: R.colors.black,
},
})
});
src/apis/Functions/General.js
......@@ -15,3 +15,8 @@ export const sendRequest = async (body) =>
PostData(url.urlSendRequest, body)
.then((res) => res)
.catch((err) => err);
export const getProfitLost = async (body) =>
PostData(url.urlProfitLost, body)
.then((res) => res)
.catch((err) => err);
src/apis/Functions/Transaction.js
import {GetData} from '../helpers';
import {GetData, PostData} from '../helpers';
import url from '../url';
......@@ -16,3 +16,8 @@ export const getContractDescription = async (id) =>
GetData(`${url.urlGetContractDescription}${id}`)
.then((res) => res)
.catch((err) => err);
export const getProfitLost = async (body) =>
PostData(url.urlProfitLost, body)
.then((res) => res)
.catch((err) => err);
src/apis/url.js
......@@ -53,4 +53,6 @@ export default {
urlFeedback: root + 'api/v1/customers/send-feedback',
urlSendRequest: root + 'api/v1/customers/send-request',
urlProfitLost: root + 'api/v1/customers/calculate-profit',
};
src/components/TextField.js
import React from 'react'
import {
View,
Text,
StyleSheet
} from 'react-native'
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import R from '../assets/R';
import {getFontXD, HEIGHTXD, WIDTHXD} from '../Config/Functions';
const TextField = (props) => {
const {color} = props
const {color} = props;
return (
<View style={[styles.row, { paddingVertical: WIDTHXD(15) }]}>
<View style={[styles.row, {paddingVertical: WIDTHXD(15)}]}>
<Text style={styles.title}>{props.title}</Text>
<Text style={[styles.content, color && {color}]}>{props.content}</Text>
</View>
)
}
export default TextField
);
};
export default TextField;
const styles = StyleSheet.create({
row: {
paddingHorizontal: HEIGHTXD(30),
......@@ -25,11 +21,11 @@ const styles = StyleSheet.create({
title: {
flex: 2.7,
fontSize: getFontXD(36),
color: R.colors.color777
color: R.colors.color777,
},
content: {
flex: 3.5,
fontSize: getFontXD(36),
color: R.colors.black,
},
})
});
src/helper/i18/locales/en.js
......@@ -272,4 +272,6 @@ export default {
CloseStatusPrice: 'Close stauts price',
SlotNumber: 'Slot number',
ProfitLoss: 'Profit/Loss',
BUY_IN: 'Buy in',
SELL_OUT: 'Sell out',
};
src/helper/i18/locales/vn.js
......@@ -257,4 +257,14 @@ export default {
ConvertUSD: 'Quy đổi USD/Tấn',
Saturday: 'Thứ 7',
Sunday: 'Chủ nhật',
LotTransactionNumber: 'Số lot giao dịch',
OpenPrice: 'Giá mở trạng thái',
CloseStatusPrice: 'Giá đóng trạng thái',
Buy: 'Mua',
Sale: 'Bán',
SlotNumber: 'Số lót',
ProfitLoss: 'Lãi/lỗ',
CalculatorProfitLoss: 'Tính lãi lỗ',
BUY_IN: 'Mua vào',
SELL_OUT: 'Bán ra',
};
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