From 1aa9f28cc628065d69c1ecb2debeeb5f3462ebc6 Mon Sep 17 00:00:00 2001
From: SirRobert-1 <rviverosgonzalez@gmail.com>
Date: Mon, 10 Mar 2025 07:54:08 -0600
Subject: [PATCH] Add search functionality to Informacion component and update
concert filtering logic
---
.../src/components/vistas/Informacion.jsx | 24 ++++++++++++++++++-
ventaboletos/src/pages/index.js | 20 ++++++----------
2 files changed, 30 insertions(+), 14 deletions(-)
diff --git a/ventaboletos/src/components/vistas/Informacion.jsx b/ventaboletos/src/components/vistas/Informacion.jsx
index 95ca5d7..7d6d061 100644
--- a/ventaboletos/src/components/vistas/Informacion.jsx
+++ b/ventaboletos/src/components/vistas/Informacion.jsx
@@ -14,21 +14,32 @@ import {
SelectValue,
} from "@/components/ui/select";
import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
function Informacion() {
const [open, setOpen] = useState(false);
const [conciertos, setConciertos] = useState([]);
+ const [filteredConciertos, setFilteredConciertos] = useState([]);
const [selectedConcierto, setSelectedConcierto] = useState(null);
const [tipoAsiento, setTipoAsiento] = useState([]);
const [numeroAsiento, setNumeroAsiento] = useState([]);
const [selectedCategoria, setSelectedCategoria] = useState("");
const [asientoSeleccionado, setAsientoSeleccionado] = useState("");
+ const [searchTerm, setSearchTerm] = useState("");
useEffect(() => {
fetchConciertos();
fetchAsientos();
}, []);
+ useEffect(() => {
+ setFilteredConciertos(
+ conciertos.filter((concierto) =>
+ concierto.nombre.toLowerCase().includes(searchTerm.toLowerCase())
+ )
+ );
+ }, [searchTerm, conciertos]);
+
const fetchConciertos = async () => {
let { data, error } = await supabaseClient.from("conciertos").select("*");
if (error) {
@@ -86,7 +97,18 @@ function Informacion() {
return (
<>
<div className="space-y-4">
- {conciertos.map((concierto) => (
+ <div className="w-full flex items-end">
+ <div className="flex">
+ <Input
+ placeholder="Búsqueda por nombre"
+ className="w-60"
+ value={searchTerm}
+ onChange={(e) => setSearchTerm(e.target.value)}
+ />
+ <img src="/search.jpg" alt="search" className="h-7 w-7" />
+ </div>
+ </div>
+ {filteredConciertos.map((concierto) => (
<div
key={concierto.id}
className="flex items-center gap-4 p-4 border rounded-lg"
diff --git a/ventaboletos/src/pages/index.js b/ventaboletos/src/pages/index.js
index b1b4bb1..7c8948a 100644
--- a/ventaboletos/src/pages/index.js
+++ b/ventaboletos/src/pages/index.js
@@ -19,13 +19,13 @@ export default function ConcertList() {
<div className="flex flex-col items-center w-[80%]">
<Tabs defaultValue="account" className="w-full">
<div className="w-full flex">
- <TabsList className="grid w-full grid-cols-2">
- <TabsTrigger value="info">Información</TabsTrigger>
- <TabsTrigger value="reportes">Reportes</TabsTrigger>
- </TabsList>
- <Link href="/carrito">
- <img src="/carrito.svg" alt="carrito" className="h-10 w-10"/>
- </Link>
+ <TabsList className="grid w-full grid-cols-2">
+ <TabsTrigger value="info">Información</TabsTrigger>
+ <TabsTrigger value="reportes">Reportes</TabsTrigger>
+ </TabsList>
+ <Link href="/carrito">
+ <img src="/carrito.svg" alt="carrito" className="h-10 w-10" />
+ </Link>
</div>
<TabsContent value="info">
<Card>
@@ -34,12 +34,6 @@ export default function ConcertList() {
<CardDescription></CardDescription>
</CardHeader>
<CardContent className="space-y-2">
- <div className="w-full flex items-end">
- <div className="flex">
- <Input placeholder="Búsqueda por nombre" className="w-60"></Input>
- <img src="/search.jpg" alt="search" className="h-7 w-7"/>
- </div>
- </div>
<Informacion />
</CardContent>
<CardFooter></CardFooter>