ProjectForm.js
import React, { Component } from 'react';
import { View, Text, Button, ScrollView, FlatList, TextInput, StyleSheet } from "react-native";
import ProjectFormRF from './ProjectFormRF';
import { connect } from 'react-redux';
import { SearchText, Close_edit, Open_edit, CreateItem, ViewItem, getAllItems, EditItem, DeleteItem } from '../../src/action/project';
import Modal from 'react-native-modal';
import TabProject from '../TabProject';
import AppButton from './../AppButton';
import ButtonIconText from './../ButtonIconText';
import * as RootNavigation from '../../RootNavigation';
class ProjectForm extends Component {
constructor(props) {
super(props);
this.state = {
text: '',
data: [],
isModalVisible: false,
};
}
componentDidMount() {
this.props.ViewItem(this.props.data.id);
this.setState({ data: this.props.projectReducer.projects })
}
handleSubmit = async ({ id, name, type_id, category_id }) => {
if (this.props.projectReducer.image_name != undefined && this.props.projectReducer.image_name != null) {
await wait();
if (id == undefined) {
const data = { "name": name, "type_id": type_id, "category_id": category_id, "company_id": this.props.data.id, "sequence": 0, 'is_succeed': 0, 'image_path': this.props.projectReducer.image_name };
this.props.CreateItem(data);
}
else {
const data = { "id": id, "name": name, "type_id": type_id, "category_id": category_id, "company_id": this.props.data.id, "sequence": 0, 'is_succeed': 0, 'image_path': this.props.projectReducer.image_name };
this.props.EditItem(data);
}
this.props.Close_edit();
} else {
alert("กรุณาอัพโหลดรูปก่อน");
}
}
render() {
return (
<View style={{ width: '100%', height: '100%' }}>
<ProjectFormRF company_id={this.props.data.id} initialValues={this.props.projectReducer.data} onSubmit={this.handleSubmit} />
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
justifyContent: 'center',
flex: 1,
margin: 5,
},
row: {
fontSize: 18,
padding: 12
},
textInput: {
textAlign: 'center',
height: 42,
borderWidth: 1,
borderColor: '#009688',
borderRadius: 8,
backgroundColor: "#FFFF"
}
});
const mapStateToProp = (state) => {
return {
projectReducer: state.projectReducer,
}
}
const mapDispatchToProp = {
CreateItem, getAllItems, Open_edit, Close_edit, EditItem, ViewItem, SearchText
};
export default connect(mapStateToProp, mapDispatchToProp)(ProjectForm);
index.js
import { reduxForm } from 'redux-form';
import ProjectFormView from './ProjectFormView';
const FORM = 'project';
const validate = ({id,company_id, name,image_path,type_id, category_id}) => {
//alert("type_id"+type_id);
const errors = {};
if (name === undefined) {
errors.name= 'Required';
} else if (name.trim() === '') {
errors.name = 'Must not be blank';
}
if (type_id === undefined) {
errors.type_id= 'Required';
}
if (category_id === undefined) {
errors.category_id= 'Required';
}
return errors;
};
const ProjectFormRF = reduxForm({
form: FORM,
validate,
})(ProjectFormView);
export default ProjectFormRF;
ProjectFormView.js
import { PropTypes } from 'prop-types';
import React, { Component } from 'react';
import { Button, Text, View } from 'react-native';
import { Field } from 'redux-form';
import RFTextView from '../../../RFTextInput';
import {RFDropdown} from '../../../RFDropDown';
import RFHiddenView from '../../../RFHiddenInput';
import styles from './styles';
import { GetLabel } from '../../../../src/action/api';
import AppButton from './../../../AppButton';
import * as ImagePicker from 'expo-image-picker';
import RFProjectImagePicker from '../../../RFProjectImagePicker';
import ButtonIconText from './../../../ButtonIconText';
class ProjectFormView extends Component {
constructor(props) {
super(props);
this.state = {
tdata: [],
cdata: [],
value: "",
};
}
componentDidMount() {
GetLabel("type/getlabel", "") ///connect to server
.then(result => {
this.setState({ tdata: result });
})
.catch(error => {
});
GetLabel("category/getlabel", this.props.company_id) ///connect to server
.then(result => {
this.setState({ cdata: result });
})
.catch(error => {
});
}
render() {
return (
<View style={{width:"100%",height:"100%"}} >
<View style={{ flexDirection: "column", justifyContent: "center", alignItems: "flex-start" }}>
<View style={{ marginBottom: 20, display: "flex", flexDirection: "row", justifyContent: "center", alignItems: "flex-start" }}>
<Field
component={RFHiddenView}
name="id"
style={{ width: 0, height: 0 }}
disabled={this.props.submitting}
/>
</View>
<View style={{ flexDirection: "row" }}>
<Text style={{ fontSize: 20 }}> ชื่อ : </Text>
<Field
component={RFTextView}
title="Projec Name:"
name="name"
disabled={this.props.submitting}
placeholder="Your Project Name"
/>
</View>
<View style={{ flexDirection: "row",paddingTop:10,paddingBottom:10 }}>
<Field
name="image_path"
component={RFProjectImagePicker}
disabled={this.props.submitting}
/>
</View>
<Text style={{ fontSize: 20, height:30,width:120}} >ประเภท : </Text>
<Field
style={{backgroundColor: "#FFFF00"}}
component={RFDropdown}
name="type_id"
data={this.state.tdata}
disabled={this.props.submitting}
/>
<Text style={{ fontSize: 20 }} > หมวดหมู่ : </Text>
<Field
component={RFDropdown}
name="category_id"
data={this.state.cdata}
disabled={this.props.submitting}
/>
</View>
<View style={{ flexDirection: "column", justifyContent: "center", alignItems: "center" }}>
{!this.props.submitting && this.props.submitFailed && <Text style={styles.rootFailed}>Submit Failed </Text>}
{!this.props.submitting && this.props.submitSucceeded && <Text style={styles.rootSucceeded}>Submit Succeeded </Text>}
<AppButton
disabled={!this.props.valid || this.props.submitting}
onPress={this.props.handleSubmit}
title="บันทึก"
/>
</View>
</View >
);
}
}
ProjectFormView.propTypes = {
handleSubmit: PropTypes.func.isRequired,
submitFailed: PropTypes.bool.isRequired,
submitSucceeded: PropTypes.bool.isRequired,
submitting: PropTypes.bool,
valid: PropTypes.bool.isRequired,
};
ProjectFormView.defaultProps = {
submitting: false,
};
export default ProjectFormView;