feat: universalize global media search across all selection components

This commit is contained in:
Carlos (Almeira) 2026-03-30 10:21:13 -05:00
parent 25e92d7ccd
commit 7bbaccfdb8

View File

@ -24,17 +24,23 @@ export const MediaPickerMini = ({ value, onChange, label }: MediaPickerMiniProps
} }
}, [isOpen]); }, [isOpen]);
const fetchMedia = async () => { const fetchMedia = async (search = '') => {
setIsLoading(true); setIsLoading(true);
try { try {
// We use the client-side databases instance for browsing media // We use the client-side databases instance for browsing media
const queries = [
Query.limit(20), // Standard limit for preview
Query.orderDesc('$createdAt')
];
if (search) {
queries.push(Query.contains('titulo', search));
}
const res = await databases.listDocuments( const res = await databases.listDocuments(
APPWRITE_ALMEIRA_CONFIG.databaseId, APPWRITE_ALMEIRA_CONFIG.databaseId,
'media', 'media',
[ queries
Query.limit(100),
Query.orderDesc('$createdAt')
]
); );
setMediaItems(res.documents); setMediaItems(res.documents);
} catch (error) { } catch (error) {
@ -44,13 +50,20 @@ export const MediaPickerMini = ({ value, onChange, label }: MediaPickerMiniProps
} }
}; };
// Debounced search
useEffect(() => {
if (!isOpen) return;
const timer = setTimeout(() => {
fetchMedia(searchTerm);
}, 500);
return () => clearTimeout(timer);
}, [searchTerm, isOpen]);
const getImageUrl = (fileId: string) => { const getImageUrl = (fileId: string) => {
return `${endpoint}/storage/buckets/media/files/${fileId}/view?project=${projectId}&width=200&height=200&gravity=center`; return `${endpoint}/storage/buckets/media/files/${fileId}/view?project=${projectId}&width=200&height=200&gravity=center`;
}; };
const filteredItems = mediaItems.filter(item => const filteredItems = mediaItems;
item.titulo.toLowerCase().includes(searchTerm.toLowerCase())
);
return ( return (
<div className="space-y-2"> <div className="space-y-2">