mirrors/nocobase
1
0
Fork 0
mirror of https://github.com/nocobase/nocobase synced 2024-11-15 10:06:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: support for displaying relational table fields in details or form blocks (#635)

Browse Source 
* feat: m2o association field

* feat: add ReadPrettyForm support
This commit is contained in:
金昶 2022-07-15 11:31:09 +08:00 committed by GitHub
parent a521231a25
commit 9df35933d2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 54 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/core/client/src/schema-component/antd/form-item/FormItem.tsx
View File

@ -204,7 +204,7 @@ FormItem.Designer = (props) => {
}}
/>
)}
{validateSchema && (
{form && !form?.readPretty && validateSchema && (
<SchemaSettings.ModalItem
title={t('Set validation rules')}
components={{ ArrayCollapse, FormLayout }}
@ -371,7 +371,7 @@ FormItem.Designer = (props) => {
}}
/>
)}
{form && !form?.readPretty && collectionField?.interface !== 'o2m' && (
{form && !form?.readPretty && collectionField?.interface !== 'o2m' && fieldSchema?.['x-component-props']?.['pattern-disable'] != true && (
<SchemaSettings.SelectItem
key="pattern"
title={t('Pattern')}

33
packages/core/client/src/schema-component/antd/kanban/Kanban.Card.Designer.tsx
View File

@ -59,6 +59,23 @@ export const KanbanCardDesigner = (props: any) => {
const field = useField();
const fieldSchema = useFieldSchema();
const fields = useFormItemInitializerFields({ readPretty: true, block: 'Kanban' });
const associationFields = useAssociatedFormItemInitializerFields({readPretty: true, block: 'Kanban'});
const items: any = [{
type: 'itemGroup',
title: t('Display fields'),
children: fields,
}];
if (associationFields.length > 0) {
items.push({
type: 'divider',
}, {
type: 'itemGroup',
title: t('Display association fields'),
children: associationFields,
})
}
if (!designable) {
return null;
}
@ -87,21 +104,7 @@ export const KanbanCardDesigner = (props: any) => {
dn.loadAPIClientEvents();
dn.insertBeforeEnd(schema);
}}
items={[
{
type: 'itemGroup',
title: t('Display fields'),
children: fields,
},
{
type: 'divider',
},
{
type: 'itemGroup',
title: t('Display association fields'),
children: useAssociatedFormItemInitializerFields({readPretty: true, block: 'Kanban'}),
},
]}
items={items}
component={<MenuOutlined style={{ cursor: 'pointer', fontSize: 12 }} />}
/>
</Space>

20
packages/core/client/src/schema-initializer/buttons/FormItemInitializers.tsx
View File

@ -1,23 +1,33 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { SchemaInitializer } from '../SchemaInitializer';
import { gridRowColWrap, useFormItemInitializerFields } from '../utils';
import { gridRowColWrap, useAssociatedFormItemInitializerFields, useFormItemInitializerFields } from '../utils';
import { union } from 'lodash';
// 表单里配置字段
export const FormItemInitializers = (props: any) => {
const { t } = useTranslation();
const { insertPosition, component } = props;
const associationFields = useAssociatedFormItemInitializerFields({readPretty: true, block: 'Form'});
return (
<SchemaInitializer.Button
wrap={gridRowColWrap}
icon={'SettingOutlined'}
items={[
items={union([
{
type: 'itemGroup',
title: t('Display fields'),
children: useFormItemInitializerFields(),
},
{
}],
associationFields.length > 0 ? [{
type: 'divider',
}, {
type: 'itemGroup',
title: t('Display association fields'),
children: associationFields,
}] : [],
[{
type: 'divider',
},
{
@ -35,7 +45,7 @@ export const FormItemInitializers = (props: any) => {
},
},
},
]}
])}
insertPosition={insertPosition}
component={component}
title={component ? null : t('Configure fields')}

20
packages/core/client/src/schema-initializer/buttons/ReadPrettyFormItemInitializers.tsx
View File

@ -1,22 +1,32 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { SchemaInitializer } from '../SchemaInitializer';
import { gridRowColWrap, useFormItemInitializerFields } from '../utils';
import { gridRowColWrap, useAssociatedFormItemInitializerFields, useFormItemInitializerFields } from '../utils';
import { union } from 'lodash';
export const ReadPrettyFormItemInitializers = (props: any) => {
const { t } = useTranslation();
const { insertPosition, component } = props;
const associationFields = useAssociatedFormItemInitializerFields({readPretty: true, block: 'Form'});
return (
<SchemaInitializer.Button
wrap={gridRowColWrap}
icon={'SettingOutlined'}
items={[
items={union([
{
type: 'itemGroup',
title: t('Display fields'),
children: useFormItemInitializerFields(),
},
{
}],
associationFields.length > 0 ? [{
type: 'divider',
}, {
type: 'itemGroup',
title: t('Display association fields'),
children: associationFields,
}] : [],
[{
type: 'divider',
},
{
@ -34,7 +44,7 @@ export const ReadPrettyFormItemInitializers = (props: any) => {
},
},
},
]}
])}
insertPosition={insertPosition}
component={component}
title={component ? null : t('Configure fields')}

5
packages/core/client/src/schema-initializer/utils.ts
View File

@ -193,10 +193,11 @@ export const useAssociatedFormItemInitializerFields = (options?: any) => {
const { getInterface, getCollectionFields } = useCollectionManager();
const form = useForm();
const { readPretty = form.readPretty, block = 'Form' } = options || {};
const interfaces = block === 'Form' ? ['m2o'] : ['o2o', 'oho', 'obo', 'm2o']
const groups = fields
?.filter((field) => {
return ['o2o', 'oho', 'obo', 'm2o'].includes(field.interface);
return interfaces.includes(field.interface);
})
?.map((field) => {
const subFields = getCollectionFields(field.target);
@ -210,7 +211,9 @@ export const useAssociatedFormItemInitializerFields = (options?: any) => {
// title: subField?.uiSchema?.title || subField.name,
'x-designer': 'FormItem.Designer',
'x-component': 'CollectionField',
'x-read-pretty': readPretty,
'x-component-props': {
'pattern-disable': block === 'Form' && readPretty,
},
'x-decorator': 'FormItem',
'x-collection-field': `${name}.${field.name}.${subField.name}`,