PronounsPage/components/ProfileOverview.vue

<template>
    <div class="d-md-flex justify-content-between align-items-center">
        <h4 class="my-md-0">
            {{ $locales[locale].name }}
            <small v-if="$locales[locale].extra" class="text-muted">({{ $locales[locale].extra }})</small>
        </h4>
        <div v-if="profile" class="d-flex gap-2">
            <LocaleLink :locale="locale" :link="`/@${username}`" class="btn btn-primary">
                <Icon v="id-card" />
                <T>profile.show</T>
            </LocaleLink>
            <LocaleLink :locale="locale" link="/editor" class="btn btn-light border">
                <Icon v="edit" />
                <T>profile.edit</T>
            </LocaleLink>
            <template v-if="username !== 'example'">
                <Spinner v-if="deleting" />
                <a v-else href="#" class="btn btn-outline-danger" :aria-label="$t('profile.delete')" @click.prevent="removeProfile(locale)">
                    <Icon v="trash-alt" />
                </a>
            </template>
        </div>
        <LocaleLink v-else :locale="locale" link="/editor" class="btn btn-light border">
            <Icon v="plus-circle" />
            <T>profile.init</T>
        </LocaleLink>
    </div>
</template>

<script>
import useDialogue from '../composables/useDialogue.ts';

export default {
    props: {
        username: { required: true },
        profile: { required: true },
        locale: { required: true },
    },
    emits: ['update'],
    setup() {
        return {
            dialogue: useDialogue(),
        };
    },
    data() {
        return {
            deleting: false,
        };
    },
    methods: {
        async removeProfile(locale) {
            await this.dialogue.confirm(this.$t('profile.deleteConfirm'), 'danger');

            this.deleting = true;
            try {
                const response = await this.dialogue.postWithAlertOnError(`/api/profile/delete/${locale}`);
                this.$emit('update', response);
            } finally {
                this.deleting = false;
            }
        },
    },
};
</script>