869 lines
28 KiB
JavaScript
869 lines
28 KiB
JavaScript
|
|
||
|
|
import React, {Component} from 'react';
|
||
|
|
import {
|
||
|
|
Platform,
|
||
|
|
StyleSheet,
|
||
|
|
AppState,
|
||
|
|
FlatList,
|
||
|
|
ProgressBarAndroid,
|
||
|
|
TouchableOpacity,
|
||
|
|
Text,
|
||
|
|
View,
|
||
|
|
Animated,
|
||
|
|
StatusBar
|
||
|
|
} from 'react-native';
|
||
|
|
import ActionButton from 'react-native-action-button';
|
||
|
|
import Icon from 'react-native-vector-icons/MaterialIcons';
|
||
|
|
import {responsiveFontSize,responsiveHeight,responsiveWidth} from 'react-native-responsive-dimensions';
|
||
|
|
import {HistoryListItem,HistoryItemSectionned} from './HistoryItem';
|
||
|
|
import {credrequester} from './../../route.json';
|
||
|
|
import {loadDemandeCredit,loadMyDemandeCredit} from './../../webservice/HistoryRequestApi';
|
||
|
|
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
|
||
|
|
import BaseScreen from './../../screens/BaseScreen'
|
||
|
|
import Button from 'apsl-react-native-button'
|
||
|
|
import {readUser} from "../../webservice/AuthApi";
|
||
|
|
import Calendar from 'react-native-calendario';
|
||
|
|
let route=require('./../../route.json')
|
||
|
|
let moment=require('moment-timezone')
|
||
|
|
let theme=require('./../../utils/theme.json')
|
||
|
|
import {primary,primaryDark,accent,purpleLight,primaryLight} from './../../utils/theme.json';
|
||
|
|
import IndicatorViewPager from "rn-viewpager/viewpager/IndicatorViewPager";
|
||
|
|
import {PagerTabIndicator,PagerTitleIndicator,PagerDotIndicator} from 'rn-viewpager'
|
||
|
|
type Props = {};
|
||
|
|
var sortIcons;
|
||
|
|
var sectionIcons;
|
||
|
|
import I18n from 'react-native-i18n'
|
||
|
|
require('./../../utils/Translations')
|
||
|
|
import { SinglePickerMaterialDialog } from 'react-native-material-dialog';
|
||
|
|
import {Header} from "react-native-elements";
|
||
|
|
import {withNavigationFocus} from "react-navigation";
|
||
|
|
import IconWithBadge from "../IconWithBadge";
|
||
|
|
import { Appbar, Paragraph, Menu, Divider, Provider } from 'react-native-paper';
|
||
|
|
class MyHistory extends React.Component{
|
||
|
|
static navigatorStyle = {
|
||
|
|
navBarBackgroundColor: primary,
|
||
|
|
statusBarColor: primaryDark,
|
||
|
|
navBarTextColor: '#FFFFFF',
|
||
|
|
navBarButtonColor: '#FFFFFF',
|
||
|
|
contextualMenuStatusBarColor:theme.accent,
|
||
|
|
contextualMenuBackgroundColor: theme.accentLight,
|
||
|
|
contextualMenuButtonsColor: '#ffffff'
|
||
|
|
|
||
|
|
};
|
||
|
|
static navigationOptions =({navigation})=> {
|
||
|
|
const {routeName}=navigation.state
|
||
|
|
return {
|
||
|
|
|
||
|
|
tabBarLabel:routeName==="myDemand"?I18n.t('MY_DEMAND'): I18n.t('DEMAND_RECEIVE'),
|
||
|
|
tabBarIcon:({focused,horizontal,tintColor})=>{
|
||
|
|
return (<IconWithBadge
|
||
|
|
badgeCount={navigation.getParam("count",0)}
|
||
|
|
size={20}
|
||
|
|
name={routeName==="myDemand"?"mail": "inbox"}
|
||
|
|
color={focused?tintColor:"grey"}
|
||
|
|
/>)
|
||
|
|
},
|
||
|
|
|
||
|
|
drawerLabel: I18n.t('CREDIT_MANAGE'),
|
||
|
|
drawerIcon: ({ tintColor }) => (
|
||
|
|
<Icon
|
||
|
|
name={'credit-card'}
|
||
|
|
size={24}
|
||
|
|
/>
|
||
|
|
),
|
||
|
|
}};
|
||
|
|
|
||
|
|
constructor(props) {
|
||
|
|
super(props, true);
|
||
|
|
this.state = this.initState();
|
||
|
|
readUser().then((user)=>{this.setState({user:user})})
|
||
|
|
this._populateIcons().then(() => {
|
||
|
|
});
|
||
|
|
|
||
|
|
this.navigation=this.props.navigation
|
||
|
|
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
navigationButtonPressed({ buttonId }) {
|
||
|
|
if (buttonId === 'id') {
|
||
|
|
this.showFilter();
|
||
|
|
}else if(buttonId==='sectionned'){
|
||
|
|
this.setState({isSectionned:!this.state.isSectionned})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
showFilter() {
|
||
|
|
|
||
|
|
/*if (this.state.filter) {
|
||
|
|
Navigation.mergeOptions(route.stackRoot,
|
||
|
|
{
|
||
|
|
topBar: {
|
||
|
|
rightButtons: [
|
||
|
|
{
|
||
|
|
title: 'Non Traité',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Traité',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Période',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Tout',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Trier par',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
onButtonPressed: (index) => {
|
||
|
|
let data = this.state.conserve
|
||
|
|
console.log(index)
|
||
|
|
console.log(data);
|
||
|
|
|
||
|
|
if (data !== null) {
|
||
|
|
let filtre = "";
|
||
|
|
if (index < 2) {
|
||
|
|
switch (index) {
|
||
|
|
case 0:
|
||
|
|
filtre = I18n.t('NO_TREAT')
|
||
|
|
break;
|
||
|
|
case 1:
|
||
|
|
filtre = I18n.t('TREAT');
|
||
|
|
break;
|
||
|
|
|
||
|
|
}
|
||
|
|
let fi = data.filter(item => item.statut === filtre)
|
||
|
|
this.setState({listdata: fi, filter: true})
|
||
|
|
} else if (index === 2) {
|
||
|
|
this.setState({panelVisible: true})
|
||
|
|
} else {
|
||
|
|
this.setState({listdata: data, filter: false})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
);
|
||
|
|
|
||
|
|
} else {
|
||
|
|
Navigation.mergeOptions(route.stackRoot,
|
||
|
|
{
|
||
|
|
topBar: {
|
||
|
|
rightButtons: [
|
||
|
|
{
|
||
|
|
title: I18n.t('NO_TREAT'),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: I18n.t('TREAT'),
|
||
|
|
}
|
||
|
|
, {
|
||
|
|
title: I18n.t('PERIOD'),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Trier par',
|
||
|
|
}, {
|
||
|
|
title: '',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
onButtonPressed: (index) => {
|
||
|
|
let data = this.state.conserve
|
||
|
|
if (data != null && data.length > 0) {
|
||
|
|
var filtre = "";
|
||
|
|
if (index < 2) {
|
||
|
|
switch (index) {
|
||
|
|
case 0:
|
||
|
|
filtre = I18n.t('NO_TREATED');
|
||
|
|
break;
|
||
|
|
case 1:
|
||
|
|
filtre = I18n.t('TREATED');
|
||
|
|
break;
|
||
|
|
|
||
|
|
}
|
||
|
|
let fi = data.filter(item => item.statut === filtre)
|
||
|
|
this.setState({listdata: fi, filter: true})
|
||
|
|
} else if (index === 2) {
|
||
|
|
this.setState({panelVisible: true})
|
||
|
|
this.props.navigator.showContextualMenu(
|
||
|
|
{
|
||
|
|
rightButtons: [
|
||
|
|
{
|
||
|
|
title: I18n.t('CANCEL'),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: I18n.t('FILTER'),
|
||
|
|
},
|
||
|
|
|
||
|
|
],
|
||
|
|
onButtonPressed: (index) => {
|
||
|
|
console.log(index)
|
||
|
|
|
||
|
|
switch (index) {
|
||
|
|
case 1:
|
||
|
|
let {dateend, datestart} = this.state;
|
||
|
|
this.onfilterPress();
|
||
|
|
}
|
||
|
|
this.setState({panelVisible: false});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
);
|
||
|
|
} else {
|
||
|
|
this.setState({listdata: data, filter: false})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
}*/
|
||
|
|
}
|
||
|
|
|
||
|
|
_populateIcons = function () {
|
||
|
|
return new Promise(function (resolve, reject) {
|
||
|
|
Promise.all(
|
||
|
|
[
|
||
|
|
Icon.getImageSource('sort', 30),
|
||
|
|
Icon.getImageSource('layer-group', 30),
|
||
|
|
]
|
||
|
|
).then((values) => {
|
||
|
|
sortIcons = values[0];
|
||
|
|
sectionIcons=values[1];
|
||
|
|
resolve(true);
|
||
|
|
}).catch((error) => {
|
||
|
|
console.log(error);
|
||
|
|
reject(error);
|
||
|
|
}).done();
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
initState() {
|
||
|
|
return {
|
||
|
|
user:{},
|
||
|
|
listdata: [],
|
||
|
|
listdataSend:[],
|
||
|
|
conserve: [],
|
||
|
|
count:0,
|
||
|
|
translateAnim:new Animated.Value(0),
|
||
|
|
visibleMenu:false,
|
||
|
|
appState: AppState.currentState,
|
||
|
|
filter: false,
|
||
|
|
sortIcons: null,
|
||
|
|
panelVisible: false,
|
||
|
|
filder_disable: true,
|
||
|
|
datestartformated: 'La date de debut',
|
||
|
|
dateendformated: 'La date de fin',
|
||
|
|
datestart: null,
|
||
|
|
dateend: null,
|
||
|
|
isLoaded:false,
|
||
|
|
isSectionned:false,
|
||
|
|
isDateTimePickerVisible: false,
|
||
|
|
isDateEndTimePickerVisible: false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
updateList(data) {
|
||
|
|
if (!this.state.filter) {
|
||
|
|
let rev = data.reverse()
|
||
|
|
this.setState({listdata: rev, conserve: rev, isLoaded: true});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
updateMyList(data) {
|
||
|
|
if (!this.state.filter) {
|
||
|
|
let rev = data.reverse()
|
||
|
|
this.setState({listdataSend: rev, conserve: rev, isLoaded: true});
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
componentDidMount() {
|
||
|
|
const {routeName}=this.navigation.state
|
||
|
|
this.setState({position:routeName==="myDemand"?0:1})
|
||
|
|
this.refreshData()
|
||
|
|
this.intervaller=setInterval(()=>{
|
||
|
|
this.refreshData(false)
|
||
|
|
}, 2000)
|
||
|
|
this.animateSlidingUp(false)
|
||
|
|
this.props.navigation.addListener("didFocus", () => {
|
||
|
|
this.refreshData(false)
|
||
|
|
console.warn("loading")
|
||
|
|
|
||
|
|
})
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
componentWillUnmount() {
|
||
|
|
clearInterval(this.intervaller)
|
||
|
|
}
|
||
|
|
|
||
|
|
renderList(list) {
|
||
|
|
if(this.state.isLoaded && list instanceof Array){
|
||
|
|
let data = list;
|
||
|
|
if(data!==null) {
|
||
|
|
if (data.length > 0) {
|
||
|
|
return (<HistoryListItem
|
||
|
|
list={list}
|
||
|
|
refreshing={()=>{this.refreshData()}}
|
||
|
|
isRefreshing={this.state.isRefreshing}
|
||
|
|
navigator={this.props.navigation}
|
||
|
|
style={styles.listbackground}/>)
|
||
|
|
} else if (this.state.filter) {
|
||
|
|
|
||
|
|
return (
|
||
|
|
<View style={styles.emptyListe}>
|
||
|
|
<Text>{I18n.t('NO_ITEM_REQUEST')}</Text>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}else if(data.length===0){
|
||
|
|
return (
|
||
|
|
<View style={styles.emptyListe}>
|
||
|
|
<Text>{I18n.t('NO_ITEM_REQUEST')}</Text>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
} else {
|
||
|
|
return (
|
||
|
|
<View style={styles.emptyListe}>
|
||
|
|
<ProgressBarAndroid/>
|
||
|
|
<Text>{I18n.t('LOADING_DOTS')}</Text>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}else {
|
||
|
|
return (
|
||
|
|
<View style={styles.emptyListe}>
|
||
|
|
<Text>{I18n.t('EMPTY_LIST_REQUEST')} </Text>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}else if(list.length===0){
|
||
|
|
return (
|
||
|
|
<View style={styles.emptyListe}>
|
||
|
|
<Text>{I18n.t('NO_ITEM_REQUEST')}</Text>
|
||
|
|
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
renderOptionsMenu(){
|
||
|
|
return (
|
||
|
|
<View
|
||
|
|
style={{
|
||
|
|
position:"absolute",
|
||
|
|
zIndex:100,
|
||
|
|
paddingTop: 50,
|
||
|
|
right:10,
|
||
|
|
flexDirection: 'row',
|
||
|
|
visible:this.state.visibleMenu,
|
||
|
|
justifyContent: 'center'
|
||
|
|
}}>
|
||
|
|
<Menu
|
||
|
|
visible={this.state.visibleMenu}
|
||
|
|
onDismiss={this._closeMenu}
|
||
|
|
anchor={
|
||
|
|
<Button onPress={this._openMenu}>Show menu</Button>
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<Menu.Item onPress={() => {
|
||
|
|
this.setState({isSectionned:!this.state.isSectionned})
|
||
|
|
this._closeMenu()
|
||
|
|
}}
|
||
|
|
title="Section" />
|
||
|
|
<Divider />
|
||
|
|
<Menu.Item onPress={() => {
|
||
|
|
|
||
|
|
this.animateSlidingUp(!this.state.isSliding)
|
||
|
|
this._closeMenu()
|
||
|
|
}} title={I18n.t("FILTER_DATE")} />
|
||
|
|
</Menu>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
animateSlidingUp(state=false){
|
||
|
|
const height = responsiveHeight(100)
|
||
|
|
let initialValue = !state ? 0:height ,
|
||
|
|
finalValue = !state ? height:0;
|
||
|
|
|
||
|
|
this.setState({isSliding:state})
|
||
|
|
|
||
|
|
|
||
|
|
this.state.translateAnim.setValue(initialValue); //Step 3
|
||
|
|
Animated.timing( //Step 4
|
||
|
|
this.state.translateAnim,
|
||
|
|
{
|
||
|
|
toValue: finalValue,
|
||
|
|
duration:500,
|
||
|
|
useNativeDriver: true,
|
||
|
|
}
|
||
|
|
).start()
|
||
|
|
}
|
||
|
|
_openMenu = () => this.setState({ visibleMenu: true });
|
||
|
|
|
||
|
|
_closeMenu = () => this.setState({ visibleMenu: false });
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return (
|
||
|
|
<Provider>
|
||
|
|
<View style={{flex:1}}
|
||
|
|
>
|
||
|
|
<StatusBar
|
||
|
|
backgroundColor={theme.primaryDark}
|
||
|
|
barStyle="light-content"
|
||
|
|
translucent={false}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<Appbar.Header dark={true} style={{backgroundColor:theme.primary}}>
|
||
|
|
<Appbar.BackAction
|
||
|
|
onPress={()=>{this.props.navigation.pop()}}
|
||
|
|
/>
|
||
|
|
<Appbar.Content
|
||
|
|
title={I18n.t('CREDIT_MANAGE')}
|
||
|
|
subtitle={this.state.position===0?I18n.t('MY_DEMAND'): I18n.t('DEMAND_RECEIVE')}
|
||
|
|
/>
|
||
|
|
<Appbar.Action icon="refresh" onPress={()=>{this.refreshData()}} />
|
||
|
|
<Appbar.Action icon="more-vert" onPress={()=>this._openMenu()} />
|
||
|
|
</Appbar.Header>
|
||
|
|
{this.renderOptionsMenu()}
|
||
|
|
|
||
|
|
{this.state.position===0?this._renderListDemandsSend():this._renderListDemandReceive()}
|
||
|
|
</View>
|
||
|
|
</Provider>
|
||
|
|
);
|
||
|
|
|
||
|
|
}
|
||
|
|
renderSliding(){
|
||
|
|
return (<Animated.View style={[styles.slidingup,{translateY:this.state.translateAnim}]}>
|
||
|
|
<Calendar
|
||
|
|
onChange={(range) => console.log(range)}
|
||
|
|
minDate="2018-04-20"
|
||
|
|
startDate="2018-04-30"
|
||
|
|
endDate="2018-05-05"
|
||
|
|
theme={{
|
||
|
|
activeDayColor: {},
|
||
|
|
monthTitleTextStyle: {
|
||
|
|
color: '#6d95da',
|
||
|
|
fontWeight: '300',
|
||
|
|
fontSize: 16,
|
||
|
|
},
|
||
|
|
emptyMonthContainerStyle: {},
|
||
|
|
emptyMonthTextStyle: {
|
||
|
|
fontWeight: '200',
|
||
|
|
},
|
||
|
|
weekColumnsContainerStyle: {},
|
||
|
|
weekColumnStyle: {
|
||
|
|
paddingVertical: 10,
|
||
|
|
},
|
||
|
|
weekColumnTextStyle: {
|
||
|
|
color: '#b6c1cd',
|
||
|
|
fontSize: 13,
|
||
|
|
},
|
||
|
|
nonTouchableDayContainerStyle: {},
|
||
|
|
nonTouchableDayTextStyle: {},
|
||
|
|
startDateContainerStyle: {},
|
||
|
|
endDateContainerStyle: {},
|
||
|
|
dayContainerStyle: {},
|
||
|
|
dayTextStyle: {
|
||
|
|
color: '#2d4150',
|
||
|
|
fontWeight: '200',
|
||
|
|
fontSize: 15,
|
||
|
|
},
|
||
|
|
dayOutOfRangeContainerStyle: {},
|
||
|
|
dayOutOfRangeTextStyle: {},
|
||
|
|
todayContainerStyle: {},
|
||
|
|
todayTextStyle: {
|
||
|
|
color: '#6d95da',
|
||
|
|
},
|
||
|
|
activeDayContainerStyle: {
|
||
|
|
backgroundColor: '#6d95da',
|
||
|
|
},
|
||
|
|
activeDayTextStyle: {
|
||
|
|
color: 'white',
|
||
|
|
},
|
||
|
|
nonTouchableLastMonthDayTextStyle: {}
|
||
|
|
}}
|
||
|
|
style={{height:responsiveHeight(60)}}
|
||
|
|
/>
|
||
|
|
<View style={{flexDirection:'row'}}>
|
||
|
|
<Button>{I18n.t('QUIT')}</Button>
|
||
|
|
<Button>{I18n.t('FILTER')}</Button>
|
||
|
|
</View>
|
||
|
|
</Animated.View>)
|
||
|
|
}
|
||
|
|
renderSectionnedList(list) {
|
||
|
|
|
||
|
|
if (this.state.isLoaded) {
|
||
|
|
let data =list;
|
||
|
|
if (data !== null) {
|
||
|
|
if (data.length > 0) {
|
||
|
|
return ( <HistoryItemSectionned
|
||
|
|
list={list}
|
||
|
|
navigator={this.props.navigator}
|
||
|
|
style={styles.listbackground}/>)
|
||
|
|
} else if (this.state.filter) {
|
||
|
|
|
||
|
|
return (
|
||
|
|
<View style={styles.emptyListe}>
|
||
|
|
<Text>{I18n.t('NO_ITEMS_REQUEST')}</Text>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
} else {
|
||
|
|
return (
|
||
|
|
<View style={styles.emptyListe}>
|
||
|
|
<ProgressBarAndroid/>
|
||
|
|
<Text>{I18n.t('LOADING_DOTS')}</Text>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
return (
|
||
|
|
<View style={styles.emptyListe}>
|
||
|
|
<Text>{I18n.t('EMPTY_LIST_REQUEST')}</Text>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
renderLoading(){
|
||
|
|
return (<View><ProgressBarAndroid/><Text>{I18n.t('LOADING_DOTS')}</Text></View>)
|
||
|
|
}
|
||
|
|
showSlidingUpPanel() {
|
||
|
|
/* return (<SlidingUpPanel
|
||
|
|
style={styles.slidingup}
|
||
|
|
height={responsiveHeight(100)}
|
||
|
|
visible={this.state.panelVisible}
|
||
|
|
ref={(c) => this.panel = c}
|
||
|
|
draggableRange={{top: responsiveHeight(100), bottom: 0}}
|
||
|
|
onRequestClose={() => this.setState({panelVisible: false})}>
|
||
|
|
<View style={styles.container}>
|
||
|
|
{this.showSlidingUpView()}
|
||
|
|
</View>
|
||
|
|
</SlidingUpPanel>)
|
||
|
|
}
|
||
|
|
|
||
|
|
showSlidingUpView() {
|
||
|
|
/* return (
|
||
|
|
<View style={datefilter.container}>
|
||
|
|
<View stlye={datefilter.content}>
|
||
|
|
<DatepickerRange
|
||
|
|
styles={{
|
||
|
|
borderColor: 'transparent',
|
||
|
|
borderRadius: 0,
|
||
|
|
margin: 10,
|
||
|
|
height:responsiveWidth(50)
|
||
|
|
}}
|
||
|
|
initialMonth='201801'
|
||
|
|
onSelect={(fromdate,untildate)=>this._handleDatePicked(fromdate,untildate)}
|
||
|
|
dayHeadings={['D', 'L', 'M', 'M', 'J', 'V', 'S']}
|
||
|
|
maxMonth={12}
|
||
|
|
startdate={moment('20180101').format('YYYYMMDD')}
|
||
|
|
untilDate='20181231'
|
||
|
|
minDate='20180101'
|
||
|
|
maxDate='20181231'
|
||
|
|
buttonColor='green'
|
||
|
|
showReset={false}
|
||
|
|
showClose={false}
|
||
|
|
placeHolderStart= 'Date de debut'
|
||
|
|
placeHolderUntil= 'Date fin'
|
||
|
|
selectedBackgroundColor= 'green'
|
||
|
|
selectedTextColor='white'
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
|
||
|
|
)*/
|
||
|
|
}
|
||
|
|
|
||
|
|
onfilterPress() {
|
||
|
|
let {datestart, dateend} = this.state;
|
||
|
|
let data = this.state.conserve;
|
||
|
|
|
||
|
|
if (data !== null) {
|
||
|
|
data = data.filter(item => {
|
||
|
|
let mda = moment(item.dateAjout)
|
||
|
|
return moment(item.dateAjout).isAfter(moment(datestart).toDate()) && (mda.isBefore(moment(dateend).toDate()))
|
||
|
|
})
|
||
|
|
|
||
|
|
this.setState({listdata: data, panelVisible: false, filter: true})
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
_showDateTimePicker = (type) => {
|
||
|
|
if (type === 1)
|
||
|
|
this.setState({
|
||
|
|
isDateTimePickerVisible: true
|
||
|
|
});
|
||
|
|
else this.setState({
|
||
|
|
isDateEndTimePickerVisible: true
|
||
|
|
});
|
||
|
|
}
|
||
|
|
_showDateEndPicker = () => this.setState({isDateEndTimePickerVisible: true});
|
||
|
|
|
||
|
|
_hideDateTimePicker = () => this.setState({isDateTimePickerVisible: false, isDateEndTimePickerVisible: false});
|
||
|
|
_handleDatePicked = (fromdate, enddate) => {
|
||
|
|
console.log([fromdate,enddate]);
|
||
|
|
|
||
|
|
this.setState({
|
||
|
|
datestart: fromdate,
|
||
|
|
datestartformated: moment(fromdate).format('dddd Do ,MMMM YYYY'),
|
||
|
|
dateend: enddate,
|
||
|
|
dateendformated: moment(enddate).format('dddd Do ,MMMM YYYY')
|
||
|
|
});
|
||
|
|
let startdate = this.state.datestart;
|
||
|
|
let enddatemo = moment(enddate);
|
||
|
|
let dif = moment(enddatemo).diff(startdate);
|
||
|
|
if (dif < 0) {
|
||
|
|
this.setState({filder_disable: true});
|
||
|
|
this.props.navigator.showSnackbar({
|
||
|
|
text: I18n.t('DATE_WRONG'),
|
||
|
|
duration: 'long',
|
||
|
|
backgroundColor: 'red',
|
||
|
|
textColor: 'white'
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
this.setState({filder_disable: false});
|
||
|
|
}
|
||
|
|
|
||
|
|
this._hideDateTimePicker();
|
||
|
|
};
|
||
|
|
|
||
|
|
printOptions() {
|
||
|
|
if(this.state.user.category==="hyper"){
|
||
|
|
return (<ActionButton buttonColor={accent}>
|
||
|
|
<ActionButton.Item buttonColor={purpleLight} title={I18n.t('SAVE_HISTORY')} onPress={() => {
|
||
|
|
|
||
|
|
}}>
|
||
|
|
<Icon name="save" style={styles.actionButtonIcon}/>
|
||
|
|
</ActionButton.Item>
|
||
|
|
</ActionButton>);
|
||
|
|
}else{
|
||
|
|
return ( <ActionButton buttonColor={accent}>
|
||
|
|
<ActionButton.Item buttonColor={primary} title={I18n.t('MAKE_REQUEST')}
|
||
|
|
onPress={() => {
|
||
|
|
this.props.navigation.navigate(route.credrequester)
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Icon name="edit" style={styles.actionButtonIcon}/>
|
||
|
|
</ActionButton.Item>
|
||
|
|
<ActionButton.Item buttonColor={purpleLight} title={I18n.t('SAVE_HISTORY')} onPress={() => {
|
||
|
|
|
||
|
|
}}>
|
||
|
|
<Icon name="save" style={styles.actionButtonIcon}/>
|
||
|
|
</ActionButton.Item>
|
||
|
|
</ActionButton>)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
_renderListDemandsSend() {
|
||
|
|
|
||
|
|
return ( <View style={styles.container}>
|
||
|
|
{
|
||
|
|
this.state.isLoaded?
|
||
|
|
this.state.isSectionned?
|
||
|
|
this.renderSectionnedList(this.state.listdataSend):
|
||
|
|
this.renderList(this.state.listdataSend):this.renderLoading()
|
||
|
|
}
|
||
|
|
{this.printOptions()}
|
||
|
|
{this.showSlidingUpPanel()}
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
_renderListDemandReceive() {
|
||
|
|
|
||
|
|
return ( <View style={styles.container}>
|
||
|
|
{
|
||
|
|
this.state.isLoaded?
|
||
|
|
this.state.isSectionned?
|
||
|
|
this.renderSectionnedList(this.state.listdata):
|
||
|
|
this.renderList(this.state.listdata):this.renderLoading()
|
||
|
|
}
|
||
|
|
{this.printOptions()}
|
||
|
|
{this.showSlidingUpPanel()}
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
_renderTabGeolocated() {
|
||
|
|
let tabs = [{
|
||
|
|
text: I18n.t('DEMAND_SEND'),
|
||
|
|
}]
|
||
|
|
return <PagerTabIndicator
|
||
|
|
style={{
|
||
|
|
height:responsiveHeight(8)
|
||
|
|
}}
|
||
|
|
tabs={tabs} />;
|
||
|
|
}
|
||
|
|
|
||
|
|
_renderTabHyper() {
|
||
|
|
let tabs = [{
|
||
|
|
text:I18n.t('DEMAND_RECEIVE'),
|
||
|
|
}]
|
||
|
|
return <PagerTabIndicator
|
||
|
|
style={{
|
||
|
|
height:responsiveHeight(8)
|
||
|
|
}}
|
||
|
|
tabs={tabs} />;
|
||
|
|
}
|
||
|
|
|
||
|
|
_renderTabs() {
|
||
|
|
let tabs = [{
|
||
|
|
text: I18n.t('MY_DEMAND'),
|
||
|
|
iconSource:this.state.usersicon
|
||
|
|
},{
|
||
|
|
text: I18n.t('DEMAND_RECEIVE'),
|
||
|
|
iconSource:this.state.charticon
|
||
|
|
}]
|
||
|
|
return <PagerTabIndicator
|
||
|
|
style={{
|
||
|
|
height:responsiveHeight(8)
|
||
|
|
}}
|
||
|
|
tabs={tabs} />;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
refreshData(autoref=true) {
|
||
|
|
if(autoref)
|
||
|
|
this.setState({isRefreshing:true})
|
||
|
|
loadDemandeCredit().then((data) => {
|
||
|
|
if(data.success!==undefined) {
|
||
|
|
this.setState({listdata:[]})
|
||
|
|
this.updateList(data.demands);
|
||
|
|
if(this.state.position!==0)this.props.navigation.setParams({count:data.demands.length})
|
||
|
|
this.setState({isRefreshing:false})
|
||
|
|
}
|
||
|
|
}).catch((e)=>{
|
||
|
|
console.warn(e)
|
||
|
|
});
|
||
|
|
loadMyDemandeCredit().then((data)=>{
|
||
|
|
if(data.success!==undefined) {
|
||
|
|
this.setState({listdataSend:[]})
|
||
|
|
this.setState({isRefreshing:false})
|
||
|
|
if(this.state.position===0)this.props.navigation.setParams({count:data.demands.length})
|
||
|
|
|
||
|
|
this.updateMyList(data.demands)
|
||
|
|
}
|
||
|
|
}).catch((e)=>{
|
||
|
|
console.warn(e)
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
export default MyHistory;
|
||
|
|
const datefilter=StyleSheet.create({
|
||
|
|
titleHeader:{
|
||
|
|
fontSize:20,
|
||
|
|
fontWeight:'bold',
|
||
|
|
color:'black',
|
||
|
|
flex:1,
|
||
|
|
},
|
||
|
|
datetitle:{
|
||
|
|
fontSize:17,
|
||
|
|
color:'black',
|
||
|
|
marginLeft:responsiveWidth(2),
|
||
|
|
},
|
||
|
|
datetext:{
|
||
|
|
fontSize:16,
|
||
|
|
marginLeft:responsiveWidth(5)
|
||
|
|
},
|
||
|
|
content:{
|
||
|
|
flex:2,
|
||
|
|
|
||
|
|
},
|
||
|
|
btnContainer:{
|
||
|
|
flexDirection:'row',
|
||
|
|
width:responsiveWidth(100),
|
||
|
|
alignSelf:'flex-end',
|
||
|
|
flex:2,
|
||
|
|
},
|
||
|
|
btn:{
|
||
|
|
flex:1,
|
||
|
|
borderColor:'transparent',
|
||
|
|
borderRadius:0,
|
||
|
|
},
|
||
|
|
btntext:{
|
||
|
|
fontWeight:'bold',
|
||
|
|
color:accent
|
||
|
|
},
|
||
|
|
container:{
|
||
|
|
flex:1,
|
||
|
|
justifyContent:'space-evenly'
|
||
|
|
}
|
||
|
|
})
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
slidingup:{
|
||
|
|
position:"absolute",
|
||
|
|
height:responsiveHeight(84),
|
||
|
|
bottom:0,
|
||
|
|
backgroundColor:'white',
|
||
|
|
width:responsiveWidth(100),
|
||
|
|
zIndex: 1000
|
||
|
|
},
|
||
|
|
root:{
|
||
|
|
flex:1,
|
||
|
|
},
|
||
|
|
container: {
|
||
|
|
flex: 1,
|
||
|
|
backgroundColor:'white',
|
||
|
|
justifyContent: 'center',
|
||
|
|
alignItems: 'center',
|
||
|
|
},
|
||
|
|
emptylist:{
|
||
|
|
flex:1,
|
||
|
|
justifyContent:'center',
|
||
|
|
alignItems:'center'
|
||
|
|
},
|
||
|
|
backgroundd_drawer:{
|
||
|
|
backgroundColor:'#000',
|
||
|
|
},
|
||
|
|
listbackground:{
|
||
|
|
},
|
||
|
|
actionButtonIcon: {
|
||
|
|
fontSize: 20,
|
||
|
|
height: 22,
|
||
|
|
color: 'white',
|
||
|
|
},
|
||
|
|
welcome: {
|
||
|
|
fontSize: 20,
|
||
|
|
textAlign: 'center',
|
||
|
|
margin: 10,
|
||
|
|
},
|
||
|
|
instructions: {
|
||
|
|
textAlign: 'center',
|
||
|
|
color: '#333333',
|
||
|
|
marginBottom: 5,
|
||
|
|
},
|
||
|
|
dateText:{
|
||
|
|
marginTop:20,
|
||
|
|
marginLeft:responsiveWidth(13),
|
||
|
|
marginBottom:20,
|
||
|
|
fontSize:17,
|
||
|
|
},
|
||
|
|
titlecontent:{
|
||
|
|
fontSize:17,
|
||
|
|
marginLeft:responsiveWidth(10),
|
||
|
|
|
||
|
|
color:'black'
|
||
|
|
},
|
||
|
|
content:{
|
||
|
|
flex:8
|
||
|
|
},
|
||
|
|
|
||
|
|
title:{
|
||
|
|
fontSize:20,
|
||
|
|
marginLeft:20,
|
||
|
|
marginTop:20,
|
||
|
|
color:'black',
|
||
|
|
fontWeight:'bold'
|
||
|
|
},
|
||
|
|
});
|