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

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

@ -9,11 +9,13 @@ import { Query } from 'node-appwrite';
export default async function MediaLibraryPage({ export default async function MediaLibraryPage({
searchParams searchParams
}: { }: {
searchParams: { q?: string, page?: string } searchParams: Promise<{ q?: string, page?: string, tipo?: string, orden?: string }>
}) { }) {
const sParams = await searchParams; const sParams = await searchParams;
const q = sParams.q || ''; const q = sParams.q || '';
const page = Number(sParams.page) || 1; const page = Number(sParams.page) || 1;
const tipo = sParams.tipo || '';
const orden = sParams.orden || 'desc';
const limit = 12; const limit = 12;
const offset = (page - 1) * limit; const offset = (page - 1) * limit;
@ -26,13 +28,17 @@ export default async function MediaLibraryPage({
const queries = [ const queries = [
Query.limit(limit), Query.limit(limit),
Query.offset(offset), Query.offset(offset),
Query.orderDesc('$createdAt') orden === 'asc' ? Query.orderAsc('$createdAt') : Query.orderDesc('$createdAt')
]; ];
if (q) { if (q) {
queries.push(Query.contains('titulo', q)); queries.push(Query.contains('titulo', q));
} }
if (tipo === 'imagen' || tipo === 'video') {
queries.push(Query.equal('tipo', tipo));
}
const response = await sessionClient.databases.listDocuments( const response = await sessionClient.databases.listDocuments(
APPWRITE_ALMEIRA_CONFIG.databaseId, APPWRITE_ALMEIRA_CONFIG.databaseId,
'media', 'media',
@ -65,16 +71,28 @@ export default async function MediaLibraryPage({
</p> </p>
</div> </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">
<input <div className="relative flex-1">
type="text" <input
name="q" type="text"
defaultValue={q} name="q"
placeholder="Buscar en la biblioteca..." defaultValue={q}
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> </button>
</form> </form>
@ -140,21 +158,33 @@ export default async function MediaLibraryPage({
{/* Pagination */} {/* Pagination */}
{total > limit && ( {total > limit && (
<div className="flex justify-center items-center gap-4 mt-8"> <div className="flex justify-center items-center gap-4 mt-8">
<Link {(() => {
href={`/dashboard/media?page=${page - 1}${q ? `&q=${q}` : ''}`} const currentParams = new URLSearchParams();
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'}`} if (q) currentParams.set('q', q);
> if (tipo) currentParams.set('tipo', tipo);
ANTERIOR if (orden !== 'desc') currentParams.set('orden', orden);
</Link> const baseQuery = currentParams.toString() ? `&${currentParams.toString()}` : '';
<span className="text-slate-400 font-bold tracking-widest text-xs uppercase">
Página {page} de {Math.ceil(total / limit)} return (
</span> <>
<Link <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'}`} 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'}`}
> >
SIGUIENTE ANTERIOR
</Link> </Link>
<span className="text-slate-400 font-bold tracking-widest text-xs uppercase">
Página {page} de {Math.ceil(total / limit)}
</span>
<Link
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> </div>
)} )}
</> </>