From a04aeb17e6ea299dda1951769b187df58ce8e17c Mon Sep 17 00:00:00 2001 From: YANG QIA <2013xile@gmail.com> Date: Wed, 11 Sep 2024 10:17:01 +0800 Subject: [PATCH] feat(data-vi): support for adding chart blocks in popups/drawers/sub-pages (#5248) --- packages/core/client/src/index.ts | 6 +++-- .../VariableInput/hooks/index.ts | 1 + packages/core/client/src/variables/index.ts | 1 + .../src/client/filter/FilterForm.tsx | 15 ++++++++--- .../src/client/filter/FilterItemDesigner.tsx | 4 ++- .../src/client/filter/utils.ts | 8 +++--- .../src/client/hooks/filter.ts | 4 ++- .../src/client/hooks/useVariableOptions.ts | 25 ++++++++++++++++--- .../src/client/index.tsx | 4 +++ 9 files changed, 52 insertions(+), 16 deletions(-) diff --git a/packages/core/client/src/index.ts b/packages/core/client/src/index.ts index 0a03e4b657..625820a1f8 100644 --- a/packages/core/client/src/index.ts +++ b/packages/core/client/src/index.ts @@ -73,5 +73,7 @@ export * from './modules/blocks/useParentRecordCommon'; export { OpenModeProvider, useOpenModeContext } from './modules/popup/OpenModeProvider'; export { PopupContextProvider } from './modules/popup/PopupContextProvider'; export { usePopupUtils } from './modules/popup/usePopupUtils'; - -export { VariablePopupRecordProvider } from './modules/variable/variablesProvider/VariablePopupRecordProvider'; +export { + VariablePopupRecordProvider, + useCurrentPopupRecord, +} from './modules/variable/variablesProvider/VariablePopupRecordProvider'; diff --git a/packages/core/client/src/schema-settings/VariableInput/hooks/index.ts b/packages/core/client/src/schema-settings/VariableInput/hooks/index.ts index 432ceadfa5..ec9cd6da7f 100644 --- a/packages/core/client/src/schema-settings/VariableInput/hooks/index.ts +++ b/packages/core/client/src/schema-settings/VariableInput/hooks/index.ts @@ -14,3 +14,4 @@ export * from './useRoleVariable'; export * from './useURLSearchParamsVariable'; export * from './useUserVariable'; export * from './useVariableOptions'; +export * from './usePopupVariable'; diff --git a/packages/core/client/src/variables/index.ts b/packages/core/client/src/variables/index.ts index 297a6fb680..c883997108 100644 --- a/packages/core/client/src/variables/index.ts +++ b/packages/core/client/src/variables/index.ts @@ -16,3 +16,4 @@ export * from './utils/isVariable'; export * from './utils/transformVariableValue'; export * from './constants'; +export type { VariablesContextType } from './types'; diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterForm.tsx b/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterForm.tsx index a0b019c42c..9bdf72ce31 100644 --- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterForm.tsx +++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterForm.tsx @@ -10,15 +10,22 @@ import React, { memo, useContext, useEffect, useMemo, useRef } from 'react'; import { createForm, onFieldInit, onFieldMount, onFieldUnmount } from '@formily/core'; import { ChartFilterContext } from './FilterProvider'; -import { DEFAULT_DATA_SOURCE_KEY, FormV2, VariablesContext } from '@nocobase/client'; +import { + DEFAULT_DATA_SOURCE_KEY, + FormV2, + VariablesContext, + VariablesContextType, + useLocalVariables, +} from '@nocobase/client'; import { setDefaultValue } from './utils'; import { useChartFilter } from '../hooks'; export const ChartFilterForm: React.FC = memo((props) => { const { setField, removeField, setForm } = useContext(ChartFilterContext); const { getTranslatedTitle } = useChartFilter(); - const variables = useRef(null); + const variables = useRef(null); variables.current = useContext(VariablesContext); + const localVariables = useLocalVariables(); const form = useMemo( () => createForm({ @@ -53,7 +60,7 @@ export const ChartFilterForm: React.FC = memo((props) => { } // parse default value - setDefaultValue(field, variables.current); + setDefaultValue(field, variables.current, localVariables); }); onFieldUnmount('*', (field: any) => { const name = getField(field); @@ -64,7 +71,7 @@ export const ChartFilterForm: React.FC = memo((props) => { }); }, }), - [setField, getTranslatedTitle, removeField, variables], + [setField, getTranslatedTitle, removeField, variables, localVariables], ); useEffect(() => setForm(form), [form, setForm]); diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterItemDesigner.tsx b/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterItemDesigner.tsx index 582d637e84..a46a24b9ab 100644 --- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterItemDesigner.tsx +++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterItemDesigner.tsx @@ -27,6 +27,7 @@ import { SchemaSettingsDataScope, removeNullCondition, useFormBlockContext, + useLocalVariables, } from '@nocobase/client'; import { useChartsTranslation } from '../locale'; import { Schema, useField, useFieldSchema } from '@formily/react'; @@ -222,6 +223,7 @@ const EditDefaultValue = () => { const { t } = useChartsTranslation(); const { dn } = useDesignable(); const variables = useContext(VariablesContext); + const localVariables = useLocalVariables(); const field = useField(); const fieldSchema = useFieldSchema(); const { getTranslatedTitle } = useChartFilter(); @@ -257,7 +259,7 @@ const EditDefaultValue = () => { }, }); dn.refresh(); - setDefaultValue(field, variables); + setDefaultValue(field, variables, localVariables); }} /> ); diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/utils.ts b/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/utils.ts index 6a56930980..7c393774b4 100644 --- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/utils.ts +++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/utils.ts @@ -7,7 +7,7 @@ * For more information, please refer to: https://www.nocobase.com/agreement. */ -import { DEFAULT_DATA_SOURCE_KEY } from '@nocobase/client'; +import { DEFAULT_DATA_SOURCE_KEY, VariablesContextType } from '@nocobase/client'; import { moment2str } from '@nocobase/utils/client'; import dayjs from 'dayjs'; import { Schema } from '@formily/react'; @@ -170,16 +170,16 @@ export const transformValue = (value: any, props: any) => { return value; }; -export const setDefaultValue = async (field: any, variables: any) => { +export const setDefaultValue = async (field: any, variablesCtx: VariablesContextType, localVariables?: any) => { const defaultValue = field.initialValue; const isVariable = typeof defaultValue === 'string' && defaultValue?.startsWith('{{$') && defaultValue?.endsWith('}}'); - if (!isVariable || !variables) { + if (!isVariable || !variablesCtx) { field.setValue(defaultValue); field.setInitialValue(defaultValue); } else { field.loading = true; - const { value } = await variables.parseVariable(defaultValue); + const { value } = await variablesCtx.parseVariable(defaultValue, localVariables); const transformedValue = transformValue(value, field.componentProps); field.setValue(transformedValue); field.setInitialValue(transformedValue); diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/hooks/filter.ts b/packages/plugins/@nocobase/plugin-data-visualization/src/client/hooks/filter.ts index 4439919b7e..0946b0bc0e 100644 --- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/hooks/filter.ts +++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/hooks/filter.ts @@ -18,6 +18,7 @@ import { useCollectionManager_deprecated, useDataSourceManager, useVariables, + useLocalVariables, } from '@nocobase/client'; import { flatten, parse, unflatten } from '@nocobase/utils/client'; import { useMemoizedFn } from 'ahooks'; @@ -103,6 +104,7 @@ export const useChartFilter = () => { const action = fieldSchema?.['x-action']; const { fields: fieldProps, form } = useContext(ChartFilterContext); const variables = useVariables(); + const localVariables = useLocalVariables(); const getChartFilterFields = ({ dataSource, @@ -418,7 +420,7 @@ export const useChartFilter = () => { if (['$user', '$date', '$nDate', '$nRole', '$nFilter'].some((n) => value.includes(n))) { return value; } - const result = variables?.parseVariable(value).then(({ value }) => value); + const result = variables?.parseVariable(value, localVariables).then(({ value }) => value); return result; }, }); diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/hooks/useVariableOptions.ts b/packages/plugins/@nocobase/plugin-data-visualization/src/client/hooks/useVariableOptions.ts index 53212b5896..fd487fc1a8 100644 --- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/hooks/useVariableOptions.ts +++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/hooks/useVariableOptions.ts @@ -13,6 +13,7 @@ import { useCurrentRoleVariable, useCurrentUserVariable, useDatetimeVariable, + usePopupVariable, useURLSearchParamsVariable, } from '@nocobase/client'; import { useMemo } from 'react'; @@ -32,13 +33,29 @@ export const useGeneralVariableOptions = ( const { apiTokenSettings } = useAPITokenVariable({ noDisabled: true }); const { datetimeSettings } = useDatetimeVariable({ operator, schema, noDisabled: true }); const { urlSearchParamsSettings } = useURLSearchParamsVariable(); + const { settings: popupRecordSettings, shouldDisplayPopupRecord } = usePopupVariable({ + schema, + }); const result = useMemo( () => - [currentUserSettings, currentRoleSettings, apiTokenSettings, datetimeSettings, urlSearchParamsSettings].filter( - Boolean, - ), - [datetimeSettings, currentUserSettings, currentRoleSettings, urlSearchParamsSettings, apiTokenSettings], + [ + currentUserSettings, + currentRoleSettings, + apiTokenSettings, + datetimeSettings, + urlSearchParamsSettings, + shouldDisplayPopupRecord && popupRecordSettings, + ].filter(Boolean), + [ + datetimeSettings, + currentUserSettings, + currentRoleSettings, + urlSearchParamsSettings, + apiTokenSettings, + shouldDisplayPopupRecord, + popupRecordSettings, + ], ); if (!schema) return []; diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/index.tsx b/packages/plugins/@nocobase/plugin-data-visualization/src/client/index.tsx index 70c945c3f5..736cd681f8 100644 --- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/index.tsx +++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/index.tsx @@ -69,6 +69,10 @@ class PluginDataVisualiztionClient extends Plugin { title: lang('Charts'), Component: 'ChartV2BlockInitializer', }); + this.app.schemaInitializerManager.addItem('popup:common:addBlock', 'dataBlocks.charts', { + title: '{{t("Charts")}}', + Component: 'ChartV2BlockInitializer', + }); } }