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