@ -1,32 +1,56 @@
import '../../../assets/css/customscroll.css'
import './ControlMonitoring.css'
import * as XLSX from 'xlsx' ;
import ContentLoader from "react-content-loader"
import DialogEdit from './DialogEdit' ;
import DialogForm from './DialogForm' ;
import DialogUpdateProgress from './DialogUpdateProgress' ;
import DialogView from './DialogView' ;
import React , { Component } from 'react' ;
import React , { Component } from 'react' ;
import { Card , CardBody , CardHeader , Col , Row , Table , Input , InputGroup , UncontrolledAccordion , UncontrolledCollapse } from 'reactstrap' ;
import SweetAlert from 'react-bootstrap-sweetalert' ;
import { Button } from 'reactstrap' ;
import axios from 'axios' ;
import axios from 'axios' ;
import data from '@iconify/icons-ion/save-outline' ;
import moment from 'moment' ;
import moment from 'moment' ;
import SweetAlert from 'react-bootstrap-sweetalert' ;
import { Button } from 'reactstrap' ;
import DialogForm from './DialogForm' ;
import { CONTROL _MONITORING _SEARCH , PLANNING _SEARCH , PROYEK _SEARCH , PROYEK _EDIT } from '../../../const/ApiConst.js' ;
import DialogEdit from './DialogEdit' ;
import { Card , CardBody , CardHeader , Col , Row , Table , Input , InputGroup , UncontrolledAccordion , UncontrolledCollapse } from 'reactstrap' ;
import { DatePicker , Badge } from 'antd' ;
import { NotificationContainer , NotificationManager } from 'react-notifications' ;
import { NotificationContainer , NotificationManager } from 'react-notifications' ;
import { Pagination , Tooltip , Tree } from 'antd' ;
import { Pagination , Tooltip , Tree } from 'antd' ;
import { DatePicker , Badge } from 'antd' ;
import { formatNumber } from '../../../const/CustomFunc.js' ;
import * as XLSX from 'xlsx' ;
import { CONTROL _MONITORING _SEARCH , PLANNING _SEARCH , PROYEK _SEARCH , PROYEK _EDIT } from '../../../const/ApiConst.js' ;
import DialogView from './DialogView' ;
import DialogUpdateProgress from './DialogUpdateProgress' ;
import { getChildrenTree , formatRupiah , DATE _TIME _FORMAT } from '../../../const/CustomFunc.js' ;
import { getChildrenTree , formatRupiah , DATE _TIME _FORMAT } from '../../../const/CustomFunc.js' ;
import { projectTreeConst } from '../../../const/LayerTreeConst.js' ;
import { projectTreeConst } from '../../../const/LayerTreeConst.js' ;
import ContentLoader from "react-content-loader"
import { formatNumber } from '../../../const/CustomFunc.js' ;
import {
import {
RED _COLOR ,
RED _COLOR ,
ORANGE _COLOR ,
ORANGE _COLOR ,
GREEN _COLOR
GREEN _COLOR
} from '../../../const/AppConst'
} from '../../../const/AppConst'
import '../../../assets/css/customscroll.css'
const { RangePicker } = DatePicker ;
import './ControlMonitoring.css'
import data from '@iconify/icons-ion/save-outline' ;
const token = window . localStorage . getItem ( 'token' ) ;
const config = {
headers :
{
Authorization : ` Bearer ${ token } ` ,
"Content-type" : ` application/json `
}
} ;
const proyek _id = localStorage . getItem ( 'proyek_id' ) ;
const role _id = localStorage . getItem ( 'role_id' ) ;
const column = [
{ name : "No" } ,
{ name : "Nama Activity" } ,
{ name : "UOM" } ,
{ name : "Activity Mulai" } ,
{ name : "Activity Selesai" } ,
{ name : "Jumlah Report" } ,
{ name : "Lihat" } ,
]
const LENGTH _DATA = 10
/ *
/ *
Logic Control Monitoring :
Logic Control Monitoring :
@ -35,7 +59,6 @@ ada variable
- projectTree
- projectTree
- checkedProjectTree
- checkedProjectTree
- dataTable ( filteran dari tanggal )
- dataTable ( filteran dari tanggal )
-
1. ambil proyek _id yang ada id projectTree yang tercentang saja
1. ambil proyek _id yang ada id projectTree yang tercentang saja
2. kalau ada yg sama , maka satu saja yg tercentang ( dibikin unique proyek _id )
2. kalau ada yg sama , maka satu saja yg tercentang ( dibikin unique proyek _id )
@ -88,77 +111,48 @@ ada variable
]
]
* /
* /
const { RangePicker } = DatePicker ;
const token = window . localStorage . getItem ( 'token' ) ;
const config = {
headers :
{
Authorization : ` Bearer ${ token } ` ,
"Content-type" : ` application/json `
}
} ;
const proyek _id = localStorage . getItem ( 'proyek_id' ) ;
const role _id = localStorage . getItem ( 'role_id' ) ;
const column = [
{ name : "No" } ,
// { name: "Proyek" },
{ name : "Nama Activity" } ,
{ name : "UOM" } ,
{ name : "Activity Mulai" } ,
{ name : "Activity Selesai" } ,
{ name : "Jumlah Report" } ,
{ name : "Lihat" } ,
]
const LENGTH _DATA = 10
export default class index extends Component {
export default class index extends Component {
constructor ( props ) {
constructor ( props ) {
super ( props )
super ( props )
this . state = {
this . state = {
dataTable : [ ] ,
activityName : "" ,
dataExport : [ ] ,
openDialog : false ,
openDialogEdit : false ,
typeDialog : 'Save' ,
dataEdit : null ,
alertDelete : false ,
alertDelete : false ,
idDelete : 0 ,
checkedKeysProjectTree : [ ] ,
choosenSubProyekId : [ ] ,
chosenProyekIds : [ ] ,
controlMonitoringData : [ ] ,
currentDay : 'today' ,
currentPage : 1 ,
dataEdit : null ,
dataExport : [ ] ,
dataGs : [ ] ,
dataGs : [ ] ,
dataIdHo : [ ] ,
dataIdHo : [ ] ,
search : "" ,
dataMap : "" ,
dataRealisasi : [ ] ,
dataTable : [ ] ,
dataUpdateProgress : null ,
endDate : moment ( moment ( ) . format ( "YYYY-M-D" ) ) ,
idDelete : 0 ,
idPlanning : 0 ,
listReport : [ ] ,
openDialog : false ,
openDialogEdit : false ,
openDialogPlan : false ,
openDialogUpdateProgress : false ,
page : 0 ,
page : 0 ,
projectTree : [ ] ,
projectTreeVisible : false ,
rowsPerPage : LENGTH _DATA ,
rowsPerPage : LENGTH _DATA ,
currentPage : 1 ,
search : "" ,
totalPage : 0 ,
tooltipMap : false ,
tooltipDelete : false ,
typeClock : "All" ,
startDate : moment ( moment ( ) . format ( "YYYY-M-D" ) ) ,
startDate : moment ( moment ( ) . format ( "YYYY-M-D" ) ) ,
endDate : moment ( moment ( ) . format ( "YYYY-M-D" ) ) ,
tooltipDelete : false ,
currentDay : 'today' ,
dataMap : "" ,
tooltipExport : false ,
tooltipExport : false ,
openDialogPlan : false ,
tooltipMap : false ,
dataRealisasi : [ ] ,
totalPage : 0 ,
projectTreeVisible : false ,
typeClock : "All" ,
projectTree : [ ] ,
typeDialog : 'Save' ,
checkedKeysProjectTree : [ ] ,
openDialogUpdateProgress : false ,
chosenProyekIds : [ ] , // buat di samping kanan (setelah dicentang dari tree dan difilter dari tanggal)
choosenSubProyekId : [ ] ,
controlMonitoringData : [ ] ,
listReport : [ ] ,
activityName : "" ,
dataUpdateProgress : null ,
idPlanning : 0
}
}
// this.updateProgress = this.updateProgress.bind(this);
this . chosenProyekTemp = [ ] ;
this . chosenProyekTemp = [ ] ;
this . choosenSubProyekTemp = [ ] ;
this . choosenSubProyekTemp = [ ] ;
}
}
@ -202,12 +196,6 @@ export default class index extends Component {
if ( proyekIds . length < 1 ) {
if ( proyekIds . length < 1 ) {
proyekIds . push ( 0 ) ;
proyekIds . push ( 0 ) ;
}
}
// {
// "name": "created_at",
// "logic_operator": "range",
// "value": dateStart,
// "value1": dateEnd
// }
let dateStart = moment ( this . state . startDate ) . format ( "YYYY-MM-DD 00:00:00" ) ;
let dateStart = moment ( this . state . startDate ) . format ( "YYYY-MM-DD 00:00:00" ) ;
let dateEnd = moment ( this . state . endDate ) . format ( "YYYY-MM-DD 23:59:59" ) ;
let dateEnd = moment ( this . state . endDate ) . format ( "YYYY-MM-DD 23:59:59" ) ;
@ -241,32 +229,11 @@ export default class index extends Component {
}
}
}
}
// if(parseInt(role_id)!==1){
// formData.columns.push(
// {
// "name": "id",
// "logic_operator": "=",
// "value": proyek_id,
// "operator": "AND",
// "table_name": "m_proyek"
// }
// )
// }
// console.log("cek choosenSubProyekId", this.state.chosenProyekIds.join())
// if (this.state.choosenSubProyekId.length > 0) {
// formData.columns.push({
// "name": "subproyek_id",
// "logic_operator": "in",
// "value": this.state.choosenSubProyekId.join(),
// "operator": "AND"
// })
// }
const result = await axios
const result = await axios
. post ( CONTROL _MONITORING _SEARCH , formData , config )
. post ( CONTROL _MONITORING _SEARCH , formData , config )
. 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 ) {
console . log ( "cek data res" , result . data . data )
console . log ( "cek data res" , result . data . data )
this . setState ( { dataTable : result . data . data , totalPage : result . data . totalRecord } , ( ) => this . buildProyekView ( ) ) ;
this . setState ( { dataTable : result . data . data , totalPage : result . data . totalRecord } , ( ) => this . buildProyekView ( ) ) ;
@ -283,30 +250,13 @@ export default class index extends Component {
"orders" : { "columns" : [ "id" ] , "ascending" : false }
"orders" : { "columns" : [ "id" ] , "ascending" : false }
}
}
// if(parseInt(localStorage.getItem('role_id'))!==1){
// payload.columns.push(
// {
// "name": "id",
// "logic_operator": "=",
// "value": localStorage.getItem('proyek_id') ? localStorage.getItem('proyek_id') : '0',
// "operator": "AND"
// }
// )
// }
const config = {
const config = {
method : 'POST' , // *GET, POST, PUT, DELETE, etc.
method : 'POST' ,
// mode: 'cors', // no-cors, *cors, same-origin
// cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
// credentials: 'same-origin', // include, *same-origin, omit
headers : {
headers : {
'Content-Type' : 'application/json' ,
'Content-Type' : 'application/json' ,
'Authorization' : 'Bearer ' + window . localStorage . getItem ( 'token' )
'Authorization' : 'Bearer ' + window . localStorage . getItem ( 'token' )
// 'Content-Type': 'application/x-www-form-urlencoded',
} ,
} ,
// redirect: 'follow', // manual, *follow, error
body : JSON . stringify ( payload )
// referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
body : JSON . stringify ( payload ) // body data type must match "Content-Type" header
}
}
const result = await fetch ( PROYEK _SEARCH , config ) . then ( response => response . json ( ) ) . then ( res => res ) ;
const result = await fetch ( PROYEK _SEARCH , config ) . then ( response => response . json ( ) ) . then ( res => res ) ;
@ -314,7 +264,6 @@ export default class index extends Component {
if ( result && result . code == 200 ) {
if ( result && result . code == 200 ) {
let children = getChildrenTree ( result . data ) ;
let children = getChildrenTree ( result . data ) ;
projectTreeConst [ 0 ] . children = children ;
projectTreeConst [ 0 ] . children = children ;
// console.log('projectTreeConst', projectTreeConst);
this . setState ( { projectTree : projectTreeConst , projectTreeVisible : true } ) ;
this . setState ( { projectTree : projectTreeConst , projectTreeVisible : true } ) ;
} else {
} else {
NotificationManager . error ( 'Gagal Mengambil Data!!' , 'Failed' ) ;
NotificationManager . error ( 'Gagal Mengambil Data!!' , 'Failed' ) ;
@ -326,11 +275,9 @@ export default class index extends Component {
}
}
handleOpenDialogPlan = ( param , name ) => {
handleOpenDialogPlan = ( param , name ) => {
// console.log("cek cek list report", param)
this . setState ( { listReport : param , activityName : name } , ( ) => {
this . setState ( { listReport : param , activityName : name } , ( ) => {
this . setState ( { openDialogPlan : true } )
this . setState ( { openDialogPlan : true } )
} )
} )
// await this.setState({idPlanning: param})
}
}
toggleAddDialogPlan = ( ) => {
toggleAddDialogPlan = ( ) => {
@ -350,8 +297,6 @@ export default class index extends Component {
this . setState ( { openDialogUpdateProgress : true } )
this . setState ( { openDialogUpdateProgress : true } )
this . showDialogUpdateProgress ( ) ;
this . showDialogUpdateProgress ( ) ;
}
}
}
}
handleCloseDialog = ( ) => {
handleCloseDialog = ( ) => {
@ -455,7 +400,6 @@ export default class index extends Component {
"column_results" : [
"column_results" : [
"nama" ,
"nama" ,
"biaya" ,
"biaya" ,
// "color_progress",
"jumlah_pekerja" ,
"jumlah_pekerja" ,
"pic" ,
"pic" ,
"mulai_proyek" ,
"mulai_proyek" ,
@ -498,19 +442,7 @@ export default class index extends Component {
"length" : - 1
"length" : - 1
}
}
}
}
// if(parseInt(role_id)!==1){
// payload.columns.push(
// {
// "name": "id",
// "logic_operator": "=",
// "value": proyek_id,
// "operator": "AND",
// "table_name": "m_proyek"
// }
// )
// }
// console.log("cek choosenSubProyekId", this.state.choosenSubProyekId)
if ( this . state . choosenSubProyekId . length > 0 ) {
if ( this . state . choosenSubProyekId . length > 0 ) {
payload . columns . push ( {
payload . columns . push ( {
"name" : "subproyek_id" ,
"name" : "subproyek_id" ,
@ -519,25 +451,15 @@ export default class index extends Component {
"operator" : "AND"
"operator" : "AND"
} )
} )
}
}
const result = await axios
const result = await axios
. post ( CONTROL _MONITORING _SEARCH , payload , config )
. post ( CONTROL _MONITORING _SEARCH , payload , config )
. then ( res => res )
. then ( res => res )
. catch ( ( error ) => error . response ) ;
. catch ( ( error ) => error . response ) ;
// console.log(result)
if ( result && result . data && result . data . code == 200 ) {
if ( result && result . data && result . data . code == 200 ) {
let resData = result . data . data ;
let resData = result . data . data ;
const excelData = [ ] ;
const excelData = [ ] ;
// <td>{index + 1}</td>
// <td>{ n.join ? n.join.m_proyek_nama : "-" }</td>
// <td>{ n.nama ? n.nama : "-"}</td>
// <td>{ n.jumlah_titik ? n.jumlah_titik : "0" }</td>
// <td>{ n.realisasi ? this.renderActual(n.realisasi) : "0" }</td>
// <td>{ n.join.m_subproyek_pic ? `${n.join.m_subproyek_pic}` : "-" }</td>
// <td>{ n.join.m_users_name ? `${n.join.m_users_name}` : "-" }</td>
// <td>{ n.target_planning ? moment(n.target_planning).format("DD-MM-YYYY") : "-" }</td>
resData . map ( ( n , index ) => {
resData . map ( ( n , index ) => {
let dataRow = {
let dataRow = {
"Proyek" : n . join ? n . join . m _proyek _nama : "-" ,
"Proyek" : n . join ? n . join . m _proyek _nama : "-" ,
@ -549,12 +471,10 @@ export default class index extends Component {
}
}
excelData . push ( dataRow )
excelData . push ( dataRow )
} )
} )
// console.log("cek excel data", excelData)
this . setState ( { dataExport : excelData } )
this . setState ( { dataExport : excelData } )
// exportExcel();
} else {
} else {
NotificationManager . error ( 'Gagal Export Data!!' , 'Failed' ) ;
NotificationManager . error ( 'Gagal Export Data!!' , 'Failed' ) ;
}
}
}
}
exportExcel = ( ) => {
exportExcel = ( ) => {
@ -580,7 +500,6 @@ export default class index extends Component {
. post ( url , formData )
. post ( url , formData )
. then ( res => res )
. then ( res => res )
. catch ( ( error ) => error . response ) ;
. catch ( ( error ) => error . response ) ;
// console.log(result)
if ( result && result . data ) {
if ( result && result . data ) {
if ( result . data . code _status == 200 ) {
if ( result . data . code _status == 200 ) {
NotificationManager . success ( 'Berhasil update status response!!' , 'Success!' ) ;
NotificationManager . success ( 'Berhasil update status response!!' , 'Success!' ) ;
@ -605,32 +524,18 @@ export default class index extends Component {
}
}
renderTable = ( realisasi ) => {
renderTable = ( realisasi ) => {
// const dataTable2 = this.state.dataTable || [];
return (
return (
< tbody >
< tbody >
{ realisasi . length !== 0 ? realisasi . map ( ( n , index ) => {
{ realisasi . length !== 0 ? realisasi . map ( ( n , index ) => {
// console.log("real real real", n)
return (
return (
< tr key = { index } >
< tr key = { index } >
< td > { index + 1 } < / t d >
< td > { index + 1 } < / t d >
{ /* <td>{ n.join ? n.join.m_proyek_nama : "-" }</td> */ }
< td > { n . name ? n . name : "-" } < / t d >
< td > { n . name ? n . name : "-" } < / t d >
{ /* <td>{ n.jumlah_pekerja ? jumlah_pekerja : "0" }</td> */ }
< td > { n . uom ? n . uom : "-" } < / t d >
< td > { n . uom ? n . uom : "-" } < / t d >
< td > { n . start _date ? ` ${ moment ( n . start _date ) . format ( "DD-MM-YYYY" ) } ` : "-" } < / t d >
< td > { n . start _date ? ` ${ moment ( n . start _date ) . format ( "DD-MM-YYYY" ) } ` : "-" } < / t d >
< td > { n . end _date ? ` ${ moment ( n . end _date ) . format ( "DD-MM-YYYY" ) } ` : "-" } < / t d >
< td > { n . end _date ? ` ${ moment ( n . end _date ) . format ( "DD-MM-YYYY" ) } ` : "-" } < / t d >
< td > { n . list _report ? n . list _report . length : 0 } < / t d >
< td > { n . list _report ? n . list _report . length : 0 } < / t d >
< td >
< td >
{ /* <i id="TooltipDelete" className="cil-trash fa-lg" style={{ color: 'red', marginRight: '10px', cursor: "pointer" }} onClick={() => this.handleDelete(n.id)}></i >
< Tooltip placement = "right" isOpen = { this . state . tooltipDelete } target = "TooltipDelete" toggle = { ( ) => this . toggle ( "delete" ) } >
Delete
< /Tooltip>*/ }
{ /* <i id="TooltipEdit" className="cil-pencil fa-lg" style={{ color: 'green', cursor: "pointer" }} onClick={() => this.handleEdit(n)}></i >
< Tooltip placement = "right" isOpen = { this . state . tooltipEdit } target = "TooltipEdit" toggle = { ( ) => this . toggle ( "edit" ) } >
Edit
< / T o o l t i p >
{ ' ' } * / }
< Tooltip title = "Lihat Report List" >
< Tooltip title = "Lihat Report List" >
< i onClick = { ( ) => this . handleOpenDialogPlan ( n . list _report ? n . list _report : [ ] , n . name ) } id = "tooltipMap" className = "fa fa-eye fa-lg" style = { { color : 'black' , cursor : "pointer" } } > < / i >
< i onClick = { ( ) => this . handleOpenDialogPlan ( n . list _report ? n . list _report : [ ] , n . name ) } id = "tooltipMap" className = "fa fa-eye fa-lg" style = { { color : 'black' , cursor : "pointer" } } > < / i >
< / T o o l t i p >
< / T o o l t i p >
@ -640,7 +545,7 @@ export default class index extends Component {
} ) : < tr >
} ) : < tr >
< td colSpan = "9" align = "center" > No Data Available < / t d >
< td colSpan = "9" align = "center" > No Data Available < / t d >
< / t r >
< / t r >
}
}
< / t b o d y >
< / t b o d y >
)
)
}
}
@ -649,46 +554,36 @@ export default class index extends Component {
const val = e . target . value ;
const val = e . target . value ;
this . setState ( { currentDay : val } ) ;
this . setState ( { currentDay : val } ) ;
if ( val === "today" ) {
if ( val === "today" ) {
// console.log("test 1 test",val);
this . setState ( {
this . setState ( {
startDate : moment ( moment ( ) . format ( "YYYY-M-D" ) ) ,
startDate : moment ( moment ( ) . format ( "YYYY-M-D" ) ) ,
endDate : moment ( moment ( ) . format ( "YYYY-M-D" ) ) ,
endDate : moment ( moment ( ) . format ( "YYYY-M-D" ) ) ,
currentPage : 1
currentPage : 1
} )
} )
} else if ( val === "3 day" ) {
} else if ( val === "3 day" ) {
// console.log("test test",val);
this . setState ( {
this . setState ( {
startDate : moment ( moment ( ) . subtract ( 3 , "days" ) . format ( "YYYY-M-D" ) ) ,
startDate : moment ( moment ( ) . subtract ( 3 , "days" ) . format ( "YYYY-M-D" ) ) ,
endDate : moment ( moment ( ) . format ( "YYYY-M-D" ) ) ,
endDate : moment ( moment ( ) . format ( "YYYY-M-D" ) ) ,
currentPage : 1
currentPage : 1
} )
} )
} else if ( val === "7 day" ) {
} else if ( val === "7 day" ) {
// console.log("test test",val);
this . setState ( {
this . setState ( {
startDate : moment ( moment ( ) . subtract ( 7 , "days" ) . format ( "YYYY-M-D" ) ) ,
startDate : moment ( moment ( ) . subtract ( 7 , "days" ) . format ( "YYYY-M-D" ) ) ,
endDate : moment ( moment ( ) . format ( "YYYY-M-D" ) ) ,
endDate : moment ( moment ( ) . format ( "YYYY-M-D" ) ) ,
currentPage : 1
currentPage : 1
} )
} )
} else {
} else {
// console.log("test 2 test",val);
this . setState ( {
this . setState ( {
startDate : moment ( moment ( ) . format ( "YYYY-M-D" ) ) ,
startDate : moment ( moment ( ) . format ( "YYYY-M-D" ) ) ,
endDate : moment ( moment ( ) . format ( "YYYY-M-D" ) ) ,
endDate : moment ( moment ( ) . format ( "YYYY-M-D" ) ) ,
currentPage : 1
currentPage : 1
} )
} )
}
}
}
}
// when checking chekbox on Layer Tree Panel
onCheckOpt = ( state , checkedKeys ) => {
onCheckOpt = ( state , checkedKeys ) => {
this . setState ( { [ state ] : checkedKeys } ) ;
this . setState ( { [ state ] : checkedKeys } ) ;
}
}
// updateProgress = (item) => {
// console.log('update progress', item);
// this.setState({dataUpdateProgress: item, openDialogUpdateProgress: true});
// }
getChosenProyekRealisasi = ( ) => {
getChosenProyekRealisasi = ( ) => {
const { chosenProyek , projectTree , checkedKeysProjectTree } = this . state ;
const { chosenProyek , projectTree , checkedKeysProjectTree } = this . state ;
@ -697,14 +592,12 @@ export default class index extends Component {
let chosenProyekId = [ ] ;
let chosenProyekId = [ ] ;
if ( checkedKeysProjectTree . length > 0 ) {
if ( checkedKeysProjectTree . length > 0 ) {
chosenProyekId = this . getChosenProyekId ( ) ; // ini yang sudah diambil uniquenya
chosenProyekId = this . getChosenProyekId ( ) ;
}
}
else {
else {
chosenProyekId = [ ]
chosenProyekId = [ ]
}
}
// console.log('choosenSubProyekTemp', this.choosenSubProyekTemp);
// this.setState({choosenSubProyekId: this.choosenSubProyekTemp});
this . setState ( { chosenProyekIds : chosenProyekId } ) ;
this . setState ( { chosenProyekIds : chosenProyekId } ) ;
}
}
@ -717,7 +610,6 @@ export default class index extends Component {
// ambil unique nya aja lalu return uniquenya
// ambil unique nya aja lalu return uniquenya
getChosenProyekId = ( ) => {
getChosenProyekId = ( ) => {
const { checkedKeysProjectTree , projectTree } = this . state ;
const { checkedKeysProjectTree , projectTree } = this . state ;
// console.log('checkedKeysProjectTree', checkedKeysProjectTree);
if ( checkedKeysProjectTree . length > 0 ) {
if ( checkedKeysProjectTree . length > 0 ) {
if ( checkedKeysProjectTree . includes ( 'project-0' ) ) {
if ( checkedKeysProjectTree . includes ( 'project-0' ) ) {
// langsung ambil semua children di level pertama
// langsung ambil semua children di level pertama
@ -726,105 +618,26 @@ export default class index extends Component {
}
}
}
}
else {
else {
// for (let i=0; i < projectTree[0].children.length; i++) {
this . getChosenProyekIdByKey ( projectTree [ 0 ] . children ) ;
this . getChosenProyekIdByKey ( projectTree [ 0 ] . children ) ;
// }
}
}
}
}
// usage example:
// var myArray = ['a', 1, 'a', 2, '1'];
// var unique = myArray.filter((v, i, a) => a.indexOf(v) === i);
let unique = this . chosenProyekTemp . filter ( ( v , i , a ) => a . indexOf ( v ) === i ) ;
let unique = this . chosenProyekTemp . filter ( ( v , i , a ) => a . indexOf ( v ) === i ) ;
// console.log("cek unique", unique)
return unique ;
return unique ;
}
}
getChosenProyekIdByKey = ( dataTree ) => {
getChosenProyekIdByKey = ( dataTree ) => {
const { checkedKeysProjectTree } = this . state ;
const { checkedKeysProjectTree } = this . state ;
// console.log("dataTree", dataTree)
for ( let i = 0 ; i < dataTree . length ; i ++ ) {
for ( let i = 0 ; i < dataTree . length ; i ++ ) {
if ( checkedKeysProjectTree . includes ( dataTree [ i ] . key ) ) {
if ( checkedKeysProjectTree . includes ( dataTree [ i ] . key ) ) {
console . log ( 'matched!!!' , dataTree [ i ] . id ) ;
console . log ( 'matched!!!' , dataTree [ i ] . id ) ;
this . chosenProyekTemp . push ( dataTree [ i ] . id ) ;
this . chosenProyekTemp . push ( dataTree [ i ] . id ) ;
// get the proyek_id, then stop
// if (dataTree[i].parent_id === undefined) {
// this.chosenProyekTemp.push(dataTree[i].id) // ambil idnya, karena dia adalah level paling atas (proyek)
// this.getSubProyeksFromProyek(dataTree[i]);
// }
// else if (dataTree[i].parent_id !== undefined && dataTree[i].parent_id === null) { // dia adalah subproyek pertama
// this.chosenProyekTemp.push(dataTree[i].proyek_id);
// this.choosenSubProyekTemp.push(dataTree[i].id); // ambil proyek_id
// }
// else if (dataTree[i].parent_id !== undefined && dataTree[i].parent_id !== null) { // dia adalah subproyek kedua, dst
// this.chosenProyekTemp.push(dataTree[i].proyek_id);
// this.choosenSubProyekTemp.push(dataTree[i].id); // ambil proyek_id
// }
}
}
// else {
// console.log('not matched, keep looping!', dataTree[i]);
// keep looping until get the matched key
// if (dataTree[i].subproyeks) {
// this.getChosenProyekIdByKey(dataTree[i].children);
// }
// }
}
}
}
}
// get subproyeks_id
// getSubProyeksFromProyek = (dataProyek) => {
// console.log("dataProyek getSubProyeksFromProyek", dataProyek)
// if(dataProyek.children){
// dataProyek.children.map((val, index) => {
// if(val.children){
// this.getSubProyeksFromProyek(val.children)
// }else{
// this.choosenSubProyekTemp.push(val.id);
// }
// });
// }else{
// this.choosenSubProyekTemp.push(dataProyek.id);
// }
// }
// loopForSubProyekId = (dataSubproyek) => {
// }
// proses menampilkan proyek yg terselect dan data realisasinya
buildProyekView = ( ) => {
buildProyekView = ( ) => {
const { dataTable } = this . state ;
const { dataTable } = this . state ;
// let finalData = [];
// console.log("projectTree build view", projectTree)
// ambil object project yg terseleksi dan masukin ke controlMonitoringData
// if (chosenProyekIds.length > 0) {
// for (let i=0; i < chosenProyekIds.length; i++) {
// if (projectTree && projectTree.length > 0) {
// let found = projectTree[0].children.find((item) => item.id === chosenProyekIds[i]);
// // remove children and subproyeks object
// // if (found.children) delete found.children;
// // if (found.subproyeks) delete found.subproyeks;
// // add key realisasi
// if (found) {
// found.realisasi = [];
// finalData.push(found);
// }
// }
// }
// console.log("dataTable build view", dataTable)
// plot response planning-realisasi api dan masukin ke controlMonitoringData
// if (dataTable.length > 0) {
// for (let i=0; i < dataTable.length; i++) {
// let foundProyekIndex = finalData.findIndex((item) => item.id === dataTable[i].proyek_id);
// finalData[foundProyekIndex].realisasi.push(dataTable[i]);
// }
// }
// }
// else {
// finalData = [];
// }
// console.log('finalData', finalData);
this . setState ( { controlMonitoringData : dataTable } ) ;
this . setState ( { controlMonitoringData : dataTable } ) ;
}
}
@ -899,7 +712,6 @@ export default class index extends Component {
< Row style = { { paddingTop : '10%' } } >
< Row style = { { paddingTop : '10%' } } >
< Col md = { 9 } >
< Col md = { 9 } >
< div >
< div >
{ /* <Button color="success" size="sm" onClick={() => this.handleUpdateProgress(item)} disabled={parseInt(localStorage.getItem('role_id'))!==1 ? true : false}>Update</Button> */ }
< / d i v >
< / d i v >
< / C o l >
< / C o l >
< Col md = { 3 } >
< Col md = { 3 } >
@ -935,9 +747,7 @@ export default class index extends Component {
pageSizeOptions = { [ "10" , "15" , "20" , "25" , "30" , "35" , "40" ] }
pageSizeOptions = { [ "10" , "15" , "20" , "25" , "30" , "35" , "40" ] }
/ >
/ >
< / U n c o n t r o l l e d C o l l a p s e >
< / U n c o n t r o l l e d C o l l a p s e >
< hr style = { { marginTop : 50 } } / >
< hr style = { { marginTop : 50 } } / >
< / d i v >
< / d i v >
)
)
} )
} )
@ -962,18 +772,11 @@ export default class index extends Component {
sendUpdateProgress = async ( data ) => {
sendUpdateProgress = async ( data ) => {
let urlEdit = PROYEK _EDIT ( data . id )
let urlEdit = PROYEK _EDIT ( data . id )
const formData = data
const formData = data
const result = await axios . put ( urlEdit , formData , config )
const result = await axios . put ( urlEdit , formData , config )
. 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 ) {
NotificationManager . success ( ` Data proyek berhasil diupdate ` , 'Success!!' ) ;
NotificationManager . success ( ` Data proyek berhasil diupdate ` , 'Success!!' ) ;
// this.setState({controlMonitoringData: []}, () => {
// this.getLayerTreeData();
// this.getDataReportPlanning();
// this.renderControlMonitoringData();
// })
window . location . reload ( ) ; // solusi sementara, soalnya pas rebuilding tree pada missing key karena keynya random
window . location . reload ( ) ; // solusi sementara, soalnya pas rebuilding tree pada missing key karena keynya random
} else {
} else {
NotificationManager . error ( ` Data proyek gagal diupdate ` , ` Failed!! ` ) ;
NotificationManager . error ( ` Data proyek gagal diupdate ` , ` Failed!! ` ) ;
@ -986,19 +789,6 @@ export default class index extends Component {
return (
return (
< div >
< div >
< NotificationContainer / >
< NotificationContainer / >
{ / * < S w e e t A l e r t
show = { this . state . alertDelete }
warning
showCancel
confirmBtnText = "Delete"
confirmBtnBsStyle = "danger"
title = "Are you sure?"
onConfirm = { this . onConfirmDelete }
onCancel = { ( ) => this . setState ( { alertDelete : false , idDelete : 0 } ) }
focusCancelBtn
>
Data tipe karyawan akan terhapus ! !
< /SweetAlert> */ }
< DialogForm
< DialogForm
openDialog = { openDialog }
openDialog = { openDialog }
closeDialog = { this . handleCloseDialog }
closeDialog = { this . handleCloseDialog }
@ -1017,31 +807,10 @@ export default class index extends Component {
< CardHeader style = { { display : "flex" , justifyContent : "space-between" } } >
< CardHeader style = { { display : "flex" , justifyContent : "space-between" } } >
< h4 > Control & Monitoring < / h 4 >
< h4 > Control & Monitoring < / h 4 >
< div >
< div >
{ /* <Button color="primary" onClick={() => this.handleOpenDialog('Save')}>Tambah Broadcast</Button>{' '} */ }
{ / * < T o o l t i p t i t l e = " E x p o r t E x c e l " >
< Button id = "TooltipExport" color = "primary" onClick = { ( ) => this . handleExportExcel ( ) } > < i className = "fa fa-print" > < / i > < / B u t t o n >
< /Tooltip> */ }
< / d i v >
< / d i v >
< / C a r d H e a d e r >
< / C a r d H e a d e r >
< CardBody >
< CardBody >
{ / * < d i v s t y l e = { { d i s p l a y : " f l e x " , j u s t i f y C o n t e n t : " s p a c e - b e t w e e n " , m a r g i n B o t t o m : " 2 5 p x " } } >
< div style = { { width : "100%" , display : "inline-flex" , alignItems : "center" } } >
< div style = { { width : "50%" , marginRight : "10px" , maxWidth : "200px" } } >
< Input type = "select" onChange = { ( e ) => this . handleChangeDay ( e ) } defaultValue = { this . state . currentDay } >
< option value = "today" > Hari Ini < / o p t i o n >
< option value = "3 day" > 3 Hari yang lalu < / o p t i o n >
< option value = "7 day" > 7 Hari yang lalu < / o p t i o n >
< / I n p u t >
< / d i v >
< div style = { { width : "50%" } } >
< RangePicker size = "default" allowClear = { false } value = { [ this . state . startDate , this . state . endDate ] } onChange = { this . handleDatePicker } / > { ' ' }
< Button color = "primary" onClick = { ( ) => this . getDataReportPlanning ( ) } > Cari < / B u t t o n >
< / d i v >
< / d i v >
< Input onChange = { this . handleSearch } value = { search } type = "text" name = "search" id = "search" placeholder = "Cari Nama Pekerjaan" style = { { maxWidth : "200px" , marginBottom : "20px" } } / >
< /div> */ }
< Row style = { { marginBottom : 15 } } >
< Row style = { { marginBottom : 15 } } >
{ /* <Col md={12}>Breadcrumbs of proyek here...</Col> */ }
< / R o w >
< / R o w >
< Row >
< Row >
< Col md = { projectTreeVisible ? 3 : 1 } >
< Col md = { projectTreeVisible ? 3 : 1 } >
@ -1070,10 +839,10 @@ export default class index extends Component {
< option value = "7 day" > 7 Hari yang lalu < / o p t i o n >
< option value = "7 day" > 7 Hari yang lalu < / o p t i o n >
< / I n p u t >
< / I n p u t >
< / d i v >
< / d i v >
< RangePicker
< RangePicker
size = "default"
size = "default"
allowClear = { false }
allowClear = { false }
value = { [ this . state . startDate , this . state . endDate ] }
value = { [ this . state . startDate , this . state . endDate ] }
onChange = { this . handleDatePicker }
onChange = { this . handleDatePicker }
/ >
/ >
< hr style = { { marginVertical : 15 } } / >
< hr style = { { marginVertical : 15 } } / >
@ -1088,7 +857,7 @@ export default class index extends Component {
style = { { marginLeft : - 10 } }
style = { { marginLeft : - 10 } }
/ >
/ >
:
:
< ContentLoader
< ContentLoader
speed = { 2 }
speed = { 2 }
width = "100%"
width = "100%"
height = { 150 }
height = { 150 }
@ -1098,11 +867,11 @@ export default class index extends Component {
style = { { marginLeft : 24 , marginTop : - 25 } }
style = { { marginLeft : 24 , marginTop : - 25 } }
>
>
< rect x = "4" y = "13" rx = "3" ry = "3" width = "25" height = "25" / >
< rect x = "4" y = "13" rx = "3" ry = "3" width = "25" height = "25" / >
< rect x = "45" y = "17" rx = "5" ry = "5" width = "290" height = "16" / >
< rect x = "45" y = "17" rx = "5" ry = "5" width = "290" height = "16" / >
< rect x = "45" y = "50" rx = "3" ry = "3" width = "25" height = "25" / >
< rect x = "45" y = "50" rx = "3" ry = "3" width = "25" height = "25" / >
< rect x = "80" y = "54" rx = "5" ry = "5" width = "251" height = "16" / >
< rect x = "80" y = "54" rx = "5" ry = "5" width = "251" height = "16" / >
< rect x = "45" y = "90" rx = "3" ry = "3" width = "25" height = "25" / >
< rect x = "45" y = "90" rx = "3" ry = "3" width = "25" height = "25" / >
< rect x = "80" y = "94" rx = "5" ry = "5" width = "251" height = "16" / >
< rect x = "80" y = "94" rx = "5" ry = "5" width = "251" height = "16" / >
< rect x = "45" y = "130" rx = "3" ry = "3" width = "25" height = "25" / >
< rect x = "45" y = "130" rx = "3" ry = "3" width = "25" height = "25" / >
< rect x = "80" y = "134" rx = "5" ry = "5" width = "251" height = "16" / >
< rect x = "80" y = "134" rx = "5" ry = "5" width = "251" height = "16" / >
< / C o n t e n t L o a d e r >
< / C o n t e n t L o a d e r >
@ -1129,7 +898,6 @@ export default class index extends Component {
toggleDialog = { ( ) => this . toggleAddDialogPlan ( ) }
toggleDialog = { ( ) => this . toggleAddDialogPlan ( ) }
listReport = { this . state . listReport }
listReport = { this . state . listReport }
activityName = { this . state . activityName }
activityName = { this . state . activityName }
// nameProyekParent={nameProyek}
/ >
/ >
< DialogUpdateProgress
< DialogUpdateProgress
openDialog = { this . state . openDialogUpdateProgress }
openDialog = { this . state . openDialogUpdateProgress }