mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-25 17:53:48 +02:00
Add invite message editing to tools tab
This commit is contained in:
Natsumi
89
src/views/Tools/dialogs/EditInviteMessageDialog.vue
Normal file
89
src/views/Tools/dialogs/EditInviteMessageDialog.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="x-dialog"
|
||||
:model-value="isEditInviteMessageDialogVisible"
|
||||
:title="t('dialog.edit_invite_message.header')"
|
||||
width="400px"
|
||||
@close="closeDialog">
|
||||
<div style="font-size: 12px">
|
||||
<span>{{ t('dialog.edit_invite_message.description') }}</span>
|
||||
<el-input
|
||||
v-model="message"
|
||||
type="textarea"
|
||||
size="small"
|
||||
maxlength="64"
|
||||
show-word-limit
|
||||
:autosize="{ minRows: 2, maxRows: 5 }"
|
||||
placeholder=""
|
||||
style="margin-top: 10px"></el-input>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button @click="closeDialog">{{ t('dialog.edit_invite_message.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="saveEditInviteMessage">{{
|
||||
t('dialog.edit_invite_message.save')
|
||||
}}</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { inviteMessagesRequest } from '../../../api';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const props = defineProps({
|
||||
isEditInviteMessageDialogVisible: { type: Boolean, default: false },
|
||||
inviteMessage: { type: Object, required: true }
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:isEditInviteMessageDialogVisible', 'updateInviteMessages']);
|
||||
|
||||
const message = ref('');
|
||||
|
||||
watch(
|
||||
() => props.inviteMessage,
|
||||
(inviteMessage) => {
|
||||
if (inviteMessage) {
|
||||
message.value = inviteMessage.message;
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
function saveEditInviteMessage() {
|
||||
closeDialog();
|
||||
if (props.inviteMessage.message !== message.value) {
|
||||
const slot = props.inviteMessage.slot;
|
||||
const messageType = props.inviteMessage.messageType;
|
||||
const params = {
|
||||
message: message.value
|
||||
};
|
||||
inviteMessagesRequest
|
||||
.editInviteMessage(params, messageType, slot)
|
||||
.catch((err) => {
|
||||
throw err;
|
||||
})
|
||||
.then((args) => {
|
||||
if (args.json[slot].message === props.inviteMessage.message) {
|
||||
ElMessage({
|
||||
message: "VRChat API didn't update message, try again",
|
||||
type: 'error'
|
||||
});
|
||||
throw new Error("VRChat API didn't update message, try again");
|
||||
} else {
|
||||
ElMessage({ message: 'Invite message updated', type: 'success' });
|
||||
emit('updateInviteMessages', messageType);
|
||||
}
|
||||
return args;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function closeDialog() {
|
||||
emit('update:isEditInviteMessageDialogVisible', false);
|
||||
}
|
||||
</script>
|
||||
186
src/views/Tools/dialogs/EditInviteMessagesDialog.vue
Normal file
186
src/views/Tools/dialogs/EditInviteMessagesDialog.vue
Normal file
@@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="x-dialog"
|
||||
:model-value="isEditInviteMessagesDialogVisible"
|
||||
:title="t('dialog.edit_invite_messages.header')"
|
||||
width="1000px"
|
||||
@close="closeDialog">
|
||||
<el-tabs v-model="activeTab" style="margin-top: 10px">
|
||||
<el-tab-pane :label="t('dialog.edit_invite_messages.invite_message_tab')" name="message">
|
||||
<DataTable
|
||||
v-bind="inviteMessageTable"
|
||||
style="margin-top: 10px; cursor: pointer"
|
||||
@row-click="showEditInviteMessageDialog">
|
||||
<el-table-column
|
||||
:label="t('table.profile.invite_messages.slot')"
|
||||
prop="slot"
|
||||
:sortable="true"
|
||||
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="true"
|
||||
width="110"
|
||||
align="right">
|
||||
<template #default="scope">
|
||||
<countdown-timer :datetime="scope.row.updatedAt" :hours="1"></countdown-timer>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</DataTable>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="t('dialog.edit_invite_messages.invite_request_tab')" name="request">
|
||||
<DataTable
|
||||
v-bind="inviteRequestMessageTable"
|
||||
style="margin-top: 10px; cursor: pointer"
|
||||
@row-click="showEditInviteMessageDialog">
|
||||
<el-table-column
|
||||
:label="t('table.profile.invite_messages.slot')"
|
||||
prop="slot"
|
||||
:sortable="true"
|
||||
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="true"
|
||||
width="110"
|
||||
align="right">
|
||||
<template #default="scope">
|
||||
<countdown-timer :datetime="scope.row.updatedAt" :hours="1"></countdown-timer>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</DataTable>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="t('dialog.edit_invite_messages.invite_request_response_tab')" name="requestResponse">
|
||||
<DataTable
|
||||
v-bind="inviteRequestResponseMessageTable"
|
||||
style="margin-top: 10px; cursor: pointer"
|
||||
@row-click="showEditInviteMessageDialog">
|
||||
<el-table-column
|
||||
:label="t('table.profile.invite_messages.slot')"
|
||||
prop="slot"
|
||||
:sortable="true"
|
||||
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="true"
|
||||
width="110"
|
||||
align="right">
|
||||
<template #default="scope">
|
||||
<countdown-timer :datetime="scope.row.updatedAt" :hours="1"></countdown-timer>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</DataTable>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="t('dialog.edit_invite_messages.invite_response_tab')" name="response">
|
||||
<DataTable
|
||||
v-bind="inviteResponseMessageTable"
|
||||
style="margin-top: 10px; cursor: pointer"
|
||||
@row-click="showEditInviteMessageDialog">
|
||||
<el-table-column
|
||||
:label="t('table.profile.invite_messages.slot')"
|
||||
prop="slot"
|
||||
:sortable="true"
|
||||
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="true"
|
||||
width="110"
|
||||
align="right">
|
||||
<template #default="scope">
|
||||
<countdown-timer :datetime="scope.row.updatedAt" :hours="1"></countdown-timer>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</DataTable>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-dialog>
|
||||
<template v-if="isEditInviteMessagesDialogVisible">
|
||||
<EditInviteMessageDialog
|
||||
v-model:isEditInviteMessageDialogVisible="isEditInviteMessageDialogVisible"
|
||||
:inviteMessage="inviteMessage"
|
||||
@close="isEditInviteMessageDialogVisible = false"
|
||||
@updateInviteMessages="refreshInviteMessageTableData" />
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { useInviteStore } from '../../../stores';
|
||||
|
||||
import DataTable from '../../../components/DataTable.vue';
|
||||
import EditInviteMessageDialog from './EditInviteMessageDialog.vue';
|
||||
|
||||
const {
|
||||
inviteMessageTable,
|
||||
inviteRequestMessageTable,
|
||||
inviteRequestResponseMessageTable,
|
||||
inviteResponseMessageTable
|
||||
} = storeToRefs(useInviteStore());
|
||||
const { refreshInviteMessageTableData } = useInviteStore();
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const props = defineProps({
|
||||
isEditInviteMessagesDialogVisible: {
|
||||
type: Boolean
|
||||
}
|
||||
});
|
||||
|
||||
const activeTab = ref('message');
|
||||
|
||||
const isEditInviteMessageDialogVisible = ref(false);
|
||||
const inviteMessage = ref({});
|
||||
|
||||
watch(
|
||||
() => props.isEditInviteMessagesDialogVisible,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
refreshInviteMessageTableData('message');
|
||||
refreshInviteMessageTableData('request');
|
||||
refreshInviteMessageTableData('requestResponse');
|
||||
refreshInviteMessageTableData('response');
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const emit = defineEmits(['close']);
|
||||
|
||||
function closeDialog() {
|
||||
emit('close');
|
||||
}
|
||||
|
||||
function showEditInviteMessageDialog(row) {
|
||||
if (row.updatedAt) {
|
||||
const cooldownEnd = new Date(row.updatedAt);
|
||||
cooldownEnd.setHours(cooldownEnd.getHours() + 1);
|
||||
const now = new Date();
|
||||
if (now < cooldownEnd) {
|
||||
ElMessage({
|
||||
message: 'This invite message is on cooldown and cannot be edited yet.',
|
||||
type: 'warning'
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
inviteMessage.value = row;
|
||||
isEditInviteMessageDialogVisible.value = true;
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user