@nocobase/plugin-graph-collection-manager 0.11.1-alpha.4 → 0.12.0-alpha.1

package/src/client/components/Entity.tsx

@@ -1,495 +0,0 @@
-import { DeleteOutlined, DownOutlined, EditOutlined, UpOutlined } from '@ant-design/icons';
-import '@antv/x6-react-shape';
-import { uid } from '@formily/shared';
-import {
-  Action,
-  Checkbox,
-  CollectionCategroriesContext,
-  CollectionField,
-  CollectionProvider,
-  Form,
-  FormItem,
-  Formula,
-  Grid,
-  Input,
-  InputNumber,
-  Radio,
-  ResourceActionProvider,
-  SchemaComponent,
-  SchemaComponentProvider,
-  Select,
-  collection,
-  css,
-  useCollectionManager,
-  useCompile,
-  useCurrentAppInfo,
-  useRecord,
-} from '@nocobase/client';
-import { lodash } from '@nocobase/utils/client';
-import { Badge, Dropdown, Popover, Tag } from 'antd';
-import React, { useContext, useRef, useState } from 'react';
-import {
-  useAsyncDataSource,
-  useCancelAction,
-  useDestroyActionAndRefreshCM,
-  useDestroyFieldActionAndRefreshCM,
-  useUpdateCollectionActionAndRefreshCM,
-  useValuesFromRecord,
-} from '../action-hooks';
-import useStyles from '../style';
-import { getPopupContainer, useGCMTranslation } from '../utils';
-import { AddFieldAction } from './AddFieldAction';
-import { CollectionNodeProvder } from './CollectionNodeProvder';
-import { EditCollectionAction } from './EditCollectionAction';
-import { EditFieldAction } from './EditFieldAction';
-import { FieldSummary } from './FieldSummary';
-import { OverrideFieldAction } from './OverrideFieldAction';
-import { ViewFieldAction } from './ViewFieldAction';
-
-const Entity: React.FC<{
-  node?: Node | any;
-  setTargetNode: Function | any;
-  targetGraph: any;
-}> = (props) => {
-  const { styles } = useStyles();
-  const { node, setTargetNode, targetGraph } = props;
-  const {
-    store: {
-      data: { title, name, item, attrs, select },
-    },
-    id,
-  } = node;
-  const database = useCurrentAppInfo();
-  const collectionData = useRef();
-  const categoryData = useContext(CollectionCategroriesContext);
-  collectionData.current = { ...item, title, inherits: item.inherits && new Proxy(item.inherits, {}) };
-  const { category } = item;
-  const compile = useCompile();
-  const loadCollections = async (field: any) => {
-    return targetGraph.collections?.map((collection: any) => ({
-      label: compile(collection.title),
-      value: collection.name,
-    }));
-  };
-  const loadCategories = async () => {
-    return categoryData?.data.map((item: any) => ({
-      label: compile(item.name),
-      value: item.id,
-    }));
-  };
-  const portsProps = {
-    targetGraph,
-    collectionData,
-    setTargetNode,
-    node,
-    loadCollections,
-  };
-  return (
-    <div
-      className={styles.entityContainer}
-      style={{ boxShadow: attrs?.boxShadow, border: select ? '2px dashed #f5a20a' : 0 }}
-    >
-      {category.map((v, index) => {
-        return (
-          <Badge.Ribbon
-            key={index}
-            color={v.color}
-            style={{ width: '103%', height: '3px', marginTop: index * 5 - 8, borderRadius: 0 }}
-            placement="start"
-          />
-        );
-      })}
-      <div
-        className={styles.headClass}
-        style={{ background: attrs?.hightLight ? '#1890ff' : null, paddingTop: category.length * 3 }}
-      >
-        <span className={styles.tableNameClass}>{compile(title)}</span>
-
-        <div className={styles.tableBtnClass}>
-          <SchemaComponentProvider>
-            <CollectionNodeProvder setTargetNode={setTargetNode} node={node}>
-              <CollectionProvider collection={collection}>
-                <SchemaComponent
-                  scope={{
-                    useUpdateCollectionActionAndRefreshCM,
-                    useCancelAction,
-                    loadCollections,
-                    loadCategories,
-                    useAsyncDataSource,
-                    Action,
-                    DeleteOutlined,
-                    enableInherits: database?.dialect === 'postgres',
-                  }}
-                  components={{
-                    Action,
-                    EditOutlined,
-                    FormItem,
-                    CollectionField,
-                    Input,
-                    Form,
-                    Select,
-                    EditCollectionAction,
-                    Checkbox,
-                  }}
-                  schema={{
-                    type: 'object',
-                    properties: {
-                      update: {
-                        type: 'void',
-                        title: '{{ t("Edit") }}',
-                        'x-component': 'EditCollectionAction',
-                        'x-component-props': {
-                          type: 'primary',
-                          item: collectionData.current,
-                          className: 'btn-edit-in-head',
-                        },
-                      },
-                      delete: {
-                        type: 'void',
-                        'x-action': 'destroy',
-                        'x-component': 'Action',
-                        'x-component-props': {
-                          component: DeleteOutlined,
-                          icon: 'DeleteOutlined',
-                          className: 'btn-del',
-
-                          confirm: {
-                            title: "{{t('Delete record')}}",
-                            getContainer: getPopupContainer,
-                            collectionConten: "{{t('Are you sure you want to delete it?')}}",
-                          },
-                          useAction: () => useDestroyActionAndRefreshCM({ name, id }),
-                        },
-                      },
-                    },
-                  }}
-                />
-              </CollectionProvider>
-            </CollectionNodeProvder>
-          </SchemaComponentProvider>
-        </div>
-      </div>
-
-      <PortsCom {...portsProps} />
-    </div>
-  );
-};
-
-const PortsCom = React.memo<any>(({ targetGraph, collectionData, setTargetNode, node, loadCollections }) => {
-  const {
-    store: {
-      data: { title, name, item, ports, data, sourcePort, associated, targetPort },
-    },
-  } = node;
-  const [collapse, setCollapse] = useState(false);
-  const { t } = useGCMTranslation();
-  const compile = useCompile();
-  const database = useCurrentAppInfo();
-  const portsData = lodash.groupBy(ports.items, (v) => {
-    if (
-      v.isForeignKey ||
-      v.primaryKey ||
-      ['obo', 'oho', 'o2o', 'o2m', 'm2o', 'm2m', 'linkTo', 'id'].includes(v.interface)
-    ) {
-      return 'initPorts';
-    } else {
-      return 'morePorts';
-    }
-  });
-  const useNewId = (prefix) => {
-    return `${prefix || ''}${uid()}`;
-  };
-  const CollectionConten = (data) => {
-    const { styles } = useStyles();
-    const { type, name, primaryKey, allowNull, autoIncrement } = data;
-
-    return (
-      <div className={styles.collectionPopoverClass}>
-        <div className="field-content">
-          <div>
-            <span>name</span>: <span className="field-type">{name}</span>
-          </div>
-          <div>
-            <span>type</span>: <span className="field-type">{type}</span>
-          </div>
-        </div>
-        <p>
-          {primaryKey && <Tag color="green">PRIMARY</Tag>}
-          {allowNull && <Tag color="geekblue">ALLOWNULL</Tag>}
-          {autoIncrement && <Tag color="purple">AUTOINCREMENT</Tag>}
-        </p>
-      </div>
-    );
-  };
-  const typeColor = (v) => {
-    if (v.isForeignKey || v.primaryKey || v.interface === 'id') {
-      return 'red';
-    } else if (['obo', 'oho', 'o2o', 'o2m', 'm2o', 'm2m', 'linkTo'].includes(v.interface)) {
-      return 'orange';
-    }
-  };
-
-  const OperationButton = ({ property }) => {
-    const isInheritField = !(property.collectionName !== name);
-    return (
-      <div className="field-operator">
-        <SchemaComponentProvider
-          components={{
-            FormItem,
-            CollectionField,
-            Input,
-            Form,
-            ResourceActionProvider,
-            Select: (props) => (
-              <Select popupMatchSelectWidth={false} {...props} getPopupContainer={getPopupContainer} />
-            ),
-            Checkbox,
-            Radio,
-            InputNumber,
-            Grid,
-            FieldSummary,
-            Action,
-            EditOutlined,
-            DeleteOutlined,
-            AddFieldAction,
-            OverrideFieldAction,
-            ViewFieldAction,
-            Dropdown,
-            Formula,
-          }}
-          scope={{
-            useAsyncDataSource,
-            loadCollections,
-            useCancelAction,
-            useNewId,
-            useCurrentFields,
-            useValuesFromRecord,
-            useUpdateCollectionActionAndRefreshCM,
-            isInheritField,
-          }}
-        >
-          <CollectionNodeProvder
-            record={collectionData.current}
-            setTargetNode={setTargetNode}
-            node={node}
-            handelOpenPorts={() => handelOpenPorts(true)}
-          >
-            <SchemaComponent
-              scope={useCancelAction}
-              schema={{
-                type: 'object',
-                properties: {
-                  create: {
-                    type: 'void',
-                    'x-action': 'create',
-                    'x-component': 'AddFieldAction',
-                    'x-visible': '{{isInheritField}}',
-                    'x-component-props': {
-                      item: {
-                        ...property,
-                        title,
-                      },
-                      database,
-                    },
-                  },
-                  update: {
-                    type: 'void',
-                    'x-action': 'update',
-                    'x-component': EditFieldAction,
-                    'x-visible': '{{isInheritField}}',
-                    'x-component-props': {
-                      item: {
-                        ...property,
-                        title,
-                        __parent: collectionData.current,
-                      },
-                    },
-                  },
-                  delete: {
-                    type: 'void',
-                    'x-action': 'destroy',
-                    'x-component': 'Action',
-                    'x-visible': '{{isInheritField}}',
-                    'x-component-props': {
-                      component: DeleteOutlined,
-                      icon: 'DeleteOutlined',
-                      className: 'btn-del',
-                      confirm: {
-                        title: "{{t('Delete record')}}",
-                        getContainer: getPopupContainer,
-                        collectionConten: "{{t('Are you sure you want to delete it?')}}",
-                      },
-                      useAction: () =>
-                        useDestroyFieldActionAndRefreshCM({
-                          collectionName: property.collectionName,
-                          name: property.name,
-                        }),
-                    },
-                  },
-                  override: {
-                    type: 'void',
-                    'x-action': 'create',
-                    'x-visible': '{{!isInheritField}}',
-                    'x-component': 'OverrideFieldAction',
-                    'x-component-props': {
-                      icon: 'ReconciliationOutlined',
-                      item: {
-                        ...property,
-                        title,
-                        __parent: collectionData.current,
-                        targetCollection: name,
-                      },
-                    },
-                  },
-                  view: {
-                    type: 'void',
-                    'x-action': 'view',
-                    'x-visible': '{{!isInheritField}}',
-                    'x-component': 'ViewFieldAction',
-                    'x-component-props': {
-                      icon: 'ReconciliationOutlined',
-                      item: {
-                        ...property,
-                        title,
-                        __parent: collectionData.current,
-                      },
-                    },
-                  },
-                },
-              }}
-            />
-          </CollectionNodeProvder>
-        </SchemaComponentProvider>
-      </div>
-    );
-  };
-  const { getInterface } = useCollectionManager();
-  // 获取当前字段列表
-  const useCurrentFields = () => {
-    const record = useRecord();
-    const { getCollectionFields } = useCollectionManager();
-    const fields = getCollectionFields(record.collectionName || record.name) as any[];
-    return fields;
-  };
-  const handelOpenPorts = (isCollapse?) => {
-    targetGraph.getCellById(item.name)?.toFront();
-    setCollapse(isCollapse);
-    const collapseNodes = targetGraph.collapseNodes || [];
-    collapseNodes.push({
-      [item.name]: isCollapse,
-    });
-    targetGraph.collapseNodes = collapseNodes;
-    targetGraph.getCellById(item.name).setData({ collapse: true });
-  };
-  const isCollapse = collapse && data?.collapse;
-  return (
-    <div className="body">
-      {portsData['initPorts']?.map((property) => {
-        return (
-          property.uiSchema && (
-            <Popover
-              content={CollectionConten(property)}
-              getPopupContainer={getPopupContainer}
-              mouseLeaveDelay={0}
-              zIndex={100}
-              title={
-                <div>
-                  {compile(property.uiSchema?.title)}
-                  <span style={{ color: '#ffa940', float: 'right' }}>
-                    {compile(getInterface(property.interface)?.title)}
-                  </span>
-                </div>
-              }
-              key={property.id}
-              placement="right"
-            >
-              <div
-                className="body-item"
-                key={property.id}
-                id={property.id}
-                style={{
-                  background:
-                    targetPort || sourcePort === property.id || associated?.includes(property.name) ? '#e6f7ff' : null,
-                }}
-              >
-                <div className="name">
-                  <Badge color={typeColor(property)} />
-                  {compile(property.uiSchema?.title)}
-                </div>
-                <div className={`type  field_type`}>{compile(getInterface(property.interface)?.title)}</div>
-                <OperationButton property={property} />
-              </div>
-            </Popover>
-          )
-        );
-      })}
-      <div className="morePorts">
-        {isCollapse &&
-          portsData['morePorts']?.map((property) => {
-            return (
-              property.uiSchema && (
-                <Popover
-                  content={CollectionConten(property)}
-                  getPopupContainer={getPopupContainer}
-                  mouseLeaveDelay={0}
-                  zIndex={100}
-                  title={
-                    <div>
-                      {compile(property.uiSchema?.title)}
-                      <span style={{ color: '#ffa940', float: 'right' }}>
-                        {compile(getInterface(property.interface)?.title)}
-                      </span>
-                    </div>
-                  }
-                  key={property.id}
-                  placement="right"
-                >
-                  <div
-                    className="body-item"
-                    key={property.id}
-                    id={property.id}
-                    style={{
-                      background:
-                        targetPort || sourcePort === property.id || associated?.includes(property.name)
-                          ? '#e6f7ff'
-                          : null,
-                    }}
-                  >
-                    <div className="name">
-                      <Badge color="green" />
-                      {compile(property.uiSchema?.title)}
-                    </div>
-                    <div className={`type field_type`}>{compile(getInterface(property.interface)?.title)}</div>
-                    <OperationButton property={property} />
-                  </div>
-                </Popover>
-              )
-            );
-          })}
-      </div>
-      <a
-        className={css`
-          display: block;
-          color: #958f8f;
-          padding: 10px 5px;
-          &:hover {
-            color: rgb(99 90 88);
-          }
-        `}
-        onClick={() => handelOpenPorts(!isCollapse)}
-      >
-        {isCollapse
-          ? [
-              <UpOutlined style={{ margin: '0px 8px 0px 5px' }} key="icon" />,
-              <span key="associate">{t('Association Fields')}</span>,
-            ]
-          : [
-              <DownOutlined style={{ margin: '0px 8px 0px 5px' }} key="icon" />,
-              <span key="all">{t('All Fields')}</span>,
-            ]}
-      </a>
-    </div>
-  );
-});
-
-export default Entity;

package/src/client/components/FieldSummary.tsx

@@ -1,42 +0,0 @@
-import { observer } from '@formily/react';
-import { css, useCollectionManager, useCompile } from '@nocobase/client';
-import { Tag } from 'antd';
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-
-export const FieldSummary = observer(
-  (props: any) => {
-    const { schemaKey } = props;
-    const { getInterface } = useCollectionManager();
-    const compile = useCompile();
-    const { t } = useTranslation();
-    const schema = getInterface(schemaKey);
-
-    if (!schema) return null;
-
-    return (
-      <div
-        className={css`
-          background: #f6f6f6;
-          margin-bottom: 24px;
-          padding: 16px;
-        `}
-      >
-        <div className={css``}>
-          {t('Field interface')}: <Tag>{compile(schema.title)}</Tag>
-        </div>
-        {schema.description ? (
-          <div
-            className={css`
-              margin-top: 8px;
-              color: rgba(0, 0, 0, 0.45);
-            `}
-          >
-            {compile(schema.description)}
-          </div>
-        ) : null}
-      </div>
-    );
-  },
-  { displayName: 'FieldSummary' },
-);

package/src/client/components/OverrideFieldAction.tsx

@@ -1,30 +0,0 @@
-import { CopyOutlined } from '@ant-design/icons';
-import { OverridingFieldAction as OverridingCollectionFieldAction } from '@nocobase/client';
-import React from 'react';
-import { useCancelAction, useCreateAction } from '../action-hooks';
-import { getPopupContainer } from '../utils';
-
-const useOverridingCollectionField = (record) => {
-  const collectionName = record.targetCollection;
-  const { run } = useCreateAction(collectionName);
-  return {
-    async run() {
-      await run();
-    },
-  };
-};
-
-export const OverrideFieldAction = ({ item: record }) => {
-  return (
-    <OverridingCollectionFieldAction
-      item={{ ...record }}
-      scope={{
-        useCancelAction,
-        useOverridingCollectionField: () => useOverridingCollectionField(record),
-      }}
-      getContainer={getPopupContainer}
-    >
-      <CopyOutlined className="btn-override" />
-    </OverridingCollectionFieldAction>
-  );
-};

package/src/client/components/ViewFieldAction.tsx

@@ -1,12 +0,0 @@
-import { EyeOutlined } from '@ant-design/icons';
-import { ViewFieldAction as ViewCollectionFieldAction } from '@nocobase/client';
-import React from 'react';
-import { getPopupContainer } from '../utils';
-
-export const ViewFieldAction = ({ item: record }) => {
-  return (
-    <ViewCollectionFieldAction item={{ ...record }} getContainer={getPopupContainer}>
-      <EyeOutlined className="btn-view" />
-    </ViewCollectionFieldAction>
-  );
-};

package/src/client/components/ViewNode.tsx

@@ -1,22 +0,0 @@
-import { NodeView } from '@antv/x6';
-
-export class SimpleNodeView extends NodeView {
-  protected renderMarkup() {
-    return this.renderJSONMarkup({
-      tagName: 'rect',
-      selector: 'body',
-    });
-  }
-
-  update() {
-    const attrs = this.cell.getAttrs();
-    const fill = attrs.hightLight ? '#1890ff' : 'gray';
-    super.update({
-      body: {
-        refWidth: '50px',
-        refHeight: '100px',
-        fill: fill,
-      },
-    });
-  }
-}

package/src/client/index.tsx

@@ -1,10 +0,0 @@
-import { Plugin } from '@nocobase/client';
-import { GraphCollectionProvider } from './GraphCollectionProvider';
-
-export class GraphCollectionPlugin extends Plugin {
-  async load() {
-    this.app.use(GraphCollectionProvider);
-  }
-}
-
-export default GraphCollectionPlugin;

package/src/client/locale/index.ts

@@ -1,3 +0,0 @@
-// export { default as enUS } from './en-US';
-// export { default as zhCN } from './zh-CN';
-// export { default as jaJP } from './ja-JP';