Initial commit
This commit is contained in:
Rifqy Zacky Ariadhy
561
src/common/pages/CustomerDetail/GeneralInformation/index.js
Normal file
561
src/common/pages/CustomerDetail/GeneralInformation/index.js
Normal file
@@ -0,0 +1,561 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user