import { FormDialog, FormLayout } from '@formily/antd-v5'; import { SchemaOptionsContext, useField, useFieldSchema } from '@formily/react'; import { APIClientProvider, GeneralSchemaDesigner, SchemaComponent, SchemaComponentOptions, SchemaSettings, css, i18n, useAPIClient, useCompile, useDesignable, } from '@nocobase/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 ( {lang('Json config references: ')} {lang(title)} ); }; 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 ( ); }; 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 dataSource = fields.map((field) => { return { label: field.name, value: field.name, }; }); return ( { FormDialog( { okText: compile('{{t("Submit")}}'), title: lang('Edit chart block'), width: 1200, bodyStyle: { background: 'var(--nb-box-bg)', maxHeight: '65vh', overflow: 'auto' }, }, (form) => { const [chartBlockEngineMetaData, setChartBlockEngineMetaData] = useState(null); useEffect(() => { const chartBlockEngineMetaData = { query: { id: query?.id, }, chart: form.values, //TODO }; setChartBlockEngineMetaData(chartBlockEngineMetaData); }, [form.values.type]); return (
{/* left*/} { return { title: template.title, key: template.type, description: template.description, group: template.group, iconId: template.iconId, }; }), }, options: { type: 'void', 'x-component': 'Options', }, }, }} /> {/* right*/}
{/* Chart Preview*/} {chartBlockEngineMetaData && ( <> )} {/*Data preview*/} {chartBlockEngineMetaData?.query?.id && ( )}
); }, ) .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(); }); }} > {props.children || props.title || lang('Edit chart block')}
); };