Link table page sizes, remove page size setting

src/App.vue

@@ -129,6 +129,7 @@
     import GameLog from './views/GameLog/GameLog.vue';
     import GroupDialog from './components/dialogs/GroupDialog/GroupDialog.vue';
     import GroupMemberModerationDialog from './components/dialogs/GroupDialog/GroupMemberModerationDialog.vue';
+    import InviteGroupDialog from './components/dialogs/InviteGroupDialog.vue';
     import LaunchDialog from './components/dialogs/LaunchDialog.vue';
     import LaunchOptionsDialog from './views/Settings/dialogs/LaunchOptionsDialog.vue';
     import Login from './views/Login/Login.vue';
@@ -145,7 +146,6 @@
     import Sidebar from './views/Sidebar/Sidebar.vue';
     import Tools from './views/Tools/Tools.vue';
     import UserDialog from './components/dialogs/UserDialog/UserDialog.vue';
-    import InviteGroupDialog from './components/dialogs/InviteGroupDialog.vue';
     import VRCXUpdateDialog from './components/dialogs/VRCXUpdateDialog.vue';
     import VRChatConfigDialog from './views/Settings/dialogs/VRChatConfigDialog.vue';
     import WorldDialog from './components/dialogs/WorldDialog/WorldDialog.vue';

src/components/DataTable.vue

@@ -29,6 +29,8 @@
 <script>
     import { computed, ref, toRefs, watch } from 'vue';
 
+    import { useAppearanceSettingsStore } from '../stores';
+
     export default {
         name: 'DataTable',
         props: {
@@ -52,6 +54,10 @@
                 type: Number,
                 default: 20
             },
+            pageSizeLinked: {
+                type: Boolean,
+                default: false
+            },
             filters: {
                 type: [Array, Object],
                 default: () => []
@@ -75,6 +81,7 @@
             'filtered-data'
         ],
         setup(props, { emit }) {
+            const appearanceSettingsStore = useAppearanceSettingsStore();
             const { data, currentPage, pageSize, tableProps, paginationProps, filters } = toRefs(props);
 
             const internalCurrentPage = ref(currentPage.value);
@@ -185,6 +192,9 @@
             };
 
             const handleSizeChange = (size) => {
+                if (props.pageSizeLinked) {
+                    appearanceSettingsStore.setTablePageSize(size);
+                }
                 internalPageSize.value = size;
             };
 

src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue

@@ -720,9 +720,13 @@
                 style="margin-top: 5px; width: 340px"
                 :placeholder="t('dialog.group_member_moderation.user_id_placeholder')"
                 clearable></el-input>
-            <el-button size="small" :disabled="!selectUserId" @click="selectGroupMemberUserId">{{
+            <el-button
-                t('dialog.group_member_moderation.select_user')
+                size="small"
-            }}</el-button>
+                style="margin-top: 5px; margin-left: 5px"
+                :disabled="!selectUserId"
+                @click="selectGroupMemberUserId"
+                >{{ t('dialog.group_member_moderation.select_user') }}</el-button
+            >
             <br />
             <br />
             <span class="name">{{ t('dialog.group_member_moderation.selected_users') }}</span>
@@ -1001,21 +1005,6 @@
         }
     });
 
-    async function initializePageSize() {
-        try {
-            const { tablePageSize } = storeToRefs(useAppearanceSettingsStore());
-
-            groupMemberModerationTable.pageSize = tablePageSize.value;
-            groupBansModerationTable.pageSize = tablePageSize.value;
-            groupLogsModerationTable.pageSize = tablePageSize.value;
-            groupInvitesModerationTable.pageSize = tablePageSize.value;
-            groupJoinRequestsModerationTable.pageSize = tablePageSize.value;
-            groupBlockedModerationTable.pageSize = tablePageSize.value;
-        } catch (error) {
-            console.error('Failed to initialize table page size:', error);
-        }
-    }
-
     function deselectGroupMember(userId) {
         const deselectInTable = (tableData) => {
             if (userId) {
@@ -1070,9 +1059,6 @@
         }
     );
 
-    // created()
-    initializePageSize();
-
     function handleGroupMemberRoleChange(args) {
         if (groupDialog.value.id === args.params.groupId) {
             groupDialog.value.members.forEach((member) => {

src/localization/en/en.json

@@ -431,8 +431,7 @@
                     "sort_instance_users_by": "Sort Instance Users by",
                     "sort_instance_users_by_time": "time",
                     "sort_instance_users_by_alphabet": "alphabetical",
-                    "table_max_size": "Table Max Size",
+                    "table_max_size": "Table Max Size"
-                    "page_size": "Page Size:"
                 },
                 "timedate": {
                     "header": "Time/Date",

src/stores/feed.js

@@ -33,6 +33,7 @@ export const useFeedStore = defineStore('Feed', () => {
             }
         },
         pageSize: 15,
+        pageSizeLinked: true,
         paginationProps: {
             small: true,
             layout: 'sizes,prev,pager,next,total',

src/stores/friend.js

@@ -87,6 +87,7 @@ export const useFriendStore = defineStore('Friend', () => {
             }
         },
         pageSize: 15,
+        pageSizeLinked: true,
         paginationProps: {
             small: true,
             layout: 'sizes,prev,pager,next,total',

src/stores/gameLog.js

@@ -72,6 +72,7 @@ export const useGameLogStore = defineStore('GameLog', () => {
             }
         },
         pageSize: 15,
+        pageSizeLinked: true,
         paginationProps: {
             small: true,
             layout: 'sizes,prev,pager,next,total',

src/stores/moderation.js

@@ -15,7 +15,8 @@ export const useModerationStore = defineStore('Moderation', () => {
     const isPlayerModerationsLoading = ref(false);
     const playerModerationTable = ref({
         data: [],
-        pageSize: 15
+        pageSize: 15,
+        pageSizeLinked: true
     });
 
     watch(

src/stores/notification.js

@@ -75,6 +75,7 @@ export const useNotificationStore = defineStore('Notification', () => {
             }
         },
         pageSize: 15,
+        pageSizeLinked: true,
         paginationProps: {
             small: true,
             layout: 'sizes,prev,pager,next,total',

src/stores/settings/appearance.js

@@ -187,7 +187,6 @@ export const useAppearanceSettingsStore = defineStore(
                 instanceUsersSortAlphabeticalConfig;
 
             setTablePageSize(tablePageSizeConfig);
-            handleSetTablePageSize(tablePageSize.value);
 
             dtHour12.value = dtHour12Config;
             dtIsoFormat.value = dtIsoFormatConfig;
@@ -451,6 +450,12 @@ export const useAppearanceSettingsStore = defineStore(
          * @param {number} size
          */
         function setTablePageSize(size) {
+            feedStore.feedTable.pageSize = size;
+            gameLogStore.gameLogTable.pageSize = size;
+            friendStore.friendLogTable.pageSize = size;
+            moderationStore.playerModerationTable.pageSize = size;
+            notificationStore.notificationTable.pageSize = size;
+
             tablePageSize.value = size;
             configRepository.setInt('VRCX_tablePageSize', size);
         }
@@ -636,15 +641,6 @@ export const useAppearanceSettingsStore = defineStore(
             }
         }
 
-        async function handleSetTablePageSize(pageSize) {
-            feedStore.feedTable.pageSize = pageSize;
-            gameLogStore.gameLogTable.pageSize = pageSize;
-            friendStore.friendLogTable.pageSize = pageSize;
-            moderationStore.playerModerationTable.pageSize = pageSize;
-            notificationStore.notificationTable.pageSize = pageSize;
-            setTablePageSize(pageSize);
-        }
-
         function promptMaxTableSizeDialog() {
             ElMessageBox.prompt(
                 t('prompt.change_table_size.description'),
@@ -743,7 +739,6 @@ export const useAppearanceSettingsStore = defineStore(
             userColourInit,
             applyUserTrustLevel,
             changeAppLanguage,
-            handleSetTablePageSize,
             promptMaxTableSizeDialog
         };
     }

src/views/Settings/Settings.vue

@@ -412,23 +412,6 @@
                             @click="promptMaxTableSizeDialog"
                             >{{ t('view.settings.appearance.appearance.table_max_size') }}</el-button
                         >
-                        <el-dropdown trigger="click" size="small" @click.stop>
-                            <el-button size="small">
-                                <span
-                                    >{{ t('view.settings.appearance.appearance.page_size') }} {{ tablePageSize }}
-                                    <el-icon class="el-icon--right"><ArrowDown /></el-icon
-                                ></span>
-                            </el-button>
-                            <template #dropdown>
-                                <el-dropdown-menu>
-                                    <el-dropdown-item
-                                        v-for="number in [10, 15, 20, 25, 50, 100]"
-                                        :key="number"
-                                        @click="handleSetTablePageSize(number)"
-                                        v-text="number" />
-                                </el-dropdown-menu>
-                            </template>
-                        </el-dropdown>
                     </div>
                     <div class="options-container-item" />
                 </div>
@@ -1570,7 +1553,6 @@
         updateTrustColor,
         saveThemeMode,
         changeAppLanguage,
-        handleSetTablePageSize,
         promptMaxTableSizeDialog
     } = appearanceSettingsStore;