Link table page sizes, remove page size setting

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">{{
-                t('dialog.group_member_moderation.select_user')
-            }}</el-button>
+            <el-button
+                size="small"
+                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) => {