fix(association-field): only when the new data is successfully created can the data be associated (#1884)

* fix: only when the new data is successfully created can the data be associated

* fix: associate empty object data

* Update index.ts

* fix:  to many nester  cannot be deleted when there is  one data

* fix: code improve

* fix: association field add new button should not drag

---------

Co-authored-by: chenos <chenlinxh@gmail.com>

packages/core/client/src/block-provider/hooks/index.ts

@@ -1,7 +1,7 @@
 import { Schema, SchemaExpressionScopeContext, useField, useFieldSchema, useForm } from '@formily/react';
 import { parse } from '@nocobase/utils/client';
 import { Modal, message } from 'antd';
-import { cloneDeep, uniq } from 'lodash';
+import { cloneDeep, isEqual, uniq, omitBy } from 'lodash';
 import get from 'lodash/get';
 import omit from 'lodash/omit';
 import { ChangeEvent, useContext, useEffect } from 'react';
@@ -158,7 +158,8 @@ export const useCreateActionProps = () => {
       if (!skipValidator) {
         await form.submit();
       }
-      const values = getFormValues(filterByTk, field, form, fieldNames, getField, resource);
+      const formValues = getFormValues(filterByTk, field, form, fieldNames, getField, resource);
+      const values = omitBy(formValues, (value) => isEqual(JSON.stringify(value), '[{}]'));
       if (addChild) {
         const treeParentField = getTreeParentField();
         values[treeParentField?.name ?? 'parent'] = currentRecord;
@@ -255,6 +256,7 @@ export const useAssociationCreateActionProps = () => {
         }
         message.success(compile(onSuccess?.successMessage));
       } catch (error) {
+        actionField.data.data = null;
         actionField.data.loading = false;
       }
     },

packages/core/client/src/schema-component/antd/action/Action.Designer.tsx

@@ -53,6 +53,7 @@ export const ActionDesigner = (props) => {
   const isChildCollectionAction = getChildrenCollections(name).length > 0 && fieldSchema['x-action'] === 'create';
   const isLink = fieldSchema['x-component'] === 'Action.Link';
   const isDelete = fieldSchema?.parent['x-component'] === 'CollectionField';
+  const isDraggable=fieldSchema?.parent['x-component'] !== 'CollectionField';
   useEffect(() => {
     const schemaUid = uid();
     const schema: ISchema = {
@@ -73,7 +74,7 @@ export const ActionDesigner = (props) => {
     ),
   };
   return (
-    <GeneralSchemaDesigner {...restProps} disableInitializer>
+    <GeneralSchemaDesigner {...restProps} disableInitializer draggable={isDraggable}>
       <MenuGroup>
         <SchemaSettings.ModalItem
           title={t('Edit button')}

packages/core/client/src/schema-component/antd/association-field/Editable.tsx

@@ -25,21 +25,23 @@ const EditableAssociationField = observer((props: any) => {
       async onClick() {
         await onClick();
         const { data } = actionField.data?.data?.data || {};
-        if (['m2m', 'o2m'].includes(collectionField?.interface) && multiple !== false) {
+        if (data) {
-          const values = JSON.parse(JSON.stringify(form.values[fieldSchema.name] || []));
+          if (['m2m', 'o2m'].includes(collectionField?.interface) && multiple !== false) {
-          values.push({
+            const values = JSON.parse(JSON.stringify(form.values[fieldSchema.name] || []));
-            ...data,
+            values.push({
-          });
+              ...data,
-          setTimeout(() => {
+            });
-            form.setValuesIn(field.props.name, values);
+            setTimeout(() => {
-          }, 100);
+              form.setValuesIn(field.props.name, values);
-        } else {
+            }, 100);
-          const value = {
+          } else {
-            ...data,
+            const value = {
-          };
+              ...data,
-          setTimeout(() => {
+            };
-            form.setValuesIn(field.props.name, value);
+            setTimeout(() => {
-          }, 100);
+              form.setValuesIn(field.props.name, value);
+            }, 100);
+          }
         }
       },
     };

packages/core/client/src/schema-component/antd/association-field/Nester.tsx

@@ -2,11 +2,10 @@ import { CloseCircleOutlined } from '@ant-design/icons';
 import { ArrayField } from '@formily/core';
 import { RecursionField, observer, useFieldSchema } from '@formily/react';
 import { Button, Card, Divider } from 'antd';
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AssociationFieldContext } from './context';
 import { useAssociationFieldContext } from './hooks';
-// import { useRemoveActionProps } from '../../../block-provider/hooks';
 
 export const Nester = (props) => {
   const { options } = useContext(AssociationFieldContext);
@@ -36,9 +35,12 @@ const toArr = (value, isReadpretty) => {
 const ToManyNester = observer((props) => {
   const fieldSchema = useFieldSchema();
   const { field } = useAssociationFieldContext<ArrayField>();
-  const values = toArr(field.value, field.readPretty);
+  const [values, setValues] = useState([]);
+  useEffect(() => {
+    const values = toArr(field.value, field.readPretty);
+    setValues(values);
+  }, []);
   const { t } = useTranslation();
-  // const { onClick } = useRemoveActionProps(`${collectionField.collectionName}.${collectionField.target}`);
   return (
     <Card bordered={true} style={{ position: 'relative' }}>
       {values.map((value, index) => {
@@ -49,7 +51,9 @@ const ToManyNester = observer((props) => {
                 <CloseCircleOutlined
                   style={{ zIndex: 1000, position: 'absolute', color: '#a8a3a3' }}
                   onClick={() => {
-                    field.value.splice(index, 1);
+                    const data = values.concat();
+                    data.splice(index, 1);
+                    setValues(data);
                   }}
                 />
               </div>
@@ -64,13 +68,9 @@ const ToManyNester = observer((props) => {
           type={'dashed'}
           block
           onClick={() => {
-            const v = field.value || [];
+            const data = values.concat();
-            if (values.length > v.length) {
+            data.push({});
-              field.value = values;
+            setValues(data);
-            } else {
-              field.value = v;
-            }
-            field.value.push({});
           }}
         >
           {t('Add new')}

packages/core/client/src/schema-initializer/components/CreateRecordAction.tsx

@@ -125,7 +125,6 @@ export const CreateAction = observer((props: any) => {
   const allowAddToCurrent = fieldSchema?.['x-allow-add-to-current'];
   const field: any = useField();
   const componentType = field.componentProps.type || 'primary';
-  console.log(componentType)
   const { getChildrenCollections } = useCollectionManager();
   const totalChildCollections = getChildrenCollections(collection.name);
   const inheritsCollections = enableChildren