csa-react-60/src/screens/login/RegisterFormLogin.js

810 lines
30 KiB
JavaScript

import React, {Component} from 'react'
import {Alert, ScrollView, TouchableOpacity, View, Platform, KeyboardAvoidingView} from 'react-native'
import Image from 'react-native-fast-image'
import {CustomStepIndicator} from '../../components/StepIndicator'
import {CustomInput} from '../../components/CustomInput'
import {CustomButton} from '../../components/CustomButton'
import Icon from 'src/components/Icon'
import {bindActionCreators} from 'redux'
import {appSetUser} from '../../redux/app/action'
import {connect} from 'react-redux'
import {Picker} from 'native-base'
import moment from 'moment'
import {BackgroundImage_RegisterForm} from '../../components/BackgroundImage_RegisterForm'
import LinearGradient from 'react-native-linear-gradient'
import Text from '../../components/Text'
import {getBuildingByProjectId, project} from '../../api/UserApi'
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('cancel')
]
let CANCEL_INDEX = 2
class RegisterFormLoginScreen extends Component {
constructor(props) {
super(props)
this.state = {
user: props.user,
project_list: [],
building_list: [],
selected_project: 0,
project_name: t('choose_project'),
image_url: require('../../../assets/images/profile.png'),
enableSummit: false,
checkFullname: false,
checkCitizenID: false,
checkBirthDate: null,
checkRoomNo: false,
is_customer: true
}
this._onNextStep = this._onNextStep.bind()
this.onImagePick = this.onImagePick.bind(this)
this.onTakeCamera = this.onTakeCamera.bind(this)
}
componentDidMount() {
this.getProjectList()
this.setDefaultUserData()
}
setDefaultUserData() {
this.setState({
user: {
...this.state.user,
gender: 'ชาย'
}
})
}
getProjectList() {
project()
.then(res => {
if (res.ok) {
return this.setState({
project_list: res.data.data,
selected_project: res.data.data[0].id
})
}
})
.then(res => {
// this.getBuildingList()
})
}
getBuildingList() {
getBuildingByProjectId(this.state.selected_project)
.then(res => {
// console.log('-------------------> ', res)
if (res.ok) {
this.setState({
building_list: res.data.data,
user: { //set default building index 0
...this.state.user,
building: res.data.data[0].room_build
}
})
}
})
}
_onNextStep = async () => {
// if (this.state.user.email && this.state.user.mobile) {
// let tax_id = this.state.user && this.state.user.tax_id
// if(!tax_id && !this.state.is_customer){
// tax_id = (Math.floor(1000000000000 + Math.random() * 9000000000000)).toString();
// }
if (this.state.user.mobile
// && this.state.is_customer && this.state.user.tax_id && (this.state.user.tax_id.toString()).length > 0
// && tax_id.length > 0
&& this.state.user.name) {
/*var email_validate = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
if (email_validate.test(this.state.user.email) === true) {
this.props.appSetUser(this.state.user)
this.props.navigation.navigate('RegisterProfile')
} else {
Alert.alert(null, 'ท่านกรอกรูปแบบอีเมลไม่ถูกต้อง')
}*/
console.log('check user data next <<<<<<<< ', this.state.user);
this.setState({
user: {
...this.state.user,
// tax_id: !this.state.is_customer ? Math.floor(1000000000000 + Math.random() * 9000000000000) : this.state.user.tax_id,
// is_customer: this.state.is_customer
}
}, () => {
// console.log('user >>> ', this.state.user)
this.props.appSetUser(this.state.user)
// next page !!
this.props.navigation.navigate('RegisterProfile', {image_url: this.state.image_url})
})
} else {
console.log('กรุณากรอกข้อมูลให้ครบถ้วน')
Alert.alert(null, 'กรุณากรอกข้อมูลให้ครบถ้วน')
}
}
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',
}
this.setState({
image_url: {uri: `data:${image.mime};base64,` + image.data, width: image.width, height: image.height},
images: null,
user: {
...this.state.user,
profile_image_id: image_profile
}
})
}).catch(e => alert(e))
}
onTakeCamera() {
ImagePicker.openCamera({
cropping: true,
width: 300,
height: 300,
includeExif: true
}).then(image => {
console.log('received image', image)
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
}
})
}).catch(e => alert(e))
}
validateNextStepBtn(){
if (this.state.checkFullname.length > 0 && this.state.user.project && this.state.user.building && this.state.checkRoomNo.length > 0) {
this.setState({
enableSummit: true
});
} else {
this.setState({
enableSummit: false
});
}
}
handleRequired = (e, type) => {
// e = value
switch (type) {
case 'fullname':
// code block
this.setState(() => ({['checkFullname']: e}), () => {
this.validateNextStepBtn()
});
break;
case 'room':
// code block
this.setState(() => ({['checkRoomNo']: e}), () => {
this.validateNextStepBtn()
});
break;
/*case 'citizen_id':
this.setState(() => ({['checkCitizenID']: e}));
break;*/
default:
this.validateNextStepBtn()
// code block
}
// console.log(this.state.user.birth_date);
// check all
}
render() {
return (
<LinearGradient
colors={['#00420A', '#00420A']}
style={{
flex: 1,
width: null,
height: null,
resizeMode: 'cover'
}}
>
<KeyboardAvoidingView style={{flex: 1}} keyboardVerticalOffset={Platform.OS == 'ios' ? 75 : 0} behavior={Platform.OS == 'ios' ? "padding" : ""} enabled>
<BackgroundImage_RegisterForm>
<ScrollView showsVerticalScrollIndicator={false} style={{flex: 1}}>
<View style={styles.container}>
<View style={[styles.step_indicator]}>
<CustomStepIndicator
currentStep={2}
totalStep={3}
/>
</View>
<View style={styles.logo}>
<View
style={{
flex: 1,
flexGrow: 1,
backgroundColor: '#3AA40C',
alignItems: 'center',
paddingVertical: 20,
position: 'relative'
}}
>
<TouchableOpacity
style={{
backgroundColor: '#FFF',
borderRadius: 50,
padding: 5,
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',
right: '37%',
top: '30%',
zIndex: 1
}}
onPress={() => {
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: 100,
height: 100,
borderRadius: 50,
borderColor: 'white',
borderWidth: 2
}}
source={this.state.image_url}
/>
</View>
{/*<Text> LOGO </Text>*/}
</View>
<View style={{flex: 1}}>
<View style={[styles.form]}>
<Text style={styles.headerTitle}> {t('profile')} </Text>
<View style={styles.row}>
<CustomInput
labelName={t('fullname')}
//New Code style
style={styles.register_input}
labelColor={'white'}
placeholderTextColor={'white'}
//New Code style
onEndEditing={e => {
let input = e.nativeEvent.text
this.setState({
user: {
...this.state.user,
name: input,
}
})
}}
value={this.state.user.name}
onChangeText={(evt) => {
this.handleRequired(evt, "fullname")
this.setState({
user:{
...this.state.user,
name: evt.replace(/\u0020/, '\u00a0')
}
})
}}
placeholder={t('specific_fullname')}
placeholderTextColor={'#FFFFFF40'}
/>
</View>
{/* <View style={styles.row}>
<CustomInput
//New Code style
keyboardType={'email-address'}
style={styles.register_input}
labelColor={'white'}
placeholderTextColor={'white'}
//New Code style
labelName={'อีเมล'}
onEndEditing={e => {
let input = e.nativeEvent.text
this.setState({
user: {
...this.state.user,
email: input
}
})
}}
textContentType={'emailAddress'}
placeholder={'ระบุอีเมล'}
placeholderTextColor={'#FFFFFF40'}
/>
</View> */}
{/*<View style={styles.row}>
<View style={styles.row_grow_first}>
<View
style={{
flex: 1,
flexDirection: 'row',
height: 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')}
placeholderStyle={{color:'#FFFFFF40'}}
selectedValue={this.state.user.gender}
onValueChange={e => {
this.setState({
user: {
...this.state.user,
gender: e
}
})
}}
>
<Picker.Item label={t('male')} value="ชาย"/>
<Picker.Item label={t('female')} value="หญิง"/>
</Picker>
</View>
</View>
</View>
</View>*/}
{/* /// */}
{/*<View style={styles.row}>
<View style={styles.row_grow}>
<CustomDatePicker titleText={t('birth_date')} dateText={this.state.user.text_birth} maxDate={new Date()} handleDate={(data) => {
this.setState({
user: {
...this.state.user,
birth_date: moment(data).format('YYYY-MM-DD'),
birth_date_show: moment(data).format('MM/DD/YYYY'),
text_birth: moment(data).add(543, 'years').format('DD-MM-YYYY')
}
}, () => {
this.handleRequired(data, "birth_date");
})
}}/>
</View>
</View>*/}
<View style={styles.row}>
<CustomInput
maxLength={10}
//New Code style
style={styles.register_input}
labelColor={'white'}
placeholderTextColor={'white'}
//New Code style
labelName={t('phone')}
onEndEditing={e => {
let input = e.nativeEvent.text
this.setState({
user: {
...this.state.user,
mobile: input
}
})
}}
placeholder={t('phone')}
placeholderTextColor={'#FFFFFF40'}
value={this.state.user.mobile || ''}
/>
</View>
{/*<View style={styles.userTypeContainer}>
<TouchableOpacity style={styles.radioInput}
onPress={() => {this.setState({
is_customer: true }, () => {
this.handleRequired(this.state.is_customer, "user_type");
})
}}
>
{
this.state.is_customer ?
<Image source={require('../../../assets/images/radio_button_checked.png')} style={{width: 20, height: 20, marginRight: 5}} />
: <Image source={require('../../../assets/images/radio_button.png')} style={{width: 20, height: 20, marginRight: 5}} />
}
<Text style={{color: 'white'}}>{t('customer')}</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.radioInput}
onPress={() => {
this.setState({
is_customer: false,
user: {
...this.state.user,
tax_id: '',
building: '',
room: ''
},
checkCitizenID: false
}, () => {
this.handleRequired(this.state.is_customer, "user_type");
})
}}
>
{
this.state.is_customer ?
<Image source={require('../../../assets/images/radio_button.png')} style={{width: 20, height: 20, marginRight: 5}} />
: <Image source={require('../../../assets/images/radio_button_checked.png')} style={{width: 20, height: 20, marginRight: 5}} />
}
<Text style={{color: 'white'}}>{t('guest')}</Text>
</TouchableOpacity>
</View>*/}
{/*{
this.state.is_customer &&
<View style={styles.row}>
<CustomInput
maxLength={13}
style={styles.register_input}
labelColor={'white'}
placeholderTextColor={'white'}
labelName={t('citizen_id')}
onEndEditing={e => {
let input = e.nativeEvent.text
this.setState({
user: {
...this.state.user,
tax_id: input
}
})
}}
onChangeText={(evt) => this.handleRequired(evt, "citizen_id")}
placeholder={t('citizen_id_13')}
placeholderTextColor={'#FFFFFF40'}
/>
</View>
}*/}
<Text style={styles.headerTitle}> {t('accom_info')} </Text>
<View style={styles.row}>
<View
style={{
flexGrow: 1,
flexDirection: 'row',
height: 40,
paddingHorizontal: 5,
backgroundColor: 'rgba(255,255,255,0.3)',
fontFamily: 'Prompt-Regular',
borderRadius: 30
}}
>
<View
style={{
justifyContent: 'center',
paddingLeft: 5,
paddingRight: 5
}}
>
<Text
style={{
color: 'white'
}}
>
{t('project')}
</Text>
</View>
<View style={{flex: 1}}>
<Picker
// mode="dropdown"
style={{
height: 40,
color: 'white'
}}
textStyle={{color: 'white', fontFamily: 'Prompt-Regular', fontSize: 14}}
labelName={t('project')}
placeholder={t('choose_project')}
placeholderStyle={{color: '#FFFFFF40'}}
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,
project_name: e.name
},
}, () => {
// console.log('check project selected --------> ',this.state.project_name);
this.handleRequired(e, "project")
this.getBuildingList()
})
}}
>
{this.state.project_list.map((item) => {
return <Picker.Item label={item.name} value={item} key={'project_' + item}/>
})}
</Picker>
</View>
</View>
</View>
{
this.state.is_customer &&
<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)',
fontFamily: 'Prompt-Regular',
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={{
height: 40,
color: 'white'
}}
textStyle={{color: 'white', fontFamily: 'Prompt-Regular', fontSize: 14}}
labelName={t('building')}
placeholder={'เลือกอาคาร'}
placeholderStyle={{color: '#FFFFFF40'}}
selectedValue={this.state.user.building}
onValueChange={e => {
this.setState({
user: {
...this.state.user,
building: e
}
}, () => {
this.handleRequired(e, "building")
})
}}
>
{this.state.building_list.map((item) => {
return <Picker.Item label={item.room_build} value={item.room_build} key={'building_' + item.room_build}/>
})}
</Picker>
</View>
</View>
<View style={styles.row_grow}>
<CustomInput
//New Code style
style={styles.register_input}
labelColor={'white'}
placeholderTextColor={'white'}
//New Code style
labelName={t('room2')}
onChangeText={e => {
// let input = e.nativeEvent.text
this.setState({
user: {
...this.state.user,
room: e
}
}, () => {
this.handleRequired(e, "room")
})
}}
placeholder={t('room_no')}
placeholderTextColor={'#FFFFFF40'}
/>
</View>
</View>
}
<View style={[styles.buttons, {display: this.state.enableSummit ? 'none' : 'flex'}]}>
<View style={styles.row_grow}>
<CustomButton
// disabled="true"
style={styles.disableNext} // enableNext
title={t('next')}
sizeText={14}
// onPress={this._onNextStep}
/>
</View>
</View>
<View style={[styles.buttons, {display: this.state.enableSummit ? 'flex' : 'none'}]}>
<View style={styles.row_grow}>
<CustomButton
// disabled="true"
style={styles.enableNext} // enableNext
title={t('next')}
sizeText={14}
onPress={this._onNextStep}
/>
</View>
</View>
</View>
</View>
</View>
</ScrollView>
</BackgroundImage_RegisterForm>
</KeyboardAvoidingView>
</LinearGradient>
)
}
}
const styles = {
container: {
flex: 1,
flexGrow: 1,
flexDirection: 'column'
},
logo: {
flex: 1,
backgroundColor: '#3AA40C',
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: {
backgroundColor: '#3AA40C',
flex: 1
},
buttons: {
flexDirection: 'row',
marginTop: 15,
marginBottom: 0,
bottom: 10
},
row_grow: {
flexGrow: 1
},
row_grow_first: {
flexGrow: 1,
},
headerTitle: {
color: '#8BC34A',
marginVertical: 5,
marginTop: 10
},
btn_next_register: {
opacity: 1,
backgroundColor: '#145EB3'
},
register_input: {
backgroundColor: 'rgba(255,255,255,0.3)',
color: 'red',
fontFamily: 'Prompt-Regular',
borderRadius: 30
},
disableNext: {
opacity: 0.65,
cursor: "not-allowed",
backgroundColor: '#AAAAAA'
},
enableNext: {
opacity: 1,
color: '#FFFFFF',
backgroundColor: '#145EB3'
},
userTypeContainer: {
flex: 1,
flexDirection: 'row',
paddingTop: 5,
paddingBottom: 10
},
radioInput: {
flex: 1,
flexDirection: 'row',
alignItems: 'center'
},
custom_button_container: {
// flex:1,
// flexDirection: 'row',
height: 35,
abckgroundColor: '#FF9500',
borderRadius: 5,
width: '100%',
justifyContent: 'center',
alignItems: 'center',
},
icon: {
justifyContent: 'center',
// alignItems: '',
// flex: 1,
paddingLeft: 5,
paddingRight: 5
},
}
const mapDisPatchToProps = state => {
return state.app
}
const setUser = dispatch => bindActionCreators({appSetUser}, dispatch)
export default connect(
mapDisPatchToProps,
setUser
)(RegisterFormLoginScreen)