From 8a45d7f5bbbd569c024810695bf862f0a2dafef1 Mon Sep 17 00:00:00 2001
From: wahyuun <wahyumind01@gmail.com>
Date: Mon, 18 Sep 2023 11:00:52 +0700
Subject: [PATCH] add validation

---
 src/views/SimproV2/Divisi/DialogForm.js | 254 +++++++++++++-----------
 1 file changed, 137 insertions(+), 117 deletions(-)

diff --git a/src/views/SimproV2/Divisi/DialogForm.js b/src/views/SimproV2/Divisi/DialogForm.js
index 249e58b..c32e621 100644
--- a/src/views/SimproV2/Divisi/DialogForm.js
+++ b/src/views/SimproV2/Divisi/DialogForm.js
@@ -1,117 +1,137 @@
-import React, { useEffect, useState } from 'react'
-import {
-	Modal, ModalHeader, ModalBody, ModalFooter,
-	Button, Form, FormGroup, Label, Input, Col, Row
-} from 'reactstrap';
-import { Select } from 'antd';
-import 'antd/dist/antd.css';
-import { useTranslation } from 'react-i18next';
-const { Option } = Select
-const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, dataDivisions }) => {
-	const [id, setId] = useState(0)
-	const [name, setName] = useState('')
-	const [parent, setParent] = useState(null)
-	const [description, setDescription] = useState('')
-	const { t } = useTranslation()
-
-	const onChangeParent = (val) => {
-		setParent(val)
-	}
-
-	useEffect(() => {
-		if (typeDialog === "Edit") {
-			setId(dataEdit.id)
-			setDescription(dataEdit.description)
-			setName(dataEdit.name)
-			setParent(dataEdit.parent)
-		} else {
-			setId(0)
-		}
-	}, [dataEdit, openDialog])
-
-	const handleSave = () => {
-		let data = '';
-		if (typeDialog === "Save") {
-			data = {
-				name: name,
-				description,
-				parent
-			}
-			closeDialog('save', data);
-		} else {
-			data = {
-				id,
-				name: name,
-				description,
-				parent
-			}
-			closeDialog('edit', data);
-		}
-		setId(0)
-		setDescription('')
-	}
-	const handleCancel = () => {
-		closeDialog('cancel', 'none')
-		setId(0)
-		setDescription('')
-	}
-
-	const renderForm = () => {
-		return (
-			<Form>
-				<Row>
-					<Col md={6}>
-						<FormGroup>
-							<Label className="capitalize">{t('name')}</Label>
-							<Input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder={t('inputName')} />
-						</FormGroup>
-					</Col>
-				</Row>
-				<Row>
-					<Col md={6}>
-						<FormGroup>
-							<Label className="capitalize">{t('nameDivision')}</Label>
-							<Select showSearch
-								value={parent}
-								onChange={onChangeParent}
-								style={{ width: '100%' }}
-								filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())}
-							>
-								{dataDivisions.map((res, idx) => (
-									<Option key={res['id']} value={res['id']}>{res['displayName']}</Option>
-								))}
-							</Select>
-						</FormGroup>
-					</Col>
-				</Row>
-				<Row>
-					<Col md={6}>
-						<FormGroup>
-							<Label className="capitalize">{t('description')}</Label>
-							<Input row="4" type="textarea" value={description} onChange={(e) => setDescription(e.target.value)} placeholder={t('inputDescription')} />
-						</FormGroup>
-					</Col>
-				</Row>
-			</Form>
-		)
-	}
-
-
-	return (
-		<>
-			<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}>
-				<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Save" ? `Add` : "Edit"} {t('division')}</ModalHeader>
-				<ModalBody>
-					{renderForm()}
-				</ModalBody>
-				<ModalFooter>
-					<Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '}
-					<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>{t('cancel')}</Button>
-				</ModalFooter>
-			</Modal>
-		</>
-	)
-
-}
-
-export default DialogForm;
+import React, { useEffect, useState } from 'react'
+import {
+	Modal, ModalHeader, ModalBody, ModalFooter,
+	Button, Form, FormGroup, Label, Input, Col, Row
+} from 'reactstrap';
+import { Select } from 'antd';
+import 'antd/dist/antd.css';
+import { useTranslation } from 'react-i18next';
+const { Option } = Select
+const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, dataDivisions }) => {
+	const [id, setId] = useState(0)
+	const [name, setName] = useState('')
+	const [parent, setParent] = useState(null)
+	const [description, setDescription] = useState('')
+	const { t } = useTranslation()
+
+	const onChangeParent = (val) => {
+		setParent(val)
+	}
+
+	useEffect(() => {
+		if (typeDialog === "Edit") {
+			setId(dataEdit.id)
+			setDescription(dataEdit.description)
+			setName(dataEdit.name)
+			setParent(dataEdit.parent)
+		} else {
+			setId(0)
+		}
+	}, [dataEdit, openDialog])
+
+  const validation = () => {
+    if (!name || name === "") {
+      alert("Division Name cannot be empty!");
+      return true;
+    }
+  }
+  const handleSave = () => {
+    let data = '';
+    const err = validation();
+
+    if (!err) {
+      if (typeDialog === "Save") {
+        data = {
+          name: name,
+          description,
+          parent
+        }
+        closeDialog('save', data);
+      } else {
+        data = {
+          id,
+          name: name,
+          description,
+          parent
+        }
+        closeDialog('edit', data);
+      }
+      setId(0)
+      setDescription('')
+      setName('')
+    }
+	}
+	const handleCancel = () => {
+		closeDialog('cancel', 'none')
+		setId(0)
+		setDescription('')
+		setName('')
+	}
+
+	const renderForm = () => {
+		return (
+			<Form>
+        <Row>
+            <Col md={12}>
+              <span style={{ color: "red" }}>*</span> Wajib diisi.
+            </Col>
+        </Row>
+				<Row>
+					<Col md={6}>
+						<FormGroup>
+							<Label className="capitalize">{t('name')}<span style={{ color: "red" }}>*</span></Label>
+							<Input
+								type="text"
+								value={name}
+								onChange={(e) => setName(e.target.value)}
+								placeholder={t('inputName')}
+							/>
+						</FormGroup>
+          </Col>
+          <Col md={6}>
+						<FormGroup>
+							<Label className="capitalize">{t('nameDivision')}</Label>
+							<Select showSearch
+								value={parent}
+								onChange={onChangeParent}
+								style={{ width: '100%' }}
+								filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())}
+							>
+								{dataDivisions.map((res, idx) => (
+									<Option key={res['id']} value={res['id']}>{res['displayName']}</Option>
+								))}
+							</Select>
+						</FormGroup>
+					</Col>
+				</Row>
+				<Row>
+					<Col md={12}>
+						<FormGroup>
+							<Label className="capitalize">{t('description')}</Label>
+							<Input row="4" type="textarea" value={description} onChange={(e) => setDescription(e.target.value)} placeholder={t('inputDescription')} />
+						</FormGroup>
+					</Col>
+				</Row>
+			</Form>
+		)
+	}
+
+
+	return (
+		<>
+			<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}>
+				<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Save" ? `Add` : "Edit"} {t('division')}</ModalHeader>
+				<ModalBody>
+					{renderForm()}
+				</ModalBody>
+				<ModalFooter>
+					<Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '}
+					<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>{t('cancel')}</Button>
+				</ModalFooter>
+			</Modal>
+		</>
+	)
+
+}
+
+export default DialogForm;