From b832ae81fc3d7f64782be666f9b30727379fe332 Mon Sep 17 00:00:00 2001 From: Shimin Date: Tue, 7 May 2024 15:15:25 +0800 Subject: [PATCH] fix(wren-ui): Fix calculated field modal title when edit mode (#206) --- .../modals/CalculatedFieldModal.tsx | 25 +++++++++----- wren-ui/src/hooks/useModalAction.tsx | 7 +++- wren-ui/src/pages/modeling.tsx | 8 ++--- wren-ui/src/utils/modelingHelper.ts | 34 +++++++++++-------- 4 files changed, 44 insertions(+), 30 deletions(-) diff --git a/wren-ui/src/components/modals/CalculatedFieldModal.tsx b/wren-ui/src/components/modals/CalculatedFieldModal.tsx index fb3761016..92eb6916a 100644 --- a/wren-ui/src/components/modals/CalculatedFieldModal.tsx +++ b/wren-ui/src/components/modals/CalculatedFieldModal.tsx @@ -1,7 +1,7 @@ import { useCallback, useEffect, useMemo } from 'react'; import { Modal, Form, Input, Typography, Button } from 'antd'; import LinkOutlined from '@ant-design/icons/LinkOutlined'; -import { omit } from 'lodash'; +import { FORM_MODE } from '@/utils/enum'; import { ERROR_TEXTS } from '@/utils/error'; import { DiagramModel } from '@/utils/data/type'; import { ModalAction } from '@/hooks/useModalAction'; @@ -38,7 +38,17 @@ type Props = ModalAction< }; export default function AddCalculatedFieldModal(props: Props) { - const { visible, loading, onSubmit, onClose, defaultValue } = props; + const { + visible, + loading, + onSubmit, + onClose, + defaultValue, + payload, + formMode, + } = props; + + const isEditMode = formMode === FORM_MODE.EDIT; const [form] = Form.useForm(); const expression = Form.useWatch('expression', form); @@ -46,11 +56,8 @@ export default function AddCalculatedFieldModal(props: Props) { const expressionOptions = useExpressionFieldOptions(); - const models = useMemo(() => defaultValue?.payload?.models, [defaultValue]); - const sourceModel = useMemo( - () => defaultValue?.payload?.sourceModel, - [defaultValue], - ); + const models = useMemo(() => payload?.models, [payload]); + const sourceModel = useMemo(() => payload?.sourceModel, [payload]); const [validateCalculatedField] = useValidateCalculatedFieldMutation(); const validateCalculatedFieldName = useCallback( @@ -69,7 +76,7 @@ export default function AddCalculatedFieldModal(props: Props) { useEffect(() => { if (!visible) return; - form.setFieldsValue(omit(defaultValue || {}, ['payload'])); + form.setFieldsValue(defaultValue || {}); }, [form, defaultValue, visible]); const fetchOptions = useCallback( @@ -112,7 +119,7 @@ export default function AddCalculatedFieldModal(props: Props) { return ( { onSubmit?: (values: SData) => Promise; formMode?: FORM_MODE; defaultValue?: TData; + payload?: Record; } export default function useModalAction() { const [visible, setVisible] = useState(false); const [formMode, setFormMode] = useState(FORM_MODE.CREATE); + const [payload, setPayload] = useState(null); const [defaultValue, setDefaultValue] = useState(null); - const openModal = (value?: any) => { + const openModal = (value?: any, payload?: any) => { + payload && setPayload(payload); value && setDefaultValue(value); value && setFormMode(FORM_MODE.EDIT); setVisible(true); @@ -22,6 +25,7 @@ export default function useModalAction() { const closeModal = () => { setVisible(false); + setPayload(null); setDefaultValue(null); setFormMode(FORM_MODE.CREATE); }; @@ -31,6 +35,7 @@ export default function useModalAction() { visible, formMode, defaultValue, + payload, }, openModal, closeModal, diff --git a/wren-ui/src/pages/modeling.tsx b/wren-ui/src/pages/modeling.tsx index f22e3fe81..8691acd30 100644 --- a/wren-ui/src/pages/modeling.tsx +++ b/wren-ui/src/pages/modeling.tsx @@ -280,11 +280,9 @@ export default function Modeling() { const { targetNodeType, data } = payload; switch (targetNodeType) { case NODE_TYPE.CALCULATED_FIELD: - calculatedFieldModal.openModal({ - payload: { - models: diagramData.models, - sourceModel: data, - }, + calculatedFieldModal.openModal(null, { + models: diagramData.models, + sourceModel: data, }); break; case NODE_TYPE.RELATION: diff --git a/wren-ui/src/utils/modelingHelper.ts b/wren-ui/src/utils/modelingHelper.ts index 6c901d505..894167554 100644 --- a/wren-ui/src/utils/modelingHelper.ts +++ b/wren-ui/src/utils/modelingHelper.ts @@ -4,7 +4,7 @@ import { getFieldValue } from '@/components/selectors/lineageSelector/FieldSelec export const editCalculatedField = ( payload: { diagramData: Diagram; data: any }, - openCalculatedFieldModal: (defaultValue: any) => void, + openCalculatedFieldModal: (defaultValue: any, payload: any) => void, ) => { const { diagramData, data } = payload; const sourceModel = diagramData.models.find( @@ -22,16 +22,18 @@ export const editCalculatedField = ( if (isSourceModelField) { const field = getField(sourceModel, data.lineage[0]); openCalculatedFieldModal && - openCalculatedFieldModal({ - columnId: data.columnId, - name: data.referenceName, - expression: data.aggregation, - lineage: [getFieldValue(field)], - payload: { + openCalculatedFieldModal( + { + columnId: data.columnId, + name: data.referenceName, + expression: data.aggregation, + lineage: [getFieldValue(field)], + }, + { models: diagramData.models, sourceModel, }, - }); + ); return; } @@ -54,14 +56,16 @@ export const editCalculatedField = ( const field = getField(lastModel, lastColumnId); openCalculatedFieldModal && - openCalculatedFieldModal({ - columnId: data.columnId, - name: data.referenceName, - expression: data.aggregation, - lineage: [...relations, field].map(getFieldValue), - payload: { + openCalculatedFieldModal( + { + columnId: data.columnId, + name: data.referenceName, + expression: data.aggregation, + lineage: [...relations, field].map(getFieldValue), + }, + { models: diagramData.models, sourceModel, }, - }); + ); };