Fix previous instance page index and sort order

src/components/dialogs/PreviousInstancesDialog/PreviousInstancesInfoDialog.vue

@@ -11,7 +11,9 @@
             :table-style="tableStyle"
             :page-sizes="pageSizes"
             :total-items="totalItems"
-            :on-page-size-change="handlePageSizeChange">
+            :on-page-size-change="handlePageSizeChange"
+            :on-page-change="handlePageChange"
+            :on-sort-change="handleSortChange">
             <template #toolbar>
                 <div style="display: flex; align-items: center; justify-content: space-between">
                     <Location :location="location.tag" style="font-size: 14px" />
@@ -43,15 +45,42 @@
     import { useVrcxVueTable } from '../../../lib/table/useVrcxVueTable';
 
     const { lookupUser } = useUserStore();
-    const { previousInstancesInfoDialog } = storeToRefs(useInstanceStore());
+    const { previousInstancesInfoDialog, previousInstancesInfoState } = storeToRefs(useInstanceStore());
     const { gameLogIsFriend, gameLogIsFavorite } = useGameLogStore();
     const { t } = useI18n();
 
+    const dialogState = computed(() => {
+        return previousInstancesInfoState.value;
+    });
+
     const loading = ref(false);
     const rawRows = ref([]);
     const pageSizes = [10, 25, 50, 100];
-    const pageSize = ref(10);
+    const pageSize = computed({
+        get: () => dialogState.value.pageSize,
+        set: (value) => {
+            dialogState.value.pageSize = value;
+        }
+    });
+    const pageIndex = computed({
+        get: () => dialogState.value.pageIndex,
+        set: (value) => {
+            dialogState.value.pageIndex = value;
+        }
+    });
     const tableStyle = { maxHeight: '400px' };
+    const search = computed({
+        get: () => dialogState.value.search,
+        set: (value) => {
+            dialogState.value.search = value;
+        }
+    });
+    const sortBy = computed({
+        get: () => dialogState.value.sortBy,
+        set: (value) => {
+            dialogState.value.sortBy = value;
+        }
+    });
 
     const location = ref({
         tag: '',
@@ -79,7 +108,6 @@
 
     const { stringComparer } = storeToRefs(useSearchStore());
     const vrcxStore = useVrcxStore();
-    const search = ref('');
 
     const displayRows = computed(() => {
         const q = String(search.value ?? '')
@@ -103,9 +131,9 @@
         },
         columns: columns.value,
         getRowId: (row) => row?.id ?? row?.userId ?? row?.displayName ?? JSON.stringify(row ?? {}),
-        initialSorting: [{ id: 'created_at', desc: true }],
+        initialSorting: sortBy.value,
         initialPagination: {
-            pageIndex: 0,
+            pageIndex: pageIndex.value,
             pageSize: pageSize.value
         },
         tableOptions: {
@@ -134,6 +162,14 @@
         pageSize.value = size;
     };
 
+    const handlePageChange = (page) => {
+        pageIndex.value = Math.max(0, page - 1);
+    };
+
+    const handleSortChange = (sorting) => {
+        sortBy.value = sorting;
+    };
+
     watch(
         () => previousInstancesInfoDialog.value.visible,
         (value) => {
@@ -150,6 +186,10 @@
     function init() {
         loading.value = true;
         location.value = parseLocation(previousInstancesInfoDialog.value.instanceId);
+        if (previousInstancesInfoDialog.value.lastId !== previousInstancesInfoDialog.value.instanceId) {
+            table.setPageIndex(0);
+            previousInstancesInfoDialog.value.lastId = previousInstancesInfoDialog.value.instanceId;
+        }
     }
 
     function refreshPreviousInstancesInfoTable() {

src/components/dialogs/PreviousInstancesDialog/PreviousInstancesListDialog.vue

@@ -12,7 +12,8 @@
             :page-sizes="pageSizes"
             :total-items="totalItems"
             :on-page-size-change="handlePageSizeChange"
-            :on-page-change="handlePageChange">
+            :on-page-change="handlePageChange"
+            :on-sort-change="handleSortChange">
             <template #toolbar>
                 <div style="display: flex; align-items: center; justify-content: space-between">
                     <span style="font-size: 14px" v-text="headerText"></span>
@@ -87,6 +88,7 @@
             return state;
         }
         previousInstancesListState.value[props.variant] = {
+            sortBy: [{ id: 'created_at', desc: true }],
             search: '',
             pageSize: 10,
             pageIndex: 0
@@ -110,6 +112,12 @@
             getListState().search = value;
         }
     });
+    const sortBy = computed({
+        get: () => getListState().sortBy,
+        set: (value) => {
+            getListState().sortBy = value;
+        }
+    });
 
     const headerText = computed(() => {
         const state = dialogState.value;
@@ -118,6 +126,12 @@
         return state?.groupRef?.name ?? '';
     });
 
+    const currentId = computed(() => {
+        if (props.variant === 'user') return dialogState.value?.userRef?.id ?? '';
+        if (props.variant === 'world') return dialogState.value?.worldRef?.id ?? '';
+        return dialogState.value?.groupRef?.id ?? '';
+    });
+
     const persistKey = computed(() => {
         if (props.variant === 'user') return 'previousInstancesUserDialog';
         if (props.variant === 'world') return 'previousInstancesWorldDialog';
@@ -201,7 +215,7 @@
         },
         columns: columns.value,
         getRowId: (row) => `${row?.location ?? ''}:${row?.created_at ?? ''}`,
-        initialSorting: [{ id: 'created_at', desc: true }],
+        initialSorting: sortBy.value,
         initialPagination: {
             pageIndex: pageIndex.value,
             pageSize: pageSize.value
@@ -236,19 +250,27 @@
         pageIndex.value = Math.max(0, page - 1);
     };
 
+    const handleSortChange = (sorting) => {
+        sortBy.value = sorting;
+    };
+
     const refreshTable = async () => {
         loading.value = true;
         const array = [];
         try {
+            const D = previousInstancesListDialog.value;
+            if (currentId.value !== D.lastId) {
+                table.setPageIndex(0);
+                D.lastId = currentId.value;
+            }
             if (props.variant === 'user') {
-                const data = await database.getPreviousInstancesByUserId(previousInstancesListDialog.value.userRef);
+                const data = await database.getPreviousInstancesByUserId(D.userRef);
                 for (const item of data.values()) {
                     item.$location = parseLocation(item.location);
                     item.timer = item.time > 0 ? timeToText(item.time) : '';
                     array.push(item);
                 }
             } else if (props.variant === 'world') {
-                const D = previousInstancesListDialog.value;
                 const data = await database.getPreviousInstancesByWorldId(D.worldRef);
                 for (const ref of data.values()) {
                     ref.$location = parseLocation(ref.location);
@@ -256,7 +278,6 @@
                     array.push(ref);
                 }
             } else {
-                const D = previousInstancesListDialog.value;
                 const data = await database.getPreviousInstancesByGroupId(D.groupRef.id);
                 for (const ref of data.values()) {
                     ref.$location = parseLocation(ref.location);

src/components/ui/data-table/DataTableLayout.vue

@@ -176,6 +176,10 @@
             type: Function,
             default: null
         },
+        onSortChange: {
+            type: Function,
+            default: null
+        },
         onRowClick: {
             type: Function,
             default: null
@@ -323,6 +327,14 @@
         }
     });
 
+    const sortBy = computed(() => props.table.getState?.().sorting ?? []);
+
+    watch(sortBy, (newSorting) => {
+        if (props.onSortChange) {
+            props.onSortChange(newSorting);
+        }
+    });
+
     watch([currentPage, pageSizeProxy], async () => {
         await nextTick();
         if (tableScrollRef.value) {