Initial commit
This commit is contained in:
Rifqy Zacky Ariadhy
263
src/common/pages/Categories/Dialog/index.js
Normal file
263
src/common/pages/Categories/Dialog/index.js
Normal file
@@ -0,0 +1,263 @@
|
||||
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 CategoryData from './CategoryData';
|
||||
import ArrowForwardIcon from 'material-ui/svg-icons/navigation/arrow-forward';
|
||||
import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
|
||||
import schema from 'async-validator'
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class CategoriesDialog extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
stepIndex: 0,
|
||||
formData: {},
|
||||
finished: false,
|
||||
openedDialog: false,
|
||||
formData: {},
|
||||
errorMessage: ''
|
||||
};
|
||||
this.defaultState = Object.assign({}, this.state);
|
||||
this.globalUI = props.appstate.globalUI;
|
||||
this.customer = props.appstate.customer;
|
||||
|
||||
this.categoriesStore = props.appstate.category;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.setState({
|
||||
stepIndex: 0
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
onChangeForm(formData) {
|
||||
this.setState({formData});
|
||||
}
|
||||
|
||||
getStepContent(stepIndex) {
|
||||
|
||||
const {mode="create", defaultValue={}} = this.props;
|
||||
|
||||
switch (stepIndex) {
|
||||
case 0:
|
||||
return (
|
||||
<CategoryData
|
||||
mode={mode}
|
||||
defaultValue={defaultValue}
|
||||
onChangeData={formData => this.setState({formData})}/>
|
||||
);
|
||||
// case 1:
|
||||
// return <IdentificationPassport/>;
|
||||
}
|
||||
}
|
||||
|
||||
handleOpen = () => {
|
||||
this.setState({confirmationDialog: true})
|
||||
};
|
||||
|
||||
handleNext = () => {
|
||||
const {stepIndex} = this.state;
|
||||
if (stepIndex === 0) {
|
||||
|
||||
const rules = {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please input the name'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const validator = new schema(rules);
|
||||
|
||||
validator.validate(this.state.formData, (errs, f) => {
|
||||
console.log(errs);
|
||||
if (errs) {
|
||||
this.globalUI.showNotification("Something's Wrong", errs[0].message);
|
||||
} else {
|
||||
this.setState({
|
||||
stepIndex: stepIndex + 1,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
handlePrev = () => {
|
||||
const {stepIndex} = this.state;
|
||||
if (stepIndex > 0) {
|
||||
this.setState({stepIndex: stepIndex - 1});
|
||||
}
|
||||
}
|
||||
|
||||
handleClose = () => {
|
||||
this.setState({confirmationDialog: false})
|
||||
};
|
||||
|
||||
save = () => {
|
||||
this.globalUI.hideDialog(DIALOG.SETTING.CATEGORIES);
|
||||
this.globalUI.showDialogLoading();
|
||||
const {mode="create", defaultValue={}} = this.props;
|
||||
|
||||
if (mode === "create") {
|
||||
let data = this.state.formData;
|
||||
data.image = {
|
||||
icon : this.state.formData.icon,
|
||||
background_image : this.state.formData.background_image
|
||||
}
|
||||
delete data.icon;
|
||||
delete data.background_image;
|
||||
this.categoriesStore.postCategory(data)
|
||||
.then(res => {
|
||||
this.globalUI.hideDialogLoading();
|
||||
this.globalUI.openSnackbar("Success Added New Category");
|
||||
this.setState({
|
||||
stepIndex: 0
|
||||
})
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err);
|
||||
});
|
||||
} else if (mode === "update") {
|
||||
let data = this.state.formData;
|
||||
data.image = {
|
||||
icon : this.state.formData.icon,
|
||||
background_image : this.state.formData.background_image
|
||||
}
|
||||
delete data.icon;
|
||||
delete data.background_image;
|
||||
this.categoriesStore.putCategory(defaultValue.id, data)
|
||||
.then(res => {
|
||||
// this.globalUI.hideDialog(DIALOG.EMPLOYEE.CREATE);
|
||||
this.globalUI.hideDialogLoading();
|
||||
this.globalUI.openSnackbar("Success Updated Category")
|
||||
this.setState({
|
||||
stepIndex: 0
|
||||
})
|
||||
// this.categoriesStore.getAll();
|
||||
})
|
||||
.catch(err => {
|
||||
this.globalUI.openSnackbar("Error, Check log for detail");
|
||||
console.error(err);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
handlePost = () => {
|
||||
// this.agentStore.post().then(res => {
|
||||
// this.props.history.push(LINKS.SETTING);
|
||||
// this.globalUI.openSnackbar("Successfull Added Employee");
|
||||
// });
|
||||
};
|
||||
|
||||
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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const {finished, stepIndex} = this.state;
|
||||
const {mode="create", defaultValue={}} = this.props;
|
||||
|
||||
const actions = [
|
||||
<RaisedButton
|
||||
label="OK"
|
||||
primary={true}
|
||||
style={{marginRight: 10}}
|
||||
onClick={this.handleClose}
|
||||
/>,
|
||||
]
|
||||
|
||||
const title =
|
||||
<div>
|
||||
<h4 style={{
|
||||
fontSize: 26,
|
||||
marginBottom: 0,
|
||||
marginTop: 0,
|
||||
fontWeight: 500,
|
||||
color: "black"
|
||||
}}>{(mode === "create") ? "Add New" : "Update"} Category</h4>
|
||||
</div>
|
||||
;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Dialog
|
||||
title={<div>
|
||||
<div>{title}</div>
|
||||
<div style={{padding: "0px 14px 0px 0px", marginTop: 10}}>
|
||||
<Stepper activeStep={stepIndex}>
|
||||
<Step>
|
||||
<StepLabel style={{padding: "0px 14px 0px 0px", height: 52}}>Category Data</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.SETTING.CATEGORIES) : this.handlePrev()}
|
||||
/>
|
||||
{this.continueButton()}
|
||||
</div>}
|
||||
autoScrollBodyContent={true}
|
||||
repositionOnUpdate={true}
|
||||
open={this.globalUI[DIALOG.SETTING.CATEGORIES]}
|
||||
onRequestClose={this.handleClose}
|
||||
style={{zIndex: 999}}
|
||||
>
|
||||
<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