Cardoza_Construction/TasGrid
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

added saved filters

Browse Source
This commit is contained in:
Timothy Cardoza
2026-02-10 17:58:04 -06:00
parent bf12c6f814
commit 25403ecaf0
2 changed files with 184 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FilterBar.tsx
+107 -2
View File
@@ -1,6 +1,6 @@
import { type Component, createSignal, For, Show } from "solid-js";
import { Search, X, Hash, ArrowUpCircle, Clock, Minus } from "lucide-solid";
import { store, setFilter, clearFilter } from "@/store";
import { Search, X, Hash, ArrowUpCircle, Clock, Minus, Save, Trash2, Bookmark } from "lucide-solid";
import { store, setFilter, clearFilter, saveFilterTemplate, applyFilterTemplate, removeFilterTemplate } from "@/store";
import { Button } from "./ui/button";
import { cn } from "@/lib/utils";
import { Badge } from "./ui/badge";
@@ -12,6 +12,8 @@ import { getThemeAdjustedColor } from "@/lib/colors";
export const FilterBar: Component = () => {
const { resolvedTheme } = useTheme();
const [isOpen, setIsOpen] = createSignal(false);
const [newTemplateName, setNewTemplateName] = createSignal("");
const [isSaving, setIsSaving] = createSignal(false);
const hasActiveFilters = () => {
const f = store.filter;
@@ -251,6 +253,109 @@ export const FilterBar: Component = () => {
</div>
</div>
</div>
{/* Filter Templates Section */}
<div class="px-4 pb-4 pt-4 border-t border-border/50 space-y-4 bg-muted/5">
<div class="flex items-center justify-between ml-1">
<label class="text-[10px] font-black uppercase tracking-widest text-muted-foreground flex items-center gap-2">
<Bookmark size={12} class="text-primary" />
Saved Filters
</label>
<Show when={!isSaving() && hasActiveFilters()}>
<button
onClick={() => setIsSaving(true)}
class="text-[9px] font-bold uppercase tracking-wider text-primary hover:underline flex items-center gap-1"
>
<Save size={10} />
Save Current
</button>
</Show>
</div>
<Show when={isSaving()}>
<div class="flex items-center gap-2 animate-in fade-in slide-in-from-top-1">
<input
type="text"
placeholder="Template name..."
value={newTemplateName()}
onInput={(e) => setNewTemplateName(e.currentTarget.value)}
class="flex-1 bg-muted/30 border border-primary/20 rounded-lg px-3 py-1.5 text-xs outline-none focus:ring-1 focus:ring-primary/30"
onKeyDown={(e) => {
if (e.key === 'Enter') {
if (newTemplateName().trim()) {
saveFilterTemplate(newTemplateName().trim());
setNewTemplateName("");
setIsSaving(false);
}
} else if (e.key === 'Escape') {
setIsSaving(false);
}
}}
/>
<Button
size="sm"
class="h-8 px-3"
disabled={!newTemplateName().trim()}
onClick={() => {
saveFilterTemplate(newTemplateName().trim());
setNewTemplateName("");
setIsSaving(false);
}}
>
Save
</Button>
<Button
variant="ghost"
size="icon"
class="h-8 w-8"
onClick={() => setIsSaving(false)}
>
<X size={14} />
</Button>
</div>
</Show>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
<For each={store.filterTemplates} fallback={
<div class="col-span-2 py-4 text-center border border-dashed border-border/40 rounded-xl bg-muted/5">
<p class="text-[10px] text-muted-foreground uppercase tracking-widest">No saved filters yet</p>
</div>
}>
{(template) => (
<div class="group flex items-center justify-between p-2 rounded-xl bg-muted/20 border border-border/30 hover:bg-muted/40 transition-all">
<button
class="flex-1 text-left px-1 min-w-0"
onClick={() => applyFilterTemplate(template.id)}
>
<div class="flex items-center gap-2">
<p class="text-[11px] font-bold text-foreground truncate">{template.name}</p>
<div class="flex gap-1 opacity-60 shrink-0">
<Show when={template.filter.query}>
<div class="w-1 h-1 rounded-full bg-primary" />
</Show>
<Show when={template.filter.tags.length > 0}>
<div class="w-1 h-1 rounded-full bg-indigo-500" />
</Show>
<Show when={template.filter.priorityMin > 1 || template.filter.priorityMax < 10}>
<div class="w-1 h-1 rounded-full bg-amber-500" />
</Show>
</div>
</div>
</button>
<button
class="opacity-0 group-hover:opacity-100 p-1.5 hover:bg-destructive/10 hover:text-destructive rounded-lg transition-all"
onClick={(e) => {
e.stopPropagation();
removeFilterTemplate(template.id);
}}
>
<Trash2 size={12} />
</button>
</div>
)}
</For>
</div>
</div>
</PopoverContent>
</Popover>
</div>