diff --git a/src/entities/transformation/ui/TransformationForm/TransformationForm.tsx b/src/entities/transformation/ui/TransformationForm/TransformationForm.tsx index e0e24747..0642b9f0 100644 --- a/src/entities/transformation/ui/TransformationForm/TransformationForm.tsx +++ b/src/entities/transformation/ui/TransformationForm/TransformationForm.tsx @@ -1,4 +1,4 @@ -import { Button, Form } from 'antd'; +import { Button, Form, FormListFieldData } from 'antd'; import React, { memo, useLayoutEffect } from 'react'; import { useTranslation } from 'react-i18next'; @@ -10,6 +10,7 @@ import { TransformationFormProps } from './types'; const TransformationFormComponent = ({ transformationType, + canHaveEmptyRecordsList, ...props }: TransformationFormProps) => { const { t } = useTranslation(); @@ -25,10 +26,13 @@ const TransformationFormComponent = ({ * because it is inconvenient to check for the presence of a default value of this array, * when forming a request to backend or initial form values */ useLayoutEffect(() => { - if (!filtersValues || !filtersValues.length) { + const needFillEmpty = !canHaveEmptyRecordsList && !filtersValues?.length; + if (needFillEmpty) { formInstance.setFieldValue(['transformations', transformationType], [{}]); } - }, [formInstance, filtersValues, transformationType]); + }, [formInstance, filtersValues, transformationType, canHaveEmptyRecordsList]); + + const canRemoveItem = ({ name }: FormListFieldData) => (name || canHaveEmptyRecordsList) && isDisplayed; return ( @@ -39,7 +43,7 @@ const TransformationFormComponent = ({ {...field} {...props} transformationType={transformationType} - onRemove={field.name && isDisplayed ? remove : undefined} + onRemove={canRemoveItem(field) ? remove : undefined} key={field.key} /> ))} diff --git a/src/entities/transformation/ui/TransformationForm/types.ts b/src/entities/transformation/ui/TransformationForm/types.ts index fbdd43ec..a9a0abb3 100644 --- a/src/entities/transformation/ui/TransformationForm/types.ts +++ b/src/entities/transformation/ui/TransformationForm/types.ts @@ -3,4 +3,10 @@ import { TransformationType } from '@entities/transformation'; import { TransformationFormItemProps } from './components'; export interface TransformationFormProps - extends Pick, 'transformationType' | 'nestedTypeSelectLabel' | 'hasColumnField'> {} + extends Pick, 'transformationType' | 'nestedTypeSelectLabel' | 'hasColumnField'> { + /** Can have empty records list */ + canHaveEmptyRecordsList?: boolean; +} + +export interface FilterFormItemProps + extends Pick, 'canHaveEmptyRecordsList'> {} diff --git a/src/features/transfer/MutateTransferForm/components/FilterColumnsFormItem/FilterColumnsFormItem.tsx b/src/features/transfer/MutateTransferForm/components/FilterColumnsFormItem/FilterColumnsFormItem.tsx new file mode 100644 index 00000000..bf98cea9 --- /dev/null +++ b/src/features/transfer/MutateTransferForm/components/FilterColumnsFormItem/FilterColumnsFormItem.tsx @@ -0,0 +1,18 @@ +import React, { memo } from 'react'; +import { FilterFormItemProps, TransformationForm, TransformationType } from '@entities/transformation'; +import { useTranslation } from 'react-i18next'; + +export const FilterColumnsFormItem = memo( + ({ canHaveEmptyRecordsList }: FilterFormItemProps) => { + const { t } = useTranslation('transformation'); + + return ( + + ); + }, +); diff --git a/src/features/transfer/MutateTransferForm/components/FilterColumnsFormItem/index.ts b/src/features/transfer/MutateTransferForm/components/FilterColumnsFormItem/index.ts new file mode 100644 index 00000000..45840c25 --- /dev/null +++ b/src/features/transfer/MutateTransferForm/components/FilterColumnsFormItem/index.ts @@ -0,0 +1 @@ +export * from './FilterColumnsFormItem'; diff --git a/src/features/transfer/MutateTransferForm/components/FilterColumnsNode/FilterColumnsNode.tsx b/src/features/transfer/MutateTransferForm/components/FilterColumnsNode/FilterColumnsNode.tsx index 4be35fe8..5b007a0a 100644 --- a/src/features/transfer/MutateTransferForm/components/FilterColumnsNode/FilterColumnsNode.tsx +++ b/src/features/transfer/MutateTransferForm/components/FilterColumnsNode/FilterColumnsNode.tsx @@ -2,7 +2,6 @@ import React, { useMemo } from 'react'; import { CanvasNode } from '@shared/ui'; import { Handle, Position } from '@xyflow/react'; import { FilterOutlined } from '@ant-design/icons'; -import { TransformationForm, TransformationType } from '@entities/transformation'; import { useTranslation } from 'react-i18next'; import { @@ -10,6 +9,7 @@ import { TransferCanvasTransformNodeType, TRANSFER_CANVAS_TRANSFORM_NODE_TYPE_NAME_DISPLAY, } from '../TransferConnectionsCanvas'; +import { FilterColumnsFormItem } from '../FilterColumnsFormItem'; import classes from './styles.module.less'; @@ -24,15 +24,11 @@ export const FilterColumnsNode = () => { return ( <> - + ); - }, [t]); + }, []); return ( ({ canHaveEmptyRecordsList }: FilterFormItemProps) => { + const { t } = useTranslation('transformation'); + + return ( + + ); + }, +); diff --git a/src/features/transfer/MutateTransferForm/components/FilterFileFormItem/index.ts b/src/features/transfer/MutateTransferForm/components/FilterFileFormItem/index.ts new file mode 100644 index 00000000..788f8a44 --- /dev/null +++ b/src/features/transfer/MutateTransferForm/components/FilterFileFormItem/index.ts @@ -0,0 +1 @@ +export * from './FilterFileFormItem'; diff --git a/src/features/transfer/MutateTransferForm/components/FilterFileNode/FilterFileNode.tsx b/src/features/transfer/MutateTransferForm/components/FilterFileNode/FilterFileNode.tsx index e1ed2d50..e741aed4 100644 --- a/src/features/transfer/MutateTransferForm/components/FilterFileNode/FilterFileNode.tsx +++ b/src/features/transfer/MutateTransferForm/components/FilterFileNode/FilterFileNode.tsx @@ -2,7 +2,6 @@ import React, { useMemo } from 'react'; import { CanvasNode } from '@shared/ui'; import { Handle, Position } from '@xyflow/react'; import { FilterOutlined } from '@ant-design/icons'; -import { TransformationForm, TransformationType } from '@entities/transformation'; import { useTranslation } from 'react-i18next'; import { @@ -10,6 +9,7 @@ import { TransferCanvasTransformNodeType, TRANSFER_CANVAS_TRANSFORM_NODE_TYPE_NAME_DISPLAY, } from '../TransferConnectionsCanvas'; +import { FilterFileFormItem } from '../FilterFileFormItem'; import classes from './styles.module.less'; @@ -24,14 +24,11 @@ export const FilterFileNode = () => { return ( <> - + ); - }, [t]); + }, []); return ( ({ canHaveEmptyRecordsList }: FilterFormItemProps) => { + const { t } = useTranslation('transformation'); + + return ( + + ); + }, +); diff --git a/src/features/transfer/MutateTransferForm/components/FilterRowsFormItem/index.ts b/src/features/transfer/MutateTransferForm/components/FilterRowsFormItem/index.ts new file mode 100644 index 00000000..6e5bfb97 --- /dev/null +++ b/src/features/transfer/MutateTransferForm/components/FilterRowsFormItem/index.ts @@ -0,0 +1 @@ +export * from './FilterRowsFormItem'; diff --git a/src/features/transfer/MutateTransferForm/components/FilterRowsNode/FilterRowsNode.tsx b/src/features/transfer/MutateTransferForm/components/FilterRowsNode/FilterRowsNode.tsx index 16ab2c78..68735393 100644 --- a/src/features/transfer/MutateTransferForm/components/FilterRowsNode/FilterRowsNode.tsx +++ b/src/features/transfer/MutateTransferForm/components/FilterRowsNode/FilterRowsNode.tsx @@ -2,7 +2,6 @@ import React, { useMemo } from 'react'; import { CanvasNode } from '@shared/ui'; import { Handle, Position } from '@xyflow/react'; import { FilterOutlined } from '@ant-design/icons'; -import { TransformationForm, TransformationType } from '@entities/transformation'; import { useTranslation } from 'react-i18next'; import { @@ -10,6 +9,7 @@ import { TransferCanvasTransformNodeType, TRANSFER_CANVAS_TRANSFORM_NODE_TYPE_NAME_DISPLAY, } from '../TransferConnectionsCanvas'; +import { FilterRowsFormItem } from '../FilterRowsFormItem'; import classes from './styles.module.less'; @@ -24,15 +24,11 @@ export const FilterRowsNode = () => { return ( <> - + ); - }, [t]); + }, []); return ( = { + [TransformationType.FILTER_ROWS]: { + title: 'filterRows', + filter: , + }, + [TransformationType.FILTER_COLUMNS]: { + title: 'filterColumns', + filter: , + }, + [TransformationType.FILTER_FILE]: { + title: 'filterFile', + filter: , + }, +} as const; diff --git a/src/features/transfer/MutateTransferForm/components/TransferConnectionsDefault/index.tsx b/src/features/transfer/MutateTransferForm/components/TransferConnectionsDefault/index.tsx index 68f76ef4..4be322cd 100644 --- a/src/features/transfer/MutateTransferForm/components/TransferConnectionsDefault/index.tsx +++ b/src/features/transfer/MutateTransferForm/components/TransferConnectionsDefault/index.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useMemo } from 'react'; import { Fieldset } from '@shared/ui'; import { useTranslation } from 'react-i18next'; @@ -6,15 +6,27 @@ import { SourceParams } from '../SourceParams'; import { TargetParams } from '../TargetParams'; import { TransferConnectionsDefaultProps } from './types'; +import { FILTER_TYPES_CONFIG } from './constants'; export const TransferConnectionsDefault = ({ groupId }: TransferConnectionsDefaultProps) => { const { t } = useTranslation('connection'); + const filters = useMemo( + () => + Object.entries(FILTER_TYPES_CONFIG).map(([key, { title, filter }]) => ( +
+ {filter} +
+ )), + [t], + ); + return ( <>
+ {filters}
diff --git a/src/features/transfer/MutateTransferForm/components/TransferConnectionsDefault/types.ts b/src/features/transfer/MutateTransferForm/components/TransferConnectionsDefault/types.ts index 581c506e..f0c10ab3 100644 --- a/src/features/transfer/MutateTransferForm/components/TransferConnectionsDefault/types.ts +++ b/src/features/transfer/MutateTransferForm/components/TransferConnectionsDefault/types.ts @@ -2,3 +2,10 @@ import { SourceParamsProps } from '../SourceParams'; import { TargetParamsProps } from '../TargetParams'; export interface TransferConnectionsDefaultProps extends SourceParamsProps, TargetParamsProps {} + +type TitleType = 'filterRows' | 'filterColumns' | 'filterFile'; + +export interface FilterTypeConfig { + title: TitleType; + filter: React.JSX.Element; +}