{"ast":null,"code":"import _regeneratorRuntime from\"C:/laragon/www/iot.mksolusi/DriverOPCDA/frontend/node_modules/babel-preset-react-app/node_modules/@babel/runtime/regenerator\";import _asyncToGenerator from\"C:/laragon/www/iot.mksolusi/DriverOPCDA/frontend/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/asyncToGenerator\";import _classCallCheck from\"C:/laragon/www/iot.mksolusi/DriverOPCDA/frontend/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck\";import _createClass from\"C:/laragon/www/iot.mksolusi/DriverOPCDA/frontend/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass\";import _assertThisInitialized from\"C:/laragon/www/iot.mksolusi/DriverOPCDA/frontend/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/assertThisInitialized\";import _inherits from\"C:/laragon/www/iot.mksolusi/DriverOPCDA/frontend/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/inherits\";import _createSuper from\"C:/laragon/www/iot.mksolusi/DriverOPCDA/frontend/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createSuper\";import React from\"react\";import{withStyles}from\"@material-ui/core/styles\";import{Grid,Box,MenuItem}from\"@material-ui/core\";import Button from\"@material-ui/core/Button\";import{withRouter}from\"react-router-dom\";import{connect}from\"react-redux\";import{ValidatorForm,TextValidator,SelectValidator}from\"react-material-ui-form-validator\";import axios from\"axios\";import{setUserAuth as _setUserAuth}from\"../../../redux/UserLogin/userLogin.action\";import userServices from\"./UserServicesClass\";import{jsx as _jsx}from\"react/jsx-runtime\";import{jsxs as _jsxs}from\"react/jsx-runtime\";var userServ=new userServices();var useStyles=function useStyles(theme){return{root:{\"& .MuiTextField-root\":{margin:theme.spacing(1),width:\"90%\"}},gridColor:{background:\"white\"},button:{marginTop:theme.spacing(1),color:\"#ffffff\",background:theme.palette.success.main,\"&:hover\":{backgroundColor:theme.palette.success.dark,borderColor:theme.palette.success.light,boxShadow:\"none\"}},form:{background:\"white\"},textField:{width:\"100%\",marginTop:10},selectField:{width:\"100%\",marginTop:20}};};var UserFormEdit=/*#__PURE__*/function(_React$Component){_inherits(UserFormEdit,_React$Component);var _super=_createSuper(UserFormEdit);function UserFormEdit(props){var _this;_classCallCheck(this,UserFormEdit);_this=_super.call(this,props);_this.state={user:{email:\"\",username:\"\",name:\"\",avatar:\"\",roleid:\"\",password:\"\",repeatPassword:\"\"},roles:[]};_this.handleChange=function(event){var user=_this.state.user;user[event.target.name]=event.target.value;_this.setState({user:user});};_this.handleSubmit=/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(){var user,paramInsert,resp;return _regeneratorRuntime.wrap(function _callee$(_context){while(1){switch(_context.prev=_context.next){case 0:user=_this.state.user;paramInsert={Email:user.email,UserName:user.username,Name:user.name,Avatar:user.avatar,RoleId:user.roleid};if(user.password!==\"\"){paramInsert[\"Password\"]=user.password;}console.log(paramInsert);// save user data\n_context.next=6;return userServ.updateUser(_this.props.match.params.id,paramInsert);case 6:resp=_context.sent;if(resp.success){alert(resp.message);_this.onSuccess();}else{alert(resp.message);}case 8:case\"end\":return _context.stop();}}},_callee);}));_this.onSuccess=_this.onSuccess.bind(_assertThisInitialized(_this));return _this;}_createClass(UserFormEdit,[{key:\"onSuccess\",value:function onSuccess(e){this.props.history.push(\"/users\");}},{key:\"componentDidMount\",value:function(){var _componentDidMount=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(){var _this2=this;return _regeneratorRuntime.wrap(function _callee2$(_context2){while(1){switch(_context2.prev=_context2.next){case 0:// find user data\nthis.findUser(this.props.match.params.id);// get data roles\n_context2.next=3;return axios.get(process.env.REACT_APP_BASE_URL+\"/roles\").then(function(res){var roles=res.data.data;_this2.setState({roles:roles});});case 3:// custom validation password\nValidatorForm.addValidationRule(\"isPasswordMatch\",function(value){if(value!==_this2.state.user.password){return false;}return true;});// custom validation username\nValidatorForm.addValidationRule(\"userName\",function(value){var nameRegex=/^[A-z]{2,}[A-z0-9]{0,}$/;if(!value.match(nameRegex)){return false;}return true;});case 5:case\"end\":return _context2.stop();}}},_callee2,this);}));function componentDidMount(){return _componentDidMount.apply(this,arguments);}return componentDidMount;}()},{key:\"findUser\",value:function(){var _findUser=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(id){var resp,data,user;return _regeneratorRuntime.wrap(function _callee3$(_context3){while(1){switch(_context3.prev=_context3.next){case 0:_context3.next=2;return userServ.findUser(id);case 2:resp=_context3.sent;data=resp.data;if(data!=null){user=this.state.user;user[\"email\"]=data.Email;user[\"username\"]=data.UserName;user[\"name\"]=data.Name;user[\"avatar\"]=data.Avatar;user[\"roleid\"]=data.RoleId;this.props.setUserAuth(user);this.setState({user:user});}// console.log(this.state);\nconsole.log(this.props);case 6:case\"end\":return _context3.stop();}}},_callee3,this);}));function findUser(_x){return _findUser.apply(this,arguments);}return findUser;}()},{key:\"componentWillUnmount\",value:function componentWillUnmount(){// remove rule when it is not needed\nValidatorForm.removeValidationRule(\"isPasswordMatch\");ValidatorForm.removeValidationRule(\"userName\");}},{key:\"render\",value:function render(){var classes=this.props.classes;var user=this.state.user;return/*#__PURE__*/_jsx(Grid,{container:true,spacing:1,children:/*#__PURE__*/_jsx(Grid,{item:true,lg:5,xs:12,children:/*#__PURE__*/_jsx(Box,{p:3,boxShadow:3,className:classes.form,children:/*#__PURE__*/_jsxs(ValidatorForm,{ref:\"form\",onSubmit:this.handleSubmit,onError:function onError(errors){return console.log(errors);},children:[/*#__PURE__*/_jsx(TextValidator,{label:\"Email\",onChange:this.handleChange,name:\"email\",value:user.email,validators:[\"required\",\"isEmail\"],errorMessages:[\"this field is required\",\"email is not valid\"],className:classes.textField}),/*#__PURE__*/_jsx(TextValidator,{label:\"Username\",onChange:this.handleChange,name:\"username\",value:user.username,validators:[\"required\",\"userName\"],errorMessages:[\"this field is required\",\"Illegal Caracter in Username\"],className:classes.textField}),/*#__PURE__*/_jsx(TextValidator,{label:\"Full Name\",onChange:this.handleChange,name:\"name\",value:user.name,validators:[\"required\"],errorMessages:[\"this field is required\"],className:classes.textField}),/*#__PURE__*/_jsxs(SelectValidator,{id:\"demo-simple-select-helper\",value:user.roleid,onChange:this.handleChange,validators:[\"required\"],errorMessages:[\"this field is required\"],className:classes.selectField,name:\"roleid\",children:[/*#__PURE__*/_jsx(MenuItem,{value:\"\",children:/*#__PURE__*/_jsx(\"em\",{children:\"None\"})}),this.state.roles.map(function(role,i){return/*#__PURE__*/_jsx(MenuItem,{value:role.id,children:role.RoleName},role.id);})]}),/*#__PURE__*/_jsx(TextValidator,{label:\"New Password\",onChange:this.handleChange,name:\"password\",type:\"password\",validators:[],errorMessages:[\"this field is required\"],value:user.password,className:classes.textField}),/*#__PURE__*/_jsx(TextValidator,{label:\"Repeat New password\",onChange:this.handleChange,name:\"repeatPassword\",type:\"password\",validators:[\"isPasswordMatch\"],errorMessages:[\"password mismatch\"],value:user.repeatPassword,className:classes.textField}),/*#__PURE__*/_jsx(Button,{type:\"submit\",className:classes.button,children:\"Submit\"})]})})})});}}]);return UserFormEdit;}(React.Component);var mapStateToProps=function mapStateToProps(state){return{auth:state.auth};};var mapDispatchToProps=function mapDispatchToProps(dispatch){return{setUserAuth:function setUserAuth(p){return dispatch(_setUserAuth(p));}};};export default connect(mapStateToProps,mapDispatchToProps)(withRouter(withStyles(useStyles)(UserFormEdit)));","map":{"version":3,"sources":["C:/laragon/www/iot.mksolusi/DriverOPCDA/frontend/src/components/pages/Users/UserFormEdit.jsx"],"names":["React","withStyles","Grid","Box","MenuItem","Button","withRouter","connect","ValidatorForm","TextValidator","SelectValidator","axios","setUserAuth","userServices","userServ","useStyles","theme","root","margin","spacing","width","gridColor","background","button","marginTop","color","palette","success","main","backgroundColor","dark","borderColor","light","boxShadow","form","textField","selectField","UserFormEdit","props","state","user","email","username","name","avatar","roleid","password","repeatPassword","roles","handleChange","event","target","value","setState","handleSubmit","paramInsert","Email","UserName","Name","Avatar","RoleId","console","log","updateUser","match","params","id","resp","alert","message","onSuccess","bind","e","history","push","findUser","get","process","env","REACT_APP_BASE_URL","then","res","data","addValidationRule","nameRegex","removeValidationRule","classes","errors","map","role","i","RoleName","Component","mapStateToProps","auth","mapDispatchToProps","dispatch","p"],"mappings":"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","sourcesContent":["import React from \"react\";\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport { Grid, Box, MenuItem } from \"@material-ui/core\";\r\nimport Button from \"@material-ui/core/Button\";\r\nimport { withRouter } from \"react-router-dom\";\r\nimport { connect } from \"react-redux\";\r\n\r\nimport {\r\n  ValidatorForm,\r\n  TextValidator,\r\n  SelectValidator,\r\n} from \"react-material-ui-form-validator\";\r\nimport axios from \"axios\";\r\nimport {setUserAuth} from  \"../../../redux/UserLogin/userLogin.action\"\r\nimport userServices from \"./UserServicesClass\";\r\nconst userServ = new userServices();\r\n\r\nconst useStyles = (theme) => ({\r\n  root: {\r\n    \"& .MuiTextField-root\": {\r\n      margin: theme.spacing(1),\r\n      width: \"90%\",\r\n    },\r\n  },\r\n  gridColor: {\r\n    background: \"white\",\r\n  },\r\n  button: {\r\n    marginTop: theme.spacing(1),\r\n    color: \"#ffffff\",\r\n    background: theme.palette.success.main,\r\n    \"&:hover\": {\r\n      backgroundColor: theme.palette.success.dark,\r\n      borderColor: theme.palette.success.light,\r\n      boxShadow: \"none\",\r\n    },\r\n  },\r\n  form: {\r\n    background: \"white\",\r\n  },\r\n  textField: {\r\n    width: \"100%\",\r\n    marginTop: 10,\r\n  },\r\n  selectField: {\r\n    width: \"100%\",\r\n    marginTop: 20,\r\n  },\r\n});\r\nclass UserFormEdit extends React.Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.onSuccess = this.onSuccess.bind(this);\r\n  }\r\n  state = {\r\n    user: {\r\n      email: \"\",\r\n      username: \"\",\r\n      name: \"\",\r\n      avatar: \"\",\r\n      roleid: \"\",\r\n      password: \"\",\r\n      repeatPassword: \"\",\r\n    },\r\n    roles: [],\r\n  };\r\n\r\n  onSuccess(e) {\r\n    this.props.history.push(\"/users\");\r\n  }\r\n\r\n  handleChange = (event) => {\r\n    const { user } = this.state;\r\n    user[event.target.name] = event.target.value;\r\n    this.setState({ user });\r\n  };\r\n\r\n  handleSubmit = async () => {\r\n    const { user } = this.state;\r\n    let paramInsert = {\r\n      Email: user.email,\r\n      UserName: user.username,\r\n      Name: user.name,\r\n      Avatar: user.avatar,\r\n      RoleId: user.roleid,\r\n    };\r\n\r\n    if (user.password !== \"\") {\r\n      paramInsert[\"Password\"] = user.password;\r\n    }\r\n\r\n    console.log(paramInsert);\r\n\r\n    // save user data\r\n    const resp = await userServ.updateUser(\r\n      this.props.match.params.id,\r\n      paramInsert\r\n    );\r\n    if (resp.success) {\r\n      alert(resp.message);\r\n      this.onSuccess();\r\n    } else {\r\n      alert(resp.message);\r\n    }\r\n  };\r\n\r\n  async componentDidMount() {\r\n    // find user data\r\n    this.findUser(this.props.match.params.id);\r\n    // get data roles\r\n    await axios.get(process.env.REACT_APP_BASE_URL + \"/roles\").then((res) => {\r\n      const roles = res.data.data;\r\n      this.setState({\r\n        roles: roles,\r\n      });\r\n    });\r\n\r\n    // custom validation password\r\n    ValidatorForm.addValidationRule(\"isPasswordMatch\", (value) => {\r\n      if (value !== this.state.user.password) {\r\n        return false;\r\n      }\r\n      return true;\r\n    });\r\n\r\n    // custom validation username\r\n    ValidatorForm.addValidationRule(\"userName\", (value) => {\r\n      const nameRegex = /^[A-z]{2,}[A-z0-9]{0,}$/;\r\n      if (!value.match(nameRegex)) {\r\n        return false;\r\n      }\r\n      return true;\r\n    });\r\n  }\r\n\r\n  async findUser(id) {\r\n    const resp = await userServ.findUser(id);\r\n    const data = resp.data;\r\n    if (data != null) {\r\n      const { user } = this.state;\r\n      user[\"email\"] = data.Email;\r\n      user[\"username\"] = data.UserName;\r\n      user[\"name\"] = data.Name;\r\n      user[\"avatar\"] = data.Avatar;\r\n      user[\"roleid\"] = data.RoleId;\r\n      this.props.setUserAuth(user)\r\n      this.setState({ user });\r\n    }\r\n    // console.log(this.state);\r\n    console.log(this.props);\r\n\r\n  }\r\n\r\n  componentWillUnmount() {\r\n    // remove rule when it is not needed\r\n    ValidatorForm.removeValidationRule(\"isPasswordMatch\");\r\n    ValidatorForm.removeValidationRule(\"userName\");\r\n  }\r\n\r\n  render() {\r\n    const { classes } = this.props;\r\n    const { user } = this.state;\r\n\r\n    return (\r\n      <Grid container spacing={1}>\r\n        <Grid item lg={5} xs={12}>\r\n          <Box p={3} boxShadow={3} className={classes.form}>\r\n            <ValidatorForm\r\n              ref=\"form\"\r\n              onSubmit={this.handleSubmit}\r\n              onError={(errors) => console.log(errors)}\r\n            >\r\n              <TextValidator\r\n                label=\"Email\"\r\n                onChange={this.handleChange}\r\n                name=\"email\"\r\n                value={user.email}\r\n                validators={[\"required\", \"isEmail\"]}\r\n                errorMessages={[\"this field is required\", \"email is not valid\"]}\r\n                className={classes.textField}\r\n              />\r\n              <TextValidator\r\n                label=\"Username\"\r\n                onChange={this.handleChange}\r\n                name=\"username\"\r\n                value={user.username}\r\n                validators={[\"required\", \"userName\"]}\r\n                errorMessages={[\r\n                  \"this field is required\",\r\n                  \"Illegal Caracter in Username\",\r\n                ]}\r\n                className={classes.textField}\r\n              />\r\n\r\n              <TextValidator\r\n                label=\"Full Name\"\r\n                onChange={this.handleChange}\r\n                name=\"name\"\r\n                value={user.name}\r\n                validators={[\"required\"]}\r\n                errorMessages={[\"this field is required\"]}\r\n                className={classes.textField}\r\n              />\r\n\r\n              <SelectValidator\r\n                id=\"demo-simple-select-helper\"\r\n                value={user.roleid}\r\n                onChange={this.handleChange}\r\n                validators={[\"required\"]}\r\n                errorMessages={[\"this field is required\"]}\r\n                className={classes.selectField}\r\n                name=\"roleid\"\r\n              >\r\n                <MenuItem value=\"\">\r\n                  <em>None</em>\r\n                </MenuItem>\r\n                {this.state.roles.map((role, i) => (\r\n                  <MenuItem key={role.id} value={role.id}>\r\n                    {role.RoleName}\r\n                  </MenuItem>\r\n                ))}\r\n              </SelectValidator>\r\n\r\n              <TextValidator\r\n                label=\"New Password\"\r\n                onChange={this.handleChange}\r\n                name=\"password\"\r\n                type=\"password\"\r\n                validators={[]}\r\n                errorMessages={[\"this field is required\"]}\r\n                value={user.password}\r\n                className={classes.textField}\r\n              />\r\n              <TextValidator\r\n                label=\"Repeat New password\"\r\n                onChange={this.handleChange}\r\n                name=\"repeatPassword\"\r\n                type=\"password\"\r\n                validators={[\"isPasswordMatch\"]}\r\n                errorMessages={[\"password mismatch\"]}\r\n                value={user.repeatPassword}\r\n                className={classes.textField}\r\n              />\r\n\r\n              <Button type=\"submit\" className={classes.button}>\r\n                Submit\r\n              </Button>\r\n            </ValidatorForm>\r\n          </Box>\r\n        </Grid>\r\n      </Grid>\r\n    );\r\n  }\r\n}\r\n\r\nconst mapStateToProps = (state)=>{\r\n return {\r\n   auth: state.auth,\r\n };\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n  return {\r\n    setUserAuth: (p) => dispatch(setUserAuth(p)),\r\n  };\r\n};\r\nexport default connect(\r\n  mapStateToProps,\r\n  mapDispatchToProps\r\n)(withRouter(withStyles(useStyles)(UserFormEdit)));\r\n"]},"metadata":{},"sourceType":"module"}