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
Split 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 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;

Write Preview
Loading…
Cancel
Save