From 2db37419dcf51c68cdcf6a303ee124645a23826b Mon Sep 17 00:00:00 2001
From: hetao92 <18328704+hetao92@users.noreply.github.com>
Date: Thu, 30 Mar 2023 07:19:49 +0000
Subject: [PATCH 1/2] fix: fix schema configuration validate UI problem

---
 .../SchemaConfig/PropertiesForm.tsx           | 22 ++++++++++++-------
 .../SchemaConfig/index.module.less            |  4 ++++
 .../SketchModeling/SchemaConfig/index.tsx     |  7 ++++++
 3 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/app/pages/SketchModeling/SchemaConfig/PropertiesForm.tsx b/app/pages/SketchModeling/SchemaConfig/PropertiesForm.tsx
index a4606252..be6021d6 100644
--- a/app/pages/SketchModeling/SchemaConfig/PropertiesForm.tsx
+++ b/app/pages/SketchModeling/SchemaConfig/PropertiesForm.tsx
@@ -58,8 +58,18 @@ const PropertiesForm = (props: IProps) => {
             const properties = getFieldValue('properties') || [];
             return (
               <div>
-                <Form.List name="properties">
-                  {(fields, { add, remove }) => {
+                <Form.List name="properties" rules={[
+                  {
+                    validator: (_, properties) => {
+                      const names = properties.map((item) => item.name);
+                      if(names.length !== new Set(names).size) {
+                        return Promise.reject(intl.get('schema.uniqProperty'));
+                      }
+                      return Promise.resolve();
+                    },
+                  },
+                ]}>
+                  {(fields, { add, remove }, { errors }) => {
                     return (
                       <Form.Item noStyle>
                         <div className={styles.propertyAction}>
@@ -90,12 +100,7 @@ const PropertiesForm = (props: IProps) => {
                                   name={[name, 'name']}
                                   {...restField}
                                   {...itemLayout}
-                                  rules={[...nameRulesFn(), () => ({ validator: (_, value) => {
-                                    if (!value || properties.filter((item, i) => item.name === value && i !== index).length === 0) {
-                                      return Promise.resolve();
-                                    }
-                                    return Promise.reject(intl.get('schema.uniqProperty'));
-                                  } })]}
+                                  rules={[...nameRulesFn()]}
                                 >
                                   <Input />
                                 </Form.Item>
@@ -153,6 +158,7 @@ const PropertiesForm = (props: IProps) => {
                                   />
                                 </Form.Item>
                               </Col>
+                              <Form.ErrorList className={styles.errors} errors={errors} />
                             </Row>
                           </React.Fragment>
                         ))}
diff --git a/app/pages/SketchModeling/SchemaConfig/index.module.less b/app/pages/SketchModeling/SchemaConfig/index.module.less
index 9673eacf..17f7857b 100644
--- a/app/pages/SketchModeling/SchemaConfig/index.module.less
+++ b/app/pages/SketchModeling/SchemaConfig/index.module.less
@@ -71,6 +71,10 @@
         height: 60px;
       }
     }
+    .errors {
+      position: relative;
+      top: -13px;
+    }
     .label {
       display: inline-block;
       font-weight: 500;
diff --git a/app/pages/SketchModeling/SchemaConfig/index.tsx b/app/pages/SketchModeling/SchemaConfig/index.tsx
index d7c11025..dc3a0cf6 100644
--- a/app/pages/SketchModeling/SchemaConfig/index.tsx
+++ b/app/pages/SketchModeling/SchemaConfig/index.tsx
@@ -105,6 +105,12 @@ const SchemaConfig: React.FC = () => {
     return null;
   }
 
+  const handleCheck = (changedValues) => {
+    const { properties } = changedValues;
+    if (properties && properties.some(i => i.name !== undefined)) {
+      form.validateFields([['properties']]);
+    }
+  };
   const { type, name, comment, properties } = active;
 
   return (
@@ -123,6 +129,7 @@ const SchemaConfig: React.FC = () => {
         form={form}
         className={styles.configForm}
         initialValues={{ name, comment, properties }}
+        onValuesChange={handleCheck}
         onFieldsChange={handleUpdate}
         name="form"
         layout="vertical"

From af6ae3f7695f29e5e33a9ecb9b96ba25a15da960 Mon Sep 17 00:00:00 2001
From: hetao92 <18328704+hetao92@users.noreply.github.com>
Date: Fri, 31 Mar 2023 03:23:04 +0000
Subject: [PATCH 2/2] mod: code review

---
 .../SchemaConfig/PropertiesForm.tsx           | 125 +++++++++---------
 1 file changed, 64 insertions(+), 61 deletions(-)

diff --git a/app/pages/SketchModeling/SchemaConfig/PropertiesForm.tsx b/app/pages/SketchModeling/SchemaConfig/PropertiesForm.tsx
index be6021d6..1a20e63e 100644
--- a/app/pages/SketchModeling/SchemaConfig/PropertiesForm.tsx
+++ b/app/pages/SketchModeling/SchemaConfig/PropertiesForm.tsx
@@ -61,7 +61,7 @@ const PropertiesForm = (props: IProps) => {
                 <Form.List name="properties" rules={[
                   {
                     validator: (_, properties) => {
-                      const names = properties.map((item) => item.name);
+                      const names = properties.map((item) => item.name).filter(Boolean);
                       if(names.length !== new Set(names).size) {
                         return Promise.reject(intl.get('schema.uniqProperty'));
                       }
@@ -92,76 +92,79 @@ const PropertiesForm = (props: IProps) => {
                             </Row>
                           </Form.Item>
                         )}
-                        {fields.map(({ key, name, ...restField }, index) => (
-                          <React.Fragment key={key}>
-                            <Row className={styles.fieldsItem}>
-                              <Col span={9}>
-                                <Form.Item
-                                  name={[name, 'name']}
-                                  {...restField}
-                                  {...itemLayout}
-                                  rules={[...nameRulesFn()]}
-                                >
-                                  <Input />
-                                </Form.Item>
-                              </Col>
-                              <Col span={12} className={styles.propertyItem}>
-                                <Form.Item
-                                  name={[name, 'type']}
-                                  {...restField}
-                                  {...itemLayout}
-                                  wrapperCol={{ span: properties[index].type === 'fixed_string' ? 15 : 23 }}
-                                  rules={[
-                                    {
-                                      required: true,
-                                      message: intl.get('formRules.dataTypeRequired'),
-                                    },
-                                  ]}
-                                >
-                                  <Select
-                                    showSearch={true}
-                                    onChange={() => handleResetValue(index)}
-                                    dropdownMatchSelectWidth={false}
+                        {fields.map(({ key, name, ...restField }, index) => {
+                          const hasSameName = properties.some((item, i) => item.name && item.name === properties[index].name && i !== index);
+                          return (
+                            <React.Fragment key={key}>
+                              <Row className={styles.fieldsItem}>
+                                <Col span={9}>
+                                  <Form.Item
+                                    name={[name, 'name']}
+                                    {...restField}
+                                    {...itemLayout}
+                                    rules={[...nameRulesFn()]}
                                   >
-                                    {DATA_TYPE.map((item) => {
-                                      return (
-                                        <Option value={item.value} key={item.value}>
-                                          {item.label}
-                                        </Option>
-                                      );
-                                    })}
-                                  </Select>
-                                </Form.Item>
-                                {fields?.[index] && properties[index].type === 'fixed_string' && (
+                                    <Input />
+                                  </Form.Item>
+                                </Col>
+                                <Col span={12} className={styles.propertyItem}>
                                   <Form.Item
+                                    name={[name, 'type']}
                                     {...restField}
-                                    className={styles.itemStringLength}
-                                    name={[name, 'fixedLength']}
+                                    {...itemLayout}
+                                    wrapperCol={{ span: properties[index].type === 'fixed_string' ? 15 : 23 }}
                                     rules={[
-                                      ...numberRulesFn(),
                                       {
                                         required: true,
-                                        message: intl.get('formRules.numberRequired'),
+                                        message: intl.get('formRules.dataTypeRequired'),
                                       },
                                     ]}
                                   >
-                                    <Input className={styles.inputStringLength} />
+                                    <Select
+                                      showSearch={true}
+                                      onChange={() => handleResetValue(index)}
+                                      dropdownMatchSelectWidth={false}
+                                    >
+                                      {DATA_TYPE.map((item) => {
+                                        return (
+                                          <Option value={item.value} key={item.value}>
+                                            {item.label}
+                                          </Option>
+                                        );
+                                      })}
+                                    </Select>
                                   </Form.Item>
-                                )}
-                              </Col>
-                              <Col span={2}>
-                                <Form.Item noStyle>
-                                  <Button
-                                    className={styles.removeBtn}
-                                    icon={<Icon type="icon-list-close" />}
-                                    onClick={() => remove(index)}
-                                  />
-                                </Form.Item>
-                              </Col>
-                              <Form.ErrorList className={styles.errors} errors={errors} />
-                            </Row>
-                          </React.Fragment>
-                        ))}
+                                  {fields?.[index] && properties[index].type === 'fixed_string' && (
+                                    <Form.Item
+                                      {...restField}
+                                      className={styles.itemStringLength}
+                                      name={[name, 'fixedLength']}
+                                      rules={[
+                                        ...numberRulesFn(),
+                                        {
+                                          required: true,
+                                          message: intl.get('formRules.numberRequired'),
+                                        },
+                                      ]}
+                                    >
+                                      <Input className={styles.inputStringLength} />
+                                    </Form.Item>
+                                  )}
+                                </Col>
+                                <Col span={2}>
+                                  <Form.Item noStyle>
+                                    <Button
+                                      className={styles.removeBtn}
+                                      icon={<Icon type="icon-list-close" />}
+                                      onClick={() => remove(index)}
+                                    />
+                                  </Form.Item>
+                                </Col>
+                                {hasSameName && <Form.ErrorList className={styles.errors} errors={errors} />}
+                              </Row>
+                            </React.Fragment>
+                          );
+                        })}
                       </Form.Item>
                     );
                   }}