bukopin-redemption-client-react/src/common/pages/Categories/Dialog/index.js

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>
    )
  }
}