mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-26 02:03:49 +02:00
feat: unify table page size handling with useVrcxVueTable
This commit is contained in:
@@ -120,6 +120,9 @@
|
||||
const hasDateFilter = computed(() => !!(feedTable.value.dateFrom || feedTable.value.dateTo));
|
||||
const activeFilterCount = computed(() => (hasDateFilter.value ? 1 : 0));
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
function applyDateFilter() {
|
||||
if (dateRange.value?.start) {
|
||||
const s = dateRange.value.start;
|
||||
@@ -137,6 +140,9 @@
|
||||
feedTableLookup();
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
function clearDateFilter() {
|
||||
dateRange.value = undefined;
|
||||
feedTable.value.dateFrom = '';
|
||||
@@ -155,10 +161,11 @@
|
||||
});
|
||||
|
||||
const pageSizes = computed(() => appearanceSettingsStore.tablePageSizes);
|
||||
const pageSize = computed(() =>
|
||||
feedTable.value.pageSizeLinked ? appearanceSettingsStore.tablePageSize : feedTable.value.pageSize
|
||||
);
|
||||
|
||||
/**
|
||||
*
|
||||
* @param row
|
||||
*/
|
||||
function getFeedRowId(row) {
|
||||
if (row?.id != null) return `id:${row.id}`;
|
||||
if (row?.rowId != null) return `row:${row.rowId}`;
|
||||
@@ -185,7 +192,7 @@
|
||||
initialExpanded: {},
|
||||
initialPagination: {
|
||||
pageIndex: 0,
|
||||
pageSize: pageSize.value
|
||||
pageSize: appearanceSettingsStore.tablePageSize
|
||||
},
|
||||
tableOptions: {
|
||||
autoResetExpanded: false,
|
||||
@@ -200,11 +207,11 @@
|
||||
});
|
||||
|
||||
const handlePageSizeChange = (size) => {
|
||||
if (feedTable.value.pageSizeLinked) {
|
||||
appearanceSettingsStore.setTablePageSize(size);
|
||||
} else {
|
||||
feedTable.value.pageSize = size;
|
||||
}
|
||||
pagination.value = {
|
||||
...pagination.value,
|
||||
pageIndex: 0,
|
||||
pageSize: size
|
||||
};
|
||||
};
|
||||
|
||||
const activeFilterSelection = computed(() => {
|
||||
@@ -215,6 +222,10 @@
|
||||
return filter;
|
||||
});
|
||||
|
||||
/**
|
||||
*
|
||||
* @param value
|
||||
*/
|
||||
function handleFeedFilterChange(value) {
|
||||
const selected = Array.isArray(value) ? value : [];
|
||||
const wasAll = activeFilterSelection.value.includes('All');
|
||||
@@ -230,16 +241,4 @@
|
||||
}
|
||||
feedTableLookup();
|
||||
}
|
||||
|
||||
watch(pageSize, (size) => {
|
||||
if (pagination.value.pageSize === size) {
|
||||
return;
|
||||
}
|
||||
pagination.value = {
|
||||
...pagination.value,
|
||||
pageIndex: 0,
|
||||
pageSize: size
|
||||
};
|
||||
table.setPageSize(size);
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -171,7 +171,6 @@
|
||||
const selectedFriends = ref(new Set());
|
||||
const friendsListDisplayData = ref([]);
|
||||
const pageSizes = computed(() => appearanceSettingsStore.tablePageSizes);
|
||||
const pageSize = computed(() => appearanceSettingsStore.tablePageSize);
|
||||
const defaultSorting = [{ id: 'friendNumber', desc: true }];
|
||||
|
||||
// const initialColumnPinning = {
|
||||
@@ -212,7 +211,7 @@
|
||||
initialSorting: defaultSorting,
|
||||
initialPagination: {
|
||||
pageIndex: 0,
|
||||
pageSize: pageSize.value
|
||||
pageSize: appearanceSettingsStore.tablePageSize
|
||||
}
|
||||
});
|
||||
|
||||
@@ -221,7 +220,11 @@
|
||||
});
|
||||
|
||||
const handlePageSizeChange = (size) => {
|
||||
appearanceSettingsStore.setTablePageSize(size);
|
||||
pagination.value = {
|
||||
...pagination.value,
|
||||
pageIndex: 0,
|
||||
pageSize: size
|
||||
};
|
||||
};
|
||||
|
||||
const handleRowClick = (row) => {
|
||||
@@ -251,18 +254,6 @@
|
||||
{ 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();
|
||||
|
||||
watch(
|
||||
@@ -280,6 +271,9 @@
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
function friendsListSearchChange() {
|
||||
friendsListLoading.value = true;
|
||||
let query = '';
|
||||
@@ -333,6 +327,10 @@
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param id
|
||||
*/
|
||||
function toggleFriendSelection(id) {
|
||||
if (selectedFriends.value.has(id)) {
|
||||
selectedFriends.value.delete(id);
|
||||
@@ -341,12 +339,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
function toggleFriendsListBulkUnfriendMode() {
|
||||
if (!friendsListBulkUnfriendMode.value) {
|
||||
selectedFriends.value.clear();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
function showBulkUnfriendSelectionConfirm() {
|
||||
const pending = friendsListDisplayData.value
|
||||
.filter((item) => selectedFriends.value.has(item.id))
|
||||
@@ -367,6 +371,9 @@
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
async function bulkUnfriendSelection() {
|
||||
if (!selectedFriends.value.size) return;
|
||||
const selectedFriendsCount = selectedFriends.value.size;
|
||||
@@ -384,6 +391,9 @@
|
||||
selectedFriends.value.clear();
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
async function friendsListLoadUsers() {
|
||||
const toFetch = Array.from(friends.value.values())
|
||||
.filter((ctx) => ctx.ref && !ctx.ref.date_joined)
|
||||
@@ -419,21 +429,35 @@
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
function cancelFriendsListLoad() {
|
||||
friendsListLoading.value = false;
|
||||
friendsListLoadDialogVisible.value = false;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param val
|
||||
*/
|
||||
function selectFriendsListRow(val) {
|
||||
if (!val) return;
|
||||
if (!val.id) emit('lookup-user', val);
|
||||
else showUserDialog(val.id);
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
function openChartsTab() {
|
||||
router.push({ name: 'charts' });
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param value
|
||||
*/
|
||||
function handleFriendListFilterChange(value) {
|
||||
friendsListSearchFilters.value = Array.isArray(value) ? value : [];
|
||||
friendsListSearchChange();
|
||||
|
||||
@@ -169,9 +169,6 @@
|
||||
});
|
||||
|
||||
const pageSizes = computed(() => appearanceSettingsStore.tablePageSizes);
|
||||
const pageSize = computed(() =>
|
||||
friendLogTable.value.pageSizeLinked ? appearanceSettingsStore.tablePageSize : friendLogTable.value.pageSize
|
||||
);
|
||||
|
||||
const { table, pagination } = useVrcxVueTable({
|
||||
persistKey: 'friendLog',
|
||||
@@ -183,7 +180,7 @@
|
||||
initialSorting: [],
|
||||
initialPagination: {
|
||||
pageIndex: 0,
|
||||
pageSize: pageSize.value
|
||||
pageSize: appearanceSettingsStore.tablePageSize
|
||||
},
|
||||
tableOptions: {
|
||||
autoResetPageIndex: false
|
||||
@@ -195,22 +192,10 @@
|
||||
});
|
||||
|
||||
const handlePageSizeChange = (size) => {
|
||||
if (friendLogTable.value.pageSizeLinked) {
|
||||
appearanceSettingsStore.setTablePageSize(size);
|
||||
} else {
|
||||
friendLogTable.value.pageSize = size;
|
||||
}
|
||||
};
|
||||
|
||||
watch(pageSize, (size) => {
|
||||
if (pagination.value.pageSize === size) {
|
||||
return;
|
||||
}
|
||||
pagination.value = {
|
||||
...pagination.value,
|
||||
pageIndex: 0,
|
||||
pageSize: size
|
||||
};
|
||||
table.setPageSize(size);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -139,9 +139,6 @@
|
||||
}
|
||||
|
||||
const pageSizes = computed(() => appearanceSettingsStore.tablePageSizes);
|
||||
const pageSize = computed(() =>
|
||||
gameLogTable.value.pageSizeLinked ? appearanceSettingsStore.tablePageSize : gameLogTable.value.pageSize
|
||||
);
|
||||
|
||||
function getGameLogRowId(row) {
|
||||
if (row?.rowId != null) return `row:${row.rowId}`;
|
||||
@@ -165,7 +162,7 @@
|
||||
initialSorting: [],
|
||||
initialPagination: {
|
||||
pageIndex: 0,
|
||||
pageSize: pageSize.value
|
||||
pageSize: appearanceSettingsStore.tablePageSize
|
||||
},
|
||||
tableOptions: {
|
||||
autoResetPageIndex: false
|
||||
@@ -179,22 +176,10 @@
|
||||
});
|
||||
|
||||
const handlePageSizeChange = (size) => {
|
||||
if (gameLogTable.value.pageSizeLinked) {
|
||||
appearanceSettingsStore.setTablePageSize(size);
|
||||
} else {
|
||||
gameLogTable.value.pageSize = size;
|
||||
}
|
||||
};
|
||||
|
||||
watch(pageSize, (size) => {
|
||||
if (pagination.value.pageSize === size) {
|
||||
return;
|
||||
}
|
||||
pagination.value = {
|
||||
...pagination.value,
|
||||
pageIndex: 0,
|
||||
pageSize: size
|
||||
};
|
||||
table.setPageSize(size);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -152,11 +152,6 @@
|
||||
});
|
||||
|
||||
const pageSizes = computed(() => appearanceSettingsStore.tablePageSizes);
|
||||
const pageSize = computed(() =>
|
||||
playerModerationTable.value.pageSizeLinked
|
||||
? appearanceSettingsStore.tablePageSize
|
||||
: playerModerationTable.value.pageSize
|
||||
);
|
||||
|
||||
const { table, pagination } = useVrcxVueTable({
|
||||
persistKey: 'moderation',
|
||||
@@ -168,7 +163,7 @@
|
||||
initialSorting: [{ id: 'created', desc: true }],
|
||||
initialPagination: {
|
||||
pageIndex: 0,
|
||||
pageSize: pageSize.value
|
||||
pageSize: appearanceSettingsStore.tablePageSize
|
||||
}
|
||||
});
|
||||
|
||||
@@ -177,24 +172,12 @@
|
||||
});
|
||||
|
||||
const handlePageSizeChange = (size) => {
|
||||
if (playerModerationTable.value.pageSizeLinked) {
|
||||
appearanceSettingsStore.setTablePageSize(size);
|
||||
} else {
|
||||
playerModerationTable.value.pageSize = size;
|
||||
}
|
||||
};
|
||||
|
||||
watch(pageSize, (size) => {
|
||||
if (pagination.value.pageSize === size) {
|
||||
return;
|
||||
}
|
||||
pagination.value = {
|
||||
...pagination.value,
|
||||
pageIndex: 0,
|
||||
pageSize: size
|
||||
};
|
||||
table.setPageSize(size);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -230,7 +230,6 @@
|
||||
const { currentUser } = storeToRefs(useUserStore());
|
||||
|
||||
const pageSizes = computed(() => appearanceSettingsStore.tablePageSizes);
|
||||
const pageSize = computed(() => appearanceSettingsStore.tablePageSize);
|
||||
|
||||
const containerRef = ref(null);
|
||||
const searchText = ref('');
|
||||
@@ -595,20 +594,18 @@
|
||||
initialSorting: [{ id: 'updated_at', desc: true }],
|
||||
initialPagination: {
|
||||
pageIndex: 0,
|
||||
pageSize: pageSize.value
|
||||
pageSize: appearanceSettingsStore.tablePageSize
|
||||
}
|
||||
});
|
||||
|
||||
const handlePageSizeChange = (size) => {
|
||||
appearanceSettingsStore.setTablePageSize(size);
|
||||
pagination.value = {
|
||||
...pagination.value,
|
||||
pageIndex: 0,
|
||||
pageSize: size
|
||||
};
|
||||
};
|
||||
|
||||
watch(pageSize, (size) => {
|
||||
if (pagination.value.pageSize === size) return;
|
||||
pagination.value = { ...pagination.value, pageIndex: 0, pageSize: size };
|
||||
table.setPageSize(size);
|
||||
});
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
|
||||
@@ -222,11 +222,6 @@
|
||||
});
|
||||
|
||||
const pageSizes = computed(() => appearanceSettingsStore.tablePageSizes);
|
||||
const pageSize = computed(() =>
|
||||
notificationTable.value.pageSizeLinked
|
||||
? appearanceSettingsStore.tablePageSize
|
||||
: notificationTable.value.pageSize
|
||||
);
|
||||
|
||||
const { table, pagination } = useVrcxVueTable({
|
||||
persistKey: 'notifications',
|
||||
@@ -238,7 +233,7 @@
|
||||
initialSorting: [{ id: 'created_at', desc: true }],
|
||||
initialPagination: {
|
||||
pageIndex: 0,
|
||||
pageSize: pageSize.value
|
||||
pageSize: appearanceSettingsStore.tablePageSize
|
||||
},
|
||||
tableOptions: {
|
||||
autoResetPageIndex: false
|
||||
@@ -252,24 +247,12 @@
|
||||
});
|
||||
|
||||
const handlePageSizeChange = (size) => {
|
||||
if (notificationTable.value.pageSizeLinked) {
|
||||
appearanceSettingsStore.setTablePageSize(size);
|
||||
} else {
|
||||
notificationTable.value.pageSize = size;
|
||||
}
|
||||
};
|
||||
|
||||
watch(pageSize, (size) => {
|
||||
if (pagination.value.pageSize === size) {
|
||||
return;
|
||||
}
|
||||
pagination.value = {
|
||||
...pagination.value,
|
||||
pageIndex: 0,
|
||||
pageSize: size
|
||||
};
|
||||
table.setPageSize(size);
|
||||
});
|
||||
};
|
||||
|
||||
const sendInviteResponseDialog = ref({
|
||||
messageSlot: {},
|
||||
|
||||
Reference in New Issue
Block a user