Notes

getRows() {
const { getFieldsForRecordType } = this.props.data;
const { rows, selectOptionList } = this.state;
let updatedRows;
if (getFieldsForRecordType) {
updatedRows = rows.map((row, rowIndex) => {
const data = { ...row.data };
const actions = [...row.actions];
const fieldId = row.id;
const dataTypeValue = data.dataType;
const defaultValue = data.defaultValue;
data.seqNo = <RecordFieldLabel>{data.seqNo}</RecordFieldLabel>;
data.dataType = <RecordFieldLabel>{data.dataType}</RecordFieldLabel>;
data.length = <RecordFieldLabel>{data.length}</RecordFieldLabel>;
data.fieldValueFromFile = (
<RecordFieldLabel>{data.fieldValueFromFile}</RecordFieldLabel>
);
data.fieldName = (
<InputField>
<Select
size="medium"
options={this.state.items}
theme={{ container: 'selectContainer', menu: 'menu' }}
defaultSelected={selectOptionList[fieldId]}
onChange={option =>
this.handleOnChangeFieldName(option, fieldId, row, rowIndex)
}
/>
</InputField>
);
data.remarks = (
<InputField>
<Textfield placeholder="Enter Remarks" size="medium" />
</InputField>
);
data.defaultvalue = (
<InputField>
<Textfield
placeholder="Enter Default value"
size="medium"
value={defaultValue}
onChange={value =>
this.handleDefaultValue(value, fieldId, row, rowIndex)
}
disabled={data.define === 'Edit'}
/>
</InputField>
);
data.define = (
<InputField>
<Button
disabled={!dataTypeValue || defaultValue}
onClick={() => this.handleDefine(fieldId, row, rowIndex)}
>
{data.define}
</Button>
</InputField>
);
return { id: row.id, data, actions };
});
return updatedRows;
}
return updatedRows;
}

getActionButtons = () => {
const actions = {
'add-field': {
label: 'Add Field',
action: this.onAddFields,
},
'delete-field': {
label: 'Delete Field',
action: this.onDeleteFields,
},
'clear-contents': {
label: 'Clear Contents',
action: this.onClearContent,
},
};
return actions;
};

getValue = value => {
this.setState({ selected: value });
};

handleDefaultValue = (value, fieldId, row, rowIndex) => {
this.updateTemplateRecordsData('defaultValue', value.value, rowIndex);
};

updateTemplateRecordsData = (record, value, rowIndex) => {
console.log(this.templateRecordsData, 'redux update');
let recordKey;
if (record === 'dataType') {
recordKey = 'dataType';
} else {
recordKey = record;
}
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
][rowIndex][recordKey] = value;
this.setRowdata(this.selectedPrimaryTab, this.selectedSecondaryTab);
};

handleOnChangeFieldName(option, id, row, rowIndex) {
const { getFieldsForRecordType } = this.props.data;
const { rows, selectOptionList } = this.state;
const rowList = [...rows];
const selectedRow = getFieldsForRecordType.fieldsForRecordTypeList.find(
rowitem => rowitem.fieldName === option.label
);
const updatedRow = {
...row,
data: {
...row.data,
fieldName: selectedRow.fieldName,
dataType: selectedRow.dataType,
length: selectedRow.length,
},
};
rowList[id - 1] = updatedRow;
const optionList = [...selectOptionList];
optionList[id] = option;
this.setState({
rows: rowList,
selectOptionList: optionList,
});

const updateFields = {
fieldName: updatedRow.data.fieldName,
dataType: updatedRow.data.dataType,
length: updatedRow.data.length,
};

Object.keys(updateFields).forEach(field => {
this.updateTemplateRecordsData(field, updateFields[field], rowIndex);
});
}

handleDefine = (fieldId, row, rowIndex) => {
this.setState({
overlayOpen: true,
operationinfodata: row,
rowIndexId: rowIndex,
});
};

open = () => {
this.setState({
overlayOpen: true,
});
};

close = () => {
this.setState({
overlayOpen: false,
selected: '',
});
};

replaceStringFunc() {
const { rowIndexId } = this.state;
const recordKey = 'recordMappingInfoRequest';

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;
let stringToReplace;
let replaceString;
const recordMapping = this.templateRecordsData[primaryTabIndex][
this.recTypeMapping[recordType]
][recordTypeIndex][rowIndexId][recordKey];
if (recordMapping) {
if (recordMapping.replaceStringRequest.stringToReplace) {
stringToReplace = recordMapping.replaceStringRequest.stringToReplace;
}
if (recordMapping.replaceStringRequest.replaceString) {
replaceString = recordMapping.replaceStringRequest.replaceString;
}
}

return (
<div>
<div>
String to Replace
<Textfield
value={stringToReplace}
onChange={text => this.handlereplaceString(text, 'toReplace')}
/>
</div>
<div>
Replace Text
<Textfield
value={replaceString}
onChange={text => this.handlereplaceString(text, 'replaceText')}
/>
</div>
<br />
</div>
);
}

oprationInfo = () => {
const { selected } = this.state;
if (selected === 'Replace String') {
return this.replaceStringFunc();
}
return false;
// } else if (selected === 'Trim') {
// return (
// <div>
// <div>
// {' '}
// Start Position{' '}
// <Textfield
// defaultValue=""
// value={this.state.stringToReplace}
// onChange={(pos) => this.handleTrim(pos, 'startPos')}
// />
// </div>
// <div>
// {' '}
// End Position{' '}
// <Textfield
// defaultValue=""
// value={this.state.replaceString}
// onChange={(pos) => this.handleTrim(pos, 'endPos')}
// />
// </div>
// </div>
// );
// }
};

handlereplaceString = (value, type) => {
const { rowIndexId } = this.state;
let replaceStringRequest;
if (type === 'toReplace') {
this.replaceString.stringToReplace = value.value;
replaceStringRequest = {
replaceStringRequest: {
stringToReplace: this.replaceString.stringToReplace,
replaceString: this.replaceString.replaceText,
},
};
this.updateTemplateRecordsData(
'recordMappingInfoRequest',
replaceStringRequest,
rowIndexId
);
// this.setState({ stringToReplace: value.value }, () => {
// const replaceStringRequest = {
// replaceStringRequest: {
// stringToReplace: this.state.stringToReplace,
// replaceString: this.state.replaceString,
// },
// };
// this.updateTemplateRecordsData(
// 'recordMappingInfoRequest',
// replaceStringRequest,
// rowIndexId
// );
// });
// this.setState({stringToReplace : ''});
}
if (type === 'replaceText') {
// replaceStringRequest = {
// replaceStringRequest: {
// stringToReplace,
// replaceString: value.value,
// },
// };
// this.replaceString.replaceText = value.value;
this.replaceString.replaceText = value.value;
replaceStringRequest = {
replaceStringRequest: {
stringToReplace: this.replaceString.stringToReplace,
replaceString: this.replaceString.replaceText,
},
};
this.updateTemplateRecordsData(
'recordMappingInfoRequest',
replaceStringRequest,
rowIndexId
);
// this.setState({ replaceString: value.value }, () => {
// const replaceStringRequest = {
// replaceStringRequest: {
// stringToReplace: this.state.stringToReplace,
// replaceString: this.state.replaceString,
// },
// };
// this.updateTemplateRecordsData(
// 'recordMappingInfoRequest',
// replaceStringRequest,
// rowIndexId
// );
// });
// this.setState({stringToReplace : ''})
}
};

handleTrim = (pos, type) => {
this.setState({
startPos: type === 'startPos' ? pos : this.state.startPos,
endPos: type === 'endPos' ? pos : this.state.endPos,
});
};

handleSubmitMapping = () => {
this.setState({ overlayOpen: false });
const { operationinfodata, endPos, startPos, rows } = this.state;
const mappinginfoArray = { ...operationinfodata, mappingElements: [] };
let mappinginfo;
// mappinginfo = {...operationinfodata, mappingElements: [...mappinginfoArray.mappingElements, {'replaceString': replaceString}]}
// if (replaceString !== '') {
// mappinginfo = {
// ...mappinginfoArray,
// mappingElements: [
// ...mappinginfoArray.mappingElements,
// { replaceString }
// ]
// };
// }
if (endPos !== '' && startPos !== '') {
mappinginfo = {
...mappinginfoArray,
mappingElements: [
...mappinginfoArray.mappingElements,
{ startPos, endPos },
],
};
}
const rowstosend = [...rows];
const updatedifine = {
...operationinfodata,
data: { ...operationinfodata.data, define: 'edit' },
};
rowstosend[operationinfodata.id - 1] = mappinginfo;
rowstosend[operationinfodata.id - 1] = updatedifine;

this.props.setMappingData(rowstosend);
};

render() {
const { primaryTabs, secondaryTabs } = this.state;
return (
<I18n ns="common/common">
{() => (
<Wrapper>
{this.getRows() ? (
<Blotter
columns={this.getColumns()}
rows={this.getRows()}
actions={this.getActionButtons()}
primaryTabs={primaryTabs}
secondaryTabs={secondaryTabs}
onPrimaryTabSelect={this.onPrimaryTabSelect}
onSecondaryTabSelect={this.onSecondaryTabSelect}
theme={{
tableTools: 'tableTools',
topTools: 'topTools',
tableRowCell: 'tableRowCell',
tableContainer: 'tableContainer',
tableHeaderCell: 'tableHeaderCell',
}}
/>
) : (
<Loader />
)}
<Overlay
open={this.state.overlayOpen}
onShadowClick={this.close}
onEscape={this.close}
theme={{ content: 'overlayWidth' }}
>
<ContentDiv>
<DualListComponent selectedTask={this.getValue} />
<RightSection>
<Card> {this.oprationInfo()}</Card>
</RightSection>
</ContentDiv>
<Card>
{' '}
<Button buttonType="primary" onClick={this.handleSubmitMapping}>
Ok
</Button>
</Card>
</Overlay>
<FooterNavBar
history={this.props.history}
backUrl="confirmRecords"
stepIndex={2}
nextUrl="review"
nextClick={this.onNextClick}
/>
</Wrapper>
)}
</I18n>
);
}
}

const Wrapper = styled.div`
margin: 10px 36px;
.tableTools {
margin: 0px;
}
.topTools {
margin: 0px;
}
.selectContainer {
position: relative;
top: -9px;
}
.tableRowCell {
border-right: 0px;
}
.tableContainer {
margin: 0px;
}
.tableHeaderCell {
border-right: 0px;
}
.menu {
width: 300px;
}
`;

const Loader = styled(Spinner)`
display: 'flux';
alinitems: 'center';
justifycontent: 'center';
padding: 10;
`;

const ContentDiv = styled.div`display: flex, height: 100%; padding: 15px`;

const InputField = styled.div`
width: 150px;
`;

const RightSection = styled.div`
background: white;
padding: 5px;
margin: 5px;
width: 48%;
`;

const RecordFieldLabel = styled.div`
padding: 1.3em 0 0 0;
`;

MapFields.propTypes = {
history: PropTypes.shape({
push: PropTypes.func,
}),
data: PropTypes.object,
udaReducer: PropTypes.shape({
mappinginfo: PropTypes.object,
templateResponseData: PropTypes.object,
}),
setMappingData: PropTypes.func,
setAfterMapping: PropTypes.func,
};

export default compose(
graphql(
gql`
query mappingQuery(
$getFieldsForRecordTypeRequest: GetFieldsForRecordTypeRequest
) {
getFieldsForRecordType(
getFieldsForRecordTypeRequest: $getFieldsForRecordTypeRequest
) {
fieldsForRecordTypeList {
fieldName
dataType
length
mandatory
}
}
}
`,
{
options: {
variables: {
getFieldsForRecordTypeRequest: {
recType: 'Payment', // rectype seleced while file upload
appSubType: 'Payments', // sub-Product selected in definne template
},
},
},
}
),
connect(
mapStateToProps,
mapDispatchToProps
)
)(withApollo(MapFields));