PronounsPage/app/components/ProfileOverview.vue

<script setup lang="ts">
import type { Profile } from '#shared/profile.ts';
import useDialogue from '~/composables/useDialogue.ts';
import type { LocaleDescription } from '~~/locale/locales.ts';

const props = defineProps<{
    username: string;
    profile: Profile;
    locale: LocaleDescription;
}>();

const emit = defineEmits<{
    update: [Record<string, Partial<Profile>>];
}>();

const { $translator: translator } = useNuxtApp();

const deleting = ref(false);

const dialogue = useDialogue();
const removeProfile = async () => {
    await dialogue.confirm(translator.translate('profile.deleteConfirm'), 'danger');

    deleting.value = true;
    try {
        const response = await dialogue.postWithAlertOnError<Record<string, Partial<Profile>>>(`/api/profile/delete/${props.locale.code}`);
        emit('update', response);
    } finally {
        deleting.value = false;
    }
};
</script>

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