Notes

import React from 'react';
import { Blotter, Spinner } from 'foundation-components-core';
import gql from 'graphql-tag';
import { graphql, withApollo, compose } from 'react-apollo';

import styled from 'styled-components';
import ListHeader from '../GlobalActions';

const primaryTabs = [
{
id: 'ddi',
label: 'Direct Debits',
selected: false
},
{
id: 'dda',
label: 'Mandates',
selected: true

},
{
id: 'files',
label: 'Files',
selected: false

}
];

const actions = {

'view': {
label: 'View',
action: (rows, actionId) => alert('Mark as watched', rows, actionId)
}
};

const secondaryTabs = [
{
id: 'batch',
label: 'Batches',
selected: true

},
{
id: 'transaction',
label: 'Transactions',
selected: false

}
];

const columns = [
{
id: 'batchRefNo',
label: 'batchRefNo',
highlight: true,
clickable: true,
type: 'text',
sortable: true
},
{
id: 'batchName',
label: 'batchName',
type: 'integer',
sortable: true,
sorted: 'desc'
},
{
id: 'creditAcctNo',
label: 'creditAcctNo',
type: 'float',
sortable: true
},
{
id: 'noOfMandates',
label: 'noOfMandates',
type: 'integer',
sortable: true
},
{
id: 'status',
label: 'status',
type: 'text'
}
];

const filters = [
{
id: 'batchRefNo',
label: 'batchRefNo',
type: 'search'
},
{
id: 'batchName',
label: 'batchName',
type: 'search'
},
{
id: 'creditAcctNo',
label: 'creditAcctNo',
type: 'search'
},
{
id: 'noOfMandates',
label: 'noOfMandates',
type: 'search'
},
{
id: 'status',
label: 'status',
type: 'search'
}
];

class MandateBatches extends React.Component {
constructor(props) {
super(props);
this.state = {
columns,
search: false,
isLoadingMore: false,
loadingMore: false,
appliedFilters: [],
filters: filters
};
}

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

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: i.actions
}));

this.setState({
rows,
totalItems: nextProps.data.getMandateBatchList.mandateHeaderDtls.length
})
}

actions = {

'view': {
label: 'View',
action: () => {
const path = this.props.location.pathname;
const path1 = path.slice(0, path.indexOf('/managelists'));
this.props.history.push(`${path1}/summarybatch`);
}
}
};

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 = () => {
const path = this.props.location.pathname;
const path1 = path.slice(0, path.indexOf('/managelists'));
this.props.history.push(`${path1}/summarybatch`);

}

onSort = (columnId, nextSort) => {
console.log("clicked");
console.log(columnId), nextSort;
const nextColumns = this.props.data.getMandateBatchList.listHeader.map((col) => {
if (col.sortable) {
col.sorted = col.id === columnId ? nextSort : 'none';
}
return col;
});
const sort = {
column: columnId,
direction: nextSort
};
console.log(sort);
// const filteredRows = this.filterRows(this.state.filters, this.state.search, sort);
// this.setState({
// columns: nextColumns,
// sort: sort,
// rows: filteredRows
// });
}

onLoadMore=() => {
this.setState({ isLoadingMore: true });
this.props.data.fetchMore({
variables: {
getMandateBatchListRqst: {
context:{
groupId:"UATIN001",
userId:"USER000001",
journeyId:"J0007"
},
startIndex:this.props.data.getMandateBatchList.mandateHeaderDtls.length,
noOfRecords:5
}
},
updateQuery: (previousResult, { fetchMoreResult }) => {
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
}
});
}

}
});
}

onFilterSubmit=(updatedFilters) =>{
console.log('onFilterSubmit', this);
console.log('updatedFilters ',updatedFilters)
const filteredRows = this.filterRows(updatedFilters);
this.setState({
appliedFilters: this.updateAppliedFilters(updatedFilters),
filters: updatedFilters,
rows: filteredRows,
totalItems: filteredRows.length
});
}

updateAppliedFilters=(updatedFilters) =>{
return 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 all', filters);
let filteredRows = this.state.rows;
if (search) {
filteredRows = filteredRows.filter((row) => {
return Object.values(row.data).filter((value) => {
return typeof value === 'string' && value.toLowerCase().indexOf(search.toLowerCase()) > -1;
}).length > 0;
});
}

filters.forEach((filter) => {
const field = filter.id;
console.log('filter single', filter);
console.log('field ', field);
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') {
console.log('in search');
filteredRows = filteredRows.filter((row) => {
console.log('data', row.data);

const value = row.data[field].toLowerCase();
return filter.selected ? value.indexOf(filter.selected.toLowerCase()) > -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) =>{
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);
}


render() {
console.log('akansha', this.props.data);
return (
<DebitBatch>
<ListHeader />
{this.props.data.getMandateBatchList ? (<Blotter
columns={this.state.columns}
rows={this.state.rows}
actions={this.actions}
isLoadingMore={this.state.isLoadingMore}
onLoadMore={this.onLoadMore}
totalItems={this.state.totalItems}
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}
/>) : (<Loader />)}
</DebitBatch>
);
}
}

export default compose(
withApollo,
graphql(
gql`
query($getMandateBatchListRqst: GetMandateBatchListRqst) {

getMandateBatchList(getMandateBatchListRqst: $getMandateBatchListRqst) {
count
listHeader{
id
label
isSortable
sortKey
}
mandateHeaderDtls{
batchRefNo
batchName
creditAcctNo
noOfMandates
status
}
}
}`,
{ options:{
variables: {
getMandateBatchListRqst: {
context:{
groupId:"UATIN001",
userId:"USER000001",
journeyId:"J0007"
},
startIndex:1,
noOfRecords:5
}
}
}
}
)
)(MandateBatches);

export const DebitBatch = styled.section`
margin-right: 40px;
margin-left: 40px;
margin-top: 10px;
font-family: SCSans-Bold;
& tbody {
font-family: SCSans-Regular;
}
`;

export const Loader = styled(Spinner)`
margin-left: 50%;
`;