Notes

callBackSubmitFilter = (updatedFilters) => {
const { sort, selectedRowsCount } = this.state;
const { data } = this.props;
this.setState({
appliedFilters: updateAppliedFilters(updatedFilters),
filters: updatedFilters,
totalItems: data.getMandateBatchList.count,
isOpen: false,
showExportOverlay: false
// isOverlayOpen: selectedRowsCount
});

const variables = setFetchMoreVariables(
null,
null,
sort,
updatedFilters,
null,
null
);


const { groupingCriteria } = variables.getMandateBatchListRqst;
const { listSortCriteria } = variables.getMandateBatchListRqst;
this.setState({
groupingCriteria,
listSortCriteria
});
data.fetchMore({
variables,
updateQuery: (previousResult, { fetchMoreResult }) =>
this.onUpdateQuery(previousResult, { fetchMoreResult })
});

// if (selectedRowsCount) {
// this.setState({
// isOverlayOpen: true
// }, () => {

// });
// }

};

callBackOnLoadMore = () => {
const { sort, appliedFilters } = this.state;
const { data } = this.props;
this.setState({
isLoadingMore: true,
isOpen: false,
showExportOverlay: false
});
const variables = setFetchMoreVariables(
null,
null,
sort,
appliedFilters,
data.getMandateBatchList.mandateHeaderDtls.length,
ACTION
);
data.fetchMore({
variables,
updateQuery: (previousResult, { fetchMoreResult }) =>
this.onLoadMoreUpdateQuery(previousResult, { fetchMoreResult })
});
};

callBackRemoveFilter = (id) => {
const { filters } = this.state;
const updatedFilters = filters.map((filter) => {
if (filter.id === id) {
if (
filter.type === CHECKBOX_FILTER.toLowerCase() ||
filter.type.toLowerCase() === SEARCH_FILTER ||
filter.type.toLowerCase() === DATERANGE_FILTER
) {
return {
...filter,
selected: undefined
};
} else if (filter.type.toLowerCase() === RANGE_FILTER.toLowerCase()) {
return {
...filter,
valueMin: undefined,
valueMax: undefined
};
}
}
return filter;
});
this.callBackSubmitFilter(updatedFilters);
};

handleDelete = (translation) => {
const variables = setFetchMoreVariablesAction(
null,
null,
this.state.sort,
this.state.appliedFilters,
0
);

this.props
.deleteMandate({
variables: this.state.deleteVariables
})
.then(({ data }) => {
const { transactionSuccess, actionResult } = data.deleteMandateBatch;
const deletedData = actionResult.map((obj) => obj.batchRefNo).join();

if (transactionSuccess) {
this.props.data.refetch(variables);
const toastMessage = `${translation(
'deleteToast.batch'
)} ${deletedData} ${translation('deleteToast.batchMessage')}`;
this.setState({
isOpen: true,
toastType: 'confirm',
toastMessage
});
} else {
const warningMessage = `${translation('deleteToast.batchError')}`;
this.setState({
isOpen: false,
toastType: 'critical',
toastMessage: warningMessage
});
}
});
this.setState({
showDeleteOverlay: false
});
};

exportOptionSelection = (option) => {
this.setState({ exportSelected: option });
};

closeOverlay = () => {
this.setState({ isOverlayOpen: false });
}

thirdFunction = (updatedFilters) => {
const { selectedRowsCount } = this.state;
this.setState({ updateFilters123: updatedFilters }, () => {
console.log(selectedRowsCount, '======Inside third function=====');
if (selectedRowsCount === 0) {
this.callBackSubmitFilter(updatedFilters);
} else {
this.setState({ isOverlayOpen: true });
}
}
);
}

submitOverlay = () => {
const { updateFilters123 } = this.state;
this.callBackSubmitFilter(updateFilters123);
this.setState({ isOverlayOpen: false, selectedRowsCount: 0 });

}

render = () => {
console.log(this.state, '=======STATES====');
const {
columns,
rows,
isLoadingMore,
totalItems,
filters,
appliedFilters,
checkboxActions,
showExportOverlay,
showDeleteOverlay,
exportSelected,
counter
} = this.state;

const { data } = this.props;
return (
<div>
<ListHeaders
product="mandateBatch"
parentData={this.props}
onSubmitCallService={this.submitExportOverlay}
defaultSelected={exportSelected}
exportOptions={exportOptions}
exportOptionSelection={this.exportOptionSelection}
/>
<I18n ns="collections/collections">
{(t) => (
<MandateBatch>
{data.getMandateBatchList ? (
/* ToDo: will be worked as per JIRA SD-22831 */
<div>
{/* <Blotter
key={counter}
columns={columns.map((col) => ({
...col,
label: t(col.label)
}))}
rows={rows}
isLoadingMore={isLoadingMore}
onLoadMore={this.callBackOnLoadMore}
totalItems={totalItems}
primaryTabs={primaryTabs.map((tabDescription) => ({
...tabDescription,
label: t(tabDescription.label)
}))}
onPrimaryTabSelect={this.onPrimaryTabSelect}
secondaryTabs={secondaryTabs.map((tabDescription) => ({
...tabDescription,
label: t(tabDescription.label)
}))}
onSecondaryTabSelect={this.onSecondaryTabSelect}
onSort={this.callBackOnSort}
filters={filters.map((filter) => ({
...filter,
label: t(filter.label)
}))}
appliedFilters={appliedFilters.map((filter) => ({
...filter,
label: t(filter.label)
}))}
onFilterSubmit={this.callBackSubmitFilter}
onFilterRemove={this.callBackRemoveFilter}
onCellClick={this.onCellClick}
onRowCheckboxClick={(selectedRows) =>
this.onRowCheckboxClick(selectedRows, t)
}
checkboxActions={checkboxActions.map((action) => t(action))}
actions={this.setActions(t)}
theme={{ tableRowCell: 'cellContentWrapStyle' }}
/> */}
<Blotter
key={counter}
columns={columns.map((col) => ({
...col,
label: t(col.label)
}))}
rows={rows}
isLoadingMore={isLoadingMore}
onLoadMore={this.callBackOnLoadMore}
totalItems={totalItems}
primaryTabs={primaryTabs.map((tabDescription) => ({
...tabDescription,
label: t(tabDescription.label)
}))}
onPrimaryTabSelect={this.onPrimaryTabSelect}
secondaryTabs={secondaryTabs.map((tabDescription) => ({
...tabDescription,
label: t(tabDescription.label)
}))}
onSecondaryTabSelect={this.onSecondaryTabSelect}
onSort={this.callBackOnSort}
filters={filters.map((filter) => ({
...filter,
label: t(filter.label)
}))}
appliedFilters={appliedFilters.map((filter) => ({
...filter,
label: t(filter.label)
}))}
onFilterSubmit={this.thirdFunction}
onFilterRemove={this.callBackRemoveFilter}
onCellClick={this.onCellClick}
onRowCheckboxClick={(selectedRows) =>
this.onRowCheckboxClick(selectedRows, t)
}
checkboxModeAlwaysActive
defaultSelectedRowIds={['OIHKCITCL1A14845', 'OIHKCITCL1A14829']}
checkboxActions={checkboxActions.map((action) => t(action))}
actions={this.setActions(t)}
theme={{ tableRowCell: 'cellContentWrapStyle' }}
/>
<ScrollContainer>
{' '}
<ScrollToTop />
</ScrollContainer>
</div>
) : (
<Loader
theme={{
container: 'spinnerContainer'
}}
/>
)}
<OverlayModal
open={this.state.isOverlayOpen}
requestClose={this.closeOverlay}
title={t('CANCEL')}
position="top"
actionbar={{
buttons: [
{
buttontype: 'secondary',
buttontext: t('No'),
action: this.closeOverlay,
position: 'left'
},
{
buttontype: 'primary',
buttontext: t('Yes'),
action: this.submitOverlay,
position: 'right'
}
]
}}
>
<Grid fluid>
<Row>
<Heading size="large" color="greyScaleColor7">
{t('cancelText')}
</Heading>
</Row>
</Grid>
</OverlayModal>
{showExportOverlay && (
<Export
overlayOpen={showExportOverlay}
onChange={this.exportOptionSelection}
defaultSelected={exportSelected}
exportOptions={exportOptions}
onSubmitOverlay={this.submitExportOverlay}
closeOverlay={this.closeExportOverlay}
/>
)}
{showDeleteOverlay && (
<DeleteOverlay
overlayOpen={showDeleteOverlay}
deleteCallBack={this.handleDelete}
translation={t}
batchRefNo={this.state.batchRefNo}
closeDeleteOverlay={this.closeDeleteOverlay}
/>
)}
{this.state.isOpen && (
<DeleteToast
isOpen={this.state.isOpen}
toastType={this.state.toastType}
toastMessage={this.state.toastMessage}
closeToast={() => this.closeToast()}
/>
)}
<Toast
open={this.state.isOpenReleaseBank}
title={t('list.failedDownload')}
onCloseClick={this.closeReleaseToBankToast}
type={this.state.toastType}
timeout={3000}
>
{t(this.state.toastMessage)}
</Toast>{' '}
{this.state.isPrintandExportStatus && (
<Toast
open={this.state.isPrintandExportStatus}
onCloseClick={this.closePrintToast}
type="confirm"
timeout={3000}
theme={{ container: 'toastContainer' }}
>
{this.printExportMessageToast(t)}
</Toast>
)}

</MandateBatch>
)}
</I18n>
</div>
);
};
}

MandateBatchList.propTypes = {
/** Apollo Client */
client: PropTypes.object,

/** structure of data returned by GraphIQL */
getMandateBatchList: PropTypes.shape({
count: PropTypes.number,
mandateHeaderDtls: PropTypes.arrayOf(
PropTypes.shape({
mandateRef: PropTypes.string,
batchRefNo: PropTypes.string,
payer: PropTypes.shape({
payerName: PropTypes.string
}),
startDate: PropTypes.string,
endDate: PropTypes.string,
maxAmount: PropTypes.shape({
value: PropTypes.number,
currency: PropTypes.string
}),
minAmount: PropTypes.shape({
value: PropTypes.number,
currency: PropTypes.string
}),
debtorAmount: PropTypes.shape({
value: PropTypes.number,
currency: PropTypes.string
}),
mandateType: PropTypes.string,
mandateStatus: PropTypes.string
})
),
listHeader: PropTypes.arrayOf(
PropTypes.shape({
id: PropTypes.string,
isSortable: PropTypes.Boolean,
label: PropTypes.string,
sortKey: PropTypes.string
})
)
}),
/**
* function for submitting the mandate batch details
*/
releaseToBank: PropTypes.func,

/** Object returned by GraphIQL */
data: PropTypes.object,

/** location property of component */
location: PropTypes.object,

/** function call for mutate query */
deleteMandate: PropTypes.func,

/** history prop of the component */
history: PropTypes.shape({
push: PropTypes.func
}),
/** AppPageParams from login */
pageParams: PropTypes.string,
/**
* function to set the store
*/
actions: PropTypes.shape({
clearPageparms: PropTypes.func
})
};

const reduxWrapper = connect(
(state) => ({
pageParams: getAppPageParams(state)
}),
(dispatch) => ({
actions: {
clearPageparms: bindActionCreators(clearPageparms, dispatch)
}
})
);

const checkAttributeName = (ownprops) => {
if (ownprops.pageParams !== undefined) {
if (ownprops.pageParams.length > 0) {
return 'STATUS';
} else if (
Object.keys(ownprops.pageParams).length === 0 ||
Object.keys(ownprops.pageParams) === null
) {
return '';
} else {
return '';
}
}
return '';
};

const checkAttributeValue = (ownprops) => {
if (ownprops.pageParams !== undefined) {
if (ownprops.pageParams.length > 0) {
return JSON.parse(ownprops.pageParams);
} else if (
Object.keys(ownprops.pageParams).length === 0 ||
Object.keys(ownprops.pageParams) === null
) {
return '';
} else {
return '';
}
}
return '';
};

export default compose(
reduxWrapper,
graphql(mandateBatchQuery, {
options: (ownProps) => ({
fetchPolicy: 'network-only',
variables: {
getMandateBatchListRqst: {
startIndex: 1,
noOfRecords: minimumNumberOfRecordsToDisplay,
userRole: 'O',
groupingCriteria: {
attributeName: checkAttributeName(ownProps),
attributeValues: checkAttributeValue(ownProps)
}
},
getFilterColumnsGQLRqst: initialGetFilterColumnsRqst,
needListFilterColumns: true
}
})
}),
graphql(releaseToBankMandateBatches, {
name: 'releaseToBank',
actionRqst: {
refNoList: [],
batchRefNo: ''
}
}),
graphql(deleteMandateBatches, {
name: 'deleteMandate',
actionRqst: {
refNoList: [],
batchRefNo: ''
}
})
)(withApollo(withRouter(MandateBatchList)));

const MandateBatch = styled.section`
padding: 3px;
margin: 15px 28px;
font-family: SCSans-Bold;
& tbody {
font-family: SCSans-Regular;
}

.cellContentWrapStyle {
word-break: break-word;
max-width: 220px;
}
.spinnerContainer {
text-align: center;
margin-top: 20px;
}
`;
const Loader = styled(Spinner)`
margin-left: 50%;
`;
const ScrollContainer = styled.div`
position: fixed;
right: 0px;
bottom: 18px;
margin: 0px;
`;