Merge pull request 'division color picker' (#133) from dev-wahyun into staging

Reviewed-on: ordo/adw-frontend#133

src/views/Dashboard/DashboardBOD.js

@@ -613,8 +613,8 @@ const DashboardBOD = () => {
 											label: "",
 											// data: [7, 2, 4, 3],
 											data: PROJECT_PER_DIVISION ? PROJECT_PER_DIVISION.map((item, idx) => item.total) : [],
-											borderColor: ["#023E8A", "#C851B7", "#FD7034", "#3A0CA3", "#A36A16"],
+											borderColor: PROJECT_PER_DIVISION ? PROJECT_PER_DIVISION.map((item, idx) => item.color) : [],
-											backgroundColor: ["#023E8A", "#C851B7", "#FD7034", "#3A0CA3", "#A36A16"],
+											backgroundColor: PROJECT_PER_DIVISION ? PROJECT_PER_DIVISION.map((item, idx) => item.color) : [],
 											borderWidth: 2,
 											borderSkipped: false
 										},

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>
+            <FormGroup>
-							<Label className="capitalize">{t('Parent Division')}</Label>
+              <Label className="capitalize">{t('Parent Division')}</Label>
-							<Select showSearch
+              <Select showSearch
-								value={parent}
+                value={parent}
-								onChange={onChangeParent}
+                onChange={onChangeParent}
-								style={{ width: '100%' }}
+                style={{ width: '100%' }}
-								filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())}
+                filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())}
-							>
+              >
-								{dataDivisions.map((res, idx) => (
+                {dataDivisions.map((res, idx) => (
-									<Option key={res['id']} value={res['id']}>{res['displayName']}</Option>
+                  <Option key={res['id']} value={res['id']}>{res['displayName']}</Option>
-								))}
+                ))}
-							</Select>
+              </Select>
-						</FormGroup>
+            </FormGroup>
-					</Col>
+          </Col>
-				</Row>
+        </Row>
-				<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>
 		)
 	}

src/views/SimproV2/Divisi/InputColor.js

@@ -0,0 +1,46 @@
+import React from "react";
+import Input from "antd/lib/input";
+import Button from "antd/lib/button";
+import Dropdown from "antd/lib/dropdown";
+import { Panel } from 'rc-color-picker'
+import "antd/dist/antd.css";
+import "./styles.css";
+
+export default function InputColor(props) {
+  const { color, onChange } = props;
+
+  const [internalColor, setInternalColor] = React.useState(color);
+
+  const handleChange = (color) => {
+    setInternalColor(color.color);
+
+    if (onChange) {
+      onChange(color);
+    }
+  };
+
+  const overlay = (
+    <div>
+      <Panel
+        color={internalColor}
+        enableAlpha={false}
+        onChange={handleChange}
+      />
+    </div>
+  );
+
+  return (
+    <>
+      <Input
+        value={internalColor || ""}
+        onChange={(e) => setInternalColor(e.target.value)}
+        suffix={
+          <Dropdown trigger={["click"]} overlay={overlay}>
+            <Button style={{ background: internalColor }}> </Button>
+          </Dropdown>
+        }
+      />
+    </>
+  );
+}
+

src/views/SimproV2/Divisi/index.js

@@ -25,6 +25,7 @@ const config = {
 const column = [
 	{ name: "Nama" },
 	{ name: "Deskripsi" },
+	{ name: "Color" },
 ]
 
 const ProjectType = ({ params }) => {
@@ -99,7 +100,7 @@ const ProjectType = ({ params }) => {
 			"orders": {
 				"ascending": true,
 				"columns": [
-					'id'
+					'name'
 				]
 			},
 			"paging": {
@@ -351,7 +352,16 @@ const ProjectType = ({ params }) => {
 											</Tooltip>
 										</td>
 										<td>{n.name}</td>
-										<td>{n.description}</td>
+                    <td>{n.description ?? '-'}</td>
+                    {n.color != null ? (
+                      <td>
+                        <Tooltip title={n.color}>
+                          <span className="fa fa-square" style={{ color: n.color }}></span>
+                        </Tooltip>
+                      </td>
+                    ): (
+                      <td><small style={{ color:"grey",fontStyle:"italic" }}>No color set</small></td>
+                     )}
 									</tr>
 								)
 							})}

src/views/SimproV2/Divisi/styles.css

@@ -0,0 +1,41 @@
+.App {
+  font-family: sans-serif;
+  padding: 20px;
+}
+
+h2 {
+  margin-top: 40px;
+}
+
+.rc-color-picker-panel {
+  border: 1px solid #ccc;
+}
+.rc-color-picker-panel-inner {
+  border: none;
+  box-shadow: none;
+}
+.rc-color-picker-panel-board-hsv {
+  border-radius: 12px;
+  outline: none;
+}
+.rc-color-picker-panel-board-value {
+  border: none;
+  border-radius: 12px;
+}
+.rc-color-picker-panel-board-saturation {
+  border: none;
+  border-radius: 12px;
+}
+.rc-color-picker-panel-ribbon {
+  border-radius: 12px;
+}
+.rc-color-picker-panel-wrap-preview {
+  border-radius: 12px;
+}
+.rc-color-picker-panel-preview span {
+  border-radius: 12px;
+}
+.rc-color-picker-panel-preview input {
+  border-radius: 12px;
+}
+