ruiling/tachybase_todo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(client): improve collection-manager module

Browse Source
This commit is contained in:
chenos 2022-02-18 20:30:27 +08:00
parent 77d9228ea2
commit 702c391bc2
8 changed files with 170 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/client/src/collection-manager/CollectionManagerProvider.tsx
View File

@ -32,7 +32,7 @@ export const RemoteCollectionManagerProvider = (props: any) => {
resource: 'collections', resource: 'collections',
action: 'list', action: 'list',
params: { params: {
perPage: 999, pageSize: 999,
appends: ['fields', 'fields.uiSchema'], appends: ['fields', 'fields.uiSchema'],
}, },
}; };

49
packages/client/src/collection-manager/Configuration/AddFieldAction.tsx
View File

@ -3,13 +3,11 @@ import { ISchema } from '@formily/react';
import { uid } from '@formily/shared'; import { uid } from '@formily/shared';
import { Button, Dropdown, Menu } from 'antd'; import { Button, Dropdown, Menu } from 'antd';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useAPIClient } from '../../api-client';
import { useRecord } from '../../record-provider';
import { ActionContext, SchemaComponent } from '../../schema-component'; import { ActionContext, SchemaComponent } from '../../schema-component';
import { useCollectionManager } from '../hooks'; import { useCollectionManager } from '../hooks';
import { IField } from '../interfaces/types'; import { IField } from '../interfaces/types';
const getSchema = (schema: IField, useAction): ISchema => { const getSchema = (schema: IField): ISchema => {
if (!schema) { if (!schema) {
return; return;
} }
@ -26,7 +24,7 @@ const getSchema = (schema: IField, useAction): ISchema => {
name: `f_${uid()}`, name: `f_${uid()}`,
}, },
}, },
title: 'Drawer Title', title: '{{ t("Add field") }}',
properties: { properties: {
type: { type: {
'x-component': 'CollectionField', 'x-component': 'CollectionField',
@ -34,7 +32,8 @@ const getSchema = (schema: IField, useAction): ISchema => {
}, },
'uiSchema.title': { 'uiSchema.title': {
type: 'number', type: 'number',
title: '字段名称', title: '{{ t("Field display name") }}',
required: true,
'x-component': 'Input', 'x-component': 'Input',
'x-decorator': 'FormItem', 'x-decorator': 'FormItem',
}, },
@ -49,18 +48,18 @@ const getSchema = (schema: IField, useAction): ISchema => {
'x-component': 'Action.Drawer.Footer', 'x-component': 'Action.Drawer.Footer',
properties: { properties: {
action1: { action1: {
title: 'Cancel', title: '{{ t("Cancel") }}',
'x-component': 'Action', 'x-component': 'Action',
'x-component-props': { 'x-component-props': {
useAction: '{{ useCancelAction }}', useAction: '{{ useCancelAction }}',
}, },
}, },
action2: { action2: {
title: 'Submit', title: '{{ t("Submit") }}',
'x-component': 'Action', 'x-component': 'Action',
'x-component-props': { 'x-component-props': {
type: 'primary', type: 'primary',
useAction, useAction: '{{ useCreateActionAndRefreshCM }}',
}, },
}, },
}, },
@ -81,7 +80,7 @@ export const AddFieldAction = () => {
overlay={ overlay={
<Menu <Menu
onClick={(info) => { onClick={(info) => {
const schema = getSchema(getInterface(info.key), '{{ useCreateActionAndRefreshCM }}'); const schema = getSchema(getInterface(info.key));
setSchema(schema); setSchema(schema);
setVisible(true); setVisible(true);
}} }}
@ -102,35 +101,3 @@ export const AddFieldAction = () => {
</ActionContext.Provider> </ActionContext.Provider>
); );
}; };
export const EditFieldAction = (props) => {
const record = useRecord();
const { getInterface } = useCollectionManager();
const [visible, setVisible] = useState(false);
const [schema, setSchema] = useState({});
const api = useAPIClient();
return (
<ActionContext.Provider value={{ visible, setVisible }}>
<a
onClick={async () => {
const { data } = await api.resource('collections.fields', record.collectionName).get({
filterByTk: record.name,
appends: ['uiSchema'],
});
const schema = getSchema(
{
...getInterface(record.interface),
default: data?.data,
},
'{{ useUpdateActionAndRefreshCM }}',
);
setSchema(schema);
setVisible(true);
}}
>
编辑
</a>
<SchemaComponent schema={schema} />
</ActionContext.Provider>
);
};

103
packages/client/src/collection-manager/Configuration/EditFieldAction.tsx Normal file
View File

@ -0,0 +1,103 @@
import { ISchema } from '@formily/react';
import { uid } from '@formily/shared';
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useAPIClient } from '../../api-client';
import { useRecord } from '../../record-provider';
import { ActionContext, SchemaComponent } from '../../schema-component';
import { useCollectionManager } from '../hooks';
import { IField } from '../interfaces/types';
const getSchema = (schema: IField): ISchema => {
if (!schema) {
return;
}
return {
type: 'object',
properties: {
[uid()]: {
type: 'void',
'x-component': 'Action.Drawer',
'x-decorator': 'Form',
'x-decorator-props': {
initialValue: {
...schema.default,
name: `f_${uid()}`,
},
},
title: '{{ t("Edit field") }}',
properties: {
type: {
'x-component': 'CollectionField',
'x-decorator': 'FormItem',
},
'uiSchema.title': {
type: 'number',
title: '{{ t("Field display name") }}',
required: true,
'x-component': 'Input',
'x-decorator': 'FormItem',
},
name: {
'x-component': 'CollectionField',
'x-decorator': 'FormItem',
'x-disabled': true,
},
// @ts-ignore
...schema.properties,
footer: {
type: 'void',
'x-component': 'Action.Drawer.Footer',
properties: {
action1: {
title: '{{ t("Cancel") }}',
'x-component': 'Action',
'x-component-props': {
useAction: '{{ useCancelAction }}',
},
},
action2: {
title: '{{ t("Submit") }}',
'x-component': 'Action',
'x-component-props': {
type: 'primary',
useAction: '{{ useUpdateActionAndRefreshCM }}',
},
},
},
},
},
},
},
};
};
export const EditFieldAction = (props) => {
const record = useRecord();
const { getInterface } = useCollectionManager();
const [visible, setVisible] = useState(false);
const [schema, setSchema] = useState({});
const api = useAPIClient();
const { t } = useTranslation();
return (
<ActionContext.Provider value={{ visible, setVisible }}>
<a
onClick={async () => {
const { data } = await api.resource('collections.fields', record.collectionName).get({
filterByTk: record.name,
appends: ['uiSchema'],
});
const schema = getSchema({
...getInterface(record.interface),
default: data?.data,
});
setSchema(schema);
setVisible(true);
}}
>
{t('Edit')}
</a>
<SchemaComponent schema={schema} />
</ActionContext.Provider>
);
};

1
packages/client/src/collection-manager/Configuration/index.tsx
View File

@ -1,3 +1,4 @@
export * from './AddFieldAction'; export * from './AddFieldAction';
export * from './ConfigurationTable'; export * from './ConfigurationTable';
export * from './EditFieldAction';

39
packages/client/src/collection-manager/Configuration/schemas/collectionFields.ts
View File

@ -1,6 +1,7 @@
import { ISchema } from '@formily/react'; import { ISchema } from '@formily/react';
import { CollectionOptions } from '../../types';
const collection = { const collection: CollectionOptions = {
name: 'fields', name: 'fields',
fields: [ fields: [
{ {
@ -8,7 +9,7 @@ const collection = {
name: 'type', name: 'type',
interface: 'input', interface: 'input',
uiSchema: { uiSchema: {
title: '存储类型', title: '{{ t("Storage type") }}',
type: 'string', type: 'string',
'x-component': 'Select', 'x-component': 'Select',
enum: [ enum: [
@ -18,14 +19,14 @@ const collection = {
}, },
], ],
required: true, required: true,
} as ISchema, },
}, },
{ {
type: 'string', type: 'string',
name: 'interface', name: 'interface',
interface: 'input', interface: 'input',
uiSchema: { uiSchema: {
title: '字段类型', title: '{{ t("Field interface") }}',
type: 'string', type: 'string',
'x-component': 'Input', 'x-component': 'Input',
}, },
@ -35,22 +36,21 @@ const collection = {
name: 'title', name: 'title',
interface: 'input', interface: 'input',
uiSchema: { uiSchema: {
title: '字段名称', title: '{{ t("Field display name") }}',
type: 'string', type: 'string',
'x-component': 'Input', 'x-component': 'Input',
required: true, required: true,
} as ISchema, },
}, },
{ {
type: 'string', type: 'string',
name: 'name', name: 'name',
interface: 'input', interface: 'input',
uiSchema: { uiSchema: {
title: '字段标识', title: '{{ t("Field name") }}',
type: 'string', type: 'string',
'x-component': 'Input', 'x-component': 'Input',
description: '使用英文', },
} as ISchema,
}, },
], ],
}; };
@ -69,7 +69,7 @@ export const collectionFieldSchema: ISchema = {
resource: 'collections.fields', resource: 'collections.fields',
action: 'list', action: 'list',
params: { params: {
pageSize: 5, pageSize: 50,
filter: {}, filter: {},
sort: ['sort'], sort: ['sort'],
appends: ['uiSchema'], appends: ['uiSchema'],
@ -84,15 +84,20 @@ export const collectionFieldSchema: ISchema = {
actions: { actions: {
type: 'void', type: 'void',
'x-component': 'ActionBar', 'x-component': 'ActionBar',
'x-component-props': {
style: {
marginBottom: 16,
},
},
properties: { properties: {
delete: { delete: {
type: 'void', type: 'void',
title: '删除', title: '{{ t("Delete") }}',
'x-component': 'Action', 'x-component': 'Action',
}, },
create: { create: {
type: 'void', type: 'void',
title: '创建', title: '{{ t("Add new") }}',
'x-component': 'AddFieldAction', 'x-component': 'AddFieldAction',
'x-component-props': { 'x-component-props': {
type: 'primary', type: 'primary',
@ -114,7 +119,7 @@ export const collectionFieldSchema: ISchema = {
properties: { properties: {
column1: { column1: {
type: 'void', type: 'void',
title: '字段名称', title: '{{ t("Field display name") }}',
'x-component': 'VoidTable.Column', 'x-component': 'VoidTable.Column',
properties: { properties: {
'uiSchema.title': { 'uiSchema.title': {
@ -130,7 +135,6 @@ export const collectionFieldSchema: ISchema = {
'x-component': 'VoidTable.Column', 'x-component': 'VoidTable.Column',
properties: { properties: {
name: { name: {
type: 'string',
'x-component': 'CollectionField', 'x-component': 'CollectionField',
'x-read-pretty': true, 'x-read-pretty': true,
}, },
@ -142,7 +146,6 @@ export const collectionFieldSchema: ISchema = {
'x-component': 'VoidTable.Column', 'x-component': 'VoidTable.Column',
properties: { properties: {
interface: { interface: {
type: 'string',
'x-component': 'CollectionField', 'x-component': 'CollectionField',
'x-read-pretty': true, 'x-read-pretty': true,
}, },
@ -150,7 +153,7 @@ export const collectionFieldSchema: ISchema = {
}, },
column4: { column4: {
type: 'void', type: 'void',
title: 'Actions', title: '{{ t("Actions") }}',
'x-component': 'VoidTable.Column', 'x-component': 'VoidTable.Column',
properties: { properties: {
actions: { actions: {
@ -162,7 +165,7 @@ export const collectionFieldSchema: ISchema = {
properties: { properties: {
update: { update: {
type: 'void', type: 'void',
title: '编辑', title: '{{ t("Edit") }}',
'x-component': 'EditFieldAction', 'x-component': 'EditFieldAction',
'x-component-props': { 'x-component-props': {
type: 'primary', type: 'primary',
@ -170,7 +173,7 @@ export const collectionFieldSchema: ISchema = {
}, },
delete: { delete: {
type: 'void', type: 'void',
title: '删除', title: '{{ t("Delete") }}',
'x-component': 'Action.Link', 'x-component': 'Action.Link',
'x-component-props': { 'x-component-props': {
useAction: '{{ useDestroyActionAndRefreshCM }}', useAction: '{{ useDestroyActionAndRefreshCM }}',

42
packages/client/src/collection-manager/Configuration/schemas/collections.ts
View File

@ -12,7 +12,7 @@ const collection: CollectionOptions = {
name: 'title', name: 'title',
interface: 'input', interface: 'input',
uiSchema: { uiSchema: {
title: '数据表名称', title: '{{ t("Collection display name") }}',
type: 'number', type: 'number',
'x-component': 'Input', 'x-component': 'Input',
required: true, required: true,
@ -23,10 +23,10 @@ const collection: CollectionOptions = {
name: 'name', name: 'name',
interface: 'input', interface: 'input',
uiSchema: { uiSchema: {
title: '数据表标识', title: '{{ t("Collection name") }}',
type: 'string', type: 'string',
'x-component': 'Input', 'x-component': 'Input',
description: '使用英文', // description: '使用英文',
}, },
}, },
{ {
@ -54,7 +54,7 @@ export const collectionSchema: ISchema = {
resource: 'collections', resource: 'collections',
action: 'list', action: 'list',
params: { params: {
pageSize: 5, pageSize: 50,
filter: {}, filter: {},
sort: ['sort'], sort: ['sort'],
appends: [], appends: [],
@ -69,15 +69,20 @@ export const collectionSchema: ISchema = {
actions: { actions: {
type: 'void', type: 'void',
'x-component': 'ActionBar', 'x-component': 'ActionBar',
'x-component-props': {
style: {
marginBottom: 16,
},
},
properties: { properties: {
delete: { delete: {
type: 'void', type: 'void',
title: '删除', title: '{{ t("Delete") }}',
'x-component': 'Action', 'x-component': 'Action',
}, },
create: { create: {
type: 'void', type: 'void',
title: '创建', title: '{{ t("Create collection") }}',
'x-component': 'Action', 'x-component': 'Action',
'x-component-props': { 'x-component-props': {
type: 'primary', type: 'primary',
@ -85,9 +90,9 @@ export const collectionSchema: ISchema = {
properties: { properties: {
drawer: { drawer: {
type: 'void', type: 'void',
title: '{{ t("Create collection") }}',
'x-component': 'Action.Drawer', 'x-component': 'Action.Drawer',
'x-decorator': 'Form', 'x-decorator': 'Form',
title: 'Drawer Title',
properties: { properties: {
title: { title: {
'x-component': 'CollectionField', 'x-component': 'CollectionField',
@ -102,14 +107,14 @@ export const collectionSchema: ISchema = {
'x-component': 'Action.Drawer.Footer', 'x-component': 'Action.Drawer.Footer',
properties: { properties: {
action1: { action1: {
title: 'Cancel', title: '{{ t("Cancel") }}',
'x-component': 'Action', 'x-component': 'Action',
'x-component-props': { 'x-component-props': {
useAction: '{{ useCancelAction }}', useAction: '{{ useCancelAction }}',
}, },
}, },
action2: { action2: {
title: 'Submit', title: '{{ t("Submit") }}',
'x-component': 'Action', 'x-component': 'Action',
'x-component-props': { 'x-component-props': {
type: 'primary', type: 'primary',
@ -124,7 +129,7 @@ export const collectionSchema: ISchema = {
}, },
}, },
}, },
table1: { table: {
type: 'void', type: 'void',
'x-uid': 'input', 'x-uid': 'input',
'x-component': 'VoidTable', 'x-component': 'VoidTable',
@ -142,7 +147,6 @@ export const collectionSchema: ISchema = {
'x-component': 'VoidTable.Column', 'x-component': 'VoidTable.Column',
properties: { properties: {
title: { title: {
type: 'number',
'x-component': 'CollectionField', 'x-component': 'CollectionField',
'x-read-pretty': true, 'x-read-pretty': true,
}, },
@ -162,7 +166,7 @@ export const collectionSchema: ISchema = {
}, },
column3: { column3: {
type: 'void', type: 'void',
title: 'Actions', title: '{{ t("Actions") }}',
'x-component': 'VoidTable.Column', 'x-component': 'VoidTable.Column',
properties: { properties: {
actions: { actions: {
@ -174,14 +178,14 @@ export const collectionSchema: ISchema = {
properties: { properties: {
view: { view: {
type: 'void', type: 'void',
title: '配置字段', title: '{{ t("Configure fields") }}',
'x-component': 'Action.Link', 'x-component': 'Action.Link',
'x-component-props': {}, 'x-component-props': {},
properties: { properties: {
drawer: { drawer: {
type: 'void', type: 'void',
'x-component': 'Action.Drawer', 'x-component': 'Action.Drawer',
title: 'Drawer Title', title: '{{ t("Configure fields") }}',
properties: { properties: {
collectionFieldSchema, collectionFieldSchema,
}, },
@ -190,7 +194,7 @@ export const collectionSchema: ISchema = {
}, },
update: { update: {
type: 'void', type: 'void',
title: '编辑', title: '{{ t("Edit") }}',
'x-component': 'Action.Link', 'x-component': 'Action.Link',
'x-component-props': { 'x-component-props': {
type: 'primary', type: 'primary',
@ -203,7 +207,7 @@ export const collectionSchema: ISchema = {
'x-decorator-props': { 'x-decorator-props': {
useValues: '{{ useValuesFromRecord }}', useValues: '{{ useValuesFromRecord }}',
}, },
title: 'Drawer Title', title: '{{ t("Edit collection") }}',
properties: { properties: {
title: { title: {
'x-component': 'CollectionField', 'x-component': 'CollectionField',
@ -219,14 +223,14 @@ export const collectionSchema: ISchema = {
'x-component': 'Action.Drawer.Footer', 'x-component': 'Action.Drawer.Footer',
properties: { properties: {
action1: { action1: {
title: 'Cancel', title: '{{ t("Cancel") }}',
'x-component': 'Action', 'x-component': 'Action',
'x-component-props': { 'x-component-props': {
useAction: '{{ useCancelAction }}', useAction: '{{ useCancelAction }}',
}, },
}, },
action2: { action2: {
title: 'Submit', title: '{{ t("Submit") }}',
'x-component': 'Action', 'x-component': 'Action',
'x-component-props': { 'x-component-props': {
type: 'primary', type: 'primary',
@ -241,7 +245,7 @@ export const collectionSchema: ISchema = {
}, },
delete: { delete: {
type: 'void', type: 'void',
title: '删除', title: '{{ t("Delete") }}',
'x-component': 'Action.Link', 'x-component': 'Action.Link',
'x-component-props': { 'x-component-props': {
useAction: '{{ useDestroyActionAndRefreshCM }}', useAction: '{{ useDestroyActionAndRefreshCM }}',

2
packages/client/src/collection-manager/ResourceActionProvider.tsx
View File

@ -82,5 +82,5 @@ export const useDataSourceFromRAC = (options: any) => {
export const useResourceContext = () => { export const useResourceContext = () => {
const { type, resource, collection, association } = useContext(ResourceContext); const { type, resource, collection, association } = useContext(ResourceContext);
return { type, resource, collection, association, targetKey: association?.targetKey || collection?.targetKey }; return { type, resource, collection, association, targetKey: association?.targetKey || collection?.targetKey || 'id' };
}; };

12
packages/client/src/collection-manager/action-hooks.ts
View File

@ -73,6 +73,18 @@ export const useDestroyAction = () => {
}; };
}; };
export const useBulkDestroyAction = () => {
const { refresh } = useResourceActionContext();
const { resource, targetKey } = useResourceContext();
const { [targetKey]: filterByTk } = useRecord();
return {
async run() {
await resource.destroy({ filterByTk });
refresh();
},
};
};
export const useValuesFromRecord = (options) => { export const useValuesFromRecord = (options) => {
const record = useRecord(); const record = useRecord();
return useRequest(() => Promise.resolve({ data: record }), { return useRequest(() => Promise.resolve({ data: record }), {