wahyun
7 months ago
1 changed files with 247 additions and 247 deletions
@ -1,247 +1,247 @@
|
||||
import React, { useEffect, useMemo, useState } from 'react'; |
||||
import Timeline from 'react-calendar-timeline' |
||||
import 'react-calendar-timeline/lib/Timeline.css' |
||||
import moment from 'moment'; |
||||
import { BASE_SIMPRO, PROYEK_ADD, PROYEK_SEARCH_DETAIL, GANTT_CONTROL_MONITORING_SEARCH, PROYEK_EDIT, PROYEK_DELETE } from '../../const/ApiConst'; |
||||
import axios from 'axios'; |
||||
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
||||
import { Button } from 'antd'; |
||||
import { |
||||
Container, Col, Row, UncontrolledTooltip, |
||||
Card, |
||||
CardBody, |
||||
CardHeader, |
||||
Table, |
||||
Modal, ModalHeader, ModalBody, ModalFooter |
||||
} from 'reactstrap'; |
||||
import GanttFull from './GanttDhtmlx2'; |
||||
import DialogForm from '../Master/Proyek/DialogForm'; |
||||
import DialogFormSub from '../Master/Proyek/DialogFormSub'; |
||||
import Iframe from "@nicholasadamou/react-iframe"; |
||||
|
||||
const getUrlParameter = (sParam) => { |
||||
var sPageURL = window.location.search.substring(1), |
||||
sURLVariables = sPageURL.split('&'), |
||||
sParameterName, |
||||
i; |
||||
|
||||
for (i = 0; i < sURLVariables.length; i++) { |
||||
sParameterName = sURLVariables[i].split('='); |
||||
|
||||
if (sParameterName[0] === sParam) { |
||||
return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]); |
||||
} |
||||
} |
||||
return false; |
||||
}; |
||||
|
||||
const GanttTimeLine = () => { |
||||
const token = localStorage.getItem("token") |
||||
const HEADER = { |
||||
headers: { |
||||
"Content-Type": "application/json", |
||||
"Authorization": `Bearer ${token}` |
||||
} |
||||
} |
||||
|
||||
const [proyekId, setProyekId] = useState(15); |
||||
const [dataGantt, setDataGantt] = useState([]); |
||||
const [prevProyekId, setPrevProyekId] = useState(0); |
||||
const [dataGroupGantt, setDataGroupGantt] = useState([]); |
||||
const [maxDateGantt, setMaxDateGantt] = useState(null); |
||||
const [minDateGantt, setMinDateGantt] = useState(null); |
||||
const [dataAllTimeLine, setDataAllTimeLine] = useState([]); |
||||
const [prevDataAllTimeLine, setPrevDataAllTimeLine] = useState(null); |
||||
|
||||
const [idTask, setidTask] = useState(0); |
||||
const [dataTable, setDatatable] = useState([]) |
||||
const [search, setSearch] = useState('') |
||||
const [currentPage, setCurrentPage] = useState(1) |
||||
const [totalPage, setTotalPage] = useState(0) |
||||
const [openDialog, setOpenDialog] = useState(false) |
||||
const [openDialogSub, setOpenDialogSub] = useState(false) |
||||
const [typeDialog, setTypeDialog] = useState('Save'); |
||||
const [typeDialogSub, setTypeDialogSub] = useState('Save') |
||||
const [idDelete, setIdDelete] = useState(0) |
||||
const [alertDelete, setAlertDelete] = useState(false) |
||||
const [dataEdit, setDataEdit] = useState([]) |
||||
const [dataEditSub, setDataEditSub] = useState([]) |
||||
const [rowsPerPage, setRowsPerPage] = useState(10) |
||||
const [clickOpenModal, setClickOpenModal] = useState(false) |
||||
const [dataExport, setDataExport] = useState([]) |
||||
const [allDataMenu, setAllDataMenu] = useState([]) |
||||
const [idSubtask, setIdSubtask] = useState(0); |
||||
|
||||
const handleMappingDataGantt = (data) => { |
||||
const minDates = data.map(res => moment(res.mulai_proyek)), |
||||
minDate = moment.min(minDates) |
||||
const maxDates = data.map(res => moment(res.akhir_proyek)), |
||||
maxDate = moment.max(maxDates) |
||||
|
||||
let groups = [] |
||||
let items = [] |
||||
data.map((res, idx) => { |
||||
let group = { |
||||
id: res.id, |
||||
title: res.nama, |
||||
stackItems: true, |
||||
height: 50 |
||||
} |
||||
let item = { |
||||
id: res.id, |
||||
group: res.id, |
||||
title: res.pic, |
||||
start_time: moment(res.mulai_proyek), |
||||
end_time: moment(res.akhir_proyek), |
||||
} |
||||
groups.push(group) |
||||
items.push(item) |
||||
}) |
||||
setDataGantt(items) |
||||
setDataGroupGantt(groups) |
||||
setMaxDateGantt(maxDate) |
||||
setMinDateGantt(minDate) |
||||
} |
||||
|
||||
const handleGetDataProyek = async () => { |
||||
|
||||
const payload = { |
||||
"columns": [ |
||||
{ "name": "nama", "logic_operator": "ilike", "value": "", "operator": "AND" } |
||||
], |
||||
"joins": [ |
||||
{ "name": "subproyeks.m_proyek", "column_join": "proyek_id", "column_results": ["nama", "biaya", "color_progress", "jumlah_pekerja", "pic", "mulai_proyek", "akhir_proyek", "biaya_actual", "persentase_progress_plan", "persentase_progress_actual"] }, |
||||
{ "name": "subproyeks.m_subproyek", "column_join": "parent_id", "column_results": ["nama", "biaya", "color_progress", "jumlah_pekerja", "pic", "mulai_proyek", "akhir_proyek", "biaya_actual", "persentase_progress_plan", "persentase_progress_actual"] } |
||||
], |
||||
"orders": { "columns": ["id"], "ascending": true }, |
||||
"paging": { "start": 0, "length": 25 } |
||||
} |
||||
|
||||
const result = await axios |
||||
.post(GANTT_CONTROL_MONITORING_SEARCH, payload, HEADER) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
|
||||
if (result && result.data && result.data.code == 200) { |
||||
const { data } = result.data |
||||
setDataAllTimeLine(data) |
||||
setPrevDataAllTimeLine(data) |
||||
handleMappingDataGantt(data) |
||||
|
||||
} else { |
||||
NotificationManager.error('Gagal Export Data!!', 'Failed'); |
||||
} |
||||
} |
||||
|
||||
useEffect(() => { |
||||
let proyek_id = getUrlParameter('proyek_id'); |
||||
if (proyek_id) { |
||||
setProyekId(proyek_id); |
||||
} |
||||
handleGetDataProyek() |
||||
}, []); |
||||
|
||||
const handleClickGroupGantt = param => { |
||||
const row = prevDataAllTimeLine.filter(res => res.id === param) |
||||
if (row.length > 0) { |
||||
const { subproyeks, proyek_id, parent_id } = row[0] |
||||
setPrevProyekId(parent_id || proyek_id) |
||||
handleMappingDataGantt(subproyeks) |
||||
setDataAllTimeLine(subproyeks) |
||||
} |
||||
|
||||
} |
||||
|
||||
const handleOpenDialog = (type) => { |
||||
setOpenDialog(true) |
||||
setTypeDialog(type) |
||||
} |
||||
|
||||
const handleOpenDialogSub = (type, param) => { |
||||
const { id, parent_id, proyek_id, parent } = param |
||||
const idParent = parent == 0 ? 0 : parent == proyek_id ? id : parent_id |
||||
setidTask(proyek_id) |
||||
setIdSubtask(idParent) |
||||
setOpenDialogSub(true) |
||||
setTypeDialogSub(type) |
||||
} |
||||
|
||||
const handleCloseDialog = (type, data) => { |
||||
if (type === "save") { |
||||
saveProyek(data); |
||||
} |
||||
|
||||
setDataEdit([]) |
||||
setOpenDialog(false) |
||||
} |
||||
|
||||
const handleCloseDialogSub = (type, data) => { |
||||
setDataEditSub([]) |
||||
setOpenDialogSub(false) |
||||
if (type !== "cancel") { |
||||
handleGetDataProyek() |
||||
} |
||||
|
||||
} |
||||
|
||||
const toggleAddDialog = () => { |
||||
setOpenDialog(!openDialog) |
||||
} |
||||
|
||||
const toggleAddDialogSub = () => { |
||||
setOpenDialogSub(!openDialogSub) |
||||
} |
||||
|
||||
const saveProyek = async (data) => { |
||||
const formData = data |
||||
|
||||
const result = await axios.post(PROYEK_ADD, formData, HEADER) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code === 200) { |
||||
handleGetDataProyek() |
||||
NotificationManager.success(`Data proyek berhasil ditambah`, 'Success!!'); |
||||
} else { |
||||
NotificationManager.error(`${result.data.message}`, 'Failed!!'); |
||||
} |
||||
|
||||
} |
||||
|
||||
const RenderGantt = useMemo(() => ( |
||||
<GanttFull |
||||
handleOpenDialogSub={handleOpenDialogSub} |
||||
data={dataAllTimeLine} |
||||
startDate={minDateGantt ? minDateGantt.format("YYYY-MM-DD HH:mm:ss") : moment().add(-40, 'days').format("YYYY-MM-DD HH:mm:ss")} |
||||
endDate={maxDateGantt ? maxDateGantt.format("YYYY-MM-DD HH:mm:ss") : moment().add(40, 'days').format("YYYY-MM-DD HH:mm:ss")} |
||||
/> |
||||
), [dataAllTimeLine, maxDateGantt, minDateGantt]) |
||||
|
||||
return ( |
||||
<div> |
||||
{/* {RenderGantt} */} |
||||
{/* <iframe id="frame-embedd" src="http://localhost/jQueryGantt/gantt.html" |
||||
style={{ |
||||
width: '100%', |
||||
height: '75vh', |
||||
}} |
||||
scrolling="no"
|
||||
frameBorder="0" |
||||
></iframe> */} |
||||
<Iframe |
||||
src={`http://siopas.co.id/simpro-gantt/gantt.html?proyek_id=${proyekId}&token=${localStorage.getItem('token')}`} |
||||
headers={{ |
||||
}} |
||||
style={{ |
||||
width: '100%', |
||||
height: '75vh', |
||||
}} |
||||
scrolling="no" |
||||
frameBorder="0" |
||||
/> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
export default GanttTimeLine; |
||||
import React, { useEffect, useMemo, useState } from 'react'; |
||||
import Timeline from 'react-calendar-timeline' |
||||
import 'react-calendar-timeline/lib/Timeline.css' |
||||
import moment from 'moment'; |
||||
import { BASE_SIMPRO, PROYEK_ADD, GANTT_CONTROL_MONITORING_SEARCH } from '../../const/ApiConst'; |
||||
import axios from 'axios'; |
||||
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
||||
import { Button } from 'antd'; |
||||
import { |
||||
Container, Col, Row, UncontrolledTooltip, |
||||
Card, |
||||
CardBody, |
||||
CardHeader, |
||||
Table, |
||||
Modal, ModalHeader, ModalBody, ModalFooter |
||||
} from 'reactstrap'; |
||||
import GanttFull from './GanttDhtmlx2'; |
||||
import DialogForm from '../Master/Proyek/DialogForm'; |
||||
import DialogFormSub from '../Master/Proyek/DialogFormSub'; |
||||
import Iframe from "@nicholasadamou/react-iframe"; |
||||
|
||||
const getUrlParameter = (sParam) => { |
||||
var sPageURL = window.location.search.substring(1), |
||||
sURLVariables = sPageURL.split('&'), |
||||
sParameterName, |
||||
i; |
||||
|
||||
for (i = 0; i < sURLVariables.length; i++) { |
||||
sParameterName = sURLVariables[i].split('='); |
||||
|
||||
if (sParameterName[0] === sParam) { |
||||
return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]); |
||||
} |
||||
} |
||||
return false; |
||||
}; |
||||
|
||||
const GanttTimeLine = () => { |
||||
const token = localStorage.getItem("token") |
||||
const HEADER = { |
||||
headers: { |
||||
"Content-Type": "application/json", |
||||
"Authorization": `Bearer ${token}` |
||||
} |
||||
} |
||||
|
||||
const [proyekId, setProyekId] = useState(15); |
||||
const [dataGantt, setDataGantt] = useState([]); |
||||
const [prevProyekId, setPrevProyekId] = useState(0); |
||||
const [dataGroupGantt, setDataGroupGantt] = useState([]); |
||||
const [maxDateGantt, setMaxDateGantt] = useState(null); |
||||
const [minDateGantt, setMinDateGantt] = useState(null); |
||||
const [dataAllTimeLine, setDataAllTimeLine] = useState([]); |
||||
const [prevDataAllTimeLine, setPrevDataAllTimeLine] = useState(null); |
||||
|
||||
const [idTask, setidTask] = useState(0); |
||||
const [dataTable, setDatatable] = useState([]) |
||||
const [search, setSearch] = useState('') |
||||
const [currentPage, setCurrentPage] = useState(1) |
||||
const [totalPage, setTotalPage] = useState(0) |
||||
const [openDialog, setOpenDialog] = useState(false) |
||||
const [openDialogSub, setOpenDialogSub] = useState(false) |
||||
const [typeDialog, setTypeDialog] = useState('Save'); |
||||
const [typeDialogSub, setTypeDialogSub] = useState('Save') |
||||
const [idDelete, setIdDelete] = useState(0) |
||||
const [alertDelete, setAlertDelete] = useState(false) |
||||
const [dataEdit, setDataEdit] = useState([]) |
||||
const [dataEditSub, setDataEditSub] = useState([]) |
||||
const [rowsPerPage, setRowsPerPage] = useState(10) |
||||
const [clickOpenModal, setClickOpenModal] = useState(false) |
||||
const [dataExport, setDataExport] = useState([]) |
||||
const [allDataMenu, setAllDataMenu] = useState([]) |
||||
const [idSubtask, setIdSubtask] = useState(0); |
||||
|
||||
const handleMappingDataGantt = (data) => { |
||||
const minDates = data.map(res => moment(res.mulai_proyek)), |
||||
minDate = moment.min(minDates) |
||||
const maxDates = data.map(res => moment(res.akhir_proyek)), |
||||
maxDate = moment.max(maxDates) |
||||
|
||||
let groups = [] |
||||
let items = [] |
||||
data.map((res, idx) => { |
||||
let group = { |
||||
id: res.id, |
||||
title: res.nama, |
||||
stackItems: true, |
||||
height: 50 |
||||
} |
||||
let item = { |
||||
id: res.id, |
||||
group: res.id, |
||||
title: res.pic, |
||||
start_time: moment(res.mulai_proyek), |
||||
end_time: moment(res.akhir_proyek), |
||||
} |
||||
groups.push(group) |
||||
items.push(item) |
||||
}) |
||||
setDataGantt(items) |
||||
setDataGroupGantt(groups) |
||||
setMaxDateGantt(maxDate) |
||||
setMinDateGantt(minDate) |
||||
} |
||||
|
||||
const handleGetDataProyek = async () => { |
||||
|
||||
const payload = { |
||||
"columns": [ |
||||
{ "name": "nama", "logic_operator": "ilike", "value": "", "operator": "AND" } |
||||
], |
||||
"joins": [ |
||||
{ "name": "subproyeks.m_proyek", "column_join": "proyek_id", "column_results": ["nama", "biaya", "color_progress", "jumlah_pekerja", "pic", "mulai_proyek", "akhir_proyek", "biaya_actual", "persentase_progress_plan", "persentase_progress_actual"] }, |
||||
{ "name": "subproyeks.m_subproyek", "column_join": "parent_id", "column_results": ["nama", "biaya", "color_progress", "jumlah_pekerja", "pic", "mulai_proyek", "akhir_proyek", "biaya_actual", "persentase_progress_plan", "persentase_progress_actual"] } |
||||
], |
||||
"orders": { "columns": ["id"], "ascending": true }, |
||||
"paging": { "start": 0, "length": 25 } |
||||
} |
||||
|
||||
const result = await axios |
||||
.post(GANTT_CONTROL_MONITORING_SEARCH, payload, HEADER) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
|
||||
if (result && result.data && result.data.code == 200) { |
||||
const { data } = result.data |
||||
setDataAllTimeLine(data) |
||||
setPrevDataAllTimeLine(data) |
||||
handleMappingDataGantt(data) |
||||
|
||||
} else { |
||||
NotificationManager.error('Gagal Export Data!!', 'Failed'); |
||||
} |
||||
} |
||||
|
||||
useEffect(() => { |
||||
let proyek_id = getUrlParameter('proyek_id'); |
||||
if (proyek_id) { |
||||
setProyekId(proyek_id); |
||||
} |
||||
handleGetDataProyek() |
||||
}, []); |
||||
|
||||
const handleClickGroupGantt = param => { |
||||
const row = prevDataAllTimeLine.filter(res => res.id === param) |
||||
if (row.length > 0) { |
||||
const { subproyeks, proyek_id, parent_id } = row[0] |
||||
setPrevProyekId(parent_id || proyek_id) |
||||
handleMappingDataGantt(subproyeks) |
||||
setDataAllTimeLine(subproyeks) |
||||
} |
||||
|
||||
} |
||||
|
||||
const handleOpenDialog = (type) => { |
||||
setOpenDialog(true) |
||||
setTypeDialog(type) |
||||
} |
||||
|
||||
const handleOpenDialogSub = (type, param) => { |
||||
const { id, parent_id, proyek_id, parent } = param |
||||
const idParent = parent == 0 ? 0 : parent == proyek_id ? id : parent_id |
||||
setidTask(proyek_id) |
||||
setIdSubtask(idParent) |
||||
setOpenDialogSub(true) |
||||
setTypeDialogSub(type) |
||||
} |
||||
|
||||
const handleCloseDialog = (type, data) => { |
||||
if (type === "save") { |
||||
saveProyek(data); |
||||
} |
||||
|
||||
setDataEdit([]) |
||||
setOpenDialog(false) |
||||
} |
||||
|
||||
const handleCloseDialogSub = (type, data) => { |
||||
setDataEditSub([]) |
||||
setOpenDialogSub(false) |
||||
if (type !== "cancel") { |
||||
handleGetDataProyek() |
||||
} |
||||
|
||||
} |
||||
|
||||
const toggleAddDialog = () => { |
||||
setOpenDialog(!openDialog) |
||||
} |
||||
|
||||
const toggleAddDialogSub = () => { |
||||
setOpenDialogSub(!openDialogSub) |
||||
} |
||||
|
||||
const saveProyek = async (data) => { |
||||
const formData = data |
||||
|
||||
const result = await axios.post(PROYEK_ADD, formData, HEADER) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code === 200) { |
||||
handleGetDataProyek() |
||||
NotificationManager.success(`Data proyek berhasil ditambah`, 'Success!!'); |
||||
} else { |
||||
NotificationManager.error(`${result.data.message}`, 'Failed!!'); |
||||
} |
||||
|
||||
} |
||||
|
||||
const RenderGantt = useMemo(() => ( |
||||
<GanttFull |
||||
handleOpenDialogSub={handleOpenDialogSub} |
||||
data={dataAllTimeLine} |
||||
startDate={minDateGantt ? minDateGantt.format("YYYY-MM-DD HH:mm:ss") : moment().add(-40, 'days').format("YYYY-MM-DD HH:mm:ss")} |
||||
endDate={maxDateGantt ? maxDateGantt.format("YYYY-MM-DD HH:mm:ss") : moment().add(40, 'days').format("YYYY-MM-DD HH:mm:ss")} |
||||
/> |
||||
), [dataAllTimeLine, maxDateGantt, minDateGantt]) |
||||
|
||||
return ( |
||||
<div> |
||||
{/* {RenderGantt} */} |
||||
{/* <iframe id="frame-embedd" src="http://localhost/jQueryGantt/gantt.html" |
||||
style={{ |
||||
width: '100%', |
||||
height: '75vh', |
||||
}} |
||||
scrolling="no" |
||||
frameBorder="0" |
||||
></iframe> */} |
||||
<Iframe |
||||
src={`http://siopas.co.id/simpro-gantt/gantt.html?proyek_id=${proyekId}&token=${localStorage.getItem('token')}`} |
||||
headers={{ |
||||
}} |
||||
style={{ |
||||
width: '100%', |
||||
height: '75vh', |
||||
}} |
||||
scrolling="no" |
||||
frameBorder="0" |
||||
/> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
export default GanttTimeLine; |
||||
|
||||
Loading…
Reference in new issue