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();
@@ -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 {
                 <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) => (
-                          <ListItem
-                            key={terminal.id}
-                            sx={{ px: 0, py: 0.5 }}
-                          >
-                            <PointOfSaleIcon sx={{ mr: 1, color: 'text.secondary', fontSize: 20 }} />
-                            <ListItemText
-                              primary={terminal.name}
-                              secondary={`PIN: ${terminal.pairingpin}`}
-                            />
-                            <ListItemSecondaryAction>
-                              <IconButton
-                                edge="end"
-                                size="small"
-                                onClick={() => this.handleDeleteTerminal(terminal)}
-                                disabled={busy || this.state.creatingTerminal}
-                              >
-                                <DeleteOutlinedIcon fontSize="small" />
-                              </IconButton>
-                            </ListItemSecondaryAction>
-                          </ListItem>
-                        ))}
-                      </List>
-
-                      <Box sx={{ mt: 1, display: 'flex', alignItems: 'center', gap: 1 }}>
-                        <TextField
-                          size="small"
-                          placeholder="Neues Terminal..."
-                          value={this.state.newTerminalName}
-                          onChange={(e) => 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 }}
+                  <List dense sx={{ py: 0 }}>
+                    {this.state.terminals.map((terminal) => (
+                      <ListItem
+                        key={terminal.id}
+                        sx={{ px: 0, py: 0.5 }}
+                      >
+                        <PointOfSaleIcon sx={{ mr: 1, color: 'text.secondary', fontSize: 20 }} />
+                        <ListItemText
+                          primary={terminal.name}
+                          secondary={`PIN: ${terminal.pairingpin}`}
                         />
-                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-                          <PointOfSaleIcon sx={{ fontSize: 18, color: 'text.secondary' }} />
-                          <Switch
+                        <ListItemSecondaryAction>
+                          <IconButton
+                            edge="end"
                             size="small"
-                            checked={this.state.enableAllForNew}
-                            onChange={(e) => this.setState({ enableAllForNew: e.target.checked })}
+                            onClick={() => this.handleDeleteTerminal(terminal)}
                             disabled={busy || this.state.creatingTerminal}
-                          />
-                        </Box>
-                        <Button
-                          variant="contained"
-                          size="small"
-                          onClick={this.handleCreateTerminal}
-                          disabled={busy || this.state.creatingTerminal || !this.state.newTerminalName.trim()}
-                        >
-                          Hinzufügen
-                        </Button>
-                      </Box>
-                    </>
-                  )}
+                          >
+                            <DeleteOutlinedIcon fontSize="small" />
+                          </IconButton>
+                        </ListItemSecondaryAction>
+                      </ListItem>
+                    ))}
+                  </List>
+
+                  <Box sx={{ mt: 1, display: 'flex', alignItems: 'center', gap: 1 }}>
+                    <TextField
+                      size="small"
+                      placeholder="Neues Terminal..."
+                      value={this.state.newTerminalName}
+                      onChange={(e) => 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 }}
+                    />
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                      <PointOfSaleIcon sx={{ fontSize: 18, color: 'text.secondary' }} />
+                      <Switch
+                        size="small"
+                        checked={this.state.enableAllForNew}
+                        onChange={(e) => this.setState({ enableAllForNew: e.target.checked })}
+                        disabled={busy || this.state.creatingTerminal}
+                      />
+                    </Box>
+                    <Button
+                      variant="contained"
+                      size="small"
+                      onClick={this.handleCreateTerminal}
+                      disabled={busy || this.state.creatingTerminal || !this.state.newTerminalName.trim()}
+                    >
+                      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)),