Notes

async generateCompatibilities() {
columboService.generateBundles();
try {
runInAction(() => {
this.appState.isInitializing = true;
});
const data = (await api.generateCompatibilityPreview(this.configureCParts)).data || [];
const validationErrorsMap = new Map();
const allCategories = new Set();

const containerList = data.reduce((rows, {containerPart, compatibilities, validations}, rowIdx) => {
if (validations && validations?.length > 0) {
const errorMessage = validations[0].message;
if (!validationErrorsMap.has(errorMessage)) {
validationErrorsMap.set(errorMessage, []);
}
validationErrorsMap.get(errorMessage).push(containerPart);
}
(compatibilities[0]?.compatibility || []).forEach(comp => allCategories.add(comp.ogc));
compatibilities.forEach((cbs, colIdx) => {
const newCompatibilites = cbs.compatibility.reduce(
(res, comp) => ({...res, [comp.ogc]: [comp.ov, comp.ovn]}),
{}
);
const newRow = {
...cbs,
...newCompatibilites,
compatibilitiesCount: cbs.compatibility.length,
containerPart,
rowId: `${cbs.status}-${rowIdx}-${colIdx}`
};
rows.push(newRow);
});
return rows;
}, []);

const validationErrors = Array.from(validationErrorsMap).map(
([message, parts]) => `For ${parts.join(', ')}: ${message}`
);

console.log(validationErrors, 'validationErrors');
console.log(this.showAllErrors, 'this.showAllErrors ');

if (validationErrorsMap.size > 0) {
const messageContent = (
<div className={styles.ribbon}>
<div className="ribbon-message warning">
<div className="message-container">
<span className="ribbon-text">{validationErrors[0]}</span>
</div>
{validationErrors.length > 1 && (
<div className="collapse-button-wrapper">
<button
className="collapse-button global-link-bold-gray"
onClick={() => {
!this.showAllErrors;
}}
>
<div>{` Show ${this.showAllErrors ? 'Less' : 'More'}`}</div>
<div className="icon-wrapper">
<div className={`collapse-icon icon icon-${this.showAllErrors ? 'chevronup' : 'chevrondown'}`} />
</div>
</button>
</div>
)}
</div>
{this.showAllErrors &&
validationErrors.slice(1).map((error, index) => (
<div key={index} className="ribbon-message warning">
<div className="message-container">
<span className="ribbon-text">{error}</span>
</div>
</div>
))}
</div>
);
this.appState.handleNotification({
message: messageContent,
levelType: 'warning'
});
}

if (validationErrorsMap.size === 0) {
this.appState.handleNotification({
message: `Successfully generated compatibilities for selected container part${
this.configureCParts.length > 1 ? 's' : ''
}`,
levelType: 'success'
});
}

runInAction(() => {
this.appState.isInitializing = false;
this.containerList = containerList;
this.containerCategories = Array.from(allCategories);
this.selectedRows = {};
});
} catch (error) {
console.log(error, 'error');
this.appState.handleNotification({
message: 'Unable to generate compatibilities. Please try again.',
levelType: 'danger'
});
runInAction(() => {
this.appState.isInitializing = false;
this.containerList = [];
this.selectedRows = {};
});
}
}