wahyuun
1 year ago
1 changed files with 293 additions and 276 deletions
@ -1,276 +1,293 @@ |
|||||||
import React, { useEffect, useState, useMemo } from 'react' |
import React, { useEffect, useState, useMemo } from 'react' |
||||||
import { Modal, ModalHeader, ModalBody, ModalFooter, Breadcrumb, BreadcrumbItem} from 'reactstrap'; |
import { Modal, ModalHeader, ModalBody, ModalFooter, Breadcrumb, BreadcrumbItem} from 'reactstrap'; |
||||||
import { Button } from 'reactstrap'; |
import { Button } from 'reactstrap'; |
||||||
import { Table, Tooltip } from 'antd'; |
import { Table, Tooltip } from 'antd'; |
||||||
import 'antd/dist/antd.css'; |
import 'antd/dist/antd.css'; |
||||||
import moment from 'moment'; |
import moment from 'moment'; |
||||||
import SweetAlert from 'react-bootstrap-sweetalert'; |
import SweetAlert from 'react-bootstrap-sweetalert'; |
||||||
import { VERSION_GANTT_DELETE, VERSION_GANTT_SEARCH, USER_LIST } from '../../../const/ApiConst'; |
import { VERSION_GANTT_DELETE, VERSION_GANTT_SEARCH, USER_LIST } from '../../../const/ApiConst'; |
||||||
import axios from "../../../const/interceptorApi" |
import axios from "../../../const/interceptorApi" |
||||||
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
||||||
import DialogForm from './DialogFormGantt'; |
import DialogForm from './DialogFormGantt'; |
||||||
import DialogUserGantt from './DialogUserGantt'; |
import DialogUserGantt from './DialogUserGantt'; |
||||||
|
|
||||||
import { Link } from 'react-router-dom'; |
import { Link } from 'react-router-dom'; |
||||||
|
|
||||||
const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName, hierarchyId, hierarchyName, openDialogHierarchy }) => { |
const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName, hierarchyId, hierarchyName, openDialogHierarchy }) => { |
||||||
const token = localStorage.getItem("token") |
const token = localStorage.getItem("token") |
||||||
const HEADER = { |
const HEADER = { |
||||||
headers: { |
headers: { |
||||||
"Content-Type": "application/json", |
"Content-Type": "application/json", |
||||||
"Authorization": `Bearer ${token}` |
"Authorization": `Bearer ${token}` |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
const [openDialogForm, setOpenDialogForm] = useState(false) |
const [openDialogForm, setOpenDialogForm] = useState(false) |
||||||
const [openDialogUserGantt, setOpenDialogUserGantt] = useState(false) |
const [openDialogUserGantt, setOpenDialogUserGantt] = useState(false) |
||||||
const [dataGantt, setDataGantt] = useState([]) |
const [dataGantt, setDataGantt] = useState([]) |
||||||
const [alertDelete, setAlertDelete] = useState(false) |
const [alertDelete, setAlertDelete] = useState(false) |
||||||
const [idDelete, setIdDelete] = useState(0) |
const [idDelete, setIdDelete] = useState(0) |
||||||
const [idGantt, setIdGantt] = useState(0) |
const [idGantt, setIdGantt] = useState(0) |
||||||
const [humanResource, setHumanResource] = useState([]) |
const [humanResource, setHumanResource] = useState([]) |
||||||
|
const [dataEdit, setDataEdit] = useState([]) |
||||||
useEffect(() => { |
const [typeDialog, setTypeDialog] = useState('') |
||||||
if (openDialog && hierarchyId > 0 || idTask > 0 && !openDialogHierarchy) { |
|
||||||
getdataGantt(); |
useEffect(() => { |
||||||
} |
if (openDialog && hierarchyId > 0 || idTask > 0 && !openDialogHierarchy) { |
||||||
if (!openDialog) { |
getdataGantt(); |
||||||
setDataGantt([]); |
} |
||||||
} |
if (!openDialog) { |
||||||
}, [hierarchyId, idTask, openDialog]) |
setDataGantt([]); |
||||||
|
} |
||||||
const getDataHumanResource = async () => { |
}, [hierarchyId, idTask, openDialog]) |
||||||
const result = await axios |
|
||||||
.get(USER_LIST, HEADER) |
const getDataHumanResource = async () => { |
||||||
.then(res => res) |
const result = await axios |
||||||
.catch((error) => error.response); |
.get(USER_LIST, HEADER) |
||||||
|
.then(res => res) |
||||||
if (result && result.status == 200) { |
.catch((error) => error.response); |
||||||
setTransferUser(result.data.data); |
|
||||||
} else { |
if (result && result.status == 200) { |
||||||
|
setTransferUser(result.data.data); |
||||||
} |
} else { |
||||||
} |
|
||||||
|
} |
||||||
const setTransferUser = (data) => { |
} |
||||||
const finalData = [] |
|
||||||
data.map((val, index) => { |
const setTransferUser = (data) => { |
||||||
let data = { |
const finalData = [] |
||||||
key: val.id, |
data.map((val, index) => { |
||||||
title: val.name |
let data = { |
||||||
} |
key: val.id, |
||||||
finalData.push(data) |
title: val.name |
||||||
}); |
} |
||||||
setHumanResource(finalData) |
finalData.push(data) |
||||||
} |
}); |
||||||
|
setHumanResource(finalData) |
||||||
|
} |
||||||
const getdataGantt = async () => { |
|
||||||
let payload; |
|
||||||
if (hierarchyId) { |
const getdataGantt = async () => { |
||||||
payload = { |
let payload; |
||||||
"select": ["id", "name_version", "calculation_type", "description", "created_at", "progress"], |
if (hierarchyId) { |
||||||
"columns": [ |
payload = { |
||||||
{ "name": "hierarchy_ftth_id", "logic_operator": "=", "value": hierarchyId, "operator": "AND" } |
"select": ["id", "name_version", "calculation_type", "description", "created_at", "progress"], |
||||||
] |
"columns": [ |
||||||
} |
{ "name": "hierarchy_ftth_id", "logic_operator": "=", "value": hierarchyId, "operator": "AND" } |
||||||
} else { |
] |
||||||
payload = { |
} |
||||||
"select": ["id", "name_version", "calculation_type", "description", "created_at", "progress"], |
} else { |
||||||
"columns": [ |
payload = { |
||||||
{ "name": "proyek_id", "logic_operator": "=", "value": idTask, "operator": "AND" } |
"select": ["id", "name_version", "calculation_type", "description", "created_at", "progress"], |
||||||
] |
"columns": [ |
||||||
} |
{ "name": "proyek_id", "logic_operator": "=", "value": idTask, "operator": "AND" } |
||||||
} |
] |
||||||
const result = await axios |
} |
||||||
.post(VERSION_GANTT_SEARCH, payload, HEADER) |
} |
||||||
.then(res => res) |
const result = await axios |
||||||
.catch((error) => error.response); |
.post(VERSION_GANTT_SEARCH, payload, HEADER) |
||||||
|
.then(res => res) |
||||||
if (result && result.status == 200) { |
.catch((error) => error.response); |
||||||
setDataGantt(result.data.data); |
|
||||||
} else { |
if (result && result.status == 200) { |
||||||
NotificationManager.error(`Data gantt project gagal terload silahkan coba lagi!`, 'Failed!!'); |
setDataGantt(result.data.data); |
||||||
} |
} else { |
||||||
} |
NotificationManager.error(`Data gantt project gagal terload silahkan coba lagi!`, 'Failed!!'); |
||||||
|
} |
||||||
const handleCancel = () => { |
} |
||||||
setDataGantt([]); |
|
||||||
closeDialog('cancel', 'none') |
const handleCancel = () => { |
||||||
} |
setDataGantt([]); |
||||||
|
closeDialog('cancel', 'none') |
||||||
const handleDelete = (id) => { |
} |
||||||
setIdDelete(id) |
|
||||||
setAlertDelete(true) |
const handleDelete = (id) => { |
||||||
} |
setIdDelete(id) |
||||||
|
setAlertDelete(true) |
||||||
const handleUserGant = (id) => { |
} |
||||||
setIdGantt(id) |
|
||||||
setOpenDialogUserGantt(true) |
const handleEdit = (data) => { |
||||||
} |
setDataEdit(data) |
||||||
|
handleOpenDialogForm('Edit'); |
||||||
const RenderTable = useMemo(() => { |
} |
||||||
const columns = [ |
|
||||||
{ |
const handleUserGant = (id) => { |
||||||
title: 'Action', |
setIdGantt(id) |
||||||
dataIndex: '', |
setOpenDialogUserGantt(true) |
||||||
key: 'id', |
} |
||||||
className: "nowrap", |
|
||||||
render: (text, record) => |
const RenderTable = useMemo(() => { |
||||||
<> |
const columns = [ |
||||||
<Tooltip title="Delete Gantt"> |
{ |
||||||
<Button size={"sm"} color='danger' onClick={() => handleDelete(text.id)}><i className="fa fa-trash"></i></Button> |
title: 'Action', |
||||||
</Tooltip>{" "} |
dataIndex: '', |
||||||
<Tooltip title="Gantt Permission"> |
key: 'id', |
||||||
<Button size={"sm"} color='success' onClick={() => handleUserGant(text.id)}><i className="fa fa-users"></i></Button> |
className: "nowrap", |
||||||
</Tooltip>{" "} |
render: (text, record) => |
||||||
<Link to={`/projects/${text.id}/${idTask}/import/activity`}> |
<> |
||||||
{" "}<Tooltip title="Import Activity"> |
<Tooltip title="Delete Gantt"> |
||||||
<Button size={"sm"} color='success'> |
<Button size={"sm"} color='danger' onClick={() => handleDelete(text.id)}><i className="fa fa-trash"></i></Button> |
||||||
<i className="fa fa-file-excel-o"></i> |
</Tooltip>{" "} |
||||||
</Button> |
<Tooltip title="Edit Gantt"> |
||||||
</Tooltip>{" "} |
<Button size={"sm"} color='success' onClick={() => handleEdit(text)}><i className="fa fa-edit"></i></Button> |
||||||
</Link> |
</Tooltip>{" "} |
||||||
|
<Tooltip title="Gantt Permission"> |
||||||
<Link to={`/projects/${text.id}/${idTask}/gantt`}> |
<Button size={"sm"} color='success' onClick={() => handleUserGant(text.id)}><i className="fa fa-users"></i></Button> |
||||||
<Tooltip title="Gantt"> |
</Tooltip>{" "} |
||||||
<Button size={"sm"} color='primary'><i className="fa fa-gears"></i></Button> |
<Link to={`/projects/${text.id}/${idTask}/import/activity`}> |
||||||
</Tooltip></Link>{" "} |
{" "}<Tooltip title="Import Activity"> |
||||||
</> |
<Button size={"sm"} color='success'> |
||||||
, |
<i className="fa fa-file-excel-o"></i> |
||||||
}, |
</Button> |
||||||
{ title: 'Nama', dataIndex: 'name_version', key: 'name_version' }, |
</Tooltip>{" "} |
||||||
{ title: 'Tipe kalkulasi', dataIndex: 'calculation_type', key: 'calculation_type' }, |
</Link> |
||||||
{ title: 'Deskripsi', dataIndex: 'description', key: 'description' }, |
|
||||||
{ title: 'Tanggal dibuat', dataIndex: 'created_at', key: 'created_at', render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY") : "-"}</div>) }, |
<Link to={`/projects/${text.id}/${idTask}/gantt`}> |
||||||
{ title: 'Progress', dataIndex: 'progress', key: 'progress' } |
<Tooltip title="Gantt"> |
||||||
|
<Button size={"sm"} color='primary'><i className="fa fa-gears"></i></Button> |
||||||
]; |
</Tooltip></Link>{" "} |
||||||
|
</> |
||||||
return ( |
, |
||||||
<Table |
}, |
||||||
size="small" |
{ title: 'Nama', dataIndex: 'name_version', key: 'name_version' }, |
||||||
columns={columns} |
{ title: 'Tipe kalkulasi', dataIndex: 'calculation_type', key: 'calculation_type' }, |
||||||
rowKey={"id"} |
{ title: 'Deskripsi', dataIndex: 'description', key: 'description' }, |
||||||
dataSource={dataGantt} |
{ title: 'Tanggal dibuat', dataIndex: 'created_at', key: 'created_at', render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY") : "-"}</div>) }, |
||||||
pagination={{ position: ["bottomLeft"] }} |
{ title: 'Progress', dataIndex: 'progress', key: 'progress' } |
||||||
/> |
|
||||||
) |
]; |
||||||
}, [dataGantt]) |
|
||||||
|
return ( |
||||||
const cancelDelete = () => { |
<Table |
||||||
setAlertDelete(false) |
size="small" |
||||||
setIdDelete(0) |
columns={columns} |
||||||
} |
rowKey={"id"} |
||||||
|
dataSource={dataGantt} |
||||||
const onConfirmDelete = async () => { |
pagination={{ position: ["bottomLeft"] }} |
||||||
let urlDel = VERSION_GANTT_DELETE(idDelete) |
/> |
||||||
const result = await axios.delete(urlDel, HEADER) |
) |
||||||
.then(res => res) |
}, [dataGantt]) |
||||||
.catch((error) => error.response); |
|
||||||
|
const cancelDelete = () => { |
||||||
if (result && result.data && result.data.code === 200) { |
setAlertDelete(false) |
||||||
getdataGantt() |
setIdDelete(0) |
||||||
setIdDelete(0) |
} |
||||||
setAlertDelete(false) |
|
||||||
NotificationManager.success(`Dokumen project berhasil dihapus`, 'Success!!'); |
const onConfirmDelete = async () => { |
||||||
} else { |
let urlDel = VERSION_GANTT_DELETE(idDelete) |
||||||
setIdDelete(0) |
const result = await axios.delete(urlDel, HEADER) |
||||||
setAlertDelete(false) |
.then(res => res) |
||||||
NotificationManager.error(`Dokumen project gagal dihapus`, 'Failed!!'); |
.catch((error) => error.response); |
||||||
} |
|
||||||
} |
if (result && result.data && result.data.code === 200) { |
||||||
|
getdataGantt() |
||||||
const handleOpenDialogForm = () => { |
setIdDelete(0) |
||||||
setOpenDialogForm(true) |
setAlertDelete(false) |
||||||
} |
NotificationManager.success(`Dokumen project berhasil dihapus`, 'Success!!'); |
||||||
|
} else { |
||||||
const toggleDialogForm = () => { |
setIdDelete(0) |
||||||
setOpenDialogForm(!openDialogForm) |
setAlertDelete(false) |
||||||
} |
NotificationManager.error(`Dokumen project gagal dihapus`, 'Failed!!'); |
||||||
|
} |
||||||
const closeDialogForm = (status) => { |
} |
||||||
if (status == "success") { |
|
||||||
getdataGantt() |
const handleOpenDialogForm = async (type) => { |
||||||
NotificationManager.success(`Gantt berhasil dibuat!`, 'Success!!'); |
await setTypeDialog(type); |
||||||
} else if (status == "failed") { |
setOpenDialogForm(true); |
||||||
NotificationManager.error(`Gantt gagal dibuat!`, 'Failed!!'); |
} |
||||||
} |
|
||||||
setOpenDialogForm(false) |
const toggleDialogForm = () => { |
||||||
} |
setOpenDialogForm(!openDialogForm) |
||||||
|
} |
||||||
const toggleDialogUser = () => { |
|
||||||
if (openDialogUserGantt) { |
const closeDialogForm = (status) => { |
||||||
setIdGantt(0) |
if (status == "Save") { |
||||||
} |
getdataGantt() |
||||||
setOpenDialogUserGantt(!openDialogUserGantt) |
NotificationManager.success(`Gantt berhasil dibuat!`, 'Success!!'); |
||||||
} |
}else if (status == "Edit") { |
||||||
|
getdataGantt() |
||||||
const closeDialogUser = (status) => { |
NotificationManager.success(`Gantt berhasil dibubah!`, 'Failed!!'); |
||||||
if (status == "success") { |
}else if (status == "failed") { |
||||||
NotificationManager.success(`Gantt Permission berhasil disimpan!`, 'Success!!'); |
NotificationManager.error(`Gantt gagal dibuat!`, 'Failed!!'); |
||||||
} else if (status == "failed") { |
} |
||||||
NotificationManager.error(`Gantt Permission gagal disimpan!`, 'Failed!!'); |
setDataEdit([]) |
||||||
} |
setOpenDialogForm(false) |
||||||
setOpenDialogUserGantt(false) |
} |
||||||
setIdGantt(0) |
|
||||||
} |
const toggleDialogUser = () => { |
||||||
|
if (openDialogUserGantt) { |
||||||
return ( |
setIdGantt(0) |
||||||
<> |
} |
||||||
<Modal size="xl" isOpen={openDialog} toggle={toggleDialog}> |
setOpenDialogUserGantt(!openDialogUserGantt) |
||||||
<ModalHeader className="capitalize withBtn" toggle={closeDialog} style={{ width: "100%" }}> |
} |
||||||
{hierarchyName ? |
|
||||||
<Breadcrumb> |
const closeDialogUser = (status) => { |
||||||
<BreadcrumbItem><a href="/projects">Project</a></BreadcrumbItem> |
if (status == "success") { |
||||||
<BreadcrumbItem active>{hierarchyName}</BreadcrumbItem> |
NotificationManager.success(`Gantt Permission berhasil disimpan!`, 'Success!!'); |
||||||
</Breadcrumb> |
} else if (status == "failed") { |
||||||
:
|
NotificationManager.error(`Gantt Permission gagal disimpan!`, 'Failed!!'); |
||||||
<div>Gantt Project {proyekName} </div> |
} |
||||||
} |
setOpenDialogUserGantt(false) |
||||||
{!hierarchyId && (<> <Button onClick={handleOpenDialogForm} size='sm' color="primary"><i className='fa fa-plus'></i></Button> |
setIdGantt(0) |
||||||
</> |
} |
||||||
)} |
|
||||||
</ModalHeader> |
return ( |
||||||
<ModalBody> |
<> |
||||||
<div style={{ width: '100%', overflow: "auto" }}> |
<Modal size="xl" isOpen={openDialog} toggle={toggleDialog}> |
||||||
{RenderTable} |
<ModalHeader className="capitalize withBtn" toggle={closeDialog} style={{ width: "100%" }}> |
||||||
</div> |
{hierarchyName ? |
||||||
</ModalBody> |
<Breadcrumb> |
||||||
{/* <ModalFooter> |
<BreadcrumbItem><a href="/projects">Project</a></BreadcrumbItem> |
||||||
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button> |
<BreadcrumbItem active>{hierarchyName}</BreadcrumbItem> |
||||||
</ModalFooter> */} |
</Breadcrumb> |
||||||
</Modal> |
: |
||||||
<NotificationContainer /> |
<div>Gantt Project {proyekName} </div> |
||||||
<SweetAlert |
} |
||||||
show={alertDelete} |
{!hierarchyId && (<> <Button onClick={handleOpenDialogForm} size='sm' color="primary"><i className='fa fa-plus'></i></Button> |
||||||
warning |
</> |
||||||
showCancel |
)} |
||||||
confirmBtnText="Delete" |
</ModalHeader> |
||||||
confirmBtnBsStyle="danger" |
<ModalBody> |
||||||
title={`Are you sure?`} |
<div style={{ width: '100%', overflow: "auto" }}> |
||||||
onConfirm={onConfirmDelete} |
{RenderTable} |
||||||
onCancel={() => cancelDelete()} |
</div> |
||||||
focusCancelBtn |
</ModalBody> |
||||||
> |
{/* <ModalFooter> |
||||||
Delete this data |
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button> |
||||||
</SweetAlert> |
</ModalFooter> */} |
||||||
<DialogForm |
</Modal> |
||||||
idTask={idTask} |
<NotificationContainer /> |
||||||
openDialog={openDialogForm} |
<SweetAlert |
||||||
toggleDialog={toggleDialogForm} |
show={alertDelete} |
||||||
closeDialog={closeDialogForm} |
warning |
||||||
/> |
showCancel |
||||||
|
confirmBtnText="Delete" |
||||||
<DialogUserGantt |
confirmBtnBsStyle="danger" |
||||||
idGantt={idGantt} |
title={`Are you sure?`} |
||||||
openDialog={openDialogUserGantt} |
onConfirm={onConfirmDelete} |
||||||
toggleDialog={toggleDialogUser} |
onCancel={() => cancelDelete()} |
||||||
closeDialog={closeDialogUser} |
focusCancelBtn |
||||||
/> |
> |
||||||
</> |
Delete this data |
||||||
) |
</SweetAlert> |
||||||
|
<DialogForm |
||||||
} |
idTask={idTask} |
||||||
|
openDialog={openDialogForm} |
||||||
export default DialogGantt; |
toggleDialog={toggleDialogForm} |
||||||
|
closeDialog={closeDialogForm} |
||||||
|
typeDialog={typeDialog} |
||||||
|
dataEdit={dataEdit} |
||||||
|
/> |
||||||
|
|
||||||
|
<DialogUserGantt |
||||||
|
idGantt={idGantt} |
||||||
|
openDialog={openDialogUserGantt} |
||||||
|
toggleDialog={toggleDialogUser} |
||||||
|
closeDialog={closeDialogUser} |
||||||
|
/> |
||||||
|
</> |
||||||
|
) |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
export default DialogGantt; |
||||||
|
|||||||
Loading…
Reference in new issue