ilink-world/app/screens/groupes/SuperViseurGroupeHome.js

852 lines
25 KiB
JavaScript
Executable File

/* eslint-disable react-native/no-inline-styles */
import React, {Component} from 'react';
import {
StyleSheet,
View,
PixelRatio,
Text,
RefreshControl,
FlatList,
ProgressBarAndroid,
ProgressViewIOS,
Alert,
StatusBar,
} from 'react-native';
import BaseScreen from './../BaseScreen';
import {
responsiveHeight,
responsiveWidth,
} from 'react-native-responsive-dimensions';
import {listAllMembers} from './../../webservice/MemberGeolocatedApi';
import {listFreeCodesSuperViseur} from './../../webservice/NetworkApi';
import {
readUser,
listDemandAdhesion,
acceptDemandAdhesion,
deleteUser,
} from '../../webservice/AuthApi';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import Icons from 'react-native-vector-icons/Ionicons';
import Swipeout from 'react-native-swipeout';
import {theme} from '../BaseScreen';
require('./../../utils/Translations');
import I18n from 'react-native-i18n';
const route = require('./../../route.json');
import LottieView from 'lottie-react-native'; // if you have "esModuleInterop": true
import {
IndicatorViewPager,
PagerTabIndicator,
} from 'react-native-best-viewpager';
import Tag from '../../components/Tag';
import {
Card,
CardTitle,
CardContent,
CardAction,
CardButton,
CardImage,
} from 'react-native-material-cards';
let moment = require('moment-timezone');
import 'moment/locale/fr';
import 'moment/locale/es-us';
import 'moment/locale/en-au';
import 'moment/locale/en-ca';
import 'moment/locale/en-ie';
import 'moment/locale/en-il';
import 'moment/locale/en-nz';
import {Header} from 'react-native-elements';
import {IlinkEmitter} from '../../utils/events';
import DeviceInfo from 'react-native-device-info';
import {Color} from '../../config/Color';
import {Typography, FontWeight} from '../../config/typography';
import {thousandsSeparators} from '../../utils/UtilsFunction';
const thousands = require('thousands');
var users = null;
var chart = null;
export default class SuperViseurGroupeHome extends BaseScreen {
static tabsStyle: {
tabBarButtonColor: '#ff0000',
};
static navigatorStyle = {
tabBarHidden: false,
topTabTextColor: '#ffffff',
topTabsHeight: 70,
topTabTextFontFamily: 'BioRhyme-Bold',
selectedTopTabTextColor: '#ff505c',
statusBarColor: theme.primaryDark,
navBarBackgroundColor: theme.primary,
navBarTextColor: 'white',
navBarButtonColor: 'white',
// Icons
topTabIconColor: '#ffffff',
selectedTopTabIconColor: '#ff505c',
// Tab indicator
selectedTopTabIndicatorHeight: PixelRatio.get() * 2,
selectedTopTabIndicatorColor: '#ff505c',
};
static options(passProps) {
return {
topBar: {
rightButtons: [],
},
};
}
static navigationOptions = ({navigation}) => {
return {
title: I18n.t('GROUP_MANAGE'),
drawerLabel: navigation.getParam('name', I18n.t('GROUP_MANAGE')),
drawerIcon: ({tintColor}) => <Icon name={'people'} size={24} />,
};
};
constructor(props) {
super(props, true);
this.state = SuperViseurGroupeHome.initState();
readUser().then(user => {
this.setState({user: user});
listFreeCodesSuperViseur(user.code_membre).then(codes => {
console.log('codes', codes);
if (codes.success != undefined) {
this.setState({freeCodes: codes.networks});
}
});
});
listAllMembers().then(data => {
console.log(data);
if (data !== null) {
this.setState({
listmembers: data,
isLoading: false,
isRefreshing: false,
});
}
});
this._populateIcons().then(values => {
this.setState({usersicon: values[0], charticon: values[1]});
});
listDemandAdhesion().then(items => {
console.log(items);
let filtereds = [];
items.forEach(item => {
let b = false;
filtereds.forEach(f => {
if (f.code_membre === item.code_membre) {
b = true;
}
});
if (!b) filtereds.push(item);
});
console.log('filtered', filtereds);
if (items !== undefined) {
this.setState({demands: filtereds, isLoadingDemand: false});
}
});
IlinkEmitter.on('langueChange', this.updateLangue.bind(this));
this.currentLocale = I18n.locale.includes('fr') ? 'fr' : 'en-gb';
moment.locale(this.currentLocale);
}
updateLangue() {
this.props.navigation.setParams({name: I18n.t('GROUP_MANAGE')});
this.forceUpdate();
}
static initState() {
return {
enabledListMembers: true,
listmembers: [],
usersicon: null,
isLoadingDemand: true,
charticon: null,
isRefreshing: false,
user: {},
freeCodes: [],
isLoading: true,
};
}
render() {
return (
<View style={{flex: 1, marginBottom: 10}}>
<StatusBar
backgroundColor="#00000030"
barStyle="light-content"
translucent={false}
/>
<IndicatorViewPager
style={{flex: 1}}
indicator={
this.state.user.category === 'hyper'
? this._renderTabIndicatorAdmin()
: this._renderTabIndicator()
}>
{this.state.isLoading
? this._renderLoadingItems()
: this._renderListMembers()}
{this.state.isLoadingDemand
? this._renderLoadingItems()
: this.state.user.category === 'hyper'
? this._renderListDemandAdhesion()
: this._renderListCodeUnused()}
</IndicatorViewPager>
</View>
);
}
_populateIcons = function () {
return new Promise(function (resolve, reject) {
Promise.all([
Icon.getImageSource('users', 30),
Icon.getImageSource('chart-pie', 30),
])
.then(values => {
users = values[0];
chart = values[0];
resolve(values);
})
.catch(error => {
console.log(error);
reject(error);
})
.done();
});
}
_renderTabIndicatorAdmin() {
let tabs = [
{
text: I18n.t('MEMBER_LIST'),
iconSource: this.state.usersicon,
},
{
text: I18n.t('MEMBERSHIP_REQUEST'),
iconSource: this.state.charticon,
},
];
return (
<PagerTabIndicator
style={{
height: responsiveHeight(8),
}}
tabs={tabs}
/>
);
}
_renderTabIndicator() {
let tabs = [
{
text: I18n.t('MEMBER_LIST'),
iconSource: this.state.usersicon,
},
];
return (
<PagerTabIndicator
style={{
height: responsiveHeight(8),
}}
tabs={tabs}
/>
);
}
_renderListMembers() {
return (
<View>
<FlatList
style={{flex: 1, backgroundColor: '#EEE'}}
data={
this.state.listmembers instanceof Array
? this.state.listmembers
: this.state.listmembers.datas
? this.state.listmembers.datas
: []
}
ListEmptyComponent={() => {
return (
<View style={{flex: 1}}>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
marginTop: 100,
}}>
<LottieView
style={styles.lottie}
source={require('./../../datas/json/629-empty-box.json')}
autoPlay
loop
/>
<Text style={styles.text}>{I18n.t('NO_MEMBERS')}</Text>
</View>
</View>
);
}}
refreshControl={
<RefreshControl
refreshing={this.state.isRefreshing}
colors={[
theme.primary,
theme.purpleLight,
theme.reddeconnect,
theme.accentLight,
]}
onRefresh={() => {
this.setState({isRefreshing: true});
listAllMembers().then(data => {
console.log('from refresh', data);
if (data !== null && data.datas) {
this.setState({
listmembers: data,
isLoading: false,
isRefreshing: false,
});
}
});
}}
/>
}
renderItem={({item}) => this.renderMembers(item)}
/>
</View>
);
}
_renderLoadingItems() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<ProgressBarAndroid />
</View>
);
}
renderMembers(item) {
var re = moment.tz(item.created_at, moment.tz.guess()).format();
re = moment(re).fromNow();
if (true) {
return (
<Card>
<CardTitle title={item.lastname} subtitle={item.adresse} />
<CardContent>
<View
style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<View style={{flex: 1, alignItems: 'flex-start'}}>
<View
style={{
flexDirection: 'row',
backgroundColor: theme.primary,
justifyContent: 'center',
marginRight: 10,
width: 160,
marginTop: 5,
alignItems: 'center',
borderRadius: 10,
}}>
<Icon
name={'phone'}
color={'white'}
size={24}
style={styles.callIcon}
/>
<Text style={styles.phone}>{item.phone}</Text>
</View>
</View>
<View
style={{
width: 1,
backgroundColor: Color.borderColor,
marginTop: -20,
}}
/>
<View style={{flex: 1, flexDirection: 'column', marginTop: -15}}>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
marginTop: -10,
}}>
<View
style={[
styles.circlePoint,
{backgroundColor: Color.whiteColor},
]}>
<Icons
name="md-wallet"
size={32}
color={Color.primaryColor}
/>
</View>
<View>
<Text
style={
([Typography.title3, Color.primaryColor],
{marginBottom: 1})
}>
{I18n.t('PRINCIPAL_ACCOUNT_TITLE')}
</Text>
<Text style={[Typography.body2]}>
{item.balance_princ === null
? 0
: thousands(item.balance_princ, ' ')}
</Text>
</View>
</View>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
marginTop: -10,
}}>
<View
style={[
styles.circlePoint,
{backgroundColor: Color.whiteColor},
]}>
<Icons
name="md-cash"
size={32}
color={Color.primaryColor}
/>
</View>
<View>
<Text
style={
([Typography.title3, Color.primaryColor],
{marginBottom: 1})
}>
{I18n.t('COMMISSION_ACCOUNT_TITLE')}
</Text>
<Text style={Typography.body2}>
{item.balance_com === null
? 0
: thousands(item.balance_com, ' ')}
</Text>
</View>
</View>
</View>
</View>
{/* <View Style={{ flex: 1, flexDirection: 'row' }}>
<View Style={{ flex: 1 }} />
<View style={{
flexDirection: 'row',
backgroundColor: theme.primary,
marginRight: 10,
width: 150,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 10,
}}><Icon name={"phone"} color={"white"} size={24}
style={styles.callIcon} />
<Text style={styles.phone}>{item.phone}</Text>
</View>
</View> */}
</CardContent>
<CardAction separator={true} inColumn={false}>
<CardButton
onPress={() => {
Alert.alert(
I18n.t('TITLE_SUPPRESS_CONFIRM'),
I18n.t('TEXT_SUPPRESS_CONFIRM'),
[
{text: I18n.t('NO'), onPress: () => {}},
{
text: I18n.t('YES'),
onPress: () => {
deleteUser(item).then(() => {
this.setState({isLoading: true});
listAllMembers().then(data => {
console.log(data);
if (data !== null) {
this.setState({
listmembers: data,
isLoading: false,
isRefreshing: false,
});
}
});
});
},
style: 'cancel',
},
],
);
}}
title={I18n.t('DELETE_GEOLOCATED_USER')}
color="crimson"
/>
</CardAction>
</Card>
);
} else
return (
<View>
<Swipeout
left={[
{
text: I18n.t('DELETE_GEOLOCATED_USER'),
type: 'delete',
autoClose: true,
onPress: function () {
Alert.alert(
'Confirmations de suppression',
'Voulez vous vraiment supprimer cette utilisateur ?',
[
{text: 'Non', onPress: () => {}},
{
text: 'Oui',
onPress: () => {
deleteUser(item).then(() => {
this.setState({isLoading: true});
listAllMembers().then(data => {
if (data !== null) {
this.setState({
listmembers: data,
isLoading: false,
});
}
});
});
},
style: 'cancel',
},
],
);
},
},
]}
buttonWidth={responsiveWidth(40)}>
<View
style={{
height: 200,
marginBottom: 10,
flex: 1,
backgroundColor: 'white',
}}>
<Text style={styles.name}>{item.firstname}</Text>
<Text style={styles.surname}>{item.lastname}</Text>
<View
style={{
flexDirection: 'row',
marginRight: 20,
justifyContent: 'flex-end',
alignItems: 'center',
}}>
<Icon
name={'phone'}
color={theme.primary}
size={24}
style={styles.callIcon}
/>
<Text style={styles.phone}>{item.phone}</Text>
</View>
<View
style={{
flexDirection: 'row',
marginLeft: 20,
justifyContent: 'flex-start',
alignItems: 'center',
}}>
<Icon
name={'folder'}
color={theme.primary}
size={24}
style={styles.balanceIcon}
/>
<Text style={styles.balanceMember}>{item.balance}</Text>
</View>
</View>
</Swipeout>
</View>
);
}
/* <View style={{flexDirection:'row',
marginRight:40,
justifyContent:'flex-end',
alignItems:'center'
}}>
<Icon name={"clock"} color={theme.accentLight} size={24}
style={styles.callIcon}/>
<Text style={styles.fromNow}>{re}</Text>
</View>*/
_renderListDemandAdhesion() {
if (this.state.user.category === 'hyper') {
if (this.state.demands.length > 0) {
return (
<View style={{backgroundColor: '#EEEEEE', flex: 1}}>
<FlatList
data={this.state.demands}
renderItem={({item}) => this._renderAddhesionItem(item)}
refreshControl={
<RefreshControl
refreshing={this.state.isRefreshing}
colors={[
theme.primary,
theme.purpleLight,
theme.reddeconnect,
theme.accentLight,
]}
onRefresh={() => {
this.setState({isRefreshing: true});
listAllMembers().then(data => {
console.log('from refresh', data);
if (data !== null && data.datas) {
this.setState({
listmembers: data,
isLoading: false,
isRefreshing: false,
});
}
});
}}
/>
}
ListEmptyComponent={() => {
return (
<View style={{flex: 1}}>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
marginTop: 100,
}}>
<LottieView
style={styles.lottie}
source={require('./../../datas/json/629-empty-box.json')}
autoPlay
loop
/>
<Text style={styles.text}>{I18n.t('NO_MEMBERS')}</Text>
</View>
</View>
);
}}
/>
</View>
);
} else {
return (
<View
style={{
backgroundColor: 'white',
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<Text>{I18n.t('NO_DEMAND_ADHESION')}</Text>
</View>
);
}
}
}
_renderLoadingDemandItems() {
if (this.state.freeCodes.length > 0) {
return (
<View style={{backgroundColor: '#EEEEEE', flex: 1}}>
<FlatList
data={this.state.freeCodes}
renderItem={({item}) => this._renderAddhesionItem(item)}
/>
</View>
);
} else {
return (
<View
style={{
backgroundColor: 'white',
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<Text>{I18n.t('NO_GEO_POINT_CODE')}</Text>
</View>
);
}
}
_renderAddhesionItem(item) {
return (
<Card
style={{
flex: 1,
height: responsiveHeight(30),
backgroundColor: 'white',
marginBottom: 10,
}}>
<CardContent
style={{
height: responsiveHeight(20),
flex: 1,
justifyContent: 'space-evenly',
}}>
<View>
<Text style={{marginLeft: 10}}>
<Text style={{color: 'black'}}>{I18n.t('NAME')} :</Text>{' '}
{item.lastname}
</Text>
<Text style={{marginLeft: 10}}>
<Text style={{color: 'black'}}>{I18n.t('PHONE_NUMBER')} :</Text>{' '}
{item.phone}
</Text>
<Text style={{marginLeft: 10}}>
<Text style={{color: 'black'}}>{I18n.t('EMAIL')} :</Text>{' '}
{item.email}
</Text>
<Text style={{marginLeft: 10}}>
<Text style={{color: 'black'}}>{I18n.t('NETWORK')} :</Text>{' '}
{item.network}
</Text>
</View>
</CardContent>
<CardAction separator={true} inColumn={false}>
<CardButton
title={I18n.t('ACTIVE_USER')}
onPress={() => {
acceptDemandAdhesion(item).then(data => {
Alert.alert(
I18n.t('ACTIVATE_ACCOUNT'),
I18n.t('THE_ACCOUNT') +
' ' +
item.lastname +
' ' +
I18n.t('ACTIVATED'),
[
{
text: 'Ok',
},
],
);
let datas = this.state.demands;
datas.splice(datas.indexOf(item), 1);
this.setState({demands: datas});
});
}}
color={'green'}
/>
<CardButton
title={I18n.t('DELETE_GEOLOCATED_USER')}
color={'red'}
onPress={() => {}}
/>
</CardAction>
</Card>
);
}
_renderListCodeUnused() {
if (this.state.freeCodes.length > 0) {
return (
<View style={{backgroundColor: '#EEEEEE', flex: 1}}>
<FlatList
data={this.state.freeCodes}
renderItem={({item}) => this._renderFreeCodeItem(item)}
/>
</View>
);
} else {
return (
<View
style={{
backgroundColor: 'white',
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<Text>{I18n.t('NO_GEO_POINT_CODE')}</Text>
</View>
);
}
}
_renderFreeCodeItem(item) {
console.log(item);
return (
<View
style={{
flex: 1,
height: responsiveHeight(30),
backgroundColor: 'white',
marginBottom: 10,
}}>
<View
style={{
height: responsiveHeight(20),
flex: 1,
justifyContent: 'space-evenly',
}}>
<Text style={{marginLeft: 10}}>
<Text style={{color: 'black'}}>Contact :</Text> {item.phone}
</Text>
<Text style={{marginLeft: 10}}>
<Text style={{color: 'black'}}>code Membre :</Text>{' '}
{item.code_membre}
</Text>
<Text style={{marginLeft: 10}}>
<Text style={{color: 'black'}}>code Validation :</Text>{' '}
{item.validation_code}
</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
circlePoint: {
width: 50,
height: 50,
marginRight: 5,
alignItems: 'center',
justifyContent: 'center',
},
container: {
flex: 1,
backgroundColor: 'white',
},
fromNow: {
color: theme.accentLight,
},
callIcon: {
marginRight: 5,
},
phone: {
textAlign: 'center',
color: 'white',
},
balanceMember: {
marginLeft: 7,
fontSize: 18,
fontWeight: 'bold',
color: theme.primary,
},
balanceIcon: {},
name: {
color: 'black',
fontSize: 20,
margin: 20,
fontWeight: 'bold',
},
surname: {
fontSize: 17,
marginLeft: 20,
},
text: {
fontSize: 17,
fontWeight: 'bold',
},
lottie: {
width: 248,
height: 248,
},
})