Implement very basic search
This commit is contained in:
@ -2,20 +2,24 @@ import tailwindcss from '@tailwindcss/vite'
|
|||||||
|
|
||||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||||
export default defineNuxtConfig({
|
export default defineNuxtConfig({
|
||||||
compatibilityDate: '2025-05-15',
|
compatibilityDate: '2025-05-15',
|
||||||
devtools: { enabled: true },
|
devtools: { enabled: true },
|
||||||
modules: ['@nuxt/eslint', '@nuxt/image', 'shadcn-nuxt', '@nuxtjs/color-mode'],
|
modules: ['@nuxt/eslint', '@nuxt/image', 'shadcn-nuxt', '@nuxtjs/color-mode', '@nuxt/icon'],
|
||||||
colorMode: {
|
colorMode: {
|
||||||
classSuffix: ''
|
classSuffix: ''
|
||||||
},
|
},
|
||||||
css: ['~/assets/css/tailwind.css'],
|
css: ['~/assets/css/tailwind.css'],
|
||||||
vite: {
|
vite: {
|
||||||
plugins: [
|
plugins: [
|
||||||
tailwindcss(),
|
tailwindcss(),
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
shadcn: {
|
shadcn: {
|
||||||
prefix: '',
|
prefix: '',
|
||||||
componentDir: './components/ui'
|
componentDir: './components/ui'
|
||||||
}
|
},
|
||||||
|
icon: {
|
||||||
|
mode: 'css',
|
||||||
|
cssLayer: 'base'
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
365
openapi/search.json
Normal file
365
openapi/search.json
Normal file
@ -0,0 +1,365 @@
|
|||||||
|
{
|
||||||
|
"openapi": "3.1.0",
|
||||||
|
"info": {
|
||||||
|
"title": "OpenAPI definition",
|
||||||
|
"version": "v0"
|
||||||
|
},
|
||||||
|
"servers": [
|
||||||
|
{
|
||||||
|
"url": "http://localhost:8080",
|
||||||
|
"description": "Generated server url"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"paths": {
|
||||||
|
"/search": {
|
||||||
|
"get": {
|
||||||
|
"tags": [
|
||||||
|
"search-controller"
|
||||||
|
],
|
||||||
|
"operationId": "search",
|
||||||
|
"parameters": [
|
||||||
|
{
|
||||||
|
"name": "title",
|
||||||
|
"in": "query",
|
||||||
|
"required": true,
|
||||||
|
"schema": {
|
||||||
|
"type": "string"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"responses": {
|
||||||
|
"200": {
|
||||||
|
"description": "OK",
|
||||||
|
"content": {
|
||||||
|
"*/*": {
|
||||||
|
"schema": {
|
||||||
|
"$ref": "#/components/schemas/KodikResponse"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"components": {
|
||||||
|
"schemas": {
|
||||||
|
"KodikResponse": {
|
||||||
|
"type": "object",
|
||||||
|
"properties": {
|
||||||
|
"total": {
|
||||||
|
"type": "integer",
|
||||||
|
"format": "int32"
|
||||||
|
},
|
||||||
|
"results": {
|
||||||
|
"type": "array",
|
||||||
|
"items": {
|
||||||
|
"$ref": "#/components/schemas/Result"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"MaterialData": {
|
||||||
|
"type": "object",
|
||||||
|
"properties": {
|
||||||
|
"title": {
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"year": {
|
||||||
|
"type": "integer",
|
||||||
|
"format": "int32"
|
||||||
|
},
|
||||||
|
"description": {
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"screenshots": {
|
||||||
|
"type": "array",
|
||||||
|
"items": {
|
||||||
|
"type": "string"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"duration": {
|
||||||
|
"type": "integer",
|
||||||
|
"format": "int32"
|
||||||
|
},
|
||||||
|
"countries": {
|
||||||
|
"type": "array",
|
||||||
|
"items": {
|
||||||
|
"type": "string"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"genres": {
|
||||||
|
"type": "array",
|
||||||
|
"items": {
|
||||||
|
"type": "string"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"actors": {
|
||||||
|
"type": "array",
|
||||||
|
"items": {
|
||||||
|
"type": "string"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"directors": {
|
||||||
|
"type": "array",
|
||||||
|
"items": {
|
||||||
|
"type": "string"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"producers": {
|
||||||
|
"type": "array",
|
||||||
|
"items": {
|
||||||
|
"type": "string"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"writers": {
|
||||||
|
"type": "array",
|
||||||
|
"items": {
|
||||||
|
"type": "string"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"composers": {
|
||||||
|
"type": "array",
|
||||||
|
"items": {
|
||||||
|
"type": "string"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"editors": {
|
||||||
|
"type": "array",
|
||||||
|
"items": {
|
||||||
|
"type": "string"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"designers": {
|
||||||
|
"type": "array",
|
||||||
|
"items": {
|
||||||
|
"type": "string"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"operators": {
|
||||||
|
"type": "array",
|
||||||
|
"items": {
|
||||||
|
"type": "string"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"anime_title": {
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"title_en": {
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"other_titles": {
|
||||||
|
"type": "array",
|
||||||
|
"items": {
|
||||||
|
"type": "string"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"other_titles_en": {
|
||||||
|
"type": "array",
|
||||||
|
"items": {
|
||||||
|
"type": "string"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"other_titles_jp": {
|
||||||
|
"type": "array",
|
||||||
|
"items": {
|
||||||
|
"type": "string"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"anime_license_name": {
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"anime_licensed_by": {
|
||||||
|
"type": "array",
|
||||||
|
"items": {
|
||||||
|
"type": "string"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"anime_kind": {
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"all_status": {
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"anime_status": {
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"anime_description": {
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"poster_url": {
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"anime_poster_url": {
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"all_genres": {
|
||||||
|
"type": "array",
|
||||||
|
"items": {
|
||||||
|
"type": "string"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"anime_genres": {
|
||||||
|
"type": "array",
|
||||||
|
"items": {
|
||||||
|
"type": "string"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"anime_studios": {
|
||||||
|
"type": "array",
|
||||||
|
"items": {
|
||||||
|
"type": "string"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"kinopoisk_rating": {
|
||||||
|
"type": "number",
|
||||||
|
"format": "double"
|
||||||
|
},
|
||||||
|
"kinopoisk_votes": {
|
||||||
|
"type": "integer",
|
||||||
|
"format": "int32"
|
||||||
|
},
|
||||||
|
"imdb_rating": {
|
||||||
|
"type": "number",
|
||||||
|
"format": "double"
|
||||||
|
},
|
||||||
|
"imdb_votes": {
|
||||||
|
"type": "integer",
|
||||||
|
"format": "int32"
|
||||||
|
},
|
||||||
|
"shikimori_rating": {
|
||||||
|
"type": "number",
|
||||||
|
"format": "double"
|
||||||
|
},
|
||||||
|
"shikimori_votes": {
|
||||||
|
"type": "integer",
|
||||||
|
"format": "int32"
|
||||||
|
},
|
||||||
|
"premiere_world": {
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"aired_at": {
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"released_at": {
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"rating_mpaa": {
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"minimal_age": {
|
||||||
|
"type": "integer",
|
||||||
|
"format": "int32"
|
||||||
|
},
|
||||||
|
"episodes_total": {
|
||||||
|
"type": "integer",
|
||||||
|
"format": "int32"
|
||||||
|
},
|
||||||
|
"episodes_aired": {
|
||||||
|
"type": "integer",
|
||||||
|
"format": "int32"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"Result": {
|
||||||
|
"type": "object",
|
||||||
|
"properties": {
|
||||||
|
"id": {
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"type": {
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"link": {
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"title": {
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"translation": {
|
||||||
|
"$ref": "#/components/schemas/Translation"
|
||||||
|
},
|
||||||
|
"year": {
|
||||||
|
"type": "integer",
|
||||||
|
"format": "int32"
|
||||||
|
},
|
||||||
|
"quality": {
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"camrip": {
|
||||||
|
"type": "boolean"
|
||||||
|
},
|
||||||
|
"lgbt": {
|
||||||
|
"type": "boolean"
|
||||||
|
},
|
||||||
|
"screenshots": {
|
||||||
|
"type": "array",
|
||||||
|
"items": {
|
||||||
|
"type": "string"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"title_orig": {
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"other_title": {
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"last_season": {
|
||||||
|
"type": "integer",
|
||||||
|
"format": "int32"
|
||||||
|
},
|
||||||
|
"last_episode": {
|
||||||
|
"type": "integer",
|
||||||
|
"format": "int32"
|
||||||
|
},
|
||||||
|
"episodes_count": {
|
||||||
|
"type": "integer",
|
||||||
|
"format": "int32"
|
||||||
|
},
|
||||||
|
"kinopoisk_id": {
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"imdb_id": {
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"worldart_link": {
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"shikimori_id": {
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"blocked_countries": {
|
||||||
|
"type": "array",
|
||||||
|
"items": {
|
||||||
|
"type": "string"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"created_at": {
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"updated_at": {
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"material_data": {
|
||||||
|
"$ref": "#/components/schemas/MaterialData"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"Translation": {
|
||||||
|
"type": "object",
|
||||||
|
"properties": {
|
||||||
|
"id": {
|
||||||
|
"type": "integer",
|
||||||
|
"format": "int32"
|
||||||
|
},
|
||||||
|
"title": {
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"type": {
|
||||||
|
"type": "string"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
111
openapi/search.ts
Normal file
111
openapi/search.ts
Normal file
@ -0,0 +1,111 @@
|
|||||||
|
/**
|
||||||
|
* Generated by orval v7.10.0 🍺
|
||||||
|
* Do not edit manually.
|
||||||
|
* OpenAPI definition
|
||||||
|
* OpenAPI spec version: v0
|
||||||
|
*/
|
||||||
|
import axios from 'axios';
|
||||||
|
import type {
|
||||||
|
AxiosRequestConfig,
|
||||||
|
AxiosResponse
|
||||||
|
} from 'axios';
|
||||||
|
|
||||||
|
export interface KodikResponse {
|
||||||
|
total?: number;
|
||||||
|
results?: Result[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface MaterialData {
|
||||||
|
title?: string;
|
||||||
|
year?: number;
|
||||||
|
description?: string;
|
||||||
|
screenshots?: string[];
|
||||||
|
duration?: number;
|
||||||
|
countries?: string[];
|
||||||
|
genres?: string[];
|
||||||
|
actors?: string[];
|
||||||
|
directors?: string[];
|
||||||
|
producers?: string[];
|
||||||
|
writers?: string[];
|
||||||
|
composers?: string[];
|
||||||
|
editors?: string[];
|
||||||
|
designers?: string[];
|
||||||
|
operators?: string[];
|
||||||
|
anime_title?: string;
|
||||||
|
title_en?: string;
|
||||||
|
other_titles?: string[];
|
||||||
|
other_titles_en?: string[];
|
||||||
|
other_titles_jp?: string[];
|
||||||
|
anime_license_name?: string;
|
||||||
|
anime_licensed_by?: string[];
|
||||||
|
anime_kind?: string;
|
||||||
|
all_status?: string;
|
||||||
|
anime_status?: string;
|
||||||
|
anime_description?: string;
|
||||||
|
poster_url?: string;
|
||||||
|
anime_poster_url?: string;
|
||||||
|
all_genres?: string[];
|
||||||
|
anime_genres?: string[];
|
||||||
|
anime_studios?: string[];
|
||||||
|
kinopoisk_rating?: number;
|
||||||
|
kinopoisk_votes?: number;
|
||||||
|
imdb_rating?: number;
|
||||||
|
imdb_votes?: number;
|
||||||
|
shikimori_rating?: number;
|
||||||
|
shikimori_votes?: number;
|
||||||
|
premiere_world?: string;
|
||||||
|
aired_at?: string;
|
||||||
|
released_at?: string;
|
||||||
|
rating_mpaa?: string;
|
||||||
|
minimal_age?: number;
|
||||||
|
episodes_total?: number;
|
||||||
|
episodes_aired?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Result {
|
||||||
|
id?: string;
|
||||||
|
type?: string;
|
||||||
|
link?: string;
|
||||||
|
title?: string;
|
||||||
|
translation?: Translation;
|
||||||
|
year?: number;
|
||||||
|
quality?: string;
|
||||||
|
camrip?: boolean;
|
||||||
|
lgbt?: boolean;
|
||||||
|
screenshots?: string[];
|
||||||
|
title_orig?: string;
|
||||||
|
other_title?: string;
|
||||||
|
last_season?: number;
|
||||||
|
last_episode?: number;
|
||||||
|
episodes_count?: number;
|
||||||
|
kinopoisk_id?: string;
|
||||||
|
imdb_id?: string;
|
||||||
|
worldart_link?: string;
|
||||||
|
shikimori_id?: string;
|
||||||
|
blocked_countries?: string[];
|
||||||
|
created_at?: string;
|
||||||
|
updated_at?: string;
|
||||||
|
material_data?: MaterialData;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Translation {
|
||||||
|
id?: number;
|
||||||
|
title?: string;
|
||||||
|
type?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type SearchParams = {
|
||||||
|
title: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const search = <TData = AxiosResponse<KodikResponse>>(
|
||||||
|
params: SearchParams, options?: AxiosRequestConfig
|
||||||
|
): Promise<TData> => {
|
||||||
|
return axios.get(
|
||||||
|
`http://localhost:8080/search`,{
|
||||||
|
...options,
|
||||||
|
params: {...params, ...options?.params},}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export type SearchResult = AxiosResponse<KodikResponse>
|
||||||
7
orval.config.js
Normal file
7
orval.config.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
export const search = {
|
||||||
|
input: './openapi/search.json',
|
||||||
|
output: {
|
||||||
|
target: './openapi/search.ts',
|
||||||
|
baseUrl: 'http://localhost:8080'
|
||||||
|
},
|
||||||
|
};
|
||||||
69
package.json
69
package.json
@ -1,36 +1,37 @@
|
|||||||
{
|
{
|
||||||
"name": "nuxt-app",
|
"name": "nuxt-app",
|
||||||
"private": true,
|
"private": true,
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "nuxt build",
|
"build": "nuxt build",
|
||||||
"dev": "nuxt dev",
|
"dev": "nuxt dev",
|
||||||
"generate": "nuxt generate",
|
"generate": "nuxt generate",
|
||||||
"preview": "nuxt preview",
|
"preview": "nuxt preview",
|
||||||
"postinstall": "nuxt prepare"
|
"postinstall": "nuxt prepare"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@nuxt/eslint": "1.4.1",
|
"@nuxt/eslint": "1.4.1",
|
||||||
"@nuxt/image": "1.10.0",
|
"@nuxt/image": "1.10.0",
|
||||||
"@tailwindcss/vite": "^4.1.7",
|
"@tailwindcss/vite": "^4.1.7",
|
||||||
"@vueuse/core": "^13.2.0",
|
"@vueuse/core": "^13.2.0",
|
||||||
"class-variance-authority": "^0.7.1",
|
"axios": "^1.10.0",
|
||||||
"clsx": "^2.1.1",
|
"class-variance-authority": "^0.7.1",
|
||||||
"eslint": "^9.0.0",
|
"clsx": "^2.1.1",
|
||||||
"lucide-vue-next": "^0.511.0",
|
"eslint": "^9.0.0",
|
||||||
"nuxt": "^3.17.4",
|
"lucide-vue-next": "^0.511.0",
|
||||||
"reka-ui": "^2.2.1",
|
"nuxt": "^3.17.4",
|
||||||
"shadcn-nuxt": "2.1.0",
|
"reka-ui": "^2.2.1",
|
||||||
"tailwind-merge": "^3.3.0",
|
"shadcn-nuxt": "2.1.0",
|
||||||
"tailwindcss": "^4.1.7",
|
"tailwind-merge": "^3.3.0",
|
||||||
"tw-animate-css": "^1.3.0",
|
"tailwindcss": "^4.1.7",
|
||||||
"vue": "^3.5.14",
|
"tw-animate-css": "^1.3.0",
|
||||||
"vue-router": "^4.5.1",
|
"vue": "^3.5.14",
|
||||||
"vue-sonner": "^2.0.0"
|
"vue-router": "^4.5.1",
|
||||||
},
|
"vue-sonner": "^2.0.0"
|
||||||
"devDependencies": {
|
},
|
||||||
"@iconify-json/radix-icons": "^1.2.2",
|
"devDependencies": {
|
||||||
"@iconify/vue": "^5.0.0",
|
"@iconify-json/heroicons": "^1.2.2",
|
||||||
"@nuxtjs/color-mode": "^3.5.2"
|
"@nuxtjs/color-mode": "^3.5.2",
|
||||||
}
|
"orval": "^7.10.0"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
127
pages/index.vue
127
pages/index.vue
@ -3,86 +3,77 @@
|
|||||||
import kodikImage from "assets/img/kodik.png";
|
import kodikImage from "assets/img/kodik.png";
|
||||||
import shikimoriImage from "assets/img/shikimori.png";
|
import shikimoriImage from "assets/img/shikimori.png";
|
||||||
import {
|
import {
|
||||||
Select,
|
Select,
|
||||||
SelectContent,
|
SelectContent,
|
||||||
SelectGroup,
|
SelectGroup,
|
||||||
SelectItem,
|
SelectItem,
|
||||||
SelectLabel,
|
SelectLabel,
|
||||||
SelectTrigger,
|
SelectTrigger,
|
||||||
SelectValue
|
SelectValue
|
||||||
} from "~/components/ui/select";
|
} from "~/components/ui/select";
|
||||||
import {toast} from "vue-sonner";
|
import { toast } from "vue-sonner";
|
||||||
import {Toaster} from "~/components/ui/sonner";
|
import { Toaster } from "~/components/ui/sonner";
|
||||||
import {Navbar} from "~/components/ui/navbar";
|
import { Navbar } from "~/components/ui/navbar";
|
||||||
import 'vue-sonner/style.css'
|
import 'vue-sonner/style.css'
|
||||||
|
import { Icon } from "#components";
|
||||||
|
|
||||||
const searchProvider = ref('kodik')
|
const searchProvider = ref('kodik')
|
||||||
const displaySearchProvider = computed(() => {
|
const displaySearchProvider = computed(() => {
|
||||||
let label = '';
|
let label = '';
|
||||||
let image;
|
let image;
|
||||||
if (searchProvider.value === 'kodik') {
|
if (searchProvider.value === 'kodik') {
|
||||||
label = 'Kodik';
|
label = 'Kodik';
|
||||||
image = kodikImage;
|
image = kodikImage;
|
||||||
}
|
}
|
||||||
if (searchProvider.value === 'shikimori') {
|
if (searchProvider.value === 'shikimori') {
|
||||||
label = 'Shikimori';
|
label = 'Shikimori';
|
||||||
image = shikimoriImage;
|
image = shikimoriImage;
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
label,
|
label,
|
||||||
image
|
image
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
const search = defineModel<string>("")
|
const search = defineModel<string>("")
|
||||||
function querySearch() {
|
function querySearch() {
|
||||||
if (!search.value || search.value.trim() === "") {
|
if (!search.value || search.value.trim() === "") {
|
||||||
toast('Please enter a value');
|
toast('Please enter a value');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Toaster/>
|
<Toaster />
|
||||||
<Navbar/>
|
<Navbar />
|
||||||
<div class="bg-background h-lvh w-screen flex justify-center items-center gap-1">
|
<div class="bg-background h-lvh w-screen flex justify-center items-center gap-1">
|
||||||
<Select v-model="searchProvider">
|
<Select v-model="searchProvider">
|
||||||
<SelectTrigger>
|
<SelectTrigger>
|
||||||
<SelectValue placeholder="Select an provider">
|
<SelectValue placeholder="Select an provider">
|
||||||
<img
|
<img :src="displaySearchProvider.image" alt="" class="w-5 h-5 rounded border border-gray-300">
|
||||||
:src="displaySearchProvider.image"
|
<span>{{ displaySearchProvider.label }}</span>
|
||||||
alt=""
|
</SelectValue>
|
||||||
class="w-5 h-5 rounded border border-gray-300"
|
</SelectTrigger>
|
||||||
/>
|
<SelectContent>
|
||||||
<span>{{displaySearchProvider.label}}</span>
|
<SelectGroup>
|
||||||
</SelectValue>
|
<SelectLabel>Providers</SelectLabel>
|
||||||
</SelectTrigger>
|
<SelectItem value="kodik">
|
||||||
<SelectContent>
|
<img :src="kodikImage" alt="" class="w-5 h-5 rounded border border-gray-300">
|
||||||
<SelectGroup>
|
<span>Kodik</span>
|
||||||
<SelectLabel>Providers</SelectLabel>
|
</SelectItem>
|
||||||
<SelectItem value="kodik">
|
<SelectItem value="shikimori">
|
||||||
<img
|
<img :src="shikimoriImage" alt="" class="w-5 h-5 rounded border border-gray-300">
|
||||||
:src="kodikImage"
|
Shikimori
|
||||||
alt=""
|
</SelectItem>
|
||||||
class="w-5 h-5 rounded border border-gray-300"
|
</SelectGroup>
|
||||||
/>
|
</SelectContent>
|
||||||
<span>Kodik</span>
|
</Select>
|
||||||
</SelectItem>
|
<Input v-model="search" class="w-64" type="text" placeholder="Search anime..." />
|
||||||
<SelectItem value="shikimori">
|
<Button @click="querySearch">
|
||||||
<img
|
<Icon name="heroicons:magnifying-glass-16-solid" class="w-6 h-6" />
|
||||||
:src="shikimoriImage"
|
</Button>
|
||||||
alt=""
|
</div>
|
||||||
class="w-5 h-5 rounded border border-gray-300"
|
|
||||||
/>
|
|
||||||
Shikimori
|
|
||||||
</SelectItem>
|
|
||||||
</SelectGroup>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
<Input v-model="search" class="w-64" type="text" placeholder="Search anime..."/>
|
|
||||||
<Button @click="querySearch"><Icon icon="radix-icons:magnifying-glass" class="h-[1.2rem] w-[1.2rem]" /></Button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
123
pages/search.vue
123
pages/search.vue
@ -1,11 +1,132 @@
|
|||||||
|
<!-- pages/search.vue -->
|
||||||
<script setup lang="ts">
|
<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
|
||||||
|
|
||||||
|
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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div></div>
|
<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>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<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>
|
</style>
|
||||||
Reference in New Issue
Block a user