@ -10,14 +10,15 @@ import { Pagination, Tooltip } from 'antd';
import { DatePicker , Select } from 'antd' ; import { DatePicker , Select } from 'antd' ;
import * as XLSX from 'xlsx' ; import * as XLSX from 'xlsx' ;
import { PRESENSI _SEARCH , PROYEK _SEARCH , USERPROYEK _SEARCH , K3 _SEARCH , SIMPRO _BASE _IMAGE } from '../../../const/ApiConst.js' ; import { PRESENSI _SEARCH , PROYEK _SEARCH , USERPROYEK _SEARCH , K3 _SEARCH , SIMPRO _BASE _IMAGE } from '../../../const/ApiConst.js' ;
import { withTranslation } from 'react-i18next' ;
const { RangePicker } = DatePicker ; const { RangePicker } = DatePicker ;
const { Option } = Select const { Option } = Select
const token = localStorage . getItem ( 'token' ) ; const token = localStorage . getItem ( 'token' ) ;
const config = { const config = {
headers :
headers :
{
{
Authorization : ` Bearer ${ token } ` , Authorization : ` Bearer ${ token } ` ,
"Content-type" : ` application/json ` "Content-type" : ` application/json `
} }
} ; } ;
@ -25,18 +26,11 @@ const BASE_URL = ""
const momentFormat = 'DD-MM-YY' ; const momentFormat = 'DD-MM-YY' ;
const column = [
{ name : "Nama Human Resource" } ,
{ name : "Tanggal Lapor" } ,
{ name : "Perlengkapan Dikenakan" } ,
{ name : "Perlengkapan Tidak Dikenakan" } ,
{ name : "Deskripsi" } ,
{ name : "Action" } ,
]
const LENGTH _DATA = 10 const LENGTH _DATA = 10
export default class index extends Component { class index extends Component {
constructor ( props ) { constructor ( props ) {
super ( props ) super ( props )
this . state = { this . state = {
@ -58,16 +52,16 @@ export default class index extends Component {
tooltipEdit : false , tooltipEdit : false ,
tooltipDelete : false , tooltipDelete : false ,
typeClock : "All" , typeClock : "All" ,
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" ) ) ,
currentDay : 'today' , currentDay : 'today' ,
tooltipExport : false , tooltipExport : false ,
disableProyek : false , disableProyek : false ,
currentProyek : parseInt ( localStorage . getItem ( 'role_id' ) ) === 2 ? parseInt ( localStorage . getItem ( 'proyek_id' ) ) : null , currentProyek : parseInt ( localStorage . getItem ( 'role_id' ) ) === 2 ? parseInt ( localStorage . getItem ( 'proyek_id' ) ) : null ,
allUserToProyek : [ ] , allUserToProyek : [ ] ,
proyekIds : [ ] , proyekIds : [ ] ,
allDataProyek : [ ] , allDataProyek : [ ] ,
finishSetupOption : false finishSetupOption : false
} }
} }
@ -77,29 +71,29 @@ export default class index extends Component {
} }
async componentDidUpdate ( prevProps , prevState ) { async componentDidUpdate ( prevProps , prevState ) {
const { search , startDate , dataExport , proyekIds , currentProyek } = this . state const { search , startDate , dataExport , proyekIds , currentProyek } = this . state
if ( search !== prevState . search ) this . getDataLaporanK3 ( ) if ( search !== prevState . search ) this . getDataLaporanK3 ( )
if ( startDate !== prevState . startDate ) this . getDataLaporanK3 ( ) if ( startDate !== prevState . startDate ) this . getDataLaporanK3 ( )
if ( dataExport !== prevState . dataExport ) { if ( dataExport !== prevState . dataExport ) {
if ( dataExport . length > 0 ) { if ( dataExport . length > 0 ) {
this . exportExcel ( ) this . exportExcel ( )
} }
} }
if ( proyekIds !== prevState . proyekIds ) { if ( proyekIds !== prevState . proyekIds ) {
this . getDataLaporanK3 ( ) ; this . getDataLaporanK3 ( ) ;
} }
if ( currentProyek !== prevState . currentProyek ) { if ( currentProyek !== prevState . currentProyek ) {
this . getDataLaporanK3 ( ) ; this . getDataLaporanK3 ( ) ;
} }
} }
setUpFirstProyek = ( ) => { setUpFirstProyek = ( ) => {
console . log ( "cek role id" , localStorage . getItem ( 'role_id' ) ) ; console . log ( "cek role id" , localStorage . getItem ( 'role_id' ) ) ;
if ( parseInt ( localStorage . getItem ( 'role_id' ) ) === 2 ) { if ( parseInt ( localStorage . getItem ( 'role_id' ) ) === 2 ) {
this . setState ( { disableProyek : true } ) ; this . setState ( { disableProyek : true } ) ;
} else { } else {
this . setState ( { currentProyek : null } ) this . setState ( { currentProyek : null } )
} }
} }
handleSearch = e => { handleSearch = e => {
@ -109,12 +103,12 @@ export default class index extends Component {
getAllProyek = async ( ) => { getAllProyek = async ( ) => {
const payload = { const payload = {
"paging" : { "start" : 0 , "length" : - 1 } , "paging" : { "start" : 0 , "length" : - 1 } ,
"columns" : [ "columns" : [
{ "name" : "nama" , "logic_operator" : "ilike" , "value" : "" , "operator" : "AND" } { "name" : "nama" , "logic_operator" : "ilike" , "value" : "" , "operator" : "AND" }
] , ] ,
"joins" : [ ] , "joins" : [ ] ,
"orders" : { "columns" : [ "id" ] , "ascending" : false } "orders" : { "columns" : [ "id" ] , "ascending" : false }
} }
const result = await axios const result = await axios
@ -123,15 +117,15 @@ export default class index extends Component {
. catch ( ( error ) => error . response ) ; . catch ( ( error ) => error . response ) ;
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
let proyekIds = [ ] let proyekIds = [ ]
resData . map ( ( val , index ) => { resData . map ( ( val , index ) => {
proyekIds . push ( val . id ) ; proyekIds . push ( val . id ) ;
} ) ; } ) ;
this . setState ( { allDataProyek : resData , proyekIds : proyekIds } ) this . setState ( { allDataProyek : resData , proyekIds : proyekIds } )
} else { } else {
} }
} }
@ -152,63 +146,63 @@ export default class index extends Component {
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" ) ;
let currentProyek = this . state . currentProyek let currentProyek = this . state . currentProyek
const payload = { const payload = {
"paging" : { "paging" : {
"start" : start , "start" : start ,
"length" : this . state . rowsPerPage "length" : this . state . rowsPerPage
} , } ,
"filter_columns" : [ "filter_columns" : [
{ {
"name" : "name" , "name" : "name" ,
"value" : "" , "value" : "" ,
"table_name" : "m_users" "table_name" : "m_users"
} }
] , ] ,
"columns" : [ "columns" : [
{ "name" : "report_date" , "logic_operator" : "range" , "value" : dateStart , "value1" : dateEnd , "operator" : "AND" } , { "name" : "report_date" , "logic_operator" : "range" , "value" : dateStart , "value1" : dateEnd , "operator" : "AND" } ,
{ "name" : "name" , "logic_operator" : "ilike" , "value" : this . state . search , "operator" : "AND" , "table_name" : "m_users" } { "name" : "name" , "logic_operator" : "ilike" , "value" : this . state . search , "operator" : "AND" , "table_name" : "m_users" }
] , ] ,
"joins" : [ "joins" : [
{ {
"name" : "m_users" , "name" : "m_users" ,
"column_join" : "user_id" , "column_join" : "user_id" ,
"column_results" : [ "column_results" : [
"name" , "name" ,
] ]
} }
] , ] ,
"orders" : { "orders" : {
"columns" : [ "columns" : [
"id" "id"
] , ] ,
"ascending" : false "ascending" : false
} , } ,
"child_data" : { "child_data" : {
"table_name" : "t_report_k3_detail" , "table_name" : "t_report_k3_detail" ,
"column_table" : "report_k3_id" , "column_table" : "report_k3_id" ,
"column_name" : "id" "column_name" : "id"
} }
} }
if ( currentProyek ) { if ( currentProyek ) {
let proyekPayload = { "name" : "proyek_id" , "logic_operator" : "=" , "value" : this . state . currentProyek } ; let proyekPayload = { "name" : "proyek_id" , "logic_operator" : "=" , "value" : this . state . currentProyek } ;
payload . columns . push ( proyekPayload ) payload . columns . push ( proyekPayload )
} else { } else {
let proyekPayload = { "name" : "proyek_id" , "logic_operator" : "in" , "value" : this . state . proyekIds } ; let proyekPayload = { "name" : "proyek_id" , "logic_operator" : "in" , "value" : this . state . proyekIds } ;
payload . columns . push ( proyekPayload ) payload . columns . push ( proyekPayload )
} }
const result = await axios const result = await axios
. post ( K3 _SEARCH , payload , config ) . post ( K3 _SEARCH , payload , 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 ) {
let resData = result . data . data || [ ] let resData = result . data . data || [ ]
console . log ( "cek resdata" , resData ) console . log ( "cek resdata" , resData )
this . setState ( { dataTable : resData , totalPage : result . data . totalRecord } ) ; this . setState ( { dataTable : resData , totalPage : result . data . totalRecord } ) ;
} else { } else {
NotificationManager . error ( 'Gagal Mengambil Data!!' , 'Failed' ) ; NotificationManager . error ( 'Gagal Mengambil Data!!' , 'Failed' ) ;
} }
} }
@ -239,7 +233,7 @@ export default class index extends Component {
. then ( res => res ) . then ( res => res )
. catch ( ( error ) => error . response ) ; . catch ( ( error ) => error . response ) ;
if ( result . message !== undefined ) { if ( result . message !== undefined ) {
if ( result . message === "Data Has Been Deleted" ) { if ( result . message === "Data Has Been Deleted" ) {
this . getDataLaporanK3 ( ) this . getDataLaporanK3 ( )
this . setState ( { idDelete : 0 , alertDelete : false } ) this . setState ( { idDelete : 0 , alertDelete : false } )
@ -248,7 +242,7 @@ export default class index extends Component {
this . setState ( { idDelete : 0 , alertDelete : false } ) this . setState ( { idDelete : 0 , alertDelete : false } )
NotificationManager . error ( 'Data division gagal dihapus!!' , 'Failed!!' ) ; NotificationManager . error ( 'Data division gagal dihapus!!' , 'Failed!!' ) ;
} }
} else { } else {
if ( result . data . message === "Data Has Been Deleted" ) { if ( result . data . message === "Data Has Been Deleted" ) {
this . getDataLaporanK3 ( ) this . getDataLaporanK3 ( )
this . setState ( { idDelete : 0 , alertDelete : false } ) this . setState ( { idDelete : 0 , alertDelete : false } )
@ -262,7 +256,7 @@ export default class index extends Component {
saveDivision = async ( data ) => { saveDivision = async ( data ) => {
let url = BASE _URL + "employee_devision.php?act=input" ; let url = BASE _URL + "employee_devision.php?act=input" ;
const formData = new FormData ( ) const formData = new FormData ( )
formData . append ( 'name' , data . name ) ; formData . append ( 'name' , data . name ) ;
formData . append ( 'description' , data . description ) ; formData . append ( 'description' , data . description ) ;
@ -270,14 +264,14 @@ export default class index extends Component {
. then ( res => res ) . then ( res => res )
. catch ( ( error ) => error . response ) ; . catch ( ( error ) => error . response ) ;
if ( result . message !== undefined ) { if ( result . message !== undefined ) {
if ( result . message === "Data Has Been Saved" ) { if ( result . message === "Data Has Been Saved" ) {
this . getDataLaporanK3 ( ) ; this . getDataLaporanK3 ( ) ;
NotificationManager . success ( 'Data division berhasil ditambahkan!!' , 'Success!!' ) ; NotificationManager . success ( 'Data division berhasil ditambahkan!!' , 'Success!!' ) ;
} else { } else {
NotificationManager . error ( ` ${ result . data . message } ` , 'Failed!!' ) ; NotificationManager . error ( ` ${ result . data . message } ` , 'Failed!!' ) ;
} }
} else { } else {
if ( result . data . message === "Data Has Been Saved" ) { if ( result . data . message === "Data Has Been Saved" ) {
this . getDataLaporanK3 ( ) ; this . getDataLaporanK3 ( ) ;
NotificationManager . success ( 'Data division berhasil ditambahkan!!' , 'Success!!' ) ; NotificationManager . success ( 'Data division berhasil ditambahkan!!' , 'Success!!' ) ;
@ -285,12 +279,12 @@ export default class index extends Component {
NotificationManager . error ( ` ${ result . data . message } ` , 'Failed!!' ) ; NotificationManager . error ( ` ${ result . data . message } ` , 'Failed!!' ) ;
} }
} }
} }
editDataDivision = async ( data ) => { editDataDivision = async ( data ) => {
let url = "" ; let url = "" ;
const formData = new FormData ( ) ; const formData = new FormData ( ) ;
formData . append ( 'name' , data . name ) ; formData . append ( 'name' , data . name ) ;
formData . append ( 'description' , data . description ) ; formData . append ( 'description' , data . description ) ;
@ -299,14 +293,14 @@ export default class index extends Component {
. then ( res => res ) . then ( res => res )
. catch ( ( error ) => error . response ) ; . catch ( ( error ) => error . response ) ;
if ( result . data !== undefined ) { if ( result . data !== undefined ) {
if ( result . data . message === "Data Has Been Edited" ) { if ( result . data . message === "Data Has Been Edited" ) {
this . getDataLaporanK3 ( ) ; this . getDataLaporanK3 ( ) ;
NotificationManager . success ( 'Data division berhasil diedit!!' , 'Success!!' ) ; NotificationManager . success ( 'Data division berhasil diedit!!' , 'Success!!' ) ;
} else { } else {
NotificationManager . error ( 'Data division gagal diedit!!' , 'Failed!!' ) ; NotificationManager . error ( 'Data division gagal diedit!!' , 'Failed!!' ) ;
} }
}
}
} }
@ -342,13 +336,13 @@ export default class index extends Component {
} }
handleDatePicker = ( date , dateString ) => { handleDatePicker = ( date , dateString ) => {
this . setState ( { startDate : date [ 0 ] , endDate : date [ 1 ] } , ( ) => { this . setState ( { startDate : date [ 0 ] , endDate : date [ 1 ] } , ( ) => {
this . getDataLaporanK3 ( ) ; this . getDataLaporanK3 ( ) ;
} ) } )
} }
handleTipe = ( e ) => { handleTipe = ( e ) => {
this . setState ( { typeClock : e . target . value } , ( ) => { this . setState ( { typeClock : e . target . value } , ( ) => {
this . getDataLaporanK3 ( ) ; this . getDataLaporanK3 ( ) ;
} ) ; } ) ;
} }
@ -358,139 +352,140 @@ export default class index extends Component {
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" ) ;
let currentProyek = this . state . currentProyek let currentProyek = this . state . currentProyek
const payload = { const payload = {
"paging" : { "paging" : {
"start" : 0 , "start" : 0 ,
"length" : - 1 "length" : - 1
} , } ,
"columns" : [ "columns" : [
{ "name" : "report_date" , "logic_operator" : "range" , "value" : dateStart , "value1" : dateEnd , "operator" : "AND" } , { "name" : "report_date" , "logic_operator" : "range" , "value" : dateStart , "value1" : dateEnd , "operator" : "AND" } ,
{ "name" : "name" , "logic_operator" : "ilike" , "value" : this . state . search , "operator" : "AND" , "table_name" : "m_users" } { "name" : "name" , "logic_operator" : "ilike" , "value" : this . state . search , "operator" : "AND" , "table_name" : "m_users" }
] , ] ,
"joins" : [ "joins" : [
{ {
"name" : "m_users" , "name" : "m_users" ,
"column_join" : "user_id" , "column_join" : "user_id" ,
"column_results" : [ "column_results" : [
"name" , "name" ,
] ]
} }
] , ] ,
"orders" : { "orders" : {
"columns" : [ "columns" : [
"id" "id"
] , ] ,
"ascending" : false "ascending" : false
} , } ,
"child_data" : { "child_data" : {
"table_name" : "t_report_k3_detail" , "table_name" : "t_report_k3_detail" ,
"column_table" : "report_k3_id" , "column_table" : "report_k3_id" ,
"column_name" : "id" "column_name" : "id"
} }
} }
if ( currentProyek ) { if ( currentProyek ) {
let proyekPayload = { "name" : "proyek_id" , "logic_operator" : "=" , "value" : this . state . currentProyek } ; let proyekPayload = { "name" : "proyek_id" , "logic_operator" : "=" , "value" : this . state . currentProyek } ;
payload . columns . push ( proyekPayload ) payload . columns . push ( proyekPayload )
} else { } else {
let proyekPayload = { "name" : "proyek_id" , "logic_operator" : "in" , "value" : this . state . proyekIds } ; let proyekPayload = { "name" : "proyek_id" , "logic_operator" : "in" , "value" : this . state . proyekIds } ;
payload . columns . push ( proyekPayload ) payload . columns . push ( proyekPayload )
} }
const result = await axios const result = await axios
. post ( K3 _SEARCH , payload , config ) . post ( K3 _SEARCH , payload , 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 ) {
let resData = result . data . data || [ ] let resData = result . data . data || [ ]
console . log ( "cek res data" , resData ) console . log ( "cek res data" , resData )
const excelData = [ ] ; const excelData = [ ] ;
resData . map ( ( n , index ) => { resData . map ( ( n , index ) => {
let dataRow = { let dataRow = {
"Nama Human Resource" : n . join _first _name ? n . join _first _name : "-" , "Nama Human Resource" : n . join _first _name ? n . join _first _name : "-" ,
"Tanggal Lapor" : n . report _date ? moment ( n . report _date ) . format ( "DD-MM-YYYY HH:mm:ss" ) : "-" , "Tanggal Lapor" : n . report _date ? moment ( n . report _date ) . format ( "DD-MM-YYYY HH:mm:ss" ) : "-" ,
"Perlengkapan Dikenakan" : n . k3 _checked . length ? n . k3 _checked . join ( ) : "-" , "Perlengkapan Dikenakan" : n . k3 _checked . length ? n . k3 _checked . join ( ) : "-" ,
"Perlengkapan Tidak Dikenakan" : n . k3 _not _checked . length ? n . k3 _not _checked . join ( ) : "-" , "Perlengkapan Tidak Dikenakan" : n . k3 _not _checked . length ? n . k3 _not _checked . join ( ) : "-" ,
"Description" : n . description ? n . description : "-" "Description" : n . description ? n . description : "-"
} }
excelData . push ( dataRow ) excelData . push ( dataRow )
} ) } )
this . setState ( { dataExport : excelData } ) this . setState ( { dataExport : excelData } )
} else { } else {
NotificationManager . error ( 'Gagal Export Data!!' , 'Failed' ) ; NotificationManager . error ( 'Gagal Export Data!!' , 'Failed' ) ;
}
}
} }
exportExcel = ( ) => { exportExcel = ( ) => {
const dataExcel = this . state . dataExport || [ ] ; const dataExcel = this . state . dataExport || [ ] ;
const fileName = ` Data Laporan K3.xlsx ` ; const fileName = ` Data Laporan K3.xlsx ` ;
const ws = XLSX . utils . json _to _sheet ( dataExcel ) ; const ws = XLSX . utils . json _to _sheet ( dataExcel ) ;
const wb = XLSX . utils . book _new ( ) ; const wb = XLSX . utils . book _new ( ) ;
XLSX . utils . book _append _sheet ( wb , ws , ` Data Laporan K3 ` ) ; XLSX . utils . book _append _sheet ( wb , ws , ` Data Laporan K3 ` ) ;
XLSX . writeFile ( wb , fileName ) ; XLSX . writeFile ( wb , fileName ) ;
this . setState ( { dataExport : [ ] } ) this . setState ( { dataExport : [ ] } )
} }
lihatFoto = ( data ) => { lihatFoto = ( data ) => {
this . showChildDialog ( ) ; this . showChildDialog ( ) ;
this . setState ( { dataImage : data } , ( ) => { this . setState ( { dataImage : data } , ( ) => {
this . setState ( { openDialog : true } ) ; this . setState ( { openDialog : true } ) ;
} ) ; } ) ;
} }
renderTable = ( ) => { renderTable = ( ) => {
const { t } = this . props ;
const dataTable2 = this . state . dataTable || [ ] ; const dataTable2 = this . state . dataTable || [ ] ;
return ( return (
< tbody > < tbody >
{ dataTable2 . length !== 0 ? dataTable2 . map ( ( n ) => { { dataTable2 . length !== 0 ? dataTable2 . map ( ( n ) => {
return ( return (
< tr key = { n . id } > < tr key = { n . id } >
< td > { n . join _first _name ? n . join _first _name : "-" } < / t d > < td > { n . join _first _name ? n . join _first _name : "-" } < / t d >
< td > { n . report _date ? moment ( n . report _date ) . format ( "DD-MM-YYYY HH:mm:ss" ) : "-" } < / t d > < td > { n . report _date ? moment ( n . report _date ) . format ( "DD-MM-YYYY HH:mm:ss" ) : "-" } < / t d >
< td > { n . k3 _checked . length ? n . k3 _checked . join ( ) : "-" } < / t d > < td > { n . k3 _checked . length ? n . k3 _checked . join ( ) : "-" } < / t d >
< td > { n . k3 _not _checked . length ? n . k3 _not _checked . join ( ) : "-" } < / t d > < td > { n . k3 _not _checked . length ? n . k3 _not _checked . join ( ) : "-" } < / t d >
< td > { n . description ? n . description : "-" } < / t d > < td > { n . description ? n . description : "-" } < / t d >
< td > { n . image ? < Tooltip title = "Lihat Foto" > < i onClick = { ( ) => this . lihatFoto ( n . image ) } className = 'fa fa-image' > < / i > < / T o o l t i p > : " " } < / t d > < td > { n . image ? < Tooltip title = { this . props . t ( 'image' ) } > < i onClick = { ( ) => this . lihatFoto ( n . image ) } className = 'fa fa-image' > < / i > < / T o o l t i p > : " " } < / t d >
< / t r > < / t r >
) )
} ) : < tr > } ) : < tr >
< td colSpan = "9" align = "center" > No Data Available < / t d > < td colSpan = "9" align = "center" > { this . props . t ( 'noData' ) } < / t d >
< / t r > < / t r >
}
}
< / t b o d y > < / t b o d y >
) )
} }
handleChangeDay = ( e ) => { handleChangeDay = ( e ) => {
const val = e . target . value ; const val = e . target . value ;
this . setState ( { currentDay : val } ) ; this . setState ( { currentDay : val } ) ;
if ( val === "today" ) { if ( val === "today" ) {
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" ) {
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" ) {
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 {
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
} ) } )
} }
@ -498,26 +493,35 @@ export default class index extends Component {
setupSelectProyek = ( ) => { setupSelectProyek = ( ) => {
let allDataProyek = this . state . allDataProyek let allDataProyek = this . state . allDataProyek
return ( return (
< > < >
{ allDataProyek . map ( ( val , index ) => { { allDataProyek . map ( ( val , index ) => {
return ( return (
< Option key = { index } value = { parseInt ( val . id ) } > { val . nama } < / O p t i o n > < Option key = { index } value = { parseInt ( val . id ) } > { val . nama } < / O p t i o n >
) )
} ) } )
} }
< / > < / >
) )
} }
onChangeProyek = ( val ) => { onChangeProyek = ( val ) => {
this . setState ( { currentProyek : val } ) ; this . setState ( { currentProyek : val } ) ;
} }
delay = ( ms ) => new Promise ( res => setTimeout ( res , ms ) ) ; delay = ( ms ) => new Promise ( res => setTimeout ( res , ms ) ) ;
render ( ) { render ( ) {
const { tooltipExport , dataTable , openDialog , currentPage , rowsPerPage , totalPage , search , tooltipEdit , tooltipDelete } = this . state const column = [
{ name : this . props . t ( 'nameHR' ) } ,
{ name : this . props . t ( 'dateReport' ) } ,
{ name : this . props . t ( 'gearUse' ) } ,
{ name : this . props . t ( 'gearNotUse' ) } ,
{ name : this . props . t ( 'description' ) } ,
{ name : this . props . t ( 'action' ) } ,
]
const t = this . props ;
const { tooltipExport , dataTable , openDialog , currentPage , rowsPerPage , totalPage , search , tooltipEdit , tooltipDelete } = this . state
return ( return (
< div > < div >
< NotificationContainer / > < NotificationContainer / >
@ -527,12 +531,12 @@ export default class index extends Component {
showCancel showCancel
confirmBtnText = "Delete" confirmBtnText = "Delete"
confirmBtnBsStyle = "danger" confirmBtnBsStyle = "danger"
title = "Are you sure?" title = { this . props . t ( 'deleteConfirm' ) }
onConfirm = { this . onConfirmDelete } onConfirm = { this . onConfirmDelete }
onCancel = { ( ) => this . setState ( { alertDelete : false , idDelete : 0 } ) } onCancel = { ( ) => this . setState ( { alertDelete : false , idDelete : 0 } ) }
focusCancelBtn focusCancelBtn
> >
Data report k3 akan terhapus ! ! { this . props . t ( 'deleteMsg' ) }
< / S w e e t A l e r t > < / S w e e t A l e r t >
< DialogForm < DialogForm
openDialog = { openDialog } openDialog = { openDialog }
@ -545,34 +549,33 @@ export default class index extends Component {
< CardHeader style = { { display : "flex" , justifyContent : "space-between" } } > < CardHeader style = { { display : "flex" , justifyContent : "space-between" } } >
< h4 > { this . props . params . name } < / h 4 > < h4 > { this . props . params . name } < / h 4 >
< div > < div >
< Tooltip title = "Export Excel" > < Tooltip title = { this . props . t ( 'exportExcel' ) } >
< Button id = "TooltipExport" color = "primary" onClick = { ( ) => this . handleExportExcel ( ) } > < i className = "fa fa-print" > < / i > < / B u t t o n > < Button id = "TooltipExport" color = "primary" onClick = { ( ) => this . handleExportExcel ( ) } > < i className = "fa fa-print" > < / i > < / B u t t o n >
< / T o o l t i p > < / T o o l t i p >
{ /* <Button color="success" onClick={() => this.handleExportExcel()}>Export Excel</Button> */ }
< / 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 >
< div style = { { display : "flex" , justifyContent : "space-between" } } > < div style = { { display : "flex" , justifyContent : "space-between" } } >
< div style = { { width : "100%" , display : "flex" , alignItems : "center" } } > < div style = { { width : "100%" , display : "flex" , alignItems : "center" } } >
< div style = { { width : "100%" , marginRight : "10px" , maxWidth : "200px" } } > < div style = { { width : "100%" , marginRight : "10px" , maxWidth : "200px" } } >
< Select showSearch defaultValue = { this . state . currentProyek } onChange = { this . onChangeProyek } placeholder = "Semua / Pilih Proyek >" style = { { width : '100%' } } disabled = { this . state . disableProyek } allowClear = { true } > < Select showSearch defaultValue = { this . state . currentProyek } onChange = { this . onChangeProyek } placeholder = { this . props . t ( 'searchProject' ) } style = { { width : '100%' } } disabled = { this . state . disableProyek } allowClear = { true } >
{ this . setupSelectProyek ( ) } { this . setupSelectProyek ( ) }
< / S e l e c t > < / S e l e c t >
< / d i v > < / d i v >
< div style = { { width : "100%" , marginRight : "10px" , maxWidth : "200px" } } > < div style = { { width : "100%" , marginRight : "10px" , maxWidth : "200px" } } >
< Input type = "select" onChange = { ( e ) => this . handleChangeDay ( e ) } defaultValue = { this . state . currentDay } > < 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 = "today" > { this . props . t ( 'today' ) } < / o p t i o n >
< option value = "3 day" > 3 Hari yang lalu < / o p t i o n > < option value = "3 day" > { this . props . t ( '3days' ) } < / o p t i o n >
< option value = "7 day" > 7 Hari yang lalu < / o p t i o n > < option value = "7 day" > { this . props . t ( '7days' ) } < / o p t i o n >
< / I n p u t > < / I n p u t >
< / d i v > < / d i v >
< div style = { { width : "50%" , marginTop : "3px" } } > < div style = { { width : "50%" , marginTop : "3px" } } >
< RangePicker size = "default" allowClear = { false } value = { [ this . state . startDate , this . state . endDate ] } onChange = { this . handleDatePicker } / > { ' ' } < RangePicker size = "default" allowClear = { false } value = { [ this . state . startDate , this . state . endDate ] } onChange = { this . handleDatePicker } / > { ' ' }
< Button color = "primary" onClick = { ( ) => this . getDataLaporanK3 ( ) } > Cari < / B u t t o n > < Button color = "primary" onClick = { ( ) => this . getDataLaporanK3 ( ) } > { this . props . t ( 'search' ) } < / B u t t o n >
< / d i v >
< / d i v > < / d i v >
< Input onChange = { this . handleSearch } value = { search } type = "text" name = "search" id = "search" placeholder = "Cari nama human resource" style = { { maxWidth : "200px" , marginBottom : "20px" } } / >
< / d i v > < / d i v >
< Input onChange = { this . handleSearch } value = { search } type = "text" name = "search" id = "search" placeholder = { this . props . t ( 'searchHR' ) } style = { { maxWidth : "200px" , marginBottom : "20px" } } / >
< / d i v >
< Table responsive striped hover > < Table responsive striped hover >
< thead > < thead >
< tr > < tr >
@ -584,7 +587,7 @@ export default class index extends Component {
} ) } } ) }
< / t r > < / t r >
< / t h e a d > < / t h e a d >
{ this . renderTable ( ) } { this . renderTable ( ) }
< / T a b l e > < / T a b l e >
< Pagination < Pagination
showSizeChanger showSizeChanger
@ -601,3 +604,4 @@ export default class index extends Component {
) )
} }
} }
export default withTranslation ( ) ( index ) ;
