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: (