fix rowSelection process

SeedCompany · Sep 29, 2024 · 63cb403 · 63cb403
1 parent f9d4cdb
commit 63cb403
Showing 1 changed file with 12 additions and 36 deletions.
diff --git a/src/scenes/Dashboard/ProgressReportsWidget/ProgressReportsExpanded.tsx b/src/scenes/Dashboard/ProgressReportsWidget/ProgressReportsExpanded.tsx
@@ -5,11 +5,12 @@ import {
   GridColDef,
   GridEventListener,
   GridRenderCellParams,
+  GridRowId,
   GridToolbarColumnsButton,
   GridToolbarFilterButton,
 } from '@mui/x-data-grid-pro';
 import { merge } from 'lodash';
-import { useCallback, useEffect, useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import {
   EngagementFilters,
   ProgressReportFilters,
@@ -51,8 +52,7 @@ export const ProgressReportsColumns: Array<
     ...textColumn(),
     width: 200,
     valueGetter: (_, row) => row.parent.project.name.value,
-    renderCell: ({ value, row, api }) => {
-      console.log(api.isRowSelected(row.id));
+    renderCell: ({ value, row }) => {
       return (
         <Box
           sx={{
@@ -264,11 +264,6 @@ export const ProgressReportsExpanded = () => {
     end: {
       beforeInclusive: currentQuarter.endOf('quarter'),
     },
-    // engagement: {
-    //   project: {
-    //     mine: true,
-    //   },
-    // },
   } satisfies ProgressReportFilters;
 
   const [dataGridProps] = useDataGridSource({
@@ -296,28 +291,10 @@ export const ProgressReportsExpanded = () => {
     [dataGridProps.slotProps]
   );
 
-  const handleEvent: GridEventListener<'rowClick'> = useCallback(
-    ({ id }, event, details) => {
-      if (event.defaultPrevented) return;
-
-      event.preventDefault();
-      event.stopPropagation();
-
-      const selected = details.api.isRowSelected(id);
-      details.api.setRowSelectionModel(selected ? [] : [id]);
-
-      details.api.resetRowHeights();
-    },
-    []
-  );
-
-  useEffect(() => {
-    // The `subscribeEvent` method will automatically unsubscribe in the cleanup function of the `useEffect`.
-    return apiRef.current.subscribeEvent('rowClick', handleEvent);
-  }, [apiRef, handleEvent]);
+  const [selected, setSelected] = useState<GridRowId[]>([]);
 
-  // apiRef.current.subscribeEvent('rowClick', handleEvent);
-  // useGridApiEventHandler(apiRef, 'rowClick', handleEvent);
+  const handleRowClick: GridEventListener<'rowClick'> = ({ id }) =>
+    selected.length > 0 ? setSelected([]) : setSelected([id]);
 
   return (
     <Box
@@ -335,12 +312,11 @@ export const ProgressReportsExpanded = () => {
         columns={ProgressReportsColumns}
         hideFooter
         autoHeight={false}
-        onRowClick={handleEvent}
-        getRowHeight={(params) => {
-          if (apiRef.current.isRowSelected(params.id)) {
-            return 'auto';
-          }
-        }}
+        onRowClick={handleRowClick}
+        rowSelectionModel={selected}
+        getRowHeight={(params) =>
+          apiRef.current.isRowSelected(params.id) ? 'auto' : undefined
+        }
         sx={[
           {
             '&.MuiDataGrid-root .MuiDataGrid-cell': {
@@ -368,7 +344,7 @@ const ProgressReportsToolbar = () => (
     <GridToolbarFilterButton />
     <QuickFilters sx={{ flex: 1 }}>
       <QuickFilterResetButton />
-      <QuickFilterButton {...useFilterToggle('engagement.project.isMember')}>
+      <QuickFilterButton {...useFilterToggle('engagement.project.mine')}>
         Mine
       </QuickFilterButton>
       <QuickFilterButton {...useFilterToggle('engagement.project.pinned')}>