Route article detail tabs in the URL and pin a preferred default.

Use /artikel/:sku/:tab with a localStorage-backed default, and a pin control to set which tab opens first.
2026-08-01 06:45:25 +02:00
parent 80f093649a
commit 780f946eff
6 changed files with 302 additions and 118 deletions
--- a/src/components/article/ArticleTileTab.jsx
+++ b/src/components/article/ArticleTileTab.jsx
@@ -1,6 +1,7 @@
 import { Component } from 'react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
 import Tab from '@mui/material/Tab';
 import Tabs from '@mui/material/Tabs';
 import Typography from '@mui/material/Typography';
@@ -11,56 +12,55 @@ import HistoryIcon from '@mui/icons-material/History';
 import LabelIcon from '@mui/icons-material/Label';
 import LocalShippingIcon from '@mui/icons-material/LocalShipping';
 import ManageSearchIcon from '@mui/icons-material/ManageSearch';
+import PushPinIcon from '@mui/icons-material/PushPin';
 import SettingsIcon from '@mui/icons-material/Settings';
 import { article } from '../../api';
+import {
+  ARTICLE_TAB,
+  DEFAULT_ARTICLE_TAB,
+  articleShowsCompoundTab,
+  readPreferredArticleTab,
+  writePreferredArticleTab,
+} from '../../pages/artikel/articleRoute';
 import { notifyError } from '../../utils/notify';
 import { PanelTile } from '../panels';
 import { PANEL_TILE_BORDER_RADIUS, responsiveColumnSpan } from '../panels/panelTileLayout';

-const TAB = {
-  history: 'history',
-  supplier: 'supplier',
-  seo: 'seo',
-  label: 'label',
-  attributes: 'attributes',
-  compound: 'compound',
-  settings: 'settings',
-};
-
 const ALWAYS_TABS = [
-  { id: TAB.history, label: 'History', color: '#fed7aa', Icon: HistoryIcon },
-  { id: TAB.supplier, label: 'Supplier', color: '#bbf7d0', Icon: LocalShippingIcon },
-  { id: TAB.seo, label: 'SEO & Beschreibung', color: '#99f6e4', Icon: ManageSearchIcon },
-  { id: TAB.label, label: 'Label', color: '#fde68a', Icon: LabelIcon },
-  { id: TAB.attributes, label: 'Attribute und Merkmale', color: '#bfdbfe', Icon: CategoryIcon },
+  { id: ARTICLE_TAB.history, label: 'History', color: '#fed7aa', Icon: HistoryIcon },
+  { id: ARTICLE_TAB.supplier, label: 'Supplier', color: '#bbf7d0', Icon: LocalShippingIcon },
+  {
+    id: ARTICLE_TAB.seo,
+    label: 'SEO & Beschreibung',
+    color: '#99f6e4',
+    Icon: ManageSearchIcon,
+  },
+  { id: ARTICLE_TAB.label, label: 'Label', color: '#fde68a', Icon: LabelIcon },
+  {
+    id: ARTICLE_TAB.attributes,
+    label: 'Attribute und Merkmale',
+    color: '#bfdbfe',
+    Icon: CategoryIcon,
+  },
 ];

 const COMPOUND_TAB = {
-  id: TAB.compound,
+  id: ARTICLE_TAB.compound,
  label: 'Compound Editor',
  color: '#e9d5ff',
  Icon: AccountTreeIcon,
 };

 const SETTINGS_TAB = {
-  id: TAB.settings,
+  id: ARTICLE_TAB.settings,
  label: 'Einstellungen',
  color: '#fca5a5',
  Icon: SettingsIcon,
 };

-function isCompoundArticle(article) {
-  return (
-    article?.articleListCount > 0 ||
-    article?.optionsCount > 0 ||
-    article?.childCount > 0 ||
-    article?.fatherArticleId != null
-  );
-}
-
 function visibleTabs(article) {
  const tabs = [...ALWAYS_TABS];
-  if (isCompoundArticle(article)) {
+  if (articleShowsCompoundTab(article)) {
    tabs.push(COMPOUND_TAB);
  }
  tabs.push(SETTINGS_TAB);
@@ -86,7 +86,7 @@ function PanelValue({ label, children }) {
 function Placeholder({ label }) {
  return (
    <Typography variant="body2" color="text.secondary">
-      {label} — noch nicht verfügbar.
+      {label}
    </Typography>
  );
 }
@@ -94,21 +94,24 @@ function Placeholder({ label }) {
 class ArticleTileTab extends Component {
  constructor(props) {
    super(props);
-    this.state = { tab: TAB.seo, busy: false };
+    this.state = {
+      busy: false,
+      preferredTab: readPreferredArticleTab(),
+    };
    this.handleTabChange = this.handleTabChange.bind(this);
+    this.handlePinDefault = this.handlePinDefault.bind(this);
    this.handleDeleteArticle = this.handleDeleteArticle.bind(this);
  }

-  componentDidUpdate(prevProps) {
-    if (prevProps.article === this.props.article) return;
-    const tabs = visibleTabs(this.props.article);
-    if (!tabs.some((row) => row.id === this.state.tab)) {
-      this.setState({ tab: TAB.seo });
-    }
+  handleTabChange(_event, tab) {
+    this.props.onTabChange?.(tab);
  }

-  handleTabChange(_event, tab) {
-    this.setState({ tab });
+  handlePinDefault() {
+    const { tab } = this.props;
+    if (!tab) return;
+    writePreferredArticleTab(tab);
+    this.setState({ preferredTab: tab });
  }

  async handleDeleteArticle() {
@@ -159,20 +162,20 @@ class ArticleTileTab extends Component {
  }

  renderPanel() {
-    switch (this.state.tab) {
-      case TAB.history:
+    switch (this.props.tab) {
+      case ARTICLE_TAB.history:
        return <Placeholder label="History" />;
-      case TAB.supplier:
+      case ARTICLE_TAB.supplier:
        return <Placeholder label="Supplier" />;
-      case TAB.seo:
+      case ARTICLE_TAB.seo:
        return this.renderSeo();
-      case TAB.label:
+      case ARTICLE_TAB.label:
        return <Placeholder label="Label" />;
-      case TAB.attributes:
+      case ARTICLE_TAB.attributes:
        return <Placeholder label="Attribute und Merkmale" />;
-      case TAB.compound:
+      case ARTICLE_TAB.compound:
        return <Placeholder label="Compound Editor" />;
-      case TAB.settings:
+      case ARTICLE_TAB.settings:
        return this.renderSettings();
      default:
        return null;
@@ -180,11 +183,24 @@ class ArticleTileTab extends Component {
  }

  render() {
-    const { article: articleData, wide = 3, minHeight = 200, sx, tileKey } = this.props;
+    const {
+      article: articleData,
+      wide = 3,
+      minHeight = 200,
+      sx,
+      tileKey,
+      tab = DEFAULT_ARTICLE_TAB,
+    } = this.props;
+    const { preferredTab } = this.state;
    const tabs = visibleTabs(articleData);
-    const { tab } = this.state;
-    const active = tabs.find((row) => row.id === tab) ?? ALWAYS_TABS.find((row) => row.id === TAB.seo);
+    const active =
+      tabs.find((row) => row.id === tab) ??
+      ALWAYS_TABS.find((row) => row.id === DEFAULT_ARTICLE_TAB);
    const activeColor = active?.color;
+    const effectivePreferred = tabs.some((row) => row.id === preferredTab)
+      ? preferredTab
+      : DEFAULT_ARTICLE_TAB;
+    const isPinnedDefault = tab === effectivePreferred;

    return (
      <Box
@@ -197,72 +213,110 @@ class ArticleTileTab extends Component {
            'drop-shadow(0px 2px 4px rgba(0,0,0,0.2)) drop-shadow(0px 4px 5px rgba(0,0,0,0.14)) drop-shadow(0px 1px 10px rgba(0,0,0,0.12))',
        }}
      >
-        <Tabs
-          value={tab}
-          onChange={this.handleTabChange}
-          variant="standard"
+        <Box
          sx={{
+            display: 'flex',
+            alignItems: 'flex-end',
+            gap: 0.5,
+            minWidth: 0,
            position: 'relative',
            zIndex: 1,
-            minHeight: 56,
-            px: 0,
-            mb: 0,
-            borderBottom: 'none',
-            overflow: 'visible',
-            '& .MuiTabs-scroller': {
-              px: 0,
-              borderBottom: 'none',
-              overflow: 'visible !important',
-            },
-            '& .MuiTabs-list, & .MuiTabs-flexContainer': {
-              flexWrap: 'wrap-reverse',
-              columnGap: 3,
-              rowGap: 0,
-              alignItems: 'stretch',
-              alignContent: 'flex-end',
-            },
-            '& .MuiTabs-indicator': { display: 'none' },
-            '& .MuiTab-root': {
-              flexShrink: 0,
-              maxWidth: 'none',
-              minHeight: 56,
-              marginBottom: 0,
-            },
          }}
        >
-          {tabs.map((row) => {
-            const selected = tab === row.id;
-            const { Icon } = row;
-            return (
-              <Tab
-                key={row.id}
-                value={row.id}
-                aria-label={row.label}
-                title={row.label}
-                icon={<Icon sx={{ fontSize: 40 }} />}
-                sx={{
-                  minHeight: 56,
-                  minWidth: 64,
-                  py: 0.5,
-                  px: 1.25,
-                  border: 'none',
-                  borderBottom: 'none',
-                  borderRadius: '8px 8px 0 0',
-                  textTransform: 'none',
-                  bgcolor: row.color,
-                  opacity: selected ? 1 : 0.72,
-                  color: 'text.primary',
-                  zIndex: selected ? 2 : 1,
-                  boxShadow: 'none',
-                  '&.Mui-selected': {
-                    color: 'text.primary',
+          <Tabs
+            value={tab}
+            onChange={this.handleTabChange}
+            variant="standard"
+            sx={{
+              flex: 1,
+              minWidth: 0,
+              minHeight: 56,
+              px: 0,
+              mb: 0,
+              borderBottom: 'none',
+              overflow: 'visible',
+              '& .MuiTabs-scroller': {
+                px: 0,
+                borderBottom: 'none',
+                overflow: 'visible !important',
+              },
+              '& .MuiTabs-list, & .MuiTabs-flexContainer': {
+                flexWrap: 'wrap-reverse',
+                columnGap: 3,
+                rowGap: 0,
+                alignItems: 'stretch',
+                alignContent: 'flex-end',
+              },
+              '& .MuiTabs-indicator': { display: 'none' },
+              '& .MuiTab-root': {
+                flexShrink: 0,
+                maxWidth: 'none',
+                minHeight: 56,
+                marginBottom: 0,
+              },
+            }}
+          >
+            {tabs.map((row) => {
+              const selected = tab === row.id;
+              const { Icon } = row;
+              return (
+                <Tab
+                  key={row.id}
+                  value={row.id}
+                  aria-label={row.label}
+                  title={row.label}
+                  icon={<Icon sx={{ fontSize: 40 }} />}
+                  sx={{
+                    minHeight: 56,
+                    minWidth: 64,
+                    py: 0.5,
+                    px: 1.25,
+                    border: 'none',
                    borderBottom: 'none',
-                  },
-                }}
-              />
-            );
-          })}
-        </Tabs>
+                    borderRadius: '8px 8px 0 0',
+                    textTransform: 'none',
+                    bgcolor: row.color,
+                    opacity: selected ? 1 : 0.72,
+                    color: 'text.primary',
+                    zIndex: selected ? 2 : 1,
+                    boxShadow: 'none',
+                    '&.Mui-selected': {
+                      color: 'text.primary',
+                      borderBottom: 'none',
+                    },
+                  }}
+                />
+              );
+            })}
+          </Tabs>
+          <IconButton
+            type="button"
+            size="small"
+            aria-label={
+              isPinnedDefault
+                ? 'Standard-Tab'
+                : 'Als Standard-Tab festlegen'
+            }
+            title={
+              isPinnedDefault
+                ? 'Standard-Tab'
+                : 'Als Standard-Tab festlegen'
+            }
+            onClick={this.handlePinDefault}
+            disabled={isPinnedDefault}
+            sx={{
+              flexShrink: 0,
+              mb: 0.75,
+              color: isPinnedDefault ? 'success.main' : 'action.active',
+              '&.Mui-disabled': {
+                color: 'success.main',
+                opacity: 1,
+              },
+            }}
+          >
+            <PushPinIcon sx={{ fontSize: 28 }} />
+          </IconButton>
+        </Box>
        <PanelTile
          wide={wide}
          minHeight={minHeight}
--- a/src/components/article/ArticleView.jsx
+++ b/src/components/article/ArticleView.jsx
@@ -49,6 +49,7 @@ import {
 import { notifyError } from '../../utils/notify';
 import { PANEL_TILE_KEYS } from '../../theme';
 import { formatStock } from '../../pages/artikel/searchFormat';
+import { artikelDetailPath } from '../../pages/artikel/articleRoute';
 import {
  buildCategoryPath,
  defaultCategoryPath,
@@ -551,7 +552,12 @@ function PriceUnitCorner({ hasUnit, onToggleHasUnit, onOpenEditor }) {
  );
 }

-export default function ArticleView({ article: articleData, onArticleUpdated }) {
+export default function ArticleView({
+  article: articleData,
+  tab,
+  onTabChange,
+  onArticleUpdated,
+}) {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const [tiersDialogOpen, setTiersDialogOpen] = useState(false);
@@ -891,6 +897,8 @@ export default function ArticleView({ article: articleData, onArticleUpdated })
        tileKey={PANEL_TILE_KEYS.content}
        minHeight={200}
        article={articleData}
+        tab={tab}
+        onTabChange={onTabChange}
        onArticleDeleted={handleArticleDeleted}
      />

@@ -908,7 +916,7 @@ export default function ArticleView({ article: articleData, onArticleUpdated })
          {articleData.fatherSku ? (
            <Link
              component={RouterLink}
-              to={`/artikel/${encodeURIComponent(articleData.fatherSku)}`}
+              to={artikelDetailPath(articleData.fatherSku)}
            >
              {articleData.fatherSku}
            </Link>