diff --git a/src/components/CompanySettingsDialog.jsx b/src/components/CompanySettingsDialog.jsx index 3877823..69c7322 100644 --- a/src/components/CompanySettingsDialog.jsx +++ b/src/components/CompanySettingsDialog.jsx @@ -27,6 +27,7 @@ import PointOfSaleIcon from '@mui/icons-material/PointOfSale'; import { enqueueSnackbar } from 'notistack'; import BackendError from './BackendError'; import SingleLineTextEdit from './SingleLineTextEdit'; +import { StorageManagerContext } from '../api/storageManager'; import { loadCurrentCompany, selectCompanyStatus, @@ -34,12 +35,9 @@ import { updateCompany as updateCompanyThunk, } from '../store/companySlice'; import { - loadPosterminals, createPosterminal, deletePosterminal, enableAllTerminalCategories, - selectPosterminals, - selectPosterminalStatus, } from '../store/posterminalSlice'; import { loadCategoryTree } from '../store/categorySlice'; import { ISO639_OPTIONS, parseTaxRate } from '../utils/companyForm'; @@ -47,6 +45,8 @@ import { backendErrorFrom, isBackendFailure } from '../utils/backendError'; import { notifyError } from '../utils/notify'; class CompanySettingsDialog extends Component { + static contextType = StorageManagerContext; + constructor(props) { super(props); this.state = { @@ -59,11 +59,13 @@ class CompanySettingsDialog extends Component { newTerminalName: '', creatingTerminal: false, enableAllForNew: true, + terminals: [], }; this.handleSubmit = this.handleSubmit.bind(this); this.syncFormFromCompany = this.syncFormFromCompany.bind(this); this.handleCreateTerminal = this.handleCreateTerminal.bind(this); this.handleDeleteTerminal = this.handleDeleteTerminal.bind(this); + this.loadTerminals = this.loadTerminals.bind(this); } componentDidUpdate(prevProps) { @@ -75,10 +77,7 @@ class CompanySettingsDialog extends Component { } else if (companyStatus !== 'loading') { void this.props.loadCurrentCompany(); } - // Load posterminals when dialog opens - if (this.props.posterminalStatus !== 'loading') { - void this.props.loadPosterminals(); - } + void this.loadTerminals(); } if (open && company && company !== prevProps.company) { this.syncFormFromCompany(company); @@ -94,6 +93,15 @@ class CompanySettingsDialog extends Component { }); } + async loadTerminals() { + try { + const terminals = await this.context.posterminalPromise; + this.setState({ terminals }); + } catch (err) { + notifyError(err); + } + } + async handleCreateTerminal() { const { newTerminalName, enableAllForNew } = this.state; const trimmed = newTerminalName.trim(); @@ -101,7 +109,7 @@ class CompanySettingsDialog extends Component { this.setState({ creatingTerminal: true }); try { const terminal = await this.props.createPosterminal({ name: trimmed }).unwrap(); - + // If "enable all" toggle is on, enable all categories for this terminal if (enableAllForNew && terminal.id) { await this.props.enableAllTerminalCategories({ terminalId: terminal.id }).unwrap(); @@ -109,7 +117,8 @@ class CompanySettingsDialog extends Component { this.props.loadCategoryTree(); } - this.setState({ newTerminalName: '' }); + const terminals = await this.context.updatePosterminal(); + this.setState({ newTerminalName: '', terminals }); } catch (err) { notifyError(err); } finally { @@ -120,6 +129,8 @@ class CompanySettingsDialog extends Component { async handleDeleteTerminal(terminal) { try { await this.props.deletePosterminal({ terminalId: terminal.id }).unwrap(); + const terminals = await this.context.updatePosterminal(); + this.setState({ terminals }); } catch (err) { notifyError(err); } @@ -262,73 +273,65 @@ class CompanySettingsDialog extends Component { - {this.props.posterminalStatus === 'loading' ? ( - - - - ) : ( - <> - - {this.props.terminals.map((terminal) => ( - - - - - this.handleDeleteTerminal(terminal)} - disabled={busy || this.state.creatingTerminal} - > - - - - - ))} - - - - this.setState({ newTerminalName: e.target.value })} - disabled={busy || this.state.creatingTerminal} - autoComplete="off" - onKeyDown={(e) => { - if (e.key === 'Enter') { - e.preventDefault(); - this.handleCreateTerminal(); - } - }} - sx={{ flex: 1 }} + + {this.state.terminals.map((terminal) => ( + + + - - - + this.setState({ enableAllForNew: e.target.checked })} + onClick={() => this.handleDeleteTerminal(terminal)} disabled={busy || this.state.creatingTerminal} - /> - - - - - )} + > + + + + + ))} + + + + this.setState({ newTerminalName: e.target.value })} + disabled={busy || this.state.creatingTerminal} + autoComplete="off" + onKeyDown={(e) => { + if (e.key === 'Enter') { + e.preventDefault(); + this.handleCreateTerminal(); + } + }} + sx={{ flex: 1 }} + /> + + + this.setState({ enableAllForNew: e.target.checked })} + disabled={busy || this.state.creatingTerminal} + /> + + + )} @@ -350,14 +353,11 @@ class CompanySettingsDialog extends Component { const mapStateToProps = (state) => ({ company: selectCurrentCompany(state), companyStatus: selectCompanyStatus(state), - terminals: selectPosterminals(state), - posterminalStatus: selectPosterminalStatus(state), }); const mapDispatchToProps = (dispatch) => ({ loadCurrentCompany: () => dispatch(loadCurrentCompany()), updateCompany: (payload) => dispatch(updateCompanyThunk(payload)), - loadPosterminals: () => dispatch(loadPosterminals()), createPosterminal: (payload) => dispatch(createPosterminal(payload)), deletePosterminal: (payload) => dispatch(deletePosterminal(payload)), enableAllTerminalCategories: (payload) => dispatch(enableAllTerminalCategories(payload)),