From 9db654047a95040fa9b44c037fbeaf48308c8037 Mon Sep 17 00:00:00 2001
From: chenos <chenlinxh@gmail.com>
Date: Wed, 2 Mar 2022 13:22:30 +0800
Subject: [PATCH] feat(client): improve linkTo field Initializer

---
 .../src/collection-manager/action-hooks.ts    |  13 +-
 .../interfaces/chinaRegion.ts                 |   1 +
 .../collection-manager/interfaces/linkTo.ts   |  10 +-
 packages/client/src/locale/zh_CN.json         |   1 +
 .../antd/filter/SaveDefaultValue.tsx          |   5 +-
 .../antd/record-picker/RecordPicker.tsx       |  29 +--
 .../core/SchemaComponentProvider.tsx          |   1 -
 .../Items/FilterActionInitializer.tsx         |   4 +-
 .../LinkToCollectionFieldInitializer.tsx      | 205 ++++++++++++++++++
 .../Initializers/Items/index.ts               |   1 +
 .../schema-initializer/Initializers/utils.ts  |  47 +++-
 11 files changed, 285 insertions(+), 32 deletions(-)
 create mode 100644 packages/client/src/schema-initializer/Initializers/Items/LinkToCollectionFieldInitializer.tsx

diff --git a/packages/client/src/collection-manager/action-hooks.ts b/packages/client/src/collection-manager/action-hooks.ts
index b214a8a8d..08686cfc4 100644
--- a/packages/client/src/collection-manager/action-hooks.ts
+++ b/packages/client/src/collection-manager/action-hooks.ts
@@ -39,12 +39,12 @@ export const useCollectionFilterOptions = (collectionName: string) => {
       operators: fieldInterface.operators || [],
     };
     return option;
-  }
-  fields.forEach(field => {
+  };
+  fields.forEach((field) => {
     options.push(field2option(field));
   });
   return options;
-}
+};
 
 export const useFilterDataSource = (options) => {
   const { name } = useCollection();
@@ -56,17 +56,20 @@ export const useFilterDataSource = (options) => {
       }),
     options,
   );
-}
+};
 
 export const useFilterAction = () => {
+  const { run, params } = useResourceActionContext();
   const form = useForm();
   const ctx = useActionContext();
+  const [first, ...others] = params;
   return {
     async run() {
+      run({ ...first, filter: form.values.filter }, ...others);
       ctx.setVisible(false);
     },
   };
-}
+};
 
 export const useCreateAction = () => {
   const form = useForm();
diff --git a/packages/client/src/collection-manager/interfaces/chinaRegion.ts b/packages/client/src/collection-manager/interfaces/chinaRegion.ts
index ee03f8d1a..d270d6bc2 100644
--- a/packages/client/src/collection-manager/interfaces/chinaRegion.ts
+++ b/packages/client/src/collection-manager/interfaces/chinaRegion.ts
@@ -14,6 +14,7 @@ export const chinaRegion: IField = {
     type: 'belongsToMany',
     target: 'chinaRegions',
     targetKey: 'code',
+    sortBy: 'level',
     // name,
     uiSchema: {
       type: 'array',
diff --git a/packages/client/src/collection-manager/interfaces/linkTo.ts b/packages/client/src/collection-manager/interfaces/linkTo.ts
index 88b1c48e2..ff95b28e8 100644
--- a/packages/client/src/collection-manager/interfaces/linkTo.ts
+++ b/packages/client/src/collection-manager/interfaces/linkTo.ts
@@ -13,10 +13,16 @@ export const linkTo: IField = {
     type: 'belongsToMany',
     // name,
     uiSchema: {
-      type: 'array',
       // title,
       'x-component': 'RecordPicker',
-      'x-component-props': {},
+      'x-component-props': {
+        // mode: 'tags',
+        multiple: true,
+        fieldNames: {
+          label: 'id',
+          value: 'id',
+        },
+      },
     },
   },
   initialize: (values: any) => {
diff --git a/packages/client/src/locale/zh_CN.json b/packages/client/src/locale/zh_CN.json
index 51f5f6c69..3f2a24fd8 100644
--- a/packages/client/src/locale/zh_CN.json
+++ b/packages/client/src/locale/zh_CN.json
@@ -24,6 +24,7 @@
   "Icon": "图标",
   "Group": "分组",
   "Link": "链接",
+  "Save conditions": "保存筛选条件",
   "Edit menu item": "编辑菜单项",
   "Move to": "移动到",
   "Insert left": "在左边插入",
diff --git a/packages/client/src/schema-component/antd/filter/SaveDefaultValue.tsx b/packages/client/src/schema-component/antd/filter/SaveDefaultValue.tsx
index f9c2337b7..c2c7f9482 100644
--- a/packages/client/src/schema-component/antd/filter/SaveDefaultValue.tsx
+++ b/packages/client/src/schema-component/antd/filter/SaveDefaultValue.tsx
@@ -7,9 +7,12 @@ import { useDesignable } from '../../hooks';
 
 export const SaveDefaultValue = (props) => {
   const { t } = useTranslation();
-  const { dn, refresh } = useDesignable();
+  const { designable, dn, refresh } = useDesignable();
   const fieldSchema = useFieldSchema();
   const form = useForm();
+  if (!designable) {
+    return null;
+  }
   return (
     <Button
       className={css`
diff --git a/packages/client/src/schema-component/antd/record-picker/RecordPicker.tsx b/packages/client/src/schema-component/antd/record-picker/RecordPicker.tsx
index 6abd0acd4..878cc2660 100644
--- a/packages/client/src/schema-component/antd/record-picker/RecordPicker.tsx
+++ b/packages/client/src/schema-component/antd/record-picker/RecordPicker.tsx
@@ -19,23 +19,26 @@ import { useTranslation } from 'react-i18next';
 import { useAttach } from '../../hooks/useAttach';
 import { ActionContext, useActionContext } from '../action';
 
+const findRowSelection = (fieldSchema) => {
+  return fieldSchema.reduceProperties((buf, s) => {
+    if (s['x-component'] === 'Table.RowSelection') {
+      return s;
+    }
+    const r = findRowSelection(s);
+    if (r) {
+      return r;
+    }
+    return buf;
+  }, null);
+};
+
 const InputRecordPicker: React.FC<any> = (props) => {
-  const { onChange } = props;
+  const { multiple, onChange } = props;
   const fieldNames = { label: 'label', value: 'value', ...props.fieldNames };
   const [visible, setVisible] = useState(false);
   const fieldSchema = useFieldSchema();
   const field = useField<Field>();
-  const s = fieldSchema.reduceProperties((buf, s) => {
-    if (s['x-component'] === 'RecordPicker.Options') {
-      return s.reduceProperties((buf, s) => {
-        if (s['x-component'] === 'Table.RowSelection') {
-          return s;
-        }
-        return buf;
-      }, null);
-    }
-    return buf;
-  }, null);
+  const s = findRowSelection(fieldSchema);
   const [value, setValue] = useState(field.value);
   const form = useMemo(
     () =>
@@ -76,7 +79,7 @@ const InputRecordPicker: React.FC<any> = (props) => {
     <div>
       <Select
         size={props.size}
-        mode={props.mode}
+        mode={multiple ? 'multiple' : props.mode}
         fieldNames={fieldNames}
         onClick={() => {
           setVisible(true);
diff --git a/packages/client/src/schema-component/core/SchemaComponentProvider.tsx b/packages/client/src/schema-component/core/SchemaComponentProvider.tsx
index 6e768dfd8..229e0523d 100644
--- a/packages/client/src/schema-component/core/SchemaComponentProvider.tsx
+++ b/packages/client/src/schema-component/core/SchemaComponentProvider.tsx
@@ -17,7 +17,6 @@ Schema.silent(true);
 const Registry = {
   silent: true,
   compile(expression: string, scope = {}) {
-    console.log('expression', expression);
     if (Registry.silent) {
       try {
         return new Function('$root', `with($root) { return (${expression}); }`)(scope);
diff --git a/packages/client/src/schema-initializer/Initializers/Items/FilterActionInitializer.tsx b/packages/client/src/schema-initializer/Initializers/Items/FilterActionInitializer.tsx
index 20018a0e9..271d71b7c 100644
--- a/packages/client/src/schema-initializer/Initializers/Items/FilterActionInitializer.tsx
+++ b/packages/client/src/schema-initializer/Initializers/Items/FilterActionInitializer.tsx
@@ -23,7 +23,9 @@ const schema = {
       properties: {
         filter: {
           type: 'object',
-          default: {},
+          default: {
+            $and: [{}],
+          },
           'x-component': 'Filter',
           'x-component-props': {
             useDataSource: '{{cm.useFilterDataSource}}',
diff --git a/packages/client/src/schema-initializer/Initializers/Items/LinkToCollectionFieldInitializer.tsx b/packages/client/src/schema-initializer/Initializers/Items/LinkToCollectionFieldInitializer.tsx
new file mode 100644
index 000000000..d1a468a3f
--- /dev/null
+++ b/packages/client/src/schema-initializer/Initializers/Items/LinkToCollectionFieldInitializer.tsx
@@ -0,0 +1,205 @@
+import { Switch } from 'antd';
+import React from 'react';
+import { SchemaInitializer } from '../../SchemaInitializer';
+import { useCurrentSchema } from '../utils';
+
+export const LinkToFieldInitializer = (props) => {
+  const { item, insert } = props;
+  const { exists, remove } = useCurrentSchema(
+    item.schema['x-collection-field'],
+    'x-collection-field',
+    item.find,
+    item.remove,
+  );
+  return (
+    <SchemaInitializer.Item
+      onClick={() => {
+        console.log(item, exists);
+        if (exists) {
+          return remove();
+        }
+        insert({
+          ...item.schema,
+          default: [
+            { id: 1, name: 'name1' },
+            { id: 2, name: 'name2' },
+          ],
+          // 'x-decorator': 'FormItem',
+          'x-component': 'CollectionField',
+          'x-component-props': {
+            mode: 'tags',
+            fieldNames: {
+              label: 'name',
+              value: 'id',
+            },
+          },
+          properties: {
+            options: {
+              'x-component': 'RecordPicker.Options',
+              type: 'void',
+              title: 'Drawer Title',
+              properties: {
+                block: {
+                  type: 'void',
+                  'x-collection': 'collections',
+                  'x-decorator': 'ResourceActionProvider',
+                  'x-decorator-props': {
+                    collection: item.field.target,
+                    request: {
+                      resource: item.field.target,
+                      action: 'list',
+                      params: {
+                        pageSize: 20,
+                        filter: {},
+                        // sort: ['sort'],
+                        appends: [],
+                      },
+                    },
+                  },
+                  'x-designer': 'Table.Void.Designer',
+                  'x-component': 'CardItem',
+                  properties: {
+                    actions: {
+                      type: 'void',
+                      'x-initializer': 'TableActionInitializers',
+                      'x-component': 'ActionBar',
+                      'x-component-props': {
+                        style: {
+                          marginBottom: 16,
+                        },
+                      },
+                      properties: {},
+                    },
+                    table: {
+                      // type: 'void',
+                      'x-component': 'Table.RowSelection',
+                      'x-component-props': {
+                        rowKey: 'id',
+                        objectValue: true,
+                        rowSelection: {
+                          type: 'checkbox',
+                        },
+                        useDataSource: '{{ cm.useDataSourceFromRAC }}',
+                      },
+                      'x-initializer': 'TableColumnInitializers',
+                      properties: {
+                        actions: {
+                          type: 'void',
+                          title: '{{ t("Actions") }}',
+                          'x-decorator': 'Table.Column.ActionBar',
+                          'x-component': 'Table.Column',
+                          'x-designer': 'Table.RowActionDesigner',
+                          'x-initializer': 'TableRecordActionInitializers',
+                          properties: {
+                            actions: {
+                              type: 'void',
+                              'x-decorator': 'DndContext',
+                              'x-component': 'Space',
+                              'x-component-props': {
+                                split: '|',
+                              },
+                              properties: {},
+                            },
+                          },
+                        },
+                      },
+                    },
+                  },
+                },
+                // input: {
+                //   type: 'array',
+                //   title: `编辑模式`,
+                //   'x-component': 'Table.RowSelection',
+                //   'x-component-props': {
+                //     rowKey: 'id',
+                //     objectValue: true,
+                //     rowSelection: {
+                //       type: 'checkbox',
+                //     },
+                //     dataSource: [
+                //       { id: 1, name: 'Name1' },
+                //       { id: 2, name: 'Name2' },
+                //       { id: 3, name: 'Name3' },
+                //     ],
+                //   },
+                //   properties: {
+                //     column1: {
+                //       type: 'void',
+                //       title: 'Name',
+                //       'x-component': 'Table.Column',
+                //       properties: {
+                //         name: {
+                //           type: 'string',
+                //           'x-component': 'Input',
+                //           'x-read-pretty': true,
+                //         },
+                //       },
+                //     },
+                //   },
+                // },
+              },
+            },
+            item: {
+              'x-component': 'RecordPicker.SelectedItem',
+              properties: {
+                drawer1: {
+                  'x-component': 'Action.Drawer',
+                  type: 'void',
+                  title: 'Drawer Title',
+                  properties: {
+                    details: {
+                      type: 'void',
+                      'x-collection': 'collections',
+                      'x-decorator': 'ResourceActionProvider',
+                      'x-decorator-props': {
+                        collection: item.field.target,
+                        request: {
+                          resource: item.field.target,
+                          action: 'get',
+                          params: {},
+                        },
+                      },
+                      'x-designer': 'Form.Designer',
+                      'x-component': 'CardItem',
+                      properties: {
+                        form: {
+                          type: 'void',
+                          'x-decorator': 'Form',
+                          'x-decorator-props': {},
+                          properties: {
+                            actions: {
+                              type: 'void',
+                              'x-initializer': 'FormActionInitializers',
+                              'x-component': 'ActionBar',
+                              'x-component-props': {
+                                layout: 'one-column',
+                                style: {
+                                  marginBottom: 16,
+                                },
+                              },
+                              properties: {},
+                            },
+                            grid: {
+                              type: 'void',
+                              'x-component': 'Grid',
+                              'x-initializer': 'GridFormItemInitializers',
+                              properties: {},
+                            },
+                          },
+                        },
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        });
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        {item.title} <Switch style={{ marginLeft: 20 }} size={'small'} checked={exists} />
+      </div>
+    </SchemaInitializer.Item>
+  );
+};
diff --git a/packages/client/src/schema-initializer/Initializers/Items/index.ts b/packages/client/src/schema-initializer/Initializers/Items/index.ts
index fb9d51511..ca70ecf78 100644
--- a/packages/client/src/schema-initializer/Initializers/Items/index.ts
+++ b/packages/client/src/schema-initializer/Initializers/Items/index.ts
@@ -5,6 +5,7 @@ export * from './CollectionFieldInitializer';
 export * from './FilterActionInitializer';
 export * from './FormBlockInitializer';
 export * from './GeneralInitializer';
+export * from './LinkToCollectionFieldInitializer';
 export * from './MarkdownBlockInitializer';
 export * from './SubTableFieldInitializer';
 export * from './TableBlockInitializer';
diff --git a/packages/client/src/schema-initializer/Initializers/utils.ts b/packages/client/src/schema-initializer/Initializers/utils.ts
index 770842f5c..8e01fcca2 100644
--- a/packages/client/src/schema-initializer/Initializers/utils.ts
+++ b/packages/client/src/schema-initializer/Initializers/utils.ts
@@ -58,29 +58,58 @@ const findTableColumn = (schema: Schema, key: string, action: string, deepth: nu
 
 export const useTableColumnInitializerFields = () => {
   const { name, fields } = useCollection();
-  return (
-    fields
-      // .filter((field) => field?.uiSchema?.title)
-      .map((field) => {
+  return fields
+    .filter((field) => field?.interface !== 'subTable')
+    .map((field) => {
+      if (field.interface === 'linkTo') {
         return {
+          field,
           type: 'item',
           title: field?.uiSchema?.title || field.name,
+          find: findTableColumn,
+          remove: removeTableColumn,
+          component: 'LinkToFieldInitializer',
           schema: {
             name: field.name,
             'x-collection-field': `${name}.${field.name}`,
             'x-component': 'CollectionField',
           },
-          component: 'CollectionFieldInitializer',
-          find: findTableColumn,
-          remove: removeTableColumn,
         } as SchemaInitializerItemOptions;
-      })
-  );
+      }
+      return {
+        type: 'item',
+        title: field?.uiSchema?.title || field.name,
+        component: 'CollectionFieldInitializer',
+        find: findTableColumn,
+        remove: removeTableColumn,
+        schema: {
+          name: field.name,
+          'x-collection-field': `${name}.${field.name}`,
+          'x-component': 'CollectionField',
+        },
+      } as SchemaInitializerItemOptions;
+    });
 };
 
 export const useFormItemInitializerFields = () => {
   const { name, fields } = useCollection();
   return fields?.map((field) => {
+    if (field.interface === 'linkTo') {
+      return {
+        type: 'item',
+        title: field?.uiSchema?.title || field.name,
+        component: 'LinkToFieldInitializer',
+        remove: removeGridFormItem,
+        field,
+        schema: {
+          name: field.name,
+          'x-designer': 'FormItem.Designer',
+          'x-component': 'CollectionField',
+          'x-decorator': 'FormItem',
+          'x-collection-field': `${name}.${field.name}`,
+        },
+      } as SchemaInitializerItemOptions;
+    }
     if (field.interface === 'subTable') {
       return {
         type: 'item',