61 lines
3.9 KiB
Vue
61 lines
3.9 KiB
Vue
<script setup lang="ts">
|
|
import type { Progression } from '~/types/character';
|
|
|
|
definePageMeta({
|
|
guestsGoesTo: '/user/login',
|
|
})
|
|
const { add } = useToast();
|
|
const { user } = useUserSession();
|
|
const loading = ref(true);
|
|
const characters = ref<Array<{ id: number, name: string, progress: Progression }>>([]);
|
|
characters.value = await useRequestFetch()('/api/character');
|
|
loading.value = false;
|
|
|
|
async function deleteCharacter(id: number)
|
|
{
|
|
loading.value = true;
|
|
await useRequestFetch()(`/api/character/${id}`, { method: 'delete' });
|
|
loading.value = false;
|
|
add({ content: 'Personnage supprimé', type: 'info', duration: 25000, timer: true, });
|
|
characters.value = characters.value?.filter(e => e.id !== id);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Head>
|
|
<Title>d[any] - Mes personnages</Title>
|
|
</Head>
|
|
<div class="flex flex-col">
|
|
<NuxtLink v-if="user?.state === 1" :to="{ name: 'character-id-edit', params: { id: 'new' } }" class="flex align-center justify-center"><Button>Nouveau personnage</Button></NuxtLink>
|
|
<Tooltip v-else side="top" message="Veuillez valider votre email avant de pouvoir créer un personnage."><Button disabled>Nouveau personnage</Button></Tooltip>
|
|
<div v-if="loading" class="flex flex-1 justify-center align-center">
|
|
<Loading size="large" />
|
|
</div>
|
|
<div v-else class="grid p-6 grid-cols-4 gap-4">
|
|
<div class="border border-light-30 dark:border-dark-30 p-1 flex flex-row gap-4" v-for="character of characters">
|
|
<Avatar size="large" icon="radix-icons:person" src="" class="m-2" />
|
|
<div class="flex flex-col justify-between w-64">
|
|
<NuxtLink class="flex-1 text-xl font-bold hover:text-accent-blue truncate" :to="{ name: 'character-id', params: { id: character.id } }" :title="character.name">{{ character.name }}</NuxtLink>
|
|
<span class="flex-1 text-sm truncate">Niveau {{ character.progress.level }}</span>
|
|
<div class="flex flex-row gap-8">
|
|
<NuxtLink class="font-bold text-accent-blue hover:text-opacity-50" :to="{ name: 'character-id-edit', params: { id: character.id } }">Editer</NuxtLink>
|
|
<AlertDialogRoot>
|
|
<AlertDialogTrigger asChild><span class="font-bold text-light-red dark:text-dark-red hover:text-opacity-50 cursor-pointer">Supprimer</span></AlertDialogTrigger>
|
|
<AlertDialogPortal>
|
|
<AlertDialogOverlay class="bg-light-0 dark:bg-dark-0 opacity-70 fixed inset-0 z-40" />
|
|
<AlertDialogContent
|
|
class="data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[800px] translate-x-[-50%] translate-y-[-50%] bg-light-10 dark:bg-dark-10 border border-light-30 dark:border-dark-30 p-6 z-50 text-light-100 dark:text-dark-100">
|
|
<AlertDialogTitle class="text-3xl font-light relative -top-2">Supprimer {{ character.name }} ?</AlertDialogTitle>
|
|
<div class="flex flex-1 justify-end gap-4">
|
|
<AlertDialogCancel asChild><Button>Non</Button></AlertDialogCancel>
|
|
<AlertDialogAction asChild><Button @click="() => deleteCharacter(character.id)" class="border-light-red dark:border-dark-red hover:border-light-red dark:hover:border-dark-red hover:bg-light-redBack dark:hover:bg-dark-redBack text-light-red dark:text-dark-red focus:shadow-light-red dark:focus:shadow-dark-red">Oui</Button></AlertDialogAction>
|
|
</div>
|
|
</AlertDialogContent>
|
|
</AlertDialogPortal>
|
|
</AlertDialogRoot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template> |