add validation

src/views/Master/MasterRoles/DialogForm.js

@@ -1,5 +1,5 @@
 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 'antd/dist/antd.css';
 import { withTranslation } from 'react-i18next';
@@ -45,6 +45,16 @@ class DialogForm extends Component {
     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 {
@@ -54,23 +64,26 @@ class DialogForm extends Component {
     } = this.state
 
     let data = '';
-    if (this.props.typeDialog === "Save") {
+    const err = this.validation();
-      data = {
+    if(!err) {
-        id,
+      if (this.props.typeDialog === "Save") {
-        name,
+        data = {
-        description
+          id,
-      }
+          name,
-      this.props.closeDialog('save', data);
+          description
-    } else {
+        }
-      data = {
+        this.props.closeDialog('save', data);
-        id,
+      } else {
-        name,
+        data = {
-        description
+          id,
+          name,
+          description
+        }
+        this.props.closeDialog('edit', data);
       }
-      this.props.closeDialog('edit', data);
+      this.setState({ id: 0 });
     }
 
-    this.setState({ id: 0 });
 
   }
 
@@ -82,14 +95,25 @@ class DialogForm extends Component {
     const { t } = this.props;
     return (
       <Form>
-        <FormGroup>
+        <Row>
-          <Label>{this.props.t('nameRole')}</Label>
+          <Col md={12}>
-          <Input type="text" value={this.state.name} onChange={(e) => this.setState({ name: e.target.value })} placeholder={this.props.t('inputName')} />
+            <span style={{ color: "red" }}>*</span> Wajib diisi.
-        </FormGroup>
+          </Col>
-        <FormGroup>
+        </Row>
-          <Label>{this.props.t('description')}</Label>
+        <Row>
-          <Input type="text" value={this.state.description} onChange={(e) => this.setState({ description: e.target.value })} placeholder={this.props.t('inputDescription')} />
+          <Col md={12}>
-        </FormGroup>
+            <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>
     )
   }