635 lines
20 KiB
JavaScript
635 lines
20 KiB
JavaScript
import React from 'react';
|
|
import {
|
|
Alert,
|
|
Button,
|
|
FlatList,
|
|
Text,
|
|
TextInput,
|
|
TouchableOpacity,
|
|
View,
|
|
} from 'react-native';
|
|
// Reduxs
|
|
import { connect } from 'react-redux';
|
|
import { deleteContact, 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';
|
|
// Flash Messages
|
|
import { showMessage } from 'react-native-flash-message';
|
|
// Overlay
|
|
import { Overlay } from '@rneui/themed';
|
|
// Picker
|
|
import { Picker } from '@react-native-picker/picker';
|
|
// Style
|
|
import styles from '../../Resources/Styles/ContactStyle';
|
|
|
|
function mapStateToProps(state) {
|
|
return {
|
|
users: state.users.users,
|
|
contacts: state.contacts,
|
|
documents: state.documents,
|
|
currentUser: state.app.currentUser,
|
|
mainColor: state.app.mainColor,
|
|
};
|
|
}
|
|
|
|
const mapDispatchToProps = dispatch => {
|
|
return {
|
|
editContact: (user, data) => dispatch(editContact(user, data)),
|
|
deleteContact: (user, id) => dispatch(deleteContact(user, id)),
|
|
sendBrochure: email => dispatch({ type: 'SEND_BROCHURE', data: email }),
|
|
};
|
|
};
|
|
|
|
class ContactScreen extends React.Component {
|
|
state = {
|
|
contacts: [],
|
|
sortType: 'asc',
|
|
sortField: 'name',
|
|
searchTxt: '',
|
|
showTransferContact: false,
|
|
selectedTransferUser: 0,
|
|
contactToTransfer: {},
|
|
showSendBrochure: false,
|
|
selectedDocument: -1,
|
|
sendDocumentList: [],
|
|
selectedSendBrochureEmail: -1,
|
|
tmpSendBrochureEmail: '',
|
|
tmpSendBrochureSubject: '',
|
|
tmpSendBrochureMessage: '',
|
|
sortedDocuments: [],
|
|
sortedEmails: [],
|
|
};
|
|
|
|
sendBrochure() {
|
|
if (
|
|
this.state.tmpSendBrochureEmail !== '' &&
|
|
this.state.tmpSendBrochureSubject !== '' &&
|
|
this.state.tmpSendBrochureMessage !== '' &&
|
|
this.state.sendDocumentList.length > 0 &&
|
|
Helpers.isEmailValid(this.state.tmpSendBrochureEmail)
|
|
) {
|
|
const email = {
|
|
email: this.state.tmpSendBrochureEmail,
|
|
subject: this.state.tmpSendBrochureSubject,
|
|
message: this.state.tmpSendBrochureMessage,
|
|
documents: JSON.stringify(this.state.sendDocumentList),
|
|
user_id: this.props.currentUser.id,
|
|
};
|
|
this.props.sendBrochure(email);
|
|
this.setState({
|
|
showSendBrochure: false,
|
|
tmpSendBrochureEmail: '',
|
|
tmpSendBrochureSubject: '',
|
|
tmpSendBrochureMessage: '',
|
|
selectedSendBrochureEmail: -1,
|
|
selectedDocument: -1,
|
|
sendDocumentList: [],
|
|
});
|
|
showMessage({
|
|
message: i18n.t('global.message_sent') + '.',
|
|
description: i18n.t('global.message_will_be_sent_after_sync') + '.',
|
|
type: 'success',
|
|
duration: 1500,
|
|
});
|
|
} else {
|
|
Alert.alert(
|
|
i18n.t('error.incomplete_form'),
|
|
i18n.t('error.fill_all_fields_and_1_doc_min') + '.',
|
|
);
|
|
}
|
|
}
|
|
|
|
transferContact() {
|
|
const nextUser = this.props.users.filter(
|
|
user => user.id !== this.props.currentUser.id,
|
|
)[this.state.selectedTransferUser];
|
|
const transferContact = this.state.contactToTransfer;
|
|
const contact = {
|
|
id: transferContact.id,
|
|
email: transferContact.email,
|
|
type: transferContact.type,
|
|
other: transferContact.other,
|
|
network: transferContact.network,
|
|
name: transferContact.name,
|
|
firstname: transferContact.firstname,
|
|
office: transferContact.office,
|
|
company: transferContact.company,
|
|
address: transferContact.address,
|
|
phone: transferContact.phone,
|
|
products: transferContact.products,
|
|
notes: transferContact.note,
|
|
visits: transferContact.visits,
|
|
to_delete: false,
|
|
synced: false,
|
|
user_id: nextUser.id,
|
|
};
|
|
this.props.editContact(this.props.currentUser, contact);
|
|
this.setState({ showTransferContact: false });
|
|
showMessage({
|
|
message: i18n.t('contact_s.contact_transferred') + '.',
|
|
description: i18n.t('contact_s.contact_will_be_sent_after_sync') + '.',
|
|
type: 'success',
|
|
duration: 1500,
|
|
});
|
|
}
|
|
|
|
deleteContactAction(id) {
|
|
Alert.alert(
|
|
i18n.t('global.confirmation'),
|
|
i18n.t('contact_s.confirm_contact_delete'),
|
|
[
|
|
{
|
|
text: i18n.t('global.no'),
|
|
onPress: () => console.log('Cancel Pressed'),
|
|
style: 'cancel',
|
|
},
|
|
{
|
|
text: i18n.t('global.yes'),
|
|
onPress: () => {
|
|
this.setState({ contacts: [], sortedEmails: [] });
|
|
this.props.deleteContact(this.props.currentUser, id);
|
|
showMessage({
|
|
message: i18n.t('contact_s.contact_deleted') + '.',
|
|
type: 'success',
|
|
duration: 500,
|
|
});
|
|
},
|
|
},
|
|
],
|
|
{ cancelable: false },
|
|
);
|
|
}
|
|
|
|
Item(item) {
|
|
return (
|
|
<View style={styles.item}>
|
|
<TouchableOpacity
|
|
onPress={() =>
|
|
this.props.navigation.navigate('ContactDetailsScreen', {
|
|
action: 'edit',
|
|
contactId: item.id,
|
|
})
|
|
}>
|
|
<Text style={{ ...styles.clickable, color: this.props.mainColor }}>
|
|
{item.name.toUpperCase()} {item.firstname}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
<Text style={styles.company}>{item.company}</Text>
|
|
<Text style={styles.email}>{item.email}</Text>
|
|
<View style={styles.buttons}>
|
|
<TouchableOpacity
|
|
style={styles.button}
|
|
onPress={() => {
|
|
this.deleteContactAction(item.id);
|
|
}}>
|
|
<FontAwesome5 name="trash" size={20} color={this.props.mainColor} />
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
style={styles.button}
|
|
onPress={() => {
|
|
this.setState({
|
|
showTransferContact: true,
|
|
contactToTransfer: item,
|
|
});
|
|
}}>
|
|
<FontAwesome5
|
|
name="paper-plane"
|
|
size={20}
|
|
color={this.props.mainColor}
|
|
/>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
sortContacts(field) {
|
|
let sort;
|
|
if (field !== this.state.sortField) {
|
|
sort = 'asc';
|
|
} else {
|
|
if (this.state.sortType === 'asc') {
|
|
sort = 'desc';
|
|
} else {
|
|
sort = 'asc';
|
|
}
|
|
}
|
|
this.setState({
|
|
contacts: this.state.contacts.sort(Helpers.compareValues(field, sort)),
|
|
sortType: sort,
|
|
sortField: field,
|
|
});
|
|
}
|
|
|
|
HeaderItem() {
|
|
return (
|
|
<View style={styles.item}>
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
this.sortContacts('name');
|
|
}}>
|
|
<Text style={{ ...styles.clickable, color: this.props.mainColor }}>
|
|
{i18n.t('global.name')} <FontAwesome5 name={'sort'} />
|
|
</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
this.sortContacts('company');
|
|
}}>
|
|
<Text style={{ ...styles.clickable, color: this.props.mainColor }}>
|
|
{i18n.t('global.company')} <FontAwesome5 name={'sort'} />
|
|
</Text>
|
|
</TouchableOpacity>
|
|
<Text style={styles.email}>{i18n.t('global.email')}</Text>
|
|
<Text style={styles.buttons} />
|
|
</View>
|
|
);
|
|
}
|
|
|
|
handleSearchBtn() {
|
|
if (this.state.searchTxt.length > 0) {
|
|
let obj = this.props.contacts;
|
|
let array = Object.keys(obj).map(function (key) {
|
|
return obj[key];
|
|
});
|
|
this.setState({
|
|
contacts: array.sort(Helpers.compareValues('name', 'asc')),
|
|
sortType: 'asc',
|
|
searchTxt: '',
|
|
});
|
|
}
|
|
}
|
|
handleSearchTxt(text) {
|
|
this.setState({ searchTxt: text });
|
|
if (text.length > 0) {
|
|
let tmpContactsName = this.props.contacts.filter(
|
|
item => item.name.toLowerCase().indexOf(text.toLowerCase()) >= 0,
|
|
);
|
|
let tmpContactsCompany = this.props.contacts.filter(
|
|
item => item.company.toLowerCase().indexOf(text.toLowerCase()) >= 0,
|
|
);
|
|
let resSearch = Object.assign(tmpContactsName, tmpContactsCompany);
|
|
this.setState({
|
|
contacts: resSearch.sort(Helpers.compareValues('name', 'asc')),
|
|
sortType: 'asc',
|
|
});
|
|
} else {
|
|
let obj = this.props.contacts;
|
|
let array = Object.keys(obj).map(function (key) {
|
|
return obj[key];
|
|
});
|
|
this.setState({
|
|
contacts: array.sort(Helpers.compareValues('name', 'asc')),
|
|
sortType: 'asc',
|
|
});
|
|
}
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.init();
|
|
}
|
|
|
|
componentDidUpdate(prevProps, prevState, snapshot) {
|
|
if (prevProps.contacts !== this.props.contacts) {
|
|
this.init();
|
|
}
|
|
}
|
|
|
|
init() {
|
|
let objContacts = this.props.contacts;
|
|
let objDocs = this.props.documents;
|
|
let arrayContacts = Object.keys(objContacts).map(function (key) {
|
|
return objContacts[key];
|
|
});
|
|
let arrayEmails = Object.keys(objContacts).map(function (key) {
|
|
return objContacts[key];
|
|
});
|
|
let arrayDocs = Object.keys(objDocs).map(function (key) {
|
|
return objDocs[key];
|
|
});
|
|
|
|
const { action } = this.props.route.params;
|
|
if (action === 'add') {
|
|
this.props.navigation.navigate('ContactDetailsScreen', {
|
|
action: 'add',
|
|
});
|
|
}
|
|
|
|
this.setState({
|
|
contacts: arrayContacts.sort(Helpers.compareValues('name', 'asc')),
|
|
sortedDocuments: arrayDocs.sort(Helpers.compareValues('title', 'asc')),
|
|
sortedEmails: arrayEmails.sort(Helpers.compareValues('email', 'asc')),
|
|
sortType: 'asc',
|
|
sortField: 'name',
|
|
});
|
|
}
|
|
|
|
render() {
|
|
const { contactAdded } = this.props.route.params;
|
|
|
|
if (contactAdded === true) {
|
|
this.props.navigation.setParams({ contactAdded: false });
|
|
showMessage({
|
|
message: i18n.t('contact_s.contact_added') + '.',
|
|
type: 'success',
|
|
duration: 500,
|
|
});
|
|
}
|
|
return (
|
|
<View style={styles.container}>
|
|
<View
|
|
style={{
|
|
marginTop: 20,
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-evenly',
|
|
alignItems: 'center',
|
|
}}>
|
|
<Button
|
|
color={this.props.mainColor}
|
|
title={i18n.t('global.add')}
|
|
onPress={() =>
|
|
this.props.navigation.navigate('ContactDetailsScreen', {
|
|
action: 'add',
|
|
})
|
|
}
|
|
/>
|
|
<Button
|
|
color={this.props.mainColor}
|
|
title={i18n.t('contact_s.send_flyer')}
|
|
onPress={() => this.setState({ showSendBrochure: true })}
|
|
/>
|
|
<View style={{ flexDirection: 'row' }}>
|
|
<TextInput
|
|
placeholder={i18n.t('global.search')}
|
|
style={styles.inputSearch}
|
|
value={this.state.searchTxt}
|
|
onChangeText={text => this.handleSearchTxt(text)}
|
|
/>
|
|
<TouchableOpacity
|
|
style={{
|
|
...styles.btnSearch,
|
|
backgroundColor: this.props.mainColor,
|
|
}}
|
|
onPress={() => this.handleSearchBtn()}>
|
|
{this.state.searchTxt.length > 0 ? (
|
|
<FontAwesome5 name={'times'} size={20} color={'white'} />
|
|
) : (
|
|
<FontAwesome5 name={'search'} size={20} color={'white'} />
|
|
)}
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
<View style={{ flex: 1, marginTop: 20 }}>
|
|
<FlatList
|
|
data={this.state.contacts}
|
|
renderItem={({ item }) => this.Item(item)}
|
|
ListHeaderComponent={this.HeaderItem.bind(this)}
|
|
keyExtractor={item => item.id.toString()}
|
|
/>
|
|
</View>
|
|
<Overlay
|
|
isVisible={this.state.showTransferContact}
|
|
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_s.select_contact')} :
|
|
</Text>
|
|
<Picker
|
|
style={{
|
|
width: 300,
|
|
marginBottom: 15,
|
|
paddingLeft: 10,
|
|
}}
|
|
selectedValue={this.state.selectedTransferUser}
|
|
onValueChange={(itemValue, itemIndex) => {
|
|
this.setState({ selectedTransferUser: itemIndex });
|
|
}}>
|
|
{this.props.users
|
|
.filter(user => user.id !== this.props.currentUser.id)
|
|
.map((item, index) => {
|
|
return (
|
|
<Picker.Item
|
|
label={item.email}
|
|
value={index}
|
|
key={item.id.toString()}
|
|
/>
|
|
);
|
|
})}
|
|
</Picker>
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-evenly',
|
|
alignItems: 'center',
|
|
width: 400,
|
|
}}>
|
|
<Button
|
|
color={this.props.mainColor}
|
|
title={i18n.t('global.cancel')}
|
|
onPress={() => this.setState({ showTransferContact: false })}
|
|
/>
|
|
<Button
|
|
color={this.props.mainColor}
|
|
title={i18n.t('contact_s.transfer')}
|
|
onPress={() => this.transferContact()}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</Overlay>
|
|
<Overlay
|
|
isVisible={this.state.showSendBrochure}
|
|
windowBackgroundColor="rgba(255, 255, 255, .9)"
|
|
overlayBackgroundColor="white"
|
|
width={600}
|
|
height={500}>
|
|
<View style={{ flex: 1 }}>
|
|
<View style={{ flex: 2, flexDirection: 'row' }}>
|
|
<View
|
|
style={{
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'flex-start',
|
|
}}>
|
|
<TextInput
|
|
style={styles.txtSendBrochure}
|
|
placeholder={i18n.t('global.email')}
|
|
autoCompleteType="email"
|
|
autoCapitalize="none"
|
|
keyboardType={'email-address'}
|
|
value={this.state.tmpSendBrochureEmail}
|
|
onChangeText={text =>
|
|
this.setState({ tmpSendBrochureEmail: text })
|
|
}
|
|
/>
|
|
<Picker
|
|
style={{
|
|
width: 300,
|
|
marginBottom: 15,
|
|
paddingLeft: 10,
|
|
}}
|
|
selectedValue={this.state.selectedSendBrochureEmail}
|
|
onValueChange={(itemValue, itemIndex) => {
|
|
if (itemValue !== '-1') {
|
|
this.setState({
|
|
tmpSendBrochureEmail:
|
|
this.state.sortedEmails[itemIndex - 1].email,
|
|
});
|
|
}
|
|
}}>
|
|
<Picker.Item
|
|
label={i18n.t('contact_s.contact_list') + ' :'}
|
|
value="-1"
|
|
/>
|
|
{this.state.sortedEmails.map((item, index) => {
|
|
return (
|
|
<Picker.Item
|
|
label={item.email}
|
|
value={index}
|
|
key={item.id.toString()}
|
|
/>
|
|
);
|
|
})}
|
|
</Picker>
|
|
<TextInput
|
|
style={styles.txtSendBrochure}
|
|
placeholder={i18n.t('global.subject')}
|
|
value={this.state.tmpSendBrochureSubject}
|
|
onChangeText={text =>
|
|
this.setState({ tmpSendBrochureSubject: text })
|
|
}
|
|
/>
|
|
<TextInput
|
|
style={styles.textAreaSendBrochure}
|
|
placeholder={i18n.t('global.message')}
|
|
value={this.state.tmpSendBrochureMessage}
|
|
multiline={true}
|
|
underlineColorAndroid="transparent"
|
|
onChangeText={text =>
|
|
this.setState({ tmpSendBrochureMessage: text })
|
|
}
|
|
/>
|
|
<Picker
|
|
style={{
|
|
width: 300,
|
|
marginBottom: 15,
|
|
paddingLeft: 10,
|
|
}}
|
|
selectedValue={this.state.selectedDocument}
|
|
onValueChange={(itemValue, itemIndex) => {
|
|
if (
|
|
itemValue !== '-1' &&
|
|
this.state.sendDocumentList.length < 8
|
|
) {
|
|
let tmp = this.state.sendDocumentList;
|
|
const toPush = this.state.sortedDocuments[itemIndex - 1];
|
|
const test = this.state.sendDocumentList.filter(
|
|
item => item.id === toPush.id,
|
|
);
|
|
if (test.length === 0) {
|
|
tmp.push(toPush);
|
|
this.setState({
|
|
sendDocumentList: tmp,
|
|
});
|
|
}
|
|
}
|
|
}}>
|
|
<Picker.Item
|
|
label={i18n.t('contact_s.documents_list') + ' :'}
|
|
value="-1"
|
|
/>
|
|
{this.state.sortedDocuments.map((item, index) => {
|
|
return (
|
|
<Picker.Item
|
|
label={
|
|
item.title + ' (' + item.type.toUpperCase() + ')'
|
|
}
|
|
value={index}
|
|
key={item.id.toString()}
|
|
/>
|
|
);
|
|
})}
|
|
</Picker>
|
|
</View>
|
|
<View
|
|
style={{
|
|
flex: 1,
|
|
borderWidth: 1,
|
|
borderColor: 'lightgrey',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: 600,
|
|
}}>
|
|
{this.state.sendDocumentList.map((item, index) => {
|
|
return (
|
|
<TouchableOpacity
|
|
key={index}
|
|
onPress={() => {
|
|
let tmp = this.state.sendDocumentList;
|
|
tmp.splice(this.props.documents[index], 1);
|
|
this.setState({
|
|
sendDocumentList: tmp,
|
|
});
|
|
}}>
|
|
<View
|
|
style={{
|
|
borderWidth: 1,
|
|
borderColor: 'lightgrey',
|
|
padding: 5,
|
|
margin: 5,
|
|
borderRadius: 5,
|
|
}}>
|
|
<Text>
|
|
{item.title} ({item.type.toUpperCase()}){' '}
|
|
<FontAwesome5 name="minus" size={15} />
|
|
</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
})}
|
|
</View>
|
|
</View>
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-evenly',
|
|
alignItems: 'center',
|
|
width: 600,
|
|
marginTop: 15,
|
|
}}>
|
|
<Button
|
|
color={this.props.mainColor}
|
|
title={i18n.t('global.cancel')}
|
|
onPress={() =>
|
|
this.setState({
|
|
showSendBrochure: false,
|
|
tmpSendBrochureEmail: '',
|
|
tmpSendBrochureSubject: '',
|
|
tmpSendBrochureMessage: '',
|
|
selectedSendBrochureEmail: -1,
|
|
selectedDocument: -1,
|
|
sendDocumentList: [],
|
|
})
|
|
}
|
|
/>
|
|
<Button
|
|
title={i18n.t('global.send')}
|
|
onPress={() => this.sendBrochure()}
|
|
color={this.props.mainColor}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</Overlay>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(ContactScreen);
|