ordo
/
surveyor_indonesia_frontend
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

add validation

pull/2/head
wahyuun 1 year ago
parent
476b872e35
commit
c7c535df76
1 changed files with 136 additions and 112 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 248
      src/views/Master/MasterRoles/DialogForm.js

248
src/views/Master/MasterRoles/DialogForm.js
Unescape View File

@ -1,112 +1,136 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; import { Modal, ModalHeader, ModalBody, ModalFooter, Row, Col } from 'reactstrap';
import { Button, Form, FormGroup, Label, Input } from 'reactstrap'; import { Button, Form, FormGroup, Label, Input } from 'reactstrap';
import 'antd/dist/antd.css'; import 'antd/dist/antd.css';
import { withTranslation } from 'react-i18next'; import { withTranslation } from 'react-i18next';
class DialogForm extends Component { class DialogForm extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
id: 0, id: 0,
name: "", name: "",
description: "", description: "",
openDialog: false, openDialog: false,
isParentClick: false, isParentClick: false,
} }
} }
async componentDidMount() { async componentDidMount() {
this.props.showDialog(this.showDialog); this.props.showDialog(this.showDialog);
} }
async componentDidUpdate() { async componentDidUpdate() {
if (this.state.isParentClick === true) { if (this.state.isParentClick === true) {
if (this.props.typeDialog === "Edit") { if (this.props.typeDialog === "Edit") {
const { dataEdit } = this.props const { dataEdit } = this.props
this.setState({ this.setState({
id: dataEdit.id, id: dataEdit.id,
name: dataEdit.name, name: dataEdit.name,
description: dataEdit.description description: dataEdit.description
}) })
} else { } else {
this.setState({ this.setState({
id: 0, id: 0,
name: "", name: "",
description: "" description: ""
}) })
} }
this.setState({ isParentClick: false }); this.setState({ isParentClick: false });
} }
} }
showDialog = () => { showDialog = () => {
this.setState({ isParentClick: true }); this.setState({ isParentClick: true });
} }
validation = () => {
handleSave = () => { if (!this.state.name || this.state.name === "") {
const { alert("Role Name cannot be empty!");
id, return true;
name, }
description if (!this.state.description || this.state.description === "") {
} = this.state alert("Description cannot be empty!");
return true;
let data = ''; }
if (this.props.typeDialog === "Save") { }
data = {
id, handleSave = () => {
name, const {
description id,
} name,
this.props.closeDialog('save', data); description
} else { } = this.state
data = {
id, let data = '';
name, const err = this.validation();
description if(!err) {
} if (this.props.typeDialog === "Save") {
this.props.closeDialog('edit', data); data = {
} id,
name,
this.setState({ id: 0 }); description
}
} this.props.closeDialog('save', data);
} else {
handleCancel = () => { data = {
this.props.closeDialog('cancel', 'none') id,
} name,
description
renderForm = () => { }
const { t } = this.props; this.props.closeDialog('edit', data);
return ( }
<Form> this.setState({ id: 0 });
<FormGroup> }
<Label>{this.props.t('nameRole')}</Label>
<Input type="text" value={this.state.name} onChange={(e) => this.setState({ name: e.target.value })} placeholder={this.props.t('inputName')} />
</FormGroup> }
<FormGroup>
<Label>{this.props.t('description')}</Label> handleCancel = () => {
<Input type="text" value={this.state.description} onChange={(e) => this.setState({ description: e.target.value })} placeholder={this.props.t('inputDescription')} /> this.props.closeDialog('cancel', 'none')
</FormGroup> }
</Form>
) renderForm = () => {
} const { t } = this.props;
return (
render() { <Form>
return ( <Row>
<Modal isOpen={this.props.openDialog} toggle={this.props.toggleDialog}> <Col md={12}>
<ModalHeader toggle={this.props.closeDialog}>{this.props.typeDialog == "Save" ? "Tambah" : "Edit"} {this.props.t('roles')}</ModalHeader> <span style={{ color: "red" }}>*</span> Wajib diisi.
<ModalBody> </Col>
{this.renderForm()} </Row>
</ModalBody> <Row>
<ModalFooter> <Col md={12}>
<Button color="primary" onClick={() => this.handleSave()}>{this.props.typeDialog}</Button>{' '} <FormGroup>
<Button color="secondary" onClick={() => this.handleCancel()}>{this.props.t('cancel')}</Button> <Label>{this.props.t('nameRole')}<span style={{ color: "red" }}>*</span></Label>
</ModalFooter> <Input type="text" value={this.state.name} onChange={(e) => this.setState({ name: e.target.value })} placeholder={this.props.t('inputName')} />
</Modal> </FormGroup>
) </Col>
} <Col md={12}>
} <FormGroup>
export default withTranslation()(DialogForm); <Label>{this.props.t('description')}<span style={{ color: "red" }}>*</span></Label>
<Input type="text" value={this.state.description} onChange={(e) => this.setState({ description: e.target.value })} placeholder={this.props.t('inputDescription')} />
</FormGroup>
</Col>
</Row>
</Form>
)
}
render() {
return (
<Modal isOpen={this.props.openDialog} toggle={this.props.toggleDialog}>
<ModalHeader toggle={this.props.closeDialog}>{this.props.typeDialog == "Save" ? "Tambah" : "Edit"} {this.props.t('roles')}</ModalHeader>
<ModalBody>
{this.renderForm()}
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={() => this.handleSave()}>{this.props.typeDialog}</Button>{' '}
<Button color="secondary" onClick={() => this.handleCancel()}>{this.props.t('cancel')}</Button>
</ModalFooter>
</Modal>
)
}
}
export default withTranslation()(DialogForm);

Write Preview
Loading…
Cancel
Save