u

src/components/article/boxes/ArticleViewName.jsx

@@ -178,21 +178,46 @@ class NameDisplay extends Component {
 }
 
 class NameEdit extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: props.name,
+      categoryIds: [...(props.categoryIds ?? [])],
+    };
+  }
+
+  componentDidMount() {
+    const { onNameDraftChange, onCategoryIdsDraftChange } = this.props;
+    onNameDraftChange?.(this.state.name);
+    onCategoryIdsDraftChange?.(this.state.categoryIds);
+  }
+
+  handleNameChange = (name) => {
+    this.setState({ name });
+    this.props.onNameDraftChange?.(name);
+  };
+
+  handleCategoryIdsChange = (categoryIds) => {
+    this.setState({ categoryIds });
+    this.props.onCategoryIdsDraftChange?.(categoryIds);
+  };
+
   render() {
-    const { name, categoryIds } = this.props;
+    const { name, categoryIds } = this.state;
     return (
       <Box sx={columnSx}>
         <Box sx={{ flex: 1, display: 'flex', alignItems: 'center' }}>
           <SingleLineTextEdit
             label="Name"
             value={name}
-            onChange={() => {}}
+            onChange={this.handleNameChange}
             sx={articleNameFieldSx}
           />
         </Box>
         <CategoryPills
           categoryIds={categoryIds}
           editMode
+          onCategoryIdsChange={this.handleCategoryIdsChange}
         />
       </Box>
     );
@@ -202,34 +227,58 @@ class NameEdit extends Component {
 export default class ArticleViewName extends Component {
   static contextType = StorageManagerContext;
 
-  handleSave = async (draft) => {
+  constructor(props) {
+    super(props);
+    this.state = {
+      nameDraft: null,
+      categoryIdsDraft: null,
+    };
+  }
+
+  handleNameDraftChange = (name) => {
+    this.setState({ nameDraft: name });
+  };
+
+  handleCategoryIdsDraftChange = (categoryIds) => {
+    this.setState({ categoryIdsDraft: categoryIds });
+  };
+
+  handleSave = async () => {
     const { article: articleData, onArticleUpdated } = this.props;
+    const { nameDraft, categoryIdsDraft } = this.state;
     const store = this.context;
-    const name = draft.name.trim();
-    const categoryIds = draft.categoryIds ?? [];
+    const name = nameDraft.trim();
+    const categoryIds = categoryIdsDraft;
     const nameChanged = name !== String(articleData.name ?? '').trim();
     const categoriesChanged = categoryIdsChanged(categoryIds, articleData.categoryIds);
 
     let article = null;
 
     if (nameChanged) {
-			console.log('nameChanged', name, articleData.name);
+			console.log('storing name update', name, articleData.name);
       const nameRes = await store.article.update(articleData.sku, { name });
       article = nameRes.article;
     }
 
     if (categoriesChanged) {
+			console.log('storing categories update', categoryIds, articleData.categoryIds);
       const catRes = await store.article.setCategories(articleData.sku, { categoryIds });
       article = catRes.article;
     }
 
     if (article) onArticleUpdated?.(article);
+    this.setState({ nameDraft: null, categoryIdsDraft: null });
   };
 
   render() {
     const { article: articleData } = this.props;
+    const { nameDraft, categoryIdsDraft } = this.state;
     const savedCategoryIds = articleData.categoryIds ?? [];
     const value = { name: articleData.name ?? '', categoryIds: [...savedCategoryIds] };
+    const draft =
+      nameDraft != null && categoryIdsDraft != null
+        ? { name: nameDraft, categoryIds: categoryIdsDraft }
+        : null;
 
     return (
       <EditablePanelTile
@@ -239,22 +288,20 @@ export default class ArticleViewName extends Component {
         color="#ffffff"
         value={value}
         onSave={this.handleSave}
-        isDirty={draftDirty}
-        canSave={draftValid}
+        isDirty={() => draft != null && draftDirty(draft, value)}
+        canSave={() => draft != null && draftValid(draft)}
         display={
           <NameDisplay
             name={value.name}
             categoryIds={value.categoryIds}
-
           />
         }
         edit={
           <NameEdit
             name={value.name}
             categoryIds={value.categoryIds}
-						onNameChange={() => {}}
-						onCategoryIdsChange={() => {}}
-						onIsDirtyChange={() => {}}
+            onNameDraftChange={this.handleNameDraftChange}
+            onCategoryIdsDraftChange={this.handleCategoryIdsDraftChange}
           />
         }
       />