u

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();
@@ -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,14 +273,8 @@ class CompanySettingsDialog extends Component {
                 <Divider sx={{ my: 1 }} />
 
                 <Box>
-                  {this.props.posterminalStatus === 'loading' ? (
-                    <Box sx={{ display: 'flex', justifyContent: 'center', py: 2 }}>
-                      <CircularProgress size={24} />
-                    </Box>
-                  ) : (
-                    <>
                   <List dense sx={{ py: 0 }}>
-                        {this.props.terminals.map((terminal) => (
+                    {this.state.terminals.map((terminal) => (
                       <ListItem
                         key={terminal.id}
                         sx={{ px: 0, py: 0.5 }}
@@ -327,8 +332,6 @@ class CompanySettingsDialog extends Component {
                       Hinzufügen
                     </Button>
                   </Box>
-                    </>
-                  )}
                 </Box>
               </Stack>
             )}
@@ -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)),