mirror of
https://github.com/nocobase/nocobase
synced 2024-11-15 05:46:00 +00:00
fix(Picker): should display Allow add new data option (#3957)
This commit is contained in:
Zeke Zhang
GitHub
parent
d75db22777
commit
286ddb6b38
@ -1,5 +1,5 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import { ISchema } from '@formily/json-schema';
|
||||
import React, { useMemo } from 'react';
|
||||
import { useComponent, useDesignable } from '../../../schema-component';
|
||||
import { SchemaToolbar, SchemaToolbarProps } from '../../../schema-settings/GeneralSchemaDesigner';
|
||||
|
||||
|
||||
@ -0,0 +1,17 @@
|
||||
import { expectSettingsMenu, test } from '@nocobase/test/e2e';
|
||||
import { oneFormWithPickerField } from './templatesOfBug';
|
||||
|
||||
test.describe('SchemaSettings of Picker', () => {
|
||||
test('supports options', async ({ page, mockPage }) => {
|
||||
await mockPage(oneFormWithPickerField).goto();
|
||||
|
||||
await expectSettingsMenu({
|
||||
page,
|
||||
showMenu: async () => {
|
||||
await page.getByLabel('block-item-CollectionField-').hover();
|
||||
await page.getByLabel('designer-schema-settings-CollectionField-fieldSettings:FormItem-users-users.').hover();
|
||||
},
|
||||
supportedOptions: ['Popup size', 'Allow add new data', 'Title field', 'Allow multiple', 'Field component'],
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,242 @@
|
||||
import { PageConfig } from '@nocobase/test/e2e';
|
||||
|
||||
export const oneFormWithPickerField: PageConfig = {
|
||||
pageSchema: {
|
||||
_isJSONSchemaObject: true,
|
||||
version: '2.0',
|
||||
type: 'void',
|
||||
'x-component': 'Page',
|
||||
'x-app-version': '0.21.0-alpha.5',
|
||||
properties: {
|
||||
g31hdrdqs8h: {
|
||||
_isJSONSchemaObject: true,
|
||||
version: '2.0',
|
||||
type: 'void',
|
||||
'x-component': 'Grid',
|
||||
'x-initializer': 'page:addBlock',
|
||||
'x-app-version': '0.21.0-alpha.5',
|
||||
properties: {
|
||||
row_iz2b4igru45: {
|
||||
_isJSONSchemaObject: true,
|
||||
version: '2.0',
|
||||
type: 'void',
|
||||
'x-component': 'Grid.Row',
|
||||
'x-index': 3,
|
||||
'x-uid': '617eufdvnh6',
|
||||
'x-async': false,
|
||||
},
|
||||
row_a5ts27jsr0r: {
|
||||
_isJSONSchemaObject: true,
|
||||
version: '2.0',
|
||||
type: 'void',
|
||||
'x-component': 'Grid.Row',
|
||||
'x-index': 5,
|
||||
'x-uid': '5y6xse8lly4',
|
||||
'x-async': false,
|
||||
},
|
||||
row_7kgysy6ebmv: {
|
||||
_isJSONSchemaObject: true,
|
||||
version: '2.0',
|
||||
type: 'void',
|
||||
'x-component': 'Grid.Row',
|
||||
'x-index': 7,
|
||||
'x-uid': 'xinsxfgxn6w',
|
||||
'x-async': false,
|
||||
},
|
||||
row_8up6dvn9s9x: {
|
||||
_isJSONSchemaObject: true,
|
||||
version: '2.0',
|
||||
type: 'void',
|
||||
'x-component': 'Grid.Row',
|
||||
'x-index': 8,
|
||||
properties: {
|
||||
srvh9gyv314: {
|
||||
_isJSONSchemaObject: true,
|
||||
version: '2.0',
|
||||
type: 'void',
|
||||
'x-component': 'Grid.Col',
|
||||
'x-uid': 'cmfgvfgiu5c',
|
||||
'x-async': false,
|
||||
'x-index': 1,
|
||||
},
|
||||
},
|
||||
'x-uid': 'xqhlz9kb9cn',
|
||||
'x-async': false,
|
||||
},
|
||||
ellejr0qqmk: {
|
||||
_isJSONSchemaObject: true,
|
||||
version: '2.0',
|
||||
type: 'void',
|
||||
'x-component': 'Grid.Row',
|
||||
'x-app-version': '0.21.0-alpha.5',
|
||||
'x-uid': '332sv3qoo02',
|
||||
'x-async': false,
|
||||
'x-index': 9,
|
||||
},
|
||||
iikykifub90: {
|
||||
_isJSONSchemaObject: true,
|
||||
version: '2.0',
|
||||
type: 'void',
|
||||
'x-component': 'Grid.Row',
|
||||
'x-app-version': '0.21.0-alpha.5',
|
||||
'x-uid': 'kwwfi3g1s9c',
|
||||
'x-async': false,
|
||||
'x-index': 10,
|
||||
},
|
||||
eocpt7rr5nf: {
|
||||
_isJSONSchemaObject: true,
|
||||
version: '2.0',
|
||||
type: 'void',
|
||||
'x-component': 'Grid.Row',
|
||||
'x-app-version': '0.21.0-alpha.5',
|
||||
'x-uid': 'n8inyj1o337',
|
||||
'x-async': false,
|
||||
'x-index': 11,
|
||||
},
|
||||
'00va5gmpktn': {
|
||||
_isJSONSchemaObject: true,
|
||||
version: '2.0',
|
||||
type: 'void',
|
||||
'x-component': 'Grid.Row',
|
||||
'x-app-version': '0.21.0-alpha.5',
|
||||
properties: {
|
||||
uhw2kshmg5n: {
|
||||
_isJSONSchemaObject: true,
|
||||
version: '2.0',
|
||||
type: 'void',
|
||||
'x-component': 'Grid.Col',
|
||||
'x-app-version': '0.21.0-alpha.5',
|
||||
properties: {
|
||||
n3o7bqxxmdp: {
|
||||
_isJSONSchemaObject: true,
|
||||
version: '2.0',
|
||||
type: 'void',
|
||||
'x-acl-action-props': {
|
||||
skipScopeCheck: true,
|
||||
},
|
||||
'x-acl-action': 'users:create',
|
||||
'x-decorator': 'FormBlockProvider',
|
||||
'x-use-decorator-props': 'useCreateFormBlockDecoratorProps',
|
||||
'x-decorator-props': {
|
||||
dataSource: 'main',
|
||||
collection: 'users',
|
||||
},
|
||||
'x-toolbar': 'BlockSchemaToolbar',
|
||||
'x-settings': 'blockSettings:createForm',
|
||||
'x-component': 'CardItem',
|
||||
'x-app-version': '0.21.0-alpha.5',
|
||||
properties: {
|
||||
ab6zxnga5yh: {
|
||||
_isJSONSchemaObject: true,
|
||||
version: '2.0',
|
||||
type: 'void',
|
||||
'x-component': 'FormV2',
|
||||
'x-use-component-props': 'useCreateFormBlockProps',
|
||||
'x-app-version': '0.21.0-alpha.5',
|
||||
properties: {
|
||||
grid: {
|
||||
_isJSONSchemaObject: true,
|
||||
version: '2.0',
|
||||
type: 'void',
|
||||
'x-component': 'Grid',
|
||||
'x-initializer': 'form:configureFields',
|
||||
'x-app-version': '0.21.0-alpha.5',
|
||||
properties: {
|
||||
fv88xejydf7: {
|
||||
_isJSONSchemaObject: true,
|
||||
version: '2.0',
|
||||
type: 'void',
|
||||
'x-component': 'Grid.Row',
|
||||
'x-app-version': '0.21.0-alpha.5',
|
||||
properties: {
|
||||
kgc72n2dnjs: {
|
||||
_isJSONSchemaObject: true,
|
||||
version: '2.0',
|
||||
type: 'void',
|
||||
'x-component': 'Grid.Col',
|
||||
'x-app-version': '0.21.0-alpha.5',
|
||||
properties: {
|
||||
roles: {
|
||||
'x-uid': 'xh41kv06w9h',
|
||||
_isJSONSchemaObject: true,
|
||||
version: '2.0',
|
||||
type: 'string',
|
||||
'x-toolbar': 'FormItemSchemaToolbar',
|
||||
'x-settings': 'fieldSettings:FormItem',
|
||||
'x-component': 'CollectionField',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-collection-field': 'users.roles',
|
||||
'x-component-props': {
|
||||
fieldNames: {
|
||||
label: 'name',
|
||||
value: 'name',
|
||||
},
|
||||
mode: 'Picker',
|
||||
},
|
||||
'x-app-version': '0.21.0-alpha.5',
|
||||
'x-async': false,
|
||||
'x-index': 1,
|
||||
},
|
||||
},
|
||||
'x-uid': 'j9i44yv2zv0',
|
||||
'x-async': false,
|
||||
'x-index': 1,
|
||||
},
|
||||
},
|
||||
'x-uid': 'prexj7926ya',
|
||||
'x-async': false,
|
||||
'x-index': 1,
|
||||
},
|
||||
},
|
||||
'x-uid': 'emwe7dhqqxc',
|
||||
'x-async': false,
|
||||
'x-index': 1,
|
||||
},
|
||||
ypc6lolh1t5: {
|
||||
_isJSONSchemaObject: true,
|
||||
version: '2.0',
|
||||
type: 'void',
|
||||
'x-initializer': 'createForm:configureActions',
|
||||
'x-component': 'ActionBar',
|
||||
'x-component-props': {
|
||||
layout: 'one-column',
|
||||
style: {
|
||||
marginTop: 24,
|
||||
},
|
||||
},
|
||||
'x-app-version': '0.21.0-alpha.5',
|
||||
'x-uid': 'hurfo4v8c9d',
|
||||
'x-async': false,
|
||||
'x-index': 2,
|
||||
},
|
||||
},
|
||||
'x-uid': 'rs8dkg2723x',
|
||||
'x-async': false,
|
||||
'x-index': 1,
|
||||
},
|
||||
},
|
||||
'x-uid': 't03by8fpct5',
|
||||
'x-async': false,
|
||||
'x-index': 1,
|
||||
},
|
||||
},
|
||||
'x-uid': 'bempwzkuh75',
|
||||
'x-async': false,
|
||||
'x-index': 1,
|
||||
},
|
||||
},
|
||||
'x-uid': '6dl0rbnvxxx',
|
||||
'x-async': false,
|
||||
'x-index': 12,
|
||||
},
|
||||
},
|
||||
'x-uid': 'gvzvz05oi9h',
|
||||
'x-async': false,
|
||||
'x-index': 1,
|
||||
},
|
||||
},
|
||||
'x-uid': 'mk589w74bvs',
|
||||
'x-async': true,
|
||||
'x-index': 1,
|
||||
},
|
||||
};
|
||||
@ -3,14 +3,15 @@ import { useField, useFieldSchema } from '@formily/react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { SchemaSettings } from '../../../../application/schema-settings/SchemaSettings';
|
||||
import { useFieldComponentName } from '../../../../common/useFieldComponentName';
|
||||
import { useCollectionField } from '../../../../data-source';
|
||||
import { useDesignable, useFieldModeOptions, useIsAddNewForm } from '../../../../schema-component';
|
||||
import { isSubMode } from '../../../../schema-component/antd/association-field/util';
|
||||
import {
|
||||
allowAddNew,
|
||||
useIsFieldReadPretty,
|
||||
useTitleFieldOptions,
|
||||
} from '../../../../schema-component/antd/form-item/FormItem.Settings';
|
||||
import { useColumnSchema } from '../../../../schema-component/antd/table-v2/Table.Column.Decorator';
|
||||
import { useCollectionField } from '../../../../data-source';
|
||||
|
||||
export const titleField: any = {
|
||||
name: 'titleField',
|
||||
@ -179,6 +180,7 @@ export const recordPickerComponentFieldSettings = new SchemaSettings({
|
||||
};
|
||||
},
|
||||
},
|
||||
allowAddNew,
|
||||
allowMultiple,
|
||||
titleField,
|
||||
],
|
||||
|
||||
@ -4,25 +4,26 @@ import { ISchema, useField, useFieldSchema } from '@formily/react';
|
||||
import _ from 'lodash';
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { SchemaSettings } from '../../../application/schema-settings';
|
||||
import { SchemaSettings, SchemaSettingsItemType } from '../../../application/schema-settings';
|
||||
import { useFormBlockContext } from '../../../block-provider/FormBlockProvider';
|
||||
import {
|
||||
Collection_deprecated,
|
||||
useCollection_deprecated,
|
||||
useCollectionField_deprecated,
|
||||
useCollectionManager_deprecated,
|
||||
useCollection_deprecated,
|
||||
} from '../../../collection-manager';
|
||||
import { useRecord } from '../../../record-provider';
|
||||
import { useColumnSchema } from '../../../schema-component/antd/table-v2/Table.Column.Decorator';
|
||||
import { generalSettingsItems } from '../../../schema-items/GeneralSettings';
|
||||
import { isPatternDisabled } from '../../../schema-settings/isPatternDisabled';
|
||||
import { SchemaSettingsSortingRule } from '../../../schema-settings/SchemaSettingsSortingRule';
|
||||
import { SchemaSettingsDateFormat } from '../../../schema-settings/SchemaSettingsDateFormat';
|
||||
import { SchemaSettingsDataScope } from '../../../schema-settings/SchemaSettingsDataScope';
|
||||
import { SchemaSettingsDefaultValue } from '../../../schema-settings/SchemaSettingsDefaultValue';
|
||||
import { ActionType } from '../../../schema-settings/LinkageRules/type';
|
||||
import { SchemaSettingsDataScope } from '../../../schema-settings/SchemaSettingsDataScope';
|
||||
import { SchemaSettingsDateFormat } from '../../../schema-settings/SchemaSettingsDateFormat';
|
||||
import { SchemaSettingsDefaultValue } from '../../../schema-settings/SchemaSettingsDefaultValue';
|
||||
import { SchemaSettingsSortingRule } from '../../../schema-settings/SchemaSettingsSortingRule';
|
||||
import { VariableInput, getShouldChange } from '../../../schema-settings/VariableInput/VariableInput';
|
||||
import { useIsAllowToSetDefaultValue } from '../../../schema-settings/hooks/useIsAllowToSetDefaultValue';
|
||||
import { useIsShowMultipleSwitch } from '../../../schema-settings/hooks/useIsShowMultipleSwitch';
|
||||
import { isPatternDisabled } from '../../../schema-settings/isPatternDisabled';
|
||||
import { useLocalVariables, useVariables } from '../../../variables';
|
||||
import { useCompile, useDesignable, useFieldModeOptions } from '../../hooks';
|
||||
import { isSubMode } from '../association-field/util';
|
||||
@ -30,7 +31,67 @@ import { removeNullCondition } from '../filter';
|
||||
import { DynamicComponentProps } from '../filter/DynamicComponent';
|
||||
import { getTempFieldState } from '../form-v2/utils';
|
||||
import { useColorFields } from '../table-v2/Table.Column.Designer';
|
||||
import { useColumnSchema } from '../../../schema-component/antd/table-v2/Table.Column.Decorator';
|
||||
|
||||
export const allowAddNew: SchemaSettingsItemType = {
|
||||
name: 'allowAddNew',
|
||||
type: 'switch',
|
||||
useVisible() {
|
||||
const readPretty = useIsFieldReadPretty();
|
||||
const isAssociationField = useIsAssociationField();
|
||||
const fieldMode = useFieldMode();
|
||||
return !readPretty && isAssociationField && ['Picker'].includes(fieldMode);
|
||||
},
|
||||
useComponentProps() {
|
||||
const { t } = useTranslation();
|
||||
const field = useField<Field>();
|
||||
const fieldSchema = useFieldSchema();
|
||||
const { dn, refresh, insertAdjacent } = useDesignable();
|
||||
return {
|
||||
title: t('Allow add new data'),
|
||||
checked: fieldSchema['x-add-new'] as boolean,
|
||||
onChange(allowAddNew) {
|
||||
const hasAddNew = fieldSchema.reduceProperties((buf, schema) => {
|
||||
if (schema['x-component'] === 'Action') {
|
||||
return schema;
|
||||
}
|
||||
return buf;
|
||||
}, null);
|
||||
|
||||
if (!hasAddNew) {
|
||||
const addNewActionSchema = {
|
||||
'x-action': 'create',
|
||||
'x-acl-action': 'create',
|
||||
title: "{{t('Add new')}}",
|
||||
// 'x-designer': 'Action.Designer',
|
||||
'x-toolbar': 'ActionSchemaToolbar',
|
||||
'x-toolbar-props': {
|
||||
draggable: false,
|
||||
},
|
||||
'x-settings': 'actionSettings:addNew',
|
||||
'x-component': 'Action',
|
||||
'x-decorator': 'ACLActionProvider',
|
||||
'x-component-props': {
|
||||
openMode: 'drawer',
|
||||
type: 'default',
|
||||
component: 'CreateRecordAction',
|
||||
},
|
||||
};
|
||||
insertAdjacent('afterBegin', addNewActionSchema);
|
||||
}
|
||||
const schema = {
|
||||
['x-uid']: fieldSchema['x-uid'],
|
||||
};
|
||||
field['x-add-new'] = allowAddNew;
|
||||
fieldSchema['x-add-new'] = allowAddNew;
|
||||
schema['x-add-new'] = allowAddNew;
|
||||
dn.emit('patch', {
|
||||
schema,
|
||||
});
|
||||
refresh();
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* @deprecated
|
||||
@ -456,63 +517,7 @@ export const formItemSettings = new SchemaSettings({
|
||||
return showModeSelect;
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'allowAddNew',
|
||||
type: 'switch',
|
||||
useVisible() {
|
||||
const readPretty = useIsFieldReadPretty();
|
||||
const isAssociationField = useIsAssociationField();
|
||||
const fieldMode = useFieldMode();
|
||||
return !readPretty && isAssociationField && ['Picker'].includes(fieldMode);
|
||||
},
|
||||
useComponentProps() {
|
||||
const { t } = useTranslation();
|
||||
const field = useField<Field>();
|
||||
const fieldSchema = useFieldSchema();
|
||||
const { dn, refresh, insertAdjacent } = useDesignable();
|
||||
return {
|
||||
title: t('Allow add new data'),
|
||||
checked: fieldSchema['x-add-new'] as boolean,
|
||||
onChange(allowAddNew) {
|
||||
const hasAddNew = fieldSchema.reduceProperties((buf, schema) => {
|
||||
if (schema['x-component'] === 'Action') {
|
||||
return schema;
|
||||
}
|
||||
return buf;
|
||||
}, null);
|
||||
|
||||
if (!hasAddNew) {
|
||||
const addNewActionschema = {
|
||||
'x-action': 'create',
|
||||
'x-acl-action': 'create',
|
||||
title: "{{t('Add new')}}",
|
||||
// 'x-designer': 'Action.Designer',
|
||||
'x-toolbar': 'ActionSchemaToolbar',
|
||||
'x-settings': 'actonSettings:addNew',
|
||||
'x-component': 'Action',
|
||||
'x-decorator': 'ACLActionProvider',
|
||||
'x-component-props': {
|
||||
openMode: 'drawer',
|
||||
type: 'default',
|
||||
component: 'CreateRecordAction',
|
||||
},
|
||||
};
|
||||
insertAdjacent('afterBegin', addNewActionschema);
|
||||
}
|
||||
const schema = {
|
||||
['x-uid']: fieldSchema['x-uid'],
|
||||
};
|
||||
field['x-add-new'] = allowAddNew;
|
||||
fieldSchema['x-add-new'] = allowAddNew;
|
||||
schema['x-add-new'] = allowAddNew;
|
||||
dn.emit('patch', {
|
||||
schema,
|
||||
});
|
||||
refresh();
|
||||
},
|
||||
};
|
||||
},
|
||||
},
|
||||
allowAddNew,
|
||||
{
|
||||
name: 'addMode',
|
||||
type: 'select',
|
||||
@ -551,7 +556,7 @@ export const formItemSettings = new SchemaSettings({
|
||||
title: "{{t('Add new')}}",
|
||||
// 'x-designer': 'Action.Designer',
|
||||
'x-toolbar': 'ActionSchemaToolbar',
|
||||
'x-settings': 'actonSettings:addNew',
|
||||
'x-settings': 'actionSettings:addNew',
|
||||
'x-component': 'Action',
|
||||
'x-decorator': 'ACLActionProvider',
|
||||
'x-component-props': {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user