diff --git a/app/front-end/src/features/editor/components/editorView/editorColumnMenu.tsx b/app/front-end/src/features/editor/components/editorView/editorColumnMenu.tsx index 567c564..712086b 100644 --- a/app/front-end/src/features/editor/components/editorView/editorColumnMenu.tsx +++ b/app/front-end/src/features/editor/components/editorView/editorColumnMenu.tsx @@ -1,3 +1,6 @@ +import { EditorColumnMenuAggregationItem } from '@/features/editor/components/editorView'; +import { ColumnAggregation, EditorColumnMenuAggregationActions } from '@/features/editor/types'; +import { Divider } from '@mui/material'; import { styled } from '@mui/material/styles'; import { GridColumnMenuContainer, GridColumnMenuHideItem, GridColumnMenuProps } from '@mui/x-data-grid'; @@ -5,7 +8,10 @@ const StyledGridColumnMenuContainer = styled(GridColumnMenuContainer)(({ theme } backgroundColor: theme.palette.secondary.main, })); -interface GridColumnMenuContainerProps extends GridColumnMenuProps {} +interface GridColumnMenuContainerProps extends GridColumnMenuProps { + aggregationValues: ColumnAggregation; + handleAggregation: (field: string, action: EditorColumnMenuAggregationActions) => void; +} /** * `EditorColumnMenu` component customizes the column menu in a DataGrid with a styled container. @@ -31,9 +37,25 @@ interface GridColumnMenuContainerProps extends GridColumnMenuProps {} * * @returns {JSX.Element} A styled `GridColumnMenuContainer` containing a `GridColumnMenuHideItem`. */ -export const EditorColumnMenu: React.FC = ({ hideMenu, colDef, ...other }) => { +export const EditorColumnMenu: React.FC = ({ + aggregationValues, + handleAggregation, + hideMenu, + colDef, + ...other +}) => { + const aggregationActiveAction = aggregationValues[colDef.field] + ? aggregationValues[colDef.field].action + : EditorColumnMenuAggregationActions.NONE; + return ( + handleAggregation(colDef.field, action)} + /> + ); diff --git a/app/front-end/src/features/editor/components/editorView/editorColumnMenuAggregationItem.tsx b/app/front-end/src/features/editor/components/editorView/editorColumnMenuAggregationItem.tsx new file mode 100644 index 0000000..16dc9fa --- /dev/null +++ b/app/front-end/src/features/editor/components/editorView/editorColumnMenuAggregationItem.tsx @@ -0,0 +1,63 @@ +import { EditorColumnMenuAggregationActions } from '@/features/editor/types'; +import { Functions as FunctionsIcon } from '@mui/icons-material'; +import { Box, FormControl, InputLabel, MenuItem, Select, SelectChangeEvent, useTheme } from '@mui/material'; +import { MouseEvent, useState } from 'react'; + +export interface EditorColumnMenuAggregationItemProps { + initialValue: EditorColumnMenuAggregationActions; + onClick: (event: MouseEvent) => void; + onAction: (action: EditorColumnMenuAggregationActions) => void; +} + +export const EditorColumnMenuAggregationItem: React.FC = ({ + initialValue, + onClick, + onAction, +}) => { + const Theme = useTheme(); + const [value, setValue] = useState(initialValue); + + const handleChange = (event: SelectChangeEvent) => { + const action = event.target.value as EditorColumnMenuAggregationActions; + setValue(action); + onAction(action); + }; + + return ( + + + + Aggregation + + + + ); +}; diff --git a/app/front-end/src/features/editor/components/editorView/index.ts b/app/front-end/src/features/editor/components/editorView/index.ts index f7a5060..2841630 100644 --- a/app/front-end/src/features/editor/components/editorView/index.ts +++ b/app/front-end/src/features/editor/components/editorView/index.ts @@ -1,3 +1,7 @@ export { EditorColumnMenu } from './editorColumnMenu'; +export { EditorColumnMenuAggregationItem } from './editorColumnMenuAggregationItem'; +export type { EditorColumnMenuAggregationItemProps } from './editorColumnMenuAggregationItem'; +export { EditorHeader } from './editorHeader'; +export type { EditorHeaderProps } from './editorHeader'; export { EditorToolbar } from './editorToolbar'; export { EditorView } from './editorView';