benito.rodriguez
/
Venta.De.Boletos.De.Un.Concierto
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add search functionality to Informacion component and update concert filtering logic

This commit is contained in:
SirRobert-1 2025-03-10 07:54:08 -06:00
parent bc2b125ac2
commit 1aa9f28cc6
2 changed files with 30 additions and 14 deletions
ventaboletos/src
components/vistas
Informacion.jsx
pages
index.js

24
ventaboletos/src/components/vistas/Informacion.jsx
View File

@ -14,21 +14,32 @@ import {
SelectValue, SelectValue,
} from "@/components/ui/select"; } from "@/components/ui/select";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
function Informacion() { function Informacion() {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [conciertos, setConciertos] = useState([]); const [conciertos, setConciertos] = useState([]);
const [filteredConciertos, setFilteredConciertos] = useState([]);
const [selectedConcierto, setSelectedConcierto] = useState(null); const [selectedConcierto, setSelectedConcierto] = useState(null);
const [tipoAsiento, setTipoAsiento] = useState([]); const [tipoAsiento, setTipoAsiento] = useState([]);
const [numeroAsiento, setNumeroAsiento] = useState([]); const [numeroAsiento, setNumeroAsiento] = useState([]);
const [selectedCategoria, setSelectedCategoria] = useState(""); const [selectedCategoria, setSelectedCategoria] = useState("");
const [asientoSeleccionado, setAsientoSeleccionado] = useState(""); const [asientoSeleccionado, setAsientoSeleccionado] = useState("");
const [searchTerm, setSearchTerm] = useState("");
useEffect(() => { useEffect(() => {
fetchConciertos(); fetchConciertos();
fetchAsientos(); fetchAsientos();
}, []); }, []);
useEffect(() => {
setFilteredConciertos(
conciertos.filter((concierto) =>
concierto.nombre.toLowerCase().includes(searchTerm.toLowerCase())
)
);
}, [searchTerm, conciertos]);
const fetchConciertos = async () => { const fetchConciertos = async () => {
let { data, error } = await supabaseClient.from("conciertos").select("*"); let { data, error } = await supabaseClient.from("conciertos").select("*");
if (error) { if (error) {
@ -86,7 +97,18 @@ function Informacion() {
return ( return (
<> <>
<div className="space-y-4"> <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 <div
key={concierto.id} key={concierto.id}
className="flex items-center gap-4 p-4 border rounded-lg" className="flex items-center gap-4 p-4 border rounded-lg"

20
ventaboletos/src/pages/index.js
View File

@ -19,13 +19,13 @@ export default function ConcertList() {
<div className="flex flex-col items-center w-[80%]"> <div className="flex flex-col items-center w-[80%]">
<Tabs defaultValue="account" className="w-full"> <Tabs defaultValue="account" className="w-full">
<div className="w-full flex"> <div className="w-full flex">
<TabsList className="grid w-full grid-cols-2"> <TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="info">Información</TabsTrigger> <TabsTrigger value="info">Información</TabsTrigger>
<TabsTrigger value="reportes">Reportes</TabsTrigger> <TabsTrigger value="reportes">Reportes</TabsTrigger>
</TabsList> </TabsList>
<Link href="/carrito"> <Link href="/carrito">
<img src="/carrito.svg" alt="carrito" className="h-10 w-10"/> <img src="/carrito.svg" alt="carrito" className="h-10 w-10" />
</Link> </Link>
</div> </div>
<TabsContent value="info"> <TabsContent value="info">
<Card> <Card>
@ -34,12 +34,6 @@ export default function ConcertList() {
<CardDescription></CardDescription> <CardDescription></CardDescription>
</CardHeader> </CardHeader>
<CardContent className="space-y-2"> <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 /> <Informacion />
</CardContent> </CardContent>
<CardFooter></CardFooter> <CardFooter></CardFooter>