Initial commit
This commit is contained in:
Rifqy Zacky Ariadhy
335
src/common/pages/Stores/Address/Dialog/AddAddress.js
Normal file
335
src/common/pages/Stores/Address/Dialog/AddAddress.js
Normal file
@@ -0,0 +1,335 @@
|
||||
import React from 'react';
|
||||
import {observer, inject} from 'mobx-react';
|
||||
import {
|
||||
Dialog, FlatButton, RaisedButton,
|
||||
Step,
|
||||
StepLabel,
|
||||
Stepper,
|
||||
IconButton
|
||||
} from "material-ui";
|
||||
import {DIALOG} from "../../../../stores/global_ui";
|
||||
import schema from 'async-validator'
|
||||
import AddressDetail from './Address';
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class AddressAdd extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
stepIndex: 0,
|
||||
finished: false,
|
||||
openedDialog: false,
|
||||
openMaps : false,
|
||||
confirmationDialog : false,
|
||||
formData: {},
|
||||
errorMessage: '',
|
||||
default:{
|
||||
is_shipment : true,
|
||||
is_default : true
|
||||
}
|
||||
};
|
||||
this.defaultState = Object.assign({}, this.state);
|
||||
this.globalUI = props.appstate.globalUI;
|
||||
this.userAddress = props.appstate.userAddress;
|
||||
this.userData = props.appstate.userData;
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
this.setState({
|
||||
stepIndex:0
|
||||
});
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps){
|
||||
this.setState({stepIndex : 0,formData : nextProps.defaultValue, default : nextProps.defaultValue});
|
||||
}
|
||||
|
||||
getStepContent(stepIndex) {
|
||||
|
||||
const {mode="create", defaultValue={}} = this.props;
|
||||
|
||||
switch (stepIndex) {
|
||||
case 0:
|
||||
return (
|
||||
<AddressDetail
|
||||
mode={mode}
|
||||
defaultValue={defaultValue}
|
||||
onChangeData={formData => this.setState({formData})}/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
handleOpen = () => {
|
||||
this.setState({confirmationDialog: true})
|
||||
};
|
||||
|
||||
handleNext = () => {
|
||||
const {stepIndex} = this.state;
|
||||
if (stepIndex === 0) {
|
||||
|
||||
const rules = {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: "Please fill address name"
|
||||
}
|
||||
],
|
||||
address: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please fill address',
|
||||
}
|
||||
],
|
||||
province_id: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please select province',
|
||||
}
|
||||
],
|
||||
city_id: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please select city',
|
||||
}
|
||||
],
|
||||
phone_number: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please fill phone number',
|
||||
}
|
||||
],
|
||||
postal_code: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please fill postal code',
|
||||
}
|
||||
],
|
||||
};
|
||||
|
||||
const validator = new schema(rules);
|
||||
console.log(this.state.formData);
|
||||
validator.validate(this.state.formData, (errs, f) => {
|
||||
console.log(errs);
|
||||
|
||||
if (errs) {
|
||||
this.globalUI.showNotification("Something's Wrong", errs[0].message);
|
||||
} else {
|
||||
// let regex=/^(\([0-9]{4}\)\s*|[0-9]{4}\-|\([0-9]{3}\)\s*|[0-9]{3}\-|[0-9]{11,15})([0-9]{8}|\s*)$/;
|
||||
let regex=/^(^\+62\s?|^0)(\d{3,4}-?){2}\d{3,4}$/g;
|
||||
if(this.state.formData.phone_number.match(regex)) {
|
||||
this.setState({
|
||||
stepIndex: stepIndex + 1,
|
||||
});
|
||||
}
|
||||
else{
|
||||
this.globalUI.showNotification("Phone number should be correct !");
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
handlePrev = () => {
|
||||
const {stepIndex} = this.state;
|
||||
if (stepIndex > 0) {
|
||||
this.setState({stepIndex: stepIndex - 1});
|
||||
}
|
||||
}
|
||||
|
||||
save = () => {
|
||||
this.globalUI.hideDialog(DIALOG.ADDRESS.CREATE);
|
||||
this.globalUI.showDialogLoading();
|
||||
const {mode="create", defaultValue={}} = this.props;
|
||||
var data = this.state.formData;
|
||||
data.lat = this.userAddress.geoData.lat;
|
||||
data.long = this.userAddress.geoData.lng;
|
||||
data.geoaddress = this.userAddress.geoData.geoaddress;
|
||||
|
||||
if(this.userData.role == 'store') {
|
||||
if (mode === "create") {
|
||||
|
||||
this.userAddress.addAddress(data).then(res=>{
|
||||
this.globalUI.openSnackbar('Successfully add new Address');
|
||||
}).catch((err)=> {
|
||||
console.log(err);
|
||||
this.globalUI.closeLoading();
|
||||
})
|
||||
} else if (mode === "update") {
|
||||
this.userAddress.updateAddress(data).then(res=>{
|
||||
this.globalUI.openSnackbar('Successfully update Address');
|
||||
}).catch(err=>{
|
||||
console.log(err);
|
||||
this.globalUI.openSnackbar('Something Error');
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
else if(this.userData.role == 'administrator'){
|
||||
if (mode === "create") {
|
||||
this.userAddress.addAddressAdmin(this.props.id,data).then(res=>{
|
||||
this.globalUI.openSnackbar('Successfully add new Address');
|
||||
}).catch((err)=> {
|
||||
console.log(err);
|
||||
this.globalUI.closeLoading();
|
||||
})
|
||||
} else if (mode === "update") {
|
||||
this.userAddress.updateAddressAdmin(this.props.id,data).then(res=>{
|
||||
this.globalUI.openSnackbar('Successfully update Address');
|
||||
}).catch(err=>{
|
||||
console.log(err);
|
||||
this.globalUI.openSnackbar('Something Error');
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
handleClose = () => {
|
||||
this.setState({confirmationDialog: false,formData : {}})
|
||||
};
|
||||
|
||||
|
||||
continueButton() {
|
||||
if (this.state.stepIndex === 1) {
|
||||
return (
|
||||
<RaisedButton
|
||||
label="Finish"
|
||||
primary={true}
|
||||
onClick={this.save}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<RaisedButton
|
||||
label="Next"
|
||||
primary={true}
|
||||
onClick={this.handleNext}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
openWarningDialog = ()=>{
|
||||
// this.userAddress.deletedAddress(data.id).then(res=>{
|
||||
// this.globalUI.openSnackbar('Delete Success');
|
||||
// })
|
||||
// console.log(data);
|
||||
this.setState(
|
||||
{
|
||||
confirmationDialog :true,errorMessage:
|
||||
'Are you sure want to delete this address?'}
|
||||
)
|
||||
;};
|
||||
|
||||
deletedAddress = (data)=>{
|
||||
this.setState({confirmationDialog:false});
|
||||
this.globalUI.hideDialog(DIALOG.ADDRESS.CREATE);
|
||||
if(this.userData.role == 'store') {
|
||||
this.userAddress.deletedAddress(data.id).then(res=>{
|
||||
this.globalUI.openSnackbar('Delete success')
|
||||
});
|
||||
}
|
||||
else if(this.userData.role == 'administrator'){
|
||||
this.userAddress.deletedAddressAdmin(this.props.id,data.id).then(res=>{
|
||||
this.globalUI.openSnackbar('Delete success')
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
|
||||
const {finished, stepIndex} = this.state;
|
||||
const {mode="create", defaultValue={}} = this.props;
|
||||
|
||||
const actions = [
|
||||
<RaisedButton
|
||||
label="No"
|
||||
primary={false}
|
||||
style={{marginRight: 10}}
|
||||
onClick={this.handleClose}
|
||||
/>,
|
||||
<RaisedButton
|
||||
label="Yes"
|
||||
primary={true}
|
||||
style={{marginRight: 10}}
|
||||
onClick={()=>this.deletedAddress(this.state.formData)}
|
||||
/>
|
||||
];
|
||||
|
||||
const title =
|
||||
<div>
|
||||
<h4 style={{
|
||||
fontSize: 26,
|
||||
marginBottom: 0,
|
||||
marginTop: 0,
|
||||
fontWeight: 500,
|
||||
color: "black"
|
||||
}}>{(mode === "create") ? "Add New" : "Update"} Address</h4>
|
||||
</div>
|
||||
;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Dialog
|
||||
title={<div>
|
||||
<div>{title}</div>
|
||||
{/*<div style={{padding: "0px 14px 0 0", marginTop: 10}}>*/}
|
||||
{/*<Stepper activeStep={stepIndex}>*/}
|
||||
{/*<Step>*/}
|
||||
{/*<StepLabel style={{padding: "0px 14px 0px 0px", height: 52}}>Bank Account</StepLabel>*/}
|
||||
{/*</Step>*/}
|
||||
{/*/!* <Step>*/}
|
||||
{/*<StepLabel style={{padding: "0px 0px 0px 14px", height: 52}}>Identification & Passport</StepLabel>*/}
|
||||
{/*</Step> *!/*/}
|
||||
{/*</Stepper>*/}
|
||||
{/*</div>*/}
|
||||
</div>}
|
||||
titleStyle={{paddingBottom: 10}}
|
||||
modal={false}
|
||||
actions={<div style={{marginTop: 12}}>
|
||||
<FlatButton
|
||||
label={(stepIndex === 0) ? "Cancel" : "Back"}
|
||||
style={{marginRight: 10}}
|
||||
primary={true}
|
||||
onClick={() => (stepIndex === 0) ? this.globalUI.hideDialog(DIALOG.ADDRESS.CREATE) : this.handlePrev()}
|
||||
/>
|
||||
{this.continueButton()}
|
||||
{(this.state.default.is_shipment != true && this.state.default.is_default != true) ?
|
||||
<FlatButton
|
||||
label={"Delete"}
|
||||
style={{marginRight: 10}}
|
||||
primary={true}
|
||||
onClick={() => this.openWarningDialog()}
|
||||
/> : ''}
|
||||
</div>}
|
||||
autoScrollBodyContent={true}
|
||||
repositionOnUpdate={true}
|
||||
open={this.globalUI[DIALOG.ADDRESS.CREATE]}
|
||||
onRequestClose={this.handleClose}
|
||||
paperClassName={'radius6'}
|
||||
contentClassName={'marketplace-dialog-small'}
|
||||
>
|
||||
<div style={{marginTop: 20}}>
|
||||
{this.getStepContent(stepIndex)}
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
<Dialog
|
||||
title="Warning"
|
||||
actions={actions}
|
||||
modal={false}
|
||||
autoScrollBodyContent={false}
|
||||
contentStyle={{width: 350}}
|
||||
open={this.state.confirmationDialog}
|
||||
onRequestClose={() => this.handleClose()}
|
||||
>
|
||||
{this.state.errorMessage}
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user