854 lines
34 KiB
JavaScript
854 lines
34 KiB
JavaScript
import React from 'react';
|
|
import {
|
|
View,
|
|
Button,
|
|
TextInput,
|
|
TouchableOpacity,
|
|
Text,
|
|
Alert,
|
|
ScrollView
|
|
} from 'react-native';
|
|
// Reduxs
|
|
import { connect } from 'react-redux';
|
|
import { addContact, editContact } from '../Store/Actions/contacts';
|
|
// Helpers
|
|
import Helpers from "../Lib/Helpers";
|
|
// Translations
|
|
import i18n from "../../I18n";
|
|
// Icons
|
|
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
|
|
// Style
|
|
import styles from '../../Resources/Styles/ContactDetailsStyle';
|
|
// UI Elements
|
|
import { Overlay, CheckBox, ButtonGroup } from '@rneui/themed';
|
|
// Flash Messages
|
|
import { showMessage } from 'react-native-flash-message';
|
|
// Picker
|
|
import { Picker } from '@react-native-picker/picker';
|
|
// vCard parser
|
|
import vCard from 'vcard-parser';
|
|
// BarCode Scanner
|
|
import { BarCodeScanner } from 'expo-barcode-scanner';
|
|
|
|
function mapStateToProps(state) {
|
|
return {
|
|
contacts: state.contacts,
|
|
currentUser: state.app.currentUser,
|
|
};
|
|
}
|
|
|
|
const mapDispatchToProps = dispatch => {
|
|
return {
|
|
addContact: (user, data) => dispatch(addContact(user, data)),
|
|
editContact: (user, data) => dispatch(editContact(user, data))
|
|
};
|
|
};
|
|
|
|
let date = new Date().getDate();
|
|
if (date < 10) {
|
|
date = '0' + date.toString();
|
|
}
|
|
let month = new Date().getMonth() + 1;
|
|
if (month < 10) {
|
|
month = '0' + month.toString();
|
|
}
|
|
const year = new Date().getFullYear();
|
|
|
|
class ContactDetailsScreen extends React.Component {
|
|
state = {
|
|
action: 'add',
|
|
visits: [],
|
|
selectedVisit: 0,
|
|
tmpVisitNote: '',
|
|
newVisitTitle: date + '/' + month + '/' + year,
|
|
selectedIndex: 0,
|
|
showNewVisit: false,
|
|
tmpID: 0,
|
|
tmpNote: '',
|
|
tmpName: 'test',
|
|
tmpFirstname: 'test',
|
|
tmpEmail: 'test@test.fr',
|
|
tmpCompany: '',
|
|
tmpAddress: '',
|
|
tmpPhone: '',
|
|
tmpSelect1: '',
|
|
tmpSelect2: '',
|
|
tmpOther: '',
|
|
clientChecked: false,
|
|
prospectChecked: false,
|
|
otherChecked: false,
|
|
p1: false,
|
|
p2: false,
|
|
p3: false,
|
|
p4: false,
|
|
p5: false,
|
|
p6: false,
|
|
p7: false,
|
|
p8: false,
|
|
p9: false,
|
|
showQRcodevCard: false,
|
|
parsedType: null,
|
|
parsedDatas: [],
|
|
hasPermission: null,
|
|
scanned: false,
|
|
showDynContact: false,
|
|
parsedName: '',
|
|
parsedFirstname: '',
|
|
parsedEmail: '',
|
|
parsedCompany: '',
|
|
parsedAddress: '',
|
|
parsedPhone: ''
|
|
};
|
|
|
|
updateContact() {
|
|
let error = '';
|
|
const { action } = this.props.route.params;
|
|
// On récupère le texte courant
|
|
if (this.state.visits.length > 0) {
|
|
this.state.visits[
|
|
this.state.selectedVisit
|
|
].note = this.state.tmpVisitNote;
|
|
}
|
|
let type;
|
|
if (this.state.clientChecked === true) {
|
|
type = 'client';
|
|
} else if (this.state.prospectChecked === true) {
|
|
type = 'prospect';
|
|
} else if (this.state.otherChecked === true) {
|
|
type = 'other';
|
|
if (this.state.tmpOther.length === 0) {
|
|
error = error.concat(i18n.t('error.fill_other_field') + '.\n');
|
|
}
|
|
} else {
|
|
error = error.concat(i18n.t('error.specify_type_contact') + '.\n');
|
|
}
|
|
if (this.state.tmpEmail.length < 5 || !Helpers.isEmailValid(this.state.tmpEmail)) {
|
|
error = error.concat(i18n.t('error.invalid_email_address') + '.\n');
|
|
}
|
|
if (this.state.tmpName.length === 0) {
|
|
error = error.concat(i18n.t('error.invalid_name') + '.\n');
|
|
}
|
|
if (this.state.tmpFirstname.length === 0) {
|
|
error = error.concat(i18n.t('error.invalid_firstname') + '.\n');
|
|
}
|
|
|
|
if (error.length > 0) {
|
|
Alert.alert(i18n.t('global.warning') + ' !', error, [
|
|
{ text: 'OK' },
|
|
],
|
|
{ cancelable: false },
|
|
);
|
|
} else {
|
|
const products = [
|
|
this.state.p1,
|
|
this.state.p2,
|
|
this.state.p3,
|
|
this.state.p4,
|
|
this.state.p5,
|
|
this.state.p6,
|
|
this.state.p7,
|
|
this.state.p8,
|
|
this.state.p9
|
|
];
|
|
const contact = {
|
|
id: Helpers.generateUUID(),
|
|
email: this.state.tmpEmail,
|
|
type: type,
|
|
other: this.state.tmpOther,
|
|
select1: this.state.tmpSelect1,
|
|
select2: this.state.tmpSelect2,
|
|
name: this.state.tmpName,
|
|
firstname: this.state.tmpFirstname,
|
|
company: this.state.tmpCompany,
|
|
address: this.state.tmpAddress,
|
|
phone: this.state.tmpPhone,
|
|
products: JSON.stringify(products),
|
|
notes: this.state.tmpNote,
|
|
visits: JSON.stringify(this.state.visits),
|
|
to_delete: false,
|
|
synced: false,
|
|
};
|
|
if (action === 'edit') {
|
|
contact.id = this.state.tmpID;
|
|
this.props.editContact(this.props.currentUser, contact);
|
|
this.populate();
|
|
showMessage({
|
|
message: i18n.t('contact_details_s.contact_saved') + '.',
|
|
type: 'success',
|
|
duration: 500,
|
|
});
|
|
} else {
|
|
this.props.addContact(this.props.currentUser, contact);
|
|
this.props.navigation.navigate('ContactScreen', { contactAdded: true });
|
|
}
|
|
}
|
|
}
|
|
|
|
updateContactType(type) {
|
|
if (type === 'client') {
|
|
this.setState({
|
|
clientChecked: true,
|
|
prospectChecked: false,
|
|
otherChecked: false,
|
|
tmpOther: '',
|
|
});
|
|
} else if (type === 'prospect') {
|
|
this.setState({
|
|
clientChecked: false,
|
|
prospectChecked: true,
|
|
otherChecked: false,
|
|
tmpOther: '',
|
|
});
|
|
} else {
|
|
this.setState({
|
|
clientChecked: false,
|
|
prospectChecked: false,
|
|
otherChecked: true,
|
|
});
|
|
}
|
|
}
|
|
|
|
newVisit() {
|
|
this.state.visits.unshift({ title: this.state.newVisitTitle, note: '' });
|
|
this.state.visits[this.state.selectedVisit].note = this.state.tmpVisitNote;
|
|
this.setState({
|
|
tmpVisitNote: '',
|
|
visits: this.state.visits,
|
|
showNewVisit: false,
|
|
selectedVisit: 0,
|
|
});
|
|
}
|
|
|
|
deleteVisit() {
|
|
Alert.alert(
|
|
i18n.t('global.confirmation'),
|
|
i18n.t('contact_details_s.confirm_visit_delete'),
|
|
[
|
|
{
|
|
text: i18n.t('global.no'),
|
|
onPress: () => console.log('Cancel Pressed'),
|
|
style: 'cancel',
|
|
},
|
|
{
|
|
text: i18n.t('global.yes'),
|
|
onPress: () => {
|
|
this.state.visits.splice(this.state.selectedVisit, 1);
|
|
if (this.state.visits.length === 0) {
|
|
this.setState({
|
|
visits: this.state.visits,
|
|
selectedVisit: 0,
|
|
tmpVisitNote: '',
|
|
});
|
|
} else {
|
|
this.setState({
|
|
visits: this.state.visits,
|
|
selectedVisit: 0,
|
|
tmpVisitNote: this.state.visits[0].note,
|
|
});
|
|
}
|
|
},
|
|
},
|
|
],
|
|
{ cancelable: false },
|
|
);
|
|
}
|
|
|
|
populate() {
|
|
const { contactId } = this.props.route.params;
|
|
const contact = this.props.contacts.filter(tmp => tmp.id === contactId)[0];
|
|
this.setState({
|
|
tmpID: contact.id,
|
|
tmpNote: contact.notes,
|
|
tmpName: contact.name,
|
|
tmpFirstname: contact.firstname,
|
|
tmpEmail: contact.email,
|
|
tmpCompany: contact.company,
|
|
tmpAddress: contact.address,
|
|
tmpPhone: contact.phone,
|
|
tmpSelect1: contact.select1,
|
|
tmpSelect2: contact.select2,
|
|
tmpOther: contact.other,
|
|
tmpProducts: contact.product,
|
|
});
|
|
if (contact.type === 'client') {
|
|
this.setState({ clientChecked: true });
|
|
} else if (contact.type === 'prospect') {
|
|
this.setState({ prospectChecked: true });
|
|
} else {
|
|
this.setState({ otherChecked: true });
|
|
}
|
|
if (contact.visits !== null) {
|
|
const tmp = JSON.parse(contact.visits);
|
|
this.setState({ visits: tmp });
|
|
if (tmp.length > 0) {
|
|
this.setState({ tmpVisitNote: tmp[this.state.selectedVisit].note });
|
|
}
|
|
}
|
|
if (contact.products !== null) {
|
|
const tmp = JSON.parse(contact.products);
|
|
this.setState({
|
|
p1: tmp[0],
|
|
p2: tmp[1],
|
|
p3: tmp[2],
|
|
p4: tmp[3],
|
|
p5: tmp[4],
|
|
p6: tmp[5],
|
|
p7: tmp[6],
|
|
p8: tmp[7],
|
|
p9: tmp[8],
|
|
p10: tmp[9],
|
|
});
|
|
}
|
|
}
|
|
|
|
componentDidMount() {
|
|
const { action } = this.props.route.params;
|
|
if (action === 'edit') {
|
|
this.setState({ action: 'edit' });
|
|
this.populate();
|
|
}
|
|
|
|
BarCodeScanner.requestPermissionsAsync().then(res => {
|
|
this.setState({ hasPermission: res.status === 'granted' });
|
|
});
|
|
|
|
}
|
|
|
|
render() {
|
|
const handleBarCodeScanned = ({ type, data }) => {
|
|
this.setState({ scanned: true });
|
|
if (data.includes('VCARD')) {
|
|
let datas = vCard.parse(data);
|
|
let tmpDatas = [];
|
|
if (datas['n'] !== undefined) {
|
|
const nx = Object.assign({ n1: [{ value: datas['n'][0].value[0] }] }, { n2: [{ value: datas['n'][0].value[1] }] });
|
|
datas = Object.assign(datas, nx);
|
|
}
|
|
if (datas['adr'] !== undefined) {
|
|
let tmp = datas['adr'][0].value;
|
|
let tmpadr = '';
|
|
for (let i = 0; i < tmp.length; i++) {
|
|
if (tmp[i].length > 0) {
|
|
if (tmpadr.length > 0) {
|
|
tmpadr = tmpadr + ', ' + tmp[i];
|
|
} else {
|
|
tmpadr = tmp[i];
|
|
}
|
|
}
|
|
}
|
|
datas['adr'] = [{ value: tmpadr }];
|
|
}
|
|
Object.keys(datas).map((objectKey, index) => {
|
|
if (objectKey === 'email' || objectKey === 'adr' || objectKey === 'tel' || objectKey === 'org' || objectKey === 'n1' || objectKey === 'n2') {
|
|
let value = datas[objectKey][0].value;
|
|
if (typeof value === 'string') {
|
|
tmpDatas.push(value);
|
|
}
|
|
}
|
|
});
|
|
this.setState({ parsedType: 'vcard', parsedDatas: tmpDatas, showQRcodevCard: false, showDynContact: true })
|
|
} else {
|
|
Alert.alert(i18n.t('contact_details_s.qrcode_not_vcard_format'));
|
|
}
|
|
};
|
|
return (
|
|
<View style={styles.container}>
|
|
<ScrollView style={{ flex: 1 }}>
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}}>
|
|
<CheckBox
|
|
checkedColor={'#ea4f52'}
|
|
center
|
|
title={i18n.t('contact_details_s.customer')}
|
|
checkedIcon="dot-circle-o"
|
|
uncheckedIcon="circle-o"
|
|
checked={this.state.clientChecked}
|
|
containerStyle={styles.clearRadio}
|
|
onPress={() => this.updateContactType('client')}
|
|
/>
|
|
<CheckBox
|
|
checkedColor={'#ea4f52'}
|
|
center
|
|
title={i18n.t('contact_details_s.prospect')}
|
|
checkedIcon="dot-circle-o"
|
|
uncheckedIcon="circle-o"
|
|
checked={this.state.prospectChecked}
|
|
containerStyle={styles.clearRadio}
|
|
onPress={() => this.updateContactType('prospect')}
|
|
/>
|
|
<CheckBox
|
|
checkedColor={'#ea4f52'}
|
|
center
|
|
title={i18n.t('contact_details_s.other')}
|
|
checkedIcon="dot-circle-o"
|
|
uncheckedIcon="circle-o"
|
|
checked={this.state.otherChecked}
|
|
containerStyle={styles.clearRadio}
|
|
onPress={() => this.updateContactType('other')}
|
|
/>
|
|
{this.state.otherChecked === true && (
|
|
<TextInput
|
|
style={{
|
|
backgroundColor: 'white',
|
|
margin: 10,
|
|
padding: 10,
|
|
flex: 2,
|
|
}}
|
|
value={this.state.tmpOther}
|
|
placeholder={i18n.t('contact_details_s.description')}
|
|
onChangeText={text => this.setState({ tmpOther: text })}
|
|
/>
|
|
)}
|
|
</View>
|
|
<View style={{ flexDirection: 'row' }}>
|
|
<TextInput
|
|
style={{ backgroundColor: 'white', margin: 10, padding: 10, flex: 1 }}
|
|
value={this.state.tmpName}
|
|
placeholder={i18n.t('global.name') + ' (' + i18n.t('global.required') + ')'}
|
|
onChangeText={text => this.setState({ tmpName: text })}
|
|
/>
|
|
<TextInput
|
|
style={{ backgroundColor: 'white', margin: 10, padding: 10, flex: 1 }}
|
|
value={this.state.tmpFirstname}
|
|
placeholder={i18n.t('global.firstname') + ' (' + i18n.t('global.required') + ')'}
|
|
onChangeText={text => this.setState({ tmpFirstname: text })}
|
|
/>
|
|
</View>
|
|
<TextInput
|
|
style={styles.input}
|
|
value={this.state.tmpEmail}
|
|
placeholder={i18n.t('global.email') + ' (' + i18n.t('global.required') + ')'}
|
|
onChangeText={text => this.setState({ tmpEmail: text })}
|
|
autoCapitalize={'none'}
|
|
autoCorrect={false}
|
|
keyboardType={'email-address'}
|
|
/>
|
|
<TextInput
|
|
style={styles.input}
|
|
value={this.state.tmpCompany}
|
|
placeholder={i18n.t('global.company')}
|
|
onChangeText={text => this.setState({ tmpCompany: text })}
|
|
/>
|
|
<TextInput
|
|
style={styles.input}
|
|
value={this.state.tmpAddress}
|
|
placeholder={i18n.t('global.address')}
|
|
onChangeText={text => this.setState({ tmpAddress: text })}
|
|
/>
|
|
<TextInput
|
|
style={styles.input}
|
|
value={this.state.tmpPhone}
|
|
placeholder={i18n.t('global.phone')}
|
|
onChangeText={text => this.setState({ tmpPhone: text })}
|
|
autoCompleteType={'tel'}
|
|
dataDetectorTypes={'phoneNumber'}
|
|
keyboardType={'phone-pad'}
|
|
/>
|
|
<View style={{ flexDirection: 'row' }}>
|
|
<View style={{ flex: 1, flexDirection: 'row' }}>
|
|
<FontAwesome5 name="sort-down" size={20} color={'black'} style={{ zIndex: 1, position: 'absolute', right: 25, top: 20 }} />
|
|
<Picker
|
|
selectedValue={this.state.tmpSelect1}
|
|
style={styles.select}
|
|
onValueChange={(itemValue, itemIndex) => {
|
|
if (itemValue !== '0') {
|
|
this.setState({ tmpSelect1: itemValue });
|
|
}
|
|
}}>
|
|
<Picker.Item label={i18n.t('custom.select-1.title')} value="0" />
|
|
<Picker.Item label={i18n.t('custom.select-1.c1')} value="commerce-de-detail" />
|
|
<Picker.Item label={i18n.t('custom.select-1.c2')} value={'home-service-freezer-center'} />
|
|
<Picker.Item label={i18n.t('custom.select-1.c3')} value={'restauration-service-a-table'} />
|
|
<Picker.Item label={i18n.t('custom.select-1.c4')} value={'fast-food-et-snacking'} />
|
|
<Picker.Item label={i18n.t('custom.select-1.c5')} value={'cafetaria-self-service'} />
|
|
<Picker.Item label={i18n.t('custom.select-1.c6')} value={'societe-de-restauration'} />
|
|
<Picker.Item label={i18n.t('custom.select-1.c7')} value={'restauration-gre-a-gre-cuisine-centrale'} />
|
|
<Picker.Item label={i18n.t('custom.select-1.c8')} value={'distributeur-independant'} />
|
|
<Picker.Item label={i18n.t('custom.select-1.c9')} value={'boulangerie-patisserie'} />
|
|
<Picker.Item label={i18n.t('custom.select-1.c10')} value={'pai'} />
|
|
<Picker.Item label={i18n.t('custom.select-1.c11')} value={'destockeur'} />
|
|
<Picker.Item label={i18n.t('custom.select-1.c12')} value={'commerce-halal'} />
|
|
<Picker.Item label={i18n.t('custom.select-1.c13')} value={'restauration-d-hebergement'} />
|
|
<Picker.Item label={i18n.t('custom.select-1.c14')} value={'centrale-restauration-commerciale'} />
|
|
<Picker.Item label={i18n.t('custom.select-1.c15')} value={'restauration-evenementielle-et-parc'} />
|
|
<Picker.Item label={i18n.t('custom.select-1.c16')} value={'restauration-de-transport'} />
|
|
<Picker.Item label={i18n.t('custom.select-1.c17')} value={'marche-public'} />
|
|
<Picker.Item label={i18n.t('custom.select-1.c18')} value={'cash'} />
|
|
<Picker.Item label={i18n.t('custom.select-1.c19')} value={'distributeur-national'} />
|
|
<Picker.Item label={i18n.t('custom.select-1.c20')} value={'rungis'} />
|
|
<Picker.Item label={i18n.t('custom.select-1.c21')} value={'abbatoir'} />
|
|
<Picker.Item label={i18n.t('custom.select-1.c22')} value={'autre'} />
|
|
</Picker>
|
|
</View>
|
|
<View style={{ flex: 1, flexDirection: 'row' }}>
|
|
<FontAwesome5 name="sort-down" size={20} color={'black'} style={{ zIndex: 1, position: 'absolute', right: 25, top: 20 }} />
|
|
<Picker
|
|
selectedValue={this.state.tmpSelect2}
|
|
style={styles.select}
|
|
onValueChange={(itemValue, itemIndex) => {
|
|
if (itemValue !== '0') {
|
|
this.setState({ tmpSelect2: itemValue });
|
|
}
|
|
}}>
|
|
<Picker.Item label={i18n.t('custom.select-2.title')} value="0" />
|
|
<Picker.Item label={i18n.t('custom.select-2.c1')} value={'celvia-dinde'} />
|
|
<Picker.Item label={i18n.t('custom.select-2.c2')} value={'celvia-elabores'} />
|
|
<Picker.Item label={i18n.t('custom.select-2.c3')} value={'celvia-serent'} />
|
|
<Picker.Item label={i18n.t('custom.select-2.c4')} value={'procanar'} />
|
|
<Picker.Item label={i18n.t('custom.select-2.c5')} value={'celtys'} />
|
|
<Picker.Item label={i18n.t('custom.select-2.c6')} value={'farmor'} />
|
|
<Picker.Item label={i18n.t('custom.select-2.c7')} value={'robichon'} />
|
|
<Picker.Item label={i18n.t('custom.select-2.c8')} value={'les-volailles-de-keranna'} />
|
|
<Picker.Item label={i18n.t('custom.select-2.c9')} value={'bosher-volaille'} />
|
|
<Picker.Item label={i18n.t('custom.select-2.c10')} value={'ldc-bretagne'} />
|
|
<Picker.Item label={i18n.t('custom.select-2.c11')} value={'doux-farmor'} />
|
|
<Picker.Item label={i18n.t('custom.select-2.c12')} value={'favreau'} />
|
|
</Picker>
|
|
</View>
|
|
</View>
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
justifyContent: 'center',
|
|
}}>
|
|
<CheckBox
|
|
checkedColor={'#ea4f52'}
|
|
title={i18n.t('custom.interest.p1')}
|
|
checked={this.state.p1}
|
|
onPress={() => this.setState({ p1: !this.state.p1 })}
|
|
containerStyle={styles.clearCheckbox}
|
|
/>
|
|
<CheckBox
|
|
checkedColor={'#ea4f52'}
|
|
title={i18n.t('custom.interest.p2')}
|
|
checked={this.state.p2}
|
|
onPress={() => this.setState({ p2: !this.state.p2 })}
|
|
containerStyle={styles.clearCheckbox}
|
|
/>
|
|
<CheckBox
|
|
checkedColor={'#ea4f52'}
|
|
title={i18n.t('custom.interest.p3')}
|
|
checked={this.state.p3}
|
|
onPress={() => this.setState({ p3: !this.state.p3 })}
|
|
containerStyle={styles.clearCheckbox}
|
|
/>
|
|
<CheckBox
|
|
checkedColor={'#ea4f52'}
|
|
title={i18n.t('custom.interest.p4')}
|
|
checked={this.state.p4}
|
|
onPress={() => this.setState({ p4: !this.state.p4 })}
|
|
containerStyle={styles.clearCheckbox}
|
|
/>
|
|
</View>
|
|
</ScrollView>
|
|
<View style={{ flex: 1, margin: 5 }}>
|
|
<View style={{ flex: 1 }}>
|
|
<ButtonGroup
|
|
buttons={[i18n.t('contact_details_s.visits'), i18n.t('contact_details_s.notes')]}
|
|
selectedButtonStyle={{ backgroundColor: '#ea4f52' }}
|
|
containerStyle={{ height: 30 }}
|
|
selectedIndex={this.state.selectedIndex}
|
|
onPress={index => this.setState({ selectedIndex: index })}
|
|
/>
|
|
{this.state.selectedIndex === 0 && (
|
|
<View style={{ flex: 1 }}>
|
|
<View style={{ flexDirection: 'row' }}>
|
|
{this.state.visits.length > 0 && (
|
|
<View style={{ flex: 2, flexDirection: 'row' }}>
|
|
<FontAwesome5 name="sort-down" size={20} color={'black'} style={{ zIndex: 1, position: 'absolute', right: 25, top: 20 }} />
|
|
<Picker
|
|
style={styles.select}
|
|
selectedValue={this.state.selectedVisit}
|
|
onValueChange={(itemValue, itemIndex) => {
|
|
this.state.visits[
|
|
this.state.selectedVisit
|
|
].note = this.state.tmpVisitNote;
|
|
this.setState({
|
|
visits: this.state.visits,
|
|
selectedVisit: itemIndex,
|
|
tmpVisitNote: this.state.visits[itemIndex].note,
|
|
});
|
|
}}>
|
|
{this.state.visits.map((item, index) => {
|
|
return <Picker.Item label={item.title} value={index} />;
|
|
})}
|
|
</Picker>
|
|
</View>
|
|
)}
|
|
{this.state.visits.length === 0 && (
|
|
<View
|
|
style={{
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
}}>
|
|
<Text>{i18n.t('contact_details_s.no_visits')}.</Text>
|
|
</View>
|
|
)}
|
|
<View
|
|
style={{
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-evenly',
|
|
margin: 10,
|
|
}}>
|
|
<TouchableOpacity
|
|
style={styles.button}
|
|
onPress={() => this.setState({ showNewVisit: true })}>
|
|
<FontAwesome5 name="plus-circle" size={20} color={'#ea4f52'} />
|
|
</TouchableOpacity>
|
|
{this.state.visits.length > 0 && (
|
|
<TouchableOpacity
|
|
style={styles.button}
|
|
onPress={() => this.deleteVisit()}>
|
|
<FontAwesome5 name="trash" size={20} color={'#ea4f52'} />
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
</View>
|
|
{this.state.visits.length > 0 && (
|
|
<TextInput
|
|
style={styles.textArea}
|
|
underlineColorAndroid="transparent"
|
|
placeholder={i18n.t('contact_details_s.notes') + '...'}
|
|
placeholderTextColor="grey"
|
|
multiline={true}
|
|
value={this.state.tmpVisitNote}
|
|
onChangeText={text => this.setState({ tmpVisitNote: text })}
|
|
/>
|
|
)}
|
|
</View>
|
|
)}
|
|
{this.state.selectedIndex === 1 && (
|
|
<TextInput
|
|
style={styles.textArea}
|
|
underlineColorAndroid="transparent"
|
|
placeholder={i18n.t('contact_details_s.notes') + '...'}
|
|
placeholderTextColor="grey"
|
|
multiline={true}
|
|
value={this.state.tmpNote}
|
|
onChangeText={text => this.setState({ tmpNote: text })}
|
|
/>
|
|
)}
|
|
</View>
|
|
<View style={{ flexDirection: 'row', justifyContent: 'space-evenly' }}>
|
|
{this.state.action === 'add' && (
|
|
<>
|
|
<Button title="QRCode vCard" onPress={() => this.setState({ showQRcodevCard: true })} color={'#ea4f52'} />
|
|
</>
|
|
)}
|
|
<Button title={i18n.t('global.save')} onPress={() => this.updateContact()} color={'#ea4f52'} />
|
|
</View>
|
|
</View>
|
|
<Overlay
|
|
isVisible={this.state.showNewVisit}
|
|
windowBackgroundColor="rgba(255, 255, 255, .9)"
|
|
overlayBackgroundColor="white"
|
|
width={400}
|
|
height={300}>
|
|
<View
|
|
style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
|
|
<Text style={{ marginBottom: 10 }}>{i18n.t('contact_details_s.visit_name')} :</Text>
|
|
<TextInput
|
|
placeholder={i18n.t('contact_details_s.visit_name')}
|
|
value={this.state.newVisitTitle}
|
|
onChangeText={text => this.setState({ newVisitTitle: text })}
|
|
style={{
|
|
borderWidth: 1,
|
|
borderColor: 'lightgrey',
|
|
width: 300,
|
|
marginBottom: 15,
|
|
paddingLeft: 10,
|
|
}}
|
|
/>
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-evenly',
|
|
alignItems: 'center',
|
|
width: 400,
|
|
}}>
|
|
<Button
|
|
title={i18n.t('global.cancel')}
|
|
onPress={() => this.setState({ showNewVisit: false })}
|
|
color={'#ea4f52'}
|
|
/>
|
|
<Button title={i18n.t('global.add')} onPress={() => this.newVisit()} color={'#ea4f52'} />
|
|
</View>
|
|
</View>
|
|
</Overlay>
|
|
<Overlay
|
|
isVisible={this.state.showQRcodevCard}
|
|
windowBackgroundColor="rgba(255, 255, 255, .9)"
|
|
overlayBackgroundColor="white"
|
|
width={400}
|
|
height={300}>
|
|
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
|
|
{this.state.hasPermission === true && (
|
|
<BarCodeScanner
|
|
onBarCodeScanned={this.state.scanned ? undefined : handleBarCodeScanned}
|
|
barCodeTypes={[BarCodeScanner.Constants.BarCodeType.qr]}
|
|
style={{ flex: 1, width: 380, height: 200 }}
|
|
/>
|
|
)}
|
|
{this.state.hasPermission === false && (
|
|
<Text>{i18n.t('error.camera_permission_denied')}.</Text>
|
|
)}
|
|
{this.state.hasPermission === null && (
|
|
<Text>{i18n.t('error.pending_camera_permission')}.</Text>
|
|
)}
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-evenly',
|
|
alignItems: 'center',
|
|
width: 400,
|
|
}}>
|
|
<Button
|
|
title={i18n.t('global.cancel')}
|
|
onPress={() => this.setState({ showQRcodevCard: false, scanned: false })}
|
|
color={'#ea4f52'}
|
|
/>
|
|
{this.state.scanned && <Button title={i18n.t('global.retry')} onPress={() => this.setState({ scanned: false })} color={'#ea4f52'} />}
|
|
</View>
|
|
</View>
|
|
</Overlay>
|
|
<Overlay
|
|
isVisible={this.state.showDynContact}
|
|
windowBackgroundColor="rgba(255, 255, 255, .9)"
|
|
overlayBackgroundColor="white"
|
|
width={400}
|
|
height={400}>
|
|
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'space-evenly' }}>
|
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
|
<Text style={{ flex: 1, paddingLeft: 10 }}>{i18n.t('global.name')}</Text>
|
|
<Picker
|
|
selectedValue={this.state.parsedName}
|
|
style={{ height: 50, width: 250 }}
|
|
onValueChange={(itemValue, itemIndex) => {
|
|
this.setState({ parsedName: itemValue });
|
|
}}>
|
|
<Picker.Item label="" value="0" key={0} />
|
|
{this.state.parsedType === 'vcard' && this.state.parsedDatas.map((item, index) => {
|
|
return <Picker.Item label={item} value={item} key={(index + 1).toString()} />;
|
|
})}
|
|
</Picker>
|
|
</View>
|
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
|
<Text style={{ flex: 1, paddingLeft: 10 }}>{i18n.t('global.firstname')}</Text>
|
|
<Picker
|
|
selectedValue={this.state.parsedFirstname}
|
|
style={{ height: 50, width: 250 }}
|
|
onValueChange={(itemValue, itemIndex) =>
|
|
this.setState({ parsedFirstname: itemValue })
|
|
}>
|
|
<Picker.Item label="" value="0" key={0} />
|
|
{this.state.parsedType === 'vcard' && this.state.parsedDatas.map((item, index) => {
|
|
return <Picker.Item label={item} value={item} key={(index + 1).toString()} />;
|
|
})}
|
|
</Picker>
|
|
</View>
|
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
|
<Text style={{ flex: 1, paddingLeft: 10 }}>{i18n.t('global.email')}</Text>
|
|
<Picker
|
|
selectedValue={this.state.parsedEmail}
|
|
style={{ height: 50, width: 250 }}
|
|
onValueChange={(itemValue, itemIndex) =>
|
|
this.setState({ parsedEmail: itemValue })
|
|
}>
|
|
<Picker.Item label="" value="0" key={0} />
|
|
{this.state.parsedType === 'vcard' && this.state.parsedDatas.map((item, index) => {
|
|
return <Picker.Item label={item} value={item} key={(index + 1).toString()} />;
|
|
})}
|
|
</Picker>
|
|
</View>
|
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
|
<Text style={{ flex: 1, paddingLeft: 10 }}>{i18n.t('global.company')}</Text>
|
|
<Picker
|
|
selectedValue={this.state.parsedCompany}
|
|
style={{ height: 50, width: 250 }}
|
|
onValueChange={(itemValue, itemIndex) =>
|
|
this.setState({ parsedCompany: itemValue })
|
|
}>
|
|
<Picker.Item label="" value="0" key={0} />
|
|
{this.state.parsedType === 'vcard' && this.state.parsedDatas.map((item, index) => {
|
|
return <Picker.Item label={item} value={item} key={(index + 1).toString()} />;
|
|
})}
|
|
</Picker>
|
|
</View>
|
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
|
<Text style={{ flex: 1, paddingLeft: 10 }}>{i18n.t('global.address')}</Text>
|
|
<Picker
|
|
selectedValue={this.state.parsedAddress}
|
|
style={{ height: 50, width: 250 }}
|
|
onValueChange={(itemValue, itemIndex) =>
|
|
this.setState({ parsedAddress: itemValue })
|
|
}>
|
|
<Picker.Item label="" value="0" key={0} />
|
|
{this.state.parsedType === 'vcard' && this.state.parsedDatas.map((item, index) => {
|
|
return <Picker.Item label={item} value={item} key={(index + 1).toString()} />;
|
|
})}
|
|
</Picker>
|
|
</View>
|
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
|
<Text style={{ flex: 1, paddingLeft: 10 }}>{i18n.t('global.phone')}</Text>
|
|
<Picker
|
|
selectedValue={this.state.parsedPhone}
|
|
style={{ height: 50, width: 250 }}
|
|
onValueChange={(itemValue, itemIndex) =>
|
|
this.setState({ parsedPhone: itemValue })
|
|
}>
|
|
<Picker.Item label="" value="0" key={0} />
|
|
{this.state.parsedType === 'vcard' && this.state.parsedDatas.map((item, index) => {
|
|
return <Picker.Item label={item} value={item} key={(index + 1).toString()} />;
|
|
})}
|
|
</Picker>
|
|
</View>
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-evenly',
|
|
alignItems: 'center',
|
|
width: 400,
|
|
}}>
|
|
<Button
|
|
title={i18n.t('global.cancel')}
|
|
onPress={() => this.setState({ showDynContact: false, scanned: false, parsedName: '', parsedFirstname: '', parsedEmail: '', parsedCompany: '', parsedAddress: '', parsedPhone: '' })}
|
|
color={'#ea4f52'}
|
|
/>
|
|
<Button
|
|
title={i18n.t('global.next')}
|
|
onPress={() => this.setState({
|
|
tmpName: this.state.parsedName,
|
|
tmpFirstname: this.state.parsedFirstname,
|
|
tmpEmail: this.state.parsedEmail,
|
|
tmpCompany: this.state.parsedCompany,
|
|
tmpAddress: this.state.parsedAddress,
|
|
tmpPhone: this.state.parsedPhone,
|
|
parsedName: '',
|
|
parsedFirstname: '',
|
|
parsedEmail: '',
|
|
parsedCompany: '',
|
|
parsedAddress: '',
|
|
parsedPhone: '',
|
|
showDynContact: false,
|
|
scanned: false,
|
|
})}
|
|
color={'#ea4f52'}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</Overlay>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(ContactDetailsScreen);
|