From 6bfde879f3c3bf6d0034aad51cb4a386351516bd Mon Sep 17 00:00:00 2001
From: Mantvydas Deltuva <mantvydasdeltuva@gmail.com>
Date: Tue, 3 Sep 2024 17:25:45 +0300
Subject: [PATCH] MDE/PKFE-16 custom data grid header definition

---
 .../components/editorView/editorHeader.tsx    | 35 +++++++++++++++++++
 .../editor/types/columnAggregation.ts         |  5 +++
 .../editorColumnMenuAggregationActions.ts     |  8 +++++
 .../src/features/editor/types/index.ts        |  2 ++
 4 files changed, 50 insertions(+)
 create mode 100644 app/front-end/src/features/editor/components/editorView/editorHeader.tsx
 create mode 100644 app/front-end/src/features/editor/types/columnAggregation.ts
 create mode 100644 app/front-end/src/features/editor/types/editorColumnMenuAggregationActions.ts

diff --git a/app/front-end/src/features/editor/components/editorView/editorHeader.tsx b/app/front-end/src/features/editor/components/editorView/editorHeader.tsx
new file mode 100644
index 0000000..b441551
--- /dev/null
+++ b/app/front-end/src/features/editor/components/editorView/editorHeader.tsx
@@ -0,0 +1,35 @@
+import { ColumnAggregation } from '@/features/editor/types';
+import { Box, Typography, useTheme } from '@mui/material';
+import React from 'react';
+
+export interface EditorHeaderProps {
+  columnName: string;
+  gridColumnsAggregation: ColumnAggregation;
+}
+
+export const EditorHeader: React.ElementType<EditorHeaderProps> = ({ columnName, gridColumnsAggregation }) => {
+  const Theme = useTheme();
+
+  if (!gridColumnsAggregation[columnName])
+    return <Typography sx={{ fontSize: '0.875rem', fontWeight: 'bold' }}>{columnName}</Typography>;
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Box sx={{ display: 'flex', flexDirection: 'row', gap: '0.5rem', alignItems: 'center' }}>
+        <Typography
+          sx={{
+            fontSize: '0.875rem',
+            fontWeight: 'bold',
+            color: Theme.palette.primary.main,
+          }}
+        >
+          {gridColumnsAggregation[columnName].action.toUpperCase()}
+        </Typography>
+        <Typography sx={{ fontSize: '0.875rem', fontWeight: 'bold' }}>{columnName}</Typography>
+      </Box>
+      <Typography sx={{ fontSize: '0.75rem', fontWeight: 'bold', color: Theme.palette.primary.main }}>
+        {gridColumnsAggregation[columnName].value}
+      </Typography>
+    </Box>
+  );
+};
diff --git a/app/front-end/src/features/editor/types/columnAggregation.ts b/app/front-end/src/features/editor/types/columnAggregation.ts
new file mode 100644
index 0000000..1ed70ee
--- /dev/null
+++ b/app/front-end/src/features/editor/types/columnAggregation.ts
@@ -0,0 +1,5 @@
+import { EditorColumnMenuAggregationActions } from '@/features/editor/types';
+
+export interface ColumnAggregation {
+  [field: string]: { action: EditorColumnMenuAggregationActions; value: string };
+}
diff --git a/app/front-end/src/features/editor/types/editorColumnMenuAggregationActions.ts b/app/front-end/src/features/editor/types/editorColumnMenuAggregationActions.ts
new file mode 100644
index 0000000..a6bf179
--- /dev/null
+++ b/app/front-end/src/features/editor/types/editorColumnMenuAggregationActions.ts
@@ -0,0 +1,8 @@
+export enum EditorColumnMenuAggregationActions {
+    NONE = '',
+    SUM = 'sum',
+    AVG = 'avg',
+    MIN = 'min',
+    MAX = 'max',
+    COUNT = 'cnt',
+}
\ No newline at end of file
diff --git a/app/front-end/src/features/editor/types/index.ts b/app/front-end/src/features/editor/types/index.ts
index eb19421..a4ca305 100644
--- a/app/front-end/src/features/editor/types/index.ts
+++ b/app/front-end/src/features/editor/types/index.ts
@@ -1,5 +1,7 @@
+export type { ColumnAggregation } from './columnAggregation';
 export { ConsoleFeedbackTypes } from './consoleFeedback';
 export type { ConsoleFeedback } from './consoleFeedback';
+export { EditorColumnMenuAggregationActions } from './editorColumnMenuAggregationActions';
 export type { FileDataRequestDTO, FileDataResponseDTO } from './fileData';
 export { FileTreeItemContextMenuActions } from './fileTreeItemContextMenuActions';
 export type { FileTreeViewItemProps } from './fileTreeViewItemProps';