Notes

class MandateBatches extends React.Component {
constructor(props) {
super(props);
this.state = {
overlayOpen: false,
rowID: '',
rejectComments: '',
search: false,
isLoadingMore: false,
loadingMore: false,
appliedFilters: [],
sort: {
column: '',
direction: ''
},
checkboxActions: ['view']

};
}

actions = {
'view': {
label: 'View',
action: (rowspassed) => {
const path = this.props.location.pathname;
const path1 = path.slice(0, path.indexOf('/managelists'));
this.props.history.push({
pathname: `${path1}/summarybatch`,
state: { sendForRepair: false,
batchRefNo: rowspassed[0].id
} });
}
},
'reject': {
label: 'Reject',
action: () => {
this.openOverlay();
}

},
'sendForRepair': {
label: 'Send for Repair',
action: (rowspassed, actionId) => {
const path = this.props.location.pathname;
// console.log('dxscsdcsdc ',rowspassed[0].id);
const path1 = path.slice(0, path.indexOf('/managelists'));
this.props.history.push({
pathname: `${path1}/summarybatch`,
state: { sendForRepair: true,
batchRefNo: rowspassed[0].id
} });
}

}

};

componentWillReceiveProps=(nextProps) => {
console.log(nextProps);

const columns = nextProps.data.getMandateBatchList.listHeader.map((list, ind) => {
if (list.sortKey === this.state.sort.column) {
if (ind === 1) {
return {
id: list.id,
label: list.label,
type: 'text',
sortable: !!list.isSortable,
sortKey: list.sortKey,
sorted: this.state.sort.direction,
highlight: true,
clickable: true
};
} else {
return {
id: list.id,
label: list.label,
type: 'text',
sortable: !!list.isSortable,
sortKey: list.sortKey,
sorted: this.state.sort.direction
};
}

} else if(ind === 1){
return {
id: list.id,
label: list.label,
type: 'text',
sortable: list.isSortable ? true : false,
sortKey : list.sortKey,
highlight: true,
clickable: true
}
}
else
{return {
id: list.id,
label: list.label,
type: 'text',
sortable: list.isSortable ? true : false,
sortKey : list.sortKey
}}

});
const rows = nextProps.data.getMandateBatchList.mandateHeaderDtls.map((i) => ({
id: i.batchRefNo,
data: {
batchRefNo: i.batchRefNo,
batchName: i.batchName,
creditAcctNo: i.creditAcctNo,
noOfMandates: i.noOfMandates,
status: i.status
},
actions: ['view', 'reject', 'sendForRepair']
}));

const filters = nextProps.data.getMandateBatchListFilterColumns.listFilter.map((filter) => {
if (filter.filterType === 'FREETEXT') {
return {
id: filter.filterKey,
label: filter.filterKey,
type: 'search'
};
} else if (filter.filterType === 'RANGE') {
return {
id: filter.filterKey,
label: filter.filterKey,
type: 'search' // range filter data is null therefore dont have values to set here
};
} else if (filter.filterType === 'CHECKBOX') {
return { id: filter.filterKey,
label: filter.filterKey,
type: 'checkbox',
items: filter.filterData.map((data) => ({
id: data.id,
label: data.label
})) };
} else {

}
});
this.setState({
rows,
columns,
filters,
totalItems: nextProps.data.getMandateBatchList.count
});
}

onPrimaryTabSelect = (id) => {
const path = this.props.location.pathname;
const path1 = path.slice(0, path.lastIndexOf('/'));

if (id === 'ddi') {
this.props.history.push(`${path1}/ddiBatches`);
} else {

this.props.history.push(`${path1}/ddaTransactions`);
}
}

onSecondaryTabSelect = (id) => {
const path = this.props.location.pathname;
const path1 = path.slice(0, path.lastIndexOf('/'));
if (id === 'batch') {
this.props.history.push(`${path1}/ddaBatches`);

} else {
this.props.history.push(`${path1}/ddaTransactions`);

}
}

onRowExpand = (row) => (<div><em>{row.data.title}</em>: {row.data.desc}</div>);

onCellClick = (rowID, cellID) => {
console.log('rowID ', rowID);
this.setState({
rowID
});
const path = this.props.location.pathname;
const path1 = path.slice(0, path.indexOf('/managelists'));

this.props.history.push(
{ pathname: `${path1}/summarybatch`,
state: { batchRefNo: rowID } }
);

}

onSort = (columnId, nextSort) => {

const columnToSort = this.state.columns.find((col) => (
col.id === columnId
));
this.props.data.fetchMore({
variables: {
getMandateBatchListRqst: {
context: {
groupId: 'UATIN001',
userId: 'USER000001',
journeyId: 'J0007'
},
groupingCriteria: {
attributeName: '',
attributeValues: ''
},
listSortCriteria: {
attributeName: columnToSort.sortKey,
attributeOrder: nextSort.toUpperCase()
},
startIndex: 1,
noOfRecords: 20
}
},

updateQuery: (previousResult, { fetchMoreResult }) => {
console.log('FROM UPDATEQUERY');
if (!fetchMoreResult) {
return previousResult;
} else{
this.setState({ isLoadingMore: false });
const newAccountsData = [
...fetchMoreResult.getMandateBatchList.mandateHeaderDtls
];
return Object.assign({}, previousResult, {
getMandateBatchList: {
...previousResult.getMandateBatchList,
mandateHeaderDtls: newAccountsData
}
});
}

}
}).then(({ data }) => {
console.log('got data', data);
}).catch((error, previousResult) => {
console.log('there was an error sending the query', this.props);

});

const nextColumns = this.state.columns.map((col) => {
if (col.sortable) {
col.sorted = col.id === columnId ? nextSort : 'none';
}
return col;
});
const sort = {
column: columnToSort.sortKey,
direction: nextSort
};
this.setState({
columns: nextColumns,
sort
});
}

onLoadMore=() => {
this.setState({ isLoadingMore: true });
const selectedFilter = this.state.appliedFilters.filter((filter) => (filter.selected !== '' && filter.selected !== null && filter.selected !== undefined && filter.selected.length > 0));

this.props.data.fetchMore({
variables: {
getMandateBatchListRqst: {
context: {
groupId: 'UATIN001',
userId: 'USER000001',
journeyId: 'J0007'
},
listSortCriteria: {
attributeName: this.state.sort.column,
attributeOrder: this.state.sort.direction

},

groupingCriteria: selectedFilter.map((filter) => (
{
attributeName: filter.id,
attributeValues: filter.selected
})),
startIndex: this.props.data.getMandateBatchList.mandateHeaderDtls.length + 1,
noOfRecords: 20
}
},

updateQuery: (previousResult, { fetchMoreResult }) => {
console.log('FROM UPDATEQUERY');
if (!fetchMoreResult) {
return previousResult;
}else {
this.setState({ isLoadingMore: false });
const newAccountsData = [
...previousResult.getMandateBatchList.mandateHeaderDtls,
...fetchMoreResult.getMandateBatchList.mandateHeaderDtls
];
return Object.assign({}, previousResult, {
getMandateBatchList: {
...previousResult.getMandateBatchList,
mandateHeaderDtls: newAccountsData
}
});
}

}
}).then(({ data }) => {
console.log('got data', data);
}).catch((error, previousResult) => {
console.log('there was an error sending the query', this.props);

});
}

onFilterSubmit=(updatedFilters) => {
console.log('updatedFilters ', updatedFilters);
const filteredRows = this.filterRows(updatedFilters, this.state.search, this.state.sort);
this.setState({
appliedFilters: this.updateAppliedFilters(updatedFilters)
});
const selectedFilter = updatedFilters.filter((filter) => (filter.selected !== '' && filter.selected !== null && filter.selected !== undefined && filter.selected.length > 0));
console.log('selectedFilter ', selectedFilter);
this.props.data.fetchMore({
variables: {
getMandateBatchListRqst: {
context: {
groupId: 'UATIN001',
userId: 'USER000001',
journeyId: 'J0007'
},
groupingCriteria: selectedFilter.map((filter) => (
{
attributeName: filter.id,
attributeValues: filter.selected
})),
listSortCriteria: {
attributeName: this.state.sort.column,
attributeOrder: this.state.sort.direction
},
startIndex: 1,
noOfRecords: 20
}
},

updateQuery: (previousResult, { fetchMoreResult }) => {
console.log('FROM UPDATEQUERY');
if (!fetchMoreResult) {
return previousResult;
}else {
this.setState({ isLoadingMore: false });
const newAccountsData = [
...fetchMoreResult.getMandateBatchList.mandateHeaderDtls
];
return Object.assign({}, previousResult, {
getMandateBatchList: {
...previousResult.getMandateBatchList,
count: fetchMoreResult.getMandateBatchList.count,
mandateHeaderDtls: newAccountsData
}
});
}

}
}).then(({ data }) => {
console.log('got data', data);
}).catch((error, previousResult) => {
console.log('there was an error sending the query', this.props);

});


}

updateAppliedFilters=(updatedFilters) => updatedFilters.reduce((acc, filter) => {
if (filter.selected && filter.selected.length || typeof filter.valueMin !== 'undefined' || typeof filter.valueMax !== 'undefined') {
acc.push(filter);
}
return acc;
}, [])

filterRows=(filters, search, sort) => {
console.log('filters :', filters);
let filteredRows = this.state.rows;

if (search) {
filteredRows = filteredRows.filter((row) => Object.values(row.data).filter((value) => {
return typeof value === 'string' && value.toLowerCase().indexOf(search.toLowerCase()) > -1;
}).length > 0);
}

filters.forEach((filter) => {
console.log('filter :', filter);
const field = filter.id;
if (filter.type == 'range') {
filteredRows = filteredRows.filter((row) => {
const value = row.data[field];
let result = true;
if (typeof filter.valueMin !== 'undefined') {
result = result && value >= parseFloat(filter.valueMin);
}
if (typeof filter.valueMax !== 'undefined') {
result = result && value <= parseFloat(filter.valueMax);
}
return result;
});
}
if (filter.type == 'checkbox') {
filteredRows = filteredRows.filter((row) => {
const value = row.data[field];
return filter.selected && filter.selected.length ? filter.selected.indexOf(value) > -1 : true;
});
}
if (filter.type == 'search') {
filteredRows = filteredRows.filter((row) => {
if (
row.data &&
(row.data === '' || row.data === null || row.data === undefined)
) {
const value = row.data[field].toLowerCase();
return filter.selected
? value.indexOf(filter.selected.toLowerCase()) > -1
: true;
} else {
// const value = row.data[field];
// return filter.selected ? value.indexOf(filter.selected) > -1 : true;
}
});
}
});

filteredRows = filteredRows.sort((a, b) => {
const aval = a.data[sort.column];
const bval = b.data[sort.column];
if (aval === bval) {
return 0;
} else if (sort.direction === 'asc') {
return aval > bval ? -1 : 1;
} else if (sort.direction === 'desc') {
return aval < bval ? -1 : 1;
}
return 0;
});

return filteredRows;

}

onFilterRemove=(id) => {

console.log('check:', id);
const updatedFilters = this.state.filters.map((filter) => {
if (filter.id === id) {
if (filter.type === 'checkbox' || filter.type === 'search') {
return {
...filter,
selected: undefined
};
} else if (filter.type === 'range') {
return {
...filter,
valueMin: undefined,
valueMax: undefined
};
}
}
return filter;
});
this.onFilterSubmit(updatedFilters);
}

onSearchSubmit=(expression) => {
const filteredRows = this.filterRows(this.state.filters, expression, this.state.sort);
this.setState({
search: expression,
rows: filteredRows,
totalItems: filteredRows.length
});
}

onDeselectAll = (selectedRows) => {
console.log(selectedRows);
this.setState({ checkboxActions: ['view'] });// this state need tbe set to the actions we are recieving.
};

onSelectAll=(selectedRows) => {
console.log(selectedRows);
this.setState({ checkboxActions: ['view'] }); // this state need based on batches selected and common actions of those. will work on actions given under actions.
};

onRowCheckboxClick=(selectedRows) => {
console.log(selectedRows); // if required.
};

onRejectCommentChange = (comment) => {
this.setState({ rejectComments: comment.value });
console.log(this.state.rejectComments);
}

constructrejectMandateRequest = () => {
const ActionRqst = {};
const context = {};
context.groupId = 'UATIN001';
context.userId = 'USER000001';
context.journeyId = 'J1003';
ActionRqst.context = context;
ActionRqst.comment = this.state.rejectComments;
ActionRqst.refNoList = [{
'name': 'BATCH0013',
'value': 2
},
{
'name': 'BATCH773',
'value': 3
}];

return ActionRqst;
}

openOverlay = () => {
console.log('openOverlay');
this.setState({
overlayOpen: true
});
};

closeOverlay = () => {
console.log('closeOverlay');
this.setState({
overlayOpen: false
});
};

submitOverlay = () => {
const ActionRqst = this.constructrejectMandateRequest();
console.log(ActionRqst);
this.props.mutate({
variables: { ActionRqst }
}).then(({ data }) => {
console.log('got data', data);
}).catch((error) => {
console.log('there was an error sending the query', error);
});
this.closeOverlay();
}


render() {
return (
<DebitBatch>
<ListHeader />
{this.props.data.getMandateBatchList ? (
<div>
<Blotter
columns={this.state.columns}
rows={this.state.rows}
actions={this.actions}
isLoadingMore={this.state.isLoadingMore}
onLoadMore={this.onLoadMore}
totalItems={this.props.data.getMandateBatchList.count}
primaryTabs={primaryTabs}
onPrimaryTabSelect={this.onPrimaryTabSelect}
onCellClick={this.onCellClick}
secondaryTabs={secondaryTabs}
onSecondaryTabSelect={this.onSecondaryTabSelect}
onSort={this.onSort}
filters={this.state.filters}
appliedFilters={this.state.appliedFilters}
onFilterSubmit={this.onFilterSubmit}
onFilterRemove={this.onFilterRemove}
onSearchSubmit={this.onSearchSubmit}
onSelectAll={this.onSelectAll}
onDeselectAll={this.onDeselectAll}
checkboxActions={this.state.checkboxActions}
onRowCheckboxClick={this.onRowCheckboxClick}
/>
<OverlayModal
open={this.state.overlayOpen}
title="REJECT BATCHES"
position="top"
actionbar={{
buttons: [
{
buttontype: 'secondary',
buttontext: 'Cancel',
action: this.closeOverlay,
position: 'left'
},
{
buttontype: 'secondary',
buttontext: 'Reject',
action: this.submitOverlay,
position: 'right'
}
]
}}
>
<div>
ARE YOU SURE TO REJECT THE BATCH(ES)?
</div>
<Row>
<Col xs={12} sm={4} md={4}>
<Label weight="bold">COMMENTS</Label>
</Col>
<Col xs={12} sm={8} md={8}>
<Textfield
pattern="^[A-Za-z0-9]*$"
onChange={this.onRejectCommentChange}
/>
</Col>
</Row>
</OverlayModal>
</div>
) : (<Loader />)}
</DebitBatch>
);
}
}