import { DeleteOutlined, DownOutlined, EditOutlined, UpOutlined } from '@ant-design/icons';
import '@antv/x6-react-shape';
import { css, cx } from '@emotion/css';
import { uid } from '@formily/shared';
import {
Action,
Checkbox,
collection,
CollectionField,
CollectionProvider,
Form,
FormItem,
Formula,
Grid,
Input,
InputNumber,
Radio,
ResourceActionProvider,
SchemaComponent,
SchemaComponentProvider,
Select,
useCollectionManager,
useCompile,
useCurrentAppInfo,
useRecord,
CollectionCategroriesContext,
} from '@nocobase/client';
import { Badge, Dropdown, Popover, Tag } from 'antd';
import { groupBy } from 'lodash';
import React, { useRef, useState, useContext } from 'react';
import {
useAsyncDataSource,
useCancelAction,
useDestroyActionAndRefreshCM,
useDestroyFieldActionAndRefreshCM,
useUpdateCollectionActionAndRefreshCM,
useValuesFromRecord,
} from '../action-hooks';
import { collectiionPopoverClass, entityContainer, headClass, tableBtnClass, tableNameClass } from '../style';
import { 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 (
{category.map((v, index) => {
return (
);
})}
{compile(title)}
{
return document.getElementById('graph_container');
},
collectionConten: "{{t('Are you sure you want to delete it?')}}",
},
useAction: () => useDestroyActionAndRefreshCM({ name, id }),
},
},
},
}}
/>
);
};
const PortsCom = React.memo(({ 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 portsData = 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 (
name: {name}
type: {type}
{primaryKey && PRIMARY}
{allowNull && ALLOWNULL}
{autoIncrement && AUTOINCREMENT}
);
};
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 (
(
);
};
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 (
{portsData['initPorts']?.map((property) => {
return (
property.uiSchema && (
{
return document.getElementById('graph_container');
}}
mouseLeaveDelay={0}
zIndex={100}
title={
{compile(property.uiSchema?.title)}
{compile(getInterface(property.interface)?.title)}
}
key={property.id}
placement="right"
>
{compile(property.uiSchema?.title)}
{compile(getInterface(property.interface)?.title)}
)
);
})}
{isCollapse &&
portsData['morePorts']?.map((property) => {
return (
property.uiSchema && (
{
return document.getElementById('graph_container');
}}
mouseLeaveDelay={0}
zIndex={100}
title={
{compile(property.uiSchema?.title)}
{compile(getInterface(property.interface)?.title)}
}
key={property.id}
placement="right"
>
{compile(property.uiSchema?.title)}
{compile(getInterface(property.interface)?.title)}
)
);
})}
handelOpenPorts(!isCollapse)}
>
{isCollapse
? [
,
{t('Association Fields')},
]
: [
,
{t('All Fields')},
]}
);
});
export default Entity;