u

src/components/article/boxes/ArticleViewLists.jsx

@@ -0,0 +1,59 @@
+import { Link as RouterLink } from 'react-router-dom';
+import Link from '@mui/material/Link';
+import Typography from '@mui/material/Typography';
+import { PanelTile } from '../../panels';
+import { PANEL_TILE_KEYS } from '../../../theme';
+import { artikelDetailPath } from '../../../pages/artikel/articleRoute';
+
+function CountLine({ label, count }) {
+  if (count == null) return null;
+  return (
+    <Typography variant="body2">
+      {label}: {count}
+    </Typography>
+  );
+}
+
+function RelationLine({ label, active, children }) {
+  return (
+    <Typography variant="body2" sx={{ mb: 0.5 }}>
+      {label}:{' '}
+      {active ? (
+        children ?? 'ja'
+      ) : (
+        <Typography component="span" variant="body2" color="text.secondary">
+          nein
+        </Typography>
+      )}
+    </Typography>
+  );
+}
+
+export default function ArticleViewLists({ article: articleData }) {
+  return (
+    <PanelTile wide={1} tileKey={PANEL_TILE_KEYS.lists} title="Listen" minHeight={200}>
+      <RelationLine
+        label="Vaterartikel"
+        active={articleData.childCount > 0}
+      >
+        {articleData.childCount}
+      </RelationLine>
+      <RelationLine
+        label="Kindartikel"
+        active={articleData.fatherArticleId != null}
+      >
+        {articleData.fatherSku ? (
+          <Link
+            component={RouterLink}
+            to={artikelDetailPath(articleData.fatherSku)}
+          >
+            {articleData.fatherSku}
+          </Link>
+        ) : null}
+      </RelationLine>
+      <CountLine label="Optionen" count={articleData.optionsCount} />
+      <CountLine label="Stücklisten" count={articleData.articleListCount} />
+      <CountLine label="Varianten" count={articleData.childCount} />
+    </PanelTile>
+  );
+}