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 = [
{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,105 +4,144 @@ 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([]);
const [product, setProduct] = useState(null);
const [transactionType, setTransactionType] = useState(RadioBuySale[0].value);
const [dataCalculator, setDataCalculator] = useState([]);
const [lotTransactionNumber, setLotTransactionNumber] = useState(null);
const [openPrice, setOpenPrice] = useState(null);
const [closeStatusPrice, setCloseStatusPrice] = useState(null);
useEffect(() => {
getProductData()
}, [])
const [dataProduct, setDataProduct] = useState([]);
const [product, setProduct] = useState(null);
const [transactionType, setTransactionType] = useState(RadioBuySale[0].value);
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 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 = async () => {
const titles = [
I18n.t('Product'),
I18n.t('LotTransactionNumber'),
I18n.t('OpenPrice'),
I18n.t('CloseStatusPrice'),
];
const index = checkFormatArray([
product,
lotTransactionNumber,
openPrice,
closeStatusPrice,
]);
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) {
props.showLoading();
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)
} else {
showAlert(TYPE.ERROR, I18n.t('Notification'), `${I18n.t('Please_fill_in')}${titles[index]}`)
}
};
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')),
);
}
const onDelete = () => {
setDataCalculator([])
setLotTransactionNumber(null)
setOpenPrice(null)
setCloseStatusPrice(null)
};
// 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]}`,
);
}
};
const setLotNumber = (text) => {
setLotTransactionNumber(text.split(',').join(''));
};
const onDelete = () => {
setDataCalculator([]);
setLotTransactionNumber(null);
setOpenPrice(null);
setCloseStatusPrice(null);
};
const setOpenPriceEvent = (text) => {
setOpenPrice(text.split(',').join(''));
};
const setCloseStatusEvent = (text) => {
setCloseStatusPrice(text.split(',').join(''));
};
const setLotNumber = (text) => {
setLotTransactionNumber(text.split(',').join(''));
};
return (
<CalculatorProfitLossView
dataProduct={dataProduct}
setProduct={setProduct}
product={product}
dataCalculator={dataCalculator}
onCalculator={onCalculator}
onDelete={onDelete}
setTransactionType={setTransactionType}
setLotNumber={setLotNumber}
lotTransactionNumber={lotTransactionNumber}
openPrice={openPrice}
setOpenPrice={setOpenPriceEvent}
closeStatusPrice={closeStatusPrice}
setCloseStatusPrice={setCloseStatusEvent}
/>
);
const setOpenPriceEvent = (text) => {
setOpenPrice(text.split(',').join(''));
};
const setCloseStatusEvent = (text) => {
setCloseStatusPrice(text.split(',').join(''));
};
return (
<CalculatorProfitLossView
dataProduct={dataProduct}
setProduct={setProduct}
product={product}
dataCalculator={dataCalculator}
onCalculator={onCalculator}
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 {
View,
TouchableOpacity,
Text,
LayoutAnimation,
StyleSheet
View,
TouchableOpacity,
Text,
LayoutAnimation,
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';
const ItemCalculator = (props) => {
const [expanded, setExpanded] = useState(true);
const changeLayout = () => {
LayoutAnimation.configureNext({
duration: 500,
create: {
type: LayoutAnimation.Types.spring,
property: LayoutAnimation.Properties.scaleY,
springDamping: 1.7,
},
update: {
type: LayoutAnimation.Types.spring,
springDamping: 1.7,
},
});
setExpanded(!expanded)
};
const [expanded, setExpanded] = useState(true);
const changeLayout = () => {
LayoutAnimation.configureNext({
duration: 500,
create: {
type: LayoutAnimation.Types.spring,
property: LayoutAnimation.Properties.scaleY,
springDamping: 1.7,
},
update: {
type: LayoutAnimation.Types.spring,
springDamping: 1.7,
},
});
setExpanded(!expanded);
};
console.log(props.item.transaction_type);
return (
<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) }]}
>
<Text style={styles.title}>{props.item.name}</Text>
{expanded === true ? (
<Ionicons
name='chevron-up'
size={WIDTHXD(50)}
style={{ marginRight: WIDTHXD(25) }}
color={R.colors.iconGray}
/>
) : (
<Ionicons
name='chevron-down'
size={WIDTHXD(50)}
style={{ marginRight: WIDTHXD(25) }}
color={R.colors.iconGray}
/>
)}
</TouchableOpacity>
{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}
/>
<TextField
title={I18n.t('SlotNumber')}
content={props.item.slot_number}
/>
<TextField
title={`${I18n.t('ProfitLoss')} (USD)`}
content={toPriceVnd(props.item.profit_loss_usd)}
/>
<TextField
title={`${I18n.t('ProfitLoss')} (VNĐ)`}
content={toPriceVnd(props.item.profit_loss_vnd)}
/>
</View>
: null
return (
<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),
},
]}>
<Text style={styles.title}>{props.item.name}</Text>
{expanded === true ? (
<Ionicons
name="chevron-up"
size={WIDTHXD(50)}
style={{marginRight: WIDTHXD(25)}}
color={R.colors.iconGray}
/>
) : (
<Ionicons
name="chevron-down"
size={WIDTHXD(50)}
style={{marginRight: WIDTHXD(25)}}
color={R.colors.iconGray}
/>
)}
</TouchableOpacity>
{expanded ? (
<View style={{paddingVertical: HEIGHTXD(20)}}>
<TextField
title={I18n.t('Status')}
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.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>
)
}
export default ItemCalculator
) : null}
</View>
);
};
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)
},
flexTitle: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingVertical: HEIGHTXD(20),
borderBottomColor: R.colors.borderGray,
},
title: {
fontSize: getFontXD(36),
lineHeight: getLineHeightXD(56),
color: R.colors.black,
},
})
container: {
backgroundColor: R.colors.white,
borderColor: R.colors.borderGray,
borderWidth: 0.3,
marginHorizontal: WIDTHXD(40),
marginBottom: HEIGHTXD(30),
},
flexTitle: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingVertical: HEIGHTXD(20),
borderBottomColor: R.colors.borderGray,
},
title: {
fontSize: getFontXD(36),
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
return (
<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
const {color} = props;
return (
<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;
const styles = StyleSheet.create({
row: {
paddingHorizontal: HEIGHTXD(30),
flexDirection: 'row',
},
title: {
flex: 2.7,
fontSize: getFontXD(36),
color: R.colors.color777
},
content: {
flex: 3.5,
fontSize: getFontXD(36),
color: R.colors.black,
},
})
row: {
paddingHorizontal: HEIGHTXD(30),
flexDirection: 'row',
},
title: {
flex: 2.7,
fontSize: getFontXD(36),
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