christianV/Craze-Data-check
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/Craze-Data-check.git synced 2026-08-03 16:05:23 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: resolve column filter checkboxes not responding to clicks

Browse Source 
Replace label+hidden-input pattern in ColumnFilterPopover with direct
onClick on div — browsers don't reliably fire onChange for display:none
inputs activated via label click. Also adds missing columnFilters to
useMemo deps in ProductDescriptions and ArticleDetails, and restores
rowStatuses prop wiring in ProductDescriptions.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Christian Vidal Wolf
2026-04-08 19:49:48 +02:00
co-authored by Claude Sonnet 4.6
parent 71a4897f28
commit d3675bba0b
4 changed files with 29 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ProductDescriptions.tsx
+16 -5
View File
@@ -7,6 +7,7 @@ import { ColumnFilterPopover } from './ColumnFilterPopover';
interface ProductDescriptionsProps {
data: ExcelRow[];
onEdit: (index: number) => void;
rowStatuses: Record<string, string>;
}
type TabType = 'all' | 'missingLongDE' | 'missingLongEN' | 'missingLongAny' | 'missingShortDE' | 'missingShortEN' | 'missingShortAny' | 'complete' | 'incomplete';
@@ -14,7 +15,7 @@ type TabType = 'all' | 'missingLongDE' | 'missingLongEN' | 'missingLongAny' | 'm
// Description columns that should only have Present/Missing filters
const DESCRIPTION_COLUMNS = [COLUMNS.LONG_DE, COLUMNS.LONG_EN, COLUMNS.SHORT_DE, COLUMNS.SHORT_EN];
export function ProductDescriptions({ data, onEdit }: ProductDescriptionsProps) {
export function ProductDescriptions({ data, onEdit, rowStatuses }: ProductDescriptionsProps) {
const [activeTab, setActiveTab] = useState<TabType>('all');
const [search, setSearch] = useState('');
const [lineFilter, setLineFilter] = useState('');
@@ -91,7 +92,7 @@ export function ProductDescriptions({ data, onEdit }: ProductDescriptionsProps)
}
return result;
}, [data, activeTab, search, lineFilter, licenseFilter, sortCol, sortDesc]);
}, [data, activeTab, search, lineFilter, licenseFilter, columnFilters, sortCol, sortDesc]);
const paginatedData = useMemo(() => {
const start = (page - 1) * pageSize;
@@ -304,8 +305,17 @@ export function ProductDescriptions({ data, onEdit }: ProductDescriptionsProps)
</tr>
</thead>
<tbody className="divide-y divide-slate-700/50">
{paginatedData.map(({ row, index }) => (
<tr key={index} className={cn("transition-colors", getRowColor(row))}>
{paginatedData.map(({ row, index }) => {
const isPending = rowStatuses[String(row[COLUMNS.ARTICLE_NO])] === 'pending';
return (
<tr
key={index}
className={cn(
"transition-colors",
getRowColor(row),
isPending ? "bg-yellow-400/20 border-l-4 border-l-yellow-400" : ""
)}
>
<td className="px-4 py-3 font-mono text-slate-300 text-xs">{row[COLUMNS.ARTICLE_NO]}</td>
<td className="px-4 py-3 font-medium text-white max-w-[200px] truncate" title={row[COLUMNS.ARTICLE_NAME]}>{row[COLUMNS.ARTICLE_NAME]}</td>
<td className="px-4 py-3 text-slate-300 text-xs">{row[COLUMNS.LINE]}</td>
@@ -334,7 +344,8 @@ export function ProductDescriptions({ data, onEdit }: ProductDescriptionsProps)
</button>
</td>
</tr>
))}
);
})}
{paginatedData.length === 0 && (
<tr>
<td colSpan={9} className="px-4 py-8 text-center text-slate-500">