106 lines
5.7 KiB
JavaScript
106 lines
5.7 KiB
JavaScript
import React, { useEffect } from 'react'
|
|
import { Button, Card, Col, Container, Row } from 'react-bootstrap';
|
|
import { TabulatorFull as Tabulator } from 'tabulator-tables';
|
|
import '../jqueryloader'
|
|
|
|
const exportcsv = '/images/contacts/Excel.svg';
|
|
const gridEditIcon = '/images/refine_by_icons/edit.svg';
|
|
const gridDeleteIcon = '/images/cross_gray.svg';
|
|
|
|
var tablePaymentsGrid = '';
|
|
var toggleValue = '';
|
|
const groupByHCP = () => {
|
|
function toggleKolGrouping(){
|
|
toggleValue = $("#toggleKolGrouping").text();
|
|
if(toggleValue == 'Remove Grouping'){
|
|
tablePaymentsGrid.setGroupBy(false);
|
|
$("#toggleKolGrouping").text("Group By HCP");
|
|
}else{
|
|
tablePaymentsGrid.setGroupStartOpen(false);
|
|
tablePaymentsGrid.setGroupBy("kol_name");
|
|
$("#toggleKolGrouping").text("Remove Grouping");
|
|
}
|
|
}
|
|
function listPayments(){
|
|
//Tabulator Grid parameters
|
|
var gridFor='payments';
|
|
var gridHeaderText= "Payments";
|
|
var gridId= gridFor+'-grid-table';
|
|
|
|
|
|
var actionLink = "<div class='gridActionIcon'><div class='gridEditIcon' onclick=\"editInteraction();return false;\" ><a href=\"#\" data-tooltip=\"tooltip\" data-placement=\"bottom\" title=\"Edit\" class=\"tooltipLink\"></a></div></div>";
|
|
actionLink += "<div class='gridActionIcon'><div class='gridDeleteIcon' onclick=\"deleteInteraction();return false;\" ><a href=\"#\" data-tooltip=\"tooltip\" data-placement=\"bottom\" title=\"Delete\" class=\"tooltipLink\"></a></div></div>";
|
|
|
|
//Data for grid to load
|
|
var tableData2 = [
|
|
{micro:'1',kol_name:'Aaron James Miller',date:"14/05/2020",type: "General",amount: "555.00",status: "Completed",act:''},
|
|
{micro:'2',kol_name:'Aaron James Miller',date:"20/05/2020",type: "General",amount: "550.00",status: "Completed",act:''},
|
|
{micro:'3',kol_name:'Aaron James',date:"14/05/2020",type: "General",amount: "555.00",status: "Completed",act:''},
|
|
{micro:'4',kol_name:'Aaron James',date:"20/05/2020",type: "General",amount: "550.00",status: "Completed",act:''},
|
|
]
|
|
//Tabulator Gird initialisation
|
|
tablePaymentsGrid = new Tabulator("#"+gridId, {
|
|
//var tableData = <?php //echo json_encode($arr_users); ?>;
|
|
data:tableData2,
|
|
columns:[
|
|
{title:"#", formatter:'rownum',align:'center',headerSort:false,tooltip:false, width:"5%"},
|
|
{title:"", field:"micro",formatter:function(cell, formatterParams, onRendered){
|
|
return "<div class='microViewIcon' onclick=\"viewPaymentMicroProfile("+ cell.getValue() +"); return false;\" ><a href=\"#\" data-tooltip=\"tooltip\" data-placement=\"bottom\" title=\"View Interaction\"></a></div>"; //return the contents of the cell;
|
|
},headerFilter:false,headerSort:false,align:'center', width:"5%"},
|
|
{title:"HCP Name", field:"kol_name",formatter:function(cell, formatterParams, onRendered){
|
|
return "<a href='#' class='label-blue'>" + cell.getValue() + "</a>"; //return the contents of the cell;
|
|
},headerFilter:true, headerFilterPlaceholder:'Search', align:'left', width:"42%"},
|
|
{title:"Date", field:"date",headerFilter:true, headerFilterPlaceholder:'Search', align:'left', width:"10%"},
|
|
{title:"Type", field:"type",headerFilter:true, headerFilterPlaceholder:'Search', align:'left', width:"10%"},
|
|
{title:"Amount", field:"amount",headerFilter:true, headerFilterPlaceholder:'Search', align:'left',bottomCalc:"sum", width:"10%"},
|
|
{title:"Status", field:"status",headerFilter:true, headerFilterPlaceholder:'Search', align:'left', width:"10%"},
|
|
{title:"Action", field:"act",formatter:function(cell, formatterParams){
|
|
return actionLink;
|
|
},headerFilter:false,headerSort:false,width:80,align:'center', width:"8%"}
|
|
],
|
|
layout:"fitDataStretch",
|
|
tooltips:true,
|
|
ajaxSorting:false,
|
|
ajaxFiltering:false,
|
|
initialSort:[{column:"date", dir:"desc"}],
|
|
groupClosedShowCalcs:true,
|
|
paginationSize:10, // this option can take any positive integer value (default = 10),possible values 10,20,50,100
|
|
pagination:"local",
|
|
paginationSizeSelector:[10, 20, 50, 100],
|
|
tableBuilt:function(){
|
|
$("#"+gridFor+"-grid-header .grid-header-text").html(gridHeaderText);
|
|
}
|
|
});
|
|
|
|
var grid_options ='<div style="float:right;" class="excelExportIcon sprite_iconSet tooltip-demo tooltop-left" onclick="exportExcel(\'#listPaymentsResultSet\',\'payments\');"><a href="#" rel="tooltip" data-original-title="Export Payment Details into Excel format"> </a></div>';
|
|
grid_options +='<div style="float:right;" class="title-bar-actions"><a onclick="addPayment();" class="grid_new_btn">Add Payments</a></div>';
|
|
$("#"+gridFor+"-grid-header .grid-header-text").append(grid_options);
|
|
}
|
|
useEffect(()=>{
|
|
listPayments();
|
|
}, [])
|
|
return (
|
|
<>
|
|
<Container fluid className='groupByTabulator'>
|
|
<Row>
|
|
<Col xs={12} sm={12} md={12} lg={10} xxl={10} className='mx-auto py-3'>
|
|
<Card className='no-shadow border-start-0 border-top'>
|
|
<Card.Header className='border-0'>
|
|
<span className='grid-header-text fw-bold'>Custom Tabulator</span>
|
|
<div className='float-end'>
|
|
<Button variant='link' onClick={toggleKolGrouping} id="toggleKolGrouping">Group By HCP</Button>
|
|
<a href="#" className='text-decoration-none'><img src={exportcsv} alt="csv"/></a>
|
|
</div>
|
|
</Card.Header>
|
|
<Card.Body>
|
|
<div id="payments-grid-table" className="customGridWrapper"></div>
|
|
</Card.Body>
|
|
</Card>
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default groupByHCP |