76 lines
1.9 KiB
Vue
76 lines
1.9 KiB
Vue
<template>
|
|
<div class="card">
|
|
<Carousel :value="decks" :numVisible="3" :numScroll="3">
|
|
<template #item="slotProps">
|
|
<div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4 w-96 h-auto">
|
|
<div class="mb-4">
|
|
<div class="relative mx-auto">
|
|
<img
|
|
:src="'https://upload.wikimedia.org/wikipedia/en/2/2b/Yugioh_Card_Back.jpg?20201122212343'"
|
|
class="w-full rounded"
|
|
alt="Deck"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-between ">
|
|
<p class="font-bold">
|
|
{{ slotProps.data.name }}
|
|
</p>
|
|
<Tag
|
|
value="[ARCHETYPE]"
|
|
/>
|
|
</div>
|
|
<div class="flex justify- items-center">
|
|
<SplitButton
|
|
label="View"
|
|
:model="deckMenuItems"
|
|
@click="viewDeck(slotProps.data.id)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</Carousel>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
|
|
import {type Deck, DeckService} from "../../api/openapi";
|
|
import {DeckServiceKey} from "../../main.ts";
|
|
import {inject, onMounted, ref, type Ref} from "vue";
|
|
import {useToast} from "primevue";
|
|
import {useRouter} from "vue-router";
|
|
|
|
const toast = useToast();
|
|
const router = useRouter();
|
|
const deckService: DeckService = inject(DeckServiceKey) as DeckService;
|
|
const decks: Ref<Deck[]> = ref([])
|
|
|
|
const deckMenuItems = [
|
|
{
|
|
label: 'Edit',
|
|
command: () => {
|
|
toast.add({
|
|
severity: 'info',
|
|
summary: 'Not Implemented',
|
|
detail: 'Deck Editing isn\'t implemented yet',
|
|
life: 3000
|
|
});
|
|
}
|
|
},
|
|
]
|
|
|
|
const viewDeck = (deckId: number) => {
|
|
router.push(`/decks/${deckId}`);
|
|
}
|
|
|
|
onMounted(async () => {
|
|
const decksResponse = await deckService.getDecks()
|
|
|
|
decks.value = decksResponse.data.content
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |