add form color

src/views/SimproV2/Divisi/DialogForm.js

@@ -6,12 +6,16 @@ import {
 import { Select } from 'antd';
 import 'antd/dist/antd.css';
 import { useTranslation } from 'react-i18next';
+import InputColor from "./InputColor";
+import "./styles.css";
+import "rc-color-picker/assets/index.css";
 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 [color, setColor] = useState('')
 	const { t } = useTranslation()
 
 	const onChangeParent = (val) => {
@@ -24,8 +28,10 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
 			setDescription(dataEdit.description)
 			setName(dataEdit.name)
       setParent(dataEdit.parent)
+      setColor(dataEdit.color)
 		} else {
 			setId(0)
+      setColor('')
 		}
 	}, [dataEdit, openDialog])
 
@@ -42,17 +48,19 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
     if (!err) {
       if (typeDialog === "Save") {
         data = {
-          name: name,
+          name,
           description,
-          parent
+          parent,
+          color
         }
         closeDialog('save', data);
       } else {
         data = {
           id,
-          name: name,
+          name,
           description,
-          parent
+          parent,
+          color
         }
         closeDialog('edit', data);
       }
@@ -60,6 +68,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
       setDescription('')
       setName('')
       setParent(null)
+      setColor('')
     }
 	}
 	const handleCancel = () => {
@@ -114,6 +123,14 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
 						</FormGroup>
 					</Col>
 				</Row>
+        <Row>
+          <Col md={6}>
+            <FormGroup>
+              <Label className="capitalize">{t('color')}</Label>
+              <InputColor value={color} color={color} onChange={(e) => setColor(e.color)} />
+            </FormGroup>
+          </Col>
+        </Row>
 			</Form>
 		)
 	}