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