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',
action: 'list',
params: {
perPage: 999,
pageSize: 999,
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 { Button, Dropdown, Menu } from 'antd';
import React, { useState } from 'react';
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, useAction): ISchema => {
const getSchema = (schema: IField): ISchema => {
if (!schema) {
return;
}
@ -26,7 +24,7 @@ const getSchema = (schema: IField, useAction): ISchema => {
name: `f_${uid()}`,
},
},
title: 'Drawer Title',
title: '{{ t("Add field") }}',
properties: {
type: {
'x-component': 'CollectionField',
@ -34,7 +32,8 @@ const getSchema = (schema: IField, useAction): ISchema => {
},
'uiSchema.title': {
type: 'number',
title: '字段名称',
title: '{{ t("Field display name") }}',
required: true,
'x-component': 'Input',
'x-decorator': 'FormItem',
},
@ -49,18 +48,18 @@ const getSchema = (schema: IField, useAction): ISchema => {
'x-component': 'Action.Drawer.Footer',
properties: {
action1: {
title: 'Cancel',
title: '{{ t("Cancel") }}',
'x-component': 'Action',
'x-component-props': {
useAction: '{{ useCancelAction }}',
},
},
action2: {
title: 'Submit',
title: '{{ t("Submit") }}',
'x-component': 'Action',
'x-component-props': {
type: 'primary',
useAction,
useAction: '{{ useCreateActionAndRefreshCM }}',
},
},
},
@ -81,7 +80,7 @@ export const AddFieldAction = () => {
overlay={
<Menu
onClick={(info) => {
const schema = getSchema(getInterface(info.key), '{{ useCreateActionAndRefreshCM }}');
const schema = getSchema(getInterface(info.key));
setSchema(schema);
setVisible(true);
}}
@ -102,35 +101,3 @@ export const AddFieldAction = () => {
</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 './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 { CollectionOptions } from '../../types';
const collection = {
const collection: CollectionOptions = {
name: 'fields',
fields: [
{
@ -8,7 +9,7 @@ const collection = {
name: 'type',
interface: 'input',
uiSchema: {
title: '存储类型',
title: '{{ t("Storage type") }}',
type: 'string',
'x-component': 'Select',
enum: [
@ -18,14 +19,14 @@ const collection = {
},
],
required: true,
} as ISchema,
},
},
{
type: 'string',
name: 'interface',
interface: 'input',
uiSchema: {
title: '字段类型',
title: '{{ t("Field interface") }}',
type: 'string',
'x-component': 'Input',
},
@ -35,22 +36,21 @@ const collection = {
name: 'title',
interface: 'input',
uiSchema: {
title: '字段名称',
title: '{{ t("Field display name") }}',
type: 'string',
'x-component': 'Input',
required: true,
} as ISchema,
},
},
{
type: 'string',
name: 'name',
interface: 'input',
uiSchema: {
title: '字段标识',
title: '{{ t("Field name") }}',
type: 'string',
'x-component': 'Input',
description: '使用英文',
} as ISchema,
},
},
],
};
@ -69,7 +69,7 @@ export const collectionFieldSchema: ISchema = {
resource: 'collections.fields',
action: 'list',
params: {
pageSize: 5,
pageSize: 50,
filter: {},
sort: ['sort'],
appends: ['uiSchema'],
@ -84,15 +84,20 @@ export const collectionFieldSchema: ISchema = {
actions: {
type: 'void',
'x-component': 'ActionBar',
'x-component-props': {
style: {
marginBottom: 16,
},
},
properties: {
delete: {
type: 'void',
title: '删除',
title: '{{ t("Delete") }}',
'x-component': 'Action',
},
create: {
type: 'void',
title: '创建',
title: '{{ t("Add new") }}',
'x-component': 'AddFieldAction',
'x-component-props': {
type: 'primary',
@ -114,7 +119,7 @@ export const collectionFieldSchema: ISchema = {
properties: {
column1: {
type: 'void',
title: '字段名称',
title: '{{ t("Field display name") }}',
'x-component': 'VoidTable.Column',
properties: {
'uiSchema.title': {
@ -130,7 +135,6 @@ export const collectionFieldSchema: ISchema = {
'x-component': 'VoidTable.Column',
properties: {
name: {
type: 'string',
'x-component': 'CollectionField',
'x-read-pretty': true,
},
@ -142,7 +146,6 @@ export const collectionFieldSchema: ISchema = {
'x-component': 'VoidTable.Column',
properties: {
interface: {
type: 'string',
'x-component': 'CollectionField',
'x-read-pretty': true,
},
@ -150,7 +153,7 @@ export const collectionFieldSchema: ISchema = {
},
column4: {
type: 'void',
title: 'Actions',
title: '{{ t("Actions") }}',
'x-component': 'VoidTable.Column',
properties: {
actions: {
@ -162,7 +165,7 @@ export const collectionFieldSchema: ISchema = {
properties: {
update: {
type: 'void',
title: '编辑',
title: '{{ t("Edit") }}',
'x-component': 'EditFieldAction',
'x-component-props': {
type: 'primary',
@ -170,7 +173,7 @@ export const collectionFieldSchema: ISchema = {
},
delete: {
type: 'void',
title: '删除',
title: '{{ t("Delete") }}',
'x-component': 'Action.Link',
'x-component-props': {
useAction: '{{ useDestroyActionAndRefreshCM }}',

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

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

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

@ -82,5 +82,5 @@ export const useDataSourceFromRAC = (options: any) => {
export const useResourceContext = () => {
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) => {
const record = useRecord();
return useRequest(() => Promise.resolve({ data: record }), {