From 67e3eef364174e818efeec9f8d75ff371557cbef Mon Sep 17 00:00:00 2001 From: Oier Bravo Urtasun Date: Sun, 22 Jun 2025 07:46:43 +0200 Subject: [PATCH] search bar --- client/src/components/PoleElementsList.astro | 49 +++---- client/src/components/SearchBar.astro | 129 +++++++++++++++++++ client/src/config/strapi.ts | 9 -- client/src/lib/i18n.ts | 6 + client/src/pages/[lang]/elements.astro | 41 +++--- client/src/pages/elements.astro | 20 ++- client/src/views/ElementView.astro | 3 +- 7 files changed, 202 insertions(+), 55 deletions(-) create mode 100644 client/src/components/SearchBar.astro delete mode 100644 client/src/config/strapi.ts diff --git a/client/src/components/PoleElementsList.astro b/client/src/components/PoleElementsList.astro index 4501cf5b..8c5db4ab 100644 --- a/client/src/components/PoleElementsList.astro +++ b/client/src/components/PoleElementsList.astro @@ -1,8 +1,6 @@ --- // Import necessary components and utilities -import MarkdownComponent from "./MardownContent.astro"; -import { getStrapiMedia } from "../lib/strapi"; -import { getStrapiBaseUrl } from "../config/strapi"; +import { getStrapiMedia, getStrapiBaseUrl } from "../lib/strapi"; import { t, getLanguageFromPath, type SupportedLanguage } from "../lib/i18n"; import type { HTMLAttributes } from "astro/types"; @@ -19,32 +17,37 @@ const BASE_URL = getStrapiBaseUrl(); const currentLang = getLanguageFromPath(Astro.url.pathname); --- -
+
{ elements.length === 0 ? (

{t('elements.noElements', currentLang)}

) : ( - elements.map((poleElement) => ( - -
- {poleElement.mainImage.alternativeText} -
-

- {poleElement.name} -

-
-
- - )) + <> + {elements.map((poleElement) => ( + +
+ {poleElement.mainImage.alternativeText} +
+

+ {poleElement.name} +

+
+
+ + ))} + + ) }
\ No newline at end of file diff --git a/client/src/components/SearchBar.astro b/client/src/components/SearchBar.astro new file mode 100644 index 00000000..11879d23 --- /dev/null +++ b/client/src/components/SearchBar.astro @@ -0,0 +1,129 @@ +--- +// Import necessary utilities +import { t, getLanguageFromPath, type SupportedLanguage } from "../lib/i18n"; + +// Define the props interface +export interface Props { + placeholder?: string; + onSearch?: (query: string) => void; +} + +// Destructure props +const { placeholder, onSearch } = Astro.props; + +// Get current language +const currentLang = getLanguageFromPath(Astro.url.pathname); +const defaultPlaceholder = t('elements.searchPlaceholder', currentLang); + +// Get current search query from URL +const currentSearchQuery = Astro.url.searchParams.get('search') || ''; +--- + +
+
+ +
+ + + +
+ +
+
+ + \ No newline at end of file diff --git a/client/src/config/strapi.ts b/client/src/config/strapi.ts deleted file mode 100644 index e074935a..00000000 --- a/client/src/config/strapi.ts +++ /dev/null @@ -1,9 +0,0 @@ -// Global Strapi configuration -export const STRAPI_CONFIG = { - BASE_URL: (import.meta.env.STRAPI_URL as string) || (process.env.STRAPI_URL as string) || "http://localhost:1337", -} as const; - -// Helper function to get the base URL -export function getStrapiBaseUrl(): string { - return STRAPI_CONFIG.BASE_URL; -} \ No newline at end of file diff --git a/client/src/lib/i18n.ts b/client/src/lib/i18n.ts index 0db2c74f..0c3e4de2 100644 --- a/client/src/lib/i18n.ts +++ b/client/src/lib/i18n.ts @@ -31,6 +31,9 @@ const translations = { 'elements.view': 'Ver Elemento', 'elements.noElements': 'No se encontraron elementos', 'elements.loading': 'Cargando elementos...', + 'elements.search': 'Buscar elementos...', + 'elements.searchPlaceholder': 'Buscar por nombre...', + 'elements.noResults': 'No se encontraron elementos que coincidan con tu búsqueda', // Forms 'form.required': 'Este campo es obligatorio', @@ -68,6 +71,9 @@ const translations = { 'elements.view': 'View Element', 'elements.noElements': 'No elements found', 'elements.loading': 'Loading elements...', + 'elements.search': 'Search elements...', + 'elements.searchPlaceholder': 'Search by name...', + 'elements.noResults': 'No elements found matching your search', // Forms 'form.required': 'This field is required', diff --git a/client/src/pages/[lang]/elements.astro b/client/src/pages/[lang]/elements.astro index ca0fe5f5..8cdddc0d 100644 --- a/client/src/pages/[lang]/elements.astro +++ b/client/src/pages/[lang]/elements.astro @@ -2,7 +2,10 @@ // Import necessary components and utilities import Layout from "../../layouts/Layout.astro"; import PoleElementsList from "../../components/PoleElementsList.astro"; +import SearchBar from "../../components/SearchBar.astro"; import { t, isSupportedLanguage, type SupportedLanguage, DEFAULT_LANGUAGE } from "../../lib/i18n"; +import fetchApi from "../../lib/strapi"; +import type PoleElement from "../../interfaces/poleElement"; // Get language from URL parameter const { lang } = Astro.params; @@ -19,31 +22,31 @@ if (currentLang === DEFAULT_LANGUAGE) { return Astro.redirect('/elements'); } -// Mock data for demonstration - replace with actual data fetching -const elements = [ - { - id: 1, - name: "Basic Spin", - mainImage: { - url: "/placeholder-image.jpg", - alternativeText: "Basic Spin" - } - }, - { - id: 2, - name: "Fireman Spin", - mainImage: { - url: "/placeholder-image.jpg", - alternativeText: "Fireman Spin" - } - } -]; +// Get search query from URL parameters +const searchQuery = Astro.url.searchParams.get('search') || ''; + +// Build query parameters for API +const queryParams: Record = { + 'populate': '*' +}; + +// Add search filter if query exists +if (searchQuery.trim()) { + queryParams['filters[name][$containsi]'] = searchQuery.trim(); +} + +const elements = await fetchApi({ + endpoint: 'elements', + query: queryParams, + wrappedByKey: 'data', +}); ---

{t('elements.title', currentLang)}

+
diff --git a/client/src/pages/elements.astro b/client/src/pages/elements.astro index 4942629c..ed9dd09c 100644 --- a/client/src/pages/elements.astro +++ b/client/src/pages/elements.astro @@ -2,6 +2,7 @@ // Import necessary components and utilities import Layout from "../layouts/Layout.astro"; import PoleElementsList from "../components/PoleElementsList.astro"; +import SearchBar from "../components/SearchBar.astro"; import { t, DEFAULT_LANGUAGE } from "../lib/i18n"; import fetchApi from "../lib/strapi"; @@ -10,9 +11,23 @@ import type PoleElement from "../interfaces/poleElement"; // Use Spanish as default language const currentLang = DEFAULT_LANGUAGE; +// Get search query from URL parameters +const searchQuery = Astro.url.searchParams.get('search') || ''; + +// Build query parameters for API +const queryParams: Record = { + 'populate': '*' +}; + +// Add search filter if query exists +if (searchQuery.trim()) { + queryParams['filters[name][$containsi]'] = searchQuery.trim(); +} + const strapiPoleElements = await fetchApi({ - endpoint: "elements?populate=*", // the content type to fetch - wrappedByKey: "data", // the key to unwrap the response + endpoint: "elements", + query: queryParams, + wrappedByKey: "data", }); --- @@ -22,6 +37,7 @@ const strapiPoleElements = await fetchApi({

{t("elements.title", currentLang)}

+