From cf130e3f9f71aac9c64e6351e8c6a1f596f7d59f Mon Sep 17 00:00:00 2001
From: Alek Perron <alek.perron.hsj@ssss.gouv.qc.ca>
Date: Tue, 6 Feb 2024 13:24:21 -0500
Subject: [PATCH] feat: SKFP-927 add sorting to certain columns in studies

---
 .../Studies/components/PageContent/index.tsx      | 15 ++++++++++++---
 src/views/Studies/index.tsx                       |  6 ++++++
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/views/Studies/components/PageContent/index.tsx b/src/views/Studies/components/PageContent/index.tsx
index e690bb8e0..f356408a4 100644
--- a/src/views/Studies/components/PageContent/index.tsx
+++ b/src/views/Studies/components/PageContent/index.tsx
@@ -5,9 +5,11 @@ import { ReadOutlined } from '@ant-design/icons';
 import { TExtendedMapping } from '@ferlab/ui/core/components/filters/types';
 import ProTable from '@ferlab/ui/core/components/ProTable';
 import { ProColumnType } from '@ferlab/ui/core/components/ProTable/types';
+import { tieBreaker } from '@ferlab/ui/core/components/ProTable/utils';
 import QueryBuilder from '@ferlab/ui/core/components/QueryBuilder';
 import useQueryBuilderState from '@ferlab/ui/core/components/QueryBuilder/utils/useQueryBuilderState';
 import { isEmptySqon, resolveSyntheticSqon } from '@ferlab/ui/core/data/sqon/utils';
+import { SortDirection } from '@ferlab/ui/core/graphql/constants';
 import { IExtendedMappingResults } from '@ferlab/ui/core/graphql/types';
 import GridCard from '@ferlab/ui/core/view/v2/GridCard';
 import { Space, Typography } from 'antd';
@@ -52,6 +54,12 @@ const PageContent = ({
     first: PAGE_SIZE,
     offset: PAGE_SIZE * (queryConfig.pageIndex - 1),
     sqon: resolvedSqon,
+    sort: tieBreaker({
+      sort: queryConfig.sort,
+      defaultSort: [],
+      field: 'study_id',
+      order: queryConfig.operations?.previous ? SortDirection.Desc : SortDirection.Asc,
+    }),
   });
 
   useEffect(() => {
@@ -114,11 +122,12 @@ const PageContent = ({
             initialColumnState={userInfo?.config.study?.tables?.study?.columns}
             wrapperClassName={styles.tableWrapper}
             loading={loading}
+            showSorterTooltip={false}
             bordered
-            onChange={({ current, pageSize }, _, sorter) => {
+            onChange={(_pagination, _filter, sorter) => {
               setQueryConfig({
-                pageIndex: current!,
-                size: pageSize!,
+                pageIndex: DEFAULT_PAGE_INDEX,
+                size: queryConfig.size!,
                 sort: formatQuerySortList(sorter),
               });
             }}
diff --git a/src/views/Studies/index.tsx b/src/views/Studies/index.tsx
index 51003c1f1..5f654b284 100644
--- a/src/views/Studies/index.tsx
+++ b/src/views/Studies/index.tsx
@@ -49,6 +49,7 @@ const columns: ProColumnType<any>[] = [
   {
     key: 'study_code',
     title: 'Code',
+    sorter: { multiple: 1 },
     render: (record: IStudyEntity) =>
       record?.website ? (
         <ExternalLink href={record.website}>{record.study_code}</ExternalLink>
@@ -58,6 +59,7 @@ const columns: ProColumnType<any>[] = [
   },
   {
     key: 'study_name',
+    sorter: { multiple: 1 },
     title: 'Name',
     dataIndex: 'study_name',
     width: 500,
@@ -80,6 +82,7 @@ const columns: ProColumnType<any>[] = [
     key: 'external_id',
     title: 'dbGaP',
     dataIndex: 'external_id',
+    sorter: { multiple: 1 },
     render: (externalId: string) =>
       externalId ? (
         <ExternalLink
@@ -94,6 +97,7 @@ const columns: ProColumnType<any>[] = [
   {
     key: 'participant_count',
     title: 'Participants',
+    sorter: { multiple: 1 },
     render: (record: IStudyEntity) => {
       const participantCount = record.participant_count;
 
@@ -126,6 +130,7 @@ const columns: ProColumnType<any>[] = [
   {
     key: 'biospecimen_count',
     title: 'Biospecimens',
+    sorter: { multiple: 1 },
     render: (record: IStudyEntity) => {
       const biospecimenCount = record.biospecimen_count;
 
@@ -159,6 +164,7 @@ const columns: ProColumnType<any>[] = [
     key: 'family_count',
     title: 'Families',
     dataIndex: 'family_count',
+    sorter: { multiple: 1 },
     render: (family_count: number) =>
       family_count ? numberWithCommas(family_count) : TABLE_EMPTY_PLACE_HOLDER,
   },