Skip to content

I
InvestCustomer
Commit b0f662b1 by Giang Tran
Options

update caculatorprofitloss

parent b0c4f993
Showing with 436 additions and 334 deletions
src/Config/constants.js
import I18n from '../helper/i18/i18n' import I18n from '../helper/i18/i18n';
export const RadioBuySale = [ export const RadioBuySale = [
{label: I18n.t('Buy'), value: 0}, {label: I18n.t('Buy'), value: 'BUY_IN'},
{label: I18n.t('Sale'), value: 1} {label: I18n.t('Sale'), value: 'SELL_OUT'},
] ];
src/Screens/Tool/CalculatorProfitLoss/CalculatorProfitLoss.js
...@@ -4,105 +4,144 @@ import {RadioBuySale} from '../../../Config/constants'; ...@@ -4,105 +4,144 @@ import {RadioBuySale} from '../../../Config/constants';
import I18n from '../../../helper/i18/i18n'; import I18n from '../../../helper/i18/i18n';
import {checkFormatArray} from '../../../Config/Functions'; import {checkFormatArray} from '../../../Config/Functions';
import {showAlert, TYPE} from '../../../components/DropdownAlert'; 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 {Platform} from 'react-native';
import {showLoading, hideLoading} from '../../../actions/loadingAction';
import {connect} from 'react-redux';
const CalculatorProfitLoss = (props) => { const CalculatorProfitLoss = (props) => {
const [dataProduct, setDataProduct] = useState([]); const [dataProduct, setDataProduct] = useState([]);
const [product, setProduct] = useState(null); const [product, setProduct] = useState(null);
const [transactionType, setTransactionType] = useState(RadioBuySale[0].value); const [transactionType, setTransactionType] = useState(RadioBuySale[0].value);
const [dataCalculator, setDataCalculator] = useState([]); const [dataCalculator, setDataCalculator] = useState([]);
const [lotTransactionNumber, setLotTransactionNumber] = useState(null); const [lotTransactionNumber, setLotTransactionNumber] = useState(null);
const [openPrice, setOpenPrice] = useState(null); const [openPrice, setOpenPrice] = useState(null);
const [closeStatusPrice, setCloseStatusPrice] = useState(null); const [closeStatusPrice, setCloseStatusPrice] = useState(null);
useEffect(() => { useEffect(() => {
getProductData() getProductData();
}, []) }, []);
const getProductData = async () => { const getProductData = async () => {
const res = await getTransactionListByCategory({ const res = await getTransactionListByCategory({
keyword: '', keyword: '',
platform: Platform.OS, platform: Platform.OS,
page_size: 1000, page_size: 1000,
page_index: 1, page_index: 1,
type: 'PRICE_TABLE', type: 'PRICE_TABLE',
category_id: -1, category_id: -1,
}); });
if (res.status == 200 && res.data.code == 200) { if (res.status == 200 && res.data.code == 200) {
setDataProduct(res.data.data); setDataProduct(res.data.data);
} else { } 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 = async () => {
const titles = [
I18n.t('Product'),
I18n.t('LotTransactionNumber'),
I18n.t('OpenPrice'),
I18n.t('CloseStatusPrice'),
];
const index = checkFormatArray([
product,
lotTransactionNumber,
openPrice,
closeStatusPrice,
]);
const onCalculator = () => { if (index === true) {
const titles = [ props.showLoading();
I18n.t('Product'),
I18n.t('LotTransactionNumber'),
I18n.t('OpenPrice'),
I18n.t('CloseStatusPrice'),
];
const index = checkFormatArray([
product,
lotTransactionNumber,
openPrice,
closeStatusPrice,
]);
if (index === true) { const res = await getProfitLost({
let newData = [...dataCalculator] commodity_id: product.id,
newData.push({ platform: Platform.OS,
name: product.name, transaction_type: transactionType,
status: RadioBuySale[transactionType].label, lot_number: lotTransactionNumber,
slot_number: 6, open_price: openPrice,
profit_loss_usd: 639324325, close_price: closeStatusPrice,
profit_loss_vnd: 1234349235455, });
}) props.hideLoading();
setDataCalculator(newData) if (res.status == 200 && res.data.code == 200) {
setLotTransactionNumber(null) const newList = [res.data.data].concat(dataCalculator);
setOpenPrice(null) setDataCalculator(newList);
setCloseStatusPrice(null) setLotTransactionNumber(null);
} else { setOpenPrice(null);
showAlert(TYPE.ERROR, I18n.t('Notification'), `${I18n.t('Please_fill_in')}${titles[index]}`) setCloseStatusPrice(null);
} } else {
}; showAlert(
TYPE.ERROR,
I18n.t('Notification', I18n.t('Can_not_get_data')),
);
}
const onDelete = () => { // let newData = [...dataCalculator]
setDataCalculator([]) // newData.push({
setLotTransactionNumber(null) // name: product.name,
setOpenPrice(null) // status: RadioBuySale[transactionType].label,
setCloseStatusPrice(null) // 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 setLotNumber = (text) => { const onDelete = () => {
setLotTransactionNumber(text.split(',').join('')); setDataCalculator([]);
}; setLotTransactionNumber(null);
setOpenPrice(null);
setCloseStatusPrice(null);
};
const setOpenPriceEvent = (text) => { const setLotNumber = (text) => {
setOpenPrice(text.split(',').join('')); setLotTransactionNumber(text.split(',').join(''));
}; };
const setCloseStatusEvent = (text) => {
setCloseStatusPrice(text.split(',').join(''));
};
return ( const setOpenPriceEvent = (text) => {
<CalculatorProfitLossView setOpenPrice(text.split(',').join(''));
dataProduct={dataProduct} };
setProduct={setProduct} const setCloseStatusEvent = (text) => {
product={product} setCloseStatusPrice(text.split(',').join(''));
dataCalculator={dataCalculator} };
onCalculator={onCalculator}
onDelete={onDelete} return (
setTransactionType={setTransactionType} <CalculatorProfitLossView
setLotNumber={setLotNumber} dataProduct={dataProduct}
lotTransactionNumber={lotTransactionNumber} setProduct={setProduct}
openPrice={openPrice} product={product}
setOpenPrice={setOpenPriceEvent} dataCalculator={dataCalculator}
closeStatusPrice={closeStatusPrice} onCalculator={onCalculator}
setCloseStatusPrice={setCloseStatusEvent} onDelete={onDelete}
/> setTransactionType={setTransactionType}
); setLotNumber={setLotNumber}
lotTransactionNumber={lotTransactionNumber}
openPrice={openPrice}
setOpenPrice={setOpenPriceEvent}
closeStatusPrice={closeStatusPrice}
setCloseStatusPrice={setCloseStatusEvent}
/>
);
}; };
export default CalculatorProfitLoss; const mapStateToProps = (state) => {
return {
user: state.userReducer,
};
};
export default connect(mapStateToProps, {showLoading, hideLoading})(
CalculatorProfitLoss,
);
src/Screens/Tool/CalculatorProfitLoss/ItemCalculator.js
import React, {useState, useEffect} from 'react'; import React, {useState, useEffect} from 'react';
import { import {
View, View,
TouchableOpacity, TouchableOpacity,
Text, Text,
LayoutAnimation, LayoutAnimation,
StyleSheet StyleSheet,
} from 'react-native'; } from 'react-native';
import R from '../../../assets/R'; import R from '../../../assets/R';
import Ionicons from 'react-native-vector-icons/Ionicons'; 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 I18n from '../../../helper/i18/i18n';
import TextField from '../../../components/TextField'; import TextField from '../../../components/TextField';
import {RadioBuySale} from '../../../Config/constants'; import {RadioBuySale} from '../../../Config/constants';
const ItemCalculator = (props) => { const ItemCalculator = (props) => {
const [expanded, setExpanded] = useState(true); const [expanded, setExpanded] = useState(true);
const changeLayout = () => { const changeLayout = () => {
LayoutAnimation.configureNext({ LayoutAnimation.configureNext({
duration: 500, duration: 500,
create: { create: {
type: LayoutAnimation.Types.spring, type: LayoutAnimation.Types.spring,
property: LayoutAnimation.Properties.scaleY, property: LayoutAnimation.Properties.scaleY,
springDamping: 1.7, springDamping: 1.7,
}, },
update: { update: {
type: LayoutAnimation.Types.spring, type: LayoutAnimation.Types.spring,
springDamping: 1.7, springDamping: 1.7,
}, },
}); });
setExpanded(!expanded) setExpanded(!expanded);
}; };
console.log(props.item.transaction_type);
return ( return (
<View style={[styles.container, {marginBottom: props.isLastItem? HEIGHTXD(100) : HEIGHTXD(30)}]}> <View
<TouchableOpacity style={[
onPress={() => changeLayout()} styles.container,
style={[styles.flexTitle, { borderBottomWidth: expanded === true ? 0.3 : 0, paddingHorizontal: WIDTHXD(30) }]} {marginBottom: props.isLastItem ? HEIGHTXD(100) : HEIGHTXD(30)},
> ]}>
<Text style={styles.title}>{props.item.name}</Text> <TouchableOpacity
{expanded === true ? ( onPress={() => changeLayout()}
<Ionicons style={[
name='chevron-up' styles.flexTitle,
size={WIDTHXD(50)} {
style={{ marginRight: WIDTHXD(25) }} borderBottomWidth: expanded === true ? 0.3 : 0,
color={R.colors.iconGray} paddingHorizontal: WIDTHXD(30),
/> },
) : ( ]}>
<Ionicons <Text style={styles.title}>{props.item.name}</Text>
name='chevron-down' {expanded === true ? (
size={WIDTHXD(50)} <Ionicons
style={{ marginRight: WIDTHXD(25) }} name="chevron-up"
color={R.colors.iconGray} size={WIDTHXD(50)}
/> style={{marginRight: WIDTHXD(25)}}
)} color={R.colors.iconGray}
</TouchableOpacity> />
{expanded ? ) : (
<View style={{paddingVertical: HEIGHTXD(20)}}> <Ionicons
<TextField name="chevron-down"
title={I18n.t('Status')} size={WIDTHXD(50)}
content={props.item.status} style={{marginRight: WIDTHXD(25)}}
color={props.item.status == RadioBuySale[0].label ? R.colors.green : R.colors.red2} color={R.colors.iconGray}
/> />
<TextField )}
title={I18n.t('SlotNumber')} </TouchableOpacity>
content={props.item.slot_number} {expanded ? (
/> <View style={{paddingVertical: HEIGHTXD(20)}}>
<TextField <TextField
title={`${I18n.t('ProfitLoss')} (USD)`} title={I18n.t('Status')}
content={toPriceVnd(props.item.profit_loss_usd)} content={I18n.t(props.item.transaction_type)}
/> color={
<TextField props.item.transaction_type == 'SELL_OUT'
title={`${I18n.t('ProfitLoss')} (VNĐ)`} ? R.colors.green
content={toPriceVnd(props.item.profit_loss_vnd)} : R.colors.red2
/>
</View>
: null
} }
/>
<TextField
title={I18n.t('SlotNumber')}
content={props.item.lot_number}
/>
<TextField
title={`${I18n.t('ProfitLoss')} (USD)`}
content={toPriceVnd(props.item.profit.USD)}
/>
<TextField
title={`${I18n.t('ProfitLoss')} (VNĐ)`}
content={toPriceVnd(props.item.profit.VND)}
/>
</View> </View>
) ) : null}
</View>
} );
export default ItemCalculator };
export default ItemCalculator;
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
backgroundColor: R.colors.white, backgroundColor: R.colors.white,
borderColor: R.colors.borderGray, borderColor: R.colors.borderGray,
borderWidth: 0.3, borderWidth: 0.3,
marginHorizontal: WIDTHXD(40), marginHorizontal: WIDTHXD(40),
marginBottom: HEIGHTXD(30) marginBottom: HEIGHTXD(30),
}, },
flexTitle: { flexTitle: {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-between', justifyContent: 'space-between',
paddingVertical: HEIGHTXD(20), paddingVertical: HEIGHTXD(20),
borderBottomColor: R.colors.borderGray, borderBottomColor: R.colors.borderGray,
}, },
title: { title: {
fontSize: getFontXD(36), fontSize: getFontXD(36),
lineHeight: getLineHeightXD(56), lineHeight: getLineHeightXD(56),
color: R.colors.black, color: R.colors.black,
}, },
}) });
src/apis/Functions/General.js
...@@ -15,3 +15,8 @@ export const sendRequest = async (body) => ...@@ -15,3 +15,8 @@ export const sendRequest = async (body) =>
PostData(url.urlSendRequest, body) PostData(url.urlSendRequest, body)
.then((res) => res) .then((res) => res)
.catch((err) => err); .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'; import url from '../url';
...@@ -16,3 +16,8 @@ export const getContractDescription = async (id) => ...@@ -16,3 +16,8 @@ export const getContractDescription = async (id) =>
GetData(`${url.urlGetContractDescription}${id}`) GetData(`${url.urlGetContractDescription}${id}`)
.then((res) => res) .then((res) => res)
.catch((err) => err); .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 { ...@@ -53,4 +53,6 @@ export default {
urlFeedback: root + 'api/v1/customers/send-feedback', urlFeedback: root + 'api/v1/customers/send-feedback',
urlSendRequest: root + 'api/v1/customers/send-request', urlSendRequest: root + 'api/v1/customers/send-request',
urlProfitLost: root + 'api/v1/customers/calculate-profit',
}; };
src/components/TextField.js
import React from 'react' import React from 'react';
import { import {View, Text, StyleSheet} from 'react-native';
View,
Text,
StyleSheet
} from 'react-native'
import R from '../assets/R'; import R from '../assets/R';
import {getFontXD, HEIGHTXD, WIDTHXD} from '../Config/Functions'; import {getFontXD, HEIGHTXD, WIDTHXD} from '../Config/Functions';
const TextField = (props) => { const TextField = (props) => {
const {color} = props const {color} = props;
return ( 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.title}>{props.title}</Text>
<Text style={[styles.content, color && {color}]}>{props.content}</Text> <Text style={[styles.content, color && {color}]}>{props.content}</Text>
</View> </View>
) );
} };
export default TextField export default TextField;
const styles = StyleSheet.create({ const styles = StyleSheet.create({
row: { row: {
paddingHorizontal: HEIGHTXD(30), paddingHorizontal: HEIGHTXD(30),
flexDirection: 'row', flexDirection: 'row',
}, },
title: { title: {
flex: 2.7, flex: 2.7,
fontSize: getFontXD(36), fontSize: getFontXD(36),
color: R.colors.color777 color: R.colors.color777,
}, },
content: { content: {
flex: 3.5, flex: 3.5,
fontSize: getFontXD(36), fontSize: getFontXD(36),
color: R.colors.black, color: R.colors.black,
}, },
}) });
src/helper/i18/locales/en.js
...@@ -272,4 +272,6 @@ export default { ...@@ -272,4 +272,6 @@ export default {
CloseStatusPrice: 'Close stauts price', CloseStatusPrice: 'Close stauts price',
SlotNumber: 'Slot number', SlotNumber: 'Slot number',
ProfitLoss: 'Profit/Loss', ProfitLoss: 'Profit/Loss',
BUY_IN: 'Buy in',
SELL_OUT: 'Sell out',
}; };
src/helper/i18/locales/vn.js
...@@ -257,4 +257,14 @@ export default { ...@@ -257,4 +257,14 @@ export default {
ConvertUSD: 'Quy đổi USD/Tấn', ConvertUSD: 'Quy đổi USD/Tấn',
Saturday: 'Thứ 7', Saturday: 'Thứ 7',
Sunday: 'Chủ nhật', 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