@nocobase/plugin-map 0.9.1-alpha.2 → 0.9.2-alpha.2

package/src/client/block/MapBlockDesigner.tsx

@@ -0,0 +1,161 @@
+import { ISchema, useField, useFieldSchema } from '@formily/react';
+import {
+  FilterBlockType,
+  FixedBlockDesignerItem,
+  GeneralSchemaDesigner,
+  SchemaSettings,
+  mergeFilter,
+  useCollection,
+  useCollectionFilterOptions,
+  useCollectionManager,
+  useDesignable,
+  useSchemaTemplate,
+} from '@nocobase/client';
+import set from 'lodash/set';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useMapTranslation } from '../locale';
+import { useMapBlockContext } from './MapBlockProvider';
+
+export const MapBlockDesigner = () => {
+  const { name, title } = useCollection();
+  const field = useField();
+  const fieldSchema = useFieldSchema();
+  const dataSource = useCollectionFilterOptions(name);
+  const { service } = useMapBlockContext();
+  const { t: mapT } = useMapTranslation();
+  const { t } = useTranslation();
+  const { dn } = useDesignable();
+  const { getCollectionFieldsOptions } = useCollectionManager();
+  const collection = useCollection();
+  const defaultFilter = fieldSchema?.['x-decorator-props']?.params?.filter || {};
+  const defaultResource = fieldSchema?.['x-decorator-props']?.resource;
+  const fieldNames = fieldSchema?.['x-decorator-props']?.['fieldNames'] || {};
+  const defaultZoom = fieldSchema?.['x-component-props']?.['zoom'] || 13;
+
+  const template = useSchemaTemplate();
+
+  const mapFieldOptions = getCollectionFieldsOptions(collection?.name, ['point', 'lineString', 'polygon']);
+  const markerFieldOptions = getCollectionFieldsOptions(collection?.name, 'string');
+
+  return (
+    <GeneralSchemaDesigner template={template} title={title || name}>
+      <SchemaSettings.BlockTitleItem />
+      <FixedBlockDesignerItem />
+      <SchemaSettings.SelectItem
+        title={mapT('Map field')}
+        value={fieldNames.field}
+        options={mapFieldOptions}
+        onChange={(v) => {
+          const fieldNames = field.decoratorProps.fieldNames || {};
+          fieldNames['field'] = v;
+          field.decoratorProps.fieldNames = fieldNames;
+          fieldSchema['x-decorator-props']['fieldNames'] = fieldNames;
+          service.refresh();
+          dn.emit('patch', {
+            schema: {
+              ['x-uid']: fieldSchema['x-uid'],
+              'x-decorator-props': field.decoratorProps,
+            },
+          });
+          dn.refresh();
+        }}
+      />
+      <SchemaSettings.SelectItem
+        title={mapT('Marker field')}
+        value={fieldNames.marker}
+        options={markerFieldOptions}
+        onChange={(v) => {
+          const fieldNames = field.decoratorProps.fieldNames || {};
+          fieldNames['marker'] = v;
+          field.decoratorProps.fieldNames = fieldNames;
+          fieldSchema['x-decorator-props']['fieldNames'] = fieldNames;
+          service.refresh();
+          dn.emit('patch', {
+            schema: {
+              ['x-uid']: fieldSchema['x-uid'],
+              'x-decorator-props': field.decoratorProps,
+            },
+          });
+          dn.refresh();
+        }}
+      />
+      <SchemaSettings.ModalItem
+        title={mapT('The default zoom level of the map')}
+        schema={
+          {
+            type: 'object',
+            title: mapT('Set default zoom level'),
+            properties: {
+              zoom: {
+                title: mapT('Zoom'),
+                default: defaultZoom,
+                'x-component': 'InputNumber',
+                'x-decorator': 'FormItem',
+                'x-component-props': {
+                  precision: 0,
+                },
+              },
+            },
+          } as ISchema
+        }
+        onSubmit={({ zoom }) => {
+          set(fieldSchema, 'x-component-props.zoom', zoom);
+          Object.assign(field.componentProps, fieldSchema['x-component-props']);
+          dn.emit('patch', {
+            schema: {
+              'x-uid': fieldSchema['x-uid'],
+              'x-component-props': field.componentProps,
+            },
+          });
+          dn.refresh();
+        }}
+      ></SchemaSettings.ModalItem>
+      <SchemaSettings.ModalItem
+        title={t('Set the data scope')}
+        schema={
+          {
+            type: 'object',
+            title: t('Set the data scope'),
+            properties: {
+              filter: {
+                default: defaultFilter,
+                // title: '数据范围',
+                enum: dataSource,
+                'x-component': 'Filter',
+                'x-component-props': {},
+              },
+            },
+          } as ISchema
+        }
+        onSubmit={({ filter }) => {
+          const params = field.decoratorProps.params || {};
+          params.filter = filter;
+          field.decoratorProps.params = params;
+          fieldSchema['x-decorator-props']['params'] = params;
+          const filters = service.params?.[1]?.filters || {};
+          service.run(
+            { ...service.params?.[0], filter: mergeFilter([...Object.values(filters), filter]), page: 1 },
+            { filters },
+          );
+          dn.emit('patch', {
+            schema: {
+              ['x-uid']: fieldSchema['x-uid'],
+              'x-decorator-props': fieldSchema['x-decorator-props'],
+            },
+          });
+        }}
+      />
+      <SchemaSettings.ConnectDataBlocks type={FilterBlockType.TABLE} emptyDescription={t('No blocks to connect')} />
+      <SchemaSettings.Divider />
+      <SchemaSettings.Template componentName={'Map'} collectionName={name} resourceName={defaultResource} />
+      <SchemaSettings.Divider />
+      <SchemaSettings.Remove
+        removeParentsIfNoChildren
+        breakRemoveOn={{
+          'x-component': 'Grid',
+        }}
+      />
+    </GeneralSchemaDesigner>
+  );
+};

package/src/client/block/MapBlockInitializer.tsx

@@ -0,0 +1,76 @@
+import { TableOutlined } from '@ant-design/icons';
+import { DataBlockInitializer, SchemaComponent, SchemaComponentOptions, useCollectionManager } from '@nocobase/client';
+import { SchemaOptionsContext } from '@formily/react';
+import { FormDialog, FormLayout } from '@formily/antd';
+import React, { useContext } from 'react';
+import { useMapTranslation } from '../locale';
+import { createMapBlockSchema } from './utils';
+
+export const MapBlockInitializer = (props) => {
+  const { insert } = props;
+  const options = useContext(SchemaOptionsContext);
+  const { getCollectionFieldsOptions } = useCollectionManager();
+  const { t } = useMapTranslation();
+
+  return (
+    <DataBlockInitializer
+      {...props}
+      componentType={'Map'}
+      icon={<TableOutlined />}
+      onCreateBlockSchema={async ({ item }) => {
+        const mapFieldOptions = getCollectionFieldsOptions(item.name, ['point', 'lineString', 'polygon']);
+        const markerFieldOptions = getCollectionFieldsOptions(item.name, 'string');
+        const values = await FormDialog(t('Create map block'), () => {
+          return (
+            <SchemaComponentOptions scope={options.scope} components={{ ...options.components }}>
+              <FormLayout layout={'vertical'}>
+                <SchemaComponent
+                  schema={{
+                    properties: {
+                      field: {
+                        title: t('Map field'),
+                        enum: mapFieldOptions,
+                        required: true,
+                        'x-component': 'Select',
+                        'x-decorator': 'FormItem',
+                        default: mapFieldOptions[0]?.value
+                      },
+                      marker: {
+                        title: t('Marker field'),
+                        enum: markerFieldOptions,
+                        'x-component': 'Select',
+                        'x-decorator': 'FormItem',
+                        'x-reactions': (field) => {
+                          const value = field.form.values.field
+                          console.log("🚀 ~ file: MapBlockInitializer.tsx:45 ~ values ~ value:", value)
+                          console.log("🚀 ~ file: MapBlockInitializer.tsx:50 ~ values ~ mapFieldOptions:", mapFieldOptions)
+
+                          if (!value) {
+                            return
+                          }
+                          const item = mapFieldOptions.find((item) => item.value === value).type
+                          field.hidden = item !== 'point'
+                        },
+                      },
+                    },
+                  }}
+                />
+              </FormLayout>
+            </SchemaComponentOptions>
+          );
+        }).open({
+          initialValues: {},
+        });
+        insert(
+          createMapBlockSchema({
+            collection: item.name,
+            fieldNames: {
+              ...values,
+            },
+          }),
+        );
+      }}
+      title={t('Map block')}
+    />
+  );
+};

package/src/client/block/MapBlockProvider.tsx

@@ -0,0 +1,55 @@
+import { useField, useFieldSchema } from '@formily/react';
+import { BlockProvider, FixedBlockWrapper, SchemaComponentOptions, useBlockRequestContext } from '@nocobase/client';
+import React, { createContext, useContext, useState } from 'react';
+
+export const MapBlockContext = createContext<any>({});
+
+const InternalMapBlockProvider = (props) => {
+  const { fieldNames } = props;
+  const fieldSchema = useFieldSchema();
+  const field = useField();
+  const { resource, service } = useBlockRequestContext();
+  const [selectedRecordKeys, setSelectedRecordKeys] = useState([]);
+
+  return (
+    <FixedBlockWrapper>
+      <SchemaComponentOptions scope={{ selectedRecordKeys }}>
+        <MapBlockContext.Provider
+          value={{
+            field,
+            service,
+            resource,
+            fieldNames,
+            fixedBlock: fieldSchema?.['x-decorator-props']?.fixedBlock,
+            selectedRecordKeys,
+            setSelectedRecordKeys,
+          }}
+        >
+          {props.children}
+        </MapBlockContext.Provider>
+      </SchemaComponentOptions>
+    </FixedBlockWrapper>
+  );
+};
+
+export const MapBlockProvider = (props) => {
+  return (
+    <BlockProvider {...props} params={{ ...props.params, paginate: false }}>
+      <InternalMapBlockProvider {...props} />
+    </BlockProvider>
+  );
+};
+
+export const useMapBlockContext = () => {
+  return useContext(MapBlockContext);
+};
+
+export const useMapBlockProps = () => {
+  const ctx = useMapBlockContext();
+
+  return {
+    ...ctx,
+    dataSource: ctx?.service?.data?.data,
+    zoom: ctx?.field?.componentProps?.zoom || 13,
+  };
+};

package/src/client/block/index.tsx

@@ -0,0 +1,35 @@
+import { SchemaComponentOptions, SchemaInitializerContext, SchemaInitializerProvider } from '@nocobase/client';
+import React, { useContext, useEffect } from 'react';
+import { generateNTemplate } from '../locale';
+import { MapActionInitializers } from './MapActionInitializers';
+import { MapBlock } from './MapBlock';
+import { MapBlockDesigner } from './MapBlockDesigner';
+import { MapBlockInitializer } from './MapBlockInitializer';
+import { MapBlockProvider, useMapBlockProps } from './MapBlockProvider';
+
+export const MapBlockOptions: React.FC = (props) => {
+  const items = useContext(SchemaInitializerContext);
+  const children = items.BlockInitializers.items[0].children;
+
+  useEffect(() => {
+    if (!children.find((item) => item.component === 'MapBlockInitializer')) {
+      children.push({
+        key: 'mapBlock',
+        type: 'item',
+        title: generateNTemplate('Map'),
+        component: 'MapBlockInitializer',
+      });
+    }
+  }, []);
+
+  return (
+    <SchemaInitializerProvider initializers={{ MapActionInitializers }}>
+      <SchemaComponentOptions
+        scope={{ useMapBlockProps }}
+        components={{ MapBlockInitializer, MapBlockDesigner, MapBlockProvider, MapBlock }}
+      >
+        {props.children}
+      </SchemaComponentOptions>
+    </SchemaInitializerProvider>
+  );
+};

package/src/client/block/utils.ts

@@ -0,0 +1,81 @@
+import { ISchema } from '@formily/react';
+import { uid } from '@formily/shared';
+
+export const createMapBlockSchema = (options) => {
+  const { collection, resource, fieldNames, ...others } = options;
+  const schema: ISchema = {
+    type: 'void',
+    'x-acl-action': `${resource || collection}:list`,
+    'x-decorator': 'MapBlockProvider',
+    'x-decorator-props': {
+      collection: collection,
+      resource: resource || collection,
+      action: 'list',
+      fieldNames,
+      params: {
+        paginate: false,
+      },
+      ...others,
+    },
+    'x-designer': 'MapBlockDesigner',
+    'x-component': 'CardItem',
+    // 保存当前筛选区块所能过滤的数据区块
+    'x-filter-targets': [],
+    properties: {
+      actions: {
+        type: 'void',
+        'x-initializer': 'MapActionInitializers',
+        'x-component': 'ActionBar',
+        'x-component-props': {
+          style: {
+            marginBottom: 16,
+          },
+        },
+        properties: {},
+      },
+      [uid()]: {
+        type: 'void',
+        'x-component': 'MapBlock',
+        'x-component-props': {
+          useProps: '{{ useMapBlockProps }}',
+        },
+        properties: {
+          drawer: {
+            type: 'void',
+            'x-component': 'Action.Drawer',
+            'x-component-props': {
+              className: 'nb-action-popup',
+            },
+            title: '{{ t("View record") }}',
+            properties: {
+              tabs: {
+                type: 'void',
+                'x-component': 'Tabs',
+                'x-component-props': {},
+                'x-initializer': 'TabPaneInitializers',
+                properties: {
+                  tab1: {
+                    type: 'void',
+                    title: '{{t("Details")}}',
+                    'x-component': 'Tabs.TabPane',
+                    'x-designer': 'Tabs.Designer',
+                    'x-component-props': {},
+                    properties: {
+                      grid: {
+                        type: 'void',
+                        'x-component': 'Grid',
+                        'x-initializer': 'RecordBlockInitializers',
+                        properties: {},
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  };
+  return schema;
+};