Added shift+click sorting #1541

ral-facilities · Sep 1, 2023 · 70a8178 · 70a8178
1 parent ec7d542
commit 70a8178
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 22 deletions.
diff --git a/packages/datagateway-common/src/api/index.tsx b/packages/datagateway-common/src/api/index.tsx
@@ -260,25 +260,35 @@ export const getApiParams = (
 export const useSort = (): ((
   sortKey: string,
   order: Order | null,
-  updateMethod: UpdateMethod
+  updateMethod: UpdateMethod,
+  shiftDown?: boolean
 ) => void) => {
   const { push, replace } = useHistory();
 
   return React.useCallback(
     (
       sortKey: string,
       order: Order | null,
-      updateMethod: UpdateMethod
+      updateMethod: UpdateMethod,
+      shiftDown?: boolean
     ): void => {
       let query = parseSearchToQuery(window.location.search);
+      console.log(query);
       if (order !== null) {
-        query = {
-          ...query,
-          sort: {
-            ...query.sort,
-            [sortKey]: order,
-          },
-        };
+        query = shiftDown
+          ? {
+              ...query,
+              sort: {
+                ...query.sort,
+                [sortKey]: order,
+              },
+            }
+          : {
+              ...query,
+              sort: {
+                [sortKey]: order,
+              },
+            };
       } else {
         // if order is null, user no longer wants to sort by that column so remove column from sort state
         const { [sortKey]: order, ...rest } = query.sort;

diff --git a/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.tsx b/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.tsx
@@ -10,6 +10,9 @@ import {
   SxProps,
 } from '@mui/material';
 import Draggable from 'react-draggable';
+import SortIcon from '@mui/icons-material/Sort';
+import AddIcon from '@mui/icons-material/Add';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
 
 const DataHeader = React.memo(
   (
@@ -19,13 +22,15 @@ const DataHeader = React.memo(
       onSort: (
         column: string,
         order: Order | null,
-        defaultSort: UpdateMethod
+        defaultSort: UpdateMethod,
+        shiftDown?: boolean
       ) => void;
       resizeColumn: (dataKey: string, deltaX: number) => void;
       labelString: string;
       icon?: React.ComponentType<unknown>;
       filterComponent?: (label: string, dataKey: string) => React.ReactElement;
       defaultSort?: Order;
+      shiftDown?: boolean;
     }
   ): React.ReactElement => {
     const {
@@ -40,15 +45,18 @@ const DataHeader = React.memo(
       resizeColumn,
       icon: Icon,
       filterComponent,
+      shiftDown,
     } = props;
 
     const currSortDirection = sort[dataKey];
 
+    const [hover, setHover] = React.useState(false);
+
     //Apply default sort on page load (but only if not already defined in URL params)
     //This will apply them in the order of the column definitions given to a table
     React.useEffect(() => {
       if (defaultSort !== undefined && currSortDirection === undefined)
-        onSort(dataKey, defaultSort, 'replace');
+        onSort(dataKey, defaultSort, 'replace', false);
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
@@ -65,16 +73,45 @@ const DataHeader = React.memo(
     }
 
     const inner = !disableSort ? (
-      <TableSortLabel
-        className={'tour-dataview-sort'}
-        active={dataKey in sort}
-        direction={currSortDirection}
-        onClick={() => onSort(dataKey, nextSortDirection, 'push')}
-      >
-        <Typography noWrap sx={{ fontSize: 'inherit', lineHeight: 'inherit' }}>
-          {label}
-        </Typography>
-      </TableSortLabel>
+      dataKey in sort ? (
+        <TableSortLabel
+          className={'tour-dataview-sort'}
+          active={true}
+          direction={currSortDirection}
+          onClick={() =>
+            onSort(dataKey, nextSortDirection, 'replace', shiftDown)
+          }
+        >
+          <Typography
+            noWrap
+            sx={{ fontSize: 'inherit', lineHeight: 'inherit' }}
+          >
+            {label}
+          </Typography>
+        </TableSortLabel>
+      ) : (
+        <TableSortLabel
+          className={'tour-dataview-sort'}
+          active={true}
+          direction={'desc'}
+          onClick={() => {
+            onSort(dataKey, nextSortDirection, 'replace', shiftDown);
+            setHover(false);
+          }}
+          onMouseEnter={() => setHover(true)}
+          onMouseLeave={() => setHover(false)}
+          IconComponent={
+            hover ? ArrowUpwardIcon : shiftDown ? AddIcon : SortIcon
+          }
+        >
+          <Typography
+            noWrap
+            sx={{ fontSize: 'inherit', lineHeight: 'inherit' }}
+          >
+            {label}
+          </Typography>
+        </TableSortLabel>
+      )
     ) : (
       <Typography noWrap sx={{ fontSize: 'inherit', lineHeight: 'inherit' }}>
         {label}

diff --git a/packages/datagateway-common/src/table/table.component.tsx b/packages/datagateway-common/src/table/table.component.tsx
@@ -123,7 +123,8 @@ interface VirtualizedTableProps {
   onSort: (
     column: string,
     order: Order | null,
-    updateMethod: UpdateMethod
+    updateMethod: UpdateMethod,
+    shiftDown?: boolean
   ) => void;
   detailsPanel?: React.ComponentType<DetailsPanelProps>;
   actions?: React.ComponentType<TableActionProps>[];
@@ -163,6 +164,30 @@ const VirtualizedTable = React.memo(
       disableSelectAll,
     } = props;
 
+    const [shiftDown, setShiftDown] = React.useState(false);
+    // add event listener to listen for shift key being pressed
+    React.useEffect(() => {
+      const handleKeyDown = (event: KeyboardEvent): void => {
+        if (event.key === 'Shift') {
+          setShiftDown(true);
+        }
+      };
+
+      const handleKeyUp = (event: KeyboardEvent): void => {
+        if (event.key === 'Shift') {
+          setShiftDown(false);
+        }
+      };
+
+      document.addEventListener('keydown', handleKeyDown);
+      document.addEventListener('keyup', handleKeyUp);
+
+      return (): void => {
+        document.removeEventListener('keydown', handleKeyDown);
+        document.removeEventListener('keyup', handleKeyUp);
+      };
+    }, []);
+
     if (
       (props.loadMoreRows && typeof totalRowCount === 'undefined') ||
       (totalRowCount && typeof props.loadMoreRows === 'undefined')
@@ -452,6 +477,7 @@ const VirtualizedTable = React.memo(
                               filterComponent={filterComponent}
                               resizeColumn={resizeColumn}
                               defaultSort={defaultSort}
+                              shiftDown={shiftDown}
                             />
                           )}
                           className={className}