MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-20 23:33:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix inconsistent sorting in FriendList across pagination (#1567)

Browse Source 
* Add compareWithFriendNumber

* Use sort-change event to fix inconsistent sorting order in FriendList items

* Remove selfSelector

* Make `sortAlphabetically` consider cases where one of the values is missing
This commit is contained in:
Ryo Namiki
2026-01-11 02:08:15 +09:00
committed by GitHub
parent d53ce8982a
commit bcba7c01de
2 changed files with 89 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/views/FriendList/FriendList.vue
View File

@@ -52,6 +52,7 @@
<DataTable
v-bind="friendsListTable"
style="margin-top: 10px; cursor: pointer"
@sort-change="handleSortChange"
@row-click="selectFriendsListRow">
<el-table-column v-if="friendsListBulkUnfriendMode" width="55">
<template #default="{ row }">
@@ -67,7 +68,7 @@
:label="t('table.friendList.no')"
width="100"
prop="$friendNumber"
:sortable="true"
:sortable="'custom'"
fixed="left">
<template #default="{ row }">
<span>{{ row.$friendNumber ? row.$friendNumber : '' }}</span>
@@ -84,8 +85,7 @@
:label="t('table.friendList.displayName')"
min-width="200"
prop="displayName"
sortable
:sort-method="(a, b) => sortAlphabetically(a, b, 'displayName')"
sortable="'custom'"
fixed="left">
<template #default="{ row }">
<span :style="{ color: randomUserColours ? row.$userColour : undefined }" class="name">{{
@@ -93,7 +93,7 @@
}}</span>
</template>
</el-table-column>
<el-table-column :label="t('table.friendList.rank')" width="140" prop="$trustSortNum" :sortable="true">
<el-table-column :label="t('table.friendList.rank')" width="140" prop="$trustSortNum" :sortable="'custom'">
<template #default="{ row }">
<span
v-if="randomUserColours"
@@ -107,8 +107,7 @@
:label="t('table.friendList.status')"
min-width="200"
prop="status"
sortable
:sort-method="(a, b) => sortStatus(a.status, b.status)">
sortable="'custom'">
<template #default="{ row }">
<i
v-if="row.status !== 'offline'"
@@ -122,8 +121,7 @@
:label="t('table.friendList.language')"
width="130"
prop="$languages"
sortable
:sort-method="(a, b) => sortLanguages(a, b)">
sortable="'custom'">
<template #default="{ row }">
<TooltipWrapper v-for="item in row.$languages" :key="item.key" side="top">
<template #content>
@@ -163,13 +161,13 @@
:label="t('table.friendList.joinCount')"
width="120"
prop="$joinCount"
sortable
sortable="'custom'"
align="right"></el-table-column>
<el-table-column
:label="t('table.friendList.timeTogether')"
width="140"
prop="$timeSpent"
sortable
sortable="'custom'"
align="right">
<template #default="{ row }">
<span v-if="row.$timeSpent">{{ timeToText(row.$timeSpent) }}</span>
@@ -179,8 +177,7 @@
:label="t('table.friendList.lastSeen')"
width="170"
prop="$lastSeen"
sortable
:sort-method="(a, b) => sortAlphabetically(a, b, '$lastSeen')">
sortable="'custom'">
<template #default="{ row }">
<span>{{
formatDateFilter(row.$lastSeen, 'long') === '-'
@@ -193,7 +190,7 @@
:label="t('table.friendList.mutualFriends')"
width="120"
prop="$mutualCount"
sortable
sortable="'custom'"
align="right">
<template #default="{ row }">
<span v-if="row.$mutualCount">{{ row.$mutualCount }}</span>
@@ -203,8 +200,7 @@
:label="t('table.friendList.lastActivity')"
width="200"
prop="last_activity"
sortable
:sort-method="(a, b) => sortAlphabetically(a, b, 'last_activity')">
sortable="'custom'">
<template #default="{ row }">
<span>{{ formatDateFilter(row.last_activity, 'long') }}</span>
</template>
@@ -213,8 +209,7 @@
:label="t('table.friendList.lastLogin')"
width="200"
prop="last_login"
sortable
:sort-method="(a, b) => sortAlphabetically(a, b, 'last_login')">
sortable="'custom'">
<template #default="{ row }">
<span>{{ formatDateFilter(row.last_login, 'long') }}</span>
</template>
@@ -223,8 +218,7 @@
:label="t('table.friendList.dateJoined')"
width="120"
prop="date_joined"
sortable
:sort-method="(a, b) => sortAlphabetically(a, b, 'date_joined')"></el-table-column>
sortable="'custom'"></el-table-column>
<el-table-column :label="t('table.friendList.unfriend')" width="100" align="center">
<template #default="{ row }">
<i
@@ -315,6 +309,7 @@
const friendsListLoadDialogVisible = ref(false);
const friendsListSearchFilterVIP = ref(false);
const selectedFriends = ref(new Set());
const allFilteredData = ref([]);
const friendsListLoadingPercent = computed(() => {
if (!friendsListLoadingTotal.value) return 0;
@@ -375,10 +370,11 @@
}
results.push(ctx.ref);
}
allFilteredData.value = results;
getAllUserStats();
getAllUserMutualCount();
applySortAndPagination(friendsListTable.tableProps.defaultSort.prop, friendsListTable.tableProps.defaultSort.order);
nextTick(() => {
friendsListTable.data = results;
friendsListLoading.value = false;
});
}
@@ -486,20 +482,81 @@
else showUserDialog(val.id);
}
function sortAlphabetically(a, b, field) {
if (!a[field] || !b[field]) return 0;
return a[field].toLowerCase().localeCompare(b[field].toLowerCase());
function compareWithFriendNumber(a, b, primaryComparison, primarySelector = (x) => x) {
const primaryComparisonResult = primaryComparison(primarySelector(a), primarySelector(b));
if (primaryComparisonResult === 0) {
return (a.$friendNumber || 0) - (b.$friendNumber || 0);
}
return primaryComparisonResult;
}
function sortAlphabetically(a, b) {
if (!a || !b) {
if (!a && !b) return 0;
return !a ? -1 : 1;
}
return a.toLowerCase().localeCompare(b.toLowerCase());
}
function sortLanguages(a, b) {
const as = a.$languages.map((i) => i.value).sort();
const bs = b.$languages.map((i) => i.value).sort();
const as = a.map((i) => i.value).sort();
const bs = b.map((i) => i.value).sort();
return JSON.stringify(as).localeCompare(JSON.stringify(bs));
}
function openChartsTab() {
router.push({ name: 'charts' });
}
function handleSortChange({ prop, order }) {
applySortAndPagination(prop, order);
}
function resolveSortFunction(prop) {
const numberComparison = (a, b) => (a || 0) - (b || 0);
switch (prop) {
case '$friendNumber':
return [numberComparison, (item) => item.$friendNumber || 0];
case 'displayName':
return [sortAlphabetically, (item) => item.displayName || ''];
case '$trustSortNum':
return [numberComparison, (item) => item.$trustSortNum || 0];
case 'status':
return [sortStatus, (item) => item.status || 'offline'];
case '$languages':
return [sortLanguages, (item) => item.$languages || []];
case '$joinCount':
return [numberComparison, (item) => item.$joinCount || 0];
case '$timeSpent':
return [numberComparison, (item) => item.$timeSpent || 0];
case '$lastSeen':
return [sortAlphabetically, (item) => item.$lastSeen || ''];
case '$mutualCount':
return [numberComparison, (item) => item.$mutualCount || 0];
case 'last_activity':
return [sortAlphabetically, (item) => item.last_activity || ''];
case 'last_login':
return [sortAlphabetically, (item) => item.last_login || ''];
case 'date_joined':
return [sortAlphabetically, (item) => item.date_joined || ''];
default:
return [sortAlphabetically, (item) => item[prop] || ''];
}
}
function applySortAndPagination(prop, order) {
let sortedData = [...allFilteredData.value];
if (prop && order !== null) {
const [comparison, selector] = resolveSortFunction(prop);
sortedData.sort((a, b) => {
const result = compareWithFriendNumber(a, b, comparison, selector);
return order === 'ascending' ? result : -result;
});
}
friendsListTable.data = sortedData;
}
</script>
<style scoped>