`//This is the main code import { TextInput, useListContext, CreateBase, Form, Toolbar, SaveButton, DateTimeInput, useRedirect } from 'react-admin'; import { Scrollbars } from 'react-custom-scrollbars'; import { Box, Grid } from '@mui/material'; import { useState } from 'react'; import SubmitIcon from '@mui/icons-material/ExitToApp'; import MUIDataTable from 'mui-datatables'; import '../App.css' import ReconDataprovider from '../Dataprovider/ReconDataprovider'; // import { isResourseHasAccess } from "../../Utils/CommonUtil";
const ResultComponent = ({ data,onRowClick ,setApiData,endToEndId,fromDateTimeStamp,toDateTimeStamp}) => {
let rows = [];
rows =(data.transactionSummary==undefined)?data.data.transactionSummary.map((transaction, index) => ({
id: index,
endToEndId: transaction.endToEndId,
debtorAccountNo: transaction.details.debtorAccountNo,
creditorAccountNo: transaction.details.creditorAccountNo,
creditorProxy: transaction.details.creditorProxy,
transactionAmount: transaction.details.transactionAmount,
transactionTimeStamp:transaction.details.transactionTimeStamp,
currencyCode: transaction.details.currencyCode,
paymentType: transaction.details.paymentType,
statusCode: transaction.details.statusCode ,
reasonDescription: transaction.details.reasonDescription
})):
data.transactionSummary.map((transaction, index) => ({
id: index,
endToEndId: transaction.endToEndId,
debtorAccountNo: transaction.details.debtorAccountNo,
creditorAccountNo: transaction.details.creditorAccountNo,
creditorProxy: transaction.details.creditorProxy,
transactionAmount: transaction.details.transactionAmount,
transactionTimeStamp:transaction.details.transactionTimeStamp,
currencyCode: transaction.details.currencyCode,
paymentType: transaction.details.paymentType,
statusCode: transaction.details.statusCode ,
reasonDescription: transaction.details.reasonDescription
}))
;
const customStyles = {
container: {
// background: "#000000",
whiteSpace: 'nowrap',
fontWeight: '10px',
flexDirection:'column'
// backgroundColor:"#000000"
// Add custom styles for the table container
},
headCells: {
whiteSpace: 'nowrap',
flexDirection:'column'
// Add other custom styles for header cells here
},
};
const columns = [
{ name: 'endToEndId', label:<b> End To End Id</b> },
{ name: 'debtorAccountNo', label: <b>Debtor Account No</b> },
{ name: 'creditorAccountNo', label: <b>Creditor Account No</b> },
{ name: 'creditorProxy', label: <b>Creditor Proxy</b> },
{ name: 'transactionAmount', label: <b>Transaction Amount</b> },
{ name: 'transactionTimeStamp', label: <b>Transaction Date</b> },
{ name: 'currencyCode', label: <b>Currency Code</b> },
{ name: 'statusCode', label: <b>Status Code</b> },
{ name: 'reasonDescription', label: <b>Reason Description</b> }
];
const fetchData = async (page, rowsPerPage) => {
try {
// Make your API call here using the new page and rowsPerPage values
// For example, if you are using react-admin dataProvider
const updatedData = await ReconDataprovider.create(
'payment-summary', // replace with your resource name
{ pagination: { page:page+1, perPage: rowsPerPage } ,data:{endToEndId,fromDateTimeStamp,toDateTimeStamp}}
);
// Update the state or perform any action with the fetched data
setApiData(updatedData);
} catch (error) {
// Handle error
console.error('Error fetching data:', error);
}
};
const options = {
selectableRows: false,
setTableProps: () => ({
style: customStyles.container,
}),
customHeadRender: (columnMeta) => (
<th style={customStyles.headCells}>{columns[columnMeta.colIndex].label}</th>
),
onRowClick: (rowData) => {
const selectedEndToEndId = rowData[columns.findIndex((col) => col.name === 'endToEndId')];
onRowClick(selectedEndToEndId);
},
print:false,
search: false,
viewColumns: false,
pagination: true, // Enable pagination
rowsPerPageOptions: [5,10, 20, 50,100], // Define the available rows per page options
count:(data.page==undefined)?data.data.page.totalElements:data.page.totalElements,
onTableChange: (action, tableState) => {
// Check if the action is a change in pagination or rows per page
if (action === 'changePage' || action === 'changeRowsPerPage') {
const { page, rowsPerPage } = tableState;
// Fetch data based on the new page and rowsPerPage
fetchData(page, rowsPerPage);
}
}
};
return (
<div className='MUIDataTableHeadCell'>
<MUIDataTable data={rows} columns={columns} options={options} />
</div>
);
};
export const PostReconFilterForm = ({onRowClickProp, ...props }) => {
const {
displayedFilters,
filterValues,
setFilters,
hideFilter
} = useListContext();
const formatDateToISOString = (date) => {
return date.toISOString();
};
const refresh = () => {
window.location.reload();
};
const [isOpen, setIsOpen] = useState(false)
const [apiData, setApiData] = useState();
const handleButtonClick = () => {
setIsOpen(true);
};
const handledialogClose1 = () => {
setIsOpen(false);
};
const [endToEndId, setEndToEndId] = useState(undefined);
const handleChangeEndToEndId = (e) => {
setEndToEndId(e.target.value);
}
const [fromDateTimeStamp, setFromDateTimeStamp] = useState('');
const [toDateTimeStamp, setToDateTimeStamp] = useState('');
const handleChageStartDate = (e) => {
const isoDateTime = new Date(e.target.value).toISOString();
setFromDateTimeStamp(isoDateTime);
}
const handleChageEndDate = (e) => {
const isoDateTime = new Date(e.target.value).toISOString();
setToDateTimeStamp(isoDateTime);
}
const validateCurrentDatetime = (value) => {
const userDatetime = new Date(value);
const currentDatetime = new Date();
if (currentDatetime < userDatetime) {
return 'Entered datetime must be greater than the current datetime.';
}
// Return undefined if validation passes
return undefined;
};
// const validateEndToEndId = () =>{
// if(endToEndId.length>35){
// return 'Size must be in between 1 to 35';
// }
// return true;
// }
// const redirect = useRedirect();
const onRowClick = (selectedEndToEndId) => {
console.log("Selected End To End Id:", selectedEndToEndId);
localStorage.setItem('selectedEndToEndId', selectedEndToEndId);
const url = `${window.location.origin}/portal-external/#/reconciliations`
// Redirect to the 'com' resource with the selected endToEndId
window.open(url,'_blank');
// redirect(`/com`,'_blank');
}
const datetimeValueFromDataSource = new Date();
const formattedDatetime = formatDateToISOString(datetimeValueFromDataSource);
const handleDefaultDateChange = () => {
if(fromDateTimeStamp.length>0 && toDateTimeStamp.length>0){
if (fromDateTimeStamp > toDateTimeStamp) {
return 'End date Must be grater than the Start Date';
}
}
}
return (
<CreateBase>
<Form >
<Box display="flex" alignItems="flex-end" marginTop='3%' >
<Grid container >
<Grid item={true} xs={12} sm={3} md={3} lg={3} xl={3} >
<TextInput
helperText={false}
source="endToEndId"
value={endToEndId}
label="End To End Id"
onChange={handleChangeEndToEndId}
variant="standard"
style={{ width: "85%" }}
/></Grid>
<Grid item={true} xs={12} sm={3} md={3} lg={3} xl={3} >
<DateTimeInput
helperText={false}
source="fromDateTimeStamp"
label="Start Date"
variant="standard"
onChange={handleChageStartDate}
validate={[validateCurrentDatetime,handleDefaultDateChange]}
// value={formattedDatetime}
style={{ width: "85%" }}
/></Grid>
<Grid item={true} xs={12} sm={3} md={3} lg={3} xl={3}>
<DateTimeInput
helperText={false}
source="toDateTimeStamp"
onChange={handleChageEndDate}
label="End Date"
style={{ width: "85%" }}
variant="standard"
// value={formattedDatetime}
validate={[validateCurrentDatetime,handleDefaultDateChange]}
/></Grid>
<Grid item={true} xs={12} sm={3} md={3} lg={3} xl={4}>
<Toolbar {...props} sx={{ display: 'flex', backgroundColor: "#ffffff", justifyContent: 'space-between' }}>
<SaveButton
variant="outlined"
redirect="list"
submitOnEnter={true}
label="Submit"
icon={<SubmitIcon />}
// onClick={handleButtonClick}
mutationOptions={{
onSuccess: (value) => {
setApiData(value);
handleButtonClick();
},
}}
type='button'
/>
</Toolbar></Grid>
</Grid>
</Box>
</Form>
<Scrollbars style={{ height: '85%' }} className='MuiTableCell'>
<Box marginTop='4%' >
{isOpen &&
<ResultComponent data={apiData} onRowClick={onRowClick} setApiData={setApiData} endToEndId={endToEndId} fromDateTimeStamp={fromDateTimeStamp} toDateTimeStamp={toDateTimeStamp}/>}
</Box>
</Scrollbars>
</CreateBase>
);
};
//This is data provider. import { rsDeHttpClient } from "./MainDataprovider";
const recon_list = '/insurance/v1/payment-summary';
export default {
create: (resource, params) =>{
return new Promise((resolve, reject) => {
rsDeHttpClient(`${recon_list}`, {
method: 'POST',
body: JSON.stringify({
"fromDateTimeStamp":params.data.fromDateTimeStamp,
"toDateTimeStamp": params.data.toDateTimeStamp,
"endToEndId":params.data.endToEndId ,
"limit":(params.pagination==undefined)?10:params.pagination.perPage,
"offset":(params.pagination==undefined)?1:params.pagination.page
}),
})
.then(response=>response.json)
.then(json => {
const data = {id:1, ...json };
resolve({ data });
})
.catch(error => {
reject(error);
});
});
},
};`your text`
/* The code is working fine when for the first time the data is loading . but when i am changing it to next page I am not able to see the data in the next page but the the data is fetched correctly from the backend when i am changing the page.*/ `