@nocobase/plugin-graph-collection-manager 0.10.1-alpha.1 → 0.11.0-alpha.1

package/src/client/components/Entity.tsx

@@ -0,0 +1,510 @@
+import { DeleteOutlined, DownOutlined, EditOutlined, UpOutlined } from '@ant-design/icons';
+import '@antv/x6-react-shape';
+import { uid } from '@formily/shared';
+import {
+  Action,
+  Checkbox,
+  collection,
+  CollectionCategroriesContext,
+  CollectionField,
+  CollectionProvider,
+  css,
+  cx,
+  Form,
+  FormItem,
+  Formula,
+  Grid,
+  Input,
+  InputNumber,
+  Radio,
+  ResourceActionProvider,
+  SchemaComponent,
+  SchemaComponentProvider,
+  Select,
+  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 { collectiionPopoverClass, entityContainer, headClass, tableBtnClass, tableNameClass } 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 { 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={cx(entityContainer)}
+      style={{ boxShadow: attrs?.boxShadow, border: select ? '2px dashed #f5a20a' : 0 }}
+    >
+      {category.map((v, index) => {
+        return (
+          <Badge.Ribbon
+            color={v.color}
+            style={{ width: '103%', height: '3px', marginTop: index * 5 - 8, borderRadius: 0 }}
+            placement="start"
+          />
+        );
+      })}
+      <div
+        className={headClass}
+        style={{ background: attrs?.hightLight ? '#1890ff' : null, paddingTop: category.length * 3 }}
+      >
+        <span className={tableNameClass}>{compile(title)}</span>
+
+        <div className={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,
+                        },
+                      },
+                      delete: {
+                        type: 'void',
+                        'x-action': 'destroy',
+                        'x-component': 'Action',
+                        'x-component-props': {
+                          component: DeleteOutlined,
+                          icon: 'DeleteOutlined',
+                          className: css`
+                            background-color: rgb(255 236 232);
+                            border-color: transparent;
+                            color: #e31c1c;
+                            height: 20px;
+                            padding: 5px;
+                            &:hover {
+                              background-color: rgb(253 205 197);
+                            }
+                          `,
+
+                          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 { type, name, primaryKey, allowNull, autoIncrement } = data;
+    return (
+      <div className={cx(collectiionPopoverClass)}>
+        <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: css`
+                        background-color: rgb(255 236 232);
+                        border-color: transparent;
+                        color: #e31c1c;
+                        height: 20px;
+                        width: 20px;
+                        padding: 5px;
+                        &:hover {
+                          background-color: rgb(253 205 197);
+                        }
+                      `,
+                      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

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,10 @@
+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/en-US.ts

@@ -0,0 +1,15 @@
+export default {
+  'Graph Collection': 'Graph Collection',
+  'Collection List': 'Collection List',
+  'Full Screen': 'Full Screen',
+  'Collection Search': 'Collection Search',
+  'Create Collection': 'Create Collection',
+  'All Fields': 'All Fields',
+  'Association Fields': 'Association Fields',
+  'Choices fields': 'Choices fields',
+  'All relationships': 'All relationships',
+  'Entity relationship only': 'Entity relationship only',
+  'Inheritance relationship only': 'Inheritance relationship only',
+  'Graphical interface': 'Graphical interface',
+  Selection: 'Selection',
+};

package/src/client/locale/es-ES.ts

@@ -0,0 +1,15 @@
+export default {
+  "Graph Collection": "Colección de gráficos",
+  "Collection List": "Lista de colecciones",
+  "Full Screen": "Vista completa",
+  "Collection Search": "Búsqueda de colecciones",
+  "Create Collection": "Crear colección",
+  "All Fields": "Todos los campos",
+  "Association Fields": "Campos de asociación",
+  "Optional fields": "Campos opcionales",
+  "All relationships": "Todas las relaciones",
+  "Entity relationship only": "Sólo relaciones de entidad",
+  "Inheritance relationship only": "Sólo relaciones de herencia",
+  "Graphical interface": "Interfaz gráfica",
+  "Selection": "Selección"
+};

package/src/client/locale/index.ts

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

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

@@ -0,0 +1,13 @@
+export default {
+  'Graph Collection': 'グラフ化データテーブル',
+  'Collection List': 'データテーブルリスト',
+  'Full Screen': 'フルスクリーン',
+  'Collection Search': '表フィルタ',
+  'Create Collection': 'データテーブルの作成',
+  'All Fields': 'すべて',
+  'Associations Fields': '関係フィールド',
+  'All relationships': 'すべての関係',
+  'Entity relationship only': 'エンティティ関係',
+  'Inheritance relationship only': '継承関係',
+  Selection: 'せんたく',
+};