Yusuf
2 years ago
9 changed files with 240 additions and 344 deletions
@ -1,121 +1,90 @@
|
||||
import React, { useEffect, useState } from 'react' |
||||
import { |
||||
Modal, ModalHeader, ModalBody, ModalFooter, |
||||
Button, Form, FormGroup, Label, Input, Col, Row |
||||
Modal, ModalHeader, ModalBody, ModalFooter, |
||||
Button, Form, FormGroup, Label, Input, Col, Row |
||||
} from 'reactstrap'; |
||||
import { DatePicker, Tooltip, Select } from 'antd'; |
||||
import { formatRupiah, formatNumber } from '../../../const/CustomFunc' |
||||
import moment from 'moment'; |
||||
import 'antd/dist/antd.css'; |
||||
const { Option } = Select |
||||
import InputColor from "./InputColor"; |
||||
import "./styles.css"; |
||||
import "rc-color-picker/assets/index.css"; |
||||
|
||||
const DialogForm = ({openDialog, closeDialog, toggleDialog, typeDialog, dataEdit}) => { |
||||
const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit }) => { |
||||
const [id, setId] = useState(0) |
||||
const [projectType, setProjectType] = useState('') |
||||
const [uom, setUom] = useState('') |
||||
const [description, setDescription] = useState('') |
||||
const [unitPrice, setUnitPrice] = useState() |
||||
const [color, setColor] = useState('') |
||||
|
||||
|
||||
|
||||
|
||||
useEffect(()=> { |
||||
if(typeDialog==="Edit"){ |
||||
useEffect(() => { |
||||
if (typeDialog === "Edit") { |
||||
console.log("cel data Edit", dataEdit) |
||||
setId(dataEdit.id) |
||||
setDescription(dataEdit.description) |
||||
setUnitPrice(dataEdit.unit_price) |
||||
setUom(dataEdit.uom) |
||||
setProjectType(dataEdit.name) |
||||
|
||||
}else{ |
||||
setColor(dataEdit.color) |
||||
} else { |
||||
setId(0) |
||||
setColor('') |
||||
setProjectType('') |
||||
} |
||||
},[dataEdit,openDialog]) |
||||
}, [dataEdit, openDialog]) |
||||
|
||||
const handleSave = () => { |
||||
let data = ''; |
||||
if(typeDialog==="Save"){ |
||||
data = { |
||||
name: projectType, |
||||
description |
||||
} |
||||
|
||||
closeDialog('save', data); |
||||
}else{ |
||||
data = { |
||||
id, |
||||
name: projectType,
|
||||
description |
||||
} |
||||
closeDialog('edit', data); |
||||
let data = ''; |
||||
if (typeDialog === "Save") { |
||||
data = { |
||||
name: projectType, |
||||
color |
||||
} |
||||
setId(0) |
||||
setDescription('') |
||||
|
||||
closeDialog('save', data); |
||||
} else { |
||||
data = { |
||||
id, |
||||
name: projectType, |
||||
color |
||||
} |
||||
closeDialog('edit', data); |
||||
} |
||||
setId(0) |
||||
} |
||||
|
||||
const handleCancel = () => { |
||||
closeDialog('cancel', 'none') |
||||
setId(0) |
||||
|
||||
setDescription('') |
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const renderForm = () => { |
||||
return( |
||||
return ( |
||||
<Form> |
||||
<Row> |
||||
<Col md={6}> |
||||
<FormGroup> |
||||
<Label className="capitalize">Project Type</Label> |
||||
<Input type="text" value={projectType} onChange={(e)=> setProjectType(e.target.value)} placeholder={`Input material name...`}/> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col md={6}> |
||||
<FormGroup> |
||||
<Label className="capitalize">Description</Label> |
||||
<Input row="4" type="textarea" value={description} onChange={(e)=> setDescription(e.target.value)} placeholder={`Description ...`} /> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col md={6}> |
||||
<FormGroup> |
||||
<Label className="capitalize">Phase</Label> |
||||
<Input type="text" value={projectType} onChange={(e) => setProjectType(e.target.value)} /> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col md={6}> |
||||
<FormGroup> |
||||
<Label className="capitalize">Warna</Label> |
||||
<InputColor value={color} onChange={(e) => setColor(e.color)} /> |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
</Form> |
||||
) |
||||
} |
||||
|
||||
|
||||
return ( |
||||
<> |
||||
<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}> |
||||
<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog=="Save" ? `Add` : "Edit"} Resource</ModalHeader> |
||||
<ModalBody> |
||||
<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}> |
||||
<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Save" ? `Add` : "Edit"} data</ModalHeader> |
||||
<ModalBody> |
||||
{renderForm()} |
||||
</ModalBody> |
||||
<ModalFooter> |
||||
<Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '} |
||||
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button> |
||||
</ModalFooter> |
||||
</Modal> |
||||
|
||||
{/* <DialogMap |
||||
openDialog={openDialogMap} |
||||
closeDialog={handleCloseDialogMap} |
||||
toggleDialog={() => toggleMapDialog} |
||||
dataEdit={dataEdit} |
||||
workArea_={workArea} |
||||
lat_={lat} |
||||
lon_={lon} |
||||
radius_={radius} |
||||
/> */} |
||||
</ModalBody> |
||||
<ModalFooter> |
||||
<Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '} |
||||
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button> |
||||
</ModalFooter> |
||||
</Modal> |
||||
</> |
||||
) |
||||
|
||||
} |
||||
|
||||
export default DialogForm; |
||||
@ -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