mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-11 19:03:51 +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
212
src/components/dialogs/InviteDialog/EditAndSendInviteDialog.vue
Normal file
212
src/components/dialogs/InviteDialog/EditAndSendInviteDialog.vue
Normal file
@@ -0,0 +1,212 @@
|
||||
<template>
|
||||
<safe-dialog
|
||||
class="x-dialog"
|
||||
:visible="editAndSendInviteDialog.visible"
|
||||
:title="t('dialog.edit_send_invite_message.header')"
|
||||
width="400px"
|
||||
append-to-body
|
||||
@close="cancelEditAndSendInvite">
|
||||
<div style="font-size: 12px">
|
||||
<span>{{ t('dialog.edit_send_invite_message.description') }}</span>
|
||||
</div>
|
||||
|
||||
<el-input
|
||||
v-model="editAndSendInviteDialog.newMessage"
|
||||
type="textarea"
|
||||
size="mini"
|
||||
maxlength="64"
|
||||
show-word-limit
|
||||
:autosize="{ minRows: 2, maxRows: 5 }"
|
||||
placeholder=""
|
||||
style="margin-top: 10px"></el-input>
|
||||
|
||||
<template #footer>
|
||||
<el-button type="small" @click="cancelEditAndSendInvite">
|
||||
{{ t('dialog.edit_send_invite_message.cancel') }}
|
||||
</el-button>
|
||||
<el-button type="primary" size="small" @click="saveEditAndSendInvite">
|
||||
{{ t('dialog.edit_send_invite_message.send') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</safe-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getCurrentInstance, inject } from 'vue';
|
||||
import { useI18n } from 'vue-i18n-bridge';
|
||||
import { instanceRequest, inviteMessagesRequest, notificationRequest } from '../../../api';
|
||||
import { parseLocation } from '../../../composables/instance/utils';
|
||||
|
||||
const { t } = useI18n();
|
||||
const instance = getCurrentInstance();
|
||||
const $message = instance.proxy.$message;
|
||||
|
||||
const API = inject('API');
|
||||
|
||||
const props = defineProps({
|
||||
editAndSendInviteDialog: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
sendInviteDialog: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
inviteDialog: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => ({})
|
||||
},
|
||||
uploadImage: {
|
||||
type: String
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:editAndSendInviteDialog', 'closeInviteDialog']);
|
||||
|
||||
function cancelEditAndSendInvite() {
|
||||
emit('update:editAndSendInviteDialog', { ...props.editAndSendInviteDialog, visible: false });
|
||||
}
|
||||
|
||||
async function saveEditAndSendInvite() {
|
||||
const D = props.editAndSendInviteDialog;
|
||||
D.visible = false;
|
||||
const messageType = D.messageType;
|
||||
const slot = D.inviteMessage.slot;
|
||||
if (D.inviteMessage.message !== D.newMessage) {
|
||||
const params = {
|
||||
message: D.newMessage
|
||||
};
|
||||
await inviteMessagesRequest
|
||||
.editInviteMessage(params, messageType, slot)
|
||||
.catch((err) => {
|
||||
throw err;
|
||||
})
|
||||
.then((args) => {
|
||||
API.$emit(`INVITE:${messageType.toUpperCase()}`, args);
|
||||
if (args.json[slot].message === D.inviteMessage.message) {
|
||||
$message({
|
||||
message: "VRChat API didn't update message, try again",
|
||||
type: 'error'
|
||||
});
|
||||
throw new Error("VRChat API didn't update message, try again");
|
||||
} else {
|
||||
$message('Invite message updated');
|
||||
}
|
||||
return args;
|
||||
});
|
||||
}
|
||||
const I = props.sendInviteDialog;
|
||||
const J = props.inviteDialog;
|
||||
if (J?.visible) {
|
||||
const inviteLoop = () => {
|
||||
if (J.userIds.length > 0) {
|
||||
const receiverUserId = J.userIds.shift();
|
||||
if (receiverUserId === API.currentUser.id) {
|
||||
// can't invite self!?
|
||||
const L = parseLocation(J.worldId);
|
||||
instanceRequest
|
||||
.selfInvite({
|
||||
instanceId: L.instanceId,
|
||||
worldId: L.worldId
|
||||
})
|
||||
.finally(inviteLoop);
|
||||
} else if (props.uploadImage) {
|
||||
notificationRequest
|
||||
.sendInvitePhoto(
|
||||
{
|
||||
instanceId: J.worldId,
|
||||
worldId: J.worldId,
|
||||
worldName: J.worldName,
|
||||
messageSlot: slot
|
||||
},
|
||||
receiverUserId
|
||||
)
|
||||
.finally(inviteLoop);
|
||||
} else {
|
||||
notificationRequest
|
||||
.sendInvite(
|
||||
{
|
||||
instanceId: J.worldId,
|
||||
worldId: J.worldId,
|
||||
worldName: J.worldName,
|
||||
messageSlot: slot
|
||||
},
|
||||
receiverUserId
|
||||
)
|
||||
.finally(inviteLoop);
|
||||
}
|
||||
} else {
|
||||
J.loading = false;
|
||||
J.visible = false;
|
||||
$message({
|
||||
message: 'Invite sent',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
};
|
||||
inviteLoop();
|
||||
} else if (I.messageType === 'invite') {
|
||||
I.params.messageSlot = slot;
|
||||
if (props.uploadImage) {
|
||||
notificationRequest
|
||||
.sendInvitePhoto(I.params, I.userId)
|
||||
.catch((err) => {
|
||||
throw err;
|
||||
})
|
||||
.then((args) => {
|
||||
$message({
|
||||
message: 'Invite photo message sent',
|
||||
type: 'success'
|
||||
});
|
||||
return args;
|
||||
});
|
||||
} else {
|
||||
notificationRequest
|
||||
.sendInvite(I.params, I.userId)
|
||||
.catch((err) => {
|
||||
throw err;
|
||||
})
|
||||
.then((args) => {
|
||||
$message({
|
||||
message: 'Invite message sent',
|
||||
type: 'success'
|
||||
});
|
||||
return args;
|
||||
});
|
||||
}
|
||||
} else if (I.messageType === 'requestInvite') {
|
||||
I.params.requestSlot = slot;
|
||||
if (props.uploadImage) {
|
||||
notificationRequest
|
||||
.sendRequestInvitePhoto(I.params, I.userId)
|
||||
.catch((err) => {
|
||||
this.clearInviteImageUpload();
|
||||
throw err;
|
||||
})
|
||||
.then((args) => {
|
||||
$message({
|
||||
message: 'Request invite photo message sent',
|
||||
type: 'success'
|
||||
});
|
||||
return args;
|
||||
});
|
||||
} else {
|
||||
notificationRequest
|
||||
.sendRequestInvite(I.params, I.userId)
|
||||
.catch((err) => {
|
||||
throw err;
|
||||
})
|
||||
.then((args) => {
|
||||
$message({
|
||||
message: 'Request invite message sent',
|
||||
type: 'success'
|
||||
});
|
||||
return args;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
emit('closeInviteDialog');
|
||||
}
|
||||
</script>
|
||||
309
src/components/dialogs/InviteDialog/InviteDialog.vue
Normal file
309
src/components/dialogs/InviteDialog/InviteDialog.vue
Normal file
@@ -0,0 +1,309 @@
|
||||
<template>
|
||||
<safe-dialog
|
||||
class="x-dialog"
|
||||
:visible.sync="inviteDialog.visible"
|
||||
:title="t('dialog.invite.header')"
|
||||
width="500px"
|
||||
append-to-body>
|
||||
<div v-if="inviteDialog.visible" v-loading="inviteDialog.loading">
|
||||
<location :location="inviteDialog.worldId" :link="false"></location>
|
||||
<br />
|
||||
<el-button size="mini" style="margin-top: 10px" @click="addSelfToInvite">{{
|
||||
t('dialog.invite.add_self')
|
||||
}}</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
:disabled="inviteDialog.friendsInInstance.length === 0"
|
||||
style="margin-top: 10px"
|
||||
@click="addFriendsInInstanceToInvite"
|
||||
>{{ t('dialog.invite.add_friends_in_instance') }}</el-button
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
:disabled="vipFriends.length === 0"
|
||||
style="margin-top: 10px"
|
||||
@click="addFavoriteFriendsToInvite"
|
||||
>{{ t('dialog.invite.add_favorite_friends') }}</el-button
|
||||
>
|
||||
|
||||
<el-select
|
||||
v-model="inviteDialog.userIds"
|
||||
multiple
|
||||
clearable
|
||||
:placeholder="t('dialog.invite.select_placeholder')"
|
||||
filterable
|
||||
:disabled="inviteDialog.loading"
|
||||
style="width: 100%; margin-top: 15px">
|
||||
<el-option-group v-if="API.currentUser" :label="t('side_panel.me')">
|
||||
<el-option
|
||||
class="x-friend-item"
|
||||
:label="API.currentUser.displayName"
|
||||
:value="API.currentUser.id"
|
||||
style="height: auto">
|
||||
<div :class="['avatar', userStatusClass(API.currentUser)]">
|
||||
<img v-lazy="userImage(API.currentUser)" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span class="name">{{ API.currentUser.displayName }}</span>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
|
||||
<el-option-group
|
||||
v-if="inviteDialog.friendsInInstance.length"
|
||||
:label="t('dialog.invite.friends_in_instance')">
|
||||
<el-option
|
||||
v-for="friend in inviteDialog.friendsInInstance"
|
||||
:key="friend.id"
|
||||
class="x-friend-item"
|
||||
:label="friend.name"
|
||||
:value="friend.id"
|
||||
style="height: auto">
|
||||
<template v-if="friend.ref">
|
||||
<div :class="['avatar', userStatusClass(friend.ref)]">
|
||||
<img v-lazy="userImage(friend.ref)" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span class="name" :style="{ color: friend.ref.$userColour }">{{
|
||||
friend.ref.displayName
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<span v-else>{{ friend.id }}</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"
|
||||
class="x-friend-item"
|
||||
:label="friend.name"
|
||||
:value="friend.id"
|
||||
style="height: auto">
|
||||
<template v-if="friend.ref">
|
||||
<div :class="['avatar', userStatusClass(friend.ref)]">
|
||||
<img v-lazy="userImage(friend.ref)" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span class="name" :style="{ color: friend.ref.$userColour }">{{
|
||||
friend.ref.displayName
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<span v-else>{{ 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"
|
||||
class="x-friend-item"
|
||||
:label="friend.name"
|
||||
:value="friend.id"
|
||||
style="height: auto">
|
||||
<template v-if="friend.ref">
|
||||
<div :class="['avatar', userStatusClass(friend.ref)]">
|
||||
<img v-lazy="userImage(friend.ref)" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span class="name" :style="{ color: friend.ref.$userColour }">{{
|
||||
friend.ref.displayName
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<span v-else>{{ 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"
|
||||
class="x-friend-item"
|
||||
:label="friend.name"
|
||||
:value="friend.id"
|
||||
style="height: auto">
|
||||
<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 }">{{
|
||||
friend.ref.displayName
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<span v-else>{{ friend.id }}</span>
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<el-button
|
||||
size="small"
|
||||
:disabled="inviteDialog.loading || !inviteDialog.userIds.length"
|
||||
@click="showSendInviteDialog"
|
||||
>{{ t('dialog.invite.invite_with_message') }}</el-button
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
:disabled="inviteDialog.loading || !inviteDialog.userIds.length"
|
||||
@click="sendInvite"
|
||||
>{{ t('dialog.invite.invite') }}</el-button
|
||||
>
|
||||
</template>
|
||||
<SendInviteDialog
|
||||
:send-invite-dialog-visible.sync="sendInviteDialogVisible"
|
||||
:invite-message-table="inviteMessageTable"
|
||||
:send-invite-dialog="sendInviteDialog"
|
||||
:invite-dialog="inviteDialog"
|
||||
:upload-image="uploadImage"
|
||||
@close-invite-dialog="closeInviteDialog" />
|
||||
</safe-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getCurrentInstance, inject, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n-bridge';
|
||||
import { instanceRequest, inviteMessagesRequest, notificationRequest } from '../../../api';
|
||||
import { parseLocation } from '../../../composables/instance/utils';
|
||||
import Location from '../../Location.vue';
|
||||
import SendInviteDialog from './SendInviteDialog.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const instance = getCurrentInstance();
|
||||
const $message = instance.proxy.$message;
|
||||
const $confirm = instance.proxy.$confirm;
|
||||
|
||||
const userStatusClass = inject('userStatusClass');
|
||||
const userImage = inject('userImage');
|
||||
const API = inject('API');
|
||||
|
||||
const props = defineProps({
|
||||
inviteDialog: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
vipFriends: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
onlineFriends: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
activeFriends: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
// SendInviteDialog
|
||||
inviteMessageTable: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
uploadImage: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['clearInviteImageUpload', 'inviteImageUpload', 'closeInviteDialog']);
|
||||
|
||||
const sendInviteDialogVisible = ref(false);
|
||||
const sendInviteDialog = ref({ message: '', messageSlot: 0, userId: '', messageType: '', params: {} });
|
||||
|
||||
function closeInviteDialog() {
|
||||
emit('closeInviteDialog');
|
||||
}
|
||||
|
||||
function showSendInviteDialog(params, userId) {
|
||||
sendInviteDialog.value = {
|
||||
params,
|
||||
userId,
|
||||
messageType: 'invite'
|
||||
};
|
||||
inviteMessagesRequest.refreshInviteMessageTableData('message');
|
||||
clearInviteImageUpload();
|
||||
sendInviteDialogVisible.value = true;
|
||||
}
|
||||
|
||||
function clearInviteImageUpload() {
|
||||
emit('clearInviteImageUpload');
|
||||
}
|
||||
|
||||
function addSelfToInvite() {
|
||||
const D = props.inviteDialog;
|
||||
if (!D.userIds.includes(API.currentUser.id)) {
|
||||
D.userIds.push(API.currentUser.id);
|
||||
}
|
||||
}
|
||||
|
||||
function addFriendsInInstanceToInvite() {
|
||||
const D = props.inviteDialog;
|
||||
for (const friend of D.friendsInInstance) {
|
||||
if (!D.userIds.includes(friend.id)) {
|
||||
D.userIds.push(friend.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function addFavoriteFriendsToInvite() {
|
||||
const D = props.inviteDialog;
|
||||
for (const friend of props.vipFriends) {
|
||||
if (!D.userIds.includes(friend.id)) {
|
||||
D.userIds.push(friend.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function sendInvite() {
|
||||
$confirm('Continue? Invite', 'Confirm', {
|
||||
confirmButtonText: 'Confirm',
|
||||
cancelButtonText: 'Cancel',
|
||||
type: 'info',
|
||||
callback: (action) => {
|
||||
const D = props.inviteDialog;
|
||||
if (action !== 'confirm' || D.loading === true) {
|
||||
return;
|
||||
}
|
||||
D.loading = true;
|
||||
const inviteLoop = () => {
|
||||
if (D.userIds.length > 0) {
|
||||
const receiverUserId = D.userIds.shift();
|
||||
if (receiverUserId === API.currentUser.id) {
|
||||
// can't invite self!?
|
||||
const L = parseLocation(D.worldId);
|
||||
instanceRequest
|
||||
.selfInvite({
|
||||
instanceId: L.instanceId,
|
||||
worldId: L.worldId
|
||||
})
|
||||
.finally(inviteLoop);
|
||||
} else {
|
||||
notificationRequest
|
||||
.sendInvite(
|
||||
{
|
||||
instanceId: D.worldId,
|
||||
worldId: D.worldId,
|
||||
worldName: D.worldName
|
||||
},
|
||||
receiverUserId
|
||||
)
|
||||
.finally(inviteLoop);
|
||||
}
|
||||
} else {
|
||||
D.loading = false;
|
||||
D.visible = false;
|
||||
$message({
|
||||
message: 'Invite sent',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
};
|
||||
inviteLoop();
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
176
src/components/dialogs/InviteDialog/SendInviteConfirmDialog.vue
Normal file
176
src/components/dialogs/InviteDialog/SendInviteConfirmDialog.vue
Normal file
@@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<safe-dialog
|
||||
class="x-dialog"
|
||||
:visible="visible"
|
||||
:title="t('dialog.invite_message.header')"
|
||||
width="400px"
|
||||
append-to-body
|
||||
@close="cancelInviteConfirm">
|
||||
<div style="font-size: 12px">
|
||||
<span>{{ t('dialog.invite_message.confirmation') }}</span>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<el-button type="small" @click="cancelInviteConfirm">
|
||||
{{ t('dialog.invite_message.cancel') }}
|
||||
</el-button>
|
||||
<el-button type="primary" size="small" @click="sendInviteConfirm">
|
||||
{{ t('dialog.invite_message.confirm') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</safe-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getCurrentInstance, inject } from 'vue';
|
||||
import { useI18n } from 'vue-i18n-bridge';
|
||||
import { instanceRequest, notificationRequest } from '../../../api';
|
||||
import { parseLocation } from '../../../composables/instance/utils';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const instance = getCurrentInstance();
|
||||
const $message = instance.proxy.$message;
|
||||
|
||||
const API = inject('API');
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
sendInviteDialog: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
inviteDialog: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => ({})
|
||||
},
|
||||
uploadImage: {
|
||||
type: String
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:visible', 'closeInviteDialog']);
|
||||
|
||||
function cancelInviteConfirm() {
|
||||
emit('update:visible', false);
|
||||
}
|
||||
|
||||
function sendInviteConfirm() {
|
||||
const D = props.sendInviteDialog;
|
||||
const J = props.inviteDialog;
|
||||
if (J?.visible) {
|
||||
const inviteLoop = () => {
|
||||
if (J.userIds.length > 0) {
|
||||
const receiverUserId = J.userIds.shift();
|
||||
if (receiverUserId === API.currentUser.id) {
|
||||
// can't invite self!?
|
||||
const L = parseLocation(J.worldId);
|
||||
instanceRequest
|
||||
.selfInvite({
|
||||
instanceId: L.instanceId,
|
||||
worldId: L.worldId
|
||||
})
|
||||
.finally(inviteLoop);
|
||||
} else if (props.uploadImage) {
|
||||
notificationRequest
|
||||
.sendInvitePhoto(
|
||||
{
|
||||
instanceId: J.worldId,
|
||||
worldId: J.worldId,
|
||||
worldName: J.worldName,
|
||||
messageSlot: D.messageSlot
|
||||
},
|
||||
receiverUserId
|
||||
)
|
||||
.finally(inviteLoop);
|
||||
} else {
|
||||
notificationRequest
|
||||
.sendInvite(
|
||||
{
|
||||
instanceId: J.worldId,
|
||||
worldId: J.worldId,
|
||||
worldName: J.worldName,
|
||||
messageSlot: D.messageSlot
|
||||
},
|
||||
receiverUserId
|
||||
)
|
||||
.finally(inviteLoop);
|
||||
}
|
||||
} else {
|
||||
J.loading = false;
|
||||
J.visible = false;
|
||||
$message({
|
||||
message: 'Invite message sent',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
};
|
||||
inviteLoop();
|
||||
} else if (D.messageType === 'invite') {
|
||||
D.params.messageSlot = D.messageSlot;
|
||||
if (props.uploadImage) {
|
||||
notificationRequest
|
||||
.sendInvitePhoto(D.params, D.userId)
|
||||
.catch((err) => {
|
||||
throw err;
|
||||
})
|
||||
.then((args) => {
|
||||
$message({
|
||||
message: 'Invite photo message sent',
|
||||
type: 'success'
|
||||
});
|
||||
return args;
|
||||
});
|
||||
} else {
|
||||
notificationRequest
|
||||
.sendInvite(D.params, D.userId)
|
||||
.catch((err) => {
|
||||
throw err;
|
||||
})
|
||||
.then((args) => {
|
||||
$message({
|
||||
message: 'Invite message sent',
|
||||
type: 'success'
|
||||
});
|
||||
return args;
|
||||
});
|
||||
}
|
||||
} else if (D.messageType === 'requestInvite') {
|
||||
D.params.requestSlot = D.messageSlot;
|
||||
if (props.uploadImage) {
|
||||
notificationRequest
|
||||
.sendRequestInvitePhoto(D.params, D.userId)
|
||||
.catch((err) => {
|
||||
this.clearInviteImageUpload();
|
||||
throw err;
|
||||
})
|
||||
.then((args) => {
|
||||
$message({
|
||||
message: 'Request invite photo message sent',
|
||||
type: 'success'
|
||||
});
|
||||
return args;
|
||||
});
|
||||
} else {
|
||||
notificationRequest
|
||||
.sendRequestInvite(D.params, D.userId)
|
||||
.catch((err) => {
|
||||
throw err;
|
||||
})
|
||||
.then((args) => {
|
||||
$message({
|
||||
message: 'Request invite message sent',
|
||||
type: 'success'
|
||||
});
|
||||
return args;
|
||||
});
|
||||
}
|
||||
}
|
||||
cancelInviteConfirm();
|
||||
emit('closeInviteDialog');
|
||||
}
|
||||
</script>
|
||||
165
src/components/dialogs/InviteDialog/SendInviteDialog.vue
Normal file
165
src/components/dialogs/InviteDialog/SendInviteDialog.vue
Normal file
@@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<safe-dialog
|
||||
class="x-dialog"
|
||||
:visible.sync="sendInviteDialogVisible"
|
||||
:title="t('dialog.invite_message.header')"
|
||||
width="800px"
|
||||
append-to-body
|
||||
@close="cancelSendInvite">
|
||||
<template v-if="API.currentUser.$isVRCPlus">
|
||||
<!-- <template v-if="gallerySelectDialog.selectedFileId">-->
|
||||
<!-- <div style="display: inline-block; flex: none; margin-right: 5px">-->
|
||||
<!-- <el-popover placement="right" width="500px" trigger="click">-->
|
||||
<!-- <template #reference>-->
|
||||
<!-- <img-->
|
||||
<!-- class="x-link"-->
|
||||
<!-- v-lazy="gallerySelectDialog.selectedImageUrl"-->
|
||||
<!-- style="flex: none; width: 60px; height: 60px; border-radius: 4px; object-fit: cover" />-->
|
||||
<!-- </template>-->
|
||||
<!-- <img-->
|
||||
<!-- class="x-link"-->
|
||||
<!-- v-lazy="gallerySelectDialog.selectedImageUrl"-->
|
||||
<!-- style="height: 500px"-->
|
||||
<!-- @click="showFullscreenImageDialog(gallerySelectDialog.selectedImageUrl)" />-->
|
||||
<!-- </el-popover>-->
|
||||
<!-- </div>-->
|
||||
<!-- <el-button size="mini" @click="clearImageGallerySelect" style="vertical-align: top">-->
|
||||
<!-- {{ t('dialog.invite_message.clear_selected_image') }}-->
|
||||
<!-- </el-button>-->
|
||||
<!-- </template>-->
|
||||
<!-- <template v-else>-->
|
||||
<!-- <el-button size="mini" @click="showGallerySelectDialog" style="margin-right: 5px">-->
|
||||
<!-- {{ t('dialog.invite_message.select_image') }}-->
|
||||
<!-- </el-button>-->
|
||||
<!-- </template>-->
|
||||
<input class="inviteImageUploadButton" type="file" accept="image/*" @change="inviteImageUpload" />
|
||||
</template>
|
||||
|
||||
<data-tables
|
||||
v-bind="inviteMessageTable"
|
||||
style="margin-top: 10px; cursor: pointer"
|
||||
@row-click="showSendInviteConfirmDialog">
|
||||
<el-table-column
|
||||
:label="t('table.profile.invite_messages.slot')"
|
||||
prop="slot"
|
||||
sortable="custom"
|
||||
width="70"></el-table-column>
|
||||
<el-table-column :label="t('table.profile.invite_messages.message')" prop="message"></el-table-column>
|
||||
<el-table-column
|
||||
:label="t('table.profile.invite_messages.cool_down')"
|
||||
prop="updatedAt"
|
||||
sortable="custom"
|
||||
width="110"
|
||||
align="right">
|
||||
<template #default="scope">
|
||||
<countdown-timer :datetime="scope.row.updatedAt" :hours="1"></countdown-timer>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('table.profile.invite_messages.action')" width="70" align="right">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
@click.stop="showEditAndSendInviteDialog('message', scope.row)"></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</data-tables>
|
||||
|
||||
<template #footer>
|
||||
<el-button type="small" @click="cancelSendInvite">
|
||||
{{ t('dialog.invite_message.cancel') }}
|
||||
</el-button>
|
||||
<el-button type="small" @click="API.refreshInviteMessageTableData('message')">
|
||||
{{ t('dialog.invite_message.refresh') }}
|
||||
</el-button>
|
||||
</template>
|
||||
<SendInviteConfirmDialog
|
||||
:visible.sync="isSendInviteConfirmDialogVisible"
|
||||
:send-invite-dialog="sendInviteDialog"
|
||||
:invite-dialog="inviteDialog"
|
||||
:upload-image="uploadImage"
|
||||
@closeInviteDialog="closeInviteDialog" />
|
||||
<EditAndSendInviteDialog
|
||||
:edit-and-send-invite-dialog.sync="editAndSendInviteDialog"
|
||||
:send-invite-dialog="sendInviteDialog"
|
||||
:invite-dialog="inviteDialog"
|
||||
:upload-image="uploadImage"
|
||||
@closeInviteDialog="closeInviteDialog" />
|
||||
</safe-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { inject, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n-bridge';
|
||||
import EditAndSendInviteDialog from './EditAndSendInviteDialog.vue';
|
||||
import SendInviteConfirmDialog from './SendInviteConfirmDialog.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const API = inject('API');
|
||||
|
||||
const props = defineProps({
|
||||
sendInviteDialogVisible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
inviteMessageTable: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
sendInviteDialog: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
inviteDialog: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => ({})
|
||||
},
|
||||
uploadImage: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['inviteImageUpload', 'update:sendInviteDialogVisible', 'closeInviteDialog']);
|
||||
|
||||
const isSendInviteConfirmDialogVisible = ref(false);
|
||||
|
||||
const editAndSendInviteDialog = ref({
|
||||
visible: false,
|
||||
messageType: '',
|
||||
newMessage: '',
|
||||
inviteMessage: {}
|
||||
});
|
||||
|
||||
function inviteImageUpload(event) {
|
||||
emit('inviteImageUpload', event);
|
||||
}
|
||||
|
||||
function showSendInviteConfirmDialog(val) {
|
||||
isSendInviteConfirmDialogVisible.value = true;
|
||||
//
|
||||
props.sendInviteDialog.messageSlot = val.slot;
|
||||
}
|
||||
|
||||
function showEditAndSendInviteDialog(messageType, inviteMessage) {
|
||||
// todo
|
||||
editAndSendInviteDialog.value = {
|
||||
newMessage: inviteMessage.message,
|
||||
visible: true,
|
||||
messageType,
|
||||
inviteMessage
|
||||
};
|
||||
}
|
||||
|
||||
function cancelSendInvite() {
|
||||
emit('update:sendInviteDialogVisible', false);
|
||||
}
|
||||
|
||||
function closeInviteDialog() {
|
||||
cancelSendInvite();
|
||||
emit('closeInviteDialog');
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user