mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-17 05:43: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
670
src/views/Notifications/Notification.vue
Normal file
670
src/views/Notifications/Notification.vue
Normal file
@@ -0,0 +1,670 @@
|
||||
<template>
|
||||
<div v-if="menuActiveIndex === 'notification'" v-loading="API.isNotificationsLoading" class="x-container">
|
||||
<data-tables v-bind="notificationTable" ref="notificationTableRef" class="notification-table">
|
||||
<template #tool>
|
||||
<div style="margin: 0 0 10px; display: flex; align-items: center">
|
||||
<el-select
|
||||
v-model="notificationTable.filters[0].value"
|
||||
multiple
|
||||
clearable
|
||||
style="flex: 1"
|
||||
:placeholder="t('view.notification.filter_placeholder')"
|
||||
@change="saveTableFilters">
|
||||
<el-option
|
||||
v-for="type in [
|
||||
'requestInvite',
|
||||
'invite',
|
||||
'requestInviteResponse',
|
||||
'inviteResponse',
|
||||
'friendRequest',
|
||||
'ignoredFriendRequest',
|
||||
'message',
|
||||
'boop',
|
||||
'groupChange',
|
||||
'group.announcement',
|
||||
'group.informative',
|
||||
'group.invite',
|
||||
'group.joinRequest',
|
||||
'group.transfer',
|
||||
'group.queueReady',
|
||||
'moderation.warning.group',
|
||||
'moderation.report.closed',
|
||||
'instance.closed'
|
||||
]"
|
||||
:key="type"
|
||||
:label="t('view.notification.filters.' + type)"
|
||||
:value="type" />
|
||||
</el-select>
|
||||
<el-input
|
||||
v-model="notificationTable.filters[1].value"
|
||||
:placeholder="t('view.notification.search_placeholder')"
|
||||
style="flex: none; width: 150px; margin: 0 10px" />
|
||||
<el-tooltip
|
||||
placement="bottom"
|
||||
:content="t('view.notification.refresh_tooltip')"
|
||||
:disabled="hideTooltips">
|
||||
<el-button
|
||||
type="default"
|
||||
:loading="API.isNotificationsLoading"
|
||||
icon="el-icon-refresh"
|
||||
circle
|
||||
style="flex: none"
|
||||
@click="API.refreshNotifications()" />
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-table-column :label="t('table.notification.date')" prop="created_at" sortable="custom" width="120">
|
||||
<template #default="scope">
|
||||
<el-tooltip placement="right">
|
||||
<template #content>
|
||||
<span>{{ scope.row.created_at | formatDate('long') }}</span>
|
||||
</template>
|
||||
<span>{{ scope.row.created_at | formatDate('short') }}</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column :label="t('table.notification.type')" prop="type" width="180">
|
||||
<template #default="scope">
|
||||
<span
|
||||
v-if="scope.row.type === 'invite'"
|
||||
class="x-link"
|
||||
@click="showWorldDialog(scope.row.details.worldId)"
|
||||
v-text="t('view.notification.filters.' + scope.row.type)"></span>
|
||||
<el-tooltip
|
||||
v-else-if="scope.row.type === 'group.queueReady' || scope.row.type === 'instance.closed'"
|
||||
placement="top">
|
||||
<template #content>
|
||||
<location
|
||||
v-if="scope.row.location"
|
||||
:location="scope.row.location"
|
||||
:hint="scope.row.worldName"
|
||||
:grouphint="scope.row.groupName"
|
||||
:link="false" />
|
||||
</template>
|
||||
<span
|
||||
class="x-link"
|
||||
@click="showWorldDialog(scope.row.location)"
|
||||
v-text="t('view.notification.filters.' + scope.row.type)"></span>
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
v-else-if="scope.row.link"
|
||||
placement="top"
|
||||
:content="scope.row.linkText"
|
||||
:disabled="hideTooltips">
|
||||
<span
|
||||
class="x-link"
|
||||
@click="openNotificationLink(scope.row.link)"
|
||||
v-text="t('view.notification.filters.' + scope.row.type)"></span>
|
||||
</el-tooltip>
|
||||
<span v-else v-text="t('view.notification.filters.' + scope.row.type)"></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column :label="t('table.notification.user_group')" prop="senderUsername" width="150">
|
||||
<template #default="scope">
|
||||
<template v-if="scope.row.type === 'groupChange'">
|
||||
<span
|
||||
class="x-link"
|
||||
@click="showGroupDialog(scope.row.senderUserId)"
|
||||
v-text="scope.row.senderUsername"></span>
|
||||
</template>
|
||||
<template v-else-if="scope.row.senderUserId">
|
||||
<span
|
||||
class="x-link"
|
||||
@click="showUserDialog(scope.row.senderUserId)"
|
||||
v-text="scope.row.senderUsername"></span>
|
||||
</template>
|
||||
<template v-else-if="scope.row.link && scope.row.data?.groupName">
|
||||
<span
|
||||
class="x-link"
|
||||
@click="openNotificationLink(scope.row.link)"
|
||||
v-text="scope.row.data?.groupName"></span>
|
||||
</template>
|
||||
<template v-else-if="scope.row.link">
|
||||
<span
|
||||
class="x-link"
|
||||
@click="openNotificationLink(scope.row.link)"
|
||||
v-text="scope.row.linkText"></span>
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column :label="t('table.notification.photo')" width="100" prop="photo">
|
||||
<template #default="scope">
|
||||
<template v-if="scope.row.details && scope.row.details.imageUrl">
|
||||
<el-popover placement="right" width="500px" trigger="click">
|
||||
<template #reference>
|
||||
<img
|
||||
class="x-link"
|
||||
:src="getSmallThumbnailUrl(scope.row.details.imageUrl)"
|
||||
style="flex: none; height: 50px; border-radius: 4px" />
|
||||
</template>
|
||||
<img
|
||||
v-lazy="scope.row.details.imageUrl"
|
||||
class="x-link"
|
||||
style="width: 500px"
|
||||
@click="showFullscreenImageDialog(scope.row.details.imageUrl)" />
|
||||
</el-popover>
|
||||
</template>
|
||||
<template v-else-if="scope.row.imageUrl">
|
||||
<el-popover placement="right" width="500px" trigger="click">
|
||||
<template #reference>
|
||||
<img
|
||||
class="x-link"
|
||||
:src="getSmallThumbnailUrl(scope.row.imageUrl)"
|
||||
style="flex: none; height: 50px; border-radius: 4px" />
|
||||
</template>
|
||||
<img
|
||||
v-lazy="scope.row.imageUrl"
|
||||
class="x-link"
|
||||
style="width: 500px"
|
||||
@click="showFullscreenImageDialog(scope.row.imageUrl)" />
|
||||
</el-popover>
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column :label="t('table.notification.message')" prop="message">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.type === 'invite'" style="display: flex">
|
||||
<location
|
||||
v-if="scope.row.details"
|
||||
:location="scope.row.details.worldId"
|
||||
:hint="scope.row.details.worldName"
|
||||
:grouphint="scope.row.details.groupName"
|
||||
:link="true" />
|
||||
<br v-if="scope.row.details" />
|
||||
</span>
|
||||
<el-tooltip
|
||||
v-if="
|
||||
scope.row.message &&
|
||||
scope.row.message !== `This is a generated invite to ${scope.row.details?.worldName}`
|
||||
"
|
||||
placement="top">
|
||||
<template #content>
|
||||
<pre
|
||||
class="extra"
|
||||
style="
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
white-space: pre-wrap;
|
||||
margin: 0;
|
||||
"
|
||||
>{{ scope.row.message || '-' }}</pre
|
||||
>
|
||||
</template>
|
||||
<div v-text="scope.row.message"></div>
|
||||
</el-tooltip>
|
||||
<span
|
||||
v-else-if="scope.row.details && scope.row.details.inviteMessage"
|
||||
v-text="scope.row.details.inviteMessage"></span>
|
||||
<span
|
||||
v-else-if="scope.row.details && scope.row.details.requestMessage"
|
||||
v-text="scope.row.details.requestMessage"></span>
|
||||
<span
|
||||
v-else-if="scope.row.details && scope.row.details.responseMessage"
|
||||
v-text="scope.row.details.responseMessage"></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column :label="t('table.notification.action')" width="100" align="right">
|
||||
<template #default="scope">
|
||||
<template v-if="scope.row.senderUserId !== API.currentUser.id && !scope.row.$isExpired">
|
||||
<template v-if="scope.row.type === 'friendRequest'">
|
||||
<el-tooltip placement="top" content="Accept" :disabled="hideTooltips">
|
||||
<el-button
|
||||
type="text"
|
||||
icon="el-icon-check"
|
||||
style="color: #67c23a"
|
||||
size="mini"
|
||||
@click="acceptFriendRequestNotification(scope.row)" />
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<template v-else-if="scope.row.type === 'invite'">
|
||||
<el-tooltip placement="top" content="Decline with message" :disabled="hideTooltips">
|
||||
<el-button
|
||||
type="text"
|
||||
icon="el-icon-chat-line-square"
|
||||
size="mini"
|
||||
@click="showSendInviteResponseDialog(scope.row)" />
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<template v-else-if="scope.row.type === 'requestInvite'">
|
||||
<template
|
||||
v-if="lastLocation.location && isGameRunning && checkCanInvite(lastLocation.location)">
|
||||
<el-tooltip placement="top" content="Invite" :disabled="hideTooltips">
|
||||
<el-button
|
||||
type="text"
|
||||
icon="el-icon-check"
|
||||
style="color: #67c23a"
|
||||
size="mini"
|
||||
@click="acceptRequestInvite(scope.row)" />
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<el-tooltip placement="top" content="Decline with message" :disabled="hideTooltips">
|
||||
<el-button
|
||||
type="text"
|
||||
icon="el-icon-chat-line-square"
|
||||
size="mini"
|
||||
style="margin-left: 5px"
|
||||
@click="showSendInviteRequestResponseDialog(scope.row)" />
|
||||
</el-tooltip>
|
||||
</template>
|
||||
|
||||
<template v-if="scope.row.responses">
|
||||
<template v-for="response in scope.row.responses">
|
||||
<el-tooltip placement="top" :content="response.text" :disabled="hideTooltips">
|
||||
<el-button
|
||||
v-if="response.icon === 'check'"
|
||||
type="text"
|
||||
icon="el-icon-check"
|
||||
size="mini"
|
||||
style="margin-left: 5px"
|
||||
@click="
|
||||
sendNotificationResponse(scope.row.id, scope.row.responses, response.type)
|
||||
" />
|
||||
<el-button
|
||||
v-else-if="response.icon === 'cancel'"
|
||||
type="text"
|
||||
icon="el-icon-close"
|
||||
size="mini"
|
||||
style="margin-left: 5px"
|
||||
@click="
|
||||
sendNotificationResponse(scope.row.id, scope.row.responses, response.type)
|
||||
" />
|
||||
<el-button
|
||||
v-else-if="response.icon === 'ban'"
|
||||
type="text"
|
||||
icon="el-icon-circle-close"
|
||||
size="mini"
|
||||
style="margin-left: 5px"
|
||||
@click="
|
||||
sendNotificationResponse(scope.row.id, scope.row.responses, response.type)
|
||||
" />
|
||||
<el-button
|
||||
v-else-if="response.icon === 'bell-slash'"
|
||||
type="text"
|
||||
icon="el-icon-bell"
|
||||
size="mini"
|
||||
style="margin-left: 5px"
|
||||
@click="
|
||||
sendNotificationResponse(scope.row.id, scope.row.responses, response.type)
|
||||
" />
|
||||
<!--//el-button(-->
|
||||
<!--// v-else-if='response.icon === "reply" && scope.row.type === "boop"'-->
|
||||
<!--// type='text'-->
|
||||
<!--// icon='el-icon-chat-line-square'-->
|
||||
<!--// size='mini'-->
|
||||
<!--// style='margin-left: 5px'-->
|
||||
<!--// @click='showSendBoopDialog(scope.row.senderUserId)')-->
|
||||
<el-button
|
||||
v-else-if="response.icon === 'reply'"
|
||||
type="text"
|
||||
icon="el-icon-chat-line-square"
|
||||
size="mini"
|
||||
style="margin-left: 5px"
|
||||
@click="
|
||||
sendNotificationResponse(scope.row.id, scope.row.responses, response.type)
|
||||
" />
|
||||
<el-button
|
||||
v-else
|
||||
type="text"
|
||||
icon="el-icon-collection-tag"
|
||||
size="mini"
|
||||
style="margin-left: 5px"
|
||||
@click="
|
||||
sendNotificationResponse(scope.row.id, scope.row.responses, response.type)
|
||||
" />
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<template
|
||||
v-if="
|
||||
scope.row.type !== 'requestInviteResponse' &&
|
||||
scope.row.type !== 'inviteResponse' &&
|
||||
scope.row.type !== 'message' &&
|
||||
scope.row.type !== 'boop' &&
|
||||
scope.row.type !== 'groupChange' &&
|
||||
!scope.row.type.includes('group.') &&
|
||||
!scope.row.type.includes('moderation.') &&
|
||||
!scope.row.type.includes('instance.')
|
||||
">
|
||||
<el-tooltip placement="top" content="Decline" :disabled="hideTooltips">
|
||||
<el-button
|
||||
v-if="shiftHeld"
|
||||
style="color: #f56c6c; margin-left: 5px"
|
||||
type="text"
|
||||
icon="el-icon-close"
|
||||
size="mini"
|
||||
@click="hideNotification(scope.row)" />
|
||||
<el-button
|
||||
v-else
|
||||
type="text"
|
||||
icon="el-icon-close"
|
||||
size="mini"
|
||||
style="margin-left: 5px"
|
||||
@click="hideNotificationPrompt(scope.row)" />
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="scope.row.type === 'group.queueReady'">
|
||||
<el-tooltip placement="top" content="Delete log" :disabled="hideTooltips">
|
||||
<el-button
|
||||
v-if="shiftHeld"
|
||||
style="color: #f56c6c; margin-left: 5px"
|
||||
type="text"
|
||||
icon="el-icon-close"
|
||||
size="mini"
|
||||
@click="deleteNotificationLog(scope.row)" />
|
||||
<el-button
|
||||
v-else
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
style="margin-left: 5px"
|
||||
@click="deleteNotificationLogPrompt(scope.row)" />
|
||||
</el-tooltip>
|
||||
</template>
|
||||
|
||||
<template
|
||||
v-if="
|
||||
scope.row.type !== 'friendRequest' &&
|
||||
scope.row.type !== 'ignoredFriendRequest' &&
|
||||
!scope.row.type.includes('group.') &&
|
||||
!scope.row.type.includes('moderation.')
|
||||
">
|
||||
<el-tooltip placement="top" content="Delete log" :disabled="hideTooltips">
|
||||
<el-button
|
||||
v-if="shiftHeld"
|
||||
style="color: #f56c6c; margin-left: 5px"
|
||||
type="text"
|
||||
icon="el-icon-close"
|
||||
size="mini"
|
||||
@click="deleteNotificationLog(scope.row)" />
|
||||
<el-button
|
||||
v-else
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
style="margin-left: 5px"
|
||||
@click="deleteNotificationLogPrompt(scope.row)" />
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</data-tables>
|
||||
<SendInviteResponseDialog
|
||||
:send-invite-response-dialog-visible.sync="sendInviteResponseDialogVisible"
|
||||
:invite-response-message-table="inviteResponseMessageTable"
|
||||
:upload-image="uploadImage"
|
||||
@invite-image-upload="inviteImageUpload" />
|
||||
<SendInviteRequestResponseDialog
|
||||
:send-invite-request-response-dialog-visible.sync="sendInviteRequestResponseDialogVisible"
|
||||
:invite-request-response-message-table="inviteRequestResponseMessageTable"
|
||||
:upload-image="uploadImage"
|
||||
@invite-image-upload="inviteImageUpload" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'NotificationTab'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup>
|
||||
import { getCurrentInstance, inject, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n-bridge';
|
||||
import { friendRequest, inviteMessagesRequest, notificationRequest, worldRequest } from '../../api';
|
||||
import utils from '../../classes/utils';
|
||||
import { parseLocation } from '../../composables/instance/utils';
|
||||
import { convertFileUrlToImageUrl } from '../../composables/shared/utils';
|
||||
import configRepository from '../../service/config';
|
||||
import database from '../../service/database';
|
||||
import SendInviteRequestResponseDialog from './dialogs/SendInviteRequestResponseDialog.vue';
|
||||
import SendInviteResponseDialog from './dialogs/SendInviteResponseDialog.vue';
|
||||
import Location from '../../components/Location.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const { $confirm, $message } = getCurrentInstance().proxy;
|
||||
|
||||
const API = inject('API');
|
||||
const showWorldDialog = inject('showWorldDialog');
|
||||
const showGroupDialog = inject('showGroupDialog');
|
||||
const showUserDialog = inject('showUserDialog');
|
||||
const showFullscreenImageDialog = inject('showFullscreenImageDialog');
|
||||
|
||||
const props = defineProps({
|
||||
menuActiveIndex: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
notificationTable: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
shiftHeld: { type: Boolean, default: false },
|
||||
hideTooltips: { type: Boolean, default: false },
|
||||
lastLocation: { type: Object, default: () => ({}) },
|
||||
inviteResponseMessageTable: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
uploadImage: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
lastLocationDestination: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
isGameRunning: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
checkCanInvite: {
|
||||
type: Function,
|
||||
default: () => true
|
||||
},
|
||||
inviteRequestResponseMessageTable: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['inviteImageUpload', 'clearInviteImageUpload']);
|
||||
|
||||
const sendInviteResponseDialog = ref({
|
||||
message: '',
|
||||
messageSlot: 0,
|
||||
invite: {}
|
||||
});
|
||||
|
||||
const sendInviteResponseDialogVisible = ref(false);
|
||||
|
||||
const sendInviteRequestResponseDialogVisible = ref(false);
|
||||
|
||||
function inviteImageUpload(event) {
|
||||
emit('inviteImageUpload', event);
|
||||
}
|
||||
|
||||
function saveTableFilters() {
|
||||
configRepository.setString(
|
||||
'VRCX_notificationTableFilters',
|
||||
JSON.stringify(props.notificationTable.filters[0].value)
|
||||
);
|
||||
}
|
||||
|
||||
function openNotificationLink(link) {
|
||||
if (!link) {
|
||||
return;
|
||||
}
|
||||
const data = link.split(':');
|
||||
if (!data.length) {
|
||||
return;
|
||||
}
|
||||
switch (data[0]) {
|
||||
case 'group':
|
||||
showGroupDialog(data[1]);
|
||||
break;
|
||||
case 'user':
|
||||
showUserDialog(data[1]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function getSmallThumbnailUrl(url) {
|
||||
return convertFileUrlToImageUrl(url);
|
||||
}
|
||||
|
||||
function acceptFriendRequestNotification(row) {
|
||||
// FIXME: 메시지 수정
|
||||
$confirm('Continue? Accept Friend Request', 'Confirm', {
|
||||
confirmButtonText: 'Confirm',
|
||||
cancelButtonText: 'Cancel',
|
||||
type: 'info',
|
||||
callback: (action) => {
|
||||
if (action === 'confirm') {
|
||||
notificationRequest.acceptFriendRequestNotification({
|
||||
notificationId: row.id
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function showSendInviteResponseDialog(invite) {
|
||||
sendInviteResponseDialog.value = {
|
||||
invite
|
||||
};
|
||||
inviteMessagesRequest.refreshInviteMessageTableData('response');
|
||||
clearInviteImageUpload();
|
||||
sendInviteResponseDialogVisible.value = true;
|
||||
}
|
||||
|
||||
function clearInviteImageUpload() {
|
||||
emit('clearInviteImageUpload');
|
||||
}
|
||||
|
||||
function acceptRequestInvite(row) {
|
||||
$confirm('Continue? Send Invite', 'Confirm', {
|
||||
confirmButtonText: 'Confirm',
|
||||
cancelButtonText: 'Cancel',
|
||||
type: 'info',
|
||||
callback: (action) => {
|
||||
if (action === 'confirm') {
|
||||
let currentLocation = props.lastLocation.location;
|
||||
// todo
|
||||
if (props.lastLocation.location === 'traveling') {
|
||||
currentLocation = props.lastLocationDestination;
|
||||
}
|
||||
const L = parseLocation(currentLocation);
|
||||
worldRequest
|
||||
.getCachedWorld({
|
||||
worldId: L.worldId
|
||||
})
|
||||
.then((args) => {
|
||||
notificationRequest
|
||||
.sendInvite(
|
||||
{
|
||||
instanceId: L.tag,
|
||||
worldId: L.tag,
|
||||
worldName: args.ref.name,
|
||||
rsvp: true
|
||||
},
|
||||
row.senderUserId
|
||||
)
|
||||
.then((_args) => {
|
||||
$message('Invite sent');
|
||||
notificationRequest.hideNotification({
|
||||
notificationId: row.id
|
||||
});
|
||||
return _args;
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function showSendInviteRequestResponseDialog(invite) {
|
||||
sendInviteResponseDialog.value = {
|
||||
invite
|
||||
};
|
||||
inviteMessagesRequest.refreshInviteMessageTableData('requestResponse');
|
||||
clearInviteImageUpload();
|
||||
sendInviteRequestResponseDialogVisible.value = true;
|
||||
}
|
||||
|
||||
function sendNotificationResponse(notificationId, responses, responseType) {
|
||||
if (!Array.isArray(responses) || responses.length === 0) {
|
||||
return null;
|
||||
}
|
||||
let responseData = '';
|
||||
for (let i = 0; i < responses.length; i++) {
|
||||
if (responses[i].type === responseType) {
|
||||
responseData = responses[i].data;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return notificationRequest.sendNotificationResponse({
|
||||
notificationId,
|
||||
responseType,
|
||||
responseData
|
||||
});
|
||||
}
|
||||
|
||||
function hideNotification(row) {
|
||||
if (row.type === 'ignoredFriendRequest') {
|
||||
friendRequest.deleteHiddenFriendRequest(
|
||||
{
|
||||
notificationId: row.id
|
||||
},
|
||||
row.senderUserId
|
||||
);
|
||||
} else {
|
||||
notificationRequest.hideNotification({
|
||||
notificationId: row.id
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function hideNotificationPrompt(row) {
|
||||
$confirm(`Continue? Decline ${row.type}`, 'Confirm', {
|
||||
confirmButtonText: 'Confirm',
|
||||
cancelButtonText: 'Cancel',
|
||||
type: 'info',
|
||||
callback: (action) => {
|
||||
if (action === 'confirm') {
|
||||
hideNotification(row);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function deleteNotificationLog(row) {
|
||||
utils.removeFromArray(props.notificationTable.data, row);
|
||||
if (row.type !== 'friendRequest' && row.type !== 'ignoredFriendRequest') {
|
||||
database.deleteNotification(row.id);
|
||||
}
|
||||
}
|
||||
|
||||
function deleteNotificationLogPrompt(row) {
|
||||
$confirm(`Continue? Delete ${row.type}`, 'Confirm', {
|
||||
confirmButtonText: 'Confirm',
|
||||
cancelButtonText: 'Cancel',
|
||||
type: 'info',
|
||||
callback: (action) => {
|
||||
if (action === 'confirm') {
|
||||
deleteNotificationLog(row);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<safe-dialog
|
||||
class="x-dialog"
|
||||
:visible.sync="editAndSendInviteResponseDialog.visible"
|
||||
:title="t('dialog.edit_send_invite_response_message.header')"
|
||||
width="400px"
|
||||
append-to-body>
|
||||
<div style="font-size: 12px">
|
||||
<span>{{ t('dialog.edit_send_invite_response_message.description') }}</span>
|
||||
</div>
|
||||
<el-input
|
||||
v-model="editAndSendInviteResponseDialog.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="cancelEditAndSendInviteResponse">{{
|
||||
t('dialog.edit_send_invite_response_message.cancel')
|
||||
}}</el-button>
|
||||
<el-button type="primary" size="small" @click="saveEditAndSendInviteResponse">{{
|
||||
t('dialog.edit_send_invite_response_message.send')
|
||||
}}</el-button>
|
||||
</template>
|
||||
</safe-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getCurrentInstance, inject } from 'vue';
|
||||
import { useI18n } from 'vue-i18n-bridge';
|
||||
import { inviteMessagesRequest, notificationRequest } from '../../../api';
|
||||
|
||||
const { t } = useI18n();
|
||||
const instance = getCurrentInstance();
|
||||
const $message = instance.proxy.$message;
|
||||
|
||||
const API = inject('API');
|
||||
|
||||
const props = defineProps({
|
||||
editAndSendInviteResponseDialog: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
uploadImage: {
|
||||
type: String
|
||||
},
|
||||
sendInviteResponseDialog: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['closeInviteDialog', 'update:editAndSendInviteResponseDialog']);
|
||||
|
||||
function cancelEditAndSendInviteResponse() {
|
||||
emit('update:editAndSendInviteResponseDialog', { ...props.editAndSendInviteResponseDialog, visible: false });
|
||||
}
|
||||
|
||||
async function saveEditAndSendInviteResponse() {
|
||||
const D = props.editAndSendInviteResponseDialog;
|
||||
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.sendInviteResponseDialog;
|
||||
const params = {
|
||||
responseSlot: slot,
|
||||
rsvp: true
|
||||
};
|
||||
if (props.uploadImage) {
|
||||
notificationRequest
|
||||
.sendInviteResponsePhoto(params, I.invite.id)
|
||||
.catch((err) => {
|
||||
throw err;
|
||||
})
|
||||
.then((args) => {
|
||||
notificationRequest.hideNotification({
|
||||
notificationId: I.invite.id
|
||||
});
|
||||
$message({
|
||||
message: 'Invite response message sent',
|
||||
type: 'success'
|
||||
});
|
||||
|
||||
emit('closeInviteDialog');
|
||||
return args;
|
||||
});
|
||||
} else {
|
||||
notificationRequest
|
||||
.sendInviteResponse(params, I.invite.id)
|
||||
.catch((err) => {
|
||||
throw err;
|
||||
})
|
||||
.then((args) => {
|
||||
notificationRequest.hideNotification({
|
||||
notificationId: I.invite.id
|
||||
});
|
||||
$message({
|
||||
message: 'Invite response message sent',
|
||||
type: 'success'
|
||||
});
|
||||
emit('closeInviteDialog');
|
||||
return args;
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<safe-dialog
|
||||
class="x-dialog"
|
||||
:visible="sendInviteRequestResponseDialogVisible"
|
||||
:title="t('dialog.invite_request_response_message.header')"
|
||||
width="800px"
|
||||
append-to-body
|
||||
@close="cancelSendInviteRequestResponse">
|
||||
<template v-if="API.currentUser.$isVRCPlus">
|
||||
<input class="inviteImageUploadButton" type="file" accept="image/*" @change="inviteImageUpload" />
|
||||
</template>
|
||||
|
||||
<data-tables
|
||||
v-bind="inviteRequestResponseMessageTable"
|
||||
style="margin-top: 10px; cursor: pointer"
|
||||
@row-click="showSendInviteResponseConfirmDialog">
|
||||
<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="showEditAndSendInviteResponseDialog('requestResponse', scope.row)">
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</data-tables>
|
||||
|
||||
<template #footer>
|
||||
<el-button type="small" @click="cancelSendInviteRequestResponse">
|
||||
{{ t('dialog.invite_request_response_message.cancel') }}
|
||||
</el-button>
|
||||
<el-button type="small" @click="API.refreshInviteMessageTableData('requestResponse')">
|
||||
{{ t('dialog.invite_request_response_message.refresh') }}
|
||||
</el-button>
|
||||
</template>
|
||||
<EditAndSendInviteResponseDialog
|
||||
:edit-and-send-invite-response-dialog.sync="editAndSendInviteResponseDialog"
|
||||
:upload-image="uploadImage"
|
||||
:send-invite-response-dialog="sendInviteResponseDialog" />
|
||||
<SendInviteResponseConfirmDialog
|
||||
:send-invite-response-dialog.sync="sendInviteResponseConfirmDialog"
|
||||
:upload-image="uploadImage"
|
||||
:send-invite-response-confirm-dialog="sendInviteResponseDialog" />
|
||||
</safe-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { inject, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n-bridge';
|
||||
import EditAndSendInviteResponseDialog from './EditAndSendInviteResponseDialog.vue';
|
||||
import SendInviteResponseConfirmDialog from './SendInviteResponseConfirmDialog.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const API = inject('API');
|
||||
|
||||
defineProps({
|
||||
sendInviteRequestResponseDialogVisible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
inviteRequestResponseMessageTable: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
uploadImage: {
|
||||
type: String
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:sendInviteRequestResponseDialogVisible', 'inviteImageUpload']);
|
||||
|
||||
const editAndSendInviteResponseDialog = ref({
|
||||
visible: false,
|
||||
inviteMessage: {},
|
||||
messageType: '',
|
||||
newMessage: ''
|
||||
});
|
||||
|
||||
const sendInviteResponseConfirmDialog = ref({
|
||||
visible: false
|
||||
});
|
||||
|
||||
const sendInviteResponseDialog = ref({
|
||||
message: '',
|
||||
messageSlot: 0,
|
||||
invite: {}
|
||||
});
|
||||
|
||||
function inviteImageUpload(event) {
|
||||
emit('inviteImageUpload', event);
|
||||
}
|
||||
|
||||
function showSendInviteResponseConfirmDialog(row) {
|
||||
sendInviteResponseConfirmDialog.value.visible = true;
|
||||
sendInviteResponseDialog.value.messageSlot = row.slot;
|
||||
}
|
||||
|
||||
function showEditAndSendInviteResponseDialog(messageType, inviteMessage) {
|
||||
editAndSendInviteResponseDialog.value = {
|
||||
newMessage: inviteMessage.message,
|
||||
visible: true,
|
||||
messageType,
|
||||
inviteMessage
|
||||
};
|
||||
}
|
||||
|
||||
function cancelSendInviteRequestResponse() {
|
||||
emit('update:sendInviteRequestResponseDialogVisible', false);
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<safe-dialog
|
||||
class="x-dialog"
|
||||
:visible="sendInviteResponseConfirmDialog.visible"
|
||||
:title="t('dialog.invite_response_message.header')"
|
||||
width="400px"
|
||||
append-to-body
|
||||
@close="cancelInviteResponseConfirm">
|
||||
<div style="font-size: 12px">
|
||||
<span>{{ t('dialog.invite_response_message.confirmation') }}</span>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<el-button type="small" @click="cancelInviteResponseConfirm">{{
|
||||
t('dialog.invite_response_message.cancel')
|
||||
}}</el-button>
|
||||
<el-button type="primary" size="small" @click="sendInviteResponseConfirm">{{
|
||||
t('dialog.invite_response_message.confirm')
|
||||
}}</el-button>
|
||||
</template>
|
||||
</safe-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getCurrentInstance } from 'vue';
|
||||
import { useI18n } from 'vue-i18n-bridge';
|
||||
import { notificationRequest } from '../../../api';
|
||||
const { t } = useI18n();
|
||||
|
||||
const instance = getCurrentInstance();
|
||||
const $message = instance.proxy.$message;
|
||||
|
||||
const props = defineProps({
|
||||
sendInviteResponseConfirmDialog: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
uploadImage: {
|
||||
type: String
|
||||
},
|
||||
sendInviteResponseDialog: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:sendInviteResponseConfirmDialog', 'closeInviteDialog']);
|
||||
|
||||
function cancelInviteResponseConfirm() {
|
||||
emit('update:sendInviteResponseConfirmDialog', { visible: false });
|
||||
}
|
||||
|
||||
function sendInviteResponseConfirm() {
|
||||
const D = props.sendInviteResponseDialog;
|
||||
const params = {
|
||||
responseSlot: D.messageSlot,
|
||||
rsvp: true
|
||||
};
|
||||
if (props.uploadImage) {
|
||||
notificationRequest
|
||||
.sendInviteResponsePhoto(params, D.invite.id, D.messageType)
|
||||
.catch((err) => {
|
||||
throw err;
|
||||
})
|
||||
.then((args) => {
|
||||
notificationRequest.hideNotification({
|
||||
notificationId: D.invite.id
|
||||
});
|
||||
$message({
|
||||
message: 'Invite response photo message sent',
|
||||
type: 'success'
|
||||
});
|
||||
return args;
|
||||
});
|
||||
} else {
|
||||
notificationRequest
|
||||
.sendInviteResponse(params, D.invite.id, D.messageType)
|
||||
.catch((err) => {
|
||||
throw err;
|
||||
})
|
||||
.then((args) => {
|
||||
notificationRequest.hideNotification({
|
||||
notificationId: D.invite.id
|
||||
});
|
||||
$message({
|
||||
message: 'Invite response message sent',
|
||||
type: 'success'
|
||||
});
|
||||
return args;
|
||||
});
|
||||
}
|
||||
cancelInviteResponseConfirm();
|
||||
emit('closeInviteDialog');
|
||||
}
|
||||
</script>
|
||||
126
src/views/Notifications/dialogs/SendInviteResponseDialog.vue
Normal file
126
src/views/Notifications/dialogs/SendInviteResponseDialog.vue
Normal file
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<safe-dialog
|
||||
class="x-dialog"
|
||||
:visible="sendInviteResponseDialogVisible"
|
||||
:title="t('dialog.invite_response_message.header')"
|
||||
width="800px"
|
||||
append-to-body
|
||||
@close="cancelSendInviteResponse">
|
||||
<template v-if="API.currentUser.$isVRCPlus">
|
||||
<input class="inviteImageUploadButton" type="file" accept="image/*" @change="inviteImageUpload" />
|
||||
</template>
|
||||
|
||||
<data-tables
|
||||
v-bind="inviteResponseMessageTable"
|
||||
style="margin-top: 10px; cursor: pointer"
|
||||
@row-click="showSendInviteResponseConfirmDialog">
|
||||
<el-table-column
|
||||
:label="t('table.profile.invite_messages.slot')"
|
||||
prop="slot"
|
||||
sortable="custom"
|
||||
width="70" />
|
||||
<el-table-column :label="t('table.profile.invite_messages.message')" prop="message" />
|
||||
<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" />
|
||||
</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="showEditAndSendInviteResponseDialog('response', scope.row)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</data-tables>
|
||||
|
||||
<template #footer>
|
||||
<el-button type="small" @click="cancelSendInviteResponse">{{
|
||||
t('dialog.invite_response_message.cancel')
|
||||
}}</el-button>
|
||||
<el-button type="small" @click="API.refreshInviteMessageTableData('response')">{{
|
||||
t('dialog.invite_response_message.refresh')
|
||||
}}</el-button>
|
||||
</template>
|
||||
<EditAndSendInviteResponseDialog
|
||||
:edit-and-send-invite-response-dialog.sync="editAndSendInviteResponseDialog"
|
||||
:upload-image="uploadImage"
|
||||
:send-invite-response-confirm-dialog="sendInviteResponseDialog" />
|
||||
<SendInviteResponseConfirmDialog
|
||||
:send-invite-response-dialog.sync="sendInviteResponseConfirmDialog"
|
||||
:upload-image="uploadImage"
|
||||
:send-invite-response-confirm-dialog="sendInviteResponseDialog" />
|
||||
</safe-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { inject, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n-bridge';
|
||||
import EditAndSendInviteResponseDialog from './EditAndSendInviteResponseDialog.vue';
|
||||
import SendInviteResponseConfirmDialog from './SendInviteResponseConfirmDialog.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const API = inject('API');
|
||||
defineProps({
|
||||
sendInviteResponseDialogVisible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
inviteResponseMessageTable: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
uploadImage: {
|
||||
type: String
|
||||
}
|
||||
});
|
||||
|
||||
const editAndSendInviteResponseDialog = ref({
|
||||
visible: false,
|
||||
inviteMessage: {},
|
||||
messageType: '',
|
||||
newMessage: ''
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:sendInviteResponseDialogVisible', 'inviteImageUpload']);
|
||||
|
||||
const sendInviteResponseConfirmDialog = ref({
|
||||
visible: false
|
||||
});
|
||||
|
||||
const sendInviteResponseDialog = ref({
|
||||
message: '',
|
||||
messageSlot: 0,
|
||||
invite: {}
|
||||
});
|
||||
|
||||
function cancelSendInviteResponse() {
|
||||
emit('update:sendInviteResponseDialogVisible', false);
|
||||
}
|
||||
|
||||
function showEditAndSendInviteResponseDialog(messageType, inviteMessage) {
|
||||
editAndSendInviteResponseDialog.value = {
|
||||
newMessage: inviteMessage.message,
|
||||
visible: true,
|
||||
messageType,
|
||||
inviteMessage
|
||||
};
|
||||
}
|
||||
|
||||
function inviteImageUpload(event) {
|
||||
emit('inviteImageUpload', event);
|
||||
}
|
||||
|
||||
function showSendInviteResponseConfirmDialog(row) {
|
||||
sendInviteResponseConfirmDialog.value.visible = true;
|
||||
sendInviteResponseDialog.value.messageSlot = row.slot;
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user