feat: improve collection manager module

packages/client/src/collection-manager/Configuration/ConfigurationTable.tsx

@@ -1,11 +1,56 @@
-import React from 'react';
+import { action } from '@formily/reactive';
-import { SchemaComponent } from '../../schema-component';
+import { uid } from '@formily/shared';
+import React, { useEffect } from 'react';
+import { useRequest } from '../../api-client';
+import { SchemaComponent, useActionContext } from '../../schema-component';
+import { useCollectionManager } from '../hooks/useCollectionManager';
 import { collectionSchema } from './schemas/collections';
 
+const useAsyncDataSource = (service: any) => (field: any) => {
+  field.loading = true;
+  service(field).then(
+    action.bound((data: any) => {
+      field.dataSource = data;
+      field.loading = false;
+    }),
+  );
+};
+
+const useCollectionValues = (options) => {
+  const { visible } = useActionContext();
+  const result = useRequest(
+    () =>
+      Promise.resolve({
+        data: {
+          name: `t_${uid()}`,
+        },
+      }),
+    {
+      ...options,
+      manual: true,
+    },
+  );
+
+  useEffect(() => {
+    if (visible) {
+      result.run();
+    }
+  }, [visible]);
+
+  return result;
+}
+
 export const ConfigurationTable = () => {
+  const { collections = [] } = useCollectionManager();
+  const loadCollections = async (field: any) => {
+    return collections?.map((item: any) => ({
+      label: item.title,
+      value: item.name,
+    }));
+  };
   return (
     <div>
-      <SchemaComponent schema={collectionSchema} />
+      <SchemaComponent schema={collectionSchema} scope={{ useCollectionValues, useAsyncDataSource, loadCollections }}/>
     </div>
   );
 };

packages/client/src/collection-manager/Configuration/schemas/collections.ts

@@ -99,6 +99,9 @@ export const collectionSchema: ISchema = {
                   title: '{{ t("Create collection") }}',
                   'x-component': 'Action.Drawer',
                   'x-decorator': 'Form',
+                  'x-decorator-props': {
+                    useValues: '{{ useCollectionValues }}',
+                  },
                   properties: {
                     title: {
                       'x-component': 'CollectionField',
@@ -107,7 +110,6 @@ export const collectionSchema: ISchema = {
                     name: {
                       'x-component': 'CollectionField',
                       'x-decorator': 'FormItem',
-                      default: '{{ randomString("t_") }}',
                     },
                     footer: {
                       type: 'void',

packages/client/src/collection-manager/interfaces/linkTo.ts

@@ -48,7 +48,7 @@ export const linkTo: IField = {
       type: 'string',
       title: '{{t("Related collection")}}',
       required: true,
-      // 'x-reactions': ['{{useAsyncDataSource(loadCollections)}}'],
+      'x-reactions': ['{{useAsyncDataSource(loadCollections)}}'],
       'x-decorator': 'FormItem',
       'x-component': 'Select',
     },