59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import { useCallback } from 'react';
|
|
|
|
import { useRouter, useSearchParams, usePathname } from 'next/navigation';
|
|
|
|
import { ModuleSearch } from '@kit/module-builder/components';
|
|
|
|
import { encodeFilters, decodeFilters } from './_lib/filter-params';
|
|
|
|
interface FieldOption {
|
|
name: string;
|
|
display_name: string;
|
|
show_in_filter: boolean;
|
|
show_in_search: boolean;
|
|
}
|
|
|
|
interface ModuleSearchBarProps {
|
|
fields: FieldOption[];
|
|
}
|
|
|
|
export function ModuleSearchBar({ fields }: ModuleSearchBarProps) {
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
const searchParams = useSearchParams();
|
|
|
|
const currentSearch = searchParams.get('q') ?? '';
|
|
const currentFilters = decodeFilters(searchParams.get('f') ?? '');
|
|
|
|
const updateParams = useCallback(
|
|
(updates: Record<string, string | null>) => {
|
|
const params = new URLSearchParams(searchParams.toString());
|
|
// Reset to page 1 when search/filters change
|
|
params.delete('page');
|
|
for (const [key, value] of Object.entries(updates)) {
|
|
if (value === null || value === '') {
|
|
params.delete(key);
|
|
} else {
|
|
params.set(key, value);
|
|
}
|
|
}
|
|
router.push(`${pathname}?${params.toString()}`);
|
|
},
|
|
[router, pathname, searchParams],
|
|
);
|
|
|
|
return (
|
|
<ModuleSearch
|
|
fields={fields}
|
|
initialSearch={currentSearch}
|
|
initialFilters={currentFilters}
|
|
onSearch={(search) => updateParams({ q: search || null })}
|
|
onFilter={(filters) =>
|
|
updateParams({ f: filters.length > 0 ? encodeFilters(filters) : null })
|
|
}
|
|
/>
|
|
);
|
|
}
|