Skip to content

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

integrate transaction api

parent a76c9a92
Showing with 568 additions and 492 deletions
ios/Invest.xcodeproj/project.pbxproj
...@@ -923,6 +923,7 @@ ...@@ -923,6 +923,7 @@
PROVISIONING_PROFILE_SPECIFIER = ""; PROVISIONING_PROFILE_SPECIFIER = "";
SWIFT_OPTIMIZATION_LEVEL = "-Onone"; SWIFT_OPTIMIZATION_LEVEL = "-Onone";
SWIFT_VERSION = 5.0; SWIFT_VERSION = 5.0;
TARGETED_DEVICE_FAMILY = "1,2";
VERSIONING_SYSTEM = "apple-generic"; VERSIONING_SYSTEM = "apple-generic";
}; };
name = Debug; name = Debug;
...@@ -950,6 +951,7 @@ ...@@ -950,6 +951,7 @@
PRODUCT_NAME = Invest; PRODUCT_NAME = Invest;
PROVISIONING_PROFILE_SPECIFIER = ""; PROVISIONING_PROFILE_SPECIFIER = "";
SWIFT_VERSION = 5.0; SWIFT_VERSION = 5.0;
TARGETED_DEVICE_FAMILY = "1,2";
VERSIONING_SYSTEM = "apple-generic"; VERSIONING_SYSTEM = "apple-generic";
}; };
name = Release; name = Release;
......
src/Screens/Transaction/DueDate/DueDate.js
...@@ -2,30 +2,62 @@ import React, {useState, useEffect} from 'react'; ...@@ -2,30 +2,62 @@ import React, {useState, useEffect} from 'react';
import {getListNotification} from '../../../apis/Functions/users'; import {getListNotification} from '../../../apis/Functions/users';
import DueDateView from './DueDateView'; import DueDateView from './DueDateView';
import I18n from '../../../helper/i18/i18n'; import I18n from '../../../helper/i18/i18n';
import {getListCategoryProduct, getTransactionListByCategory} from '../../../apis/Functions/Transaction';
import {Alert, Platform} from 'react-native';
import PriceListView from '../PriceList/PriceListView';
const DueDate = (props) => { const DueDate = (props) => {
const [selected, setSelected] = useState('');
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
const [data, setData] = useState([]); const [data, setData] = useState([]);
const [tottalPage, setTotalPage] = useState(1); const [tottalPage, setTotalPage] = useState(1);
const [isRefresh, setisRefresh] = useState(false); const [isRefresh, setIsRefresh] = useState(false);
const [fillter, setFillters] = useState('ALL'); const [filters, setFilters] = useState([]);
const [filterId, setFilterId] = useState(-1);
useEffect(() => { useEffect(() => {
getCategoryData();
}, []);
useEffect(() => {
setData([])
getData(); getData();
}, [fillter]); }, [filterId]);
const getCategoryData = async () => {
// setIsRefresh(true);
const res = await getListCategoryProduct({
keyword: '',
platform: Platform.OS,
page_size: 20,
page_index: 1,
type: 'PRODUCT',
});
if ((res.data.code = 200 && res.data.data)) {
let data = [];
data.push({id: -1, name: 'All'});
setFilters(data.concat([...res.data.data]));
} else {
Alert.alert(I18n.t('Notification'), res.data.message);
}
};
const onRefresh = () => {
setPage(1);
getData();
};
const getData = async () => { const getData = async () => {
setisRefresh(true); setIsRefresh(true);
setPage(1); setPage(1);
const res = await getListNotification({ const res = await getTransactionListByCategory({
keyword: '', keyword: '',
platform: Platform.OS, platform: Platform.OS,
page_size: 10, page_size: 10,
page_index: 1, page_index: 1,
type: fillter, type:'EXPIRY_DATE',
category_id: filterId,
}); });
setisRefresh(false); setIsRefresh(false);
console.log('getData', res);
if ((res.data.code = 200 && res.data.data)) { if ((res.data.code = 200 && res.data.data)) {
setData(res.data.data); setData(res.data.data);
setTotalPage(res.data.meta.pages); setTotalPage(res.data.meta.pages);
...@@ -34,38 +66,39 @@ const DueDate = (props) => { ...@@ -34,38 +66,39 @@ const DueDate = (props) => {
} }
}; };
const onRefresh = () => {
getData();
};
const onLoadMore = () => { const onLoadMore = () => {
console.log(tottalPage); console.log(tottalPage);
if (page < tottalPage) getDataLoadMore(); if (page < tottalPage) {
getDataLoadMore();
}
}; };
const getDataLoadMore = async () => { const getDataLoadMore = async () => {
setisRefresh(true); setIsRefresh(true);
const res = await getListNotification({ const res = await getTransactionListByCategory({
keyword: '', keyword: '',
platform: Platform.OS, platform: Platform.OS,
page_size: 10, page_size: 10,
page_index: 1, page_index: page + 1,
type: fillter, type:'EXPIRY_DATE',
category_id: filterId,
}); });
setPage(page + 1); setPage(page + 1);
if (res.data.code == 200) { if (res.data.code == 200) {
setData(data.concat(res.data.data)); setData(data.concat(res.data.data));
} }
setisRefresh(false); setIsRefresh(false);
}; };
return ( return (
<DueDateView <DueDateView
onRefresh={onRefresh} onRefresh={onRefresh}
isRefresh={isRefresh} isRefresh={isRefresh}
onLoadMore={onLoadMore} onLoadMore={onLoadMore}
setFillters={setFillters} setFilterId={setFilterId}
fillter={fillter} filterId={filterId}
filters={filters}
data={data} data={data}
/> />
); );
......
src/Screens/Transaction/DueDate/DueDateView.js
import React, {useState} from 'react'; import React, {useState} from 'react';
import { import {
View, View,
Text, Text,
FlatList, FlatList,
StyleSheet, StyleSheet,
TouchableOpacity, TouchableOpacity,
ScrollView, ScrollView,
} from 'react-native'; } from 'react-native';
import HeaderDrawer from '../../../components/Header/HeaderDrawer'; import HeaderDrawer from '../../../components/Header/HeaderDrawer';
import Item from './Item'; import Item from './Item';
import {getFontXD} from '../../../Config/Functions'; import {getFontXD, HEIGHTXD} from '../../../Config/Functions';
import AppText from '../../../components/AppText'; import AppText from '../../../components/AppText';
import {PRODUCTDETAIL} from '../../../routers/ScreenNames'; import {PRODUCTDETAIL} from '../../../routers/ScreenNames';
import {useNavigation} from '@react-navigation/native'; import {useNavigation} from '@react-navigation/native';
const Fillters = [
{
id: '1',
name: 'All',
value: 'ALL',
},
{
id: '2',
name: 'Deposit',
value: 'DEPOSIT',
},
{
id: '3',
name: 'Withdraw',
value: 'WITHDRAW',
},
{
id: '4',
name: 'Transfer',
value: 'TRANSFER',
},
];
const EscrowView = (props) => { const EscrowView = (props) => {
const {onRefresh, isRefresh, onLoadMore, setFillters, fillter, data} = props; const {onRefresh, isRefresh, onLoadMore, setFilterId, filters, filterId, data} = props;
const navigate = useNavigation(); const navigate = useNavigation();
return ( return (
<View style={{flex: 1}}> <View style={{flex: 1}}>
<View style={styles.headerContainer}> <View style={styles.headerContainer}>
<ScrollView horizontal showsHorizontalScrollIndicator={false}> <ScrollView horizontal showsHorizontalScrollIndicator={false}>
{Fillters.map((e) => ( {filters.map((e) => (
<TouchableOpacity <TouchableOpacity
key={e.value} key={e.id}
onPress={() => setFillters(e.value)} onPress={() => setFilterId(e.id)}
style={[ style={[
styles.itemFillter, styles.itemFillter,
fillter == e.value ? {borderColor: '#1473E6'} : null, filterId == e.id ? {borderColor: '#1473E6'} : null,
]}> ]}>
<AppText <Text
i18nKey={e.name} style={[
style={[ styles.txtFillter,
styles.txtFillter, filterId == e.id ? {color: '#1473E6'} : {},
fillter == e.value ? {color: '#1473E6'} : {}, ]}>{e.name}</Text>
]}></AppText> </TouchableOpacity>
</TouchableOpacity> ))}
))} </ScrollView>
</ScrollView> </View>
</View>
{data.length == 0 ? ( {data.length == 0 && !isRefresh ? (
<View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}> <View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
<AppText <AppText
i18nKey={'NoData'} i18nKey={'NoData'}
style={{ style={{
fontSize: 18, fontSize: 18,
fontWeight: 'bold', fontWeight: 'bold',
}}></AppText> }}></AppText>
</View>
) : (
<FlatList
style={{marginTop: HEIGHTXD(15)}}
keyExtractor={(item) => item.id}
data={data}
refreshing={isRefresh}
onRefresh={onRefresh}
onEndReachedThreshold={0.01}
onEndReached={(info) => {
onLoadMore();
}}
renderItem={({item, index}) => <Item item={item}
isEndItem={index == (data.length - 1)}
onPress={(item) => navigate.navigate(PRODUCTDETAIL)}/>}
/>
)}
</View> </View>
) : ( );
<FlatList
keyExtractor={(item) => item.id}
data={data}
refreshing={isRefresh}
onRefresh={onRefresh}
onEndReachedThreshold={0.01}
onEndReached={(info) => {
onLoadMore();
}}
renderItem={({item}) => <Item item={item}
onPress={(item) => navigate.navigate(PRODUCTDETAIL)}/>}
/>
)}
</View>
);
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
headerContainer: { headerContainer: {
paddingVertical: 10, paddingVertical: 10,
backgroundColor: 'white', backgroundColor: 'white',
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
paddingHorizontal: 10, paddingHorizontal: 10,
}, },
itemFillter: { itemFillter: {
borderRadius: 10, borderRadius: 10,
paddingVertical: 5, paddingVertical: 5,
paddingHorizontal: 10, paddingHorizontal: 10,
borderWidth: 1, borderWidth: 1,
borderColor: '#929292', borderColor: '#929292',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
marginRight: 10, marginRight: 10,
}, },
txtFillter: { txtFillter: {
fontSize: getFontXD(36), fontSize: getFontXD(36),
color: '#929292', color: '#929292',
fontWeight: 'bold', fontWeight: 'bold',
}, },
txtTitle: { txtTitle: {
fontSize: getFontXD(46), fontSize: getFontXD(46),
fontWeight: 'bold', fontWeight: 'bold',
}, },
}); });
export default EscrowView; export default EscrowView;
src/Screens/Transaction/DueDate/Item.js
...@@ -15,15 +15,17 @@ import { ...@@ -15,15 +15,17 @@ import {
} from '../../../Config/Functions'; } from '../../../Config/Functions';
import R from '../../../assets/R'; import R from '../../../assets/R';
import Block from '../../../components/Block'; import Block from '../../../components/Block';
import I18n from '../../../helper/i18/i18n';
const Item = (props) => { const Item = (props) => {
const {item} = props; const {item, isEndItem} = props;
console.log(item)
return ( return (
<View style={styles.container}> <View style={[styles.container, isEndItem && {marginBottom: HEIGHTXD(100)}]}>
<TouchableOpacity onPress={() => props.onPress(item)}> <TouchableOpacity onPress={() => props.onPress(item)}>
<Block flex={1} row> <Block flex={1} row>
<View style={styles.wrapDate}> <View style={styles.wrapDate}>
<Image source={R.images.iconRecharge} style={styles.imgIcon} /> <Image source={{uri: item.commoditiy.image_path}} style={styles.imgIcon} />
</View> </View>
<Block padding={[5, 10]} space={'between'} flex={1}> <Block padding={[5, 10]} space={'between'} flex={1}>
<View <View
...@@ -32,13 +34,13 @@ const Item = (props) => { ...@@ -32,13 +34,13 @@ const Item = (props) => {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
}}> }}>
<Text numberOfLines={2} style={styles.txtBlack}> <Text numberOfLines={2} style={[styles.txtBlack, {flexWrap: 'wrap', flex: 1}]} numberOfLines={1} ellipsizeMode='tail'>
Ngô CBOT {item.contract_name}
</Text> </Text>
<Text style={styles.txtMoney}>05/2022</Text> <Text style={styles.txtMoney}>{item.term}</Text>
</View> </View>
<Text style={styles.txtCode}>Mã hợp đồng:ZCEK22</Text> <Text style={styles.txtCode}>{`${I18n.t('ContactCode')}: ${item.contract_code}`}</Text>
<Text style={styles.txt}>29/04/2022-13/05/2022</Text> <Text style={styles.txt}>{item.open_interest_range}</Text>
</Block> </Block>
</Block> </Block>
</TouchableOpacity> </TouchableOpacity>
...@@ -50,7 +52,6 @@ export default Item; ...@@ -50,7 +52,6 @@ export default Item;
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
marginTop: 10,
paddingVertical: 10, paddingVertical: 10,
shadowColor: '#000', shadowColor: '#000',
shadowOffset: { shadowOffset: {
...@@ -62,8 +63,8 @@ const styles = StyleSheet.create({ ...@@ -62,8 +63,8 @@ const styles = StyleSheet.create({
elevation: 5, elevation: 5,
marginHorizontal: 10, marginHorizontal: 10,
backgroundColor: R.colors.white, backgroundColor: R.colors.white,
marginBottom: 10,
borderRadius: HEIGHTXD(30), borderRadius: HEIGHTXD(30),
marginVertical: HEIGHTXD(15)
}, },
wrapLeft: { wrapLeft: {
...@@ -94,14 +95,13 @@ const styles = StyleSheet.create({ ...@@ -94,14 +95,13 @@ const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
}, },
txtBlack: { txtBlack: {
fontSize: getFontXD(42), fontSize: getFontXD(50),
color: 'black', color: 'black',
fontWeight: 'bold',
}, },
imgIcon: { imgIcon: {
width: WIDTHXD(178), width: WIDTHXD(150),
height: HEIGHTXD(178), height: WIDTHXD(150),
resizeMode: 'contain', resizeMode: 'cover',
}, },
txtMoney: { txtMoney: {
fontSize: getFontXD(42), fontSize: getFontXD(42),
......
src/Screens/Transaction/Escrow/Escrow.js
...@@ -2,29 +2,62 @@ import React, {useState, useEffect} from 'react'; ...@@ -2,29 +2,62 @@ import React, {useState, useEffect} from 'react';
import {getListNotification} from '../../../apis/Functions/users'; import {getListNotification} from '../../../apis/Functions/users';
import EscrowView from './EscrowView'; import EscrowView from './EscrowView';
import I18n from '../../../helper/i18/i18n'; import I18n from '../../../helper/i18/i18n';
import {getListCategoryProduct, getTransactionListByCategory} from '../../../apis/Functions/Transaction';
import {Alert, Platform} from 'react-native';
import PriceListView from '../PriceList/PriceListView';
const Escrow = (props) => { const Escrow = (props) => {
const [selected, setSelected] = useState(''); const [selected, setSelected] = useState('');
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
const [data, setData] = useState([]); const [data, setData] = useState([]);
const [tottalPage, setTotalPage] = useState(1); const [tottalPage, setTotalPage] = useState(1);
const [isRefresh, setisRefresh] = useState(false); const [isRefresh, setIsRefresh] = useState(false);
const [fillter, setFillters] = useState('ALL'); const [filters, setFilters] = useState([]);
const [filterId, setFilterId] = useState(-1);
useEffect(() => { useEffect(() => {
getCategoryData();
}, []);
useEffect(() => {
setData([])
getData();
}, [filterId]);
const getCategoryData = async () => {
// setIsRefresh(true);
const res = await getListCategoryProduct({
keyword: '',
platform: Platform.OS,
page_size: 20,
page_index: 1,
type: 'PRODUCT',
});
if ((res.data.code = 200 && res.data.data)) {
let data = [];
data.push({id: -1, name: 'All'});
setFilters(data.concat([...res.data.data]));
} else {
Alert.alert(I18n.t('Notification'), res.data.message);
}
};
const onRefresh = () => {
setPage(1);
getData(); getData();
}, [fillter]); };
const getData = async () => { const getData = async () => {
setisRefresh(true); setIsRefresh(true);
setPage(1); setPage(1);
const res = await getListNotification({ const res = await getTransactionListByCategory({
keyword: '', keyword: '',
platform: Platform.OS, platform: Platform.OS,
page_size: 10, page_size: 10,
page_index: 1, page_index: 1,
type: fillter, type:'ESCROW',
category_id: filterId,
}); });
setisRefresh(false); setIsRefresh(false);
console.log('getData', res);
if ((res.data.code = 200 && res.data.data)) { if ((res.data.code = 200 && res.data.data)) {
setData(res.data.data); setData(res.data.data);
setTotalPage(res.data.meta.pages); setTotalPage(res.data.meta.pages);
...@@ -33,29 +66,28 @@ const Escrow = (props) => { ...@@ -33,29 +66,28 @@ const Escrow = (props) => {
} }
}; };
const onRefresh = () => {
getData();
};
const onLoadMore = () => { const onLoadMore = () => {
console.log(tottalPage); console.log(tottalPage);
if (page < tottalPage) getDataLoadMore(); if (page < tottalPage) {
getDataLoadMore();
}
}; };
const getDataLoadMore = async () => { const getDataLoadMore = async () => {
setisRefresh(true); setIsRefresh(true);
const res = await getListNotification({ const res = await getTransactionListByCategory({
keyword: '', keyword: '',
platform: Platform.OS, platform: Platform.OS,
page_size: 10, page_size: 10,
page_index: 1, page_index: page + 1,
type: fillter, type:'ESCROW',
category_id: filterId,
}); });
setPage(page + 1); setPage(page + 1);
if (res.data.code == 200) { if (res.data.code == 200) {
setData(data.concat(res.data.data)); setData(data.concat(res.data.data));
} }
setisRefresh(false); setIsRefresh(false);
}; };
return ( return (
...@@ -63,8 +95,9 @@ const Escrow = (props) => { ...@@ -63,8 +95,9 @@ const Escrow = (props) => {
onRefresh={onRefresh} onRefresh={onRefresh}
isRefresh={isRefresh} isRefresh={isRefresh}
onLoadMore={onLoadMore} onLoadMore={onLoadMore}
setFillters={setFillters} setFilterId={setFilterId}
fillter={fillter} filterId={filterId}
filters={filters}
data={data} data={data}
/> />
); );
......
src/Screens/Transaction/Escrow/EscrowView.js
import React, {useState} from 'react'; import React, {useState} from 'react';
import { import {
View, View,
Text, Text,
FlatList, FlatList,
StyleSheet, StyleSheet,
TouchableOpacity, TouchableOpacity,
ScrollView, ScrollView,
} from 'react-native'; } from 'react-native';
import HeaderDrawer from '../../../components/Header/HeaderDrawer'; import HeaderDrawer from '../../../components/Header/HeaderDrawer';
import Item from './Item'; import Item from './Item';
import {getFontXD} from '../../../Config/Functions'; import {getFontXD, HEIGHTXD} from '../../../Config/Functions';
import AppText from '../../../components/AppText'; import AppText from '../../../components/AppText';
import {PRODUCTDETAIL} from '../../../routers/ScreenNames'; import {PRODUCTDETAIL} from '../../../routers/ScreenNames';
import {useNavigation} from '@react-navigation/native'; import {useNavigation} from '@react-navigation/native';
const Fillters = [ const Fillters = [
{ {
id: '1', id: '1',
name: 'All', name: 'All',
value: 'ALL', value: 'ALL',
}, },
{ {
id: '2', id: '2',
name: 'Deposit', name: 'Deposit',
value: 'DEPOSIT', value: 'DEPOSIT',
}, },
{ {
id: '3', id: '3',
name: 'Withdraw', name: 'Withdraw',
value: 'WITHDRAW', value: 'WITHDRAW',
}, },
{ {
id: '4', id: '4',
name: 'Transfer', name: 'Transfer',
value: 'TRANSFER', value: 'TRANSFER',
}, },
]; ];
const EscrowView = (props) => { const EscrowView = (props) => {
const {onRefresh, isRefresh, onLoadMore, setFillters, fillter, data} = props; const {onRefresh, isRefresh, onLoadMore, setFilterId, filters, filterId, data} = props;
const navigate = useNavigation(); const navigate = useNavigation();
return ( return (
<View style={{flex: 1}}> <View style={{flex: 1}}>
<View style={styles.headerContainer}> <View style={styles.headerContainer}>
<ScrollView horizontal showsHorizontalScrollIndicator={false}> <ScrollView horizontal showsHorizontalScrollIndicator={false}>
{Fillters.map((e) => ( {filters.map((e) => (
<TouchableOpacity <TouchableOpacity
key={e.value} key={e.id}
onPress={() => setFillters(e.value)} onPress={() => setFilterId(e.id)}
style={[ style={[
styles.itemFillter, styles.itemFillter,
fillter == e.value ? {borderColor: '#1473E6'} : null, filterId == e.id ? {borderColor: '#1473E6'} : null,
]}> ]}>
<AppText <Text
i18nKey={e.name} style={[
style={[ styles.txtFillter,
styles.txtFillter, filterId == e.id ? {color: '#1473E6'} : {},
fillter == e.value ? {color: '#1473E6'} : {}, ]}>{e.name}</Text>
]}></AppText> </TouchableOpacity>
</TouchableOpacity> ))}
))} </ScrollView>
</ScrollView> </View>
</View>
{data.length == 0 ? ( {data.length == 0 ? (
<View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}> <View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
<AppText <AppText
i18nKey={'NoData'} i18nKey={'NoData'}
style={{ style={{
fontSize: 18, fontSize: 18,
fontWeight: 'bold', fontWeight: 'bold',
}}></AppText> }}></AppText>
</View>
) : (
<FlatList
style={{marginTop: HEIGHTXD(15)}}
keyExtractor={(item) => item.id}
data={data}
refreshing={isRefresh}
onRefresh={onRefresh}
onEndReachedThreshold={0.01}
onEndReached={(info) => {
onLoadMore();
}}
renderItem={({item, index}) => (
<Item
item={item}
isEndItem={index == data.length - 1}
onPress={(item) => navigate.navigate(PRODUCTDETAIL)}
/>
)}
/>
)}
</View> </View>
) : ( );
<FlatList
keyExtractor={(item) => item.id}
data={data}
refreshing={isRefresh}
onRefresh={onRefresh}
onEndReachedThreshold={0.01}
onEndReached={(info) => {
onLoadMore();
}}
renderItem={({item}) => (
<Item
item={item}
onPress={(item) => navigate.navigate(PRODUCTDETAIL)}
/>
)}
/>
)}
</View>
);
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
headerContainer: { headerContainer: {
paddingVertical: 10, paddingVertical: 10,
backgroundColor: 'white', backgroundColor: 'white',
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
paddingHorizontal: 10, paddingHorizontal: 10,
}, },
itemFillter: { itemFillter: {
borderRadius: 10, borderRadius: 10,
paddingVertical: 5, paddingVertical: 5,
paddingHorizontal: 10, paddingHorizontal: 10,
borderWidth: 1, borderWidth: 1,
borderColor: '#929292', borderColor: '#929292',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
marginRight: 10, marginRight: 10,
}, },
txtFillter: { txtFillter: {
fontSize: getFontXD(36), fontSize: getFontXD(36),
color: '#929292', color: '#929292',
fontWeight: 'bold', fontWeight: 'bold',
}, },
txtTitle: { txtTitle: {
fontSize: getFontXD(46), fontSize: getFontXD(46),
fontWeight: 'bold', fontWeight: 'bold',
}, },
}); });
export default EscrowView; export default EscrowView;
src/Screens/Transaction/Escrow/Item.js
...@@ -17,13 +17,13 @@ import R from '../../../assets/R'; ...@@ -17,13 +17,13 @@ import R from '../../../assets/R';
import Block from '../../../components/Block'; import Block from '../../../components/Block';
const Item = (props) => { const Item = (props) => {
const {item} = props; const {item, isEndItem} = props;
return ( return (
<View style={styles.container}> <View style={[styles.container, isEndItem && {marginBottom: HEIGHTXD(100)}]}>
<TouchableOpacity onPress={() => props.onPress(item)}> <TouchableOpacity onPress={() => props.onPress(item)}>
<Block flex={1} row> <Block flex={1} row>
<View style={styles.wrapDate}> <View style={styles.wrapDate}>
<Image source={R.images.iconRecharge} style={styles.imgIcon} /> <Image source={{uri: item.image_path}} style={styles.imgIcon} />
</View> </View>
<Block padding={[5, 10]} space={'between'} flex={1}> <Block padding={[5, 10]} space={'between'} flex={1}>
<View <View
...@@ -32,12 +32,12 @@ const Item = (props) => { ...@@ -32,12 +32,12 @@ const Item = (props) => {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
}}> }}>
<Text numberOfLines={2} style={styles.txtBlack}> <Text numberOfLines={2} style={[styles.txtBlack, {flexWrap: 'wrap', flex: 1}]} numberOfLines={1} ellipsizeMode='tail'>
Ngô CBOT {item.name}
</Text> </Text>
<Text style={styles.txtMoney}>{toPriceVnd(300000)}</Text> <Text style={styles.txtMoney}>{item.escrow > 0 ? toPriceVnd(item.escrow) : 0}</Text>
</View> </View>
<Text style={styles.txt}>ZCE</Text> <Text style={styles.txt}>{item.code}</Text>
</Block> </Block>
</Block> </Block>
</TouchableOpacity> </TouchableOpacity>
...@@ -49,7 +49,6 @@ export default Item; ...@@ -49,7 +49,6 @@ export default Item;
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
marginTop: 10,
paddingVertical: 10, paddingVertical: 10,
shadowColor: '#000', shadowColor: '#000',
shadowOffset: { shadowOffset: {
...@@ -61,8 +60,8 @@ const styles = StyleSheet.create({ ...@@ -61,8 +60,8 @@ const styles = StyleSheet.create({
elevation: 5, elevation: 5,
marginHorizontal: 10, marginHorizontal: 10,
backgroundColor: R.colors.white, backgroundColor: R.colors.white,
marginBottom: 10,
borderRadius: HEIGHTXD(30), borderRadius: HEIGHTXD(30),
marginVertical: HEIGHTXD(15)
}, },
wrapLeft: { wrapLeft: {
...@@ -77,12 +76,10 @@ const styles = StyleSheet.create({ ...@@ -77,12 +76,10 @@ const styles = StyleSheet.create({
txtTitle: { txtTitle: {
fontSize: getFontXD(42), fontSize: getFontXD(42),
color: R.colors.black, color: R.colors.black,
fontWeight: 'bold',
}, },
txt: { txt: {
fontSize: getFontXD(39), fontSize: getFontXD(36),
color: '#929292', color: R.colors.black,
fontStyle: 'italic',
}, },
rowBet: { rowBet: {
flexDirection: 'row', flexDirection: 'row',
...@@ -90,14 +87,13 @@ const styles = StyleSheet.create({ ...@@ -90,14 +87,13 @@ const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
}, },
txtBlack: { txtBlack: {
fontSize: getFontXD(42), fontSize: getFontXD(50),
color: 'black', color: 'black',
fontWeight: 'bold',
}, },
imgIcon: { imgIcon: {
width: WIDTHXD(178), width: WIDTHXD(178),
height: HEIGHTXD(178), height: WIDTHXD(178),
resizeMode: 'contain', resizeMode: 'cover',
}, },
txtMoney: { txtMoney: {
fontSize: getFontXD(42), fontSize: getFontXD(42),
......
src/Screens/Transaction/PriceList/Item.js
...@@ -22,7 +22,7 @@ const Item = (props) => { ...@@ -22,7 +22,7 @@ const Item = (props) => {
<View style={[styles.container, isEndItem && {marginBottom: HEIGHTXD(100)}]}> <View style={[styles.container, isEndItem && {marginBottom: HEIGHTXD(100)}]}>
<TouchableOpacity onPress={() => props.onPress(item)}> <TouchableOpacity onPress={() => props.onPress(item)}>
<Block flex={1} row> <Block flex={1} row>
<Image source={R.images.iconRecharge} style={styles.imgIcon} /> <Image source={{uri: item.image_path}} style={styles.imgIcon} />
<Block padding={[0, WIDTHXD(40)]} space={'between'} flex={1}> <Block padding={[0, WIDTHXD(40)]} space={'between'} flex={1}>
<View <View
style={{ style={{
...@@ -87,8 +87,8 @@ const styles = StyleSheet.create({ ...@@ -87,8 +87,8 @@ const styles = StyleSheet.create({
}, },
imgIcon: { imgIcon: {
width: WIDTHXD(150), width: WIDTHXD(150),
height: HEIGHTXD(150), height: WIDTHXD(150),
resizeMode: 'contain', resizeMode: 'cover',
marginLeft: WIDTHXD(35) marginLeft: WIDTHXD(35)
}, },
txtMoney: { txtMoney: {
......
src/Screens/Transaction/PriceList/PriceList.js
...@@ -52,6 +52,7 @@ const PriceList = (props) => { ...@@ -52,6 +52,7 @@ const PriceList = (props) => {
platform: Platform.OS, platform: Platform.OS,
page_size: 10, page_size: 10,
page_index: 1, page_index: 1,
type:'PRICE_TABLE',
category_id: filterId, category_id: filterId,
}); });
setIsRefresh(false); setIsRefresh(false);
...@@ -78,6 +79,7 @@ const PriceList = (props) => { ...@@ -78,6 +79,7 @@ const PriceList = (props) => {
platform: Platform.OS, platform: Platform.OS,
page_size: 10, page_size: 10,
page_index: page + 1, page_index: page + 1,
type:'PRICE_TABLE',
category_id: filterId, category_id: filterId,
}); });
setPage(page + 1); setPage(page + 1);
......
src/Screens/Transaction/TimeTransaction/Item.js
import React from 'react'; import React from 'react';
import { import {
View, View,
Text, Text,
StyleSheet, StyleSheet,
TouchableOpacity, TouchableOpacity,
Image, Image,
Alert,
} from 'react-native'; } from 'react-native';
import { import {
getFontXD, getFontXD,
HEIGHTXD, HEIGHTXD,
WIDTHXD, WIDTHXD,
toPriceVnd,
} from '../../../Config/Functions'; } from '../../../Config/Functions';
import R from '../../../assets/R'; import R from '../../../assets/R';
import Block from '../../../components/Block'; import Block from '../../../components/Block';
const Item = (props) => { const Item = (props) => {
const {item} = props; const {item, isEndItem} = props;
return ( return (
<View style={styles.container}> <View style={[styles.container, isEndItem && {marginBottom: HEIGHTXD(100)}]}>
<TouchableOpacity onPress={() => props.onPress(item)}> <TouchableOpacity onPress={() => props.onPress(item)}>
<Block flex={1} row> <Block flex={1} row>
<View style={styles.wrapDate}> <View style={styles.wrapDate}>
<Image source={R.images.iconRecharge} style={styles.imgIcon} /> <Image source={{uri: item.image_path}} style={styles.imgIcon}/>
</View> </View>
<Block padding={[5, 10]} space={'between'} flex={1}> <Block padding={[0, 10]} space={'between'} flex={1}>
<View <View
style={{ style={{
flex: 1, flex: 1,
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
}}> }}>
<Text numberOfLines={2} style={styles.txtBlack}> <Text numberOfLines={2} style={[styles.txtBlack, {flexWrap: 'wrap', flex: 1}]}
Ngô CBOT numberOfLines={1} ellipsizeMode='tail'>
</Text> {item.name}
<Text style={styles.txtMoney}>Thứ 2-Thứ 6</Text> </Text>
</View> <Text style={styles.txtMoney}>{item.trans_time}</Text>
<Text style={styles.txt}>Phiên 1: 07:00-19:45</Text> </View>
<Text style={styles.txt}>Phiên 2: 20:30-01:20</Text> {item.trans_session_list.map((sessionItem) => (
</Block> <Text style={[styles.txt, {marginTop: HEIGHTXD(20)}]}>{sessionItem}</Text>
</Block> )
</TouchableOpacity> )}
</View> </Block>
); </Block>
</TouchableOpacity>
</View>
);
}; };
export default Item; export default Item;
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
marginTop: 10, paddingVertical: HEIGHTXD(30),
paddingVertical: 10, shadowColor: '#000',
shadowColor: '#000', shadowOffset: {
shadowOffset: { width: 0,
width: 0, height: 2,
height: 2, },
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
marginHorizontal: 10,
backgroundColor: R.colors.white,
borderRadius: HEIGHTXD(30),
marginVertical: HEIGHTXD(15),
}, },
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
marginHorizontal: 10,
backgroundColor: R.colors.white,
marginBottom: 10,
borderRadius: HEIGHTXD(30),
},
wrapLeft: { wrapLeft: {
width: WIDTHXD(16), width: WIDTHXD(16),
borderTopLeftRadius: HEIGHTXD(30), borderTopLeftRadius: HEIGHTXD(30),
borderBottomStartRadius: HEIGHTXD(30), borderBottomStartRadius: HEIGHTXD(30),
}, },
wrapDate: { wrapDate: {
justifyContent: 'center', justifyContent: 'center',
paddingLeft: 10, paddingLeft: 10,
}, },
txtTitle: { txtTitle: {
fontSize: getFontXD(42), fontSize: getFontXD(42),
color: R.colors.black, color: R.colors.black,
fontWeight: 'bold', },
}, txt: {
txt: { fontSize: getFontXD(36),
fontSize: getFontXD(36), },
}, rowBet: {
rowBet: { flexDirection: 'row',
flexDirection: 'row', justifyContent: 'space-between',
justifyContent: 'space-between', alignItems: 'center',
alignItems: 'center', },
}, txtBlack: {
txtBlack: { fontSize: getFontXD(50),
fontSize: getFontXD(42), color: 'black',
color: 'black', },
fontWeight: 'bold', imgIcon: {
}, width: WIDTHXD(150),
imgIcon: { height: WIDTHXD(150),
width: WIDTHXD(178), resizeMode: 'cover',
height: HEIGHTXD(178), },
resizeMode: 'contain', txtMoney: {
}, fontSize: getFontXD(42),
txtMoney: { color: R.colors.main,
fontSize: getFontXD(42), },
color: R.colors.main,
},
}); });
src/Screens/Transaction/TimeTransaction/TimeTransaction.js
...@@ -2,29 +2,61 @@ import React, {useState, useEffect} from 'react'; ...@@ -2,29 +2,61 @@ import React, {useState, useEffect} from 'react';
import {getListNotification} from '../../../apis/Functions/users'; import {getListNotification} from '../../../apis/Functions/users';
import TimeTransactionView from './TimeTransactionView'; import TimeTransactionView from './TimeTransactionView';
import I18n from '../../../helper/i18/i18n'; import I18n from '../../../helper/i18/i18n';
import {getListCategoryProduct, getTransactionListByCategory} from '../../../apis/Functions/Transaction';
import {Alert, Platform} from 'react-native';
import PriceListView from '../PriceList/PriceListView';
const PriceList = (props) => { const PriceList = (props) => {
const [selected, setSelected] = useState(''); const [selected, setSelected] = useState('');
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
const [data, setData] = useState([]); const [data, setData] = useState([]);
const [tottalPage, setTotalPage] = useState(1); const [tottalPage, setTotalPage] = useState(1);
const [isRefresh, setisRefresh] = useState(false); const [isRefresh, setIsRefresh] = useState(false);
const [fillter, setFillters] = useState('ALL'); const [filters, setFilters] = useState([]);
const [filterId, setFilterId] = useState(-1);
useEffect(() => { useEffect(() => {
getCategoryData();
}, []);
useEffect(() => {
setData([])
getData();
}, [filterId]);
const getCategoryData = async () => {
// setIsRefresh(true);
const res = await getListCategoryProduct({
keyword: '',
platform: Platform.OS,
page_size: 20,
page_index: 1,
type: 'PRODUCT',
});
if ((res.data.code = 200 && res.data.data)) {
let data = [];
data.push({id: -1, name: 'All'});
setFilters(data.concat([...res.data.data]));
} else {
Alert.alert(I18n.t('Notification'), res.data.message);
}
};
const onRefresh = () => {
setPage(1);
getData(); getData();
}, [fillter]); };
const getData = async () => { const getData = async () => {
setisRefresh(true); setIsRefresh(true);
setPage(1); setPage(1);
const res = await getListNotification({ const res = await getTransactionListByCategory({
keyword: '', keyword: '',
platform: Platform.OS, platform: Platform.OS,
page_size: 10, page_size: 10,
page_index: 1, page_index: 1,
type: fillter, type:'TRANSACTION_TIME',
category_id: filterId,
}); });
setisRefresh(false); setIsRefresh(false);
if ((res.data.code = 200 && res.data.data)) { if ((res.data.code = 200 && res.data.data)) {
setData(res.data.data); setData(res.data.data);
setTotalPage(res.data.meta.pages); setTotalPage(res.data.meta.pages);
...@@ -33,29 +65,28 @@ const PriceList = (props) => { ...@@ -33,29 +65,28 @@ const PriceList = (props) => {
} }
}; };
const onRefresh = () => {
getData();
};
const onLoadMore = () => { const onLoadMore = () => {
console.log(tottalPage); console.log(tottalPage);
if (page < tottalPage) getDataLoadMore(); if (page < tottalPage) {
getDataLoadMore();
}
}; };
const getDataLoadMore = async () => { const getDataLoadMore = async () => {
setisRefresh(true); setIsRefresh(true);
const res = await getListNotification({ const res = await getTransactionListByCategory({
keyword: '', keyword: '',
platform: Platform.OS, platform: Platform.OS,
page_size: 10, page_size: 10,
page_index: 1, page_index: page + 1,
type: fillter, type:'TRANSACTION_TIME',
category_id: filterId,
}); });
setPage(page + 1); setPage(page + 1);
if (res.data.code == 200) { if (res.data.code == 200) {
setData(data.concat(res.data.data)); setData(data.concat(res.data.data));
} }
setisRefresh(false); setIsRefresh(false);
}; };
return ( return (
...@@ -63,8 +94,9 @@ const PriceList = (props) => { ...@@ -63,8 +94,9 @@ const PriceList = (props) => {
onRefresh={onRefresh} onRefresh={onRefresh}
isRefresh={isRefresh} isRefresh={isRefresh}
onLoadMore={onLoadMore} onLoadMore={onLoadMore}
setFillters={setFillters} setFilterId={setFilterId}
fillter={fillter} filterId={filterId}
filters={filters}
data={data} data={data}
/> />
); );
......
src/Screens/Transaction/TimeTransaction/TimeTransactionView.js
import React, {useState} from 'react'; import React, {useState} from 'react';
import { import {
View, View,
Text, Text,
FlatList, FlatList,
StyleSheet, StyleSheet,
TouchableOpacity, TouchableOpacity,
ScrollView, ScrollView,
} from 'react-native'; } from 'react-native';
import HeaderDrawer from '../../../components/Header/HeaderDrawer'; import HeaderDrawer from '../../../components/Header/HeaderDrawer';
import Item from './Item'; import Item from './Item';
import {getFontXD} from '../../../Config/Functions'; import {getFontXD, HEIGHTXD} from '../../../Config/Functions';
import AppText from '../../../components/AppText'; import AppText from '../../../components/AppText';
import {useNavigation} from '@react-navigation/native'; import {useNavigation} from '@react-navigation/native';
import {PRODUCTDETAIL} from '../../../routers/ScreenNames'; import {PRODUCTDETAIL} from '../../../routers/ScreenNames';
const Fillters = [ const Fillters = [
{ {
id: '1', id: '1',
name: 'All', name: 'All',
value: 'ALL', value: 'ALL',
}, },
{ {
id: '2', id: '2',
name: 'Deposit', name: 'Deposit',
value: 'DEPOSIT', value: 'DEPOSIT',
}, },
{ {
id: '3', id: '3',
name: 'Withdraw', name: 'Withdraw',
value: 'WITHDRAW', value: 'WITHDRAW',
}, },
{ {
id: '4', id: '4',
name: 'Transfer', name: 'Transfer',
value: 'TRANSFER', value: 'TRANSFER',
}, },
]; ];
const NotificaitonView = (props) => { const NotificaitonView = (props) => {
const {onRefresh, isRefresh, onLoadMore, setFillters, fillter, data} = props; const {onRefresh, isRefresh, onLoadMore, setFilterId, filters, filterId, data} = props;
const navigate = useNavigation(); const navigate = useNavigation();
return ( return (
<View style={{flex: 1}}> <View style={{flex: 1}}>
<View style={styles.headerContainer}> <View style={styles.headerContainer}>
<ScrollView horizontal showsHorizontalScrollIndicator={false}> <ScrollView horizontal showsHorizontalScrollIndicator={false}>
{Fillters.map((e) => ( {filters.map((e) => (
<TouchableOpacity <TouchableOpacity
key={e.value} key={e.id}
onPress={() => setFillters(e.value)} onPress={() => setFilterId(e.id)}
style={[ style={[
styles.itemFillter, styles.itemFillter,
fillter == e.value ? {borderColor: '#1473E6'} : null, filterId == e.id ? {borderColor: '#1473E6'} : null,
]}> ]}>
<AppText <Text
i18nKey={e.name} style={[
style={[ styles.txtFillter,
styles.txtFillter, filterId == e.id ? {color: '#1473E6'} : {},
fillter == e.value ? {color: '#1473E6'} : {}, ]}>{e.name}</Text>
]}></AppText> </TouchableOpacity>
</TouchableOpacity> ))}
))} </ScrollView>
</ScrollView> </View>
</View>
{data.length == 0 ? ( {data.length == 0 && !isRefresh ? (
<View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}> <View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
<AppText <AppText
i18nKey={'NoData'} i18nKey={'NoData'}
style={{ style={{
fontSize: 18, fontSize: 18,
fontWeight: 'bold', fontWeight: 'bold',
}}></AppText> }}></AppText>
</View>
) : (
<FlatList
style={{marginTop: HEIGHTXD(15)}}
keyExtractor={(item) => item.id}
data={data}
refreshing={isRefresh}
onRefresh={onRefresh}
onEndReachedThreshold={0.01}
onEndReached={(info) => {
onLoadMore();
}}
renderItem={({item, index}) => <Item item={item}
isEndItem={index == (data.length - 1)}
onPress={(item) => navigate.navigate(PRODUCTDETAIL)}/>}
/>
)}
</View> </View>
) : ( );
<FlatList
keyExtractor={(item) => item.id}
data={data}
refreshing={isRefresh}
onRefresh={onRefresh}
onEndReachedThreshold={0.01}
onEndReached={(info) => {
onLoadMore();
}}
renderItem={({item}) => <Item item={item}
onPress={(item) => navigate.navigate(PRODUCTDETAIL)}/>}
/>
)}
</View>
);
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
headerContainer: { headerContainer: {
paddingVertical: 10, paddingVertical: 10,
backgroundColor: 'white', backgroundColor: 'white',
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
paddingHorizontal: 10, paddingHorizontal: 10,
}, },
itemFillter: { itemFillter: {
borderRadius: 10, borderRadius: 10,
paddingVertical: 5, paddingVertical: 5,
paddingHorizontal: 10, paddingHorizontal: 10,
borderWidth: 1, borderWidth: 1,
borderColor: '#929292', borderColor: '#929292',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
marginRight: 10, marginRight: 10,
}, },
txtFillter: { txtFillter: {
fontSize: getFontXD(36), fontSize: getFontXD(36),
color: '#929292', color: '#929292',
fontWeight: 'bold', fontWeight: 'bold',
}, },
txtTitle: { txtTitle: {
fontSize: getFontXD(46), fontSize: getFontXD(46),
fontWeight: 'bold', fontWeight: 'bold',
}, },
}); });
export default NotificaitonView; export default NotificaitonView;
src/apis/url.js
...@@ -40,5 +40,5 @@ export default { ...@@ -40,5 +40,5 @@ export default {
urlGetNewestVersionInfo: root + 'api/v1/settings/version', urlGetNewestVersionInfo: root + 'api/v1/settings/version',
//Transaction //Transaction
urlGetTransactionListByCategory: `${root}api/v1/transactions/price-table`, urlGetTransactionListByCategory: `${root}api/v1/transactions/products`,
}; };
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