@ -6,9 +6,9 @@ import axios from "../../../const/interceptorApi"
import moment from 'moment' import moment from 'moment'
import { Card , CardBody , CardHeader , Col , Row , Input } from 'reactstrap' ; import { Card , CardBody , CardHeader , Col , Row , Input } from 'reactstrap' ;
import { NotificationContainer , NotificationManager } from 'react-notifications' ; import { NotificationContainer , NotificationManager } from 'react-notifications' ;
import { PROJECT _PHASE _ADD , PROJECT _PHASE _EDIT , PROJECT _PHASE _DELETE , PROJECT _PHASE _SEARCH , BASE _OSPRO } from '../../../const/ApiConst' ; import { PROJECT _PHASE _ADD , PROJECT _PHASE _EDIT , PROJECT _PHASE _DELETE , PROJECT _PHASE _SEARCH , PROJECT _PHASE _LIST , BASE _OSPRO } from '../../../const/ApiConst' ;
import { Pagination , Button , Tooltip , Table } from 'antd' ; import { Pagination , Button , Tooltip , Table } from 'antd' ;
import { useTranslation } from 'react-i18next' ;
const token = window . localStorage . getItem ( 'token' ) ; const token = window . localStorage . getItem ( 'token' ) ;
const config = { const config = {
headers : headers :
@ -40,6 +40,7 @@ const ProjectPhase = ({ params }) => {
const [ clickOpenModal , setClickOpenModal ] = useState ( false ) const [ clickOpenModal , setClickOpenModal ] = useState ( false )
const [ currentPage , setCurrentPage ] = useState ( 1 ) const [ currentPage , setCurrentPage ] = useState ( 1 )
const [ dataEdit , setDataEdit ] = useState ( [ ] ) const [ dataEdit , setDataEdit ] = useState ( [ ] )
const [ dataExport , setDataExport ] = useState ( [ ] )
const [ dataTable , setDatatable ] = useState ( [ ] ) const [ dataTable , setDatatable ] = useState ( [ ] )
const [ idDelete , setIdDelete ] = useState ( 0 ) const [ idDelete , setIdDelete ] = useState ( 0 )
const [ idPhaseProject , setIdPhaseProject ] = useState ( 0 ) const [ idPhaseProject , setIdPhaseProject ] = useState ( 0 )
@ -49,22 +50,28 @@ const ProjectPhase = ({ params }) => {
const [ search , setSearch ] = useState ( '' ) const [ search , setSearch ] = useState ( '' )
const [ totalPage , setTotalPage ] = useState ( 0 ) const [ totalPage , setTotalPage ] = useState ( 0 )
const [ typeDialog , setTypeDialog ] = useState ( 'Save' ) const [ typeDialog , setTypeDialog ] = useState ( 'Save' )
const { t } = useTranslation ( )
useEffect ( ( ) => { useEffect ( ( ) => {
getDataProjectPhase ( ) getDataProjectPhase ( )
} , [ currentPage , rowsPerPage , search ] ) } , [ currentPage , rowsPerPage , search ] )
useEffect ( ( ) => {
const cekData = dataExport || [ ]
if ( cekData . length > 0 ) {
exportExcel ( )
}
} , [ dataExport ] )
const getDataProjectPhase = async ( ) => { const getDataProjectPhase = async ( ) => {
let start = 0 ; let start = 0 ;
if ( currentPage !== 1 && currentPage > 1 ) { if ( currentPage !== 1 && currentPage > 1 ) {
start = ( currentPage * rowsPerPage ) - rowsPerPage start = ( currentPage * rowsPerPage ) - rowsPerPage
} }
const payload = { const payload = {
"columns" : [ "columns" : [
{ {
"name" : "name" , "name" : "name" ,
"logic_operator" : "like" , "logic_operator" : "i like" ,
"value" : search , "value" : search ,
"operator" : "AND" "operator" : "AND"
} }
@ -80,18 +87,16 @@ const ProjectPhase = ({ params }) => {
"start" : start "start" : start
} }
} }
// let url = `${BASE_OSPRO}/api/project-phase/list?start=${start}&length=${rowsPerPage}&orderby=id&asc=false&column=name&logic=ilike&value=${search}`
/ * c o n s t r e s u l t = a w a i t a x i o s const result = await axios
. post ( PROJECT _PHASE _SEARCH , payload , config ) . post ( PROJECT _PHASE _SEARCH , payload , HEADER )
. then ( res => res ) . then ( ( res ) => res )
. catch ( ( error ) => error . response ) ; * / . catch ( ( err ) => err . response ) ;
//const result = await axios.post(PROJECT_PHASE_SEARCH, payload, HEADER).then(res => res).catch(err => err.response)
const URL = ` ${ BASE _OSPRO } /api/project-phase/list `
const result = await axios . get ( URL , HEADER ) . then ( res => res ) . catch ( err => err . response )
console . log ( result )
if ( result && result . data && result . data . code == 200 ) { if ( result && result . data && result . data . code == 200 ) {
result . data . data . map ( ( res ) => {
res . key = res . id . toString ( )
} ) ;
setDatatable ( result . data . data ) ; setDatatable ( result . data . data ) ;
setTotalPage ( result . data . totalRecord ) ; setTotalPage ( result . data . totalRecord ) ;
} else { } else {
@ -104,7 +109,6 @@ const ProjectPhase = ({ params }) => {
setSearch ( value ) ; setSearch ( value ) ;
setCurrentPage ( 1 ) setCurrentPage ( 1 )
} ; } ;
const handleOpenDialog = ( type ) => { const handleOpenDialog = ( type ) => {
setOpenDialog ( true ) setOpenDialog ( true )
setTypeDialog ( type ) setTypeDialog ( type )
@ -113,19 +117,59 @@ const ProjectPhase = ({ params }) => {
const handleExportExcel = async ( ) => { const handleExportExcel = async ( ) => {
let start = 0 ; let start = 0 ;
if ( currentPage !== 1 && currentPage > 1 ) {
start = ( currentPage * rowsPerPage ) - rowsPerPage
}
const payload = { const payload = {
"paging" : { "start" : start , "length" : - 1 } ,
"columns" : [ "columns" : [
{ "name" : "name" , "logic_operator" : "ilike" , "value" : search , "operator" : "AND" } {
"name" : "name" ,
"logic_operator" : "like" ,
"value" : search ,
"operator" : "AND"
}
] , ] ,
"joins" : [ ] , "orders" : {
"orders" : { "columns" : [ "id" ] , "ascending" : false } "ascending" : true ,
"columns" : [
'id'
]
} ,
"paging" : {
"length" : rowsPerPage ,
"start" : start
}
} }
const result = await axios const result = await axios
. post ( PROJECT _PHASE _SEARCH , payload ) . post ( PROJECT _PHASE _SEARCH , payload , HEADER )
. then ( res => res ) . then ( res => res )
. catch ( ( error ) => error . response ) ; . catch ( ( error ) => error . response ) ;
if ( result && result . data && result . data . code == 200 ) {
let resData = result . data . data ;
const excelData = [ ] ;
resData . map ( ( val , index ) => {
let dataRow = {
"Nama" : val . name ,
"Color" : val . color ,
}
excelData . push ( dataRow )
} )
await setDataExport ( excelData )
} else {
NotificationManager . error ( 'Gagal Export Data!!' , 'Failed' ) ;
}
}
const exportExcel = ( ) => {
const dataExcel = dataExport || [ ] ;
const fileName = ` Data ${ pageName } .xlsx ` ;
const ws = XLSX . utils . json _to _sheet ( dataExcel ) ;
const wb = XLSX . utils . book _new ( ) ;
XLSX . utils . book _append _sheet ( wb , ws , ` Data ${ pageName } ` ) ;
XLSX . writeFile ( wb , fileName ) ;
setDataExport ( [ ] )
} }
const handleEdit = ( data ) => { const handleEdit = ( data ) => {
@ -235,7 +279,7 @@ const ProjectPhase = ({ params }) => {
if ( dataTable . length === 0 ) { if ( dataTable . length === 0 ) {
return ( return (
< tr > < tr >
< td align = "center" colSpan = "3" > Tidak ada data project phase < / t d > < td align = "center" colSpan = "3" > { t ( 'noData' ) } < / t d >
< / t r > < / t r >
) )
} }
@ -244,22 +288,22 @@ const ProjectPhase = ({ params }) => {
const renderTable = useMemo ( ( ) => { const renderTable = useMemo ( ( ) => {
const columns = [ const columns = [
{ {
title : 'Action' , title : t ( 'action' ) ,
dataIndex : '' , dataIndex : '' ,
key : 'x' , key : 'x' ,
className : 'nowrap' , className : 'nowrap' ,
render : ( text , record ) => < > render : ( text , record ) => < >
< Tooltip title = "Delete" > < Tooltip title = { t ( 'delete' ) } >
< i className = "fa fa-trash" style = { { color : 'red' , marginRight : '10px' , cursor : "pointer" } } onClick = { ( ) => handleDelete ( text . id ) } > < / i > < i className = "fa fa-trash" style = { { color : 'red' , marginRight : '10px' , cursor : "pointer" } } onClick = { ( ) => handleDelete ( text . id ) } > < / i >
< / T o o l t i p > < / T o o l t i p >
< Tooltip title = "Edit" > < Tooltip title = { t ( 'Edit' ) } >
< i className = "fa fa-edit" style = { { color : 'green' , cursor : "pointer" } } onClick = { ( ) => handleEdit ( text ) } > < / i > < i className = "fa fa-edit" style = { { color : 'green' , cursor : "pointer" } } onClick = { ( ) => handleEdit ( text ) } > < / i >
< / T o o l t i p > { " " } < / T o o l t i p > { " " }
< / > , < / > ,
} , } ,
{ title : 'Fase' , dataIndex : 'name' , key : 'name' , className : "nowrap" } , { title : t ( 'phase' ) , dataIndex : 'name' , key : 'name' , className : "nowrap" } ,
{ {
title : 'Warna' , title : t ( 'color' ) ,
dataIndex : 'color' , dataIndex : 'color' ,
key : 'color' , key : 'color' ,
render : ( text ) => < > render : ( text ) => < >
@ -289,12 +333,12 @@ const ProjectPhase = ({ params }) => {
showCancel showCancel
confirmBtnText = "Delete" confirmBtnText = "Delete"
confirmBtnBsStyle = "danger" confirmBtnBsStyle = "danger"
title = { ` Are you sure? ` } title = { t ( 'deleteConfirm' ) }
onConfirm = { onConfirmDelete } onConfirm = { onConfirmDelete }
onCancel = { ( ) => cancelDelete ( ) } onCancel = { cancelDelete }
focusCancelBtn focusCancelBtn
> >
Delete this data { 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 }
@ -310,9 +354,15 @@ const ProjectPhase = ({ params }) => {
< h4 className = "capitalize" > { pageName } < / h 4 > < h4 className = "capitalize" > { pageName } < / h 4 >
< Row > < Row >
< Col > < Col >
< Tooltip title = "Add new data" > < Input onChange = { handleSearch } value = { search } type = "text" name = "search" id = "search" placeholder = { t ( 'searchPhase' ) } / >
< / C o l >
< Col >
< Tooltip title = { t ( 'projectPhase' ) } >
< Button style = { { background : "#4caf50" , color : "#fff" } } onClick = { ( ) => handleOpenDialog ( 'Save' ) } > < i className = "fa fa-plus" > < / i > < / B u t t o n > < Button style = { { background : "#4caf50" , color : "#fff" } } onClick = { ( ) => handleOpenDialog ( 'Save' ) } > < i className = "fa fa-plus" > < / i > < / B u t t o n >
< / T o o l t i p > < / T o o l t i p >
< Tooltip title = { t ( 'exportExcel' ) } >
< Button style = { { marginLeft : "5px" } } onClick = { ( ) => handleExportExcel ( ) } > < i className = "fa fa-print" > < / i > < / B u t t o n >
< / T o o l t i p >
< / C o l > < / C o l >
< / R o w > < / R o w >
< / C a r d H e a d e r > < / C a r d H e a d e r >
ardhi
2 years ago