From 1f3e4a25d424674b9932913aa37a4d408622eb45 Mon Sep 17 00:00:00 2001
From: Manuel Holtgrewe <manuel.holtgrewe@bih-charite.de>
Date: Wed, 13 Sep 2023 10:58:27 +0200
Subject: [PATCH] fix: table sorting on variants result page (#1128)

---
 .../src/components/FilterResultsTable.vue     | 39 +++++++++++++------
 1 file changed, 27 insertions(+), 12 deletions(-)

diff --git a/variants/vueapp/src/components/FilterResultsTable.vue b/variants/vueapp/src/components/FilterResultsTable.vue
index 50d46d52f..f7e7c7438 100644
--- a/variants/vueapp/src/components/FilterResultsTable.vue
+++ b/variants/vueapp/src/components/FilterResultsTable.vue
@@ -1,8 +1,7 @@
 <script setup>
 import EasyDataTable from 'vue3-easy-data-table'
 import 'vue3-easy-data-table/dist/style.css'
-import { computed, onBeforeMount, onMounted, ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
+import { computed, onBeforeMount, reactive, ref, watch } from 'vue'
 
 import {
   displayName,
@@ -107,18 +106,18 @@ const displayColumns = computed({
 /** The table server options, updated by Vue3EasyDataTable. */
 const tableServerOptions = computed({
   get() {
-    return {
-      page: variantResultSetStore.pageNo || 1,
-      rowsPerPage: variantResultSetStore.pageSize || 50,
-      sortBy: variantResultSetStore.sortBy || 'position',
-      sortType: variantResultSetStore.sortType || 'asc',
-    }
+    return reactive({
+      page: variantResultSetStore.tablePageNo || 1,
+      rowsPerPage: variantResultSetStore.tablePageSize || 50,
+      sortBy: variantResultSetStore.tableSortBy || 'position',
+      sortType: variantResultSetStore.tableSortType || 'asc',
+    })
   },
   set(options) {
-    variantResultSetStore.pageNo = options.page
-    variantResultSetStore.pageSize = options.rowsPerPage
-    variantResultSetStore.sortBy = options.sortBy
-    variantResultSetStore.sortType = options.sortType
+    variantResultSetStore.tablePageNo = options.page
+    variantResultSetStore.tablePageSize = options.rowsPerPage
+    variantResultSetStore.tableSortBy = options.sortBy
+    variantResultSetStore.tableSortType = options.sortType
   },
 })
 
@@ -463,6 +462,22 @@ const extraAnnoFields = computed(
   () => variantResultSetStore.extraAnnoFields ?? [],
 )
 
+/** Update display when pagination or sorting changed. */
+watch(
+  [
+    () => tableServerOptions.value.page,
+    () => tableServerOptions.value.rowsPerPage,
+    () => tableServerOptions.value.sortBy,
+    () => tableServerOptions.value.sortType,
+  ],
+  async (
+    [_newPageNo, _newRowsPerPage, _newSortBy, _newSortType],
+    [_oldPageNo, _oldRowsPerPage, _oldSortBy, _oldSortType],
+  ) => {
+    await loadFromServer()
+  },
+)
+
 /** Load data when mounted. */
 onBeforeMount(async () => {
   if (variantResultSetStore.resultSetUuid) {