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) => {
@@ -23,9 +27,11 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
 			setId(dataEdit.id)
 			setDescription(dataEdit.description)
 			setName(dataEdit.name)
-			setParent(dataEdit.parent)
+      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 = () => {
@@ -91,22 +100,22 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
 						</FormGroup>
           </Col>
           <Col md={6}>
-						<FormGroup>
-							<Label className="capitalize">{t('Parent Division')}</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>
+            <FormGroup>
+              <Label className="capitalize">{t('Parent Division')}</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>
@@ -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>
 		)
 	}