carlos/almeira-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(media): add filtering by type and sorting by creation date

Browse Source
This commit is contained in:
Carlos (Almeira) 2026-04-15 17:05:16 -05:00
parent 2ee9bd00df
commit 41735c5280
1 changed files with 57 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/app/dashboard/media/page.tsx
View File

@ -9,11 +9,13 @@ import { Query } from 'node-appwrite';
export default async function MediaLibraryPage({
searchParams
}: {
searchParams: { q?: string, page?: string }
searchParams: Promise<{ q?: string, page?: string, tipo?: string, orden?: string }>
}) {
const sParams = await searchParams;
const q = sParams.q || '';
const page = Number(sParams.page) || 1;
const tipo = sParams.tipo || '';
const orden = sParams.orden || 'desc';
const limit = 12;
const offset = (page - 1) * limit;
@ -26,13 +28,17 @@ export default async function MediaLibraryPage({
const queries = [
Query.limit(limit),
Query.offset(offset),
Query.orderDesc('$createdAt')
orden === 'asc' ? Query.orderAsc('$createdAt') : Query.orderDesc('$createdAt')
];
if (q) {
queries.push(Query.contains('titulo', q));
}
if (tipo === 'imagen' || tipo === 'video') {
queries.push(Query.equal('tipo', tipo));
}
const response = await sessionClient.databases.listDocuments(
APPWRITE_ALMEIRA_CONFIG.databaseId,
'media',
@ -65,16 +71,28 @@ export default async function MediaLibraryPage({
</p>
</div>
<form className="flex-1 max-w-md w-full relative group">
<form className="flex-1 w-full flex flex-col md:flex-row gap-2 relative group text-sm">
<div className="relative flex-1">
<input
type="text"
name="q"
defaultValue={q}
placeholder="Buscar en la biblioteca..."
className="w-full bg-slate-950 border border-slate-800 rounded-full px-6 py-3 text-slate-200 focus:outline-none focus:border-pink-500 transition-all font-medium placeholder:text-slate-600"
placeholder="Buscar titulo..."
className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-slate-200 focus:outline-none focus:border-pink-500 transition-all font-medium placeholder:text-slate-600"
/>
<button type="submit" className="absolute right-2 top-2 bg-slate-800 p-1.5 rounded-full hover:bg-slate-700 transition-colors text-slate-400">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
</div>
<select name="tipo" defaultValue={tipo} className="bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-slate-200 focus:outline-none focus:border-pink-500 transition-all font-medium appearance-none min-w-[140px] cursor-pointer">
<option value="">Cualquier tipo</option>
<option value="imagen">Sólo Imágenes</option>
<option value="video">Sólo Videos</option>
</select>
<select name="orden" defaultValue={orden} className="bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-slate-200 focus:outline-none focus:border-pink-500 transition-all font-medium appearance-none min-w-[180px] cursor-pointer">
<option value="desc">Más recientes primero</option>
<option value="asc">Más antiguos primero</option>
</select>
<button type="submit" className="bg-slate-800 px-6 py-3 rounded-xl hover:bg-slate-700 transition-colors text-slate-300 font-bold uppercase tracking-widest flex items-center justify-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
<span>Filtrar</span>
</button>
</form>
@ -140,8 +158,17 @@ export default async function MediaLibraryPage({
{/* Pagination */}
{total > limit && (
<div className="flex justify-center items-center gap-4 mt-8">
{(() => {
const currentParams = new URLSearchParams();
if (q) currentParams.set('q', q);
if (tipo) currentParams.set('tipo', tipo);
if (orden !== 'desc') currentParams.set('orden', orden);
const baseQuery = currentParams.toString() ? `&${currentParams.toString()}` : '';
return (
<>
<Link
href={`/dashboard/media?page=${page - 1}${q ? `&q=${q}` : ''}`}
href={`/dashboard/media?page=${page - 1}${baseQuery}`}
className={`px-6 py-2 rounded-full font-bold text-sm transition-all border border-slate-800 ${page <= 1 ? 'opacity-30 pointer-events-none bg-slate-900' : 'bg-slate-900 text-white hover:border-pink-500'}`}
>
ANTERIOR
@ -150,11 +177,14 @@ export default async function MediaLibraryPage({
Página {page} de {Math.ceil(total / limit)}
</span>
<Link
href={`/dashboard/media?page=${page + 1}${q ? `&q=${q}` : ''}`}
href={`/dashboard/media?page=${page + 1}${baseQuery}`}
className={`px-6 py-2 rounded-full font-bold text-sm transition-all border border-slate-800 ${page >= Math.ceil(total / limit) ? 'opacity-30 pointer-events-none bg-slate-900' : 'bg-slate-900 text-white hover:border-pink-500'}`}
>
SIGUIENTE
</Link>
</>
);
})()}
</div>
)}
</>