* 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>
252 lines
8.6 KiB
TypeScript
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>
|
|
);
|
|
};
|