docs: clarify multi-word search in UI and apply AND logic to column name filters

This commit is contained in:
Christian Vidal Wolf
2026-04-24 12:23:48 +02:00
parent 97fe06eedd
commit 6a258c3fb6
+13 -4
View File
@@ -335,9 +335,15 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
} }
// Column filters // Column filters
// Column-specific name filter - Multi-word AND support
if (nameColFilter) { if (nameColFilter) {
const s = nameColFilter.toLowerCase(); const terms = nameColFilter.toLowerCase().split(/\s+/).filter(Boolean);
result = result.filter(r => String(r.row[COLUMNS.ARTICLE_NAME] || '').toLowerCase().includes(s)); if (terms.length > 0) {
result = result.filter(r => {
const name = String(r.row[COLUMNS.ARTICLE_NAME] || '').toLowerCase();
return terms.every(term => name.includes(term));
});
}
} }
if (lineMultiFilter.length > 0) { if (lineMultiFilter.length > 0) {
result = result.filter(r => lineMultiFilter.includes(String(r.row[COLUMNS.LINE] || ''))); result = result.filter(r => lineMultiFilter.includes(String(r.row[COLUMNS.LINE] || '')));
@@ -744,7 +750,7 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
<div className="relative"> <div className="relative">
<input <input
type="text" type="text"
placeholder="Search SKU or Name..." placeholder="Search SKU or Name (multiple words supported)..."
value={search} value={search}
onChange={e => { onChange={e => {
setSearch(e.target.value); setSearch(e.target.value);
@@ -1611,12 +1617,15 @@ function TextFilterPopover({ value, onChange, onClose }: {
<Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-500" /> <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-500" />
<input <input
type="text" type="text"
placeholder="Search article name…" placeholder="Search (multiple words supported)..."
value={value} value={value}
onChange={e => onChange(e.target.value)} onChange={e => onChange(e.target.value)}
autoFocus autoFocus
className="w-full bg-slate-900 border border-slate-700 rounded p-1.5 pl-8 text-xs text-white focus:outline-none focus:border-blue-500" className="w-full bg-slate-900 border border-slate-700 rounded p-1.5 pl-8 text-xs text-white focus:outline-none focus:border-blue-500"
/> />
<div className="mt-1 text-[9px] text-slate-500 italic px-1">
Use spaces to search multiple terms (AND logic)
</div>
</div> </div>
<div className="flex items-center justify-between pt-1 border-t border-slate-700"> <div className="flex items-center justify-between pt-1 border-t border-slate-700">
<button onClick={() => { onChange(''); onClose(); }} className="text-[10px] font-medium text-slate-400 hover:text-white transition-colors">Clear</button> <button onClick={() => { onChange(''); onClose(); }} className="text-[10px] font-medium text-slate-400 hover:text-white transition-colors">Clear</button>