MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-17 13:53:52 +02:00
Code Issues Packages Projects Releases Wiki Activity

rewrite friendlist table

Browse Source
This commit is contained in:
pa
2026-01-13 15:46:54 +09:00
committed by Natsumi
parent d67fbd3262
commit a353defca1
6 changed files with 677 additions and 374 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/ui/data-table/DataTableLayout.vue
View File

@@ -15,7 +15,8 @@
<TableHead
v-for="header in headerGroup.headers"
:key="header.id"
:class="getHeaderClass(header)">
:class="getHeaderClass(header)"
:style="getPinnedStyle(header.column)">
<template v-if="!header.isPlaceholder">
<FlexRender :render="header.column.columnDef.header" :props="header.getContext()" />
<div
@@ -37,7 +38,8 @@
<TableCell
v-for="cell in row.getVisibleCells()"
:key="cell.id"
:class="getCellClass(cell)">
:class="getCellClass(cell)"
:style="getPinnedStyle(cell.column)">
<FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
</TableCell>
</TableRow>
@@ -205,6 +207,31 @@
return value;
};
const getPinnedState = (col) => {
try {
return col?.getIsPinned?.() ?? false;
} catch {
return false;
}
};
const getPinnedStyle = (col) => {
const pinned = getPinnedState(col);
if (!pinned) return null;
if (pinned === 'left') {
const left = col?.getStart?.('left') ?? 0;
return { left: `${left}px` };
}
if (pinned === 'right') {
const right = col?.getAfter?.('right') ?? 0;
return { right: `${right}px` };
}
return null;
};
const isSpacer = (col) => col?.id === '__spacer';
const isStretch = (col) => {
@@ -226,8 +253,10 @@
const getHeaderClass = (header) => {
const columnDef = header?.column?.columnDef;
const meta = columnDef?.meta ?? {};
const pinned = getPinnedState(header?.column);
return joinClasses(
'sticky top-0 z-10 bg-background relative group',
'sticky top-0 bg-background relative group',
pinned ? 'z-30' : 'z-10',
isSpacer(header.column) && 'p-0',
resolveClassValue(meta.class, header?.getContext?.()),
resolveClassValue(meta.headerClass, header?.getContext?.()),
@@ -240,7 +269,9 @@
const getCellClass = (cell) => {
const columnDef = cell?.column?.columnDef;
const meta = columnDef?.meta ?? {};
const pinned = getPinnedState(cell?.column);
return joinClasses(
pinned && 'sticky bg-background z-20',
isSpacer(cell.column) && 'p-0',
resolveClassValue(meta.class, cell?.getContext?.()),
resolveClassValue(meta.cellClass, cell?.getContext?.()),

28
src/lib/table/useVrcxVueTable.js
View File

@@ -7,7 +7,7 @@ import {
isFunction,
useVueTable
} from '@tanstack/vue-table';
import { ref, unref, watch } from 'vue';
import { computed, ref, unref, watch } from 'vue';
function safeJsonParse(str) {
if (!str) {
@@ -233,12 +233,13 @@ export function useVrcxVueTable(options) {
});
}
const dataSource = computed(() => resolveMaybeGetter(options.data));
const columnsSource = computed(() => resolveMaybeGetter(options.columns));
const table = useVueTable({
get data() {
return resolveMaybeGetter(options.data);
},
data: dataSource,
get columns() {
const cols = resolveMaybeGetter(options.columns);
const cols = columnsSource.value;
const stretchAfterId = findStretchColumnId(cols);
@@ -261,6 +262,23 @@ export function useVrcxVueTable(options) {
...tableOptions
});
watch(
columnsSource,
(next) => {
table.setOptions((prev) => ({
...prev,
columns: withSpacerColumn(
next,
fillRemainingSpace,
spacerColumnId,
findStretchColumnId(next)
)
}));
table.setState((prev) => ({ ...prev }));
},
{ immediate: true }
);
const persistWrite = debounce(
(payload) => writePersisted(payload),
persistDebounceMs

2
src/localization/en.json
View File

@@ -1538,7 +1538,7 @@
"branch_stable": "Stable",
"branch_nightly": "Nightly",
"nightly_title": "Nightly builds",
"nightly_notice": "Nightly builds are for testing. For stability, use Stable.",
"nightly_notice": "Nightly builds are for testing. For stability, use stable build.",
"release": "Release",
"download": "Download",
"install": "Install",

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

@@ -1,249 +1,83 @@
<template>
<div class="x-container" ref="friendsListRef">
<div>
<div style="display: flex; align-items: center; justify-content: space-between">
<div style="flex: none; margin-right: 10px; display: flex; align-items: center">
<TooltipWrapper side="bottom" :content="t('view.friend_list.favorites_only_tooltip')">
<Switch v-model="friendsListSearchFilterVIP" @update:modelValue="friendsListSearchChange" />
</TooltipWrapper>
<Select
multiple
:model-value="Array.isArray(friendsListSearchFilters) ? friendsListSearchFilters : []"
@update:modelValue="handleFriendListFilterChange">
<SelectTrigger style="margin: 0 10px; width: 150px">
<SelectValue :placeholder="t('view.friend_list.filter_placeholder')" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem
v-for="type in [
'Display Name',
'User Name',
'Rank',
'Status',
'Bio',
'Note',
'Memo'
]"
:key="type"
:value="type">
{{ type }}
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
<InputGroupField
v-model="friendsListSearch"
:placeholder="t('view.friend_list.search_placeholder')"
clearable
style="width: 250px"
@change="friendsListSearchChange" />
</div>
<div class="flex items-center">
<div v-if="friendsListBulkUnfriendMode" class="inline-block mr-10">
<Button variant="outline" @click="showBulkUnfriendSelectionConfirm">
{{ t('view.friend_list.bulk_unfriend_selection') }}
</Button>
<!-- el-button(size="small" @click="showBulkUnfriendAllConfirm" style="margin-right:5px") Bulk Unfriend All-->
</div>
<div class="flex items-center mr-3">
<span class="name mr-2 text-xs">{{ t('view.friend_list.bulk_unfriend') }}</span>
<Switch
v-model="friendsListBulkUnfriendMode"
@update:modelValue="toggleFriendsListBulkUnfriendMode" />
</div>
<div class="flex items-center">
<Button variant="outline" @click="openChartsTab">
{{ t('view.friend_list.load_mutual_friends') }}
</Button>
<Button variant="outline" @click="friendsListLoadUsers">{{
t('view.friend_list.load')
}}</Button>
</div>
</div>
</div>
<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 }">
<Checkbox
:model-value="selectedFriends.has(row.id)"
@update:modelValue="toggleFriendSelection(row.id)" />
</template>
</el-table-column>
<el-table-column width="20"></el-table-column>
<el-table-column
:label="t('table.friendList.no')"
width="100"
prop="$friendNumber"
:sortable="'custom'"
fixed="left">
<template #default="{ row }">
<span>{{ row.$friendNumber ? row.$friendNumber : '' }}</span>
</template>
</el-table-column>
<el-table-column :label="t('table.friendList.avatar')" width="90" prop="photo">
<template #default="{ row }">
<div class="flex items-center">
<img :src="userImage(row, true)" class="friends-list-avatar" loading="lazy" />
</div>
</template>
</el-table-column>
<el-table-column
:label="t('table.friendList.displayName')"
min-width="200"
prop="displayName"
sortable="'custom'"
fixed="left">
<template #default="{ row }">
<span :style="{ color: randomUserColours ? row.$userColour : undefined }" class="name">{{
row.displayName
}}</span>
</template>
</el-table-column>
<el-table-column
:label="t('table.friendList.rank')"
width="140"
prop="$trustSortNum"
:sortable="'custom'">
<template #default="{ row }">
<span
v-if="randomUserColours"
:class="row.$trustClass"
class="name"
v-text="row.$trustLevel"></span>
<span v-else class="name" :style="{ color: row.$userColour }" v-text="row.$trustLevel"></span>
</template>
</el-table-column>
<el-table-column
:label="t('table.friendList.status')"
min-width="200"
prop="status"
sortable="'custom'">
<template #default="{ row }">
<i
v-if="row.status !== 'offline'"
:class="statusClass(row.status)"
style="margin-right: 3px"
class="x-user-status"></i>
<span v-text="row.statusDescription"></span>
</template>
</el-table-column>
<el-table-column
:label="t('table.friendList.language')"
width="130"
prop="$languages"
sortable="'custom'">
<template #default="{ row }">
<TooltipWrapper v-for="item in row.$languages" :key="item.key" side="top">
<template #content>
<span>{{ item.value }} ({{ item.key }})</span>
</template>
<span
:class="languageClass(item.key)"
style="display: inline-block; margin-right: 5px"
class="flags"></span>
</TooltipWrapper>
</template>
</el-table-column>
<el-table-column :label="t('table.friendList.bioLink')" width="130" prop="bioLinks">
<template #default="{ row }">
<div class="flex items-center">
<TooltipWrapper v-for="(link, index) in row.bioLinks.filter(Boolean)" :key="index">
<template #content>
<span v-text="link"></span>
</template>
<img
:src="getFaviconUrl(link)"
style="
width: 16px;
height: 16px;
vertical-align: middle;
margin-right: 5px;
cursor: pointer;
"
@click.stop="openExternalLink(link)"
loading="lazy" />
<DataTableLayout
class="min-w-0 w-full"
:table="table"
:loading="friendsListLoading"
:table-style="tableHeightStyle"
:page-sizes="pageSizes"
:total-items="totalItems"
table-class="min-w-max w-max [&_tbody_tr]:cursor-pointer"
:on-page-size-change="handlePageSizeChange"
:on-row-click="handleRowClick">
<template #toolbar>
<div style="display: flex; align-items: center; justify-content: space-between">
<div style="flex: none; margin-right: 10px; display: flex; align-items: center">
<TooltipWrapper side="bottom" :content="t('view.friend_list.favorites_only_tooltip')">
<Switch
v-model="friendsListSearchFilterVIP"
@update:modelValue="friendsListSearchChange" />
</TooltipWrapper>
<Select
multiple
:model-value="Array.isArray(friendsListSearchFilters) ? friendsListSearchFilters : []"
@update:modelValue="handleFriendListFilterChange">
<SelectTrigger style="margin: 0 10px; width: 150px">
<SelectValue :placeholder="t('view.friend_list.filter_placeholder')" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem
v-for="type in [
'Display Name',
'User Name',
'Rank',
'Status',
'Bio',
'Note',
'Memo'
]"
:key="type"
:value="type">
{{ type }}
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
<InputGroupField
v-model="friendsListSearch"
:placeholder="t('view.friend_list.search_placeholder')"
clearable
style="width: 250px"
@change="friendsListSearchChange" />
</div>
</template>
</el-table-column>
<el-table-column
:label="t('table.friendList.joinCount')"
width="120"
prop="$joinCount"
sortable="'custom'"
align="right"></el-table-column>
<el-table-column
:label="t('table.friendList.timeTogether')"
width="140"
prop="$timeSpent"
sortable="'custom'"
align="right">
<template #default="{ row }">
<span v-if="row.$timeSpent">{{ timeToText(row.$timeSpent) }}</span>
</template>
</el-table-column>
<el-table-column
:label="t('table.friendList.lastSeen')"
width="170"
prop="$lastSeen"
sortable="'custom'">
<template #default="{ row }">
<span>{{
formatDateFilter(row.$lastSeen, 'long') === '-'
? ''
: formatDateFilter(row.$lastSeen, 'long')
}}</span>
</template>
</el-table-column>
<el-table-column
:label="t('table.friendList.mutualFriends')"
width="120"
prop="$mutualCount"
sortable="'custom'"
align="right">
<template #default="{ row }">
<span v-if="row.$mutualCount">{{ row.$mutualCount }}</span>
<span v-else></span> </template
></el-table-column>
<el-table-column
:label="t('table.friendList.lastActivity')"
width="200"
prop="last_activity"
sortable="'custom'">
<template #default="{ row }">
<span>{{ formatDateFilter(row.last_activity, 'long') }}</span>
</template>
</el-table-column>
<el-table-column
:label="t('table.friendList.lastLogin')"
width="200"
prop="last_login"
sortable="'custom'">
<template #default="{ row }">
<span>{{ formatDateFilter(row.last_login, 'long') }}</span>
</template>
</el-table-column>
<el-table-column
:label="t('table.friendList.dateJoined')"
width="120"
prop="date_joined"
sortable="'custom'"></el-table-column>
<el-table-column :label="t('table.friendList.unfriend')" width="100" align="center">
<template #default="{ row }">
<i
class="ri-user-unfollow-line"
style="color: #f56c6c"
@click.stop="confirmDeleteFriend(row.id)"></i>
</template>
</el-table-column>
</DataTable>
<div class="flex items-center">
<div v-if="friendsListBulkUnfriendMode" class="inline-block mr-10">
<Button variant="outline" @click="showBulkUnfriendSelectionConfirm">
{{ t('view.friend_list.bulk_unfriend_selection') }}
</Button>
<!-- el-button(size="small" @click="showBulkUnfriendAllConfirm" style="margin-right:5px") Bulk Unfriend All-->
</div>
<div class="flex items-center mr-3">
<span class="name mr-2 text-xs">{{ t('view.friend_list.bulk_unfriend') }}</span>
<Switch
v-model="friendsListBulkUnfriendMode"
@update:modelValue="toggleFriendsListBulkUnfriendMode" />
</div>
<div class="flex items-center">
<Button variant="outline" @click="openChartsTab">
{{ t('view.friend_list.load_mutual_friends') }}
</Button>
<Button variant="outline" @click="friendsListLoadUsers">{{
t('view.friend_list.load')
}}</Button>
</div>
</div>
</div>
</template>
</DataTableLayout>
<el-dialog
v-model="friendsListLoadDialogVisible"
:title="t('view.friend_list.load_dialog_title')"
@@ -261,7 +95,7 @@
<span>{{ friendsListLoadingCurrent }} / {{ friendsListLoadingTotal }}</span>
</div>
<template #footer>
<Button variant="outline" @click="cancelFriendsListLoad">
<Button variant="secondary" @click="cancelFriendsListLoad">
{{ t('view.friend_list.load_cancel') }}
</Button>
</template>
@@ -272,7 +106,7 @@
<script setup>
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { computed, nextTick, reactive, ref, watch } from 'vue';
import { computed, nextTick, ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { ElMessageBox } from 'element-plus';
import { InputGroupField } from '@/components/ui/input-group';
@@ -283,23 +117,21 @@
import { useRoute } from 'vue-router';
import {
formatDateFilter,
getFaviconUrl,
languageClass,
localeIncludes,
openExternalLink,
sortStatus,
statusClass,
timeToText,
userImage
} from '../../shared/utils';
import { useAppearanceSettingsStore, useFriendStore, useSearchStore, useUserStore } from '../../stores';
useAppearanceSettingsStore,
useFriendStore,
useSearchStore,
useUserStore,
useVrcxStore
} from '../../stores';
import { friendRequest, userRequest } from '../../api';
import { Checkbox } from '../../components/ui/checkbox';
import { DataTableLayout } from '../../components/ui/data-table';
import { Switch } from '../../components/ui/switch';
import { createColumns } from './columns.jsx';
import { localeIncludes } from '../../shared/utils';
import removeConfusables, { removeWhitespace } from '../../service/confusables';
import { router } from '../../plugin/router';
import { useTableHeight } from '../../composables/useTableHeight';
import { useDataTableScrollHeight } from '../../composables/useDataTableScrollHeight';
import { useVrcxVueTable } from '../../lib/table/useVrcxVueTable';
const { t } = useI18n();
@@ -308,21 +140,11 @@
const { friends } = storeToRefs(useFriendStore());
const { getAllUserStats, getAllUserMutualCount, confirmDeleteFriend, handleFriendDelete } = useFriendStore();
const { randomUserColours } = storeToRefs(useAppearanceSettingsStore());
const vrcxStore = useVrcxStore();
const { showUserDialog } = useUserStore();
const { stringComparer, friendsListSearch } = storeToRefs(useSearchStore());
const friendsListSearchFilters = ref([]);
const friendsListTable = reactive({
data: [],
tableProps: {
stripe: true,
size: 'small',
defaultSort: { prop: '$friendNumber', order: 'descending' },
scrollbarAlwaysOn: true
},
pageSize: 100,
paginationProps: { layout: 'sizes,prev,pager,next,total', pageSizes: [50, 100, 250, 500] }
});
const friendsListBulkUnfriendMode = ref(false);
const friendsListLoading = ref(false);
const friendsListLoadingCurrent = ref(0);
@@ -330,14 +152,88 @@
const friendsListLoadDialogVisible = ref(false);
const friendsListSearchFilterVIP = ref(false);
const selectedFriends = ref(new Set());
const allFilteredData = ref([]);
const friendsListDisplayData = ref([]);
const pageSizes = [50, 100, 250, 500];
const pageSize = ref(100);
const defaultSorting = [{ id: 'friendNumber', desc: true }];
// const initialColumnPinning = {
// left: ['displayName'],
// right: []
// };
const friendsListLoadingPercent = computed(() => {
if (!friendsListLoadingTotal.value) return 0;
return Math.min(100, Math.round((friendsListLoadingCurrent.value / friendsListLoadingTotal.value) * 100));
});
const { containerRef: friendsListRef } = useTableHeight(ref(friendsListTable));
const friendsListRef = ref(null);
const { tableStyle: tableHeightStyle } = useDataTableScrollHeight(friendsListRef, {
offset: 30,
toolbarHeight: 54,
paginationHeight: 52
});
const friendsListColumns = computed(() =>
createColumns({
randomUserColours,
bulkUnfriendMode: friendsListBulkUnfriendMode,
selectedFriends,
onToggleFriendSelection: toggleFriendSelection,
onConfirmDeleteFriend: confirmDeleteFriend
})
);
const { table, sorting, pagination } = useVrcxVueTable({
persistKey: 'friendList',
data: friendsListDisplayData,
columns: friendsListColumns.value,
getRowId: (row) => row?.id ?? row?.displayName ?? '',
enablePinning: true,
// initialColumnPinning,
initialSorting: defaultSorting,
initialPagination: {
pageIndex: 0,
pageSize: pageSize.value
}
});
const totalItems = computed(() => {
const length = table.getFilteredRowModel().rows.length;
const max = vrcxStore.maxTableSize;
return length > max && length < max + 51 ? max : length;
});
const handlePageSizeChange = (size) => {
pageSize.value = size;
};
const handleRowClick = (row) => {
selectFriendsListRow(row?.original ?? null);
};
watch(
friendsListColumns,
(next) => {
table.setOptions((prev) => ({
...prev,
columns: /** @type {any} */ (next)
}));
},
{ immediate: true }
);
watch(pageSize, (size) => {
if (pagination.value.pageSize === size) {
return;
}
pagination.value = {
...pagination.value,
pageIndex: 0,
pageSize: size
};
table.setPageSize(size);
});
const route = useRoute();
@@ -349,11 +245,18 @@
{ immediate: true }
);
watch(
() => friends.value.size,
() => {
friendsListSearchChange();
}
);
function friendsListSearchChange() {
friendsListLoading.value = true;
let query = '';
let cleanedQuery = '';
friendsListTable.data = [];
friendsListDisplayData.value = [];
let filters = friendsListSearchFilters.value.length
? [...friendsListSearchFilters.value]
: ['Display Name', 'Rank', 'Status', 'Bio', 'Note', 'Memo'];
@@ -391,13 +294,12 @@
}
results.push(ctx.ref);
}
allFilteredData.value = results;
friendsListDisplayData.value = results;
getAllUserStats();
getAllUserMutualCount();
applySortAndPagination(
friendsListTable.tableProps.defaultSort.prop,
friendsListTable.tableProps.defaultSort.order
);
table.setPageIndex(0);
table.setSorting([...defaultSorting]);
sorting.value = [...defaultSorting];
nextTick(() => {
friendsListLoading.value = false;
});
@@ -418,7 +320,7 @@
}
function showBulkUnfriendSelectionConfirm() {
const pending = friendsListTable.data
const pending = friendsListDisplayData.value
.filter((item) => selectedFriends.value.has(item.id))
.map((item) => item.displayName);
if (!pending.length) return;
@@ -446,7 +348,7 @@
async function bulkUnfriendSelection() {
if (!selectedFriends.value.size) return;
for (const item of friendsListTable.data) {
for (const item of friendsListDisplayData.value) {
if (selectedFriends.value.has(item.id)) {
console.log(`Unfriending ${item.displayName} (${item.id})`);
await friendRequest.deleteFriend({ userId: item.id }).then((args) => handleFriendDelete(args));
@@ -506,82 +408,10 @@
else showUserDialog(val.id);
}
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.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;
}
function handleFriendListFilterChange(value) {
friendsListSearchFilters.value = Array.isArray(value) ? value : [];
friendsListSearchChange();

440
src/views/FriendList/columns.jsx Normal file
View File

@@ -0,0 +1,440 @@
import { ArrowUpDown } from 'lucide-vue-next';
import { Button } from '../../components/ui/button';
import { Checkbox } from '../../components/ui/checkbox';
import { TooltipWrapper } from '../../components/ui/tooltip';
import { i18n } from '../../plugin';
import {
formatDateFilter,
getFaviconUrl,
languageClass,
openExternalLink,
sortStatus,
statusClass,
timeToText,
userImage
} from '../../shared/utils';
const { t } = i18n.global;
const sortButton = ({ column, label, descFirst = false }) => (
<Button
variant="ghost"
size="sm"
class="-ml-2 h-8 px-2"
onClick={() => {
const sorted = column.getIsSorted();
if (!sorted && descFirst) {
column.toggleSorting(true);
return;
}
column.toggleSorting(sorted === 'asc');
}}
>
{label}
<ArrowUpDown class="ml-1 h-4 w-4" />
</Button>
);
const compareNumbers = (a, b) => (a ?? 0) - (b ?? 0);
const sortAlphabetically = (a, b) => {
if (!a || !b) {
if (!a && !b) return 0;
return !a ? -1 : 1;
}
return String(a).toLowerCase().localeCompare(String(b).toLowerCase());
};
const sortLanguages = (a, b) => {
const as = Array.isArray(a) ? a.map((i) => i.value).sort() : [];
const bs = Array.isArray(b) ? b.map((i) => i.value).sort() : [];
return JSON.stringify(as).localeCompare(JSON.stringify(bs));
};
const withFriendNumber = (rowA, rowB, result) => {
if (result !== 0) {
return result;
}
return compareNumbers(
rowA.original?.$friendNumber,
rowB.original?.$friendNumber
);
};
const sortByNumber = (selector) => (rowA, rowB) =>
withFriendNumber(
rowA,
rowB,
compareNumbers(selector(rowA.original), selector(rowB.original))
);
const sortByString = (selector) => (rowA, rowB) =>
withFriendNumber(
rowA,
rowB,
sortAlphabetically(selector(rowA.original), selector(rowB.original))
);
const sortByStatus = (rowA, rowB) => {
const a = rowA.original?.status ?? 'offline';
const b = rowB.original?.status ?? 'offline';
return withFriendNumber(rowA, rowB, sortStatus(a, b));
};
const sortByLanguages = (rowA, rowB) =>
withFriendNumber(
rowA,
rowB,
sortLanguages(rowA.original?.$languages, rowB.original?.$languages)
);
export const createColumns = ({
randomUserColours,
bulkUnfriendMode,
selectedFriends,
onToggleFriendSelection,
onConfirmDeleteFriend
}) => {
/** @type {import('@tanstack/vue-table').ColumnDef<any, any>[]} */
const cols = [];
if (bulkUnfriendMode?.value) {
cols.push({
id: 'bulkSelect',
header: () => null,
size: 55,
enableSorting: false,
enableResizing: false,
meta: {
thClass: 'p-0',
tdClass: 'p-0'
},
cell: ({ row }) => {
const id = row.original?.id;
const checked = selectedFriends?.value?.has?.(id);
return (
<div
class="flex items-center justify-center"
onClick={(event) => event.stopPropagation()}
>
<Checkbox
modelValue={checked}
onUpdate:modelValue={() =>
onToggleFriendSelection?.(id)
}
/>
</div>
);
}
});
}
cols.push(
{
id: 'leftSpacer',
header: () => null,
size: 20,
enableSorting: false,
enableResizing: false,
meta: {
thClass: 'p-0',
tdClass: 'p-0'
},
cell: () => null
},
{
id: 'friendNumber',
accessorFn: (row) => row?.$friendNumber,
header: ({ column }) =>
sortButton({
column,
label: t('table.friendList.no'),
descFirst: true
}),
size: 100,
sortingFn: sortByNumber((row) => row?.$friendNumber ?? 0),
cell: ({ row }) => (
<span>{row.original?.$friendNumber || ''}</span>
)
},
{
id: 'avatar',
accessorFn: (row) => row?.photo,
header: () => t('table.friendList.avatar'),
size: 90,
enableSorting: false,
cell: ({ row }) => {
const src = userImage(row.original, true);
return src ? (
<div class="flex items-center">
<img
src={src}
class="friends-list-avatar object-cover w-6! h-6"
loading="lazy"
/>
</div>
) : null;
}
},
{
id: 'displayName',
accessorFn: (row) => row?.displayName,
header: ({ column }) =>
sortButton({
column,
label: t('table.friendList.displayName')
}),
size: 200,
sortingFn: sortByString((row) => row?.displayName ?? ''),
cell: ({ row }) => {
const style = randomUserColours?.value
? { color: row.original?.$userColour }
: null;
return (
<span class="name" style={style}>
{row.original?.displayName ?? ''}
</span>
);
}
},
{
id: 'rank',
accessorFn: (row) => row?.$trustSortNum,
header: ({ column }) =>
sortButton({
column,
label: t('table.friendList.rank')
}),
size: 140,
sortingFn: sortByNumber((row) => row?.$trustSortNum ?? 0),
cell: ({ row }) => {
if (randomUserColours?.value) {
return (
<span class={row.original?.$trustClass}>
{row.original?.$trustLevel ?? ''}
</span>
);
}
return (
<span
class="name"
style={{ color: row.original?.$userColour }}
>
{row.original?.$trustLevel ?? ''}
</span>
);
}
},
{
id: 'status',
accessorFn: (row) => row?.status,
header: ({ column }) =>
sortButton({ column, label: t('table.friendList.status') }),
minSize: 200,
sortingFn: sortByStatus,
meta: {
stretch: true
},
cell: ({ row }) => {
const status = row.original?.status;
return (
<span class="flex items-center">
{status && status !== 'offline' ? (
<i
class={[
'x-user-status',
statusClass(status),
'mr-1'
]}
></i>
) : null}
<span>{row.original?.statusDescription ?? ''}</span>
</span>
);
}
},
{
id: 'language',
accessorFn: (row) => row?.$languages,
header: ({ column }) =>
sortButton({ column, label: t('table.friendList.language') }),
size: 130,
sortingFn: sortByLanguages,
cell: ({ row }) => (
<div class="flex items-center">
{(row.original?.$languages ?? []).map((item) => (
<TooltipWrapper
key={item.key}
side="top"
content={`${item.value} (${item.key})`}
>
<span
class={[
'flags',
'inline-block',
'mr-1',
languageClass(item.key)
]}
></span>
</TooltipWrapper>
))}
</div>
)
},
{
id: 'bioLink',
header: () => t('table.friendList.bioLink'),
size: 130,
enableSorting: false,
cell: ({ row }) => (
<div class="flex items-center">
{(row.original?.bioLinks ?? [])
.filter(Boolean)
.map((link, index) => (
<TooltipWrapper
key={index}
content={String(link)}
>
<img
src={getFaviconUrl(link)}
class="h-4 w-4 mr-1 align-middle cursor-pointer"
onClick={(event) => {
event.stopPropagation();
openExternalLink(link);
}}
loading="lazy"
/>
</TooltipWrapper>
))}
</div>
)
},
{
id: 'joinCount',
accessorFn: (row) => row?.$joinCount,
header: ({ column }) =>
sortButton({
column,
label: t('table.friendList.joinCount')
}),
size: 120,
sortingFn: sortByNumber((row) => row?.$joinCount ?? 0),
meta: {
class: 'text-right'
}
},
{
id: 'timeTogether',
accessorFn: (row) => row?.$timeSpent,
header: ({ column }) =>
sortButton({
column,
label: t('table.friendList.timeTogether')
}),
size: 140,
sortingFn: sortByNumber((row) => row?.$timeSpent ?? 0),
meta: {
class: 'text-right'
},
cell: ({ row }) => {
const time = row.original?.$timeSpent;
return time ? <span>{timeToText(time)}</span> : null;
}
},
{
id: 'lastSeen',
accessorFn: (row) => row?.$lastSeen,
header: ({ column }) =>
sortButton({
column,
label: t('table.friendList.lastSeen')
}),
size: 170,
sortingFn: sortByString((row) => row?.$lastSeen ?? ''),
cell: ({ row }) => {
const text = formatDateFilter(row.original?.$lastSeen, 'long');
return <span>{text === '-' ? '' : text}</span>;
}
},
{
id: 'mutualFriends',
accessorFn: (row) => row?.$mutualCount,
header: ({ column }) =>
sortButton({
column,
label: t('table.friendList.mutualFriends')
}),
size: 120,
sortingFn: sortByNumber((row) => row?.$mutualCount ?? 0),
meta: {
class: 'text-right'
},
cell: ({ row }) => {
const count = row.original?.$mutualCount;
return count ? <span>{count}</span> : null;
}
},
{
id: 'lastActivity',
accessorFn: (row) => row?.last_activity,
header: ({ column }) =>
sortButton({
column,
label: t('table.friendList.lastActivity')
}),
size: 200,
sortingFn: sortByString((row) => row?.last_activity ?? ''),
cell: ({ row }) => (
<span>
{formatDateFilter(row.original?.last_activity, 'long')}
</span>
)
},
{
id: 'lastLogin',
accessorFn: (row) => row?.last_login,
header: ({ column }) =>
sortButton({ column, label: t('table.friendList.lastLogin') }),
size: 200,
sortingFn: sortByString((row) => row?.last_login ?? ''),
cell: ({ row }) => (
<span>
{formatDateFilter(row.original?.last_login, 'long')}
</span>
)
},
{
id: 'dateJoined',
accessorFn: (row) => row?.date_joined,
header: ({ column }) =>
sortButton({
column,
label: t('table.friendList.dateJoined')
}),
size: 120,
sortingFn: sortByString((row) => row?.date_joined ?? ''),
cell: ({ row }) => <span>{row.original?.date_joined ?? ''}</span>
},
{
id: 'unfriend',
header: () => t('table.friendList.unfriend'),
size: 100,
enableSorting: false,
meta: {
class: 'text-center'
},
cell: ({ row }) => (
<i
class="ri-user-unfollow-line text-destructive"
onClick={(event) => {
event.stopPropagation();
onConfirmDeleteFriend?.(row.original?.id);
}}
></i>
)
}
);
return cols;
};

16
src/views/PlayerList/PlayerList.vue
View File

@@ -150,7 +150,6 @@
<div class="current-instance-table flex min-h-0 min-w-0 flex-1">
<DataTableLayout
:key="playerListRenderKey"
class="min-w-0 w-full [&_th]:px-2.5! [&_th]:py-0.75! [&_td]:px-2.5! [&_td]:py-0.75! [&_tr]:h-7!"
:table="playerListTable"
table-class="min-w-max w-max"
@@ -210,8 +209,6 @@
const playerListRef = ref(null);
const playerListHeaderRef = ref(null);
const playerListPhotonRef = ref(null);
const playerListRenderKey = ref(0);
const { tableStyle: playerListTableStyle } = useDataTableScrollHeight(playerListRef, {
offset: 30,
paginationHeight: 0,
@@ -300,19 +297,6 @@
{ immediate: true }
);
watch(
() => currentInstanceUsersData.value,
(val) => {
console.debug('Player list data updated:', val.length);
playerListTable.setOptions((prev) => ({
...prev,
data: val
}));
playerListRenderKey.value += 1;
},
{ immediate: true }
);
const playerListTotalItems = computed(() => playerListTable.getRowModel().rows.length);
const handlePlayerListRowClick = (row) => {