667 lines
23 KiB
JavaScript
667 lines
23 KiB
JavaScript
import React, { Component } from 'react'
|
|
import {
|
|
View,
|
|
ScrollView,
|
|
TouchableOpacity,
|
|
Platform,
|
|
KeyboardAvoidingView,
|
|
Alert
|
|
} from 'react-native'
|
|
import Image from 'react-native-fast-image'
|
|
import Icon from '../../components/Icon'
|
|
import { Picker } from 'native-base'
|
|
import { BackgroundImage_RegisterForm } from '../../components/BackgroundImage_RegisterForm'
|
|
import LinearGradient from 'react-native-linear-gradient'
|
|
import Text from '../../components/Text'
|
|
import { CustomInput } from '../../components/CustomInput'
|
|
import { CustomButton } from '../../components/CustomButton'
|
|
import { CustomPicker } from '../../components/CustomPicker'
|
|
import GetWidthHeightDevice from '../../components/GetWidthHeightDevice'
|
|
import { bindActionCreators } from 'redux'
|
|
import { appSetDevice, appSetUser, appCleanUser } from '../../redux/app/action'
|
|
import { connect } from 'react-redux'
|
|
import { edit_profile, project, getBuildingByProjectId } from '../../api/UserApi'
|
|
import moment from 'moment'
|
|
import ImagePicker from 'react-native-image-crop-picker'
|
|
import ActionSheet from 'react-native-action-sheet'
|
|
import CustomDatePicker from '../room/CustomDatePicker';
|
|
import { t } from '../../utils/i18n'
|
|
|
|
let ACTIONSHEET_BUTTONS = [
|
|
t('take_photo'),
|
|
t('from_gallery'),
|
|
t('cancel')
|
|
]
|
|
|
|
// let DESTRUCTIVE_INDEX = 3;
|
|
let CANCEL_INDEX = 2
|
|
|
|
class EditProfileScreen extends Component {
|
|
|
|
constructor (props) {
|
|
super(props)
|
|
this.edit_profile = this.edit_profile.bind(this)
|
|
this.state = {
|
|
user: {},
|
|
image_url: require('../../../assets/images/profile.png'),
|
|
project_list:[],
|
|
building_list: [],
|
|
selected_project: 0,
|
|
project_name:t('choose_project'),
|
|
}
|
|
this.onImagePick = this.onImagePick.bind(this)
|
|
this.onTakeCamera = this.onTakeCamera.bind(this)
|
|
}
|
|
|
|
componentDidMount () {
|
|
const { navigation } = this.props
|
|
const users_state = navigation.getParam('user', 'NO ITEM')
|
|
const image = navigation.getParam('image', 'NO ITEM')
|
|
console.log("defaultImage",image);
|
|
if(image != null ){
|
|
this.setState({
|
|
image_url :image
|
|
})
|
|
}
|
|
// console.log('check user state ----------- ',users_state)
|
|
if(users_state.gender == null || users_state.gender == 'null'){
|
|
console.log('NULL');
|
|
// this.state.user.show_birth_date = users_state.birth_date;
|
|
this.setState({
|
|
user: {
|
|
gender: 'male',
|
|
name: users_state.name,
|
|
...users_state,
|
|
}
|
|
})
|
|
}else{
|
|
console.log('NOT NULL');
|
|
this.setState({
|
|
user: {
|
|
...users_state,
|
|
name: users_state.name
|
|
}
|
|
})
|
|
}
|
|
|
|
// this.getProjectList()
|
|
}
|
|
|
|
getProjectList() {
|
|
project()
|
|
.then(res => {
|
|
if (res.ok && res.data && res.data.data) {
|
|
this.setState({
|
|
project_list: res.data.data,
|
|
selected_project: res.data.data[0].id
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
getBuildingList() {
|
|
getBuildingByProjectId(this.state.selected_project)
|
|
.then(res => {
|
|
if (res.ok) {
|
|
this.setState({
|
|
building_list: res.data.data
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
edit_profile () {
|
|
if(this.state.user.password != null || this.state.user.password != ''){
|
|
if(this.state.user.password === this.state.user.confirm_password){
|
|
edit_profile(this.state.user)
|
|
.then(res => {
|
|
if(res.ok){
|
|
this.props.appSetUser(res.data)
|
|
Alert.alert(t('save_success'), '', [{
|
|
text: 'ok',
|
|
onPress: () => {
|
|
this.props.navigation.navigate('Profile')
|
|
}
|
|
}])
|
|
}else {
|
|
Alert.alert(t('save_fail_and_try'), '', [{
|
|
text: 'ok',
|
|
onPress: () => {
|
|
this.props.navigation.navigate('Profile')
|
|
}
|
|
}])
|
|
}
|
|
})
|
|
}else{
|
|
Alert.alert(t('incorrect_pw'), t('pw_not_match_and_retry'))
|
|
}
|
|
}else{
|
|
edit_profile(this.state.user)
|
|
.then(res => {
|
|
if(res.ok){
|
|
this.props.appSetUser(res.data)
|
|
Alert.alert(t('save_success'), '', [{
|
|
text: 'ok',
|
|
onPress: () => {
|
|
this.props.navigation.navigate('Profile')
|
|
}
|
|
}])
|
|
}else {
|
|
Alert.alert(t('save_fail_and_try'), '', [{
|
|
text: 'ok',
|
|
onPress: () => {
|
|
this.props.navigation.navigate('Profile')
|
|
}
|
|
}])
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
onImagePick () {
|
|
ImagePicker.openPicker({
|
|
width: 300,
|
|
height: 300,
|
|
cropping: true,
|
|
includeBase64: true
|
|
}).then(image => {
|
|
console.log('received base64 image', image)
|
|
let image_profile = {
|
|
uri: image.path,
|
|
type: image.mime,
|
|
name: 'image_profile.jpg',
|
|
}
|
|
|
|
let image_data = { uri: `data:${image.mime};base64,` + image.data, width: image.width, height: image.height };
|
|
this.setState({
|
|
image_url: image_profile,
|
|
images: null,
|
|
user: {
|
|
...this.state.user,
|
|
profile_image_id: image_profile,
|
|
profile_image: image_data
|
|
}
|
|
})
|
|
})
|
|
}
|
|
|
|
onTakeCamera () {
|
|
ImagePicker.openCamera({
|
|
cropping: true,
|
|
width: 300,
|
|
height: 300,
|
|
includeExif: true,
|
|
includeBase64: true
|
|
}).then(image => {
|
|
console.log('received image', image)
|
|
let image_data = { uri: `data:${image.mime};base64,` + image.data, width: image.width, height: image.height };
|
|
|
|
let image_profile = {
|
|
uri: image.path,
|
|
type: image.mime,
|
|
name: 'image_profile.jpg',
|
|
}
|
|
this.setState({
|
|
image_url: { uri: image.path, width: image.width, height: image.height, mime: image.mime },
|
|
images: null,
|
|
user: {
|
|
...this.state.user,
|
|
profile_image_id: image_profile,
|
|
profile_image: image_data
|
|
}
|
|
})
|
|
})
|
|
}
|
|
|
|
render () {
|
|
const { navigation } = this.props
|
|
const users = navigation.getParam('user', 'NO ITEM')
|
|
// console.log('users :', users);
|
|
return (
|
|
<KeyboardAvoidingView style={{flex:1}}
|
|
keyboardVerticalOffset={Platform.OS == 'ios' ? 75 : 0}
|
|
behavior={Platform.OS == 'ios' ? 'padding' : ''}
|
|
ref={(view) => {this.scrollView = view;}}
|
|
>
|
|
<View style={{ flex: 1, backgroundColor: '#00420A'}}>
|
|
<BackgroundImage_RegisterForm>
|
|
<ScrollView style={{ flex: 1, height: '100%' }}>
|
|
<View style={{ flexDirection: 'column', flex: 1}}>
|
|
<View>
|
|
<LinearGradient colors={['#3AA40C', '#2C7C0B']} style={{
|
|
// flex: 1,
|
|
width: null,
|
|
height: null,
|
|
resizeMode: 'cover'
|
|
}}>
|
|
<View style={{ paddingVertical: 20, alignItems: 'center' }}>
|
|
<View>
|
|
<TouchableOpacity
|
|
style={{
|
|
backgroundColor: '#FFF',
|
|
borderRadius: 50, padding: 5,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
position: 'absolute',
|
|
right: '0%',
|
|
top: '0%',
|
|
zIndex: 1
|
|
}}
|
|
onPress={() => {
|
|
// this.onImagePick()
|
|
ActionSheet.showActionSheetWithOptions({
|
|
options: ACTIONSHEET_BUTTONS,
|
|
cancelButtonIndex: CANCEL_INDEX,
|
|
// destructiveButtonIndex: DESTRUCTIVE_INDEX,
|
|
// tintColor: 'blue'
|
|
},
|
|
(buttonIndex) => {
|
|
// console.log('button clicked :', buttonIndex)
|
|
if (buttonIndex == 0) {
|
|
this.onTakeCamera()
|
|
} else if (buttonIndex == 1) {
|
|
this.onImagePick()
|
|
}
|
|
})
|
|
}}>
|
|
<Icon name={'ic_outline_camera'} size={20} color={'#8BC34A'}/>
|
|
</TouchableOpacity>
|
|
<Image
|
|
style={{width: 120, height: 120, borderRadius: 60, borderColor: 'white', borderWidth: 2}}
|
|
source={{ uri: this.state.image_url && this.state.image_url.uri ? this.state.image_url.uri : ''}}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</LinearGradient>
|
|
</View>
|
|
|
|
<View style={{ flexDirection: 'column' , padding: 15, paddingTop: 5, paddingBottom: 0,}}>
|
|
<View>
|
|
<Text style={styles.headerTitle}>{t('profile')}</Text>
|
|
<View style={styles.row}>
|
|
<CustomInput
|
|
labelName={t('fullname')}
|
|
style={styles.register_input}
|
|
labelColor={'white'}
|
|
placeholderTextColor={'white'}
|
|
value={this.state.user.name}
|
|
onChangeText={(text) => {
|
|
this.setState({
|
|
user: {
|
|
...this.state.user,
|
|
name: text,
|
|
name_th: text
|
|
}
|
|
})
|
|
}}/>
|
|
</View>
|
|
<View style={styles.row}>
|
|
<CustomInput
|
|
style={styles.register_input}
|
|
labelColor={'white'}
|
|
placeholderTextColor={'white'}
|
|
labelName={t('email')}
|
|
value={this.state.user.email}
|
|
onChangeText={(text) => {
|
|
this.setState({
|
|
user: {
|
|
...this.state.user,
|
|
email: text
|
|
}
|
|
})
|
|
}}/>
|
|
</View>
|
|
{/*<View style={styles.row}>
|
|
<View style={styles.row_grow_first}>
|
|
<View
|
|
style={{
|
|
flexGrow: 1,
|
|
flexDirection: 'row',
|
|
height: 40,
|
|
maxHeight: 48,
|
|
minHeight: 40,
|
|
paddingHorizontal: 5,
|
|
backgroundColor: 'rgba(255,255,255,0.3)',
|
|
borderRadius: 30
|
|
}}
|
|
>
|
|
<View
|
|
style={{
|
|
justifyContent: 'center',
|
|
paddingLeft: 5,
|
|
paddingRight: 5
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
color: 'white'
|
|
}}
|
|
>
|
|
{t('gender')}
|
|
</Text>
|
|
</View>
|
|
<View style={{ flex: 1,alignItems: Platform.OS == 'ios' ? 'flex-end' : 'stretch'}}>
|
|
<Picker
|
|
mode="dropdown"
|
|
style={{
|
|
height: 40,
|
|
color: 'white',
|
|
}}
|
|
textStyle={{color:'white',fontFamily: 'Prompt-Regular',fontSize:14,textAlign:'right'}}
|
|
itemStyle={{color:'white',fontFamily: 'Prompt-Regular',fontSize:14}}
|
|
itemTextStyle={{color:'black',fontFamily: 'Prompt-Regular',fontSize:14}}
|
|
labelName={t('gender')}
|
|
placeholder={t('male') +"/"+ t('female')}
|
|
selectedValue={this.state.user.gender}
|
|
onValueChange={e => {
|
|
// console.log('check gender +++++++++++++++ ',e);
|
|
this.setState({
|
|
user: {
|
|
...this.state.user,
|
|
gender: e
|
|
}
|
|
})
|
|
}}
|
|
>
|
|
<Picker.Item label={t('male')} value="male"/>
|
|
<Picker.Item label={t('female')} value="female"/>
|
|
</Picker>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>*/}
|
|
{/*<View style={styles.row}>
|
|
<View style={styles.row_grow}>
|
|
<CustomDatePicker titleText={t('birth_date')} dateText={moment(this.state.user.show_birth_date).add(543, 'years').format('DD-MM-YYYY')} handleDate={(data) => {
|
|
this.setState({
|
|
user: {
|
|
...this.state.user,
|
|
birth_date: moment(data).format('YYYY-MM-DD'),
|
|
show_birth_date: moment(data).format('YYYY-MM-DD')
|
|
}
|
|
})}}/>
|
|
</View>
|
|
</View>*/}
|
|
{/*<View style={styles.row}>
|
|
<CustomInput
|
|
style={styles.register_input}
|
|
labelColor={'white'}
|
|
placeholderTextColor={'white'}
|
|
labelName={t('citizen_id')}
|
|
value={this.state.user.tax_id}
|
|
onChangeText={(text) => {
|
|
this.setState({
|
|
user: {
|
|
...this.state.user,
|
|
tax_id: text
|
|
}
|
|
})
|
|
}}/>
|
|
</View>*/}
|
|
<View style={styles.row}>
|
|
<CustomInput
|
|
style={styles.register_input}
|
|
labelColor={'white'}
|
|
placeholderTextColor={'white'}
|
|
labelName={t('phone')}
|
|
value={this.state.user.mobile}
|
|
onChangeText={(text) => {
|
|
this.setState({
|
|
user: {
|
|
...this.state.user,
|
|
mobile: text
|
|
}
|
|
})
|
|
}}/>
|
|
</View>
|
|
{/*<Text style={styles.headerTitle}>{t('accom_info')}</Text>*/}
|
|
{/*<View style={styles.row}>
|
|
<View
|
|
style={{
|
|
flexGrow: 1,
|
|
flexDirection: 'row',
|
|
height: 40,
|
|
maxHeight: 48,
|
|
minHeight: 40,
|
|
paddingHorizontal: 5,
|
|
backgroundColor: 'rgba(255,255,255,0.3)',
|
|
borderRadius: 30
|
|
}}
|
|
>
|
|
<View
|
|
style={{
|
|
justifyContent: 'center',
|
|
paddingLeft: 5,
|
|
paddingRight: 5
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
color: 'white'
|
|
}}
|
|
>
|
|
{t('project')}
|
|
</Text>
|
|
</View>
|
|
<View style={{ flex: 1 }}>
|
|
<Picker
|
|
style={{
|
|
color: 'white',
|
|
height: 40,
|
|
}}
|
|
textStyle={{color:'white',fontFamily:'Prompt-Regular',fontSize:14}}
|
|
labelName={t('project')}
|
|
placeholder={t('choose_project')}
|
|
selectedValue={this.state.project_item}
|
|
onValueChange={e => {
|
|
// console.log('@@@@@@ project selected --------> ',e);
|
|
this.setState({
|
|
project_name: e.name,
|
|
project_item:e,
|
|
selected_project: e.id,
|
|
user: {
|
|
...this.state.user,
|
|
project: e.code,
|
|
},
|
|
}, () => {
|
|
this.getBuildingList()
|
|
})
|
|
}}
|
|
>
|
|
{this.state.project_list.map((item,index) => {
|
|
return <Picker.Item label={item.name} value={item} key={'project_'+index}/>
|
|
})}
|
|
</Picker>
|
|
</View>
|
|
</View>
|
|
</View>*/}
|
|
{/*<View style={styles.row}>
|
|
<View
|
|
style={{
|
|
flexGrow: 1,
|
|
flexDirection: 'row',
|
|
height: 40,
|
|
maxHeight: 48,
|
|
minHeight: 40,
|
|
paddingHorizontal: 5,
|
|
backgroundColor: 'rgba(255,255,255,0.3)',
|
|
borderRadius: 30
|
|
}}>
|
|
<View
|
|
style={{
|
|
justifyContent: 'center',
|
|
paddingLeft: 5,
|
|
paddingRight: 5
|
|
}}>
|
|
<Text
|
|
style={{
|
|
color: 'white'
|
|
}}>
|
|
{t('building')}
|
|
</Text>
|
|
</View>
|
|
<View style={{ flex: 1 }}>
|
|
<Picker
|
|
// mode="dropdown"
|
|
style={{
|
|
color: 'white',
|
|
height: 40,
|
|
}}
|
|
textStyle={{color:'white',fontFamily:'Prompt-Regular',fontSize:14}}
|
|
labelName={t('building')}
|
|
placeholder={t('choose_project')}
|
|
selectedValue={this.state.user.building != null && this.state.user.building}
|
|
onValueChange={e => {
|
|
this.setState({
|
|
user: {
|
|
...this.state.user,
|
|
building: e
|
|
}
|
|
})
|
|
}}>
|
|
{this.state.building_list.map((item,index) => {
|
|
return <Picker.Item label={item.room_build} value={item.room_build} key={'building_'+index}/>
|
|
})}
|
|
</Picker>
|
|
</View>
|
|
</View>
|
|
<View style={styles.row_grow}>
|
|
<CustomInput
|
|
style={styles.register_input}
|
|
labelColor={'white'}
|
|
placeholderTextColor={'white'}
|
|
labelName={t('room2')}
|
|
placeholder={t('room_no')}
|
|
placeholderTextColor={'#FFFFFF40'}
|
|
value={this.state.user.room}
|
|
onChangeText={(text) => {
|
|
this.setState({
|
|
user: {
|
|
...this.state.user,
|
|
room: text
|
|
}
|
|
})
|
|
}}/>
|
|
</View>
|
|
</View>*/}
|
|
|
|
<Text style={styles.headerTitle}>{t('change_password')}</Text>
|
|
<View>
|
|
<View style={styles.row}>
|
|
<CustomInput
|
|
label
|
|
style={styles.register_input}
|
|
labelColor={'white'}
|
|
labelName={t('new_password')}
|
|
secureTextEntry={true}
|
|
placeholderTextColor={'#FFFFFF40'}
|
|
placeholder={t('enter_new_password')}
|
|
value={this.state.user.password}
|
|
onChangeText={(text) => {
|
|
this.setState({
|
|
user: {
|
|
...this.state.user,
|
|
password: text
|
|
}
|
|
})
|
|
}}/>
|
|
</View>
|
|
<View style={styles.row}>
|
|
<CustomInput
|
|
style={styles.register_input}
|
|
labelColor={'white'}
|
|
labelName={t('confirm_password')}
|
|
secureTextEntry={true}
|
|
placeholderTextColor={'#FFFFFF40'}
|
|
placeholder={t('enter_confirm_password')}
|
|
value={this.state.user.confirm_password}
|
|
onChangeText={(text) => {
|
|
this.setState({
|
|
user: {
|
|
...this.state.user,
|
|
confirm_password: text
|
|
}
|
|
})
|
|
}}/>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
<View>
|
|
<View style={styles.buttons}>
|
|
<View style={styles.row_grow}>
|
|
<CustomButton style={styles.btn_next_register} title={t('complete')}
|
|
sizeText={14}
|
|
onPress={this.edit_profile}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</ScrollView>
|
|
</BackgroundImage_RegisterForm>
|
|
</View>
|
|
</KeyboardAvoidingView>
|
|
)
|
|
}
|
|
}
|
|
|
|
const styles = {
|
|
container: {
|
|
flex: 1,
|
|
flexDirection: 'column',
|
|
height: GetWidthHeightDevice.HeightDevice,
|
|
},
|
|
logo: {
|
|
height: '20%',
|
|
flexDirection: 'row',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
form: {
|
|
flex: 1,
|
|
padding: 15,
|
|
paddingTop: 5,
|
|
paddingBottom: 0,
|
|
},
|
|
row: {
|
|
flexDirection: 'row',
|
|
marginBottom: 5,
|
|
},
|
|
form_address: {
|
|
padding: 10,
|
|
paddingBottom: 0,
|
|
},
|
|
step_indicator: {
|
|
},
|
|
buttons: {
|
|
flexDirection: 'row',
|
|
marginTop: 15,
|
|
bottom: 10
|
|
},
|
|
row_grow: {
|
|
flexGrow: 1,
|
|
},
|
|
row_grow_first: {
|
|
flexGrow: 1,
|
|
},
|
|
headerTitle: {
|
|
color: '#8BC34A',
|
|
marginVertical: 5,
|
|
marginTop: 10
|
|
|
|
}, btn_next_register: {
|
|
backgroundColor: '#145EB3'
|
|
}, register_input: {
|
|
backgroundColor: 'rgba(255,255,255,0.3)',
|
|
borderRadius: 30,
|
|
}
|
|
};
|
|
|
|
const mapDisPatchToProps = state => {
|
|
return state.app
|
|
};
|
|
const setUser = dispatch => bindActionCreators({ appSetDevice, appSetUser, appCleanUser }, dispatch)
|
|
export default connect(mapDisPatchToProps, setUser)(EditProfileScreen)
|