Fix searching group members

src/components/dialogs/GroupDialog/GroupDialog.vue

@@ -1212,7 +1212,8 @@
         userImage,
         userStatusClass,
         formatDateFilter,
-        textToHex
+        textToHex,
+        debounce
     } from '../../../shared/utils';
     import {
         useAppearanceSettingsStore,
@@ -1253,8 +1254,6 @@
     const groupDialogRef = ref(null);
     const isGroupMembersDone = ref(false);
     const isGroupMembersLoading = ref(false);
-    const groupMembersSearchTimer = ref(null);
-    const groupMembersSearchPending = ref(false);
     const groupDialogGalleryCurrentName = ref('0');
     const groupDialogTabCurrentName = ref('0');
     const isGroupGalleryLoading = ref(false);
@@ -1328,37 +1327,22 @@
     }
 
     function groupMembersSearch() {
-        if (groupMembersSearchTimer.value) {
+        if (groupDialog.value.memberSearch.length < 3) {
-            groupMembersSearchPending.value = true;
+            groupDialog.value.memberSearchResults = [];
-        } else {
+            isGroupMembersLoading.value = false;
-            groupMembersSearchExecute();
+            return;
-            groupMembersSearchTimer.value = setTimeout(() => {
-                if (groupMembersSearchPending.value) {
-                    groupMembersSearchExecute();
-                }
-                groupMembersSearchTimer.value = null;
-            }, 500);
         }
+        debounce(groupMembersSearchDebounced, 200)();
     }
 
-    function groupMembersSearchExecute() {
+    function groupMembersSearchDebounced() {
-        try {
-            groupMembersSearchDebounce();
-        } catch (err) {
-            console.error(err);
-        }
-        groupMembersSearchTimer.value = null;
-        groupMembersSearchPending.value = false;
-    }
-
-    function groupMembersSearchDebounce() {
         const D = groupDialog.value;
         const search = D.memberSearch;
         D.memberSearchResults = [];
         if (!search || search.length < 3) {
             return;
         }
-        isGroupMembersLoading.value = false;
+        isGroupMembersLoading.value = true;
         groupRequest
             .getGroupMembersSearch({
                 groupId: D.id,

src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue

@@ -846,7 +846,7 @@
     import * as workerTimers from 'worker-timers';
     import { groupRequest, userRequest } from '../../../api';
     import { groupDialogFilterOptions, groupDialogSortingOptions } from '../../../shared/constants';
-    import { hasGroupPermission, userImage, userImageFull, formatDateFilter } from '../../../shared/utils';
+    import { hasGroupPermission, userImage, userImageFull, formatDateFilter, debounce } from '../../../shared/utils';
     import { useAppearanceSettingsStore, useGalleryStore, useGroupStore, useUserStore } from '../../../stores';
     import GroupMemberModerationExportDialog from './GroupMemberModerationExportDialog.vue';
 
@@ -864,7 +864,6 @@
     const selectedUsersArray = ref([]);
     const isGroupMembersLoading = ref(false);
     const isGroupMembersDone = ref(false);
-    const groupMembersSearch = ref('');
     const memberFilter = ref({
         id: null,
         name: 'dialog.group.members.filters.everyone'
@@ -1774,6 +1773,52 @@
             .replace(/\b\w/g, (l) => l.toUpperCase());
     }
 
+    function groupMembersSearch() {
+        if (memberSearch.value.length < 3) {
+            groupMemberModerationTable.data = [];
+            isGroupMembersLoading.value = false;
+            return;
+        }
+        isGroupMembersLoading.value = true;
+        debounce(groupMembersSearchDebounced, 200)();
+    }
+
+    function groupMembersSearchDebounced() {
+        const groupId = groupMemberModeration.value.id;
+        const search = memberSearch.value;
+        groupMemberModerationTable.data = [];
+        if (memberSearch.value.length < 3) {
+            return;
+        }
+        isGroupMembersLoading.value = true;
+        groupRequest
+            .getGroupMembersSearch({
+                groupId,
+                query: search,
+                n: 100,
+                offset: 0
+            })
+            .then((args) => {
+                for (const json of args.json.results) {
+                    handleGroupMember({
+                        json,
+                        params: {
+                            groupId: args.params.groupId
+                        }
+                    });
+                }
+                if (groupId === args.params.groupId) {
+                    groupMemberModerationTable.data = args.json.results.map((member) => ({
+                        ...member,
+                        $selected: Boolean(selectedUsers[member.userId])
+                    }));
+                }
+            })
+            .finally(() => {
+                isGroupMembersLoading.value = false;
+            });
+    }
+
     async function getGroupMembers() {
         members.value = [];
         isGroupMembersDone.value = false;