u

src/components/article/ArticleView.jsx

@@ -1,12 +1,14 @@
-import { Link as RouterLink } from 'react-router-dom';
+import { Link as RouterLink, useNavigate } from 'react-router-dom';
+import { useSelector } from 'react-redux';
 import Box from '@mui/material/Box';
 import Link from '@mui/material/Link';
 import Typography from '@mui/material/Typography';
 import SingleLineTextEdit from '../SingleLineTextEdit';
 import ArticlePhotoTile from './ArticlePhotoTile';
+import ArticleTileTab from './ArticleTileTab';
 import { article } from '../../api';
 import { EditablePanelTile, PanelTile, PanelTileGrid } from '../panels';
-import { requireObject } from '../../utils/apiShape';
+import { requireDefined, requireObject } from '../../utils/apiShape';
 import {
   articleEans,
   brandName,
@@ -16,6 +18,11 @@ import {
 import { formatPrice } from '../../utils/price';
 import { PANEL_TILE_KEYS } from '../../theme';
 import { formatStock } from '../../pages/artikel/searchFormat';
+import {
+  buildCategoryPath,
+  defaultCategoryPath,
+} from '../../pages/artikel/categoryRoute';
+import { selectCategoryRootId } from '../../store/categorySlice';
 
 function PanelValue({ label, children }) {
   if (children == null || children === '') return null;
@@ -99,6 +106,9 @@ const articleNameFieldHiddenSx = {
 };
 
 export default function ArticleView({ article: articleData, onArticleUpdated }) {
+  const navigate = useNavigate();
+  const categories = useSelector((state) => state.category.categories);
+  const rootCategoryId = useSelector(selectCategoryRootId);
   const basePrice = primaryPrice(articleData);
   const brutto = priceBrutto(basePrice);
   const eans = articleEans(articleData);
@@ -111,6 +121,18 @@ export default function ArticleView({ article: articleData, onArticleUpdated })
     onArticleUpdated?.(res.article);
   };
 
+  const handleArticleDeleted = () => {
+    const categoryId = requireDefined(
+      articleData.categoryIds?.[0],
+      'article.categoryIds[0]',
+    );
+    if (categories && rootCategoryId != null) {
+      navigate(buildCategoryPath(categories, rootCategoryId, categoryId));
+      return;
+    }
+    navigate(defaultCategoryPath());
+  };
+
   return (
     <PanelTileGrid>
       <EditablePanelTile
@@ -181,12 +203,13 @@ export default function ArticleView({ article: articleData, onArticleUpdated })
         </PanelValue>
       </PanelTile>
 
-      <PanelTile wide={3} tileKey={PANEL_TILE_KEYS.content} title="SEO & Beschreibung" minHeight={200}>
-        <PanelValue label="Slug">{articleData.slug}</PanelValue>
-        <PanelValue label="SEO-Titel">{articleData.seoTitle}</PanelValue>
-        <PanelValue label="SEO-Beschreibung">{articleData.seoDescription}</PanelValue>
-        <PanelValue label="Beschreibung">{articleData.description}</PanelValue>
-      </PanelTile>
+      <ArticleTileTab
+        wide={3}
+        tileKey={PANEL_TILE_KEYS.content}
+        minHeight={200}
+        article={articleData}
+        onArticleDeleted={handleArticleDeleted}
+      />
 
       <PanelTile wide={1} tileKey={PANEL_TILE_KEYS.lists} title="Listen" minHeight={200}>
         <RelationLine