Advertisement
langbung01

Untitled

Dec 19th, 2018
259
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react';
  2. import PropTypes from 'prop-types';
  3. import { Modal } from 'react-bootstrap';
  4. import { change, Field, reduxForm, SubmissionError } from 'redux-form'
  5. import swal from 'sweetalert2';
  6. import axios from 'axios/index'
  7.  
  8. const formName = 'addOwner';
  9.  
  10. class BusinessNewOwnerModal extends Component {
  11.   constructor(props) {
  12.     super(props);
  13.     this.state = {
  14.       bizRoleOption:[],
  15.       listNewOwner: [],
  16.       errorConfirmOwner: '',
  17.       first_name_owner: '',
  18.       last_name_owner: '',
  19.       position_name_owner: '',
  20.       department_name_owner: '',
  21.     };
  22.   }
  23.  
  24.   componentDidMount(){
  25.       this.getRoleBizOption();
  26.   }
  27.  
  28.   handleSubmit = async (values) => {
  29.     const url = `${process.env.MIX_BACKEND_IP}/api/check_owner`;
  30.     try {
  31.       const res = await axios.post(url, values);
  32.       const { id } = res.data.data;
  33.       this.setState({
  34.         listNewOwner: [
  35.           ...this.state.listNewOwner, {
  36.             name: `${values.first_name_owner} ${values.last_name_owner}`,
  37.             id,
  38.           }],
  39.         first_name_owner: values.first_name_owner,
  40.         last_name_owner: values.last_name_owner,
  41.         position_name_owner: values.position_name_owner,
  42.         department_name_owner: values.department_name_owner,
  43.       });
  44.     } catch (e) {
  45.       throw new SubmissionError({
  46.         _error: e.response.data.errorMessage,
  47.       });
  48.     }
  49.   };
  50.  
  51.   deleteNewOwner = (i) => {
  52.     const listNewOwner = this.state.listNewOwner.filter((item, index) => index !== i);
  53.     this.setState({
  54.       listNewOwner,
  55.     });
  56.   };
  57.  
  58.   renderField = (field, disabled) => {
  59.     const { meta: { touched, error } } = field;
  60.     const className = `form-group has-feedback ${touched && error
  61.       ? 'has-error'
  62.       : ''}`;
  63.     return (
  64.       <div className={className}>
  65.         <label htmlFor={field.input.name}>{field.label}</label>
  66.         <input
  67.           type={field.type}
  68.           disabled={disabled}
  69.           placeholder={field.label}
  70.           className="form-control"
  71.           {...field.input}
  72.         />
  73.         <span className="help-block">
  74.           {touched ? error : ''}
  75.         </span>
  76.       </div>
  77.     );
  78.   };
  79.  
  80.   getRoleBizOption=()=>{
  81.       console.log(this.props.bizRole.length);
  82.       this.setState({
  83.           bizRoleOption:this.props.bizRole.map((bizRole)=>(
  84.               <option key={bizRole} value="{bizRole}">{bizRole}</option>
  85.           )),
  86.       })
  87.   }
  88.  
  89.   renderSelectPosition= async (field)=>{
  90.       const { meta: { touched, error } } = field;
  91.       const className = `form-group has-feedback ${touched && error
  92.           ? 'has-error'
  93.           : ''}`;
  94.  
  95.     return (
  96.           <div className={className}>
  97.               <label htmlFor={field.input.name}>{field.label}</label>
  98.               <div className="form-group">
  99.                   <div className="input-group col-md-12">
  100.                       <select
  101.                           type={field.type}
  102.                           placeholder={field.label}
  103.                           className="form-control">
  104.                           {this.state.bizRole}
  105.                       </select>
  106.                   </div>
  107.                   <span className="help-block">
  108.                     {/*{touched ? error : ''}*/}
  109.                   </span>
  110.             </div>
  111.           </div>
  112.       );
  113.   }
  114.  
  115.   renderInputField = (field) => {
  116.     const { meta: { touched, error } } = field;
  117.     const className = `form-group has-feedback ${touched && error
  118.       ? 'has-error'
  119.       : ''}`;
  120.     return (
  121.       <div className={className}>
  122.         <label htmlFor={field.input.name}>{field.label}</label>
  123.         <div className="form-group">
  124.           <div className="input-group col-md-12">
  125.             <input
  126.               type={field.type}
  127.               placeholder={field.label}
  128.               className="form-control"
  129.               {...field.input}
  130.             />
  131.             <span className="input-group-btn"> <button type="button" className="btn btn-primary"><i className="fa fa-search"/></button> </span>
  132.           </div>
  133.           <span className="help-block">
  134.             {touched ? error : ''}
  135.           </span>
  136.         </div>
  137.       </div>
  138.     );
  139.   };
  140.  
  141.   renderInputFieldDetail = (field) => {
  142.     const { meta: { touched, error } } = field;
  143.     const className = `form-group has-feedback ${touched && error
  144.       ? 'has-error'
  145.       : ''}`;
  146.     return (
  147.       <div className={className}>
  148.         <label htmlFor={field.input.name}>{field.label}</label>
  149.           <input
  150.             type={field.type}
  151.             placeholder={field.label}
  152.             className="form-control"
  153.             {...field.input}
  154.           />
  155.           <span className="help-block">
  156.             {touched ? error : ''}
  157.           </span>
  158.       </div>
  159.     );
  160.   };
  161.  
  162.   handleConfirmOwner = async () => {
  163.     if (!this.state.listNewOwner.length) {
  164.       this.setState({
  165.         errorConfirmOwner: 'Please add owner before confirm',
  166.       });
  167.       return;
  168.     }
  169.     const ownerId = this.state.listNewOwner.map(account => account.id);
  170.     const url = '/service/request_business';
  171.     const businessId = document.querySelector('meta[name="account-id"]').getAttribute('content');
  172.     try {
  173.       await axios.post(url, {
  174.         businessId,
  175.         type: 'ADD_NEW_OWNER',
  176.         ownerId,
  177.         firstName: this.state.first_name_owner,
  178.         lastName: this.state.last_name_owner,
  179.         position: this.state.position_name_owner,
  180.         department: this.state.department_name_owner,
  181.       });
  182.       swal({
  183.         title: 'request success',
  184.         type: 'success',
  185.         showConfirmButton: false,
  186.         timer: 3000,
  187.       });
  188.       this.props.handleModal(false);
  189.     } catch (e) {
  190.       console.log(e);
  191.     }
  192.   };
  193.  
  194.   render() {
  195.     console.log(this.props.bizRole.length);
  196.     if(this.props.bizRole.length>0)
  197.       return (
  198.           <Modal
  199.               show={this.props.openModal}
  200.               onHide={() => this.props.handleModal(false)}
  201.           >
  202.               <Modal.Header closeButton>
  203.                   <Modal.Title>เพิ่มพนักงาน</Modal.Title>
  204.               </Modal.Header>
  205.               <Modal.Body>
  206.                   <form onSubmit={this.props.handleSubmit(this.handleSubmit)}>
  207.                       <Field
  208.                           name="first_name_owner"
  209.                           type="text"
  210.                           component={this.renderField}
  211.                           label="ชื่อ (ภาษาอังกฤษ)"
  212.                       />
  213.                       <Field
  214.                           name="last_name_owner"
  215.                           type="text"
  216.                           component={this.renderField}
  217.                           label="นามสกุล (ภาษาอังกฤษ)"
  218.                       />
  219.  
  220.                       <Field
  221.                           name="id_no_owner"
  222.                           type="text"
  223.                           component={this.renderInputField}
  224.                           label="เลขบัตรประจำตัว"
  225.                       />
  226.  
  227.                       <Field
  228.                           name="position_name_owner"
  229.                           type="text"
  230.                           component={this.renderSelectPosition}
  231.                           label="ตำแหน่ง*"
  232.                       />
  233.  
  234.  
  235.                       <Field
  236.                           name="department_name_owner"
  237.                           type="text"
  238.                           component={this.renderInputFieldDetail}
  239.                           label="แผนก*"
  240.                       />
  241.  
  242.                       <p className="text-danger">
  243.                           {this.props.error && <strong>{this.props.error}</strong>}
  244.                       </p>
  245.                       <button type="submit" className="btn btn-primary">เพิ่ม</button>
  246.                   </form>
  247.                   <hr />
  248.                   <table className="table table-hover">
  249.                       <thead>
  250.                       <tr>
  251.                           <th>#</th>
  252.                           <th>ชื่อ</th>
  253.                       </tr>
  254.                       </thead>
  255.                       <tbody>
  256.                       {this.state.listNewOwner.map((account, index) => (
  257.                           <tr key={index}>
  258.                               <td>
  259.                                   {index + 1}
  260.                               </td>
  261.                               <td>
  262.                                   {account.name}
  263.                               </td>
  264.                               <td>
  265.                                   <button
  266.                                       className="btn btn-danger"
  267.                                       onClick={() => this.deleteNewOwner(index)}
  268.                                   >
  269.                                       <i className="fa fa-times" />
  270.                                   </button>
  271.                               </td>
  272.                           </tr>
  273.                       ))}
  274.                       </tbody>
  275.                   </table>
  276.                   <p className="text-danger">
  277.                       {!this.state.listNewOwner.length && <strong>{this.state.errorConfirmOwner}</strong>}
  278.                   </p>
  279.               </Modal.Body>
  280.               <Modal.Footer>
  281.                   <button className="btn btn-primary" onClick={this.handleConfirmOwner}>
  282.                       ยืนยัน
  283.                   </button>
  284.               </Modal.Footer>
  285.           </Modal>
  286.       );
  287.     return "";
  288.  
  289.   }
  290. }
  291.  
  292. BusinessNewOwnerModal.propTypes = {
  293.   openModal: PropTypes.bool.isRequired,
  294.   handleModal: PropTypes.func.isRequired,
  295.   handleSubmit: PropTypes.func.isRequired,
  296. };
  297. BusinessNewOwnerModal.defaultProps = {};
  298.  
  299. function validate(values) {
  300.   const errors = {};
  301.   const regex = /(?=.*[A-Za-z])(?=.*\d)[\S\d]{8,}$/;
  302.   const regexNumber = /^[0-9\b]+$/;
  303.   const regexEng = /^[A-Za-z][A-Za-z0-9]*$/;
  304.  
  305.   if (!values.first_name_owner) {
  306.     errors.first_name_owner = 'โปรดกรอกชื่อ';
  307.   } else if (!regexEng.test(values.first_name_owner)) {
  308.     errors.first_name_owner = 'โปรดกรอกภาษาอังกฤษเท่านั้น';
  309.   }
  310.   if (!values.last_name_owner) {
  311.     errors.last_name_owner = 'โปรดกรอกชื่อ(ภาษาอังกฤษ)';
  312.   } else if (!regexEng.test(values.last_name_owner)) {
  313.     errors.last_name_owner = 'โปรดกรอกภาษาอังกฤษเท่านั้น';
  314.   }
  315.   if (!values.id_no_owner) {
  316.     errors.id_no_owner = 'โปรดกรอกเลขประจำตัวประชาชน';
  317.   } else if (!regexNumber.test(values.id_no_owner)) {
  318.     errors.id_no_owner = 'โปรดกรอกตัวเลขเท่านั้น';
  319.   } else if (values.id_no_owner.length !== 13) {
  320.     errors.id_no_owner = 'เลขประจำตัวประชาชนต้องเท่ากับ 13 หลัก';
  321.   }
  322.   if (!values.position_name_owner) {
  323.     errors.position_name_owner = 'โปรดกรอกตำแหน่ง';
  324.   }
  325.   if (!values.department_name_owner) {
  326.     errors.department_name_owner = 'โปรดกรอกแผนก';
  327.   }
  328.   return errors;
  329. }
  330.  
  331. const handleSearch = async (values, dispatch, props) => {
  332.   const url = `${process.env.MIX_BACKEND_IP}/api/check_owner`;
  333.   try {
  334.     const res = await axios.post(url, {
  335.       id_no_owner: values.id_no_owner,
  336.     });
  337.     props.dispatch(change(formName, 'first_name_owner', res.data.data.first_name_eng));
  338.     props.dispatch(change(formName, 'last_name_owner', res.data.data.last_name_eng));
  339.   } catch (exception) {
  340.     props.dispatch(change(formName, 'first_name_owner', ''));
  341.     props.dispatch(change(formName, 'last_name_owner', ''));
  342.     throw {
  343.       id_no_owner: "ไม่พบผู้ใช้ในระบบ"
  344.     }
  345.   }
  346. }
  347.  
  348. export default reduxForm({
  349.   form: formName,
  350.   validate,
  351.   asyncValidate: handleSearch,
  352.   asyncBlurFields: ['id_no_owner'],
  353. })(BusinessNewOwnerModal);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement