Notes

import React from 'react';
import {observer} from 'mobx-react';
import Header from '../components/Header';
import NavTabs from '../components/NavTabs';
import get from 'lodash-es/get';
import isEmpty from 'lodash-es/isEmpty';
import {OverlayTrigger, Popover} from 'react-bootstrap';
import Position from '@aosprodsys/brucke-ui-core/dist/es/components/Position';
import TypeAhead from '@aosprodsys/brucke-ui-core/dist/es/components/TypeAhead';
import Table from '@aosprodsys/brucke-ui-core/dist/es/components/ReactVirtualizedTable';
import {StoreContext} from '../utils/StoreContext';
import styles from '../sass/pages/validation-results.scss';

export class ValidationResults extends React.Component {
static contextType = StoreContext;
table = React.createRef();

componentWillUnmount() {
this.context.validationResults.reset();
this.context.appState.resetState();
}

componentDidMount() {
this.context.validationResults.initialize();
}

getCellIconForStatus = status => {
if (status === 'ERROR') return 'icon icon-before icon-exclamationcircle';
if (status === 'WARNING') return 'icon icon-before icon-exclamationtriangle';
};

render() {
const {isInitializing, notification} = this.context.appState;
const {
tableData,
selectedCParts,
isExporting,
containerPartOptions,
overallValidationStatus,
optionProductAttributesFromPosData,
errorOrWarningTabOptions,
selectedErrorOrWarningTab
} = this.context.validationResults;

const filteredData = tableData.filter(row => {
return !selectedErrorOrWarningTab || selectedErrorOrWarningTab === row.errorWarning;
});

const columns = [
{
Header: 'Status',
accessor: 'status',
Cell: ({value, row}) => {
const val = get(row, 'status', '');
const formattedVal = val.charAt(0).toUpperCase() + val.slice(1).toLowerCase();
return (
<div className={`list-view-table-cell band-status ${val.toLowerCase()}`}>
<span className={`${this.getCellIconForStatus(val)}`} />
{formattedVal}
</div>
);
},
width: 120
},
{
Header: 'Message',
accessor: 'message'
}
];

return (
<section className={`${styles.page} validation-results `}>
<Header
title={
<div className="constraints-title">
<div className="global-header-super">Validation Results</div>
<div className="global-body-large">
{overallValidationStatus ? (
<span>
Overall Status:
<span
className={`global-body-large-bold over-all-validation ${
overallValidationStatus === 'Failed' ? 'error' : 'green'
}`}
>
{overallValidationStatus}
</span>
</span>
) : (
''
)}
</div>
</div>
}
middleRenderer={() => {
return (
<>
<div className="configure-form">
<div className="form-dropdown">
<TypeAhead
placeholder="Select Container Part"
showChevronIcon={true}
clearable={false}
selectOptions={{
isMulti: false,
closeMenuOnSelect: true,
hideSelectedOptions: true,
backspaceRemovesValue: true,
options: containerPartOptions,
isDisabled: isInitializing,
showSelectedValue: true
}}
value={selectedCParts}
onChange={selected => {
this.context.validationResults.updateValue({
key: 'selectedCParts',
value: selected
});
this.context.validationResults.updateValue({
key: 'selectedErrorOrWarningTab',
value: null
});
}}
/>
</div>
</div>
<button
className="button button-block button-elevated"
disabled={!selectedCParts?.value}
onClick={() => {
this.context.validationResults.updateValue({
key: 'selectedErrorOrWarningTab',
value: null
});
this.context.validationResults.getValidationResults(selectedCParts?.value);
}}
>
Submit
</button>
</>
);
}}
>
<button
className="button button-block button-elevated"
disabled={
!selectedCParts?.value ||
(errorOrWarningTabOptions ? errorOrWarningTabOptions.includes('cacheNotFound') : '')
}
onClick={() => {
this.context.validationResults.export(selectedCParts?.value);
}}
>
{isExporting ? 'Exporting...' : 'Export'}
</button>
</Header>

{overallValidationStatus &&
(!errorOrWarningTabOptions.includes('cacheNotFound') && (
<section>
{isInitializing ? (
<div className="loader" />
) : (
<div className="nav-container">
<NavTabs
navs={errorOrWarningTabOptions.map(option => {
return {label: option, value: option};
})}
active={selectedErrorOrWarningTab}
onClick={(e, val) => {
if (this.table && this.table.resetCache) {
this.table.resetCache();
}
this.context.validationResults.updateValue({
key: 'selectedErrorOrWarningTab',
value: val ? val : null
});
}}
/>
</div>
)}
</section>
))}

{!isEmpty(selectedErrorOrWarningTab) && (
<>
{isInitializing ? (
<div className="loader" />
) : (
<section className="table-container" data-testid="table">
<div className="table-action-container">
<div className="actions-right-container">
{!isEmpty(optionProductAttributesFromPosData) ? (
<OverlayTrigger
trigger={['click', 'focus', 'hover']}
placement="bottom"
rootClose
popperConfig={{
modifiers: [
{
name: 'offset',
options: {
offset: [0, 5]
}
}
]
}}
overlay={
<Popover className={`${styles.validationsPopover} popover-info`} data-testid="popover-info">
{optionProductAttributesFromPosData.map(optionProduct => (
<div key={optionProduct.category} className="option-product-category">
<div className="global-body-large-bold">{optionProduct.category}</div>

{optionProduct.attributes.map(attribute => (
<div key={attribute.id} className="global-body-medium">
{attribute.name}
</div>
))}
</div>
))}
</Popover>
}
>
<span className="attributes-message">
<i className="icon icon-infocircle" />
OptionProductAttributesFromPOS
</span>
</OverlayTrigger>
) : (
''
)}

<span className="row-count">{`${filteredData.length}${' '}${
filteredData.length > 1 ? 'Rows' : 'Row'
}`}</span>
</div>
</div>

<Position enableTimer={false} debounceTimeout={750}>
{({windowInnerHeight = window.innerHeight, width = window.innerWidth}) => (
<Table
ref={ref => (this.table = ref)}
height={windowInnerHeight - 330 - (notification ? 40 : 0)}
width={Math.max(width, 1200)}
columns={columns}
data={filteredData}
/>
)}
</Position>
</section>
)}
</>
)}
</section>
);
}
}

export default observer(ValidationResults);