anyame/anyame-frontend-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP Implement search and watch prototype

Browse Source
This commit is contained in:
bivashy
2025-06-23 00:53:12 +05:00
parent 2ca6a63e39
commit ef68e4a84d
22 changed files with 737 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
pages/search.vue
View File

@ -1,132 +1,58 @@
<!-- pages/search.vue -->
<script setup lang="ts">
import { search, type Result } from '~/openapi/search'
// Define route query params
const route = useRoute()
const searchQuery = ref(route.query.title as string || '')
// Search results state
const results = ref<Result[]>([])
const isLoading = ref(false)
const error = ref<unknown>(null)
// Perform search when query changes
watchEffect(async () => {
if (!searchQuery.value) return
if (!searchQuery.value) return
try {
isLoading.value = true
error.value = null
const response = await search({ title: searchQuery.value })
results.value = response.data.results || []
} catch (err) {
error.value = err
console.error('Search failed:', err)
} finally {
isLoading.value = false
}
try {
isLoading.value = true
error.value = null
const response = await search({ title: searchQuery.value })
results.value = response.data.results || []
} catch (err) {
error.value = err
console.error('Search failed:', err)
} finally {
isLoading.value = false
}
})
</script>
<template>
<div class="search-page">
<div class="search-box">
<input v-model="searchQuery" type="text" placeholder="Search anime..."
@keyup.enter="navigateTo({ path: '/search', query: { title: searchQuery } })">
</div>
<!-- Loading State -->
<div v-if="isLoading" class="loading">
Loading results...
</div>
<!-- Error State -->
<div v-if="error" class="error">
Error loading results: {{ error.message }}
</div>
<!-- Results List -->
<div v-if="results.length > 0" class="results-grid">
<div v-for="item in results" :key="item.id" class="result-card">
<NuxtLink :to="`/anime/${item.id}`">
<img v-if="item.material_data?.anime_poster_url" :src="item.material_data.anime_poster_url"
:alt="item.title" class="poster">
<div class="details">
<h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">{{ item.title }}</h3>
<p v-if="item.material_data?.year">Year: {{ item.material_data.year }}</p>
<p v-if="item.material_data?.anime_kind">Type: {{ item.material_data.anime_kind }}</p>
<p v-if="item.material_data?.episodes_total">Episodes: {{ item.material_data.episodes_total }}
</p>
</div>
</NuxtLink>
</div>
</div>
<!-- No Results -->
<div v-if="!isLoading && !error && results.length === 0 && searchQuery" class="no-results">
No results found for "{{ searchQuery }}"
</div>
<div>
<div v-if="isLoading">
Loading results...
</div>
<div v-if="error">
Error loading results: {{ error }}
</div>
<div v-if="results.length > 0" class="grid grid-cols-[repeat(auto-fill,32rem)] justify-around gap-8 grid-flow-row">
<div v-for="item in results" :key="item.id" class="flex w-[32rem]">
<NuxtLink :to="`/anime/${item.id}`">
<img v-if="item.material_data?.anime_poster_url" :src="item.material_data.anime_poster_url" :alt="item.title"
class="rounded-md">
<div>
<h3 className="text-2xl font-semibold tracking-tight">{{ item.title }}</h3>
<p v-if="item.material_data?.year">Year: {{ item.material_data.year }}</p>
<p v-if="item.material_data?.anime_kind">Type: {{ item.material_data.anime_kind }}</p>
<p v-if="item.material_data?.episodes_total">Episodes: {{ item.material_data.episodes_total }}
</p>
</div>
</NuxtLink>
</div>
</div>
<div v-if="!isLoading && !error && results.length === 0 && searchQuery">
No results found for "{{ searchQuery }}"
</div>
</div>
</template>
<style scoped>
.search-page {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.search-box {
margin-bottom: 30px;
}
.search-box input {
width: 100%;
padding: 12px;
font-size: 16px;
border: 2px solid #ddd;
border-radius: 4px;
}
.results-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
.result-card {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.2s;
}
.result-card:hover {
transform: translateY(-5px);
}
.poster {
width: 100%;
height: 350px;
object-fit: cover;
}
.details {
padding: 15px;
}
.details p {
margin: 5px 0;
font-size: 14px;
color: #666;
}
.loading,
.no-results,
.error {
text-align: center;
padding: 40px;
font-size: 18px;
}
</style>