tachybase_todo/packages/plugins/@nocobase/plugin-charts/src/client/ChartBlockEngineDesigner.tsx
jack zhang bf1a19426a
refactor: new schema initializer and schema settings (#2802)
* fix: form

* refactor: schema-initializer

* fix: bug

* refactor: schema initializer

* refactor: rename

* fix: delete SchemaInitializerProvider

* refactor: props `insert` to hooks `useSchemaInitializerV2`

* fix: bug

* refactor: delete `SchemaInitializer.Button`

* refactor: delete old SchemaInitializer

* fix: bug

* fix: workflow

* fix: docs

* fix: bug

* fix: bug

* feat: style

* fix: remove v2

* fix: visible

* fix: bug

* fix: item hook

* feat: item hook

* fix: add search DataBlockInitializer

* fix: build bug

* fix: style bug

* fix: style bug

* fix: test bug

* fix: test bug

* fix: rerender bug

* fix: remove menu select

* fix: bug

* chore: add aria-label for SchemaInitializerButton

* refactor: rename name to camel case

* fix: menu height bug

* fix: build errors

* fix: build errors

* fix: bug

* fix: bug

* fix: performance

* test: add test for header

* fix: sidebar is not refresh (T-2422)

* feat(e2e): support to add group page and link page

* chore: make sure the page is configurable when using page.goto

* test: add tests for menu initializer

* fix: imporve  code

* chore: fix build error

* chore: optimize locator of menu item

* refactor: rename testid for select

* test: make tests passing

* fix: make tests passing

* chore: upgrade vitest to v0.34.6

* chore: increase timeout of e2e

* feat: core

* fix: revert schema initializer demos

* test: menu, page tabs, page grid, table column

* fix: schema button interface

* feat: refactor: page tab settings

* feat: page settings

* fix: dumirc

* fix: export CSSVariableProvider

* feat: lazy render

* fix: form-item

* fix: general schema desinger

* feat: filter form item settings

* refactor: form-v2 schema settings

* refactor: form-v1 schema settings

* refactor: action schema settings

* fix: action bug

* fix: form-item bug

* fix: types error

* docs: schema settings  doc

* docs: schema settings

* feat: schema setting  item add name

* fix: visible lazy render bug

* fix: revert form item filter

* fix: test bug

* fix: test JSON.parse bug

* fix: test bug

* fix: improve styling

* fix: styling

* fix: cleanup

* fix: token.borderRadiusSM

* fix: bug

* test: add tests

* fix: style bug

* fix: add chart performance

* feat: add SchemaDesignerContext

* fix: bug

* fix: test bug

* style: create record action style improve

* fix: make test passing

* chore: mack tests passing

* chore: make tests passing

* test: fix tests

* style: style revert

* fix: bug

* fix: data selector

* fix: fix tests

* fix: fix tests

* fix: delete PluginManagerContext

* refactor: improve router and add SchemaComponentProvider & CSSVariableProvider to MainComponent

* fix: add dn and field builtin to SchemaSettingWrapper

* feat: update docs

* refactor: application providers

* fix: test bug

* fix: fix tests

* chore: make test passing

* feat: update docs

* chore: rename collection name

* feat: update docs

* chore: skip weird test

* fix: blockInitializers media to otherBlocks

* fix: cancel to skip test

* fix: bug

* test: add test

* refactor: migrate to small files

* test: add tests for form block settings

* chore: format

* fix: add chart scroll bug

* refactor: action designer improve

* refactor: formitem designer schemaSetting

* feat: schemaSettingsManager and schemaInitializerManager addItem and removeItem

* test: add tests for color field in creating block

* test: add tests for email field in creating block

* test: make tests passing

* perf: reduce fields number

* fix: sub menu bug

* test: add tests basic in editing form

* test: add tests basic in details form

* fix: improve code

* test: make tests passing

* test(plugin-mock-collections): add color for enum options

* refactor: improve code

* fix: bug

* fix: bug

* refactor: convert parameters to destructured object

* test: add tests choices

* test: add tests media

* test: add tests for datetime in creating form

* feat(plugin-mock-collection): generate faker time

* test: add tests for datetime in editing form

* test: add tests for datetime in details form

* fix: bug

* feat: improve code

* test: add tests for relation fields

* fix: rename SchemaSettings

* fix: type bug

* refactor: useDesinger()

* fix: bug

* fix: bug

* fix: build tip

* fix: designableState

* fix: bug

* fix: designable

* fix: designable

* test: add tests for relation fields

* test: add tests for relation fields

* test: add tests for relation fields

* feat: client api doc

* test: add tests for relation fields

* test: avoid errors

* test: make tests passing

* fix: bug

* test: make tests passing

* test: add tests for advanced fields

* test: increase e2e timeout-minutes to 60

* fix: bug

* fix: improve code

* feat: add schema initailizer component  demos

* test: make tests passing

* fix: schema settings demos

* feat: shallowMerge & deepMerge

* test: reduce number of tests

* test: make tests passing

* feat: updates

* fix: add Initializer Internal

* demos:  useSchemaSettingsRender

* test: make tests passing

* test: make tests passing

* fix: improve docs

* fix: bug

* chore: upgrade dumi theme

* test: make tests passing

* test: add tests for linkage rules

* test: add test for form data templates

* test: add tests for default value

* test: reduce number of tests

* fix: dn.deepMerge

* fix: bug

* fix: bug

* fix: toolbar

* fix: docs ssr

* test: add tests for system fields

* test: add tests for actions

* fix:  bug

* test: add tests for lazy loading of variables

* test: make testing more stable

* fix: update docs

* fix: bug

---------

Co-authored-by: Rain <958414905@qq.com>
Co-authored-by: chenos <chenlinxh@gmail.com>
Co-authored-by: katherinehhh <katherine_15995@163.com>
2023-12-04 14:56:46 +08:00

252 lines
8.6 KiB
TypeScript

import { FormLayout } from '@formily/antd-v5';
import { SchemaOptionsContext, useField, useFieldSchema } from '@formily/react';
import {
APIClientProvider,
FormDialog,
GeneralSchemaDesigner,
SchemaComponent,
SchemaComponentOptions,
SchemaSettingsDivider,
SchemaSettingsItem,
SchemaSettingsRemove,
css,
i18n,
useAPIClient,
useCompile,
useDesignable,
useGlobalTheme,
} from '@nocobase/client';
import { error } from '@nocobase/utils/client';
import { Card } from 'antd';
import JSON5 from 'json5';
import React, { useContext, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { ChartBlockEngineMetaData } from './ChartBlockEngine';
import { Options } from './ChartBlockInitializer';
import DataSetPreviewTable from './DataSetPreviewTable';
import { useFieldsById } from './hooks';
import { lang } from './locale';
import { templates } from './templates';
export const jsonConfigDesc = (title: string, link: string) => {
return (
<span>
{lang('Json config references: ')}
<a href={link} target="_blank" rel="noreferrer">
{lang(title)}
</a>
</span>
);
};
const validateJSON = {
validator: `{{(value, rule)=> {
if (!value) {
return '';
}
try {
const val = JSON.parse(value);
if(!isNaN(val)) {
return false;
}
return true;
} catch(error) {
console.error(error);
return false;
}
}}}`,
message: '{{t("Invalid JSON format",{ ns: "charts" })}}',
};
export const ChartBlockEngineDesigner = () => {
const fieldSchema = useFieldSchema();
const { chartBlockEngineMetaData } = fieldSchema?.['x-component-props'] || {};
return (
<GeneralSchemaDesigner>
<ChartBlockEngineDesignerInitializer chartBlockEngineMetaData={chartBlockEngineMetaData} />
<SchemaSettingsDivider />
<SchemaSettingsRemove
removeParentsIfNoChildren
breakRemoveOn={{
'x-component': 'Grid',
}}
/>
</GeneralSchemaDesigner>
);
};
export const ChartBlockEngineDesignerInitializer = (props) => {
const { chartBlockEngineMetaData }: { chartBlockEngineMetaData: ChartBlockEngineMetaData } = props;
const { t } = useTranslation();
const options = useContext(SchemaOptionsContext);
const { dn } = useDesignable();
const fieldSchema = useFieldSchema();
const api = useAPIClient();
const field = useField();
const compile = useCompile();
const { chart, query } = chartBlockEngineMetaData;
const { fields } = useFieldsById(query.id);
const { theme } = useGlobalTheme();
const dataSource = fields.map((field) => {
return {
label: field.name,
value: field.name,
};
});
return (
<SchemaSettingsItem
title={props.title || 'Edit chart block'}
onClick={async () => {
FormDialog(
{
okText: compile('{{t("Submit")}}'),
title: lang('Edit chart block'),
width: 1200,
bodyStyle: { background: 'var(--nb-box-bg)', maxHeight: '65vh', overflow: 'auto' },
},
function Com(form) {
const [chartBlockEngineMetaData, setChartBlockEngineMetaData] = useState<ChartBlockEngineMetaData>(null);
useEffect(() => {
const chartBlockEngineMetaData = {
query: {
id: query?.id,
},
chart: form.values, //TODO
};
setChartBlockEngineMetaData(chartBlockEngineMetaData);
}, [form.values.type]);
return (
<APIClientProvider apiClient={api}>
<SchemaComponentOptions scope={options.scope} components={{ ...options.components }}>
<section
className={css`
display: flex;
gap: 24px;
`}
>
{/* left*/}
<Card
bordered={false}
title={i18n.t('Chart config')}
size={'default'}
className={css`
flex: 1;
`}
>
<FormLayout layout={'vertical'}>
<SchemaComponent
scope={{ dataSource, JSON5, jsonConfigDesc }}
components={{ Options }}
schema={{
properties: {
// title: {
// title: lang('Chart title'),
// 'x-component': 'Input',
// 'x-decorator': 'FormItem',
// },
type: {
title: t('Chart type'),
required: true,
'x-component': 'CustomSelect',
'x-decorator': 'FormItem',
enum: [...templates.values()].map((template) => {
return {
title: template.title,
key: template.type,
description: template.description,
group: template.group,
iconId: template.iconId,
};
}),
},
options: {
type: 'void',
'x-component': 'Options',
},
},
}}
/>
</FormLayout>
</Card>
{/* right*/}
<div
className={css`
flex: 1;
min-width: 600px;
`}
>
<Card size={'default'} title={lang('Chart preview')}>
{/* Chart Preview*/}
{chartBlockEngineMetaData && (
<>
<SchemaComponent
schema={{
properties: {
chartPreview: {
type: 'void',
'x-decorator': 'CardItem',
'x-component': 'ChartBlockEngine',
'x-component-props': {
chartBlockEngineMetaData: chartBlockEngineMetaData,
},
},
},
}}
/>
</>
)}
</Card>
<Card
size={'default'}
title={lang('Data preview')}
className={css`
margin-top: 24px;
overflow: scroll;
`}
>
{/*Data preview*/}
{chartBlockEngineMetaData?.query?.id && (
<DataSetPreviewTable queryId={chartBlockEngineMetaData?.query?.id} fields={fields} />
)}
</Card>
</div>
</section>
</SchemaComponentOptions>
</APIClientProvider>
);
},
theme,
)
.open({
initialValues: { ...chart }, //reset before chartBlockMetaData
})
.then((values) => {
//patch updates
values = {
query,
chart: values,
};
field.title = values.chart.title;
fieldSchema['title'] = values.chart.title;
field.componentProps.chartBlockEngineMetaData = values;
fieldSchema['x-component-props'].chartBlockEngineMetaData = values;
dn.emit('patch', {
schema: {
'x-uid': fieldSchema['x-uid'],
'x-component-props': fieldSchema['x-component-props'],
},
});
dn.refresh();
})
.catch((err) => {
error(err);
});
}}
>
{props.children || props.title || lang('Edit chart block')}
</SchemaSettingsItem>
);
};