diff --git a/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue b/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue index 23f4c32a..87701660 100644 --- a/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue +++ b/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue @@ -726,7 +726,9 @@ const { table: groupMemberModerationTanstackTable } = useVrcxVueTable({ persistKey: 'group-moderation:members', - data: computed(() => groupMemberModerationTable.data ?? []), + get data() { + return computed(() => groupMemberModerationTable.data).value; + }, columns: groupMemberModerationColumns, getRowId: (row) => String(row?.userId ?? ''), initialPagination: { pageIndex: 0, pageSize: groupMemberModerationTable.pageSize ?? 15 } @@ -767,7 +769,9 @@ const { table: groupBansModerationTanstackTable } = useVrcxVueTable({ persistKey: 'group-moderation:bans', - data: groupBansFilteredRows, + get data() { + return groupBansFilteredRows.value; + }, columns: groupBansModerationColumns, getRowId: (row) => String(row?.userId ?? row?.id ?? ''), initialPagination: { pageIndex: 0, pageSize: groupBansModerationTable.pageSize ?? 15 } @@ -790,7 +794,9 @@ const { table: groupInvitesModerationTanstackTable } = useVrcxVueTable({ persistKey: 'group-moderation:invites', - data: computed(() => groupInvitesModerationTable.data ?? []), + get data() { + return computed(() => groupInvitesModerationTable.data).value; + }, columns: groupInvitesModerationColumns, getRowId: (row) => String(row?.userId ?? row?.id ?? ''), initialPagination: { pageIndex: 0, pageSize: groupInvitesModerationTable.pageSize ?? 15 } @@ -813,7 +819,9 @@ const { table: groupJoinRequestsModerationTanstackTable } = useVrcxVueTable({ persistKey: 'group-moderation:join-requests', - data: computed(() => groupJoinRequestsModerationTable.data ?? []), + get data() { + return computed(() => groupJoinRequestsModerationTable.data).value; + }, columns: groupJoinRequestsModerationColumns, getRowId: (row) => String(row?.userId ?? row?.id ?? ''), initialPagination: { pageIndex: 0, pageSize: groupJoinRequestsModerationTable.pageSize ?? 15 } @@ -836,7 +844,9 @@ const { table: groupBlockedModerationTanstackTable } = useVrcxVueTable({ persistKey: 'group-moderation:blocked', - data: computed(() => groupBlockedModerationTable.data ?? []), + get data() { + return computed(() => groupBlockedModerationTable.data).value; + }, columns: groupBlockedModerationColumns, getRowId: (row) => String(row?.userId ?? row?.id ?? ''), initialPagination: { pageIndex: 0, pageSize: groupBlockedModerationTable.pageSize ?? 15 } @@ -871,7 +881,9 @@ const { table: groupLogsModerationTanstackTable } = useVrcxVueTable({ persistKey: 'group-moderation:logs', - data: groupLogsFilteredRows, + get data() { + return groupLogsFilteredRows.value; + }, columns: groupLogsModerationColumns, getRowId: (row) => String(row?.id ?? `${row?.created_at ?? ''}:${row?.eventType ?? ''}`), initialPagination: { pageIndex: 0, pageSize: groupLogsModerationTable.pageSize ?? 15 } diff --git a/src/components/dialogs/InviteDialog/SendInviteDialog.vue b/src/components/dialogs/InviteDialog/SendInviteDialog.vue index b6865922..e69129c4 100644 --- a/src/components/dialogs/InviteDialog/SendInviteDialog.vue +++ b/src/components/dialogs/InviteDialog/SendInviteDialog.vue @@ -128,7 +128,9 @@ const { table: inviteMessageTanstackTable } = useVrcxVueTable({ persistKey: 'invite-message', - data: inviteMessageRows, + get data() { + return inviteMessageRows.value; + }, columns: inviteMessageColumns, getRowId: (row) => String(row?.slot ?? ''), enablePagination: false, diff --git a/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesInfoDialog.vue b/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesInfoDialog.vue index 2ccf92a1..3edc357a 100644 --- a/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesInfoDialog.vue +++ b/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesInfoDialog.vue @@ -98,7 +98,9 @@ const { table } = useVrcxVueTable({ persistKey: 'previousInstancesInfoDialog', - data: displayRows, + get data() { + return displayRows.value; + }, columns: columns.value, getRowId: (row) => row?.id ?? row?.userId ?? row?.displayName ?? JSON.stringify(row ?? {}), initialSorting: [{ id: 'created_at', desc: true }], diff --git a/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesListDialog.vue b/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesListDialog.vue index a488b119..65d38d59 100644 --- a/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesListDialog.vue +++ b/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesListDialog.vue @@ -196,7 +196,9 @@ const { table } = useVrcxVueTable({ persistKey: persistKey.value, - data: displayRows, + get data() { + return displayRows.value; + }, columns: columns.value, getRowId: (row) => `${row?.location ?? ''}:${row?.created_at ?? ''}`, initialSorting: [{ id: 'created_at', desc: true }], diff --git a/src/components/dialogs/UserDialog/SendInviteRequestDialog.vue b/src/components/dialogs/UserDialog/SendInviteRequestDialog.vue index e2168589..ccdc49ca 100644 --- a/src/components/dialogs/UserDialog/SendInviteRequestDialog.vue +++ b/src/components/dialogs/UserDialog/SendInviteRequestDialog.vue @@ -105,7 +105,9 @@ const { table: inviteRequestMessageTanstackTable } = useVrcxVueTable({ persistKey: 'invite-request-message', - data: inviteRequestMessageRows, + get data() { + return inviteRequestMessageRows.value; + }, columns: inviteRequestMessageColumns, getRowId: (row) => String(row?.slot ?? ''), enablePagination: false, diff --git a/src/lib/table/useVrcxVueTable.js b/src/lib/table/useVrcxVueTable.js index 46ca4b2c..d7bec345 100644 --- a/src/lib/table/useVrcxVueTable.js +++ b/src/lib/table/useVrcxVueTable.js @@ -232,7 +232,7 @@ export function useVrcxVueTable(options) { }); } - const dataSource = computed(() => resolveMaybeGetter(options.data)); + const dataSource = computed(() => options.data); const columnsSource = computed(() => resolveMaybeGetter(options.columns)); const table = useVueTable({ diff --git a/src/stores/feed.js b/src/stores/feed.js index 3fd3e3b8..1c071131 100644 --- a/src/stores/feed.js +++ b/src/stores/feed.js @@ -1,4 +1,4 @@ -import { ref, shallowReactive, watch } from 'vue'; +import { ref, shallowReactive, shallowRef, watch } from 'vue'; import { defineStore } from 'pinia'; import { database } from '../service/database'; @@ -16,7 +16,7 @@ export const useFeedStore = defineStore('Feed', () => { const vrcxStore = useVrcxStore(); const sharedFeedStore = useSharedFeedStore(); - const feedTableData = shallowReactive([]); + const feedTableData = shallowRef([]); const feedTable = ref({ search: '', vip: false, @@ -29,7 +29,7 @@ export const useFeedStore = defineStore('Feed', () => { watch( () => watchState.isLoggedIn, (isLoggedIn) => { - feedTableData.length = 0; + feedTableData.value = []; if (isLoggedIn) { initFeedTable(); } @@ -149,8 +149,8 @@ export const useFeedStore = defineStore('Feed', () => { feedTable.value.filter, vipList ); - feedTableData.length = 0; - feedTableData.push(...rows.reverse()); + feedTableData.value = []; + feedTableData.value = [...feedTableData.value, ...rows.reverse()]; feedTable.value.loading = false; } @@ -172,20 +172,21 @@ export const useFeedStore = defineStore('Feed', () => { if (!feedSearch(feed)) { return; } - feedTableData.unshift(feed); + feedTableData.value = [feed, ...feedTableData.value]; sweepFeed(); } function sweepFeed() { - const j = feedTableData.length; + const j = feedTableData.value.length; if (j > vrcxStore.maxTableSize + 50) { - feedTableData.splice(-50, 50); + feedTableData.value = feedTableData.value.slice(0, -50); } } async function initFeedTable() { feedTable.value.loading = true; - feedTableLookup(); + await feedTableLookup(); + feedTable.value.loading = false; } return { diff --git a/src/views/Favorites/dialogs/AvatarImportDialog.vue b/src/views/Favorites/dialogs/AvatarImportDialog.vue index ae608fbd..d740b37f 100644 --- a/src/views/Favorites/dialogs/AvatarImportDialog.vue +++ b/src/views/Favorites/dialogs/AvatarImportDialog.vue @@ -179,7 +179,9 @@ const { table } = useVrcxVueTable({ persistKey: 'avatarImportDialog', - data: rows, + get data() { + return rows.value; + }, columns: columns.value, getRowId: (row) => String(row?.id ?? ''), enablePagination: false, diff --git a/src/views/Favorites/dialogs/FriendImportDialog.vue b/src/views/Favorites/dialogs/FriendImportDialog.vue index f2f11d30..ead2639b 100644 --- a/src/views/Favorites/dialogs/FriendImportDialog.vue +++ b/src/views/Favorites/dialogs/FriendImportDialog.vue @@ -160,7 +160,9 @@ const { table } = useVrcxVueTable({ persistKey: 'friendImportDialog', - data: rows, + get data() { + return rows.value; + }, columns: columns.value, getRowId: (row) => String(row?.id ?? ''), enablePagination: false, diff --git a/src/views/Favorites/dialogs/WorldImportDialog.vue b/src/views/Favorites/dialogs/WorldImportDialog.vue index 5d8ea3aa..a92e362b 100644 --- a/src/views/Favorites/dialogs/WorldImportDialog.vue +++ b/src/views/Favorites/dialogs/WorldImportDialog.vue @@ -185,7 +185,9 @@ const { table } = useVrcxVueTable({ persistKey: 'worldImportDialog', - data: rows, + get data() { + return rows.value; + }, columns: columns.value, getRowId: (row) => String(row?.id ?? ''), enablePagination: false, diff --git a/src/views/Feed/Feed.vue b/src/views/Feed/Feed.vue index a3e54af1..dc40af33 100644 --- a/src/views/Feed/Feed.vue +++ b/src/views/Feed/Feed.vue @@ -90,8 +90,10 @@ ); const { table, pagination } = useVrcxVueTable({ + get data() { + return feedTableData.value; + }, persistKey: 'feed', - data: feedTableData, columns: baseColumns, getRowId: (row) => `${row.type}:${row.rowId}:${row.created_at ?? ''}`, enableExpanded: true, diff --git a/src/views/FriendList/FriendList.vue b/src/views/FriendList/FriendList.vue index f9803d92..78e994d2 100644 --- a/src/views/FriendList/FriendList.vue +++ b/src/views/FriendList/FriendList.vue @@ -191,7 +191,9 @@ const { table, sorting, pagination } = useVrcxVueTable({ persistKey: 'friendList', - data: friendsListDisplayData, + get data() { + return friendsListDisplayData.value; + }, columns: friendsListColumns.value, getRowId: (row) => row?.id ?? row?.displayName ?? '', enablePinning: true, diff --git a/src/views/FriendLog/FriendLog.vue b/src/views/FriendLog/FriendLog.vue index 8d449616..e4299bed 100644 --- a/src/views/FriendLog/FriendLog.vue +++ b/src/views/FriendLog/FriendLog.vue @@ -174,7 +174,9 @@ const { table, pagination } = useVrcxVueTable({ persistKey: 'friendLog', - data: friendLogDisplayData, + get data() { + return friendLogDisplayData.value; + }, columns, getRowId: (row) => `${row.type}:${row.rowId ?? row.userId ?? row.created_at ?? ''}`, initialSorting: [], diff --git a/src/views/GameLog/GameLog.vue b/src/views/GameLog/GameLog.vue index 63469885..c50e2084 100644 --- a/src/views/GameLog/GameLog.vue +++ b/src/views/GameLog/GameLog.vue @@ -133,7 +133,9 @@ const { table, pagination } = useVrcxVueTable({ persistKey: 'gameLog', - data: gameLogTableData, + get data() { + return gameLogTableData.value; + }, columns, getRowId: (row, index) => `${row.type}:${row.rowId ?? index}`, initialSorting: [], diff --git a/src/views/Moderation/Moderation.vue b/src/views/Moderation/Moderation.vue index a7f1e84c..94bb8877 100644 --- a/src/views/Moderation/Moderation.vue +++ b/src/views/Moderation/Moderation.vue @@ -160,7 +160,9 @@ const { table, pagination } = useVrcxVueTable({ persistKey: 'moderation', - data: moderationDisplayData, + get data() { + return moderationDisplayData.value; + }, columns, getRowId: (row) => row.id ?? `${row.type}:${row.sourceUserId}:${row.targetUserId}:${row.created ?? ''}`, initialSorting: [{ id: 'created', desc: true }], diff --git a/src/views/Notifications/Notification.vue b/src/views/Notifications/Notification.vue index b1682be8..4c5f471d 100644 --- a/src/views/Notifications/Notification.vue +++ b/src/views/Notifications/Notification.vue @@ -231,7 +231,9 @@ const { table, pagination } = useVrcxVueTable({ persistKey: 'notifications', - data: notificationDisplayData, + get data() { + return notificationDisplayData.value; + }, columns, getRowId: (row) => row.id ?? `${row.type}:${row.senderUserId ?? ''}:${row.created_at ?? ''}`, initialSorting: [{ id: 'created_at', desc: true }], diff --git a/src/views/Notifications/dialogs/SendInviteRequestResponseDialog.vue b/src/views/Notifications/dialogs/SendInviteRequestResponseDialog.vue index 9cc15301..e9614122 100644 --- a/src/views/Notifications/dialogs/SendInviteRequestResponseDialog.vue +++ b/src/views/Notifications/dialogs/SendInviteRequestResponseDialog.vue @@ -93,7 +93,9 @@ const { table: inviteRequestResponseTable } = useVrcxVueTable({ persistKey: 'invite-request-response-message', - data: inviteRequestResponseRows, + get data() { + return inviteRequestResponseRows.value; + }, columns: inviteRequestResponseColumns, getRowId: (row) => String(row?.slot ?? ''), enablePagination: false, diff --git a/src/views/Notifications/dialogs/SendInviteResponseDialog.vue b/src/views/Notifications/dialogs/SendInviteResponseDialog.vue index f933e818..992e0097 100644 --- a/src/views/Notifications/dialogs/SendInviteResponseDialog.vue +++ b/src/views/Notifications/dialogs/SendInviteResponseDialog.vue @@ -92,7 +92,9 @@ const { table: inviteResponseTable } = useVrcxVueTable({ persistKey: 'invite-response-message', - data: inviteResponseRows, + get data() { + return inviteResponseRows.value; + }, columns: inviteResponseColumns, getRowId: (row) => String(row?.slot ?? ''), enablePagination: false, diff --git a/src/views/PlayerList/PlayerList.vue b/src/views/PlayerList/PlayerList.vue index 3c0e1104..0aed5c20 100644 --- a/src/views/PlayerList/PlayerList.vue +++ b/src/views/PlayerList/PlayerList.vue @@ -267,7 +267,9 @@ const { table: playerListTable } = useVrcxVueTable({ persistKey: 'playerList', - data: currentInstanceUsersData, + get data() { + return currentInstanceUsersData.value; + }, columns: playerListColumns, enablePagination: false, getRowId: (row) => `${row?.ref?.id ?? ''}:${row?.displayName ?? ''}` diff --git a/src/views/PlayerList/components/PhotonEventTable.vue b/src/views/PlayerList/components/PhotonEventTable.vue index 39ea00f1..59a8b4d2 100644 --- a/src/views/PlayerList/components/PhotonEventTable.vue +++ b/src/views/PlayerList/components/PhotonEventTable.vue @@ -181,7 +181,9 @@ const { table: currentTable } = useVrcxVueTable({ persistKey: 'photonEventTable:current', - data: currentRows, + get data() { + return currentRows.value; + }, columns: currentColumns.value, getRowId: (row) => `${row?.photonId ?? ''}:${row?.created_at ?? ''}:${row?.type ?? ''}`, initialSorting: [{ id: 'created_at', desc: true }], @@ -190,7 +192,9 @@ const { table: previousTable } = useVrcxVueTable({ persistKey: 'photonEventTable:previous', - data: previousRows, + get data() { + return previousRows.value; + }, columns: previousColumns.value, getRowId: (row) => `${row?.photonId ?? ''}:${row?.created_at ?? ''}:${row?.type ?? ''}`, initialSorting: [{ id: 'created_at', desc: true }], diff --git a/src/views/Settings/dialogs/RegistryBackupDialog.vue b/src/views/Settings/dialogs/RegistryBackupDialog.vue index 54edd1d1..5317795a 100644 --- a/src/views/Settings/dialogs/RegistryBackupDialog.vue +++ b/src/views/Settings/dialogs/RegistryBackupDialog.vue @@ -93,7 +93,9 @@ const { table } = useVrcxVueTable({ persistKey: 'registryBackupDialog', - data: rows, + get data() { + return rows.value; + }, columns: columns.value, getRowId: (row) => String(row?.name ?? ''), enablePagination: false, diff --git a/src/views/Tools/dialogs/EditInviteMessagesDialog.vue b/src/views/Tools/dialogs/EditInviteMessagesDialog.vue index dce54412..74d6e6b4 100644 --- a/src/views/Tools/dialogs/EditInviteMessagesDialog.vue +++ b/src/views/Tools/dialogs/EditInviteMessagesDialog.vue @@ -119,7 +119,9 @@ const { table: inviteMessageTanstackTable } = useVrcxVueTable({ persistKey: 'edit-invite-messages:message', - data: inviteMessageRows, + get data() { + return inviteMessageRows.value; + }, columns: inviteMessageColumns, getRowId: (row) => String(row?.slot ?? ''), enablePagination: false, @@ -128,7 +130,9 @@ const { table: inviteRequestTanstackTable } = useVrcxVueTable({ persistKey: 'edit-invite-messages:request', - data: inviteRequestRows, + get data() { + return inviteRequestRows.value; + }, columns: inviteRequestColumns, getRowId: (row) => String(row?.slot ?? ''), enablePagination: false, @@ -137,7 +141,9 @@ const { table: inviteRequestResponseTanstackTable } = useVrcxVueTable({ persistKey: 'edit-invite-messages:request-response', - data: inviteRequestResponseRows, + get data() { + return inviteRequestResponseRows.value; + }, columns: inviteRequestResponseColumns, getRowId: (row) => String(row?.slot ?? ''), enablePagination: false, @@ -146,7 +152,9 @@ const { table: inviteResponseTanstackTable } = useVrcxVueTable({ persistKey: 'edit-invite-messages:response', - data: inviteResponseRows, + get data() { + return inviteResponseRows.value; + }, columns: inviteResponseColumns, getRowId: (row) => String(row?.slot ?? ''), enablePagination: false, diff --git a/src/views/Tools/dialogs/NoteExportDialog.vue b/src/views/Tools/dialogs/NoteExportDialog.vue index 66db1a4e..a1ec2750 100644 --- a/src/views/Tools/dialogs/NoteExportDialog.vue +++ b/src/views/Tools/dialogs/NoteExportDialog.vue @@ -112,7 +112,9 @@ const { table } = useVrcxVueTable({ persistKey: 'noteExportDialog', - data: rows, + get data() { + return rows.value; + }, columns: columns.value, getRowId: (row) => String(row?.id ?? ''), enablePagination: false,