mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-14 04:13:52 +02:00
refactor: dialogs (#1224)
* refactor: dialogs * fix: storeAvatarImage * FriendLog.vue * FriendLog.vue * FriendLog.vue * GameLog.vue * fix: next day button jumping to the wrong date * sync master * fix: launchGame * Notification.vue * Feed.vue * Search.vue * Profile.vue * PlayerList.vue * Login.vue * utils * update dialog * del gameLog.pug * fix * fix: group role cannot be displayed currently * fix: "Hide Friends in Same Instance" hides players in unrelated private instances (#1210) * fix * fix: "Hide Friends in Same Instance" does not work when "Split Favorite Friends" is enabled * fix Notification.vue message * fix: deleteFavoriteNoConfirm * fix: feed status style * fix: infinite loading when deleting note * fix: private players will not be hidden when 'Hide Friends in Same Instance', and 'Hide Friends in Same Instance' will not work when 'Split Favorite Friends'
This commit is contained in:
pa
GitHub
136
src/components/dialogs/GroupDialog/GallerySelectDialog.vue
Normal file
136
src/components/dialogs/GroupDialog/GallerySelectDialog.vue
Normal file
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<safe-dialog
|
||||
class="x-dialog"
|
||||
:visible.sync="gallerySelectDialog.visible"
|
||||
:title="t('dialog.gallery_select.header')"
|
||||
width="100%"
|
||||
append-to-body>
|
||||
<div>
|
||||
<span>{{ t('dialog.gallery_select.gallery') }}</span>
|
||||
<span style="color: #909399; font-size: 12px; margin-left: 5px">{{ galleryTable.length }}/64</span>
|
||||
<br />
|
||||
<input
|
||||
id="GalleryUploadButton"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
style="display: none"
|
||||
@change="onFileChangeGallery" />
|
||||
<el-button-group>
|
||||
<el-button type="default" size="small" icon="el-icon-close" @click="selectImageGallerySelect('', '')">{{
|
||||
t('dialog.gallery_select.none')
|
||||
}}</el-button>
|
||||
<el-button type="default" size="small" icon="el-icon-refresh" @click="refreshGalleryTable">{{
|
||||
t('dialog.gallery_select.refresh')
|
||||
}}</el-button>
|
||||
<el-button
|
||||
type="default"
|
||||
size="small"
|
||||
icon="el-icon-upload2"
|
||||
:disabled="!API.currentUser.$isVRCPlus"
|
||||
@click="displayGalleryUpload"
|
||||
>{{ t('dialog.gallery_select.upload') }}</el-button
|
||||
>
|
||||
</el-button-group>
|
||||
<br />
|
||||
<div
|
||||
v-for="image in galleryTable"
|
||||
v-if="image.versions && image.versions.length > 0"
|
||||
:key="image.id"
|
||||
class="x-friend-item"
|
||||
style="display: inline-block; margin-top: 10px; width: unset; cursor: default">
|
||||
<div
|
||||
v-if="image.versions[image.versions.length - 1].file.url"
|
||||
class="vrcplus-icon"
|
||||
@click="selectImageGallerySelect(image.versions[image.versions.length - 1].file.url, image.id)">
|
||||
<img v-lazy="image.versions[image.versions.length - 1].file.url" class="avatar" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</safe-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { inject, getCurrentInstance } from 'vue';
|
||||
|
||||
import { useI18n } from 'vue-i18n-bridge';
|
||||
import { vrcPlusImageRequest } from '../../../api';
|
||||
const { t } = useI18n();
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { $message } = proxy;
|
||||
|
||||
const API = inject('API');
|
||||
|
||||
const props = defineProps({
|
||||
gallerySelectDialog: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
galleryTable: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['refreshGalleryTable']);
|
||||
|
||||
function selectImageGallerySelect(imageUrl, fileId) {
|
||||
const D = props.gallerySelectDialog;
|
||||
D.selectedFileId = fileId;
|
||||
D.selectedImageUrl = imageUrl;
|
||||
D.visible = false;
|
||||
}
|
||||
|
||||
function displayGalleryUpload() {
|
||||
document.getElementById('GalleryUploadButton').click();
|
||||
}
|
||||
|
||||
function onFileChangeGallery(e) {
|
||||
const clearFile = function () {
|
||||
if (document.querySelector('#GalleryUploadButton')) {
|
||||
document.querySelector('#GalleryUploadButton').value = '';
|
||||
}
|
||||
};
|
||||
const files = e.target.files || e.dataTransfer.files;
|
||||
if (!files.length) {
|
||||
return;
|
||||
}
|
||||
if (files[0].size >= 100000000) {
|
||||
// 100MB
|
||||
$message({
|
||||
message: t('message.file.too_large'),
|
||||
type: 'error'
|
||||
});
|
||||
clearFile();
|
||||
return;
|
||||
}
|
||||
if (!files[0].type.match(/image.*/)) {
|
||||
$message({
|
||||
message: t('message.file.not_image'),
|
||||
type: 'error'
|
||||
});
|
||||
clearFile();
|
||||
return;
|
||||
}
|
||||
const r = new FileReader();
|
||||
r.onload = function () {
|
||||
const base64Body = btoa(r.result);
|
||||
vrcPlusImageRequest.uploadGalleryImage(base64Body).then((args) => {
|
||||
$message({
|
||||
message: t('message.gallery.uploaded'),
|
||||
type: 'success'
|
||||
});
|
||||
// API.$on('GALLERYIMAGE:ADD')
|
||||
if (Object.keys(props.galleryTable).length !== 0) {
|
||||
props.galleryTable.unshift(args.json);
|
||||
}
|
||||
return args;
|
||||
});
|
||||
};
|
||||
r.readAsBinaryString(files[0]);
|
||||
clearFile();
|
||||
}
|
||||
function refreshGalleryTable() {
|
||||
emit('refreshGalleryTable');
|
||||
}
|
||||
</script>
|
||||
@@ -1,14 +1,11 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
<safe-dialog
|
||||
ref="groupDialogRef"
|
||||
:before-close="beforeDialogClose"
|
||||
:visible.sync="groupDialog.visible"
|
||||
:show-close="false"
|
||||
width="770px"
|
||||
top="10vh"
|
||||
class="x-dialog x-group-dialog"
|
||||
@mousedown.native="dialogMouseDown"
|
||||
@mouseup.native="dialogMouseUp">
|
||||
class="x-dialog x-group-dialog">
|
||||
<div class="group-banner-image">
|
||||
<el-popover placement="right" width="500px" trigger="click">
|
||||
<img
|
||||
@@ -1151,10 +1148,7 @@
|
||||
</el-tabs>
|
||||
</div>
|
||||
<!--Nested-->
|
||||
<GroupPostEditDialog
|
||||
:gallery-select-dialog="gallerySelectDialog"
|
||||
:dialog-data.sync="groupPostEditDialog"
|
||||
@clear-image-gallery-select="clearImageGallerySelect" />
|
||||
<GroupPostEditDialog :dialog-data.sync="groupPostEditDialog" :selected-gallery-file="selectedGalleryFile" />
|
||||
<GroupMemberModerationDialog
|
||||
:group-dialog="groupDialog"
|
||||
:is-group-members-loading.sync="isGroupMembersLoading"
|
||||
@@ -1167,25 +1161,32 @@
|
||||
@load-all-group-members="loadAllGroupMembers"
|
||||
@set-group-member-filter="setGroupMemberFilter"
|
||||
@set-group-member-sort-order="setGroupMemberSortOrder" />
|
||||
</el-dialog>
|
||||
<InviteGroupDialog
|
||||
:dialog-data.sync="inviteGroupDialog"
|
||||
:vip-friends="vipFriends"
|
||||
:online-friends="onlineFriends"
|
||||
:offline-friends="offlineFriends"
|
||||
:active-friends="activeFriends" />
|
||||
</safe-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getCurrentInstance, nextTick, reactive, ref, watch, inject } from 'vue';
|
||||
import { getCurrentInstance, inject, nextTick, reactive, ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n-bridge';
|
||||
import utils from '../../../classes/utils';
|
||||
import { groupRequest } from '../../../api';
|
||||
import Location from '../../Location.vue';
|
||||
import GroupPostEditDialog from './GroupPostEditDialog.vue';
|
||||
import GroupMemberModerationDialog from './GroupMemberModerationDialog.vue';
|
||||
import * as workerTimers from 'worker-timers';
|
||||
import { groupRequest } from '../../../api';
|
||||
import utils from '../../../classes/utils';
|
||||
import { hasGroupPermission } from '../../../composables/group/utils';
|
||||
import { refreshInstancePlayerCount } from '../../../composables/instance/utils';
|
||||
import { copyToClipboard, downloadAndSaveJson, getFaviconUrl } from '../../../composables/shared/utils';
|
||||
import { languageClass } from '../../../composables/user/utils';
|
||||
import Location from '../../Location.vue';
|
||||
import InviteGroupDialog from '../InviteGroupDialog.vue';
|
||||
import GroupMemberModerationDialog from './GroupMemberModerationDialog.vue';
|
||||
import GroupPostEditDialog from './GroupPostEditDialog.vue';
|
||||
|
||||
const API = inject('API');
|
||||
const beforeDialogClose = inject('beforeDialogClose');
|
||||
const dialogMouseDown = inject('dialogMouseDown');
|
||||
const dialogMouseUp = inject('dialogMouseUp');
|
||||
const showFullscreenImageDialog = inject('showFullscreenImageDialog');
|
||||
const languageClass = inject('languageClass');
|
||||
const showUserDialog = inject('showUserDialog');
|
||||
const userStatusClass = inject('userStatusClass');
|
||||
const userImage = inject('userImage');
|
||||
@@ -1222,28 +1223,33 @@
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
gallerySelectDialog: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
randomUserColours: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
vipFriends: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
onlineFriends: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
offlineFriends: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
activeFriends: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits([
|
||||
'update:group-dialog',
|
||||
'update:gallery-select-dialog',
|
||||
'update:group-member-moderation',
|
||||
'group-dialog-command',
|
||||
'update:group-dialog',
|
||||
'groupDialogCommand',
|
||||
'get-group-dialog-group',
|
||||
'get-group-dialog-group-members',
|
||||
'refresh-instance-player-count',
|
||||
'update-group-post-search',
|
||||
'set-group-member-sort-order',
|
||||
'clear-image-gallery-select'
|
||||
'updateGroupPostSearch'
|
||||
]);
|
||||
|
||||
const groupDialogRef = ref(null);
|
||||
@@ -1254,6 +1260,10 @@
|
||||
const groupDialogGalleryCurrentName = ref('0');
|
||||
const groupDialogTabCurrentName = ref('0');
|
||||
const isGroupGalleryLoading = ref(false);
|
||||
const selectedGalleryFile = ref({
|
||||
selectedFileId: '',
|
||||
selectedImageUrl: ''
|
||||
});
|
||||
const groupPostEditDialog = reactive({
|
||||
visible: false,
|
||||
groupRef: {},
|
||||
@@ -1273,6 +1283,16 @@
|
||||
auditLogTypes: []
|
||||
});
|
||||
|
||||
const inviteGroupDialog = ref({
|
||||
visible: false,
|
||||
loading: false,
|
||||
groupId: '',
|
||||
groupName: '',
|
||||
userId: '',
|
||||
userIds: [],
|
||||
userObject: {}
|
||||
});
|
||||
|
||||
let loadMoreGroupMembersParams = {};
|
||||
|
||||
watch(
|
||||
@@ -1293,8 +1313,15 @@
|
||||
}
|
||||
);
|
||||
|
||||
function getFaviconUrl(link) {
|
||||
return utils.getFaviconUrl(link);
|
||||
function showInviteGroupDialog(groupId, userId) {
|
||||
const D = inviteGroupDialog.value;
|
||||
D.userIds = '';
|
||||
D.groups = [];
|
||||
D.groupId = groupId;
|
||||
D.groupName = groupId;
|
||||
D.userId = userId;
|
||||
D.userObject = {};
|
||||
D.visible = true;
|
||||
}
|
||||
|
||||
function setGroupRepresentation(groupId) {
|
||||
@@ -1439,9 +1466,7 @@
|
||||
}
|
||||
});
|
||||
}
|
||||
function copyToClipboard(text) {
|
||||
utils.copyToClipboard(text);
|
||||
}
|
||||
|
||||
function groupGalleryStatus(gallery) {
|
||||
const style = {};
|
||||
if (!gallery.membersOnly) {
|
||||
@@ -1455,6 +1480,10 @@
|
||||
}
|
||||
|
||||
function groupDialogCommand(command) {
|
||||
const D = props.groupDialog;
|
||||
if (D.visible === false) {
|
||||
return;
|
||||
}
|
||||
switch (command) {
|
||||
case 'Share':
|
||||
copyToClipboard(props.groupDialog.ref.$url);
|
||||
@@ -1465,8 +1494,11 @@
|
||||
case 'Moderation Tools':
|
||||
showGroupMemberModerationDialog(props.groupDialog.id);
|
||||
break;
|
||||
case 'Invite To Group':
|
||||
showInviteGroupDialog(D.id, '');
|
||||
break;
|
||||
default:
|
||||
emit('group-dialog-command', command);
|
||||
emit('groupDialogCommand', command);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1481,7 +1513,7 @@
|
||||
D.auditLogTypes = [];
|
||||
API.getCachedGroup({ groupId }).then((args) => {
|
||||
D.groupRef = args.ref;
|
||||
if (utils.hasGroupPermission(D.groupRef, 'group-audit-view')) {
|
||||
if (hasGroupPermission(D.groupRef, 'group-audit-view')) {
|
||||
groupRequest.getGroupAuditLogTypes({ groupId }).then((args) => {
|
||||
// API.$on('GROUP:AUDITLOGTYPES', function (args) {
|
||||
if (groupMemberModeration.id !== args.params.groupId) {
|
||||
@@ -1569,18 +1601,21 @@
|
||||
D.roleIds = [];
|
||||
D.postId = '';
|
||||
D.groupId = groupId;
|
||||
emit('update:gallery-select-dialog', { ...D, selectedFileId: '', selectedImageUrl: '' });
|
||||
selectedGalleryFile.value = {
|
||||
selectedFileId: '',
|
||||
selectedImageUrl: ''
|
||||
};
|
||||
|
||||
if (post) {
|
||||
D.title = post.title;
|
||||
D.text = post.text;
|
||||
D.visibility = post.visibility;
|
||||
D.roleIds = post.roleIds;
|
||||
D.postId = post.id;
|
||||
emit('update:gallery-select-dialog', {
|
||||
...D,
|
||||
selectedGalleryFile.value = {
|
||||
selectedFileId: post.imageId,
|
||||
selectedImageUrl: post.imageUrl
|
||||
});
|
||||
};
|
||||
}
|
||||
API.getCachedGroup({ groupId }).then((args) => {
|
||||
D.groupRef = args.ref;
|
||||
@@ -1763,9 +1798,6 @@
|
||||
await getGroupDialogGroupMembers();
|
||||
}
|
||||
|
||||
function hasGroupPermission(ref, permission) {
|
||||
return utils.hasGroupPermission(ref, permission);
|
||||
}
|
||||
function updateGroupDialogData(obj) {
|
||||
// Be careful with the deep merge
|
||||
emit('update:group-dialog', obj);
|
||||
@@ -1773,16 +1805,7 @@
|
||||
function getGroupDialogGroup(groupId) {
|
||||
emit('get-group-dialog-group', groupId);
|
||||
}
|
||||
function refreshInstancePlayerCount(tag) {
|
||||
emit('refresh-instance-player-count', tag);
|
||||
}
|
||||
function updateGroupPostSearch() {
|
||||
emit('update-group-post-search');
|
||||
}
|
||||
function downloadAndSaveJson(fileName, data) {
|
||||
utils.downloadAndSaveJson(fileName, data);
|
||||
}
|
||||
function clearImageGallerySelect() {
|
||||
emit('clear-image-gallery-select');
|
||||
emit('updateGroupPostSearch');
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,15 +1,12 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
<safe-dialog
|
||||
class="x-dialog"
|
||||
:before-close="beforeDialogClose"
|
||||
:visible="groupMemberModeration.visible"
|
||||
:title="t('dialog.group_member_moderation.header')"
|
||||
append-to-body
|
||||
top="5vh"
|
||||
width="90vw"
|
||||
@close="closeDialog"
|
||||
@mousedown.native="dialogMouseDown"
|
||||
@mouseup.native="dialogMouseUp">
|
||||
@close="closeDialog">
|
||||
<div>
|
||||
<h3>{{ groupMemberModeration.groupRef.name }}</h3>
|
||||
<el-tabs type="card" style="height: 100%">
|
||||
@@ -806,21 +803,18 @@
|
||||
<group-member-moderation-export-dialog
|
||||
:is-group-logs-export-dialog-visible.sync="isGroupLogsExportDialogVisible"
|
||||
:group-logs-moderation-table="groupLogsModerationTable" />
|
||||
</el-dialog>
|
||||
</safe-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getCurrentInstance, inject, ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n-bridge';
|
||||
import utils from '../../../classes/utils';
|
||||
import { groupRequest, userRequest } from '../../../api';
|
||||
import { useModerationTable, useSelectedUsers } from '../../../composables/group/useGroupMemberModeration';
|
||||
import { hasGroupPermission } from '../../../composables/group/utils';
|
||||
import GroupMemberModerationExportDialog from './GroupMemberModerationExportDialog.vue';
|
||||
import { useModerationTable, useSelectedUsers } from '../../../composables/groups/useGroupMemberModeration';
|
||||
|
||||
const API = inject('API');
|
||||
const beforeDialogClose = inject('beforeDialogClose');
|
||||
const dialogMouseDown = inject('dialogMouseDown');
|
||||
const dialogMouseUp = inject('dialogMouseUp');
|
||||
const showUserDialog = inject('showUserDialog');
|
||||
const userImage = inject('userImage');
|
||||
const userImageFull = inject('userImageFull');
|
||||
@@ -1687,8 +1681,4 @@
|
||||
.replace(/\./g, ' ')
|
||||
.replace(/\b\w/g, (l) => l.toUpperCase());
|
||||
}
|
||||
|
||||
function hasGroupPermission(ref, permission) {
|
||||
return utils.hasGroupPermission(ref, permission);
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,14 +1,11 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
<safe-dialog
|
||||
class="x-dialog"
|
||||
:before-close="beforeDialogClose"
|
||||
:visible="isGroupLogsExportDialogVisible"
|
||||
:title="t('dialog.group_member_moderation.export_logs')"
|
||||
width="650px"
|
||||
append-to-body
|
||||
@close="setIsGroupLogsExportDialogVisible"
|
||||
@mousedown.native="dialogMouseDown"
|
||||
@mouseup.native="dialogMouseUp">
|
||||
@close="setIsGroupLogsExportDialogVisible">
|
||||
<el-checkbox-group
|
||||
v-model="checkedGroupLogsExportLogsOptions"
|
||||
style="margin-bottom: 10px"
|
||||
@@ -29,17 +26,14 @@
|
||||
readonly
|
||||
style="margin-top: 15px"
|
||||
@click.native="handleCopyGroupLogsExportContent" />
|
||||
</el-dialog>
|
||||
</safe-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { inject, ref, watch } from 'vue';
|
||||
import { ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n-bridge';
|
||||
import utils from '../../../classes/utils';
|
||||
import { copyToClipboard } from '../../../composables/shared/utils';
|
||||
|
||||
const beforeDialogClose = inject('beforeDialogClose');
|
||||
const dialogMouseDown = inject('dialogMouseDown');
|
||||
const dialogMouseUp = inject('dialogMouseUp');
|
||||
const { t } = useI18n();
|
||||
|
||||
const props = defineProps({
|
||||
@@ -101,7 +95,7 @@
|
||||
}
|
||||
|
||||
function handleCopyGroupLogsExportContent() {
|
||||
utils.copyToClipboard(groupLogsExportContent.value);
|
||||
copyToClipboard(groupLogsExportContent.value);
|
||||
}
|
||||
|
||||
function setIsGroupLogsExportDialogVisible() {
|
||||
|
||||
@@ -1,13 +1,9 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
ref="groupPostEditDialog"
|
||||
:before-close="beforeDialogClose"
|
||||
<safe-dialog
|
||||
:visible.sync="groupPostEditDialog.visible"
|
||||
:title="$t('dialog.group_post_edit.header')"
|
||||
width="650px"
|
||||
append-to-body
|
||||
@mousedown.native="dialogMouseDown"
|
||||
@mouseup.native="dialogMouseUp">
|
||||
append-to-body>
|
||||
<div v-if="groupPostEditDialog.visible">
|
||||
<h3 v-text="groupPostEditDialog.groupRef.name"></h3>
|
||||
<el-form :model="groupPostEditDialog" label-width="150px">
|
||||
@@ -107,30 +103,39 @@
|
||||
{{ $t('dialog.group_post_edit.create_post') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<GallerySelectDialog
|
||||
:gallery-select-dialog="gallerySelectDialog"
|
||||
:gallery-table="galleryTable"
|
||||
@refresh-gallery-table="refreshGalleryTable" />
|
||||
</safe-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { groupRequest } from '../../../api';
|
||||
import { groupRequest, vrcPlusIconRequest } from '../../../api';
|
||||
import GallerySelectDialog from './GallerySelectDialog.vue';
|
||||
|
||||
export default {
|
||||
name: 'GroupPostEditDialog',
|
||||
inject: [
|
||||
'beforeDialogClose',
|
||||
'showFullscreenImageDialog',
|
||||
'dialogMouseDown',
|
||||
'dialogMouseUp',
|
||||
'showGallerySelectDialog'
|
||||
],
|
||||
components: {
|
||||
GallerySelectDialog
|
||||
},
|
||||
inject: ['showFullscreenImageDialog'],
|
||||
props: {
|
||||
dialogData: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
gallerySelectDialog: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
selectedGalleryFile: { type: Object, default: () => ({}) }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
gallerySelectDialog: {
|
||||
visible: false,
|
||||
selectedFileId: '',
|
||||
selectedImageUrl: ''
|
||||
},
|
||||
galleryTable: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
groupPostEditDialog: {
|
||||
@@ -143,6 +148,22 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showGallerySelectDialog() {
|
||||
const D = this.gallerySelectDialog;
|
||||
D.visible = true;
|
||||
this.refreshGalleryTable();
|
||||
},
|
||||
async refreshGalleryTable() {
|
||||
const params = {
|
||||
n: 100,
|
||||
tag: 'gallery'
|
||||
};
|
||||
const args = await vrcPlusIconRequest.getFileList(params);
|
||||
// API.$on('FILES:LIST')
|
||||
if (args.params.tag === 'gallery') {
|
||||
this.galleryTable = args.json.reverse();
|
||||
}
|
||||
},
|
||||
editGroupPost() {
|
||||
const D = this.groupPostEditDialog;
|
||||
if (!D.groupId || !D.postId) {
|
||||
@@ -193,7 +214,9 @@
|
||||
D.visible = false;
|
||||
},
|
||||
clearImageGallerySelect() {
|
||||
this.$emit('clear-image-gallery-select');
|
||||
const D = this.gallerySelectDialog;
|
||||
D.selectedFileId = '';
|
||||
D.selectedImageUrl = '';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,307 +0,0 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
ref="inviteGroupDialog"
|
||||
:visible.sync="inviteGroupDialog.visible"
|
||||
:before-close="beforeDialogClose"
|
||||
:title="$t('dialog.invite_to_group.header')"
|
||||
width="450px"
|
||||
@mousedown.native="dialogMouseDown"
|
||||
@mouseup.native="dialogMouseUp">
|
||||
<div v-if="inviteGroupDialog.visible" v-loading="inviteGroupDialog.loading">
|
||||
<span>{{ $t('dialog.invite_to_group.description') }}</span>
|
||||
<br />
|
||||
<el-select
|
||||
v-model="inviteGroupDialog.groupId"
|
||||
clearable
|
||||
:placeholder="$t('dialog.invite_to_group.choose_group_placeholder')"
|
||||
filterable
|
||||
:disabled="inviteGroupDialog.loading"
|
||||
style="margin-top: 15px"
|
||||
@change="isAllowedToInviteToGroup">
|
||||
<el-option-group
|
||||
v-if="API.currentUserGroups.size"
|
||||
:label="$t('dialog.invite_to_group.groups')"
|
||||
style="width: 410px">
|
||||
<el-option
|
||||
v-for="group in API.currentUserGroups.values()"
|
||||
: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>
|
||||
<el-select
|
||||
v-model="inviteGroupDialog.userIds"
|
||||
multiple
|
||||
clearable
|
||||
:placeholder="$t('dialog.invite_to_group.choose_friends_placeholder')"
|
||||
filterable
|
||||
:disabled="inviteGroupDialog.loading"
|
||||
style="width: 100%; margin-top: 15px">
|
||||
<el-option-group v-if="inviteGroupDialog.userId" :label="$t('dialog.invite_to_group.selected_users')">
|
||||
<el-option
|
||||
:key="inviteGroupDialog.userObject.id"
|
||||
:label="inviteGroupDialog.userObject.displayName"
|
||||
:value="inviteGroupDialog.userObject.id"
|
||||
class="x-friend-item">
|
||||
<template v-if="inviteGroupDialog.userObject.id">
|
||||
<div class="avatar" :class="userStatusClass(inviteGroupDialog.userObject)">
|
||||
<img v-lazy="userImage(inviteGroupDialog.userObject)" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span
|
||||
class="name"
|
||||
:style="{ color: inviteGroupDialog.userObject.$userColour }"
|
||||
v-text="inviteGroupDialog.userObject.displayName"></span>
|
||||
</div>
|
||||
</template>
|
||||
<span v-else v-text="inviteGroupDialog.userId"></span>
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
<el-option-group v-if="vipFriends.length" :label="$t('side_panel.favorite')">
|
||||
<el-option
|
||||
v-for="friend in vipFriends"
|
||||
:key="friend.id"
|
||||
:label="friend.name"
|
||||
:value="friend.id"
|
||||
style="height: auto"
|
||||
class="x-friend-item">
|
||||
<template v-if="friend.ref">
|
||||
<div class="avatar" :class="userStatusClass(friend.ref)">
|
||||
<img v-lazy="userImage(friend.ref)" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span
|
||||
class="name"
|
||||
:style="{ color: friend.ref.$userColour }"
|
||||
v-text="friend.ref.displayName"></span>
|
||||
</div>
|
||||
</template>
|
||||
<span v-else v-text="friend.id"></span>
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
<el-option-group v-if="onlineFriends.length" :label="$t('side_panel.online')">
|
||||
<el-option
|
||||
v-for="friend in onlineFriends"
|
||||
:key="friend.id"
|
||||
:label="friend.name"
|
||||
:value="friend.id"
|
||||
style="height: auto"
|
||||
class="x-friend-item">
|
||||
<template v-if="friend.ref">
|
||||
<div class="avatar" :class="userStatusClass(friend.ref)">
|
||||
<img v-lazy="userImage(friend.ref)" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span
|
||||
class="name"
|
||||
:style="{ color: friend.ref.$userColour }"
|
||||
v-text="friend.ref.displayName"></span>
|
||||
</div>
|
||||
</template>
|
||||
<span v-else v-text="friend.id"></span>
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
<el-option-group v-if="activeFriends.length" :label="$t('side_panel.active')">
|
||||
<el-option
|
||||
v-for="friend in activeFriends"
|
||||
:key="friend.id"
|
||||
:label="friend.name"
|
||||
:value="friend.id"
|
||||
style="height: auto"
|
||||
class="x-friend-item">
|
||||
<template v-if="friend.ref">
|
||||
<div class="avatar">
|
||||
<img v-lazy="userImage(friend.ref)" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span
|
||||
class="name"
|
||||
:style="{ color: friend.ref.$userColour }"
|
||||
v-text="friend.ref.displayName"></span>
|
||||
</div>
|
||||
</template>
|
||||
<span v-else v-text="friend.id"></span>
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
<el-option-group v-if="offlineFriends.length" :label="$t('side_panel.offline')">
|
||||
<el-option
|
||||
v-for="friend in offlineFriends"
|
||||
:key="friend.id"
|
||||
:label="friend.name"
|
||||
:value="friend.id"
|
||||
style="height: auto"
|
||||
class="x-friend-item">
|
||||
<template v-if="friend.ref">
|
||||
<div class="avatar">
|
||||
<img v-lazy="userImage(friend.ref)" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span
|
||||
class="name"
|
||||
:style="{ color: friend.ref.$userColour }"
|
||||
v-text="friend.ref.displayName"></span>
|
||||
</div>
|
||||
</template>
|
||||
<span v-else v-text="friend.id"></span>
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
:disabled="inviteGroupDialog.loading || !inviteGroupDialog.userIds.length"
|
||||
@click="sendGroupInvite">
|
||||
Invite
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { groupRequest, userRequest } from '../../../api';
|
||||
import utils from '../../../classes/utils';
|
||||
|
||||
export default {
|
||||
name: 'InviteGroupDialog',
|
||||
inject: [
|
||||
'API',
|
||||
'dialogMouseDown',
|
||||
'dialogMouseUp',
|
||||
'beforeDialogClose',
|
||||
'userStatusClass',
|
||||
'userImage',
|
||||
'adjustDialogZ'
|
||||
],
|
||||
props: {
|
||||
dialogData: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
vipFriends: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
onlineFriends: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
activeFriends: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
offlineFriends: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
inviteGroupDialog: {
|
||||
get() {
|
||||
return this.dialogData;
|
||||
},
|
||||
set(value) {
|
||||
this.$emit('update:dialog-data', value);
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'dialogData.visible'(value) {
|
||||
if (value) {
|
||||
this.initDialog();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initDialog() {
|
||||
this.$nextTick(() => this.adjustDialogZ(this.$refs.inviteGroupDialog.$el));
|
||||
const D = this.inviteGroupDialog;
|
||||
if (D.groupId) {
|
||||
this.API.getCachedGroup({
|
||||
groupId: D.groupId
|
||||
})
|
||||
.then((args) => {
|
||||
D.groupName = args.ref.name;
|
||||
})
|
||||
.catch(() => {
|
||||
D.groupId = '';
|
||||
});
|
||||
this.isAllowedToInviteToGroup();
|
||||
}
|
||||
|
||||
if (D.userId) {
|
||||
userRequest.getCachedUser({ userId: D.userId }).then((args) => {
|
||||
D.userObject = args.ref;
|
||||
D.userIds = [D.userId];
|
||||
});
|
||||
}
|
||||
},
|
||||
isAllowedToInviteToGroup() {
|
||||
const D = this.inviteGroupDialog;
|
||||
const groupId = D.groupId;
|
||||
if (!groupId) {
|
||||
return;
|
||||
}
|
||||
this.inviteGroupDialog.loading = true;
|
||||
groupRequest
|
||||
.getGroup({ groupId })
|
||||
.then((args) => {
|
||||
if (utils.hasGroupPermission(args.ref, 'group-invites-manage')) {
|
||||
return args;
|
||||
}
|
||||
// not allowed to invite
|
||||
this.inviteGroupDialog.groupId = '';
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: 'You are not allowed to invite to this group'
|
||||
});
|
||||
return args;
|
||||
})
|
||||
.finally(() => {
|
||||
this.inviteGroupDialog.loading = false;
|
||||
});
|
||||
},
|
||||
sendGroupInvite() {
|
||||
this.$confirm('Continue? Invite User(s) To Group', 'Confirm', {
|
||||
confirmButtonText: 'Confirm',
|
||||
cancelButtonText: 'Cancel',
|
||||
type: 'info',
|
||||
callback: (action) => {
|
||||
const D = this.inviteGroupDialog;
|
||||
if (action !== 'confirm' || D.loading === true) {
|
||||
return;
|
||||
}
|
||||
D.loading = true;
|
||||
const inviteLoop = () => {
|
||||
if (D.userIds.length === 0) {
|
||||
D.loading = false;
|
||||
return;
|
||||
}
|
||||
const receiverUserId = D.userIds.shift();
|
||||
groupRequest
|
||||
.sendGroupInvite({
|
||||
groupId: D.groupId,
|
||||
userId: receiverUserId
|
||||
})
|
||||
.then(inviteLoop)
|
||||
.catch(() => {
|
||||
D.loading = false;
|
||||
});
|
||||
};
|
||||
inviteLoop();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user