Yusuf
2 years ago
9 changed files with 240 additions and 344 deletions
@ -1,217 +0,0 @@ |
|||||||
import React, { useEffect, useMemo, useState } from 'react' |
|
||||||
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; |
|
||||||
import { Button } from 'reactstrap'; |
|
||||||
import { Table, Tooltip } from 'antd'; |
|
||||||
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
|
||||||
import 'antd/dist/antd.css'; |
|
||||||
import SweetAlert from 'react-bootstrap-sweetalert'; |
|
||||||
import { TEMPLATE_GANTT_ADD, TEMPLATE_GANTT_DELETE, TEMPLATE_GANTT_EDIT, TEMPLATE_GANTT_TREE } from '../../../const/ApiConst'; |
|
||||||
import axios from "../../../const/interceptorApi" |
|
||||||
import DialogForm from './DialogFormInitial'; |
|
||||||
|
|
||||||
const DialogInitialGantt = ({ openDialog, closeDialog, toggleDialog, idTypeProject }) => { |
|
||||||
const token = window.localStorage.getItem('token'); |
|
||||||
const config = { |
|
||||||
headers: |
|
||||||
{ |
|
||||||
Authorization: `Bearer ${token}`, |
|
||||||
"Content-type": `application/json` |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
const [dataTable, setDataTable] = useState([]) |
|
||||||
const [alertDelete, setAlertDelete] = useState(false) |
|
||||||
const [idDelete, setIdDelete] = useState(0) |
|
||||||
const [idActivity, setIdActivity] = useState(0) |
|
||||||
const [openDialogForm, setOpenDialogForm] = useState(false) |
|
||||||
const [typeDialog, setTypeDialog] = useState("add") |
|
||||||
const [dataEdit, setDataEdit] = useState([]) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
if (idTypeProject && idTypeProject > 0) { |
|
||||||
getDataInitial(); |
|
||||||
} |
|
||||||
}, [idTypeProject]) |
|
||||||
|
|
||||||
const getDataInitial = async () => { |
|
||||||
const url = TEMPLATE_GANTT_TREE(idTypeProject) |
|
||||||
const result = await axios |
|
||||||
.get(url, config) |
|
||||||
.then(res => res) |
|
||||||
.catch((error) => error.response); |
|
||||||
if (result && result.data && result.data.code == 200) { |
|
||||||
setDataTable(result.data.data); |
|
||||||
} else { |
|
||||||
NotificationManager.error('Gagal mengambil data, Silahkan coba lagi!!', 'Failed'); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const handleDelete = async (id) => { |
|
||||||
await setIdDelete(id) |
|
||||||
await setAlertDelete(true) |
|
||||||
} |
|
||||||
|
|
||||||
const onConfirmDelete = async () => { |
|
||||||
let url = TEMPLATE_GANTT_DELETE(idDelete); |
|
||||||
|
|
||||||
const result = await axios.delete(url, config) |
|
||||||
.then(res => res) |
|
||||||
.catch((error) => error.response); |
|
||||||
|
|
||||||
if (result && result.data && result.data.code === 200) { |
|
||||||
getDataInitial() |
|
||||||
setIdDelete(0) |
|
||||||
setAlertDelete(false) |
|
||||||
NotificationManager.success(`Activity berhasil dihapus!`, 'Success!!'); |
|
||||||
} else { |
|
||||||
setIdDelete(0) |
|
||||||
setAlertDelete(false) |
|
||||||
NotificationManager.error(`Activity gagal dihapus!}`, 'Failed!!'); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const cancelDelete = () => { |
|
||||||
setIdDelete(0) |
|
||||||
setAlertDelete(false) |
|
||||||
} |
|
||||||
|
|
||||||
const handleAdd = async () => { |
|
||||||
setIdActivity(0) |
|
||||||
await setTypeDialog("add") |
|
||||||
setOpenDialogForm(true) |
|
||||||
} |
|
||||||
|
|
||||||
const handleEdit = async (data) => { |
|
||||||
await setDataEdit(data) |
|
||||||
if (data.parent_id) { |
|
||||||
await setIdActivity(data.parent_id); |
|
||||||
} |
|
||||||
await setTypeDialog("edit") |
|
||||||
setOpenDialogForm(true) |
|
||||||
} |
|
||||||
|
|
||||||
const handleAddWithParent = async (id) => { |
|
||||||
setIdActivity(id) |
|
||||||
await setTypeDialog("add") |
|
||||||
setOpenDialogForm(true) |
|
||||||
} |
|
||||||
|
|
||||||
const closeDialogForm = (type, data) => { |
|
||||||
if (type == "save") { |
|
||||||
saveActivity(data) |
|
||||||
} else if (type == "edit") { |
|
||||||
updateActivity(data) |
|
||||||
} |
|
||||||
setIdActivity(0) |
|
||||||
setOpenDialogForm(false) |
|
||||||
} |
|
||||||
|
|
||||||
const toggleDialogForm = () => { |
|
||||||
if (openDialogForm) { |
|
||||||
setIdActivity(0) |
|
||||||
} |
|
||||||
setOpenDialogForm(!openDialogForm); |
|
||||||
} |
|
||||||
|
|
||||||
const saveActivity = async (data) => { |
|
||||||
const result = await axios.post(TEMPLATE_GANTT_ADD, data, config) |
|
||||||
.then(res => res) |
|
||||||
.catch((error) => error.response); |
|
||||||
|
|
||||||
if (result && result.data && result.data.code === 200) { |
|
||||||
getDataInitial() |
|
||||||
NotificationManager.success(`Data activity berhasil ditambah`, 'Success!!'); |
|
||||||
} else { |
|
||||||
NotificationManager.error(`${result.data.message}`, 'Failed!!'); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const updateActivity = async (data) => { |
|
||||||
const url = TEMPLATE_GANTT_EDIT(data.id) |
|
||||||
const result = await axios.put(url, data, config) |
|
||||||
.then(res => res) |
|
||||||
.catch((error) => error.response); |
|
||||||
|
|
||||||
if (result && result.data && result.data.code === 200) { |
|
||||||
getDataInitial() |
|
||||||
NotificationManager.success(`Data activity berhasil diedit`, 'Success!!'); |
|
||||||
} else { |
|
||||||
NotificationManager.error(`${result.data.message}`, 'Failed!!'); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const renderTable = useMemo(() => { |
|
||||||
const columns = [ |
|
||||||
{ |
|
||||||
title: 'Action', |
|
||||||
dataIndex: '', |
|
||||||
key: 'id', |
|
||||||
className: "nowrap", |
|
||||||
render: (text, record) => |
|
||||||
<> |
|
||||||
<Tooltip title="Delete Activity"> |
|
||||||
<Button size="small" size={"sm"} color='danger' onClick={() => handleDelete(text.id)}><i className="fa fa-trash"></i></Button> |
|
||||||
</Tooltip>{" "}<Tooltip title="Add Activity"> |
|
||||||
<Button size="small" size={"sm"} color='primary' onClick={() => handleAddWithParent(text.id)}><i className="fa fa-plus"></i></Button> |
|
||||||
</Tooltip>{" "}<Tooltip title="Edit Activity"> |
|
||||||
<Button size="small" size={"sm"} color='warning' onClick={() => handleEdit(text)}><i className="fa fa-edit"></i></Button> |
|
||||||
</Tooltip> |
|
||||||
</> |
|
||||||
, |
|
||||||
}, |
|
||||||
{ title: 'Nama Activity', dataIndex: 'name_activity', key: 'name_activity' }, |
|
||||||
]; |
|
||||||
|
|
||||||
return ( |
|
||||||
<Table |
|
||||||
size="small" |
|
||||||
columns={columns} |
|
||||||
dataSource={dataTable} |
|
||||||
pagination={{ position: ["bottomLeft"] }} |
|
||||||
/> |
|
||||||
) |
|
||||||
}, [dataTable]) |
|
||||||
|
|
||||||
|
|
||||||
return (<> |
|
||||||
<NotificationContainer /> |
|
||||||
<SweetAlert |
|
||||||
show={alertDelete} |
|
||||||
warning |
|
||||||
showCancel |
|
||||||
confirmBtnText="Delete" |
|
||||||
confirmBtnBsStyle="danger" |
|
||||||
title={`Are you sure?`} |
|
||||||
onConfirm={onConfirmDelete} |
|
||||||
onCancel={cancelDelete} |
|
||||||
focusCancelBtn |
|
||||||
> |
|
||||||
Delete this data |
|
||||||
</SweetAlert> |
|
||||||
<DialogForm |
|
||||||
openDialog={openDialogForm} |
|
||||||
closeDialog={closeDialogForm} |
|
||||||
toggleDialog={toggleDialogForm} |
|
||||||
idActivity={idActivity} |
|
||||||
typeDialog={typeDialog} |
|
||||||
dataEdit={dataEdit} |
|
||||||
projectTypeId={idTypeProject} |
|
||||||
/> |
|
||||||
<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}> |
|
||||||
{/* <ModalHeader className="capitalize" toggle={closeDialog}>Initial Gantt</ModalHeader> */} |
|
||||||
<ModalHeader className="capitalize withBtn" toggle={closeDialog} style={{ width: "100%" }}> |
|
||||||
<div>Template Gantt</div> <Button onClick={handleAdd} size='sm' color="primary"><i className='fa fa-plus'></i></Button> |
|
||||||
</ModalHeader> |
|
||||||
<ModalBody> |
|
||||||
{renderTable} |
|
||||||
</ModalBody> |
|
||||||
<ModalFooter> |
|
||||||
<Button className="capitalize" color="secondary" onClick={closeDialog}>Close</Button> |
|
||||||
</ModalFooter> |
|
||||||
</Modal> |
|
||||||
</> |
|
||||||
) |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
export default DialogInitialGantt; |
|
||||||
@ -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> |
||||||
|
} |
||||||
|
/> |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
@ -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; |
||||||
|
} |
||||||
|
|
||||||
Loading…
Reference in new issue