701 lines
27 KiB
JavaScript
701 lines
27 KiB
JavaScript
import { Component } from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import Button from '@mui/material/Button';
|
|
import Chip from '@mui/material/Chip';
|
|
import CircularProgress from '@mui/material/CircularProgress';
|
|
import Divider from '@mui/material/Divider';
|
|
import FormControlLabel from '@mui/material/FormControlLabel';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import Switch from '@mui/material/Switch';
|
|
import TextField from '@mui/material/TextField';
|
|
import Tooltip from '@mui/material/Tooltip';
|
|
import Typography from '@mui/material/Typography';
|
|
import AddIcon from '@mui/icons-material/Add';
|
|
import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
|
|
import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
|
|
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
|
|
import FolderIcon from '@mui/icons-material/Folder';
|
|
import PointOfSaleIcon from '@mui/icons-material/PointOfSale';
|
|
import { enqueueSnackbar } from 'notistack';
|
|
import BackendError from '../BackendError';
|
|
import CategoryPickerDialog from '../article/CategoryPickerDialog';
|
|
import authAutomat from '../../automats/authAutomat';
|
|
import companyAutomat from '../../automats/companyAutomat';
|
|
import categoryAutomat, { whenCategoryTreeReady } from '../../automats/categoryAutomat';
|
|
import { categoryDisplayName } from '../../utils/categoryUtils';
|
|
import { backendErrorFrom } from '../../utils/backendError';
|
|
import { notifyError } from '../../utils/notify';
|
|
|
|
function parseVhostSettings(str) {
|
|
if (!str || typeof str !== 'string') return {};
|
|
const result = {};
|
|
for (const part of str.split(';')) {
|
|
const trimmed = part.trim();
|
|
if (!trimmed) continue;
|
|
const colonIdx = trimmed.indexOf(':');
|
|
if (colonIdx !== -1) {
|
|
const key = trimmed.slice(0, colonIdx).trim().toLowerCase();
|
|
const val = trimmed.slice(colonIdx + 1).trim();
|
|
result[key] = val;
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function formatDateTime(val) {
|
|
if (!val) return null;
|
|
try {
|
|
const d = new Date(val);
|
|
if (isNaN(d.getTime())) return null;
|
|
return d.toLocaleString('de-DE', {
|
|
day: '2-digit',
|
|
month: '2-digit',
|
|
year: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
});
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
export default class PosTerminalSettingsPanel extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
const terminals = companyAutomat.state.terminals ?? [];
|
|
this.state = {
|
|
isAdmin: companyAutomat.state.current?.role === 'admin',
|
|
status: companyAutomat.state.terminalsStatus === 'succeeded' ? 'ready' : 'loading',
|
|
error: null,
|
|
terminals,
|
|
categories: categoryAutomat.state.categories,
|
|
rootCategoryId: categoryAutomat.state.rootCategoryId,
|
|
vhostSettings: authAutomat.state.vhostSettings,
|
|
newTerminalName: '',
|
|
creatingTerminal: false,
|
|
enableAllForNew: true,
|
|
deletingId: null,
|
|
pickerTerminal: null,
|
|
patchingTerminalId: null,
|
|
sortDrafts: {},
|
|
};
|
|
this.handleRetry = this.handleRetry.bind(this);
|
|
this.loadTerminals = this.loadTerminals.bind(this);
|
|
this.handleCreateTerminal = this.handleCreateTerminal.bind(this);
|
|
this.handleDeleteTerminal = this.handleDeleteTerminal.bind(this);
|
|
this.handleSetRootCategory = this.handleSetRootCategory.bind(this);
|
|
this.handleToggleSyncRootArticles = this.handleToggleSyncRootArticles.bind(this);
|
|
this.handleToggleEnabled = this.handleToggleEnabled.bind(this);
|
|
this.handleSortDraftChange = this.handleSortDraftChange.bind(this);
|
|
this.handleSortSubmit = this.handleSortSubmit.bind(this);
|
|
this.handleMoveTerminal = this.handleMoveTerminal.bind(this);
|
|
this.getCategoryLabel = this.getCategoryLabel.bind(this);
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.unsub = companyAutomat.subscribe(this, (state) => ({
|
|
isAdmin: state.current?.role === 'admin',
|
|
terminals: Array.isArray(state.terminals) ? state.terminals : [],
|
|
status: state.terminalsStatus === 'succeeded' ? 'ready' : state.terminalsStatus === 'failed' ? 'failed' : this.state.status,
|
|
}));
|
|
this.unsubCategory = categoryAutomat.subscribe(this, (state) => ({
|
|
categories: state.categories,
|
|
rootCategoryId: state.rootCategoryId,
|
|
}));
|
|
this.unsubAuth = authAutomat.subscribe(this, (state) => ({
|
|
vhostSettings: state.vhostSettings,
|
|
}));
|
|
if (categoryAutomat.state.treeStatus === 'idle') {
|
|
void categoryAutomat.actions.loadTree();
|
|
}
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this.unsub?.();
|
|
this.unsubCategory?.();
|
|
this.unsubAuth?.();
|
|
}
|
|
|
|
async loadTerminals() {
|
|
this.setState({ error: null });
|
|
try {
|
|
const terminals = await companyAutomat.actions.loadTerminals();
|
|
this.setState({
|
|
status: 'ready',
|
|
terminals: Array.isArray(terminals) ? terminals : [],
|
|
});
|
|
} catch (err) {
|
|
notifyError(err);
|
|
this.setState({ status: 'failed', error: backendErrorFrom(err) });
|
|
}
|
|
}
|
|
|
|
handleRetry() {
|
|
void this.loadTerminals();
|
|
}
|
|
|
|
async handleCreateTerminal() {
|
|
if (!this.state.isAdmin) return;
|
|
const { newTerminalName, enableAllForNew, terminals } = this.state;
|
|
const trimmed = newTerminalName.trim();
|
|
if (!trimmed) return;
|
|
|
|
this.setState({ creatingTerminal: true });
|
|
try {
|
|
const nextSort = terminals.length > 0
|
|
? Math.max(...terminals.map((t) => Number(t.sort) || 0)) + 1
|
|
: 0;
|
|
const created = await companyAutomat.actions.createTerminal({
|
|
name: trimmed,
|
|
sort: nextSort,
|
|
enabled: true,
|
|
});
|
|
|
|
if (enableAllForNew && created?.id != null) {
|
|
await companyAutomat.actions.enableAllTerminalCategories({ terminalId: created.id });
|
|
await whenCategoryTreeReady();
|
|
}
|
|
|
|
this.setState({ newTerminalName: '' });
|
|
enqueueSnackbar('Terminal hinzugefügt.', { variant: 'success' });
|
|
} catch (err) {
|
|
notifyError(err);
|
|
} finally {
|
|
this.setState({ creatingTerminal: false });
|
|
}
|
|
}
|
|
|
|
async handleToggleEnabled(terminal, nextValue) {
|
|
this.setState({ patchingTerminalId: terminal.id });
|
|
try {
|
|
await companyAutomat.actions.updateTerminal(terminal.id, {
|
|
enabled: Boolean(nextValue),
|
|
});
|
|
enqueueSnackbar(nextValue ? 'Terminal aktiviert.' : 'Terminal deaktiviert.', {
|
|
variant: 'success',
|
|
});
|
|
} catch (err) {
|
|
notifyError(err);
|
|
} finally {
|
|
this.setState({ patchingTerminalId: null });
|
|
}
|
|
}
|
|
|
|
handleSortDraftChange(terminalId, value) {
|
|
this.setState((prev) => ({
|
|
sortDrafts: { ...prev.sortDrafts, [terminalId]: value },
|
|
}));
|
|
}
|
|
|
|
async handleSortSubmit(terminal) {
|
|
const draft = this.state.sortDrafts[terminal.id];
|
|
if (draft === undefined) return;
|
|
const nextSort = Number(draft);
|
|
if (isNaN(nextSort) || nextSort === (terminal.sort ?? 0)) {
|
|
this.setState((prev) => {
|
|
const next = { ...prev.sortDrafts };
|
|
delete next[terminal.id];
|
|
return { sortDrafts: next };
|
|
});
|
|
return;
|
|
}
|
|
this.setState({ patchingTerminalId: terminal.id });
|
|
try {
|
|
await companyAutomat.actions.updateTerminal(terminal.id, { sort: nextSort });
|
|
enqueueSnackbar('Reihenfolge aktualisiert.', { variant: 'success' });
|
|
} catch (err) {
|
|
notifyError(err);
|
|
} finally {
|
|
this.setState((prev) => {
|
|
const next = { ...prev.sortDrafts };
|
|
delete next[terminal.id];
|
|
return { sortDrafts: next, patchingTerminalId: null };
|
|
});
|
|
}
|
|
}
|
|
|
|
async handleMoveTerminal(terminal, direction) {
|
|
const { terminals } = this.state;
|
|
const currentIndex = terminals.findIndex((t) => t.id === terminal.id);
|
|
if (currentIndex === -1) return;
|
|
const targetIndex = direction === 'up' ? currentIndex - 1 : currentIndex + 1;
|
|
if (targetIndex < 0 || targetIndex >= terminals.length) return;
|
|
|
|
const other = terminals[targetIndex];
|
|
const currentSort = terminal.sort ?? 0;
|
|
const otherSort = other.sort ?? 0;
|
|
|
|
let newSort;
|
|
if (direction === 'up') {
|
|
newSort = otherSort <= currentSort ? otherSort - 1 : otherSort;
|
|
} else {
|
|
newSort = otherSort >= currentSort ? otherSort + 1 : otherSort;
|
|
}
|
|
|
|
this.setState({ patchingTerminalId: terminal.id });
|
|
try {
|
|
await companyAutomat.actions.updateTerminal(terminal.id, { sort: newSort });
|
|
enqueueSnackbar('Reihenfolge aktualisiert.', { variant: 'success' });
|
|
} catch (err) {
|
|
notifyError(err);
|
|
} finally {
|
|
this.setState({ patchingTerminalId: null });
|
|
}
|
|
}
|
|
|
|
async handleDeleteTerminal(terminal) {
|
|
this.setState({ deletingId: terminal.id });
|
|
try {
|
|
await companyAutomat.actions.deleteTerminal(terminal.id);
|
|
enqueueSnackbar('Terminal gelöscht.', { variant: 'info' });
|
|
} catch (err) {
|
|
notifyError(err);
|
|
} finally {
|
|
this.setState({ deletingId: null });
|
|
}
|
|
}
|
|
|
|
async handleSetRootCategory(terminal, categoryId) {
|
|
this.setState({ patchingTerminalId: terminal.id });
|
|
try {
|
|
await companyAutomat.actions.updateTerminal(terminal.id, {
|
|
rootCategoryId: categoryId != null ? Number(categoryId) : null,
|
|
});
|
|
enqueueSnackbar('Root-Kategorie aktualisiert.', { variant: 'success' });
|
|
} catch (err) {
|
|
notifyError(err);
|
|
} finally {
|
|
this.setState({ patchingTerminalId: null });
|
|
}
|
|
}
|
|
|
|
async handleToggleSyncRootArticles(terminal, nextValue) {
|
|
this.setState({ patchingTerminalId: terminal.id });
|
|
try {
|
|
await companyAutomat.actions.updateTerminal(terminal.id, {
|
|
syncRootArticles: Boolean(nextValue),
|
|
});
|
|
enqueueSnackbar('Synchronisierungseinstellung gespeichert.', { variant: 'success' });
|
|
} catch (err) {
|
|
notifyError(err);
|
|
} finally {
|
|
this.setState({ patchingTerminalId: null });
|
|
}
|
|
}
|
|
|
|
getCategoryLabel(terminal) {
|
|
const { categories, rootCategoryId } = this.state;
|
|
if (terminal.rootCategoryId == null) {
|
|
return 'Standard (Home)';
|
|
}
|
|
const node = categories?.[String(terminal.rootCategoryId)];
|
|
if (!node) {
|
|
return `Kategorie #${terminal.rootCategoryId}`;
|
|
}
|
|
return categoryDisplayName(node.name, node.id, rootCategoryId) || `Kategorie #${terminal.rootCategoryId}`;
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
isAdmin,
|
|
status,
|
|
error,
|
|
terminals,
|
|
vhostSettings,
|
|
newTerminalName,
|
|
creatingTerminal,
|
|
enableAllForNew,
|
|
deletingId,
|
|
pickerTerminal,
|
|
patchingTerminalId,
|
|
rootCategoryId,
|
|
} = this.state;
|
|
|
|
const parsedVhost = parseVhostSettings(vhostSettings);
|
|
const posIp = parsedVhost.posip || parsedVhost.ip || null;
|
|
const posPort = parsedVhost.posport || parsedVhost.port || null;
|
|
const hasVhostSettings = Boolean(posIp || posPort || vhostSettings);
|
|
|
|
if (status === 'loading' && terminals.length === 0) {
|
|
return (
|
|
<Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
|
|
<CircularProgress />
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
if (status === 'failed' && terminals.length === 0) {
|
|
return <BackendError error={error} onRetry={this.handleRetry} />;
|
|
}
|
|
|
|
return (
|
|
<Box sx={{ maxWidth: 680, mx: 'auto', py: 2 }}>
|
|
{hasVhostSettings && (
|
|
<Box
|
|
sx={{
|
|
mb: 2,
|
|
p: 1.5,
|
|
px: 2,
|
|
borderRadius: 2,
|
|
bgcolor: 'action.hover',
|
|
border: '1px solid',
|
|
borderColor: 'divider',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 4,
|
|
flexWrap: 'wrap',
|
|
}}
|
|
>
|
|
<Typography variant="body2" sx={{ color: 'text.secondary', fontWeight: 500 }}>
|
|
Pos Sync IP:{' '}
|
|
<Box component="span" sx={{ color: 'text.primary', fontFamily: 'monospace', fontWeight: 600 }}>
|
|
{posIp ?? '—'}
|
|
</Box>
|
|
</Typography>
|
|
<Typography variant="body2" sx={{ color: 'text.secondary', fontWeight: 500 }}>
|
|
Pos Sync Port:{' '}
|
|
<Box component="span" sx={{ color: 'text.primary', fontFamily: 'monospace', fontWeight: 600 }}>
|
|
{posPort ?? '—'}
|
|
</Box>
|
|
</Typography>
|
|
</Box>
|
|
)}
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
|
|
<TextField
|
|
size="small"
|
|
placeholder="Neues Terminal..."
|
|
value={newTerminalName}
|
|
onChange={(e) => this.setState({ newTerminalName: e.target.value })}
|
|
disabled={!isAdmin || creatingTerminal}
|
|
autoComplete="off"
|
|
slotProps={{
|
|
htmlInput: {
|
|
autoComplete: 'off',
|
|
autoCorrect: 'off',
|
|
autoCapitalize: 'off',
|
|
spellCheck: false,
|
|
},
|
|
}}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
void this.handleCreateTerminal();
|
|
}
|
|
}}
|
|
sx={{ flex: 1 }}
|
|
/>
|
|
<Tooltip title="Alle Kategorien für dieses Terminal aktivieren">
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
|
<PointOfSaleIcon sx={{ fontSize: 18, color: 'text.secondary' }} />
|
|
<Switch
|
|
size="small"
|
|
checked={enableAllForNew}
|
|
onChange={(e) => this.setState({ enableAllForNew: e.target.checked })}
|
|
disabled={!isAdmin || creatingTerminal}
|
|
/>
|
|
</Box>
|
|
</Tooltip>
|
|
<Button
|
|
variant="contained"
|
|
size="small"
|
|
startIcon={creatingTerminal ? <CircularProgress size={16} color="inherit" /> : <AddIcon />}
|
|
onClick={this.handleCreateTerminal}
|
|
disabled={!isAdmin || creatingTerminal || !newTerminalName.trim()}
|
|
>
|
|
Hinzufügen
|
|
</Button>
|
|
</Box>
|
|
|
|
<Divider sx={{ mb: 2 }} />
|
|
|
|
{terminals.length === 0 ? (
|
|
<Box sx={{ textAlign: 'center', py: 6, color: 'text.secondary' }}>
|
|
<PointOfSaleIcon sx={{ fontSize: 48, mb: 1, opacity: 0.5 }} />
|
|
<Typography variant="body2">Keine POS Terminals angelegt.</Typography>
|
|
</Box>
|
|
) : (
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
|
{terminals.map((terminal, index) => {
|
|
const isDeleting = deletingId === terminal.id;
|
|
const isPatching = patchingTerminalId === terminal.id;
|
|
const isEnabled = terminal.enabled !== false && terminal.enabled !== 0 && terminal.enabled != null;
|
|
const pairedDateText = formatDateTime(terminal.pairedAt);
|
|
const lastseenText = formatDateTime(terminal.lastseenAt) ?? 'Nie';
|
|
const updatedText = formatDateTime(terminal.updatedAt) ?? '—';
|
|
|
|
return (
|
|
<Box
|
|
key={terminal.id}
|
|
sx={{
|
|
p: 2,
|
|
borderRadius: 2,
|
|
border: '1px solid',
|
|
borderColor: isEnabled ? 'divider' : 'action.disabledBackground',
|
|
bgcolor: 'background.paper',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: 1.5,
|
|
opacity: isEnabled ? 1 : 0.72,
|
|
transition: 'opacity 0.2s ease, border-color 0.2s ease',
|
|
}}
|
|
>
|
|
{/* Header: Icon, Name, PIN, Version, Status Switch, Delete action */}
|
|
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 1 }}>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, flexWrap: 'wrap' }}>
|
|
<PointOfSaleIcon sx={{ color: isEnabled ? 'primary.main' : 'text.disabled', fontSize: 24 }} />
|
|
<Typography
|
|
variant="subtitle1"
|
|
fontWeight={600}
|
|
sx={{ color: isEnabled ? 'text.primary' : 'text.secondary' }}
|
|
>
|
|
{terminal.name}
|
|
</Typography>
|
|
{terminal.pairingpin ? (
|
|
<Chip
|
|
label={`PIN: ${terminal.pairingpin}`}
|
|
size="small"
|
|
variant="outlined"
|
|
sx={{ fontFamily: 'monospace', fontWeight: 600, fontSize: '0.75rem' }}
|
|
/>
|
|
) : (
|
|
<Chip
|
|
label="Gekoppelt"
|
|
size="small"
|
|
variant="outlined"
|
|
color="success"
|
|
sx={{ fontWeight: 600, fontSize: '0.75rem' }}
|
|
/>
|
|
)}
|
|
{terminal.clientserial ? (
|
|
<Typography variant="caption" color="text.secondary" sx={{ fontFamily: 'monospace' }}>
|
|
({terminal.clientserial})
|
|
</Typography>
|
|
) : null}
|
|
{terminal.clientversion ? (
|
|
<Tooltip title="POS Client Software-Version">
|
|
<Chip
|
|
label={`v${terminal.clientversion}`}
|
|
size="small"
|
|
variant="outlined"
|
|
color="info"
|
|
sx={{ fontFamily: 'monospace', fontWeight: 600, fontSize: '0.75rem' }}
|
|
/>
|
|
</Tooltip>
|
|
) : null}
|
|
</Box>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
|
<Tooltip
|
|
title={
|
|
isEnabled
|
|
? 'Terminal aktiv (kann synchronisieren)'
|
|
: 'Terminal deaktiviert (POS-Zugriff blockiert)'
|
|
}
|
|
>
|
|
<FormControlLabel
|
|
control={
|
|
<Switch
|
|
size="small"
|
|
checked={isEnabled}
|
|
disabled={!isAdmin || isPatching || isDeleting}
|
|
onChange={(e) => void this.handleToggleEnabled(terminal, e.target.checked)}
|
|
color="success"
|
|
/>
|
|
}
|
|
label={
|
|
<Typography
|
|
variant="body2"
|
|
sx={{
|
|
fontSize: '0.8125rem',
|
|
fontWeight: 500,
|
|
color: isEnabled ? 'text.primary' : 'text.disabled',
|
|
}}
|
|
>
|
|
{isEnabled ? 'Aktiv' : 'Inaktiv'}
|
|
</Typography>
|
|
}
|
|
sx={{ m: 0 }}
|
|
/>
|
|
</Tooltip>
|
|
<IconButton
|
|
size="small"
|
|
aria-label={`Terminal ${terminal.name} löschen`}
|
|
onClick={() => void this.handleDeleteTerminal(terminal)}
|
|
disabled={!isAdmin || isDeleting || creatingTerminal || isPatching}
|
|
color="error"
|
|
>
|
|
{isDeleting ? (
|
|
<CircularProgress size={16} color="inherit" />
|
|
) : (
|
|
<DeleteOutlinedIcon fontSize="small" />
|
|
)}
|
|
</IconButton>
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Settings row: Root category picker, sort order controls, and syncRootArticles toggle */}
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
flexWrap: 'wrap',
|
|
gap: 2,
|
|
pt: 0.5,
|
|
}}
|
|
>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
|
|
<Typography variant="body2" color="text.secondary">
|
|
Root-Kategorie:
|
|
</Typography>
|
|
<Chip
|
|
icon={<FolderIcon />}
|
|
label={this.getCategoryLabel(terminal)}
|
|
onClick={isAdmin ? () => this.setState({ pickerTerminal: terminal }) : undefined}
|
|
onDelete={
|
|
isAdmin && terminal.rootCategoryId != null
|
|
? () => void this.handleSetRootCategory(terminal, null)
|
|
: undefined
|
|
}
|
|
clickable={isAdmin}
|
|
disabled={!isAdmin || isPatching || isDeleting}
|
|
variant={terminal.rootCategoryId != null ? 'filled' : 'outlined'}
|
|
color={terminal.rootCategoryId != null ? 'primary' : 'default'}
|
|
size="small"
|
|
/>
|
|
<Button
|
|
size="small"
|
|
variant="text"
|
|
disabled={!isAdmin || isPatching || isDeleting}
|
|
onClick={() => this.setState({ pickerTerminal: terminal })}
|
|
sx={{ minWidth: 'auto', p: 0.5, fontSize: '0.75rem' }}
|
|
>
|
|
Ändern
|
|
</Button>
|
|
</Box>
|
|
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, flexWrap: 'wrap' }}>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
|
<Typography variant="body2" color="text.secondary">
|
|
Reihenfolge:
|
|
</Typography>
|
|
<Tooltip title="Nach oben verschieben">
|
|
<span>
|
|
<IconButton
|
|
size="small"
|
|
disabled={!isAdmin || index === 0 || isPatching || isDeleting}
|
|
onClick={() => void this.handleMoveTerminal(terminal, 'up')}
|
|
sx={{ p: 0.25 }}
|
|
>
|
|
<ArrowUpwardIcon sx={{ fontSize: 16 }} />
|
|
</IconButton>
|
|
</span>
|
|
</Tooltip>
|
|
<Tooltip title="Nach unten verschieben">
|
|
<span>
|
|
<IconButton
|
|
size="small"
|
|
disabled={!isAdmin || index === terminals.length - 1 || isPatching || isDeleting}
|
|
onClick={() => void this.handleMoveTerminal(terminal, 'down')}
|
|
sx={{ p: 0.25 }}
|
|
>
|
|
<ArrowDownwardIcon sx={{ fontSize: 16 }} />
|
|
</IconButton>
|
|
</span>
|
|
</Tooltip>
|
|
<TextField
|
|
type="number"
|
|
size="small"
|
|
disabled={!isAdmin || isPatching || isDeleting}
|
|
value={this.state.sortDrafts[terminal.id] ?? terminal.sort ?? 0}
|
|
onChange={(e) => this.handleSortDraftChange(terminal.id, e.target.value)}
|
|
onBlur={() => void this.handleSortSubmit(terminal)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
e.target.blur();
|
|
}
|
|
}}
|
|
slotProps={{
|
|
htmlInput: {
|
|
step: 1,
|
|
style: { width: 44, padding: '3px 6px', textAlign: 'center', fontSize: '0.8125rem' },
|
|
},
|
|
}}
|
|
sx={{ width: 56 }}
|
|
/>
|
|
</Box>
|
|
|
|
<FormControlLabel
|
|
control={
|
|
<Switch
|
|
size="small"
|
|
checked={Boolean(terminal.syncRootArticles)}
|
|
disabled={!isAdmin || isPatching || isDeleting}
|
|
onChange={(e) => void this.handleToggleSyncRootArticles(terminal, e.target.checked)}
|
|
/>
|
|
}
|
|
label={
|
|
<Typography variant="body2">
|
|
Root-Artikel synchronisieren
|
|
</Typography>
|
|
}
|
|
sx={{ m: 0 }}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Dates row */}
|
|
<Divider sx={{ my: 0.25 }} />
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
flexWrap: 'wrap',
|
|
gap: 2.5,
|
|
color: 'text.secondary',
|
|
}}
|
|
>
|
|
{pairedDateText && (
|
|
<Typography variant="caption" color="text.secondary">
|
|
<strong>Gekoppelt:</strong> {pairedDateText}
|
|
</Typography>
|
|
)}
|
|
<Typography variant="caption" color="text.secondary">
|
|
<strong>Zuletzt online:</strong> {lastseenText}
|
|
</Typography>
|
|
{terminal.clientversion && (
|
|
<Typography variant="caption" color="text.secondary">
|
|
<strong>POS-Software:</strong> {terminal.clientversion}
|
|
</Typography>
|
|
)}
|
|
<Typography variant="caption" color="text.secondary">
|
|
<strong>Aktualisiert:</strong> {updatedText}
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
})}
|
|
</Box>
|
|
)}
|
|
|
|
{pickerTerminal && (
|
|
<CategoryPickerDialog
|
|
open={Boolean(pickerTerminal)}
|
|
onClose={() => this.setState({ pickerTerminal: null })}
|
|
mode="single"
|
|
title={`Root-Kategorie für „${pickerTerminal.name}“`}
|
|
confirmLabel="Übernehmen"
|
|
selectedId={pickerTerminal.rootCategoryId ?? rootCategoryId}
|
|
onSelectCategory={(targetId) => {
|
|
const term = pickerTerminal;
|
|
this.setState({ pickerTerminal: null }, () => {
|
|
void this.handleSetRootCategory(term, targetId);
|
|
});
|
|
}}
|
|
/>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|
|
}
|