diff --git a/src/components/article/ArticleView.jsx b/src/components/article/ArticleView.jsx index 2f46ab8..5f0a37e 100644 --- a/src/components/article/ArticleView.jsx +++ b/src/components/article/ArticleView.jsx @@ -69,6 +69,8 @@ export default function ArticleView({ diff --git a/src/components/article/boxes/ArticleViewName.jsx b/src/components/article/boxes/ArticleViewName.jsx index 9746494..b6536ad 100644 --- a/src/components/article/boxes/ArticleViewName.jsx +++ b/src/components/article/boxes/ArticleViewName.jsx @@ -3,6 +3,8 @@ import SingleLineTextEdit from '../../SingleLineTextEdit'; import { article } from '../../../api'; import { requireObject } from '../../../utils/apiShape'; import { PANEL_TILE_KEYS } from '../../../theme'; +import { getCategoryBreadcrumbs } from '../../../store/categorySlice'; +import { Box, Chip } from '@mui/material'; const articleNameTextSx = { fontWeight: 700, @@ -33,6 +35,13 @@ const articleNameFieldHiddenSx = { }, }; +const pillsContainerSx = { + display: 'flex', + flexWrap: 'wrap', + gap: 0.5, + mt: 'auto', +}; + function nameDraftDirty(draft, saved) { return draft.name.trim() !== String(saved.name ?? '').trim(); } @@ -45,7 +54,14 @@ const headerTileSx = { minHeight: 0, }; -export default function ArticleViewName({ article: articleData, onArticleUpdated }) { +function buildCategoryLabel(categories, categoryId, rootCategoryId) { + if (!categories || categoryId == null) return ''; + const crumbs = getCategoryBreadcrumbs(categories, categoryId, rootCategoryId); + if (crumbs.length === 0) return ''; + return crumbs.map((c) => c.name).join(' | '); +} + +export default function ArticleViewName({ article: articleData, categories, rootCategoryId, onArticleUpdated }) { const handleSave = async (draft) => { const name = draft.name.trim(); const res = await article.update(articleData.sku, { name }); @@ -54,6 +70,11 @@ export default function ArticleViewName({ article: articleData, onArticleUpdated onArticleUpdated?.(res.article); }; + const categoryIds = articleData.categoryIds ?? []; + const categoryLabels = categoryIds + .map((id) => ({ id, label: buildCategoryLabel(categories, id, rootCategoryId) })) + .filter((c) => c.label); + return ( ( - {}} - sx={articleNameFieldHiddenSx} - /> + + + {}} + sx={articleNameFieldHiddenSx} + /> + + {categoryLabels.length > 0 && ( + + {categoryLabels.map(({ id, label }) => ( + + ))} + + )} + )} renderEdit={(draft, onChange, inputRef) => ( } - {!renameMode && ( + {!renameMode && articlesStatus === 'succeeded' && (