562 lines
20 KiB
JavaScript
562 lines
20 KiB
JavaScript
import React from 'react';
|
|
import {inject, observer} from 'mobx-react';
|
|
import {
|
|
Paper,
|
|
SelectField,
|
|
CardMedia,
|
|
Card,
|
|
CardText,
|
|
CardTitle,
|
|
Divider,
|
|
MenuItem,
|
|
RaisedButton,
|
|
Toolbar,
|
|
ToolbarGroup,
|
|
ToolbarTitle,
|
|
FlatButton,
|
|
Dialog,
|
|
TextField,
|
|
DatePicker
|
|
} from 'material-ui';
|
|
import AddIcon from 'material-ui/svg-icons/image/edit';
|
|
import moment from "moment";
|
|
import {Link} from 'react-router-dom';
|
|
import {LINKS} from "../../../routes";
|
|
import {DIALOG} from "../../../stores/global_ui";
|
|
import UpdateDialog from './UpdateDialog';
|
|
import IdentificationPassport from './../../Customers/CustomerDialog/IdentificationPassport';
|
|
|
|
// import './style.scss';
|
|
|
|
@inject('appstate')
|
|
@observer
|
|
export default class GeneralInformation extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.props = props;
|
|
this.customer = props.appstate.customer;
|
|
this.state = {
|
|
value: 1,
|
|
searchText: '',
|
|
slideIndex: 0,
|
|
openedDialog:false,
|
|
gender:this.customer.CustomerData.gender,
|
|
marital:this.customer.CustomerData.martial_status,
|
|
openedDialogPhoto:false
|
|
};
|
|
this.defaultState = Object.assign({}, this.state);
|
|
this.http = props.appstate.http;
|
|
this.authStore = props.appstate.auth;
|
|
this.globalUI = props.appstate.globalUI;
|
|
}
|
|
|
|
componentDidMount() {
|
|
console.log('Profile loaded!');
|
|
|
|
}
|
|
editData = (id) => {
|
|
this.customer.update(id);
|
|
this.setState({openedDialog: false});
|
|
this.setState({openedDialogPhoto: false});
|
|
};
|
|
|
|
handleOpenDialog = () => {
|
|
this.setState({
|
|
openedDialog:true
|
|
});
|
|
};
|
|
|
|
handleCloseDialog = () =>{
|
|
this.setState({
|
|
openedDialog:false
|
|
});
|
|
}
|
|
|
|
handleOpenPhoto = () => {
|
|
this.setState({
|
|
openedDialogPhoto:true,
|
|
oldPassportPhoto : this.customer.CustomerData.passport_photo,
|
|
oldIdPhoto : this.customer.CustomerData.id_photo,
|
|
});
|
|
console.log
|
|
|
|
}
|
|
|
|
handleClosePhoto = () =>{
|
|
this.setState({
|
|
openedDialogPhoto:false
|
|
});
|
|
this.customer.CustomerData.passport_photo = this.state.oldPassportPhoto;
|
|
this.customer.CustomerData.id_photo = this.state.oldIdPhoto;
|
|
}
|
|
|
|
handleUpdateInput = (searchText) => {
|
|
this.setState({
|
|
searchText: searchText,
|
|
});
|
|
};
|
|
|
|
handleNewRequest = () => {
|
|
this.setState({
|
|
searchText: '',
|
|
});
|
|
};
|
|
|
|
tabsHandleChange = (value) => {
|
|
this.setState({
|
|
slideIndex: value,
|
|
});
|
|
};
|
|
|
|
handleChange = (event, index, value) => this.setState({value});
|
|
|
|
handleChangeName = (event) =>{
|
|
this.customer.CustomerData.name = event.target.value;
|
|
};
|
|
|
|
handleChangeEmail = (event) =>{
|
|
this.customer.CustomerData.email = event.target.value;
|
|
};
|
|
|
|
handleChangeDate = (event, value) =>{
|
|
this.customer.CustomerData.date_of_birth = value;
|
|
};
|
|
|
|
handleChangeGender = (event, index, value) =>{
|
|
this.customer.CustomerData.gender = value;
|
|
};
|
|
|
|
handleChangePassport = (event) =>{
|
|
this.customer.CustomerData.passport_number = event.target.value;
|
|
};
|
|
|
|
handleChangeOccupation = (event) =>{
|
|
this.customer.CustomerData.occupation = event.target.value;
|
|
};
|
|
|
|
handleChangeAddress = (event) =>{
|
|
this.customer.CustomerData.address = event.target.value;
|
|
};
|
|
|
|
handleChangeBirthPlace = (event) =>{
|
|
this.customer.CustomerData.birth_place = event.target.value;
|
|
};
|
|
|
|
handleChangePhone = (event) =>{
|
|
this.customer.CustomerData.phone = event.target.value;
|
|
};
|
|
|
|
handleChangeHandphone = (event) =>{
|
|
this.customer.CustomerData.handphone = event.target.value;
|
|
};
|
|
|
|
handleChangeMarital = (event, index, value) =>{
|
|
this.customer.CustomerData.martial_status = value;
|
|
};
|
|
|
|
handleChangeTaxNumber = (event) =>{
|
|
this.customer.CustomerData.id_tax_number = event.target.value;
|
|
};
|
|
|
|
handleChangeType = (event) =>{
|
|
this.customer.CustomerData.id_type = event.target.value;
|
|
};
|
|
|
|
handleChangeNumber= (event) =>{
|
|
this.customer.CustomerData.id_number = event.target.value;
|
|
};
|
|
|
|
render() {
|
|
const styles = {
|
|
|
|
radioButton: {
|
|
marginBottom: 16,
|
|
},
|
|
};
|
|
|
|
const gender = [
|
|
<MenuItem key={0} value={0} primaryText="Choose Gender"/>,
|
|
<MenuItem key={1} value={"Man"} primaryText="Man"/>,
|
|
<MenuItem key={2} value={"Woman"} primaryText="Woman"/>,
|
|
];
|
|
|
|
const marital_status = [
|
|
<MenuItem key={0} value={0} primaryText="Choose Marital Status"/>,
|
|
<MenuItem key={1} value={"Married"} primaryText="Married"/>,
|
|
<MenuItem key={2} value={"Single"} primaryText="Single"/>,
|
|
<MenuItem key={2} value={"Divorced"} primaryText="Divorced"/>,
|
|
<MenuItem key={2} value={"Widowed"} primaryText="Widowed"/>,
|
|
];
|
|
|
|
const actions = [
|
|
<FlatButton
|
|
label="Cancel"
|
|
primary={true}
|
|
onClick={this.handleCloseDialog}
|
|
/>,
|
|
<FlatButton
|
|
label="Submit"
|
|
primary={true}
|
|
onClick={() => this.editData(this.customer.CustomerData.id)}
|
|
/>,
|
|
];
|
|
|
|
const actionsPhoto = [
|
|
<FlatButton
|
|
label="Cancel"
|
|
primary={true}
|
|
onClick={this.handleClosePhoto}
|
|
/>,
|
|
<FlatButton
|
|
label="Submit"
|
|
primary={true}
|
|
onClick={() => this.editData(this.customer.CustomerData.id)}
|
|
/>,
|
|
];
|
|
|
|
return (
|
|
<div className="animated fadeIn">
|
|
<UpdateDialog/>
|
|
<Card className="row" style={{marginBottom: 10}}>
|
|
<div className="flexSpaceBetween" style={{padding: 16}}>
|
|
<CardTitle style={{padding: 0, fontSize: 22}} titleStyle={{fontSize: 22}}
|
|
title={this.customer.CustomerData.name}
|
|
subtitle={<code>{this.customer.CustomerData.id}</code>}/>
|
|
<ToolbarGroup>
|
|
<RaisedButton
|
|
icon={<AddIcon/>}
|
|
label="Edit"
|
|
onClick={this.handleOpenDialog}
|
|
primary={true}/>
|
|
</ToolbarGroup>
|
|
|
|
</div>
|
|
</Card>
|
|
<Card style={{marginBottom: 10}}>
|
|
<Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
|
|
<ToolbarGroup>
|
|
<ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d', textTransform: 'capitalize'}}
|
|
text={'Details'}/>
|
|
</ToolbarGroup>
|
|
|
|
</Toolbar>
|
|
<Divider/>
|
|
<CardTitle style={{paddingBottom: 0}}
|
|
subtitle={<p style={{color: '#32325d', fontSize: 12, paddingLeft: 10}}>ACCOUNT INFORMATION</p>}/>
|
|
<CardText>
|
|
<div className="row">
|
|
<div className="col s12 m12 l12">
|
|
<div className="listCustDetail">
|
|
<div className="listCustDetailItem flex">
|
|
<p className="listCustomerDetailItemKey">ID</p>
|
|
<code className="listCustomerDetailItemValue">{this.customer.CustomerData.id}</code>
|
|
</div>
|
|
<div className="listCustDetailItem flex">
|
|
<p className="listCustomerDetailItemKey">Created</p>
|
|
<p
|
|
className="listCustomerDetailItemValue">{moment(this.customer.CustomerData.created_at).format('DD MMMM YYYY, HH:mm:ss')}</p>
|
|
</div>
|
|
<div className="listCustDetailItem flex">
|
|
<p className="listCustomerDetailItemKey">Email</p>
|
|
<p className="listCustomerDetailItemValue">{this.customer.CustomerData.email}</p>
|
|
</div>
|
|
<div className="listCustDetailItem flex">
|
|
<p className="listCustomerDetailItemKey">Birth Place</p>
|
|
<p className="listCustomerDetailItemValue">{this.customer.CustomerData.birth_place}</p>
|
|
</div>
|
|
<div className="listCustDetailItem flex">
|
|
<p className="listCustomerDetailItemKey">Date of Birth</p>
|
|
<p
|
|
className="listCustomerDetailItemValue">{moment(this.customer.CustomerData.date_of_birth).format('DD MMMM YYYY')}</p>
|
|
</div>
|
|
<div className="listCustDetailItem flex">
|
|
<p className="listCustomerDetailItemKey">Gender</p>
|
|
<p className="listCustomerDetailItemValue">{this.customer.CustomerData.gender}</p>
|
|
</div>
|
|
<div className="listCustDetailItem flex">
|
|
<p className="listCustomerDetailItemKey">Address</p>
|
|
<p className="listCustomerDetailItemValue">{this.customer.CustomerData.address}</p>
|
|
</div>
|
|
<div className="listCustDetailItem flex">
|
|
<p className="listCustomerDetailItemKey">Occupation</p>
|
|
<p className="listCustomerDetailItemValue">{this.customer.CustomerData.occupation}</p>
|
|
</div>
|
|
<div className="listCustDetailItem flex">
|
|
<p className="listCustomerDetailItemKey">Phone</p>
|
|
<p className="listCustomerDetailItemValue">{this.customer.CustomerData.phone}</p>
|
|
</div>
|
|
<div className="listCustDetailItem flex">
|
|
<p className="listCustomerDetailItemKey">Handphone</p>
|
|
<p className="listCustomerDetailItemValue">{this.customer.CustomerData.handphone}</p>
|
|
</div>
|
|
<div className="listCustDetailItem flex">
|
|
<p className="listCustomerDetailItemKey">Marital Status</p>
|
|
<p className="listCustomerDetailItemValue">{this.customer.CustomerData.martial_status}</p>
|
|
</div>
|
|
<div className="listCustDetailItem flex">
|
|
<p className="listCustomerDetailItemKey">ID Tax Number</p>
|
|
<p className="listCustomerDetailItemValue">{this.customer.CustomerData.id_tax_number}</p>
|
|
</div>
|
|
<div className="listCustDetailItem flex">
|
|
<p className="listCustomerDetailItemKey">ID Type</p>
|
|
<p className="listCustomerDetailItemValue">{this.customer.CustomerData.id_type}</p>
|
|
</div>
|
|
<div className="listCustDetailItem flex">
|
|
<p className="listCustomerDetailItemKey">ID Number</p>
|
|
<p className="listCustomerDetailItemValue">{this.customer.CustomerData.id_number}</p>
|
|
</div>
|
|
<div className="listCustDetailItem flex">
|
|
<p className="listCustomerDetailItemKey">Passport Number</p>
|
|
<p className="listCustomerDetailItemValue">{this.customer.CustomerData.passport_number}</p>
|
|
</div>
|
|
<div className="listCustDetailItem flex">
|
|
<p className="listCustomerDetailItemKey">Agent</p>
|
|
<p className="listCustomerDetailItemValue"><Link to={`${LINKS.MEMBER}/${this.customer.CustomerData.agent_id}`}
|
|
key={this.customer.CustomerData.agent_id}>{this.customer.CustomerData.agent}</Link> - <code
|
|
style={{color: '#424770'}}>{this.customer.CustomerData.agent_id}</code></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardText>
|
|
</Card>
|
|
<Card className="row" style={{marginBottom: 10}}>
|
|
<ToolbarGroup className="flexSpaceBetween" style={{padding: "0px 16px 0px 16px"}}>
|
|
<ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d', textTransform: 'capitalize'}}
|
|
text={'Identification & Passport'}/>
|
|
<RaisedButton
|
|
icon={<AddIcon/>}
|
|
label="Edit"
|
|
onClick={this.handleOpenPhoto}
|
|
primary={true}/>
|
|
</ToolbarGroup>
|
|
<Divider/>
|
|
<div className="row">
|
|
<div className="col s12 m6 l6">
|
|
<CardTitle style={{paddingBottom: 0}}
|
|
subtitle={<p style={{color: '#32325d', fontSize: 12}}>IDENTIFICATION</p>}/>
|
|
<CardText>
|
|
<Paper zDepth={1} style={{padding: 8}}>
|
|
<CardMedia style={{minHeight: '222px'}}>
|
|
<img src={this.http.appendImagePath(this.customer.CustomerData.id_photo)}/>
|
|
</CardMedia>
|
|
</Paper>
|
|
</CardText>
|
|
</div>
|
|
<div className="col s12 m6 l6">
|
|
<CardTitle style={{paddingBottom: 0}}
|
|
subtitle={<p style={{color: '#32325d', fontSize: 12}}>PASSPORT</p>}/>
|
|
<CardText>
|
|
<Paper zDepth={1} style={{padding: 8}}>
|
|
<CardMedia style={{minHeight: '222px'}}>
|
|
<img src={this.http.appendImagePath(this.customer.CustomerData.passport_photo)}/>
|
|
</CardMedia>
|
|
</Paper>
|
|
</CardText>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
<Dialog
|
|
title="Update Customer Data"
|
|
actions={actions}
|
|
modal={true}
|
|
open={this.state.openedDialog}
|
|
onRequestClose={() => this.handleCloseDialog()}
|
|
>
|
|
<div className="row">
|
|
<div className="col s12 m6 l6">
|
|
<div>
|
|
<p className="label-form">Name</p>
|
|
<TextField
|
|
fullWidth={true}
|
|
onChange={this.handleChangeName}
|
|
hintText="E.g. Michael Jordan"
|
|
value={this.customer.CustomerData.name}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col s12 m6 l6">
|
|
<div>
|
|
<p className="label-form">Email</p>
|
|
<TextField
|
|
fullWidth={true}
|
|
onChange={this.handleChangeEmail}
|
|
hintText="E.g. Michael.Jordan@domain.com"
|
|
value={this.customer.CustomerData.email}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="row">
|
|
<div className="col s12 m6 l6">
|
|
<div>
|
|
<p className="label-form">Date of Birth</p>
|
|
<DatePicker
|
|
fullWidth={true}
|
|
mode="landscape"
|
|
onChange={this.handleChangeDate}
|
|
hintText="2017-08-17"
|
|
openToYearSelection={true}
|
|
value={this.customer.CustomerData.date_of_birth}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="col s12 m6 l6">
|
|
<div>
|
|
<p className="label-form">Gender</p>
|
|
<SelectField
|
|
value={this.customer.CustomerData.gender}
|
|
onChange={this.handleChangeGender}
|
|
fullWidth={true}
|
|
>
|
|
{gender}
|
|
</SelectField>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="row">
|
|
<div className="col s12 m6 l6">
|
|
<div>
|
|
<p className="label-form">Passport Number</p>
|
|
<TextField
|
|
hintText="E.g. X000000"
|
|
onChange={this.handleChangePassport}
|
|
fullWidth={true}
|
|
value={this.customer.CustomerData.passport_number}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="col s12 m6 l6">
|
|
<div>
|
|
<p className="label-form">Occupation</p>
|
|
<TextField
|
|
hintText="E.g. PNS"
|
|
onChange={this.handleChangeOccupation}
|
|
fullWidth={true}
|
|
value={this.customer.CustomerData.occupation}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="row">
|
|
<div className="col s12 m6 l6">
|
|
<div>
|
|
<p className="label-form">Address</p>
|
|
<TextField
|
|
hintText="E.g. Jl. Kemanggisan No.25 Jakarta Barat"
|
|
multiLine={true}
|
|
fullWidth={true}
|
|
rows={1}
|
|
rowsMax={4}
|
|
onChange={this.handleChangeAddress}
|
|
value={this.customer.CustomerData.address}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="col s12 m6 l6">
|
|
<div>
|
|
<p className="label-form">Birth Place</p>
|
|
<TextField
|
|
hintText="E.g. Bandung"
|
|
fullWidth={true}
|
|
onChange={this.handleChangeBirthPlace}
|
|
value={this.customer.CustomerData.birth_place}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="row">
|
|
<div className="col s12 m6 l6">
|
|
<div>
|
|
<p className="label-form">Phone</p>
|
|
<TextField
|
|
hintText="E.g. 88954361"
|
|
onChange={this.handleChangePhone}
|
|
fullWidth={true}
|
|
value={this.customer.CustomerData.phone}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="col s12 m6 l6">
|
|
<div>
|
|
<p className="label-form">Handphone</p>
|
|
<TextField
|
|
hintText="E.g. 0899976487"
|
|
onChange={this.handleChangeHandphone}
|
|
fullWidth={true}
|
|
value={this.customer.CustomerData.handphone}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="row">
|
|
<div className="col s12 m6 l6">
|
|
<div>
|
|
<p className="label-form">Marital Status</p>
|
|
<SelectField
|
|
value={this.customer.CustomerData.martial_status}
|
|
onChange={this.handleChangeMarital}
|
|
fullWidth={true}
|
|
>
|
|
{marital_status}
|
|
</SelectField>
|
|
</div>
|
|
</div>
|
|
<div className="col s12 m6 l6">
|
|
<div>
|
|
<p className="label-form">ID Tax Number</p>
|
|
<TextField
|
|
hintText="E.g. 00000000000000000"
|
|
onChange={this.handleChangeTaxNumber}
|
|
fullWidth={true}
|
|
value={this.customer.CustomerData.id_tax_number}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="row">
|
|
<div className="col s12 m6 l6">
|
|
<div>
|
|
<p className="label-form">ID Type</p>
|
|
<TextField
|
|
hintText="E.g. KTP"
|
|
onChange={this.handleChangeType}
|
|
fullWidth={true}
|
|
value={this.customer.CustomerData.id_type}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="col s12 m6 l6">
|
|
<div>
|
|
<p className="label-form">ID Number</p>
|
|
<TextField
|
|
hintText="E.g. 00000000000000"
|
|
onChange={this.handleChangeNumber}
|
|
fullWidth={true}
|
|
value={this.customer.CustomerData.id_number}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Dialog>
|
|
<Dialog
|
|
title="Update Agent"
|
|
actions={actionsPhoto}
|
|
modal={true}
|
|
open={this.state.openedDialogPhoto}
|
|
onRequestClose={() => this.handleClosePhoto()}
|
|
>
|
|
<IdentificationPassport/>
|
|
</Dialog>
|
|
</div>
|
|
)
|
|
}
|
|
}
|