refactor: dialogs (#1216)

src/views/Profile/dialogs/DiscordNamesDialog.vue

@@ -0,0 +1,105 @@
+<template>
+    <el-dialog
+        class="x-dialog"
+        :before-close="beforeDialogClose"
+        :visible="discordNamesDialogVisible"
+        :title="t('dialog.discord_names.header')"
+        width="650px"
+        @close="closeDialog"
+        @mousedown.native="dialogMouseDown"
+        @mouseup.native="dialogMouseUp">
+        <div style="font-size: 12px">
+            {{ t('dialog.discord_names.description') }}
+        </div>
+        <el-input
+            v-model="discordNamesContent"
+            type="textarea"
+            size="mini"
+            rows="15"
+            resize="none"
+            readonly
+            style="margin-top: 15px" />
+    </el-dialog>
+</template>
+
+<script setup>
+    import { ref, watch, inject } from 'vue';
+    import { useI18n } from 'vue-i18n-bridge';
+
+    const API = inject('API');
+    const beforeDialogClose = inject('beforeDialogClose');
+    const dialogMouseDown = inject('dialogMouseDown');
+    const dialogMouseUp = inject('dialogMouseUp');
+
+    const { t } = useI18n();
+
+    const props = defineProps({
+        discordNamesDialogVisible: {
+            type: Boolean,
+            default: false
+        },
+        friends: {
+            type: Map,
+            default: () => new Map()
+        }
+    });
+
+    watch(
+        () => props.discordNamesDialogVisible,
+        (newVal) => {
+            if (newVal) {
+                showDiscordNamesContent();
+            }
+        }
+    );
+
+    const emit = defineEmits(['update:discordNamesDialogVisible']);
+
+    const discordNamesContent = ref('');
+
+    function showDiscordNamesContent() {
+        const { friends } = API.currentUser;
+        if (Array.isArray(friends) === false) {
+            return;
+        }
+        const lines = ['DisplayName,DiscordName'];
+        const _ = function (str) {
+            if (/[\x00-\x1f,"]/.test(str) === true) {
+                return `"${str.replace(/"/g, '""')}"`;
+            }
+            return str;
+        };
+        for (const userId of friends) {
+            const { ref } = props.friends.get(userId);
+            let discord = '';
+            if (typeof ref === 'undefined') {
+                continue;
+            }
+            const name = ref.displayName;
+            if (ref.statusDescription) {
+                const statusRegex = /(?:discord|dc|dis)(?: |=|:|˸|;)(.*)/gi.exec(ref.statusDescription);
+                if (statusRegex) {
+                    discord = statusRegex[1];
+                }
+            }
+            if (!discord && ref.bio) {
+                const bioRegex = /(?:discord|dc|dis)(?: |=|:|˸|;)(.*)/gi.exec(ref.bio);
+                if (bioRegex) {
+                    discord = bioRegex[1];
+                }
+            }
+            if (!discord) {
+                continue;
+            }
+            discord = discord.trim();
+            lines.push(`${_(name)},${_(discord)}`);
+        }
+        discordNamesContent.value = lines.join('\n');
+    }
+
+    function closeDialog() {
+        emit('update:discordNamesDialogVisible', false);
+    }
+</script>
+
+<style scoped></style>

src/views/Profile/dialogs/EditInviteMessageDialog.vue

@@ -0,0 +1,102 @@
+<template>
+    <el-dialog
+        class="x-dialog"
+        :before-close="beforeDialogClose"
+        :visible="editInviteMessageDialog.visible"
+        :title="t('dialog.edit_invite_message.header')"
+        width="400px"
+        @close="closeDialog"
+        @mousedown.native="dialogMouseDown"
+        @mouseup.native="dialogMouseUp">
+        <div style="font-size: 12px">
+            <span>{{ t('dialog.edit_invite_message.description') }}</span>
+            <el-input
+                v-model="message"
+                type="textarea"
+                size="mini"
+                maxlength="64"
+                show-word-limit
+                :autosize="{ minRows: 2, maxRows: 5 }"
+                placeholder=""
+                style="margin-top: 10px"></el-input>
+        </div>
+        <template #footer>
+            <el-button type="small" @click="closeDialog">{{ $t('dialog.edit_invite_message.cancel') }}</el-button>
+            <el-button type="primary" size="small" @click="saveEditInviteMessage">{{
+                $t('dialog.edit_invite_message.save')
+            }}</el-button>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup>
+    import { ref, watch, inject, getCurrentInstance } from 'vue';
+    import { useI18n } from 'vue-i18n-bridge';
+    import { inviteMessagesRequest } from '../../../api';
+
+    const { t } = useI18n();
+    const instance = getCurrentInstance();
+    const $message = instance.proxy.$message;
+    const API = inject('API');
+    const beforeDialogClose = inject('beforeDialogClose');
+    const dialogMouseDown = inject('dialogMouseDown');
+    const dialogMouseUp = inject('dialogMouseUp');
+
+    const props = defineProps({
+        editInviteMessageDialog: {
+            type: Object,
+            default: () => ({
+                visible: false,
+                newMessage: ''
+            })
+        }
+    });
+
+    const message = ref('');
+
+    watch(
+        () => props.editInviteMessageDialog,
+        (newVal) => {
+            if (newVal && newVal.visible) {
+                message.value = newVal.newMessage;
+            }
+        },
+        { deep: true }
+    );
+
+    const emit = defineEmits(['update:editInviteMessageDialog']);
+
+    function saveEditInviteMessage() {
+        const D = props.editInviteMessageDialog;
+        D.visible = false;
+        if (D.inviteMessage.message !== message.value) {
+            const slot = D.inviteMessage.slot;
+            const messageType = D.messageType;
+            const params = {
+                message: message.value
+            };
+            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.success('Invite message updated');
+                    }
+                    return args;
+                });
+        }
+    }
+
+    function closeDialog() {
+        emit('update:editInviteMessageDialog', { ...props.editInviteMessageDialog, visible: false });
+    }
+</script>