MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-21 15:53:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

User dialog group moderation tools

Browse Source
This commit is contained in:
Natsumi
2025-08-23 07:22:30 +12:00
parent af6848e409
commit 4f94582731
10 changed files with 492 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/components/dialogs/GroupDialog/GroupDialog.vue
View File

@@ -318,7 +318,10 @@
{{ t('dialog.group.actions.create_post') }}
</el-dropdown-item>
</template>
<el-dropdown-item icon="el-icon-s-operation" command="Moderation Tools">
<el-dropdown-item
:disabled="!hasGroupModerationPermission(groupDialog.ref)"
icon="el-icon-s-operation"
command="Moderation Tools">
{{ t('dialog.group.actions.moderation_tools') }}
</el-dropdown-item>
<template
@@ -1152,14 +1155,6 @@
</div>
<!--Nested-->
<GroupPostEditDialog :dialog-data.sync="groupPostEditDialog" :selected-gallery-file="selectedGalleryFile" />
<GroupMemberModerationDialog
:is-group-members-loading.sync="isGroupMembersLoading"
:group-member-moderation="groupMemberModeration"
@close-dialog="closeMemberModerationDialog"
@group-members-search="groupMembersSearch"
@load-all-group-members="loadAllGroupMembers"
@set-group-member-filter="setGroupMemberFilter"
@set-group-member-sort-order="setGroupMemberSortOrder" />
<InviteGroupDialog />
</safe-dialog>
</template>
@@ -1179,6 +1174,7 @@
downloadAndSaveJson,
getFaviconUrl,
hasGroupPermission,
hasGroupModerationPermission,
languageClass,
openExternalLink,
refreshInstancePlayerCount,
@@ -1195,7 +1191,6 @@
useUserStore
} from '../../../stores';
import InviteGroupDialog from '../InviteGroupDialog.vue';
import GroupMemberModerationDialog from './GroupMemberModerationDialog.vue';
import GroupPostEditDialog from './GroupPostEditDialog.vue';
const { t } = useI18n();
@@ -1212,7 +1207,8 @@
setGroupVisibility,
applyGroupMember,
handleGroupMember,
handleGroupMemberProps
handleGroupMemberProps,
showGroupMemberModerationDialog
} = useGroupStore();
const { lastLocation } = storeToRefs(useLocationStore());
@@ -1245,13 +1241,6 @@
postId: '',
groupId: ''
});
const groupMemberModeration = reactive({
visible: false,
loading: false,
id: '',
groupRef: {},
auditLogTypes: []
});
let loadMoreGroupMembersParams = ref({
n: 100,
@@ -1292,10 +1281,6 @@
handleGroupRepresentationChange(groupId, false);
}
function closeMemberModerationDialog() {
groupMemberModeration.visible = false;
}
function groupMembersSearch() {
if (groupMembersSearchTimer.value) {
groupMembersSearchPending.value = true;
@@ -1539,28 +1524,6 @@
});
}
function showGroupMemberModerationDialog(groupId) {
if (groupId !== groupDialog.value.id) {
return;
}
const D = groupMemberModeration;
D.id = groupId;
D.groupRef = {};
D.auditLogTypes = [];
groupRequest.getCachedGroup({ groupId }).then((args) => {
D.groupRef = args.ref;
if (hasGroupPermission(D.groupRef, 'group-audit-view')) {
groupRequest.getGroupAuditLogTypes({ groupId }).then((args) => {
if (groupMemberModeration.id !== args.params.groupId) {
return;
}
groupMemberModeration.auditLogTypes = args.json;
});
}
});
D.visible = true;
}
function joinGroup(id) {
if (!id) {
return null;

375
src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
View File

@@ -1,12 +1,11 @@
<template>
<safe-dialog
class="x-dialog"
:visible="groupMemberModeration.visible"
:visible.sync="groupMemberModeration.visible"
:title="t('dialog.group_member_moderation.header')"
append-to-body
top="5vh"
width="90vw"
@close="closeDialog">
width="90vw">
<div>
<h3>{{ groupMemberModeration.groupRef.name }}</h3>
<el-tabs type="card" style="height: 100%">
@@ -33,15 +32,14 @@
:disabled="
Boolean(
isGroupMembersLoading ||
groupDialog.memberSearch.length ||
!hasGroupPermission(groupDialog.ref, 'group-bans-manage')
memberSearch.length ||
!hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')
)
"
@click.native.stop>
<el-button size="mini">
<span
>{{ t(groupDialog.memberSortOrder.name) }}
<i class="el-icon-arrow-down el-icon--right"></i
>{{ t(memberSortOrder.name) }} <i class="el-icon-arrow-down el-icon--right"></i
></span>
</el-button>
<el-dropdown-menu slot="dropdown">
@@ -61,15 +59,14 @@
:disabled="
Boolean(
isGroupMembersLoading ||
groupDialog.memberSearch.length ||
!hasGroupPermission(groupDialog.ref, 'group-bans-manage')
memberSearch.length ||
!hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')
)
"
@click.native.stop>
<el-button size="mini">
<span
>{{ t(groupDialog.memberFilter.name) }}
<i class="el-icon-arrow-down el-icon--right"></i
>{{ t(memberFilter.name) }} <i class="el-icon-arrow-down el-icon--right"></i
></span>
</el-button>
<el-dropdown-menu slot="dropdown">
@@ -79,7 +76,7 @@
@click.native="setGroupMemberFilter(item)"
v-text="t(item.name)"></el-dropdown-item>
<el-dropdown-item
v-for="item in groupDialog.ref.roles"
v-for="item in groupMemberModeration.groupRef.roles"
:key="item.name"
@click.native="setGroupMemberFilter(item)"
><span v-if="!item.defaultRole">{{ t(item.name) }}</span></el-dropdown-item
@@ -88,8 +85,8 @@
</el-dropdown>
</div>
<el-input
v-model="groupDialog.memberSearch"
:disabled="!hasGroupPermission(groupDialog.ref, 'group-bans-manage')"
v-model="memberSearch"
:disabled="!hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')"
clearable
size="mini"
:placeholder="t('dialog.group.members.search')"
@@ -99,7 +96,10 @@
<el-button size="small" @click="selectAllGroupMembers">{{
t('dialog.group_member_moderation.select_all')
}}</el-button>
<data-tables v-bind="groupMemberModerationTable" style="margin-top: 10px">
<data-tables
v-if="groupMemberModerationTable.data.length"
v-bind="groupMemberModerationTable"
style="margin-top: 10px">
<el-table-column width="55" prop="$selected">
<template #default="scope">
<el-button type="text" size="mini" @click.stop>
@@ -188,7 +188,7 @@
<el-tab-pane
:label="t('dialog.group_member_moderation.bans')"
:disabled="!hasGroupPermission(groupDialog.ref, 'group-bans-manage')">
:disabled="!hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')">
<div style="margin-top: 10px">
<el-button
type="default"
@@ -303,7 +303,7 @@
<el-tab-pane
:label="t('dialog.group_member_moderation.invites')"
:disabled="!hasGroupPermission(groupDialog.ref, 'group-invites-manage')">
:disabled="!hasGroupPermission(groupMemberModeration.groupRef, 'group-invites-manage')">
<div style="margin-top: 10px">
<el-button
type="default"
@@ -385,7 +385,10 @@
:disabled="
Boolean(
progressCurrent ||
!hasGroupPermission(groupDialog.ref, 'group-invites-manage')
!hasGroupPermission(
groupMemberModeration.groupRef,
'group-invites-manage'
)
)
"
@click="groupMembersDeleteSentInvite"
@@ -464,7 +467,10 @@
:disabled="
Boolean(
progressCurrent ||
!hasGroupPermission(groupDialog.ref, 'group-invites-manage')
!hasGroupPermission(
groupMemberModeration.groupRef,
'group-invites-manage'
)
)
"
@click="groupMembersAcceptInviteRequest"
@@ -474,7 +480,10 @@
:disabled="
Boolean(
progressCurrent ||
!hasGroupPermission(groupDialog.ref, 'group-invites-manage')
!hasGroupPermission(
groupMemberModeration.groupRef,
'group-invites-manage'
)
)
"
@click="groupMembersRejectInviteRequest"
@@ -484,7 +493,10 @@
:disabled="
Boolean(
progressCurrent ||
!hasGroupPermission(groupDialog.ref, 'group-invites-manage')
!hasGroupPermission(
groupMemberModeration.groupRef,
'group-invites-manage'
)
)
"
@click="groupMembersBlockJoinRequest"
@@ -563,7 +575,10 @@
:disabled="
Boolean(
progressCurrent ||
!hasGroupPermission(groupDialog.ref, 'group-invites-manage')
!hasGroupPermission(
groupMemberModeration.groupRef,
'group-invites-manage'
)
)
"
@click="groupMembersDeleteBlockedRequest"
@@ -576,7 +591,7 @@
<el-tab-pane
:label="t('dialog.group_member_moderation.logs')"
:disabled="!hasGroupPermission(groupDialog.ref, 'group-audit-view')">
:disabled="!hasGroupPermission(groupMemberModeration.groupRef, 'group-audit-view')">
<div style="margin-top: 10px">
<el-button
type="default"
@@ -707,10 +722,13 @@
style="margin-right: 5px; margin-top: 5px"
closable
@close="deleteSelectedGroupMember(user)">
<span
>{{ user.user?.displayName }}
<i v-if="user.membershipStatus !== 'member'" class="el-icon-warning" style="margin-left: 5px"></i
></span>
<el-tooltip v-if="user.membershipStatus !== 'member'" placement="top">
<template #content>
<span>{{ t('dialog.group_member_moderation.user_isnt_in_group') }}</span>
</template>
<i class="el-icon el-icon-warning" style="display: inline-block" />
</el-tooltip>
<span v-text="user.user?.displayName || user.userId" style="font-weight: bold; margin-left: 5px"></span>
</el-tag>
<br />
<br />
@@ -759,7 +777,7 @@
Boolean(
!selectedRoles.length ||
progressCurrent ||
!hasGroupPermission(groupDialog.ref, 'group-roles-assign')
!hasGroupPermission(groupMemberModeration.groupRef, 'group-roles-assign')
)
"
@click="groupMembersAddRoles"
@@ -770,29 +788,41 @@
Boolean(
!selectedRoles.length ||
progressCurrent ||
!hasGroupPermission(groupDialog.ref, 'group-roles-assign')
!hasGroupPermission(groupMemberModeration.groupRef, 'group-roles-assign')
)
"
@click="groupMembersRemoveRoles"
>{{ t('dialog.group_member_moderation.remove_roles') }}</el-button
>
<el-button
:disabled="Boolean(progressCurrent || !hasGroupPermission(groupDialog.ref, 'group-members-manage'))"
:disabled="
Boolean(
progressCurrent || !hasGroupPermission(groupMemberModeration.groupRef, 'group-members-manage')
)
"
@click="groupMembersSaveNote"
>{{ t('dialog.group_member_moderation.save_note') }}</el-button
>
<el-button
:disabled="Boolean(progressCurrent || !hasGroupPermission(groupDialog.ref, 'group-members-remove'))"
:disabled="
Boolean(
progressCurrent || !hasGroupPermission(groupMemberModeration.groupRef, 'group-members-remove')
)
"
@click="groupMembersKick"
>{{ t('dialog.group_member_moderation.kick') }}</el-button
>
<el-button
:disabled="Boolean(progressCurrent || !hasGroupPermission(groupDialog.ref, 'group-bans-manage'))"
:disabled="
Boolean(progressCurrent || !hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage'))
"
@click="groupMembersBan"
>{{ t('dialog.group_member_moderation.ban') }}</el-button
>
<el-button
:disabled="Boolean(progressCurrent || !hasGroupPermission(groupDialog.ref, 'group-bans-manage'))"
:disabled="
Boolean(progressCurrent || !hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage'))
"
@click="groupMembersUnban"
>{{ t('dialog.group_member_moderation.unban') }}</el-button
>
@@ -814,6 +844,7 @@
import { storeToRefs } from 'pinia';
import { getCurrentInstance, reactive, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n-bridge';
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';
@@ -823,8 +854,8 @@
const { randomUserColours } = storeToRefs(useAppearanceSettingsStore());
const { showUserDialog } = useUserStore();
const { currentUser } = storeToRefs(useUserStore());
const { groupDialog } = storeToRefs(useGroupStore());
const { applyGroupMember, handleGroupMemberProps } = useGroupStore();
const { groupDialog, groupMemberModeration } = storeToRefs(useGroupStore());
const { applyGroupMember, handleGroupMember, handleGroupMemberProps } = useGroupStore();
const { showFullscreenImageDialog } = useGalleryStore();
const { t } = useI18n();
const instance = getCurrentInstance();
@@ -832,6 +863,28 @@
const selectedUsers = reactive({});
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'
});
const memberSortOrder = ref({
id: '',
name: 'dialog.group.members.sorting.joined_at_desc',
value: 'joinedAt:desc'
});
const members = ref([]);
const memberSearch = ref('');
let loadMoreGroupMembersParams = ref({
n: 100,
offset: 0,
groupId: '',
sort: '',
roleId: ''
});
function setSelectedUsers(usersId, user) {
if (!user) {
@@ -965,26 +1018,6 @@
deselectInTable(groupBlockedModerationTable.data);
}
const props = defineProps({
isGroupMembersLoading: {
type: Boolean,
default: false
},
groupMemberModeration: {
type: Object,
required: true
}
});
const emit = defineEmits([
'update:is-group-members-loading',
'close-dialog',
'load-all-group-members',
'set-group-member-sort-order',
'set-group-member-filter',
'group-members-search'
]);
const selectUserId = ref('');
const progressCurrent = ref(0);
const progressTotal = ref(0);
@@ -994,12 +1027,9 @@
const isGroupLogsExportDialogVisible = ref(false);
watch(
() => props.groupMemberModeration.visible,
() => groupMemberModeration.value.visible,
(newVal) => {
if (newVal) {
if (props.groupMemberModeration.id !== groupDialog.value.id) {
return;
}
groupMemberModerationTable.data = [];
groupBansModerationTable.data = [];
groupInvitesModerationTable.data = [];
@@ -1011,62 +1041,17 @@
selectUserId.value = '';
selectedRoles.value = [];
note.value = '';
if (groupMemberModeration.value.openWithUserId) {
addGroupMemberToSelection(groupMemberModeration.value.openWithUserId);
}
}
}
);
watch(
() => groupDialog.value.members,
(newVal) => {
if (newVal) {
setGroupMemberModerationTable(newVal);
}
},
{ immediate: true, deep: true }
);
watch(
() => groupDialog.value.memberSearchResults,
(newVal) => {
if (newVal) {
setGroupMemberModerationTable(newVal);
}
},
{ immediate: true, deep: true }
);
// created()
initializePageSize();
function loadAllGroupMembers() {
emit('load-all-group-members');
}
function setGroupMemberSortOrder(item) {
emit('set-group-member-sort-order', item);
}
function setGroupMemberFilter(filter) {
emit('set-group-member-filter', filter);
}
function groupMembersSearch() {
emit('group-members-search');
}
function updateIsGroupMembersLoading(value) {
emit('update:is-group-members-loading', value);
}
function closeDialog() {
emit('close-dialog');
}
function setGroupMemberModerationTable(data) {
if (!Array.isArray(data)) {
return;
}
groupMemberModerationTable.data = data.map((member) => ({
...member,
$selected: Boolean(selectedUsers[member.userId])
}));
}
function handleGroupMemberRoleChange(args) {
if (groupDialog.value.id === args.params.groupId) {
groupDialog.value.members.forEach((member) => {
@@ -1079,7 +1064,7 @@
}
async function groupMembersDeleteSentInvite() {
const D = props.groupMemberModeration;
const D = groupMemberModeration.value;
const users = [...selectedUsersArray.value];
const memberCount = users.length;
progressTotal.value = memberCount;
@@ -1130,13 +1115,13 @@
groupBansModerationTable.data = [];
const params = { groupId, n: 100, offset: 0 };
const count = 50; // 5000 max
updateIsGroupMembersLoading(true);
isGroupMembersLoading.value = true;
const fetchedBans = [];
try {
for (let i = 0; i < count; i++) {
const args = await groupRequest.getGroupBans(params);
if (args && args.json) {
if (props.groupMemberModeration.id !== args.params.groupId) {
if (groupMemberModeration.value.id !== args.params.groupId) {
continue;
}
args.json.forEach((json) => {
@@ -1158,7 +1143,7 @@
type: 'error'
});
} finally {
updateIsGroupMembersLoading(false);
isGroupMembersLoading.value = false;
}
}
@@ -1170,7 +1155,7 @@
}
async function groupMembersBan() {
const D = props.groupMemberModeration;
const D = groupMemberModeration.value;
const users = [...selectedUsersArray.value];
const memberCount = users.length;
progressTotal.value = memberCount;
@@ -1198,7 +1183,7 @@
}
async function groupMembersUnban() {
const D = props.groupMemberModeration;
const D = groupMemberModeration.value;
const users = [...selectedUsersArray.value];
const memberCount = users.length;
progressTotal.value = memberCount;
@@ -1231,7 +1216,7 @@
}
async function groupMembersKick() {
const D = props.groupMemberModeration;
const D = groupMemberModeration.value;
const users = [...selectedUsersArray.value];
const memberCount = users.length;
progressTotal.value = memberCount;
@@ -1264,7 +1249,7 @@
}
async function groupMembersSaveNote() {
const D = props.groupMemberModeration;
const D = groupMemberModeration.value;
const users = [...selectedUsersArray.value];
const memberCount = users.length;
progressTotal.value = memberCount;
@@ -1299,7 +1284,7 @@
}
async function groupMembersRemoveRoles() {
const D = props.groupMemberModeration;
const D = groupMemberModeration.value;
const users = [...selectedUsersArray.value];
const rolesToRemoveSet = new Set(selectedRoles.value);
const memberCount = users.length;
@@ -1351,7 +1336,7 @@
}
async function groupMembersAddRoles() {
const D = props.groupMemberModeration;
const D = groupMemberModeration.value;
const users = [...selectedUsersArray.value];
const rolesToAddSet = new Set(selectedRoles.value);
const memberCount = users.length;
@@ -1432,7 +1417,7 @@
}
async function addGroupMemberToSelection(userId) {
const D = props.groupMemberModeration;
const D = groupMemberModeration.value;
// fetch member if there is one
// banned members don't have a user object
let member = {};
@@ -1460,13 +1445,13 @@
params.eventTypes = selectedAuditLogTypes.value;
}
const count = 50; // 5000 max
updateIsGroupMembersLoading(true);
isGroupMembersLoading.value = true;
try {
for (let i = 0; i < count; i++) {
const args = await groupRequest.getGroupLogs(params);
if (args) {
if (props.groupMemberModeration.id !== args.params.groupId) {
if (groupMemberModeration.value.id !== args.params.groupId) {
continue;
}
@@ -1488,12 +1473,12 @@
type: 'error'
});
} finally {
updateIsGroupMembersLoading(false);
isGroupMembersLoading.value = false;
}
}
async function groupMembersDeleteBlockedRequest() {
const D = props.groupMemberModeration;
const D = groupMemberModeration.value;
const users = [...selectedUsersArray.value];
const memberCount = users.length;
progressTotal.value = memberCount;
@@ -1533,7 +1518,7 @@
}
async function groupMembersBlockJoinRequest() {
const D = props.groupMemberModeration;
const D = groupMemberModeration.value;
const users = [...selectedUsersArray.value];
const memberCount = users.length;
progressTotal.value = memberCount;
@@ -1569,7 +1554,7 @@
}
async function groupMembersRejectInviteRequest() {
const D = props.groupMemberModeration;
const D = groupMemberModeration.value;
const users = [...selectedUsersArray.value];
const memberCount = users.length;
progressTotal.value = memberCount;
@@ -1606,7 +1591,7 @@
}
async function groupMembersAcceptInviteRequest() {
const D = props.groupMemberModeration;
const D = groupMemberModeration.value;
const users = [...selectedUsersArray.value];
const memberCount = users.length;
progressTotal.value = memberCount;
@@ -1657,12 +1642,12 @@
groupBlockedModerationTable.data = [];
const params = { groupId, n: 100, offset: 0, blocked: true };
const count = 50; // 5000
updateIsGroupMembersLoading(true);
isGroupMembersLoading.value = true;
try {
for (let i = 0; i < count; i++) {
const args = await groupRequest.getGroupJoinRequests(params);
if (props.groupMemberModeration.id !== args.params.groupId) {
if (groupMemberModeration.value.id !== args.params.groupId) {
return;
}
const targetTable = args.params.blocked
@@ -1683,7 +1668,7 @@
type: 'error'
});
} finally {
updateIsGroupMembersLoading(false);
isGroupMembersLoading.value = false;
}
}
@@ -1691,11 +1676,11 @@
groupJoinRequestsModerationTable.data = [];
const params = { groupId, n: 100, offset: 0, blocked: false };
const count = 50; // 5000 max
updateIsGroupMembersLoading(true);
isGroupMembersLoading.value = true;
try {
for (let i = 0; i < count; i++) {
const args = await groupRequest.getGroupJoinRequests(params);
if (props.groupMemberModeration.id !== args.params.groupId) {
if (groupMemberModeration.value.id !== args.params.groupId) {
return;
}
const targetTable = args.params.blocked
@@ -1716,7 +1701,7 @@
type: 'error'
});
} finally {
updateIsGroupMembersLoading(false);
isGroupMembersLoading.value = false;
}
}
@@ -1724,13 +1709,13 @@
groupInvitesModerationTable.data = [];
const params = { groupId, n: 100, offset: 0 };
const count = 50; // 5000 max
updateIsGroupMembersLoading(true);
isGroupMembersLoading.value = true;
try {
for (let i = 0; i < count; i++) {
const args = await groupRequest.getGroupInvites(params);
if (args) {
if (props.groupMemberModeration.id !== args.params.groupId) {
if (groupMemberModeration.value.id !== args.params.groupId) {
return;
}
@@ -1743,7 +1728,7 @@
if (args.json.length < params.n) {
break;
}
if (!props.groupMemberModeration.visible) {
if (!groupMemberModeration.value.visible) {
break;
}
}
@@ -1753,7 +1738,7 @@
type: 'error'
});
} finally {
updateIsGroupMembersLoading(false);
isGroupMembersLoading.value = false;
}
}
@@ -1789,4 +1774,122 @@
.replace(/\./g, ' ')
.replace(/\b\w/g, (l) => l.toUpperCase());
}
async function getGroupMembers() {
members.value = [];
isGroupMembersDone.value = false;
loadMoreGroupMembersParams.value = {
sort: '',
roleId: '',
n: 100,
offset: 0,
groupId: groupMemberModeration.value.id
};
if (memberSortOrder.value.value) {
loadMoreGroupMembersParams.value.sort = memberSortOrder.value.value;
}
if (memberFilter.value.id !== null) {
loadMoreGroupMembersParams.value.roleId = memberFilter.value.id;
}
await groupRequest
.getGroupMember({
groupId: groupMemberModeration.value.id,
userId: currentUser.value.id
})
.then((args) => {
args.ref = applyGroupMember(args.json);
if (args.json) {
args.json.user = currentUser.value;
if (memberFilter.value.id === null) {
// when filtered by role don't include self
members.value.push(args.json);
}
}
return args;
});
await loadMoreGroupMembers();
}
async function loadMoreGroupMembers() {
if (isGroupMembersDone.value || isGroupMembersLoading.value) {
return;
}
const params = loadMoreGroupMembersParams.value;
if (params.roleId === '') {
delete params.roleId;
}
memberSearch.value = '';
isGroupMembersLoading.value = true;
await groupRequest
.getGroupMembers(params)
.finally(() => {
isGroupMembersLoading.value = false;
})
.then((args) => {
for (const json of args.json) {
handleGroupMember({
json,
params: {
groupId: args.params.groupId
}
});
}
for (let i = 0; i < args.json.length; i++) {
const member = args.json[i];
if (member.userId === currentUser.value.id) {
if (members.value.length > 0 && members.value[0].userId === currentUser.value.id) {
// remove duplicate and keep sort order
members.value.splice(0, 1);
}
break;
}
}
if (args.json.length < params.n) {
isGroupMembersDone.value = true;
}
members.value = [...members.value, ...args.json];
groupMemberModerationTable.data = members.value.map((member) => ({
...member,
$selected: Boolean(selectedUsers[member.userId])
}));
params.offset += params.n;
return args;
})
.catch((err) => {
isGroupMembersDone.value = true;
throw err;
});
}
async function setGroupMemberSortOrder(sortOrder) {
if (memberSortOrder.value === sortOrder) {
return;
}
memberSortOrder.value = sortOrder;
await getGroupMembers();
}
async function loadAllGroupMembers() {
if (isGroupMembersLoading.value) {
return;
}
await getGroupMembers();
while (groupMemberModeration.value.visible && !isGroupMembersDone.value) {
isGroupMembersLoading.value = true;
await new Promise((resolve) => {
workerTimers.setTimeout(resolve, 1000);
});
isGroupMembersLoading.value = false;
await loadMoreGroupMembers();
}
}
async function setGroupMemberFilter(filter) {
if (memberFilter.value === filter) {
return;
}
memberFilter.value = filter;
await getGroupMembers();
}
</script>