diff --git a/src/components/article/boxes/ArticleViewBrand.jsx b/src/components/article/boxes/ArticleViewBrand.jsx index 00fa504..9fc4264 100644 --- a/src/components/article/boxes/ArticleViewBrand.jsx +++ b/src/components/article/boxes/ArticleViewBrand.jsx @@ -89,7 +89,6 @@ class BrandEdit extends Component { )} @@ -183,6 +178,7 @@ export default class ArticleViewBrand extends PureComponent { return ( - {sku} {(eans ?? []).map((ean) => ( @@ -108,7 +107,6 @@ class EansEdit extends Component { const { sku, draft, onChange, inputRef } = this.props; return ( - {sku} = 0 && settingsTab < terminalCount; const isPhotoMode = settingsTab === -2; + const isDeleteMode = settingsTab === -3; const handleSx = { position: 'absolute', @@ -61,13 +63,19 @@ function TopBand({ onSettingsClick, settingsTab, terminalCount, onPlacementClick ...handleSx, left: '50%', transform: 'translate(-50%, -50%)', - color: isTerminalMode || isPhotoMode ? 'primary.main' : 'common.white', + color: isDeleteMode + ? 'error.main' + : isTerminalMode || isPhotoMode + ? 'primary.main' + : 'common.white', }} > {isTerminalMode ? ( ) : isPhotoMode ? ( + ) : isDeleteMode ? ( + ) : ( )} @@ -94,7 +102,8 @@ function TopBand({ onSettingsClick, settingsTab, terminalCount, onPlacementClick /** * Middle row (1/3): gray band — TextField or terminal toggle. */ -function MiddleBand({ settingsTab, nameInput, terminals, categoryPosterminalIds, onTerminalToggle, onPhotoUpload, onPhotoDelete, fullHash }) { +function MiddleBand({ settingsTab, nameInput, terminals, categoryPosterminalIds, onTerminalToggle, fullHash }) { + const isActionTab = settingsTab === -2 || settingsTab === -3; const fillSx = { width: '100%', height: '100%', @@ -103,6 +112,13 @@ function MiddleBand({ settingsTab, nameInput, terminals, categoryPosterminalIds, justifyContent: 'center', bgcolor: 'grey.300', px: 1, + ...(isActionTab + ? { + '&:hover': { + bgcolor: settingsTab === -3 ? 'rgba(211, 47, 47, 0.12)' : 'grey.400', + }, + } + : {}), }; // Show terminal-specific toggle when on a terminal tab @@ -139,9 +155,27 @@ function MiddleBand({ settingsTab, nameInput, terminals, categoryPosterminalIds, - {fullHash ? 'Löschen' : 'Hochladen'} + {fullHash ? 'Bild löschen' : 'Hochladen'} + + + + ); + } + + // Show category deletion UI when on delete tab + if (settingsTab === -3) { + return ( + + + + + Kategorie löschen @@ -218,7 +252,7 @@ class CategoryBackdrop extends PureComponent { * lower half = gray band with chevrons + delete */ export class CategoryTile extends Component { - state = { settingsTab: -1 }; // -1 = rename, -2 = photo, 0..n-1 = terminal index + state = { settingsTab: -1 }; // -1 = rename, -2 = photo, -3 = delete, 0..n-1 = terminal index handleClick = () => { this.props.onClick?.(); @@ -235,22 +269,33 @@ export class CategoryTile extends Component { const { terminals } = this.props; const terminalCount = terminals?.length || 0; this.setState((prev) => { - const next = prev.settingsTab + 1; - // Cycle: photo (-2) → rename (-1) → terminal 0 → ... → terminal n-1 → photo (-2) - const nextTab = next >= terminalCount ? -2 : next; + let nextTab; + if (prev.settingsTab === -1) { + nextTab = terminalCount > 0 ? 0 : -2; + } else if (prev.settingsTab >= 0 && prev.settingsTab < terminalCount - 1) { + nextTab = prev.settingsTab + 1; + } else if (prev.settingsTab === terminalCount - 1 || prev.settingsTab >= 0) { + nextTab = -2; + } else if (prev.settingsTab === -2) { + nextTab = -3; + } else { + nextTab = -1; + } return { settingsTab: nextTab }; }); }; handleMiddleBandClick = () => { const { settingsTab } = this.state; - const { onPhotoUpload, onPhotoDelete, fullHash } = this.props; + const { onPhotoUpload, onPhotoDelete, fullHash, onDelete } = this.props; if (settingsTab === -2) { if (fullHash) { onPhotoDelete?.(); } else { onPhotoUpload?.(); } + } else if (settingsTab === -3) { + onDelete?.(); } }; @@ -302,6 +347,7 @@ export class CategoryTile extends Component { onPhotoDelete, onPlacementClick, onOpen, + onDelete, ...rest } = this.props; const { settingsTab } = this.state; @@ -328,7 +374,7 @@ export class CategoryTile extends Component { bottom: '33.33%', left: 0, right: 0, - cursor: settingsTab === -2 ? 'pointer' : 'default', + cursor: settingsTab === -2 || settingsTab === -3 ? 'pointer' : 'default', }} > { + const name = cat.name || `Kategorie #${cat.id}`; + if (!window.confirm(`Kategorie „${name}“ wirklich löschen?`)) return; + try { + await categoryAutomat.actions.deleteCategory(cat.id); + enqueueSnackbar(`Kategorie „${name}“ gelöscht.`, { variant: 'success' }); + } catch (err) { + notifyError(err); + } + }; + render() { const { companyId, @@ -462,6 +473,7 @@ class ArtikelKategorienPage extends PureComponent { void categoryAutomat.actions.deleteCategoryImage(item.id) .catch(notifyError); }, + onDelete: () => this.handleDeleteCategory(item), nameInput: (