Merge pull request #2124 from tim48-robot/fix/community-studies-sorting

fix sorting, check quick video

Author: KarinePistili

src/shared/components/tables/ListComponent.vue

@@ -3,7 +3,7 @@
     :headers="headers"
     :items="items"
     :sort-by="sortBy || [{ key: 'updateDate', order: 'desc' }]"
-    item-key="id"
+    :item-value="itemValue"
     density="comfortable"
     class="rounded-lg"
     elevation="2"
@@ -185,9 +185,13 @@ const { t } = useI18n()
 // Composables
 const typeRef = toRef(props, 'type')
 const showActionsRef = toRef(props, 'showActions')
-const { headers, getEmptyStateMessage } = useDataTableConfig(typeRef, t, {
-  showActions: showActionsRef,
-})
+const { headers, getEmptyStateMessage, itemValue } = useDataTableConfig(
+  typeRef,
+  t,
+  {
+    showActions: showActionsRef,
+  },
+)
 const {
   getItemTitle,
   getOwnerName,

src/shared/composables/useDataTableConfig.js

@@ -1,9 +1,51 @@
 import { computed, toRef, unref } from 'vue'
+import { getSessionStatus } from '@/shared/utils/sessionsUtils'
+
+const toSortableTimestamp = (value) => {
+  if (!value) return 0
+  if (typeof value?.toMillis === 'function') return value.toMillis()
+
+  const timestamp = new Date(value).getTime()
+  return Number.isNaN(timestamp) ? 0 : timestamp
+}
+
+const getSessionItemValue = (item) =>
+  [item.id, item.userDocId ?? item.email, item.email, item.testDate]
+    .map((value) => encodeURIComponent(String(value ?? '')))
+    .join(':')
+
+const getSortableTitle = (item) =>
+  item.header?.templateTitle ?? item.testTitle ?? item.title ?? item.email ?? ''
+
+const getSortableOwner = (item, type) => {
+  if (type === 'myTemplates') return ''
+  if (type === 'publicTemplates') {
+    return item.header?.templateAuthor?.userEmail ?? ''
+  }
+
+  return item.testAdmin?.email ?? item.testAuthorEmail ?? ''
+}
+
+const getSortableParticipantCount = (item) =>
+  item.numberColaborators ?? item.cooperators?.length ?? 0
+
+const getSortableCreationDate = (item, type) => {
+  if (type === 'myTemplates' || type === 'publicTemplates') {
+    return item.header?.creationDate ?? 0
+  }
+
+  return item.creationDate ?? item.updateDate ?? 0
+}
 
 export function useDataTableConfig(type, t, options = {}) {
   const typeRef = toRef(type)
 
+  const itemValue = (item) =>
+    typeRef.value === 'sessions' ? getSessionItemValue(item) : item.id
+
   const headers = computed(() => {
+    const currentType = typeRef.value
+
     const baseHeaders = [
       {
         title: t('common.table.type'),
@@ -15,8 +57,7 @@ export function useDataTableConfig(type, t, options = {}) {
         title: t('common.table.name'),
         key: 'name',
         sortable: true,
-        value: (item) =>
-          item.header?.templateTitle ?? item.testTitle ?? item.email,
+        value: getSortableTitle,
       },
       {
         title: t('common.table.tags'),
@@ -28,45 +69,50 @@ export function useDataTableConfig(type, t, options = {}) {
         title: t('common.table.owner'),
         key: 'owner',
         sortable: true,
+        value: (item) => getSortableOwner(item, currentType),
       },
     ]
 
-    if (typeRef.value === 'sessions') {
+    if (currentType === 'sessions') {
       baseHeaders.push({
         title: t('common.table.evaluator'),
         key: 'evaluator',
         sortable: true,
+        value: (item) => item.email ?? '',
       })
       baseHeaders.push({
         title: t('common.table.status'),
         key: 'status',
         sortable: true,
+        value: (item) => getSessionStatus(item.testDate).status,
       })
       baseHeaders.push({
         title: t('common.table.sessionDate'),
         key: 'testDate',
         sortable: true,
+        value: (item) => toSortableTimestamp(item.testDate),
       })
     }
 
     if (
-      typeRef.value !== 'sessions' &&
-      typeRef.value !== 'myTemplates' &&
-      typeRef.value !== 'publicTemplates'
+      currentType !== 'sessions' &&
+      currentType !== 'myTemplates' &&
+      currentType !== 'publicTemplates'
     ) {
       baseHeaders.push({
         title: t('common.table.participants'),
         key: 'participants',
         sortable: true,
         align: 'center',
-        value: (item) => item.numberColaborators ?? 0,
+        value: getSortableParticipantCount,
       })
     }
 
     baseHeaders.push({
       title: t('common.table.created'),
       key: 'creationDate',
       sortable: true,
+      value: (item) => getSortableCreationDate(item, currentType),
     })
 
     if (unref(options.showActions)) {
@@ -99,5 +145,6 @@ export function useDataTableConfig(type, t, options = {}) {
   return {
     headers,
     getEmptyStateMessage,
+    itemValue,
   }
 }

tests/unit/useDataTableConfig.spec.js

@@ -0,0 +1,42 @@
+import { ref } from 'vue'
+import { useDataTableConfig } from '@/shared/composables/useDataTableConfig'
+
+describe('useDataTableConfig', () => {
+  it('gives sessions unique row values and sortable derived columns', () => {
+    const { headers, itemValue } = useDataTableConfig(
+      ref('sessions'),
+      (key) => key,
+    )
+    const firstSession = {
+      id: 'halo-study',
+      email: 'first@example.com',
+      testDate: '2026-07-01T08:38:00.000Z',
+    }
+    const secondSession = {
+      id: 'halo-study',
+      email: 'second@example.com',
+      testDate: '2026-07-01T08:38:00.000Z',
+    }
+
+    expect(itemValue(firstSession)).not.toBe(itemValue(secondSession))
+
+    const statusHeader = headers.value.find(({ key }) => key === 'status')
+    const sessionDateHeader = headers.value.find(
+      ({ key }) => key === 'testDate',
+    )
+
+    expect(statusHeader.value({
+      ...firstSession,
+      testDate: '2000-01-01T00:00:00.000Z',
+    })).toBe('completed')
+    expect(sessionDateHeader.value(firstSession)).toBe(
+      new Date(firstSession.testDate).getTime(),
+    )
+  })
+
+  it('keeps study rows keyed by their document id', () => {
+    const { itemValue } = useDataTableConfig(ref('myTests'), (key) => key)
+
+    expect(itemValue({ id: 'study-id' })).toBe('study-id')
+  })
+})