From 0817dd3df9ba20ed61299cf09d0ec878298f64f7 Mon Sep 17 00:00:00 2001 From: wahyuun Date: Mon, 16 Oct 2023 10:59:54 +0700 Subject: [PATCH 1/5] set division color in chart --- src/views/Dashboard/DashboardBOD.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/views/Dashboard/DashboardBOD.js b/src/views/Dashboard/DashboardBOD.js index 110fb0d..87625f3 100644 --- a/src/views/Dashboard/DashboardBOD.js +++ b/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"], - backgroundColor: ["#023E8A", "#C851B7", "#FD7034", "#3A0CA3", "#A36A16"], + borderColor: PROJECT_PER_DIVISION ? PROJECT_PER_DIVISION.map((item, idx) => item.color) : [], + backgroundColor: PROJECT_PER_DIVISION ? PROJECT_PER_DIVISION.map((item, idx) => item.color) : [], borderWidth: 2, borderSkipped: false }, From c9267b0a424fd77ea61bb121cc12742c644ef43e Mon Sep 17 00:00:00 2001 From: wahyuun Date: Mon, 16 Oct 2023 11:00:22 +0700 Subject: [PATCH 2/5] add form color --- src/views/SimproV2/Divisi/DialogForm.js | 59 ++++++++++++++++--------- 1 file changed, 38 insertions(+), 21 deletions(-) diff --git a/src/views/SimproV2/Divisi/DialogForm.js b/src/views/SimproV2/Divisi/DialogForm.js index 27ba40d..62ce6c2 100644 --- a/src/views/SimproV2/Divisi/DialogForm.js +++ b/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 - - - - - - - + + + + + + + @@ -114,6 +123,14 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi + + + + + setColor(e.color)} /> + + + ) } From 7729cd0a6a44c813786e2dfeca22bcb4e8a6580a Mon Sep 17 00:00:00 2001 From: wahyuun Date: Mon, 16 Oct 2023 11:00:53 +0700 Subject: [PATCH 3/5] add select color in table --- src/views/SimproV2/Divisi/index.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/views/SimproV2/Divisi/index.js b/src/views/SimproV2/Divisi/index.js index 16b43bd..17e576a 100644 --- a/src/views/SimproV2/Divisi/index.js +++ b/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 }) => { {n.name} - {n.description} + {n.description ?? '-'} + {n.color != null ? ( + + + + + + ): ( + No color set + )} ) })} From 4ce0ebbfdf81646ad4de6c63b18c340c80118a7a Mon Sep 17 00:00:00 2001 From: wahyuun Date: Mon, 16 Oct 2023 11:01:26 +0700 Subject: [PATCH 4/5] add js color picker --- src/views/SimproV2/Divisi/InputColor.js | 46 +++++++++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 src/views/SimproV2/Divisi/InputColor.js diff --git a/src/views/SimproV2/Divisi/InputColor.js b/src/views/SimproV2/Divisi/InputColor.js new file mode 100644 index 0000000..ff2f865 --- /dev/null +++ b/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 = ( +
+ +
+ ); + + return ( + <> + setInternalColor(e.target.value)} + suffix={ + + + + } + /> + + ); +} + From d8dccd1c4bf92d0bffabd08a8fceff00a1c567e2 Mon Sep 17 00:00:00 2001 From: wahyuun Date: Mon, 16 Oct 2023 11:01:51 +0700 Subject: [PATCH 5/5] add css divisi color picker --- src/views/SimproV2/Divisi/styles.css | 41 ++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 src/views/SimproV2/Divisi/styles.css diff --git a/src/views/SimproV2/Divisi/styles.css b/src/views/SimproV2/Divisi/styles.css new file mode 100644 index 0000000..d48cce6 --- /dev/null +++ b/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; +} +