MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-18 22:33: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

2
src/App.vue
View File

@@ -26,6 +26,7 @@
import WorldDialog from './components/dialogs/WorldDialog/WorldDialog.vue';
import AvatarDialog from './components/dialogs/AvatarDialog/AvatarDialog.vue';
import GroupDialog from './components/dialogs/GroupDialog/GroupDialog.vue';
import GroupMemberModerationDialog from './components/dialogs/GroupDialog/GroupMemberModerationDialog.vue';
import GalleryDialog from './components/dialogs/GalleryDialog.vue';
import FullscreenImageDialog from './components/dialogs/FullscreenImageDialog.vue';
import PreviousInstancesInfoDialog from './components/dialogs/PreviousInstancesDialog/PreviousInstancesInfoDialog.vue';
@@ -65,6 +66,7 @@
WorldDialog,
AvatarDialog,
GroupDialog,
GroupMemberModerationDialog,
GalleryDialog,
FullscreenImageDialog,
PreviousInstancesInfoDialog,

2
src/app.pug
View File

@@ -46,6 +46,8 @@ doctype html
GroupDialog
GroupMemberModerationDialog
GalleryDialog
FullscreenImageDialog

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>

20
src/components/dialogs/InviteGroupDialog.vue
View File

@@ -14,14 +14,12 @@
:placeholder="$t('dialog.invite_to_group.choose_group_placeholder')"
filterable
:disabled="inviteGroupDialog.loading"
style="margin-top: 15px"
@change="isAllowedToInviteToGroup">
style="margin-top: 15px; width: 100%">
<el-option-group
v-if="currentUserGroups.size"
:label="$t('dialog.invite_to_group.groups')"
:label="$t('dialog.invite_to_group.groups_with_invite_permission')"
style="width: 410px">
<el-option
v-for="group in currentUserGroups.values()"
v-for="group in groupsWithInvitePermission"
:key="group.id"
:label="group.name"
:value="group.id"
@@ -158,16 +156,16 @@
<el-button
type="primary"
size="small"
:disabled="inviteGroupDialog.loading || !inviteGroupDialog.userIds.length"
:disabled="inviteGroupDialog.loading || !inviteGroupDialog.userIds.length || !inviteGroupDialog.groupId"
@click="sendGroupInvite">
Invite
{{ $t('dialog.invite_to_group.invite') }}
</el-button>
</template>
</safe-dialog>
</template>
<script setup>
import { ref, watch, getCurrentInstance, nextTick } from 'vue';
import { ref, watch, getCurrentInstance, nextTick, computed } from 'vue';
import { storeToRefs } from 'pinia';
import { groupRequest, userRequest } from '../../api';
import { adjustDialogZ, hasGroupPermission, userImage, userStatusClass } from '../../shared/utils';
@@ -192,6 +190,12 @@
const inviteGroupDialogRef = ref(null);
const groupsWithInvitePermission = computed(() => {
return Array.from(currentUserGroups.value.values()).filter((group) =>
hasGroupPermission(group, 'group-invites-manage')
);
});
function initDialog() {
nextTick(() => adjustDialogZ(inviteGroupDialogRef.value.$el));
const D = inviteGroupDialog.value;

120
src/components/dialogs/ModerateGroupDialog.vue Normal file
View File

@@ -0,0 +1,120 @@
<template>
<safe-dialog
ref="moderateGroupDialogRef"
:visible.sync="moderateGroupDialog.visible"
:title="$t('dialog.moderate_group.header')"
width="450px"
append-to-body>
<div v-if="moderateGroupDialog.visible">
<div class="x-friend-item" style="cursor: default">
<div class="avatar">
<img v-lazy="userImage(moderateGroupDialog.userObject)" />
</div>
<div class="detail">
<span
v-if="moderateGroupDialog.userObject.id"
class="name"
:style="{ color: moderateGroupDialog.userObject.$userColour }"
v-text="moderateGroupDialog.userObject.displayName"></span>
<span v-else v-text="moderateGroupDialog.userId"></span>
</div>
</div>
<el-select
v-model="moderateGroupDialog.groupId"
clearable
:placeholder="$t('dialog.moderate_group.choose_group_placeholder')"
filterable
style="margin-top: 15px; width: 100%">
<el-option-group
v-if="currentUserGroups.size"
:label="$t('dialog.moderate_group.groups_with_moderation_permission')">
<el-option
v-for="group in groupsWithModerationPermission"
:key="group.id"
:label="group.name"
:value="group.id"
style="height: auto"
class="x-friend-item">
<div class="avatar">
<img v-lazy="group.iconUrl" />
</div>
<div class="detail">
<span class="name" v-text="group.name"></span>
</div>
</el-option>
</el-option-group>
</el-select>
</div>
<template #footer>
<el-button
type="primary"
size="small"
:disabled="!moderateGroupDialog.userId || !moderateGroupDialog.groupId"
@click="
showGroupMemberModerationDialog(moderateGroupDialog.groupId, moderateGroupDialog.userId);
moderateGroupDialog.visible = false;
">
{{ $t('dialog.moderate_group.moderation_tools') }}
</el-button>
</template>
</safe-dialog>
</template>
<script setup>
import { ref, watch, getCurrentInstance, nextTick, computed } from 'vue';
import { storeToRefs } from 'pinia';
import { groupRequest, userRequest } from '../../api';
import {
adjustDialogZ,
hasGroupPermission,
hasGroupModerationPermission,
userImage,
userStatusClass
} from '../../shared/utils';
import { useGroupStore } from '../../stores';
const { currentUserGroups, moderateGroupDialog } = storeToRefs(useGroupStore());
const { applyGroup, showGroupMemberModerationDialog } = useGroupStore();
const { proxy } = getCurrentInstance();
const groupsWithModerationPermission = computed(() => {
return Array.from(currentUserGroups.value.values()).filter((group) => hasGroupModerationPermission(group));
});
watch(
() => {
return moderateGroupDialog.value.visible;
},
(value) => {
if (value) {
initDialog();
}
}
);
const moderateGroupDialogRef = ref(null);
function initDialog() {
nextTick(() => adjustDialogZ(moderateGroupDialogRef.value.$el));
const D = moderateGroupDialog.value;
if (D.groupId) {
groupRequest
.getCachedGroup({
groupId: D.groupId
})
.then((args) => {
D.groupName = args.ref.name;
})
.catch(() => {
D.groupId = '';
});
}
if (D.userId) {
userRequest.getCachedUser({ userId: D.userId }).then((args) => {
D.userObject = args.ref;
});
}
}
</script>

10
src/components/dialogs/UserDialog/UserDialog.vue
View File

@@ -447,6 +447,9 @@
<el-dropdown-item icon="el-icon-message" command="Invite To Group">{{
t('dialog.user.actions.invite_to_group')
}}</el-dropdown-item>
<el-dropdown-item icon="el-icon-s-operation" command="Group Moderation">{{
t('dialog.user.actions.group_moderation')
}}</el-dropdown-item>
<!--//- el-dropdown-item(icon="el-icon-thumb" command="Send Boop" :disabled="!currentUser.isBoopingEnabled") {{ t('dialog.user.actions.send_boop') }}-->
<el-dropdown-item icon="el-icon-s-custom" command="Show Avatar Author" divided>{{
t('dialog.user.actions.show_avatar_author')
@@ -1782,6 +1785,7 @@
<LanguageDialog />
<BioDialog :bio-dialog="bioDialog" />
<PronounsDialog :pronouns-dialog="pronounsDialog" />
<ModerateGroupDialog />
</safe-dialog>
</template>
@@ -1855,6 +1859,7 @@
import PronounsDialog from './PronounsDialog.vue';
import SendInviteRequestDialog from './SendInviteRequestDialog.vue';
import SocialStatusDialog from './SocialStatusDialog.vue';
import ModerateGroupDialog from '../ModerateGroupDialog.vue';
const { t } = useI18n();
@@ -1880,7 +1885,8 @@
leaveGroup,
leaveGroupPrompt,
setGroupVisibility,
handleGroupList
handleGroupList,
showModerateGroupDialog
} = useGroupStore();
const { currentUserGroups, inviteGroupDialog, inGameGroupOrder } = storeToRefs(useGroupStore());
const { lastLocation, lastLocationDestination } = storeToRefs(useLocationStore());
@@ -2299,6 +2305,8 @@
showInviteGroupDialog('', D.id);
// } else if (command === 'Send Boop') {
// this.showSendBoopDialog(D.id);
} else if (command === 'Group Moderation') {
showModerateGroupDialog(D.id);
} else if (command === 'Hide Avatar') {
if (D.isHideAvatar) {
setPlayerModeration(D.id, 0);

13
src/localization/en/en.json
View File

@@ -747,6 +747,7 @@
"request_invite": "Request Invite",
"request_invite_with_message": "Request Invite With Message",
"invite_to_group": "Invite To Group",
"group_moderation": "Group Moderation",
"send_boop": "Send Boop",
"manage_gallery_inventory_icon": "Manage VRC+ Images & Inventory",
"accept_friend_request": "Accept Friend Request",
@@ -1407,9 +1408,10 @@
"header": "Invite To Group",
"description": "Don't spam invite users, you'll get rate limited.",
"choose_group_placeholder": "Choose Group",
"groups": "Groups",
"groups_with_invite_permission": "Groups with Invite Permission",
"choose_friends_placeholder": "Choose Friends",
"selected_users": "Selected Users"
"selected_users": "Selected Users",
"invite": "Invite"
},
"note_export": {
"header": "Note Export",
@@ -1600,6 +1602,7 @@
"select_user": "Select User",
"selected_users": "Selected Users",
"select_all": "Select All",
"user_isnt_in_group": "User isn't in group",
"cancel": "Cancel",
"choose_roles_placeholder": "Choose Roles",
"selected_roles": "Selected Roles",
@@ -1636,6 +1639,12 @@
},
"group_calendar": {
"header": "Group Calendar"
},
"moderate_group": {
"header": "Moderate Group Member",
"choose_group_placeholder": "Choose Group",
"groups_with_moderation_permission": "Groups with Moderation Permission",
"moderation_tools": "Moderation Tools"
}
},
"confirm": {

22
src/shared/utils/group.js
View File

@@ -20,6 +20,26 @@ function hasGroupPermission(ref, permission) {
return false;
}
/**
*
* @param {object} group
* @returns {boolean}
*/
function hasGroupModerationPermission(group) {
return (
hasGroupPermission(group, 'group-invites-manage') ||
hasGroupPermission(group, 'group-moderates-manage') ||
hasGroupPermission(group, 'group-audit-view') ||
hasGroupPermission(group, 'group-bans-manage') ||
hasGroupPermission(group, 'group-data-manage') ||
hasGroupPermission(group, 'group-members-manage') ||
hasGroupPermission(group, 'group-members-remove') ||
hasGroupPermission(group, 'group-roles-assign') ||
hasGroupPermission(group, 'group-roles-manage') ||
hasGroupPermission(group, 'group-default-role-manage')
);
}
/**
*
* @param {string} data
@@ -49,4 +69,4 @@ async function getGroupName(data) {
return groupName;
}
export { hasGroupPermission, getGroupName };
export { hasGroupPermission, hasGroupModerationPermission, getGroupName };

71
src/stores/group.js
View File

@@ -11,7 +11,11 @@ import { $app } from '../app';
import configRepository from '../service/config';
import { watchState } from '../service/watchState';
import { groupDialogFilterOptions } from '../shared/constants/';
import { replaceBioSymbols, convertFileUrlToImageUrl } from '../shared/utils';
import {
replaceBioSymbols,
convertFileUrlToImageUrl,
hasGroupPermission
} from '../shared/utils';
import { useGameStore } from './game';
import { useInstanceStore } from './instance';
import { useUserStore } from './user';
@@ -62,6 +66,21 @@ export const useGroupStore = defineStore('Group', () => {
userIds: [],
userObject: {}
},
moderateGroupDialog: {
visible: false,
groupId: '',
groupName: '',
userId: '',
userObject: {}
},
groupMemberModeration: {
visible: false,
loading: false,
id: '',
groupRef: {},
auditLogTypes: [],
openWithUserId: ''
},
cachedGroups: new Map(),
inGameGroupOrder: [],
groupInstances: [],
@@ -89,6 +108,20 @@ export const useGroupStore = defineStore('Group', () => {
}
});
const moderateGroupDialog = computed({
get: () => state.moderateGroupDialog,
set: (value) => {
state.moderateGroupDialog = value;
}
});
const groupMemberModeration = computed({
get: () => state.groupMemberModeration,
set: (value) => {
state.groupMemberModeration = value;
}
});
const cachedGroups = computed({
get: () => state.cachedGroups,
set: (value) => {
@@ -122,6 +155,8 @@ export const useGroupStore = defineStore('Group', () => {
(isLoggedIn) => {
state.groupDialog.visible = false;
state.inviteGroupDialog.visible = false;
state.moderateGroupDialog.visible = false;
state.groupMemberModeration.visible = false;
state.currentUserGroupsInit = false;
state.cachedGroups.clear();
state.currentUserGroups.clear();
@@ -1023,11 +1058,41 @@ export const useGroupStore = defineStore('Group', () => {
);
}
function showModerateGroupDialog(userId) {
const D = state.moderateGroupDialog;
D.userId = userId;
D.userObject = {};
D.visible = true;
}
function showGroupMemberModerationDialog(groupId, userId = '') {
const D = state.groupMemberModeration;
D.id = groupId;
D.openWithUserId = userId;
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 (D.id !== args.params.groupId) {
return;
}
D.auditLogTypes = args.json;
});
}
});
D.visible = true;
}
return {
state,
groupDialog,
currentUserGroups,
inviteGroupDialog,
moderateGroupDialog,
groupMemberModeration,
cachedGroups,
inGameGroupOrder,
groupInstances,
@@ -1052,6 +1117,8 @@ export const useGroupStore = defineStore('Group', () => {
handleGroupPermissions,
handleGroupMemberProps,
handleGroupList,
handleGroupRepresented
handleGroupRepresented,
showModerateGroupDialog,
showGroupMemberModerationDialog
};
});