130 lines
3.8 KiB
TypeScript
130 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { Bookmark, Plus, Trash2, Check } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface SavedFilter {
|
|
id: string;
|
|
name: string;
|
|
filters: Record<string, any>;
|
|
}
|
|
|
|
interface SavedFiltersProps {
|
|
currentFilters: Record<string, any>;
|
|
onLoad: (filters: Record<string, any>) => void;
|
|
className?: string;
|
|
}
|
|
|
|
export function SavedFilters({ currentFilters, onLoad, className }: SavedFiltersProps) {
|
|
const [saved, setSaved] = useState<SavedFilter[]>([]);
|
|
const [showSave, setShowSave] = useState(false);
|
|
const [filterName, setFilterName] = useState("");
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
const fetchSaved = async () => {
|
|
try {
|
|
const res = await fetch("/api/saved-filters");
|
|
if (res.ok) setSaved(await res.json());
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchSaved();
|
|
}, []);
|
|
|
|
const saveCurrent = async () => {
|
|
if (!filterName.trim()) return;
|
|
|
|
const res = await fetch("/api/saved-filters", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ name: filterName.trim(), filters: currentFilters }),
|
|
});
|
|
|
|
if (res.ok) {
|
|
setFilterName("");
|
|
setShowSave(false);
|
|
fetchSaved();
|
|
}
|
|
};
|
|
|
|
const deleteFilter = async (id: string) => {
|
|
await fetch(`/api/saved-filters/${id}`, { method: "DELETE" });
|
|
setSaved((prev) => prev.filter((f) => f.id !== id));
|
|
};
|
|
|
|
const hasActiveFilters = Object.values(currentFilters).some(
|
|
(v) => v !== undefined && v !== "" && v !== "any"
|
|
);
|
|
|
|
return (
|
|
<div className={cn("space-y-2", className)}>
|
|
<div className="flex items-center justify-between">
|
|
<span className="flex items-center gap-1.5 text-sm font-medium text-zinc-300">
|
|
<Bookmark className="h-4 w-4" />
|
|
Saved Filters
|
|
</span>
|
|
{hasActiveFilters && (
|
|
<button
|
|
onClick={() => setShowSave(!showSave)}
|
|
className="flex items-center gap-1 text-xs text-blue-400 hover:text-blue-300"
|
|
>
|
|
<Plus className="h-3 w-3" />
|
|
Save Current
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{showSave && (
|
|
<div className="flex gap-2">
|
|
<input
|
|
value={filterName}
|
|
onChange={(e) => setFilterName(e.target.value)}
|
|
placeholder="Filter name..."
|
|
className="flex-1 rounded-md border border-zinc-700 bg-zinc-800 px-2 py-1 text-sm"
|
|
onKeyDown={(e) => e.key === "Enter" && saveCurrent()}
|
|
/>
|
|
<button
|
|
onClick={saveCurrent}
|
|
disabled={!filterName.trim()}
|
|
className="rounded-md bg-blue-600 px-2 py-1 text-xs text-white hover:bg-blue-500 disabled:opacity-50"
|
|
>
|
|
Save
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{!loading && saved.length > 0 && (
|
|
<div className="space-y-1">
|
|
{saved.map((filter) => (
|
|
<div
|
|
key={filter.id}
|
|
className="group flex items-center justify-between rounded-md border border-zinc-800 px-2 py-1.5 hover:bg-zinc-800/50"
|
|
>
|
|
<button
|
|
onClick={() => onLoad(filter.filters)}
|
|
className="flex-1 text-left text-sm text-zinc-300 hover:text-zinc-100"
|
|
>
|
|
{filter.name}
|
|
</button>
|
|
<button
|
|
onClick={() => deleteFilter(filter.id)}
|
|
className="text-zinc-500 opacity-0 transition-opacity hover:text-red-400 group-hover:opacity-100"
|
|
>
|
|
<Trash2 className="h-3 w-3" />
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{!loading && saved.length === 0 && (
|
|
<p className="text-xs text-zinc-500">No saved filters yet</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|