From bf09a586218758d9bfe5e91f0581d0d689e4ad5b Mon Sep 17 00:00:00 2001
From: Aiga115 <aiguljhyldyzbekkyzy@gmail.com>
Date: Fri, 27 Sep 2024 14:37:03 +0200
Subject: [PATCH] AREG-147 fix filter name in data grid, checkbox selected
 state and alignment of column menu item

---
 .../src/components/Home/AntibodiesTable.tsx   | 27 ++++++++++---------
 .../src/components/Home/CustomFilterPanel.tsx | 14 ++++++++--
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/applications/portal/frontend/src/components/Home/AntibodiesTable.tsx b/applications/portal/frontend/src/components/Home/AntibodiesTable.tsx
index d2a21507..cb6b2c9a 100644
--- a/applications/portal/frontend/src/components/Home/AntibodiesTable.tsx
+++ b/applications/portal/frontend/src/components/Home/AntibodiesTable.tsx
@@ -55,7 +55,7 @@ const StyledCheckBox = (props) => {
   );
 };
 
-const getRowId = (ab: Antibody) => `${ab.abId}${Math.random()}`;
+const getRowId = (ab: Antibody) => `${ab.ix}`;
 
 const CustomToolbar = ({ activeTab, searchedAntibodies, filterModel }) => {
   const [activeSelection, setActiveSelection] = useState(true);
@@ -433,7 +433,7 @@ const AntibodiesTable = (props) => {
   }
 
   const setNewFilterColumn = (model) => {
-    let newblankFilter = { ...BLANK_FILTER_MODEL, field: model.items[0].field, id: getRandomId() }
+    let newblankFilter = { ...BLANK_FILTER_MODEL, columnField: model.items[0].field, field: model.items[0].field, id: getRandomId() }
     filterModel.items.push(newblankFilter);
     setFilterModel(filterModel);
   }
@@ -655,19 +655,22 @@ const AntibodiesTable = (props) => {
         "& .MuiTypography-body1": {
           fontSize: "0.875rem",
           color: "grey.500",
-        },
+        }
       },
     },
-    columnMenuSlots: {
-      columnMenu: {
-        sx: {
-          "& .MuiMenuItem-root": {
-            fontSize: "0.875rem",
-            color: "grey.500",
-          },
-        },
-      },
+    columnMenu: {
+      style: {
+        fontSize: "0.875rem",
+        color: "grey.500",
+      }
     },
+    basePopper: {
+      sx: {
+        "& .MuiListItemText-root .MuiListItemText-primary": {
+          display: "flex"
+        }
+      }
+    }
   };
 
   const [showColumns, setShowColumns] = useState<GridColumnVisibilityModel>(getColumnsToDisplay(columns));
diff --git a/applications/portal/frontend/src/components/Home/CustomFilterPanel.tsx b/applications/portal/frontend/src/components/Home/CustomFilterPanel.tsx
index b9ab139c..8d34b88c 100644
--- a/applications/portal/frontend/src/components/Home/CustomFilterPanel.tsx
+++ b/applications/portal/frontend/src/components/Home/CustomFilterPanel.tsx
@@ -141,7 +141,12 @@ const CustomFilterRow = ({ columns, filterSet, handleFilterSet, removeFilterSet
         value={filterSet.columnField}
         onChange={(e: SelectChangeEvent) => handleFilterSet({ ...filterSet, columnField: e.target.value })}
         size="small"
-        sx={{ width: "12em" }}
+        sx={{ 
+          width: "12em",
+          '& .MuiSelect-select': {
+            textAlign: 'left'
+          }
+        }}
       >
         {columns.map((column) => (
           <MenuItem key={column.field} value={column.field}>
@@ -154,7 +159,12 @@ const CustomFilterRow = ({ columns, filterSet, handleFilterSet, removeFilterSet
         value={filterSet.operatorValue}
         onChange={(e: SelectChangeEvent) => changeOperator(e.target.value)}
         size="small"
-        sx={{ width: "8em" }}
+        sx={{ 
+          width: "8em",
+          '& .MuiSelect-select': {
+            textAlign: 'left'
+          }
+        }}
       >
         {Object.keys(operators).map((op) => (
           <MenuItem key={op} value={op}>