@nocobase/plugin-snapshot-field 0.8.1-alpha.3

package/src/client/SnapshotBlock/SnapshotBlockInitializers/SnapshotBlockInitializersDetailItem.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import { FormOutlined } from '@ant-design/icons';
+import {
+  SchemaInitializer,
+  useBlockAssociationContext,
+  useCollection,
+  useSchemaTemplateManager,
+  useRecordCollectionDataSourceItems,
+  useBlockRequestContext,
+} from '@nocobase/client';
+import { ISchema } from '@formily/react';
+import { uid } from '@formily/shared';
+
+export const createSnapshotBlockSchema = (options) => {
+  const {
+    formItemInitializers = 'ReadPrettyFormItemInitializers',
+    actionInitializers = 'ReadPrettyFormActionInitializers',
+    collection,
+    association,
+    resource,
+    template,
+    ...others
+  } = options;
+  const resourceName = resource || association || collection;
+  const schema: ISchema = {
+    type: 'void',
+    'x-acl-action': `${resourceName}:get`,
+    'x-decorator': 'SnapshotBlockProvider',
+    'x-decorator-props': {
+      resource: resourceName,
+      collection,
+      association,
+      readPretty: true,
+      action: 'get',
+      useParams: '{{ useParamsFromRecord }}',
+      ...others,
+    },
+    'x-designer': 'FormV2.ReadPrettyDesigner',
+    'x-component': 'CardItem',
+    properties: {
+      [uid()]: {
+        type: 'void',
+        'x-component': 'FormV2',
+        'x-read-pretty': true,
+        'x-component-props': {
+          useProps: '{{ useFormBlockProps }}',
+        },
+        properties: {
+          grid: template || {
+            type: 'void',
+            'x-component': 'Grid',
+            'x-initializer': formItemInitializers,
+            properties: {},
+          },
+        },
+      },
+    },
+  };
+  console.log(JSON.stringify(schema, null, 2));
+  return schema;
+};
+
+export const SnapshotBlockInitializersDetailItem = (props) => {
+  const {
+    onCreateBlockSchema,
+    componentType,
+    createBlockSchema,
+    insert,
+    icon = true,
+    targetCollection,
+    ...others
+  } = props;
+  const { getTemplateSchemaByMode } = useSchemaTemplateManager();
+  const collection = targetCollection || useCollection();
+  const association = useBlockAssociationContext();
+  const { block } = useBlockRequestContext();
+  const actionInitializers =
+    block !== 'TableField' ? props.actionInitializers || 'ReadPrettyFormActionInitializers' : null;
+
+  return (
+    <SchemaInitializer.Item
+      icon={icon && <FormOutlined />}
+      {...others}
+      key={'snapshotDetail'}
+      onClick={async ({ item }) => {
+        if (item.template) {
+          const s = await getTemplateSchemaByMode(item);
+          if (item.template.componentName === 'ReadPrettyFormItem') {
+            const blockSchema = createSnapshotBlockSchema({
+              actionInitializers,
+              association,
+              collection: collection.name,
+              action: 'get',
+              useSourceId: '{{ useSourceIdFromParentRecord }}',
+              useParams: '{{ useParamsFromRecord }}',
+              template: s,
+            });
+            if (item.mode === 'reference') {
+              blockSchema['x-template-key'] = item.template.key;
+            }
+            insert(blockSchema);
+          } else {
+            insert(s);
+          }
+        } else {
+          insert(
+            createSnapshotBlockSchema({
+              actionInitializers,
+              association,
+              collection: collection.name,
+              action: 'get',
+              useSourceId: '{{ useSourceIdFromParentRecord }}',
+              useParams: '{{ useParamsFromRecord }}',
+            }),
+          );
+        }
+      }}
+      items={useRecordCollectionDataSourceItems('ReadPrettyFormItem')}
+    />
+  );
+};

package/src/client/SnapshotBlock/SnapshotBlockProvider.tsx

@@ -0,0 +1,105 @@
+import React, { useContext, useMemo, useRef } from 'react';
+import { createForm } from '@formily/core';
+import { useField } from '@formily/react';
+import {
+  BlockAssociationContext,
+  BlockRequestContext,
+  BlockResourceContext,
+  FormBlockContext,
+  MaybeCollectionProvider,
+  RecordProvider,
+  useBlockRequestContext,
+  useBlockResource,
+  useCollectionManager,
+  useDesignable,
+  useRecord,
+  useResource,
+} from '@nocobase/client';
+import { Spin } from 'antd';
+
+const InternalFormBlockProvider = (props) => {
+  const { action, readPretty } = props;
+  const field = useField();
+  const form = useMemo(
+    () =>
+      createForm({
+        readPretty,
+      }),
+    [],
+  );
+  const { resource, service } = useBlockRequestContext();
+  const formBlockRef = useRef();
+  if (service.loading) {
+    return <Spin />;
+  }
+  return (
+    <FormBlockContext.Provider
+      value={{
+        action,
+        form,
+        field,
+        service,
+        resource,
+        updateAssociationValues: [],
+        formBlockRef,
+      }}
+    >
+      {readPretty ? (
+        <RecordProvider record={service?.data?.data}>
+          <div ref={formBlockRef}>{props.children}</div>
+        </RecordProvider>
+      ) : (
+        <div ref={formBlockRef}>{props.children}</div>
+      )}
+    </FormBlockContext.Provider>
+  );
+};
+
+const BlockRequestProvider = (props) => {
+  const field = useField();
+  const resource = useBlockResource();
+  const service = {
+    loading: false,
+    data: {
+      data: useRecord(),
+    },
+  };
+  const __parent = useContext(BlockRequestContext);
+  return (
+    <BlockRequestContext.Provider value={{ block: props.block, props, field, service, resource, __parent }}>
+      {props.children}
+    </BlockRequestContext.Provider>
+  );
+};
+
+const BlockProvider = (props) => {
+  const { collection, association } = props;
+  const resource = useResource(props);
+
+  return (
+    <MaybeCollectionProvider collection={collection}>
+      <BlockAssociationContext.Provider value={association}>
+        <BlockResourceContext.Provider value={resource}>
+          <BlockRequestProvider {...props}>{props.children}</BlockRequestProvider>
+        </BlockResourceContext.Provider>
+      </BlockAssociationContext.Provider>
+    </MaybeCollectionProvider>
+  );
+};
+
+export const SnapshotBlockProvider = (props) => {
+  const record = useRecord();
+  const { __tableName } = record;
+  const { getInheritCollections } = useCollectionManager();
+  const inheritCollections = getInheritCollections(__tableName);
+  const { designable } = useDesignable();
+  const flag =
+    !designable && __tableName && !inheritCollections.includes(props.collection) && __tableName !== props.collection;
+  return (
+    !flag && (
+      <BlockProvider {...props}>
+        <InternalFormBlockProvider {...props} />
+      </BlockProvider>
+    )
+  );
+};

package/src/client/SnapshotHistoryCollectionProvider.tsx

@@ -0,0 +1,42 @@
+import { CollectionManagerContext, useHistoryCollectionsByNames } from '@nocobase/client';
+import React, { useContext } from 'react';
+
+export const SnapshotHistoryCollectionProvider: React.FC<{ collectionName: string }> = (props) => {
+  const { collectionName } = props;
+  const { collections: allCollections, ...rest } = useContext(CollectionManagerContext);
+
+  // 目标表
+  const snapshotTargetCollection = useHistoryCollectionsByNames([collectionName])?.[0];
+  // 目标如果是继承表则获取继承表
+  const inheritCollections = useHistoryCollectionsByNames(snapshotTargetCollection?.inherits ?? []);
+  // 目标表内关联字段的表
+  const associationFieldTargetCollections = useHistoryCollectionsByNames(
+    snapshotTargetCollection?.fields.filter((i) => i.interface !== 'snapshot').map((i) => i.target) ?? [],
+  );
+
+  // 替换表的集合
+  const finallyHistoryCollecionts = [
+    snapshotTargetCollection,
+    ...associationFieldTargetCollections,
+    ...inheritCollections,
+  ].filter((i) => i);
+
+  // 过滤出不需要替换的表
+  const filterdAllCollection = allCollections.filter(
+    (c) => !finallyHistoryCollecionts.map((i) => i.name).includes(c.name),
+  );
+
+  // 最终替换后的表
+  const overridedCollections = [...filterdAllCollection, ...finallyHistoryCollecionts];
+
+  return (
+    <CollectionManagerContext.Provider
+      value={{
+        ...rest,
+        collections: overridedCollections,
+      }}
+    >
+      {props.children}
+    </CollectionManagerContext.Provider>
+  );
+};

package/src/client/SnapshotRecordPicker.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { connect, mapReadPretty, useFieldSchema } from '@formily/react';
+import {
+  InputRecordPicker,
+  ReadPrettyRecordPicker,
+  useActionContext,
+  useCollection,
+  useCollectionHistory,
+} from '@nocobase/client';
+import { SnapshotHistoryCollectionProvider } from './SnapshotHistoryCollectionProvider';
+
+const useSnapshotFieldTargetCollectionName = () => {
+  const fieldSchema = useFieldSchema();
+  const { getField } = useCollection();
+  const collectionField = getField(fieldSchema.name);
+  const { historyCollections } = useCollectionHistory();
+  return historyCollections.find((i) => i.name === collectionField.target)?.name;
+};
+
+const ReadPrettyRecordPickerWrapper = (props) => {
+  const collectionName = useSnapshotFieldTargetCollectionName();
+
+  return (
+    <SnapshotHistoryCollectionProvider collectionName={collectionName}>
+      <ReadPrettyRecordPicker {...props} />
+    </SnapshotHistoryCollectionProvider>
+  );
+};
+
+const SnapshotRecordPickerInner: any = connect(
+  (props) => {
+    const actionCtx = useActionContext();
+
+    const isUpdateAction = actionCtx.fieldSchema['x-action'] === 'update';
+
+    return isUpdateAction ? <ReadPrettyRecordPickerWrapper {...props} /> : <InputRecordPicker {...props} />;
+  },
+  // mapProps(mapSuffixProps),
+  mapReadPretty(ReadPrettyRecordPickerWrapper),
+);
+
+export const SnapshotRecordPicker = (props) => {
+  const { value, onChange, ...restProps } = props;
+
+  const newProps = {
+    ...restProps,
+    value: value?.data,
+    onChange: (value) => onChange({ data: value }),
+  };
+
+  return <SnapshotRecordPickerInner {...newProps} />;
+};

package/src/client/index.tsx

@@ -0,0 +1,50 @@
+import {
+  CollectionHistoryProvider,
+  CollectionManagerProvider,
+  registerField,
+  SchemaComponentOptions,
+  SchemaInitializerContext,
+  SchemaInitializerProvider,
+} from '@nocobase/client';
+import React, { useContext, useState, useEffect } from 'react';
+import { useSnapshotInterface } from './interface';
+import { SnapshotRecordPicker } from './SnapshotRecordPicker';
+import { SnapshotBlockInitializers } from './SnapshotBlock/SnapshotBlockInitializers/SnapshotBlockInitializers';
+import { SnapshotBlockInitializersDetailItem } from './SnapshotBlock/SnapshotBlockInitializers/SnapshotBlockInitializersDetailItem';
+import { SnapshotBlockProvider } from './SnapshotBlock/SnapshotBlockProvider';
+
+export default React.memo((props) => {
+  const initializers = useContext(SchemaInitializerContext);
+  const snapshot = useSnapshotInterface();
+
+  useEffect(() => {
+    registerField(snapshot.group, snapshot.name as string, snapshot);
+  }, []);
+
+  return (
+    <CollectionManagerProvider
+      interfaces={{
+        snapshot,
+      }}
+    >
+      <CollectionHistoryProvider>
+        <SchemaInitializerProvider
+          initializers={{
+            ...initializers,
+            SnapshotBlockInitializers,
+          }}
+        >
+          <SchemaComponentOptions
+            components={{
+              SnapshotRecordPicker,
+              SnapshotBlockProvider,
+              SnapshotBlockInitializersDetailItem,
+            }}
+          >
+            {props.children}
+          </SchemaComponentOptions>
+        </SchemaInitializerProvider>
+      </CollectionHistoryProvider>
+    </CollectionManagerProvider>
+  );
+});

package/src/client/interface.ts

@@ -0,0 +1,102 @@
+import { ISchema } from '@formily/react';
+import { IField } from '@nocobase/client';
+import { cloneDeep } from 'lodash';
+import { interfacesProperties } from '@nocobase/client';
+import { useSnapshotTranslation } from './locale';
+import { useMemo } from 'react';
+
+const { defaultProps, recordPickerSelector } = interfacesProperties;
+
+export const useSnapshotInterface = () => {
+  const { t } = useSnapshotTranslation();
+
+  const recordPickerViewer = {
+    type: 'void',
+    title: t('View record'),
+    'x-component': 'RecordPicker.Viewer',
+    'x-component-props': {
+      className: 'nb-action-popup',
+    },
+    properties: {
+      tabs: {
+        type: 'void',
+        'x-component': 'Tabs',
+        'x-component-props': {},
+        // 'x-initializer': 'TabPaneInitializers',
+        properties: {
+          tab1: {
+            type: 'void',
+            title: t('Detail'),
+            'x-component': 'Tabs.TabPane',
+            'x-designer': 'Tabs.Designer',
+            'x-component-props': {},
+            properties: {
+              grid: {
+                type: 'void',
+                'x-component': 'Grid',
+                'x-initializer': 'SnapshotBlockInitializers',
+                properties: {},
+              },
+            },
+          },
+        },
+      },
+    },
+  };
+
+  const snapshot: IField = {
+    name: 'snapshot',
+    type: 'object',
+    group: 'advanced',
+    title: t('Snapshot'),
+    description: t('Snapshot to description'),
+    default: {
+      type: 'snapshot',
+      // name,
+      uiSchema: {
+        // title,
+        'x-component': 'SnapshotRecordPicker',
+        'x-component-props': {
+          // mode: 'tags',
+          multiple: true,
+          fieldNames: {
+            label: 'id',
+            value: 'id',
+          },
+        },
+      },
+    },
+    schemaInitialize(schema: ISchema, { field, readPretty, action, block }) {
+      if (readPretty || action === 'update') {
+        schema['properties'] = {
+          viewer: cloneDeep(recordPickerViewer),
+        };
+      } else {
+        schema['properties'] = {
+          selector: cloneDeep(recordPickerSelector),
+        };
+      }
+    },
+    initialize: (values: any) => {},
+    properties: {
+      ...defaultProps,
+      target: {
+        type: 'string',
+        title: t('Related collection'),
+        required: true,
+        'x-reactions': ['{{useAsyncDataSource(loadCollections)}}'],
+        'x-decorator': 'FormItem',
+        'x-component': 'Select',
+        'x-disabled': '{{ !createOnly }}',
+      },
+      'uiSchema.x-component-props.multiple': {
+        type: 'boolean',
+        'x-content': t('Allow linking to multiple records'),
+        'x-decorator': 'FormItem',
+        'x-component': 'Checkbox',
+      },
+    },
+  };
+
+  return useMemo<IField>(() => snapshot, [t]);
+};

package/src/client/locale/en-US.ts

@@ -0,0 +1,10 @@
+export default {
+  Detail: 'Detail',
+  Snapshot: 'Snapshot',
+  'View record': 'View record',
+  'Add block': 'Add block',
+  'Allow linking to multiple records': 'Allow linking to multiple records',
+  'Snapshot to description':
+    'It is used to create a snapshot of the table, save the current data of the pointed table, and save it only when the record to which it belongs is created, and will not be updated later.',
+  'Related collection': 'Related collection',
+};

package/src/client/locale/index.ts

@@ -0,0 +1,24 @@
+import { i18n } from '@nocobase/client';
+import { useTranslation } from 'react-i18next';
+
+import enUS from './en-US';
+import jaJP from './ja-JP';
+import ruRU from './ru-RU';
+import trTR from './tr-TR';
+import zhCN from './zh-CN';
+
+export const NAMESPACE = 'snapshot-field';
+
+i18n.addResources('zh-CN', NAMESPACE, zhCN);
+i18n.addResources('en-US', NAMESPACE, enUS);
+i18n.addResources('ja-JP', NAMESPACE, jaJP);
+i18n.addResources('ru-RU', NAMESPACE, ruRU);
+i18n.addResources('tr-TR', NAMESPACE, trTR);
+
+export function lang(key: string) {
+  return i18n.t(key, { ns: NAMESPACE });
+}
+
+export function useSnapshotTranslation() {
+  return useTranslation(NAMESPACE);
+}

package/src/client/locale/ja-JP.ts

@@ -0,0 +1 @@
+export default {};

package/src/client/locale/ru-RU.ts

@@ -0,0 +1 @@
+export default {};

package/src/client/locale/tr-TR.ts

@@ -0,0 +1 @@
+export default {};

package/src/client/locale/zh-CN.ts

@@ -0,0 +1,9 @@
+export default {
+  Detail: '详情',
+  Snapshot: '快照',
+  'Add block': '创建区块',
+  'Snapshot to description': '用于创建表的快照，保存指向的表的当前数据，仅在其所属的记录创建时保存，后续不再更新。',
+  'View record': '查看数据',
+  'Allow linking to multiple records': '允许关联多条记录',
+  'Related collection': '关系表',
+};

package/src/index.ts

@@ -0,0 +1 @@
+export { default } from './server';

package/src/server/collections/collectionsHistory.ts

@@ -0,0 +1,55 @@
+import { CollectionOptions } from '@nocobase/database';
+
+export default {
+  name: 'collectionsHistory',
+  title: '数据表历史',
+  sortable: 'sort',
+  autoGenId: false,
+  model: 'CollectionModel',
+  repository: 'CollectionRepository',
+  timestamps: false,
+  filterTargetKey: 'name',
+  fields: [
+    {
+      type: 'uid',
+      name: 'key',
+      primaryKey: true,
+    },
+    {
+      type: 'uid',
+      name: 'name',
+      unique: true,
+      prefix: 't_',
+    },
+    {
+      type: 'string',
+      name: 'title',
+      required: true,
+    },
+    {
+      type: 'boolean',
+      name: 'inherit',
+      defaultValue: false,
+    },
+    {
+      type: 'boolean',
+      name: 'hidden',
+      defaultValue: false,
+    },
+    {
+      type: 'json',
+      name: 'options',
+      defaultValue: {},
+    },
+    {
+      type: 'hasMany',
+      name: 'fields',
+      target: 'fieldsHistory',
+      sourceKey: 'name',
+      targetKey: 'name',
+      foreignKey: 'collectionName',
+      onDelete: 'CASCADE',
+      sortBy: 'sort',
+    },
+  ],
+} as CollectionOptions;

package/src/server/collections/fieldsHistory.ts

@@ -0,0 +1,73 @@
+import { CollectionOptions } from '@nocobase/database';
+
+export default {
+  name: 'fieldsHistory',
+  title: '{{t("Fields history")}}',
+  autoGenId: false,
+  model: 'FieldModel',
+  timestamps: false,
+  sortable: {
+    name: 'sort',
+    scopeKey: 'collectionName',
+  },
+  indexes: [
+    {
+      type: 'UNIQUE',
+      fields: ['collectionName', 'name'],
+    },
+  ],
+  fields: [
+    {
+      type: 'uid',
+      name: 'key',
+      primaryKey: true,
+    },
+    {
+      type: 'uid',
+      name: 'name',
+      prefix: 'f_',
+    },
+    {
+      type: 'string',
+      name: 'type',
+    },
+    {
+      type: 'string',
+      name: 'interface',
+      allowNull: true,
+    },
+    {
+      type: 'belongsTo',
+      name: 'collection',
+      target: 'collectionsHistory',
+      foreignKey: 'collectionName',
+      targetKey: 'name',
+      onDelete: 'CASCADE',
+    },
+    {
+      type: 'hasMany',
+      name: 'children',
+      target: 'fieldsHistory',
+      sourceKey: 'key',
+      foreignKey: 'parentKey',
+    },
+    {
+      type: 'hasOne',
+      name: 'reverseField',
+      target: 'fieldsHistory',
+      sourceKey: 'key',
+      foreignKey: 'reverseKey',
+    },
+    {
+      type: 'belongsTo',
+      name: 'uiSchema',
+      target: 'uiSchemas',
+      foreignKey: 'uiSchemaUid',
+    },
+    {
+      type: 'json',
+      name: 'options',
+      defaultValue: {},
+    },
+  ],
+} as CollectionOptions;

package/src/server/fields/snapshot-field.ts

@@ -0,0 +1,12 @@
+import { Field, BaseColumnFieldOptions } from '@nocobase/database';
+import { DataTypes } from 'sequelize';
+
+export class SnapshotField extends Field {
+  get dataType() {
+    return DataTypes.JSON;
+  }
+}
+
+export interface SnapshotFieldOptions extends BaseColumnFieldOptions {
+  type: 'snapshot';
+}

package/src/server/index.ts

@@ -0,0 +1 @@
+export { default } from './plugin';