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