Notes

import React, { Component } from 'react';
import {
Blotter,
Textfield,
Button,
Select,
Overlay,
Spinner,
Card,
} from 'foundation-components-core';
import { I18n } from 'react-i18next';
import styled from 'styled-components';
import { PropTypes } from 'prop-types';
import gql from 'graphql-tag';
import { graphql, compose, withApollo } from 'react-apollo';
import { connect } from 'react-redux';

// import MapFieldData from './mapFieldsData.json';
import { universalAdapterCreate } from '../../CommonRoutes';
import { setMappingData, setAfterMapping } from '../action';
import DualListComponent from '../components/DualListComponent';
import FooterNavBar from '../components/FooterNavBar';

const mapDispatchToProps = dispatch => ({
setMappingData: templateData => {
setMappingData(templateData, dispatch);
},
setAfterMapping: data => {
setAfterMapping(data, dispatch);
},
});

const mapStateToProps = state => {
const { udaReducer } = state.default;
return {
udaReducer,
};
};

const MapFieldData = {
columns: [
{ id: 'seqNo', label: 'Seq No', type: 'custom' },
{
id: 'fieldValueFromFile',
label: 'Field Value From File',
type: 'custom',
},
{ id: 'fieldName', label: 'Bank Field Name', type: 'custom' },
{ id: 'remarks', label: 'Remarks', type: 'custom' },
{ id: 'dataType', label: 'DataType', type: 'custom' },
{ id: 'length', label: 'Length', type: 'custom' },
{ id: 'defaultvalue', label: 'Default value', type: 'custom' },
{ id: 'define', label: 'Mapping Functions', type: 'custom' },
],
};

class MapFields extends Component {
constructor(props) {
super(props);
this.state = {
rows: '',
items: '',
selectOptionList: [],
operationinfodata: '',
startPos: '',
endPos: '',
primaryTabs: [],
secondaryTabs: [],
rowIndexId: '',
};
this.replaceString = {
replaceText: '',
stringToReplace: '',
};
this.selectedPrimaryTab = '';
this.selectedSecondaryTab = '';
this.templateRecordsData = [...props.udaReducer.templateResponseData];
this.recTypeMapping = {
Header: 'headerRecordList',
Transaction: 'detailRecordList',
Trailer: 'trailerRecordList',
};
}

componentDidMount = () => {};

componentWillReceiveProps = nextProps => {
const { recType: selectedPrimaryTabId } = this.templateRecordsData[0];

const firstRecordTypeObject = this.templateRecordsData[0];

const firstRecordTypeFirstKey = Object.keys(firstRecordTypeObject)[0];

const selectedSecondaryTabId =
firstRecordTypeObject &&
firstRecordTypeObject[firstRecordTypeFirstKey][0] &&
firstRecordTypeObject[firstRecordTypeFirstKey][0][0].recType;
this.selectedPrimaryTab = selectedPrimaryTabId;
this.selectedSecondaryTab = `${selectedSecondaryTabId}_1`;
this.setTabsData(selectedPrimaryTabId, `${selectedSecondaryTabId}_1`);

this.setRowdata(selectedPrimaryTabId, `${selectedSecondaryTabId}_1`);

const { getFieldsForRecordType } = nextProps.data;
// const templateRecordStructure = {
// recordMappingInfoRequest: null,
// fieldName: '',
// recType: '',
// recTypeLineNo: 0,
// fieldSequence: 0,
// dataType: '',
// fieldMaxLength: 0,
// mandatory: '',
// defaultValue: '',
// deleteFlag: '',
// dateFormat: '',
// fieldValueFromFile: ''
// };
// const rows = templateParsingdata.importUDADataTemplate.uDADataTemplateList[0].headerRecordList[0].headerValues.map(
// (row, index) => ({
// id: index + 1,
// data: {
// seqNo: `${index + 1}`,
// fieldvaluefromfile: row,
// fieldName: '',
// dataType: '',
// length: '',
// define: 'Map'
// },
// actions: ['add-field', 'delete-field', 'clear-contents']
// })
// );
if (getFieldsForRecordType) {
const items = getFieldsForRecordType.fieldsForRecordTypeList.map(
(item, index) => ({
label: item.fieldName,
value: index + 1,
})
);
this.setState({
items,
});
}
};

onAddFields = selectedRows => {
const selectedId = selectedRows[0].id;
const secondaryList = this.getRecordList();
const noToPickItem = this.selectedSecondaryTab.slice(-1) - 1;

const templateRecordStructure = {
recordMappingInfoRequest: null,
fieldName: '',
recType: '',
recTypeLineNo: 0,
fieldSequence: 0,
dataType: '',
fieldMaxLength: 0,
mandatory: '',
defaultValue: '',
deleteFlag: '',
dateFormat: '',
fieldValueFromFile: '',
};

secondaryList[noToPickItem].splice(selectedId, 0, templateRecordStructure);
const selectedSecondaryTabIdName = this.selectedSecondaryTab.slice(0, -2);
const updatedRow = secondaryList[noToPickItem].map((row, index) => {
if (selectedId <= index) {
return {
...row,
fieldSequence: index + 1,
recTypeLineNo: noToPickItem + 1,
recType: selectedSecondaryTabIdName,
};
}
return row;
});

let primaryTabIndex;
this.templateRecordsData.forEach((tabData, index) => {
if (tabData.recType === this.selectedPrimaryTab) {
primaryTabIndex = index;
}
});

const recordType = this.selectedSecondaryTab.substring(
0,
this.selectedSecondaryTab.indexOf('_')
);
let recordTypeIndex = this.selectedSecondaryTab.substring(
this.selectedSecondaryTab.indexOf('_') + 1
);

recordTypeIndex = parseInt(recordTypeIndex, 10) - 1;

this.templateRecordsData[primaryTabIndex][this.recTypeMapping[recordType]][
recordTypeIndex
] = updatedRow;

this.setRowdata(this.selectedPrimaryTab, this.selectedSecondaryTab);

// setRowdata = (selectedPrimaryTabId, this.selectedSecondaryTab)

// const { rows } = this.state;
// const availableRows = [...rows];

// const rowToAdd = {
// id: selectedId + 1,
// data: {
// seqNo: selectedId + 1,
// fieldName: "",
// dataType: "",
// length: "",
// define: "Map"
// },
// actions: ["add-field", "delete-field", "clear-contents"]
// };

// availableRows.splice(selectedId, 0, rowToAdd);
// const updatedRows = availableRows.map((row, index) => {
// if (selectedId < index) {
// return {
// ...row,
// id: row.id + 1,
// data: { ...row.data, seqNo: row.id + 1 }
// };
// }
// return row;
// });
// this.setState({ rows: updatedRows });
};

onDeleteFields = selectedRows => {
const selectedId = selectedRows[0].id;
const secondaryList = this.getRecordList();

const noToPickItem = this.selectedSecondaryTab.slice(-1) - 1;
secondaryList[noToPickItem].splice(selectedId - 1, 1);

const updatedRow = secondaryList[noToPickItem].map((row, index) => ({
...row,
fieldSequence: index + 1,
}));

let primaryTabIndex;
this.templateRecordsData.forEach((tabData, index) => {
if (tabData.recType === this.selectedPrimaryTab) {
primaryTabIndex = index;
}
});

const recordType = this.selectedSecondaryTab.substring(
0,
this.selectedSecondaryTab.indexOf('_')
);
let recordTypeIndex = this.selectedSecondaryTab.substring(
this.selectedSecondaryTab.indexOf('_') + 1
);

recordTypeIndex = parseInt(recordTypeIndex, 10) - 1;

this.templateRecordsData[primaryTabIndex][this.recTypeMapping[recordType]][
recordTypeIndex
] = updatedRow;

this.setRowdata(this.selectedPrimaryTab, this.selectedSecondaryTab);

// const { rows } = this.state;
// const availableRows = [...rows];
// availableRows.splice(selectedId - 1, 1);

// const updatedRows = availableRows.map((row, index) => ({
// ...row,
// id: index + 1,
// data: { ...row.data, seqNo: index + 1 }
// }));

// this.setState({ rows: updatedRows });
};

onClearContent = selectedRows => {
const selectedId = selectedRows[0].id;
const secondaryList = this.getRecordList();
const noToPickItem = this.selectedSecondaryTab.slice(-1) - 1;

const updatedRow = secondaryList[noToPickItem].map((row, index) => {
if (row.fieldSequence === selectedId) {
return {
...row,
dataType: '',
dateFormat: '',
defaultValue: '',
fieldMaxLength: '',
fieldName: '',
length: '',
mandatory: '',
recordMappingInfoRequest: null,
};
}
return row;
});

let primaryTabIndex;
this.templateRecordsData.forEach((tabData, index) => {
if (tabData.recType === this.selectedPrimaryTab) {
primaryTabIndex = index;
}
});

const recordType = this.selectedSecondaryTab.substring(
0,
this.selectedSecondaryTab.indexOf('_')
);
let recordTypeIndex = this.selectedSecondaryTab.substring(
this.selectedSecondaryTab.indexOf('_') + 1
);

recordTypeIndex = parseInt(recordTypeIndex, 10) - 1;

this.templateRecordsData[primaryTabIndex][this.recTypeMapping[recordType]][
recordTypeIndex
] = updatedRow;

this.setRowdata(this.selectedPrimaryTab, this.selectedSecondaryTab);
};

getRecordList = () => {
const rowDataList = this.templateRecordsData.filter(
tabdata => tabdata.recType === this.selectedPrimaryTab
);

const selectedSecondaryTabIdName = this.selectedSecondaryTab.slice(0, -2);

const secondaryList =
rowDataList[0][this.recTypeMapping[selectedSecondaryTabIdName]];

return secondaryList;
};

onNextClick = () => {
this.props.setAfterMapping(this.templateRecordsData);
this.props.history.push({
pathname: `/${universalAdapterCreate}/review`,
state: { stepIndex: 2 },
});
};

onPrimaryTabSelect = id => {
let firstRecordTypeObject;
this.templateRecordsData.forEach((tabData, index) => {
if (tabData.recType === id) {
firstRecordTypeObject = this.templateRecordsData[index];
}
});

const firstRecordTypeFirstKey = Object.keys(firstRecordTypeObject)[0];

let selectedSecondaryTabId =
firstRecordTypeObject &&
firstRecordTypeObject[firstRecordTypeFirstKey][0] &&
firstRecordTypeObject[firstRecordTypeFirstKey][0][0].recType;

const recTypesList = {
header: 'Header',
Invoice: 'Transaction',
trailer: 'Trailer',
Payment: 'Transaction',
};

Object.keys(recTypesList).forEach(() => {
if (recTypesList[selectedSecondaryTabId]) {
selectedSecondaryTabId = recTypesList[selectedSecondaryTabId];
}
});
this.selectedPrimaryTab = id;
this.setState({ primaryTabs: [], secondaryTabs: [] }, () => {
this.setTabsData(id, `${selectedSecondaryTabId}_1`);
});
};

onSecondaryTabSelect = id => {
// this.setTabsData(selectedPrimaryTab, id);
this.selectedSecondaryTab = id;
this.setState({ primaryTabs: [], secondaryTabs: [] }, () => {
this.setTabsData(this.selectedPrimaryTab, id);
this.setRowdata(this.selectedPrimaryTab, id);
});
};

setRowdata = (selectedPrimaryTabId, selectedSecondaryTabId) => {
const rowDataList = this.templateRecordsData.filter(
tabdata => tabdata.recType === selectedPrimaryTabId
);

const selectedSecondaryTabIdName = selectedSecondaryTabId.slice(0, -2);

const secondaryList =
rowDataList[0][this.recTypeMapping[selectedSecondaryTabIdName]];
// if (selectedSecondaryTabIdName === 'Header') {
// secondaryList = rowDataList[0].headerRecordList;
// }
// if (selectedSecondaryTabIdName === 'Transaction') {
// secondaryList = rowDataList[0].detailRecordList;
// }
// if (selectedSecondaryTabIdName === 'Trailer') {
// secondaryList = rowDataList[0].trailerRecordList;
// }
const noToPickItem = selectedSecondaryTabId.slice(-1) - 1;

const rows = secondaryList[noToPickItem].map(row => ({
id: row.fieldSequence,
data: {
seqNo: row.fieldSequence,
fieldValueFromFile: row.fieldValueFromFile
? row.fieldValueFromFile
: '',
fieldName: row.fieldName ? row.fieldName : '',
dataType: row.dataType ? row.dataType : '',
length: row.length ? row.length : '',
defaultValue: row.defaultValue ? row.defaultValue : '',
define: row.recordMappingInfoRequest ? 'Edit' : 'Map',
},
actions: ['add-field', 'delete-field', 'clear-contents'],
}));

this.setState({ rows });
};

setTabsData = (selectedPrimaryTabId, selectedSecondaryTabId) => {
const { primaryTabs, secondaryTabs } = this.state;
this.templateRecordsData.forEach(primaryTab => {
primaryTabs.push({
id: primaryTab.recType,
label: primaryTab.recType,
selected: selectedPrimaryTabId === primaryTab.recType,
});
});
this.setState({ primaryTabs });
const recTypesList = {
headerRecordList: 'Header',
detailRecordList: 'Transaction',
trailerRecordList: 'Trailer',
};

Object.keys(recTypesList).forEach(recType => {
const primaryTabData = this.templateRecordsData.filter(
tabData => tabData.recType === selectedPrimaryTabId
);
if (primaryTabData[0][recType]) {
primaryTabData[0][recType].forEach((header, secondaryTabIndex) => {
secondaryTabs.push({
id: `${recTypesList[recType]}_${secondaryTabIndex + 1}`,
label: `${recTypesList[recType]} ${secondaryTabIndex + 1}`,
selected:
selectedSecondaryTabId ===
`${recTypesList[recType]}_${secondaryTabIndex + 1}`,
});
this.setState({ secondaryTabs });
});
}
});
this.setRowdata(selectedPrimaryTabId, selectedSecondaryTabId);
};

getColumns() {
const columns = MapFieldData.columns.filter(item => item.label !== null);
return columns;
}