540 lines
24 KiB
JavaScript
540 lines
24 KiB
JavaScript
import React from 'react';
|
|
import {
|
|
View,
|
|
Button,
|
|
FlatList,
|
|
Text,
|
|
TouchableOpacity,
|
|
Alert,
|
|
TextInput,
|
|
} from 'react-native';
|
|
// Reduxs
|
|
import { connect } from 'react-redux';
|
|
// 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.app.users,
|
|
contacts: state.app.contacts,
|
|
documents: state.app.documents,
|
|
currentUser: state.app.currentUser,
|
|
};
|
|
}
|
|
|
|
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.dispatch({ type: 'SEND_BROCHURE', data: 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.dispatch({ type: 'EDIT_CONTACT', data: 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,
|
|
});
|
|
}
|
|
|
|
deleteContact(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.dispatch({ type: 'DELETE_CONTACT', data: 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}>
|
|
{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.deleteContact(item.id);
|
|
}}>
|
|
<FontAwesome5 name="trash" size={20} color={'#ea4f52'} />
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
style={styles.button}
|
|
onPress={() => {
|
|
this.setState({
|
|
showTransferContact: true,
|
|
contactToTransfer: item,
|
|
});
|
|
}}>
|
|
<FontAwesome5 name="paper-plane" size={20} color={'#ea4f52'} />
|
|
</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}>{i18n.t('global.name')} <FontAwesome5 name={'sort'} /></Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity onPress={() => {
|
|
this.sortContacts('company');
|
|
}}>
|
|
<Text style={styles.clickable}>{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]; });
|
|
|
|
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={'#ea4f52'}
|
|
title={i18n.t('global.add')}
|
|
onPress={() =>
|
|
this.props.navigation.navigate('ContactDetailsScreen', {
|
|
action: 'add',
|
|
})
|
|
}
|
|
/>
|
|
<Button
|
|
color={'#ea4f52'}
|
|
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} 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={'#ea4f52'}
|
|
title={i18n.t('global.cancel')}
|
|
onPress={() => this.setState({ showTransferContact: false })}
|
|
/>
|
|
<Button
|
|
color={'#ea4f52'}
|
|
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
|
|
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={'#ea4f52'}
|
|
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={'#ea4f52'} />
|
|
</View>
|
|
</View>
|
|
</Overlay>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps)(ContactScreen);
|