From 702c391bc2138d1a2db69e285d1d846c515b7236 Mon Sep 17 00:00:00 2001 From: chenos Date: Fri, 18 Feb 2022 20:30:27 +0800 Subject: [PATCH] feat(client): improve collection-manager module --- .../CollectionManagerProvider.tsx | 2 +- .../Configuration/AddFieldAction.tsx | 49 ++------- .../Configuration/EditFieldAction.tsx | 103 ++++++++++++++++++ .../Configuration/index.tsx | 1 + .../Configuration/schemas/collectionFields.ts | 39 ++++--- .../Configuration/schemas/collections.ts | 42 +++---- .../ResourceActionProvider.tsx | 2 +- .../src/collection-manager/action-hooks.ts | 12 ++ 8 files changed, 170 insertions(+), 80 deletions(-) create mode 100644 packages/client/src/collection-manager/Configuration/EditFieldAction.tsx diff --git a/packages/client/src/collection-manager/CollectionManagerProvider.tsx b/packages/client/src/collection-manager/CollectionManagerProvider.tsx index 9092dbcc3..bf23a7b11 100644 --- a/packages/client/src/collection-manager/CollectionManagerProvider.tsx +++ b/packages/client/src/collection-manager/CollectionManagerProvider.tsx @@ -32,7 +32,7 @@ export const RemoteCollectionManagerProvider = (props: any) => { resource: 'collections', action: 'list', params: { - perPage: 999, + pageSize: 999, appends: ['fields', 'fields.uiSchema'], }, }; diff --git a/packages/client/src/collection-manager/Configuration/AddFieldAction.tsx b/packages/client/src/collection-manager/Configuration/AddFieldAction.tsx index 9d0c5c8fe..166b236e4 100644 --- a/packages/client/src/collection-manager/Configuration/AddFieldAction.tsx +++ b/packages/client/src/collection-manager/Configuration/AddFieldAction.tsx @@ -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={ { - const schema = getSchema(getInterface(info.key), '{{ useCreateActionAndRefreshCM }}'); + const schema = getSchema(getInterface(info.key)); setSchema(schema); setVisible(true); }} @@ -102,35 +101,3 @@ export const AddFieldAction = () => { ); }; - -export const EditFieldAction = (props) => { - const record = useRecord(); - const { getInterface } = useCollectionManager(); - const [visible, setVisible] = useState(false); - const [schema, setSchema] = useState({}); - const api = useAPIClient(); - return ( - - { - 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); - }} - > - 编辑 - - - - ); -}; diff --git a/packages/client/src/collection-manager/Configuration/EditFieldAction.tsx b/packages/client/src/collection-manager/Configuration/EditFieldAction.tsx new file mode 100644 index 000000000..8d47d145f --- /dev/null +++ b/packages/client/src/collection-manager/Configuration/EditFieldAction.tsx @@ -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 ( + + { + 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')} + + + + ); +}; diff --git a/packages/client/src/collection-manager/Configuration/index.tsx b/packages/client/src/collection-manager/Configuration/index.tsx index 7494a4ebd..33d0bddb3 100644 --- a/packages/client/src/collection-manager/Configuration/index.tsx +++ b/packages/client/src/collection-manager/Configuration/index.tsx @@ -1,3 +1,4 @@ export * from './AddFieldAction'; export * from './ConfigurationTable'; +export * from './EditFieldAction'; diff --git a/packages/client/src/collection-manager/Configuration/schemas/collectionFields.ts b/packages/client/src/collection-manager/Configuration/schemas/collectionFields.ts index cd4821c4f..11b23ac02 100644 --- a/packages/client/src/collection-manager/Configuration/schemas/collectionFields.ts +++ b/packages/client/src/collection-manager/Configuration/schemas/collectionFields.ts @@ -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 }}', diff --git a/packages/client/src/collection-manager/Configuration/schemas/collections.ts b/packages/client/src/collection-manager/Configuration/schemas/collections.ts index 3a8d694b1..8a73f3452 100644 --- a/packages/client/src/collection-manager/Configuration/schemas/collections.ts +++ b/packages/client/src/collection-manager/Configuration/schemas/collections.ts @@ -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 }}', diff --git a/packages/client/src/collection-manager/ResourceActionProvider.tsx b/packages/client/src/collection-manager/ResourceActionProvider.tsx index a7fc63f08..7cd7ddd04 100644 --- a/packages/client/src/collection-manager/ResourceActionProvider.tsx +++ b/packages/client/src/collection-manager/ResourceActionProvider.tsx @@ -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' }; }; diff --git a/packages/client/src/collection-manager/action-hooks.ts b/packages/client/src/collection-manager/action-hooks.ts index 2aebb6122..6b172787b 100644 --- a/packages/client/src/collection-manager/action-hooks.ts +++ b/packages/client/src/collection-manager/action-hooks.ts @@ -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 }), {