MDE/PKFE-16 custom editor column menu aggregation item implementation

app/front-end/src/features/editor/components/editorView/editorColumnMenu.tsx

@@ -1,11 +1,17 @@
+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';
 
 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<GridColumnMenuContainerProps> = ({ hideMenu, colDef, ...other }) => {
+export const EditorColumnMenu: React.FC<GridColumnMenuContainerProps> = ({
+  aggregationValues,
+  handleAggregation,
+  hideMenu,
+  colDef,
+  ...other
+}) => {
+  const aggregationActiveAction = aggregationValues[colDef.field]
+    ? aggregationValues[colDef.field].action
+    : EditorColumnMenuAggregationActions.NONE;
+
   return (
     <StyledGridColumnMenuContainer hideMenu={hideMenu} colDef={colDef} {...other}>
+      <EditorColumnMenuAggregationItem
+        initialValue={aggregationActiveAction}
+        onClick={hideMenu}
+        onAction={(action) => handleAggregation(colDef.field, action)}
+      />
+      <Divider />
       <GridColumnMenuHideItem onClick={hideMenu} colDef={colDef!} />
     </StyledGridColumnMenuContainer>
   );

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<EditorColumnMenuAggregationItemProps> = ({
+  initialValue,
+  onClick,
+  onAction,
+}) => {
+  const Theme = useTheme();
+  const [value, setValue] = useState<EditorColumnMenuAggregationActions>(initialValue);
+
+  const handleChange = (event: SelectChangeEvent) => {
+    const action = event.target.value as EditorColumnMenuAggregationActions;
+    setValue(action);
+    onAction(action);
+  };
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'row',
+        gap: '1rem',
+        alignItems: 'center',
+        px: '0.85rem',
+        py: '1rem',
+      }}
+    >
+      <FunctionsIcon sx={{ color: Theme.palette.text.secondary }} />
+      <FormControl fullWidth>
+        <InputLabel sx={{ color: Theme.palette.text.primary }}>Aggregation</InputLabel>
+        <Select id={'aggregation-select'} label={'Aggregation'} value={value} onChange={handleChange}>
+          <MenuItem value={EditorColumnMenuAggregationActions.NONE} onClick={onClick}>
+            ...
+          </MenuItem>
+          <MenuItem value={EditorColumnMenuAggregationActions.SUM} onClick={onClick}>
+            Sum
+          </MenuItem>
+          <MenuItem value={EditorColumnMenuAggregationActions.AVG} onClick={onClick}>
+            Average
+          </MenuItem>
+          <MenuItem value={EditorColumnMenuAggregationActions.MIN} onClick={onClick}>
+            Minimum
+          </MenuItem>
+          <MenuItem value={EditorColumnMenuAggregationActions.MAX} onClick={onClick}>
+            Maximum
+          </MenuItem>
+          <MenuItem value={EditorColumnMenuAggregationActions.COUNT} onClick={onClick}>
+            Count
+          </MenuItem>
+        </Select>
+      </FormControl>
+    </Box>
+  );
+};

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';