@ -1,15 +1,13 @@
import * as XLSX from 'xlsx' ; import * as XLSX from 'xlsx' ;
import DialogForm from './DialogForm' ; import DialogForm from './DialogForm' ;
import React , { Component } from 'react' ; import React , { Component } from 'react' ;
import SweetAlert from 'react-bootstrap-sweetalert' ;
import axios from 'axios' ; import axios from 'axios' ;
import { Button } from 'reactstrap' ; import { Button } from 'reactstrap' ;
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 _ROLE _ADD , TRANSACTION _SEARCH , PROJECT _ROLE _EDIT , PROJECT _ROLE _DELETE } from '../../../const/ApiConst.js' ; import { TRANSACTION _EDIT , TRANSACTION _SEARCH , STORAGE _LIMIT _INFORMATION _ALL _COMPANY , TRANSACTION _ADD } from '../../../const/ApiConst.js' ;
import { Pagination , Tooltip , Table } from 'antd' ; import { Pagination , Tooltip , Table } from 'antd' ;
import { withTranslation } from 'react-i18next' ; import { withTranslation } from 'react-i18next' ;
import { checkActMenup } from '../../../const/CustomFunc' ;
import moment from "moment" ; import moment from "moment" ;
const LENGTH _DATA = 10 const LENGTH _DATA = 10
@ -17,17 +15,11 @@ class index extends Component {
constructor ( props ) { constructor ( props ) {
super ( props ) ; super ( props ) ;
this . state = { this . state = {
alertDelete : false ,
alertNotDelete : false ,
currentPage : 1 , currentPage : 1 ,
dataEdit : null , dataEdit : [ ] ,
dataExport : [ ] , dataExport : [ ] ,
dataGs : [ ] ,
dataIdHo : [ ] ,
dataTable : [ ] , dataTable : [ ] ,
dialogMenuForm : false , typeDialog : 'Save' ,
idDelete : 0 ,
idRoles : 0 ,
menuRoles : [ ] , menuRoles : [ ] ,
openDialog : false , openDialog : false ,
page : 0 , page : 0 ,
@ -40,16 +32,8 @@ class index extends Component {
tooltipMenu : false , tooltipMenu : false ,
tooltipTambah : false , tooltipTambah : false ,
totalPage : 0 , totalPage : 0 ,
typeDialog : 'Save' ,
company _id : props . company _id || 0 ,
role _name : props . role _name || '' , role _name : props . role _name || '' ,
role _id : props . role _id || 0 ,
user _id : props . user _id || 0 ,
isLogin : props . isLogin || false ,
token : props . token || '' , token : props . token || '' ,
all _project : props . all _project || null ,
hierarchy : props . hierarchy || [ ] ,
user _name : props . user _name || '' ,
config : { config : {
headers : { headers : {
Authorization : ` Bearer ${ props . token || '' } ` , Authorization : ` Bearer ${ props . token || '' } ` ,
@ -66,36 +50,19 @@ class index extends Component {
key : 'x' , key : 'x' ,
className : 'nowrap' , className : 'nowrap' ,
render : ( text , record ) => < > render : ( text , record ) => < >
< Tooltip title = { this . props . t ( 'delete' ) } >
< i className = "fa fa-trash" style = { { color : 'red' , marginRight : 10 , cursor : "pointer" } } onClick = { ( ) => this . handleDelete ( text . id ) } > < / i >
{ / * {
checkActMenup ( '/product-transaction' , 'delete' ) ?
< i className = "fa fa-trash" style = { { color : 'red' , marginRight : 10 , cursor : "pointer" } } onClick = { ( ) => this . handleDelete ( text . id ) } > < / i >
:
null
} * / }
< / T o o l t i p >
< Tooltip title = { this . props . t ( 'edit' ) } > < Tooltip title = { this . props . t ( 'edit' ) } >
< i className = "fa fa-edit" style = { { color : 'green' , cursor : "pointer" } } onClick = { ( ) => this . handleEdit ( text ) } > < / i > < i className = "fa fa-edit" style = { { color : 'green' , cursor : "pointer" } } onClick = { ( ) => this . handleEdit ( text ) } > < / i >
{ / * {
checkActMenup ( '/product-transaction' , 'update' ) ?
< i className = "fa fa-edit" style = { { color : 'green' , cursor : "pointer" } } onClick = { ( ) => this . handleEdit ( text ) } > < / i >
:
null
} * / }
< / T o o l t i p > < / T o o l t i p >
< / > , < / > ,
} , } ,
... ( this . state . role _name === 'Super Admin' ? [ {
{ title : "Company Name" ,
title : "Company Name" , dataIndex : "join_first_company_name" ,
dataIndex : "join_first_company_name" , key : "join_first_company_name" ,
key : "join_first_company_name" , render : ( text , record ) => {
render : ( text , record ) => { return < span > { record . join _first _company _name } < / s p a n > ;
return < span > { record . join _first _company _name } < / s p a n > ; }
} } ,
} ] : [ ] )
,
{ title : 'Type Paket' , dataIndex : 'type_paket' , key : 'type_paket' , className : "nowrap" , { title : 'Type Paket' , dataIndex : 'type_paket' , key : 'type_paket' , className : "nowrap" ,
render : ( text , record ) => { render : ( text , record ) => {
return < span > { ! [ "Basic" , "Free" ] . includes ( record . type _paket ) ? 'Enterprise' : record . type _paket } < / s p a n > return < span > { ! [ "Basic" , "Free" ] . includes ( record . type _paket ) ? 'Enterprise' : record . type _paket } < / s p a n >
@ -107,16 +74,26 @@ class index extends Component {
return < span > { moment ( record . exp _ospro ) . format ( 'DD MMMM, YYYY' ) } < / s p a n > ; return < span > { moment ( record . exp _ospro ) . format ( 'DD MMMM, YYYY' ) } < / s p a n > ;
} }
} , } ,
{ title : "Storage" , dataIndex : 'size' , key : 'size' ,
render : ( text , record ) => {
return < span > { record . size } MB < / s p a n > ;
}
} ,
{ title : "Total Project" , dataIndex : 'project_total' , key : 'project_total' ,
render : ( text , record ) => {
return < span > { record . project _total } Project < / s p a n > ;
}
} ,
] ; ] ;
} }
async componentDidMount ( ) { async componentDidMount ( ) {
this . getDataTransaction ( ) ; this . getDataLimitasi ( ) ;
} }
async componentDidUpdate ( prevProps , prevState ) { async componentDidUpdate ( prevProps , prevState ) {
const { search } = this . state const { search } = this . state
if ( search !== prevState . search ) this . getDataTransaction ( ) if ( search !== prevState . search ) this . getDataLimitasi ( )
} }
handleSearch = e => { handleSearch = e => {
@ -124,6 +101,20 @@ class index extends Component {
this . setState ( { search : value , currentPage : 1 } ) this . setState ( { search : value , currentPage : 1 } )
} ; } ;
getDataLimitasi = async ( ) => {
const result = await axios
. get ( STORAGE _LIMIT _INFORMATION _ALL _COMPANY , this . state . config )
. then ( res => res )
. catch ( ( error ) => error . response ) ;
if ( result ) {
this . setState ( { dataLimit : result . data } ) ;
this . getDataTransaction ( ) ;
} else {
NotificationManager . error ( 'Gagal Mengambil Data!!' , 'Failed' ) ;
}
}
getDataTransaction = async ( ) => { getDataTransaction = async ( ) => {
let start = 0 ; let start = 0 ;
if ( this . state . currentPage !== 1 && this . state . currentPage > 1 ) { if ( this . state . currentPage !== 1 && this . state . currentPage > 1 ) {
@ -147,11 +138,7 @@ class index extends Component {
"joins" : [ ] , "joins" : [ ] ,
"orders" : { "columns" : [ "id" ] , "ascending" : false } "orders" : { "columns" : [ "id" ] , "ascending" : false }
} }
if ( this . state . role _name !== "Super Admin" ) { if ( this . state . role _name === "Super Admin" ) {
formData . columns . push (
{ "name" : "company_id" , "logic_operator" : "=" , "value" : parseInt ( this . state . company _id ) , "operator" : "AND" } ,
)
} else {
formData . columns . push ( formData . columns . push (
{ "name" : "company_id" , "logic_operator" : "is null" , "value" : "" , "operator" : "AND" } , { "name" : "company_id" , "logic_operator" : "is null" , "value" : "" , "operator" : "AND" } ,
) )
@ -168,7 +155,8 @@ 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 ) {
this . setState ( { dataTable : result . data . data , totalPage : result . data . totalRecord } ) ; this . filterDataLimitasi ( result . data . data ) ;
this . setState ( { totalPage : result . data . totalRecord } ) ;
} else { } else {
NotificationManager . error ( 'Gagal Mengambil Data!!' , 'Failed' ) ; NotificationManager . error ( 'Gagal Mengambil Data!!' , 'Failed' ) ;
} }
@ -181,109 +169,68 @@ class index extends Component {
handleCloseDialog = ( type , data ) => { handleCloseDialog = ( type , data ) => {
if ( type === "save" ) { if ( type === "save" ) {
this . saveRole ( data ) ; this . saveTransaction ( data ) ;
} else if ( type === "edit" ) { } else if ( type === "edit" ) {
this . editRole ( data ) ; this . editTransaction ( data ) ;
} }
this . setState ( { openDialog : false } ) this . setState ( { openDialog : false } )
} }
handleOpenDialogMr = ( ) => {
this . setState ( { dialogMenuForm : true } )
this . showMenuRolesDialog ( ) ;
}
handleCloseDialogMr = ( type , data ) => {
if ( type === "save" ) {
this . saveMenuRoles ( data )
}
this . setState ( { dialogMenuForm : false } )
}
toggleAddDialog = ( ) => { toggleAddDialog = ( ) => {
this . setState ( { openDialog : ! this . state . openDialog } ) this . setState ( { openDialog : ! this . state . openDialog } )
} }
onConfirmDelete = async ( ) => { saveTransaction = async ( data ) => {
const { idDelete } = this . state const formData = {
const url = PROJECT _ROLE _DELETE ( idDelete ) type _paket : data . type _paket ,
exp _ospro : data . ExpiredDateOspro ,
const result = await axios . delete ( url , this . state . config ) company _id : data . company _id
. then ( res => res ) }
. catch ( ( error ) => error . response ) ;
const result = await axios . post ( TRANSACTION _ADD , formData , this . state . config )
if ( result && result . data && result . data . code === 200 ) { . then ( res => res )
this . getDataTransaction ( ) . catch ( ( error ) => error . response ) ;
this . setState ( { idDelete : 0 , alertDelete : false } )
NotificationManager . success ( ` Data project role berhasil dihapus ` , 'Success!!' ) ; if ( result && result . data && result . data . code === 200 ) {
} else { this . getDataRoles ( ) ;
this . setState ( { idDelete : 0 , alertDelete : false } ) NotificationManager . success ( ` Data role berhasil ditambahkan ` , 'Success!!' ) ;
NotificationManager . error ( ` Data project role gagal dihapus ` , 'Failed!!' ) ; } else {
} NotificationManager . error ( ` Data role gagal ditambahkan ` , 'Failed!!' ) ;
} }
}
saveRole = async ( data ) => {
editTransaction = async ( data ) => {
const formData = { const formData = {
name : data . name , type _paket : data . type _paket ,
description : data . description , exp _ospro : data . ExpiredDateOspro ,
company _id : data . company _id
} }
const url = TRANSACTION _EDIT ( data . id )
const result = await axios . post ( PROJECT _ROLE _ADD , formData , this . state . config )
. then ( res => res )
. catch ( ( error ) => error . response ) ;
if ( result && result . data && result . data . code === 200 ) {
this . getDataTransaction ( ) ;
NotificationManager . success ( ` Data project role berhasil ditambah ` , 'Success!!' ) ;
} else {
NotificationManager . error ( ` ${ result . data . message } ` , 'Failed!!' ) ;
}
}
editRole = async ( data ) => {
const formData = {
name : data . name ,
description : data . description ,
company _id : data . company _id
}
const url = PROJECT _ROLE _EDIT ( data . id )
const result = await axios . put ( url , formData , this . state . config ) const result = await axios . put ( url , formData , this . state . 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 ) {
this . getDataTransaction ( ) ; this . getDataLimitasi ( ) ;
NotificationManager . success ( ` Data project role berhasil diedit ` , 'Success!!' ) ; NotificationManager . success ( ` Data transaksi berhasil diedit ` , 'Success!!' ) ;
} else { } else {
NotificationManager . error ( ` Data project role gagal di edit ` , ` Failed!! ` ) ; NotificationManager . error ( ` Data transaksi gagal di edit ` , ` Failed!! ` ) ;
} }
} }
handleEdit = ( data ) => { handleEdit = ( data ) => {
this . setState ( { dataEdit : data } ) ; this . setState ( { dataEdit : data } ) ;
this . handleOpenDialog ( 'Edit' ) ; this . handleOpenDialog ( 'Edit' ) ;
} }
handleDelete = ( id ) => {
id == '1' ? this . setState ( { alertNotDelete : true } ) :
this . setState ( { alertDelete : true , idDelete : id } ) ;
}
onShowSizeChange = ( current , pageSize ) => { onShowSizeChange = ( current , pageSize ) => {
this . setState ( { rowsPerPage : pageSize } , ( ) => { this . setState ( { rowsPerPage : pageSize } , ( ) => {
this . getDataTransaction ( ) ; this . getDataLimitasi ( ) ;
} ) } )
} }
onPagination = ( current , pageSize ) => { onPagination = ( current , pageSize ) => {
this . setState ( { currentPage : current , page : ( current - 1 ) * pageSize } , ( ) => { this . setState ( { currentPage : current , page : ( current - 1 ) * pageSize } , ( ) => {
this . getDataTransaction ( ) ; this . getDataLimitasi ( ) ;
} ) } )
} }
@ -312,52 +259,17 @@ class index extends Component {
} }
handleExportExcel = async ( ) => { handleExportExcel = async ( ) => {
const payload = { const { filteredDataTransaction } = this . state ;
"paging" : { "start" : 0 , "length" : - 1 } , if ( filteredDataTransaction ) {
"columns" : [ ] , const dataRes = filteredDataTransaction || [ ] ;
"group_column" : {
"operator" : "AND" ,
"group_operator" : "OR" ,
"where" : [
{
"name" : "name" ,
"logic_operator" : "~*" ,
"value" : this . state . search ,
}
]
} ,
"joins" : [ ] ,
"orders" : { "columns" : [ "id" ] , "ascending" : false }
}
if ( this . state . role _name !== "Super Admin" ) {
payload . columns . push (
{ "name" : "company_id" , "logic_operator" : "=" , "value" : this . state . company _id , "operator" : "AND" } ,
)
} else {
payload . columns . push (
{ "name" : "company_id" , "logic_operator" : "is null" , "value" : "" , "operator" : "AND" } ,
)
payload . joins . push (
{ "name" : "m_company" , "column_join" : "company_id" , "column_results" : [ "company_name" ] }
)
payload . group _column . where . push (
{ name : "company_name" , logic _operator : "~*" , value : this . state . search , table _name : "m_company" }
)
}
const result = await axios
. post ( TRANSACTION _SEARCH , payload , this . state . config )
. then ( res => res )
. catch ( ( error ) => error . response ) ;
if ( result && result . data && result . statusText == "OK" ) {
const dataRes = result . data . data || [ ] ;
const dataExport = [ ] ; const dataExport = [ ] ;
dataRes . map ( ( val , index ) => { dataRes . map ( ( val , index ) => {
let row = { } ; let row = { } ;
if ( this . state . role _name === 'Super Admin' ) { row . Company = val . join _first _company _name ;
row . Company = val . join _first _company _name ; row [ "Type Paket" ] = val . type _paket === "" ? "Enterprise" : val . type _paket ;
} row [ "Expired Date" ] = moment ( val . exp _ospro ) . format ( "DD-MM-YYYY" ) ;
row . Nama = val . name ; row . Storage = parseFloat ( val . size ) + " MB" ;
row . Deskripsi = val . description ; row [ "Total Project" ] = val . project _total + " Project" ;
dataExport . push ( row ) ; dataExport . push ( row ) ;
} ) } )
this . setState ( { dataExport : dataExport } , ( ) => { this . setState ( { dataExport : dataExport } , ( ) => {
@ -370,52 +282,38 @@ class index extends Component {
exportExcel = ( ) => { exportExcel = ( ) => {
const dataExcel = this . state . dataExport || [ ] ; const dataExcel = this . state . dataExport || [ ] ;
const fileName = "Data Project Role .xlsx" ; const fileName = "Data Transaksi .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 Project Role ' ) ; XLSX . utils . book _append _sheet ( wb , ws , 'Data Transaksi ' ) ;
XLSX . writeFile ( wb , fileName ) ; XLSX . writeFile ( wb , fileName ) ;
} }
filterDataLimitasi = ( transaction ) => {
const { dataLimit } = this . state ;
const filteredTransaction = transaction . map ( dataParam => {
const matchingData = dataLimit . find ( data => dataParam . join _first _company _name === data . company _name ) ;
return {
... dataParam ,
... matchingData || { }
} ;
} ) ;
this . setState ( { filteredDataTransaction : filteredTransaction } ) ;
}
render ( ) { render ( ) {
const { t } = this . props ; const { filteredDataTransaction , openDialog , currentPage , rowsPerPage , totalPage , search } = this . state
const { dataTable , openDialog , currentPage , rowsPerPage , totalPage , search , tooltipEdit , tooltipDelete , tooltipMenu } = this . state
let noSeq = 0 ;
return ( return (
< div > < div >
< NotificationContainer / > < NotificationContainer / >
< SweetAlert
show = { this . state . alertDelete }
warning
showCancel
confirmBtnText = "Delete"
confirmBtnBsStyle = "danger"
title = { this . props . t ( 'deleteConfirm' ) }
onConfirm = { this . onConfirmDelete }
onCancel = { ( ) => this . setState ( { alertDelete : false , idDelete : 0 } ) }
focusCancelBtn
>
{ this . props . t ( 'deleteMsg' ) }
< / S w e e t A l e r t >
< SweetAlert
show = { this . state . alertNotDelete }
warning
confirmBtnText = "Can't Delete"
confirmBtnBsStyle = "danger"
title = "Data can't be delete!"
onConfirm = { ( ) => this . setState ( { alertNotDelete : false } ) }
>
Data project role tidak dapat di hapus ! !
< / S w e e t A l e r t >
< DialogForm < DialogForm
openDialog = { openDialog } openDialog = { openDialog }
closeDialog = { this . handleCloseDialog } closeDialog = { this . handleCloseDialog }
toggleDialog = { ( ) => this . toggleAddDialog } toggleDialog = { ( ) => this . toggleAddDialog }
typeDialog = { this . state . typeDialog }
dataEdit = { this . state . dataEdit } dataEdit = { this . state . dataEdit }
showDialog = { showDialog => this . showChildDialog = showDialog } showDialog = { showDialog => this . showChildDialog = showDialog }
dataHs = { this . state . dataIdHo } typeDialog = { this . state . typeDialog }
company _id = { this . state . company _id }
role _name = { this . state . role _name } role _name = { this . state . role _name }
token = { this . state . token } token = { this . state . token }
/ > / >
@ -427,14 +325,8 @@ class index extends Component {
< Input onChange = { this . handleSearch } value = { search } type = "text" name = "search" id = "search" placeholder = { this . props . t ( 'search' ) } / > < Input onChange = { this . handleSearch } value = { search } type = "text" name = "search" id = "search" placeholder = { this . props . t ( 'search' ) } / >
< / C o l > < / C o l >
< Col > < Col >
< Tooltip title = { this . props . t ( 'rolesAdd' ) } > < Tooltip title = "Transaction Add" >
{ < Button Button id = "TooltipTambah" color = "success" onClick = { ( ) => this . handleOpenDialog ( 'Save' ) } > < i className = "fa fa-plus" > < / i > < / B u t t o n >
checkActMenup ( '/roles' , 'create' ) ?
< Button Button id = "TooltipTambah" color = "success" onClick = { ( ) => this . handleOpenDialog ( 'Save' ) } > < i className = "fa fa-plus" > < / i >
< / B u t t o n >
:
null
}
< / T o o l t i p > < / T o o l t i p >
< Tooltip title = { this . props . t ( 'exportExcel' ) } > < Tooltip title = { this . props . t ( 'exportExcel' ) } >
< Button style = { { marginLeft : "5px" } } id = "TooltipExport" color = "primary" onClick = { ( ) => this . handleExportExcel ( ) } > < i className = "fa fa-print" > < / i > < / B u t t o n > < Button style = { { marginLeft : "5px" } } id = "TooltipExport" color = "primary" onClick = { ( ) => this . handleExportExcel ( ) } > < i className = "fa fa-print" > < / i > < / B u t t o n >
@ -447,7 +339,7 @@ class index extends Component {
rowKey = "id" rowKey = "id"
size = "small" size = "small"
columns = { this . columns } columns = { this . columns }
dataSource = { dataTable } dataSource = { filteredDataTransaction }
pagination = { false } pagination = { false }
bordered = { false } bordered = { false }
/ > / >
