diff --git a/src/components/dialogs/GroupDialog/GroupDialog.vue b/src/components/dialogs/GroupDialog/GroupDialog.vue index 9ab46071..ff2cdf6f 100644 --- a/src/components/dialogs/GroupDialog/GroupDialog.vue +++ b/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) { - groupMembersSearchPending.value = true; - } else { - groupMembersSearchExecute(); - groupMembersSearchTimer.value = setTimeout(() => { - if (groupMembersSearchPending.value) { - groupMembersSearchExecute(); - } - groupMembersSearchTimer.value = null; - }, 500); + if (groupDialog.value.memberSearch.length < 3) { + groupDialog.value.memberSearchResults = []; + isGroupMembersLoading.value = false; + return; } + debounce(groupMembersSearchDebounced, 200)(); } - function groupMembersSearchExecute() { - try { - groupMembersSearchDebounce(); - } catch (err) { - console.error(err); - } - groupMembersSearchTimer.value = null; - groupMembersSearchPending.value = false; - } - - function groupMembersSearchDebounce() { + function groupMembersSearchDebounced() { 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, diff --git a/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue b/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue index 288337b3..6e34cc34 100644 --- a/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue +++ b/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;