Notes

import React from 'react';
import {observer} from 'mobx-react';
import TypeAhead from '@aosprodsys/brucke-ui-core/dist/es/components/TypeAhead';
import Header from '../components/Header';
import Position from '@aosprodsys/brucke-ui-core/dist/es/components/Position';
import FilterTable from '@aosprodsys/brucke-ui-core/dist/es/components/filterTable/FilterTable';
import {StoreContext} from '../utils/StoreContext';
import styles from '../sass/pages/container-parts-count.scss';

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

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

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

render() {
const {isInitializing, notification} = this.context.appState;
const {
containerPartOptions,
anchorOptionGroupVariantsOptions,
selectedCParts,
selectedAnchorOptionGroupVariant,
tableData,
tableColumns
} = this.context.containerPartsCount;

return (
<section className={`${styles.page} container-parts-count`}>
<Header
title="Container Parts Count"
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.containerPartsCount.updateValue({
key: 'selectedCParts',
value: selected
});
this.context.containerPartsCount.getAnchorOptionGroupVariants(selected?.value);
}}
/>
</div>
</div>
<div className="configure-form">
<div className="form-dropdown">
<TypeAhead
placeholder="Select Anchor Option GroupVariants"
showChevronIcon={true}
clearable={false}
selectOptions={{
isMulti: false,
closeMenuOnSelect: true,
hideSelectedOptions: true,
backspaceRemovesValue: true,
options: anchorOptionGroupVariantsOptions,
isDisabled: isInitializing,
showSelectedValue: true
}}
value={selectedAnchorOptionGroupVariant}
onChange={selected => {
this.context.containerPartsCount.updateValue({
key: 'selectedAnchorOptionGroupVariant',
value: selected
});
}}
/>
</div>
</div>

<button
className="button button-block button-elevated"
disabled={
selectedCParts?.value === undefined && selectedAnchorOptionGroupVariant?.value === undefined
}
onClick={() => {
this.context.containerPartsCount.generateContainerCounts(
selectedCParts?.value,
selectedAnchorOptionGroupVariant?.value
);
}}
>
Submit
</button>
</>
);
}}
/>
<section>
{isInitializing ? (
<div className="loader" />
) : (
<section className="table-container" data-testid="table">
<Position enableTimer={false} debounceTimeout={750}>
{({windowInnerHeight = window.innerHeight, width = window.innerWidth}) => (
<FilterTable
ref={ref => {
this.table = ref;
}}
height={windowInnerHeight - 353 - (notification ? 40 : 0)}
width={Math.max(width, 1200)}
columns={tableColumns}
data={tableData}
filterable={false}
showNoResultsEmptyTable
infiniteScroll
onFilterChange={() => {
this.table?.table?.table?.scrollToPosition?.(0);
}}
/>
)}
</Position>
</section>
)}
</section>
</section>
);
}
}

export default observer(ContainerPartsCount);