ordo
/
surveyor_indonesia_frontend
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

cleared

pull/1/head
wahyun 10 months ago
parent
ed8a3ae6cd
commit
fbdb1690ab
1 changed files with 247 additions and 247 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 494
      src/views/ControlMonitoringGantt/index.js

494
src/views/ControlMonitoringGantt/index.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save