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

Improve search page, prevent double request to the backend

Browse Source
This commit is contained in:
bivashy
2025-07-12 22:45:46 +05:00
parent 10e0cb42a5
commit 4c031e3798
1 changed files with 15 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
pages/search.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { Icon } from '#components'
import { search, type Result } from '~/openapi/search' import { search, type Result } from '~/openapi/search'
const route = useRoute() const route = useRoute()
@ -14,6 +15,7 @@ watchEffect(async () => {
try { try {
isLoading.value = true isLoading.value = true
error.value = null error.value = null
console.log("SEARCHING")
const response = await search({ title: searchQuery.value }) const response = await search({ title: searchQuery.value })
results.value = response.data.results || [] results.value = response.data.results || []
} catch (err) { } catch (err) {
@ -22,6 +24,8 @@ watchEffect(async () => {
} finally { } finally {
isLoading.value = false isLoading.value = false
} }
}, {
flush: 'post'
}) })
</script> </script>
@ -39,16 +43,19 @@ watchEffect(async () => {
class="grid grid-cols-[repeat(auto-fill,16rem)] justify-around gap-8 grid-flow-row"> class="grid grid-cols-[repeat(auto-fill,16rem)] justify-around gap-8 grid-flow-row">
<div v-for="item in results" :key="item.id" class="flex w-[16rem]"> <div v-for="item in results" :key="item.id" class="flex w-[16rem]">
<NuxtLink :to="`/anime/${item.id}`" class="w-full"> <NuxtLink :to="`/anime/${item.id}`" class="w-full">
<div v-if="item.material_data?.anime_poster_url" :style="{ 'background-image': 'url('+item.material_data.anime_poster_url+')' }" <div v-if="item.material_data?.anime_poster_url"
:alt="item.title" class="flex items-end justify-end p-2 rounded-md bg-cover bg-center bg-no-repeat h-96"> :style="{ 'background-image': 'url(' + item.material_data.anime_poster_url + ')' }"
<Button class="backdrop-blur-none bg-primary/80">2 episodes</Button> :alt="item.title"
class="flex items-end justify-end p-2 rounded-md bg-cover bg-center bg-no-repeat h-96">
<div
class="flex items-center px-2 py-0.5 backdrop-blur-none bg-primary/75 text-background/80 rounded-sm text-xs">
<Icon name="gg:play-list" />
{{ item.material_data?.episodes_total }}
episode
</div>
</div> </div>
<div> <div>
<h3 className="text-2xl font-semibold tracking-tight">{{ item.title }}</h3> <h3 className="text-xl 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> </div>
</NuxtLink> </NuxtLink>
</div> </div>