feat: improve code

nocobase · Aug 23, 2024 · 7af36df · 7af36df
1 parent 81a5325
commit 7af36df
Show file tree

Hide file tree

Showing 5 changed files with 433 additions and 46 deletions.
diff --git a/src/client/PublicSharedForm.tsx b/src/client/PublicSharedForm.tsx
@@ -1,9 +1,46 @@
-import { SchemaComponent, SchemaComponentContext, useRequest } from '@nocobase/client';
+import {
+  CollectionManager,
+  DataSource,
+  DataSourceApplicationProvider,
+  DataSourceManager,
+  SchemaComponent,
+  SchemaComponentContext,
+  useApp,
+  useRequest,
+} from '@nocobase/client';
 import { Spin } from 'antd';
-import React, { useContext } from 'react';
+import React, { useContext, useMemo } from 'react';
 import { useParams } from 'react-router';
 import { useCreateActionProps } from './useCreateActionProps';
 
+class PublicDataSource extends DataSource {
+  async getDataSource() {
+    return {};
+  }
+}
+
+function PublicSharedFormProvider(props) {
+  const { dataSource } = props;
+  const app = useApp();
+  const [dataSourceManager, collectionManager] = useMemo(() => {
+    const dataSourceManager = new DataSourceManager({}, app);
+    const dataSourceInstance = dataSourceManager.addDataSource(PublicDataSource, dataSource);
+    const collectionManager = new CollectionManager([], dataSourceInstance);
+    return [dataSourceManager, collectionManager];
+  }, [app, dataSource]);
+  return (
+    <div>
+      <DataSourceApplicationProvider
+        dataSource={dataSource.key}
+        dataSourceManager={dataSourceManager}
+        instance={collectionManager}
+      >
+        {props.children}
+      </DataSourceApplicationProvider>
+    </div>
+  );
+}
+
 export function PublicSharedForm() {
   const params = useParams();
   const { data, loading } = useRequest<any>({
@@ -13,11 +50,21 @@ export function PublicSharedForm() {
   if (loading) {
     return <Spin />;
   }
+
   return (
-    <div>
-      <SchemaComponentContext.Provider value={{ ...ctx, designable: false }}>
-        <SchemaComponent schema={data?.data?.schema} scope={{ useCreateActionProps }} />
-      </SchemaComponentContext.Provider>
+    <div
+      style={{
+        height: '100vh',
+        background: '#f5f5f5',
+      }}
+    >
+      <div style={{ maxWidth: 800, margin: '0 auto', paddingTop: '10vh' }}>
+        <PublicSharedFormProvider dataSource={data?.data?.dataSource}>
+          <SchemaComponentContext.Provider value={{ ...ctx, designable: false }}>
+            <SchemaComponent schema={data?.data?.schema} scope={{ useCreateActionProps }} />
+          </SchemaComponentContext.Provider>
+        </PublicSharedFormProvider>
+      </div>
     </div>
   );
 }
diff --git a/src/client/SharedFormConfigure.tsx b/src/client/SharedFormConfigure.tsx
@@ -1,5 +1,6 @@
+import { EyeOutlined, SettingOutlined } from '@ant-design/icons';
 import { RemoteSchemaComponent } from '@nocobase/client';
-import { Breadcrumb, Button, Space } from 'antd';
+import { Breadcrumb, Button, Dropdown, Space, Switch } from 'antd';
 import React from 'react';
 import { useParams } from 'react-router';
 import { Link } from 'react-router-dom';
@@ -30,9 +31,41 @@ export function SharedFormConfigure() {
           ]}
         />
         <Space>
-          <Link to={`/shared-forms/${params.name}`}>
-            <Button>Preview</Button>
+          <Link target={'_blank'} to={`/shared-forms/${params.name}`}>
+            <Button icon={<EyeOutlined />}>Open form</Button>
           </Link>
+          <Dropdown
+            menu={{
+              items: [
+                {
+                  key: 'enabled',
+                  label: (
+                    <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                      <span>Enable form</span> <Switch size={'small'} />
+                    </span>
+                  ),
+                },
+                {
+                  key: 'password',
+                  label: <span>Set password</span>,
+                },
+                {
+                  key: 'divider1',
+                  type: 'divider',
+                },
+                {
+                  key: 'copyLink',
+                  label: <span>Copy link</span>,
+                },
+                {
+                  key: 'qrcode',
+                  label: <span>Download QR code</span>,
+                },
+              ],
+            }}
+          >
+            <Button icon={<SettingOutlined />}>Settings</Button>
+          </Dropdown>
         </Space>
       </div>
       <div style={{ maxWidth: 800, margin: '100px auto' }}>

diff --git a/src/client/SharedFormTable.tsx b/src/client/SharedFormTable.tsx
@@ -42,17 +42,6 @@ const sharedFormsCollection = {
         'x-component': 'Input.TextArea',
       },
     },
-    {
-      type: 'string',
-      name: 'dataSource',
-      interface: 'input',
-      uiSchema: {
-        type: 'string',
-        title: 'Data source',
-        required: true,
-        'x-component': 'Input',
-      },
-    },
     {
       type: 'string',
       name: 'collection',
@@ -78,6 +67,9 @@ const sharedFormsCollection = {
 };
 
 const initialSchema = (values) => {
+  const keys = values.collection.split('.');
+  const collection = keys.pop();
+  const dataSource = keys.pop() || 'main';
   return {
     type: 'void',
     name: uid(),
@@ -92,8 +84,8 @@ const initialSchema = (values) => {
         'x-component': 'CardItem',
         'x-decorator': 'FormBlockProvider',
         'x-decorator-props': {
-          collection: values.collection,
-          dataSource: values.dataSource || 'main',
+          collection,
+          dataSource,
         },
         'x-use-decorator-props': 'useCreateFormBlockDecoratorProps',
         properties: {
@@ -129,7 +121,7 @@ const initialSchema = (values) => {
         'x-component': 'Markdown.Void',
         'x-decorator': 'CardItem',
         'x-component-props': {
-          content: 'This is a demo text, **supports Markdown syntax**.',
+          content: '# Submitted Successfully\nThis is a demo text, **supports Markdown syntax**.',
         },
         'x-decorator-props': {
           name: 'markdown',
@@ -258,12 +250,6 @@ const schema: ISchema = {
                       'x-component': 'CollectionField',
                       required: true,
                     },
-                    dataSource: {
-                      type: 'string',
-                      'x-decorator': 'FormItem',
-                      'x-component': 'CollectionField',
-                      default: 'main',
-                    },
                     collection: {
                       type: 'string',
                       'x-decorator': 'FormItem',
@@ -322,18 +308,6 @@ const schema: ISchema = {
             },
           },
         },
-        dataSource: {
-          type: 'void',
-          title: 'Data source',
-          'x-component': 'TableV2.Column',
-          properties: {
-            dataSource: {
-              type: 'string',
-              'x-component': 'CollectionField',
-              'x-pattern': 'readPretty',
-            },
-          },
-        },
         collection: {
           type: 'void',
           title: 'Collection',

diff --git a/src/server/collections/sharedForms.ts b/src/server/collections/sharedForms.ts
@@ -12,10 +12,6 @@ export default defineCollection({
       type: 'string',
       name: 'title',
     },
-    {
-      type: 'string',
-      name: 'dataSource',
-    },
     {
       type: 'string',
       name: 'collection',