fix: view block

collective · Mar 15, 2024 · 18cfa82 · 18cfa82
1 parent 8be9b61
commit 18cfa82
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 11 deletions.
diff --git a/src/components/Edit.jsx b/src/components/Edit.jsx
@@ -68,7 +68,13 @@ class Edit extends SubblocksEdit {
 
     return (
       <div className="public-ui">
-        <ValidateConfigForm data={this.props.data} onEdit={true}>
+        <ValidateConfigForm
+          data={this.props.data}
+          onEdit={true}
+          onChangeBlock={(data) => {
+            this.props.onChangeBlock(this.props.block, data);
+          }}
+        >
           <Segment>
             {this.props.data.title && <h2>{this.props.data.title}</h2>}
             {this.props.data.description && (

diff --git a/src/components/ValidateConfigForm.jsx b/src/components/ValidateConfigForm.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import config from '@plone/volto/registry';
 
@@ -15,11 +15,9 @@ const messages = defineMessages({
   },
 });
 
-const ValidateConfigForm = ({ data = {}, children, onEdit }) => {
-  const intl = useIntl();
-  var Schema = config.blocks.blocksConfig.form.formSchema;
+const ValidateConfig = (data, blockSchema) => {
   var SchemaValidators = config.blocks.blocksConfig.form.schemaValidators;
-  var blockSchema = Schema(data);
+
   const required_fields = blockSchema.required;
   const noRequired =
     required_fields.filter(
@@ -46,9 +44,28 @@ const ValidateConfigForm = ({ data = {}, children, onEdit }) => {
 
   const valid = noRequired && noInvalidFields;
 
+  return { valid: valid, required_fields, schema_validation };
+};
+
+const ValidateConfigForm = ({ data = {}, children, onEdit, onChangeBlock }) => {
+  const intl = useIntl();
+  var Schema = config.blocks.blocksConfig.form.formSchema;
+  var blockSchema = Schema(data);
+
+  useEffect(() => {
+    if (onEdit) {
+      const validation = ValidateConfig(data, blockSchema);
+      if (
+        JSON.stringify(validation) !== JSON.stringify(data.configValidation)
+      ) {
+        onChangeBlock({ ...data, configValidation: validation });
+      }
+    }
+  }, [data]);
+
   return (
     <>
-      {!valid && onEdit && (
+      {data.configValidation && !data.configValidation?.valid && onEdit && (
         <div
           style={{
             padding: '1rem',
@@ -58,22 +75,22 @@ const ValidateConfigForm = ({ data = {}, children, onEdit }) => {
             borderRadius: '3px',
           }}
         >
-          {!noRequired && (
+          {data.configValidation.required_fields?.length > 0 && (
             <>{intl.formatMessage(messages.fill_required_config_fields)}</>
           )}
-          {schema_validation?.length > 0 && (
+          {data.configValidation.schema_validation?.length > 0 && (
             <div>
               {intl.formatMessage(messages.other_errors)}
               <ul>
-                {schema_validation.map((v) => (
+                {data.configValidation.schema_validation.map((v) => (
                   <li>{v.message}</li>
                 ))}
               </ul>
             </div>
           )}
         </div>
       )}
-      {(valid || onEdit) && <>{children}</>}
+      {(data.configValidation?.valid || onEdit) && <>{children}</>}
     </>
   );
 };