u

src/components/article/boxes/ArticleViewName.jsx

@@ -4,7 +4,7 @@ import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
 import { getCategoryState } from '../../../automats/categoryAutomat';
 import artikelAutomat from '../../../automats/artikelAutomat';
 import { getCategoryBreadcrumbs, categoryDisplayName } from '../../../utils/categoryUtils';
-import { Box, Chip, IconButton } from '@mui/material';
+import { Box, Chip, IconButton, Typography } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
 import CategoryPickerDialog from '../CategoryPickerDialog';
 import { notifyError } from '../../../utils/notify';
@@ -66,8 +66,9 @@ function categoryIdsChanged(a, b) {
 
 function draftDirty(draft, saved) {
   const nameDiff = draft.name.trim() !== String(saved.name ?? '').trim();
+  const seoDiff = String(draft.seo ?? '').trim() !== String(saved.seo ?? '').trim();
   const catDiff = categoryIdsChanged(draft.categoryIds, saved.categoryIds);
-  return nameDiff || catDiff;
+  return nameDiff || seoDiff || catDiff;
 }
 
 function draftValid(draft) {
@@ -207,10 +208,10 @@ class CategoryPills extends Component {
 
 class NameDisplay extends Component {
   render() {
-    const { name, categoryIds } = this.props;
+    const { name, seo, categoryIds } = this.props;
     return (
       <Box sx={columnSx}>
-        <Box sx={{ flex: 1, display: 'flex', alignItems: 'center' }}>
+        <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
           <SingleLineTextEdit
             label="Name"
             value={name}
@@ -218,6 +219,13 @@ class NameDisplay extends Component {
             onChange={() => {}}
             sx={articleNameFieldHiddenSx}
           />
+          {seo ? (
+            <Box sx={{ px: 1.75, mt: -0.5, userSelect: 'text' }}>
+              <Typography variant="body2" color="text.secondary">
+                {seo}
+              </Typography>
+            </Box>
+          ) : null}
         </Box>
         {(categoryIds?.length ?? 0) > 0 ? (
           <CategoryPills categoryIds={categoryIds} editMode={false} />
@@ -232,13 +240,15 @@ class NameEdit extends Component {
     super(props);
     this.state = {
       name: props.name,
+      seo: props.seo ?? '',
       categoryIds: [...(props.categoryIds ?? [])],
     };
   }
 
   componentDidMount() {
-    const { onNameDraftChange, onCategoryIdsDraftChange } = this.props;
+    const { onNameDraftChange, onSeoDraftChange, onCategoryIdsDraftChange } = this.props;
     onNameDraftChange?.(this.state.name);
+    onSeoDraftChange?.(this.state.seo);
     onCategoryIdsDraftChange?.(this.state.categoryIds);
   }
 
@@ -247,22 +257,35 @@ class NameEdit extends Component {
     this.props.onNameDraftChange?.(name);
   };
 
+  handleSeoChange = (seo) => {
+    this.setState({ seo });
+    this.props.onSeoDraftChange?.(seo);
+  };
+
   handleCategoryIdsChange = (categoryIds) => {
     this.setState({ categoryIds });
     this.props.onCategoryIdsDraftChange?.(categoryIds);
   };
 
   render() {
-    const { name, categoryIds } = this.state;
+    const { name, seo, categoryIds } = this.state;
     return (
       <Box sx={columnSx}>
-        <Box sx={{ flex: 1, display: 'flex', alignItems: 'center' }}>
+        <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
           <SingleLineTextEdit
             label="Name"
             value={name}
             onChange={this.handleNameChange}
             sx={articleNameFieldSx}
           />
+          <Box sx={{ mt: 1 }}>
+            <SingleLineTextEdit
+              label="SEO"
+              value={seo}
+              size="small"
+              onChange={this.handleSeoChange}
+            />
+          </Box>
         </Box>
         <CategoryPills
           categoryIds={categoryIds}
@@ -279,6 +302,7 @@ export default class ArticleViewName extends PureComponent {
     super(props);
     this.state = {
       nameDraft: null,
+      seoDraft: null,
       categoryIdsDraft: null,
     };
   }
@@ -287,23 +311,33 @@ export default class ArticleViewName extends PureComponent {
     this.setState({ nameDraft: name });
   };
 
+  handleSeoDraftChange = (seo) => {
+    this.setState({ seoDraft: seo });
+  };
+
   handleCategoryIdsDraftChange = (categoryIds) => {
     this.setState({ categoryIdsDraft: categoryIds });
   };
 
   handleSave = async () => {
     const { article: articleData, onArticleUpdated } = this.props;
-    const { nameDraft, categoryIdsDraft } = this.state;
+    const { nameDraft, seoDraft, categoryIdsDraft } = this.state;
-    const name = nameDraft.trim();
+    const name = nameDraft != null ? nameDraft.trim() : String(articleData.name ?? '').trim();
-    const categoryIds = categoryIdsDraft;
+    const seo = seoDraft != null ? seoDraft.trim() : String(articleData.seo ?? articleData.seoDescription ?? '').trim();
+    const categoryIds = categoryIdsDraft ?? (articleData.categoryIds ?? []);
+
     const nameChanged = name !== String(articleData.name ?? '').trim();
+    const seoChanged = seo !== String(articleData.seo ?? articleData.seoDescription ?? '').trim();
     const categoriesChanged = categoryIdsChanged(categoryIds, articleData.categoryIds);
 
     let article = null;
 
-    if (nameChanged) {
+    if (nameChanged || seoChanged) {
-      const nameRes = await artikelAutomat.actions.update(articleData.sku, { name });
+      const updateBody = {};
-      article = nameRes.article;
+      if (nameChanged) updateBody.name = name;
+      if (seoChanged) updateBody.seo = seo;
+      const res = await artikelAutomat.actions.update(articleData.sku, updateBody);
+      article = res.article;
     }
 
     if (categoriesChanged) {
@@ -312,17 +346,26 @@ export default class ArticleViewName extends PureComponent {
     }
 
     if (article) onArticleUpdated?.(article);
-    this.setState({ nameDraft: null, categoryIdsDraft: null });
+    this.setState({ nameDraft: null, seoDraft: null, categoryIdsDraft: null });
   };
 
   render() {
     const { article: articleData } = this.props;
-    const { nameDraft, categoryIdsDraft } = this.state;
+    const { nameDraft, seoDraft, categoryIdsDraft } = this.state;
     const savedCategoryIds = articleData.categoryIds ?? [];
-    const value = { name: articleData.name ?? '', categoryIds: [...savedCategoryIds] };
+    const savedSeo = articleData.seo ?? articleData.seoDescription ?? '';
+    const value = {
+      name: articleData.name ?? '',
+      seo: savedSeo,
+      categoryIds: [...savedCategoryIds],
+    };
     const draft =
       nameDraft != null && categoryIdsDraft != null
-        ? { name: nameDraft, categoryIds: categoryIdsDraft }
+        ? {
+            name: nameDraft,
+            seo: seoDraft ?? savedSeo,
+            categoryIds: categoryIdsDraft,
+          }
         : null;
 
     return (
@@ -339,14 +382,17 @@ export default class ArticleViewName extends PureComponent {
         display={
           <NameDisplay
             name={value.name}
+            seo={value.seo}
             categoryIds={value.categoryIds}
           />
         }
         edit={
           <NameEdit
             name={value.name}
+            seo={value.seo}
             categoryIds={value.categoryIds}
             onNameDraftChange={this.handleNameDraftChange}
+            onSeoDraftChange={this.handleSeoDraftChange}
             onCategoryIdsDraftChange={this.handleCategoryIdsDraftChange}
           />
         }

src/components/article/tabs/ArticleSeoTab.jsx

@@ -1,37 +1,10 @@
 import { Component } from 'react';
 import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
 
-function PanelValue({ label, children }) {
+function PanelHtmlValue({ html }) {
-  if (children == null || children === '') return null;
-  return (
-    <Box sx={{ mb: 1 }}>
-      {label ? (
-        <Typography variant="caption" color="text.secondary" display="block">
-          {label}
-        </Typography>
-      ) : null}
-      <Typography variant="body2" component="div">
-        {children}
-      </Typography>
-    </Box>
-  );
-}
-
-function PanelHtmlValue({ label, html }) {
   if (html == null || html === '') return null;
   return (
     <Box sx={{ mb: 1.5 }}>
-      {label ? (
-        <Typography
-          variant="caption"
-          color="text.secondary"
-          display="block"
-          sx={{ mb: 0.5, fontWeight: 500 }}
-        >
-          {label}
-        </Typography>
-      ) : null}
       <Box
         sx={(theme) => ({
           p: 1.5,
@@ -83,14 +56,7 @@ function PanelHtmlValue({ label, html }) {
 export default class ArticleSeoTab extends Component {
   render() {
     const { article: articleData } = this.props;
-    const seo = articleData.seo ?? articleData.seoDescription;
     const desc = articleData.desc ?? articleData.description;
-    return (
+    return <PanelHtmlValue html={desc} />;
-      <>
-        <PanelValue label="Slug">{articleData.slug}</PanelValue>
-        <PanelValue label="SEO">{seo}</PanelValue>
-        <PanelHtmlValue label="Beschreibung" html={desc} />
-      </>
-    );
   }
 }