52 lines
1.6 KiB
Vue
52 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
useHead({ title: 'Wunschzettel' })
|
|
|
|
const search = ref('')
|
|
const sort = ref<WishlistSort>('title')
|
|
const sortItems = [
|
|
{ label: 'Author', value: 'author' },
|
|
{ label: 'Titel', value: 'title' }
|
|
]
|
|
|
|
const { books, total, error, status } = useWishlist(search, sort)
|
|
</script>
|
|
|
|
<template>
|
|
<UMain>
|
|
<UContainer class="py-8">
|
|
<div class="mb-8 flex flex-wrap items-center justify-between gap-3">
|
|
<h1 class="text-2xl font-semibold text-highlighted">
|
|
Huaqo's Wunschzettel
|
|
</h1>
|
|
<div class="flex w-full items-center gap-2 sm:w-auto">
|
|
<UInput
|
|
v-model="search"
|
|
icon="i-lucide-search"
|
|
placeholder="Title, author, ISBN or link"
|
|
class="flex-1 sm:w-72 sm:flex-none"
|
|
/>
|
|
<USelect v-model="sort" :items="sortItems" icon="i-lucide-arrow-down-a-z" class="w-32" />
|
|
</div>
|
|
</div>
|
|
|
|
<UAlert
|
|
v-if="error"
|
|
color="error"
|
|
variant="subtle"
|
|
icon="i-lucide-triangle-alert"
|
|
title="Couldn't load the wishlist"
|
|
:description="(error.data as { statusMessage?: string } | undefined)?.statusMessage || error.statusMessage || error.message"
|
|
class="mb-6"
|
|
/>
|
|
|
|
<div class="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
|
|
<WishlistCard v-for="book in books" :key="book.id" :book="book" />
|
|
</div>
|
|
|
|
<p v-if="!books.length && !error && status !== 'pending'" class="py-16 text-center text-muted">
|
|
{{ search ? 'No book matches your search.' : 'The wishlist is empty.' }}
|
|
</p>
|
|
</UContainer>
|
|
</UMain>
|
|
</template>
|