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

feat: persistent validation visibility in DimensionsView and selection fixes

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-04-08 20:05:24 +02:00
parent e24e3e5067
commit 72e653e353
2 changed files with 51 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/DimensionsView.tsx
+41 -28
View File
@@ -46,7 +46,7 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
const [clusterSelections, setClusterSelections] = useState<Record<number, Set<number>>>({}); const [clusterSelections, setClusterSelections] = useState<Record<number, Set<number>>>({});
const [clusterSyncTargets, setClusterSyncTargets] = useState<Record<number, string>>({}); const [clusterSyncTargets, setClusterSyncTargets] = useState<Record<number, string>>({});
const [pendingNearDupSync, setPendingNearDupSync] = useState<{ const [pendingNearDupSync, setPendingNearDupSync] = useState<{
clusterIndex: number; clusterKey: string;
targetGroupKey: string; targetGroupKey: string;
selectedIndices: number[]; selectedIndices: number[];
} | null>(null); } | null>(null);
@@ -120,7 +120,12 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
const filteredGroups = useMemo(() => { const filteredGroups = useMemo(() => {
let result = groups; let result = groups;
if (showOnlyInconsistent) result = result.filter(g => g.isInconsistent); if (showOnlyInconsistent) {
result = result.filter(g =>
g.isInconsistent ||
g.rows.some(({ row }) => rowStatuses[String(row[COLUMNS.ARTICLE_NO])] === 'pending')
);
}
if (search || lineFilter.length > 0 || classFilter.length > 0) { if (search || lineFilter.length > 0 || classFilter.length > 0) {
const s = search.toLowerCase(); const s = search.toLowerCase();
@@ -137,7 +142,7 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
} }
return result; return result;
}, [groups, showOnlyInconsistent, search, lineFilter, classFilter]); }, [groups, showOnlyInconsistent, search, lineFilter, classFilter, rowStatuses]);
const uniqueLines = useMemo(() => const uniqueLines = useMemo(() =>
Array.from(new Set(data.map(r => String(r[COLUMNS.LINE] || '')))).sort() Array.from(new Set(data.map(r => String(r[COLUMNS.LINE] || '')))).sort()
@@ -217,9 +222,10 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
const executeNearDupSync = async () => { const executeNearDupSync = async () => {
if (!pendingNearDupSync) return; if (!pendingNearDupSync) return;
const { clusterIndex, targetGroupKey, selectedIndices } = pendingNearDupSync; const { clusterKey, targetGroupKey, selectedIndices } = pendingNearDupSync;
const cluster = nearDuplicateClusters[clusterIndex]; const cluster = nearDuplicateClusters.find(c => c.groups[0].key === clusterKey);
if (!cluster) return;
const targetGroup = cluster.groups.find(g => g.key === targetGroupKey); const targetGroup = cluster.groups.find(g => g.key === targetGroupKey);
if (!targetGroup) return; if (!targetGroup) return;
@@ -242,7 +248,7 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
setClusterSelections(prev => { setClusterSelections(prev => {
const next = { ...prev }; const next = { ...prev };
delete next[clusterIndex]; delete next[pendingNearDupSync.clusterKey];
return next; return next;
}); });
}; };
@@ -395,11 +401,12 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
</div> </div>
{nearDuplicateClusters.map((cluster, ci) => { {nearDuplicateClusters.map((cluster, ci) => {
const allClusterRows = cluster.groups.flatMap(g => g.rows); const allClusterRows = cluster.groups.flatMap(g => g.rows);
const selection = clusterSelections[ci] ?? new Set<number>(); const clusterKey = cluster.groups[0].key;
const targetKey = clusterSyncTargets[ci] ?? cluster.groups[0].key; const selection = clusterSelections[clusterKey] ?? new Set<number>();
const targetKey = clusterSyncTargets[clusterKey] ?? cluster.groups[0].key;
return ( return (
<div key={ci} className="border border-violet-500/25 bg-violet-500/5 rounded-lg overflow-hidden"> <div key={clusterKey} className="border border-violet-500/25 bg-violet-500/5 rounded-lg overflow-hidden">
<button <button
onClick={() => { onClick={() => {
const next = new Set(expandedNearDuplicates); const next = new Set(expandedNearDuplicates);
@@ -423,12 +430,11 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
{expandedNearDuplicates.has(ci) && ( {expandedNearDuplicates.has(ci) && (
<div className="border-t border-violet-500/20"> <div className="border-t border-violet-500/20">
{/* Sync toolbar */}
<div className="flex items-center gap-3 px-4 py-2.5 bg-violet-500/5 border-b border-violet-500/10 flex-wrap"> <div className="flex items-center gap-3 px-4 py-2.5 bg-violet-500/5 border-b border-violet-500/10 flex-wrap">
<span className="text-xs text-slate-400">Sync selected to:</span> <span className="text-xs text-slate-400">Sync selected to:</span>
<select <select
value={targetKey} value={targetKey}
onChange={e => setClusterSyncTargets(prev => ({ ...prev, [ci]: e.target.value }))} onChange={e => setClusterSyncTargets(prev => ({ ...prev, [clusterKey]: e.target.value }))}
className="bg-slate-800 border border-slate-700 rounded px-2 py-1 text-xs text-white focus:outline-none focus:border-violet-500" className="bg-slate-800 border border-slate-700 rounded px-2 py-1 text-xs text-white focus:outline-none focus:border-violet-500"
> >
{cluster.groups.map(g => { {cluster.groups.map(g => {
@@ -442,21 +448,21 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
</select> </select>
<button <button
disabled={selection.size === 0} disabled={selection.size === 0}
onClick={() => setPendingNearDupSync({ clusterIndex: ci, targetGroupKey: targetKey, selectedIndices: Array.from(selection) })} onClick={() => setPendingNearDupSync({ clusterKey, targetGroupKey: targetKey, selectedIndices: Array.from(selection) })}
className="flex items-center gap-1.5 px-3 py-1 bg-violet-600/20 text-violet-400 hover:bg-violet-600 hover:text-white rounded text-xs font-medium transition-colors disabled:opacity-40 disabled:cursor-not-allowed" className="flex items-center gap-1.5 px-3 py-1 bg-violet-600/20 text-violet-400 hover:bg-violet-600 hover:text-white rounded text-xs font-medium transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
> >
<Layers className="w-3 h-3" /> <Layers className="w-3 h-3" />
Sync {selection.size} selected Sync {selection.size} selected
</button> </button>
<button <button
onClick={() => setClusterSelections(prev => ({ ...prev, [ci]: new Set(allClusterRows.map(r => r.index)) }))} onClick={() => setClusterSelections(prev => ({ ...prev, [clusterKey]: new Set(allClusterRows.map(r => r.index)) }))}
className="text-xs text-slate-500 hover:text-slate-300 transition-colors" className="text-xs text-slate-500 hover:text-slate-300 transition-colors"
> >
Select all Select all
</button> </button>
{selection.size > 0 && ( {selection.size > 0 && (
<button <button
onClick={() => setClusterSelections(prev => ({ ...prev, [ci]: new Set() }))} onClick={() => setClusterSelections(prev => ({ ...prev, [clusterKey]: new Set() }))}
className="text-xs text-slate-500 hover:text-slate-300 transition-colors" className="text-xs text-slate-500 hover:text-slate-300 transition-colors"
> >
Clear Clear
@@ -464,7 +470,6 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
)} )}
</div> </div>
{/* Flat product list */}
<div className="divide-y divide-violet-500/10"> <div className="divide-y divide-violet-500/10">
{allClusterRows.map(({ row, index }) => { {allClusterRows.map(({ row, index }) => {
const isSelected = selection.has(index); const isSelected = selection.has(index);
@@ -476,17 +481,16 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
isSelected && "bg-violet-500/10" isSelected && "bg-violet-500/10"
)} )}
onClick={() => setClusterSelections(prev => { onClick={() => setClusterSelections(prev => {
const current = new Set(prev[ci] ?? []); const current = new Set(prev[clusterKey] ?? []);
if (current.has(index)) current.delete(index); else current.add(index); if (current.has(index)) current.delete(index); else current.add(index);
return { ...prev, [ci]: current }; return { ...prev, [clusterKey]: current };
})} })}
> >
<input <input
type="checkbox" type="checkbox"
checked={isSelected} checked={isSelected}
onChange={() => {}} readOnly
onClick={e => e.stopPropagation()} className="rounded border-slate-600 bg-slate-700 text-violet-600 focus:ring-violet-500 shrink-0 pointer-events-none"
className="rounded border-slate-600 bg-slate-700 text-violet-600 focus:ring-violet-500 shrink-0"
/> />
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@@ -510,11 +514,14 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
)} )}
<div className="space-y-3"> <div className="space-y-3">
{filteredGroups.map(group => ( {filteredGroups.map(group => {
<div key={group.key} className={cn( const hasPending = group.rows.some(({ row }) => rowStatuses[String(row[COLUMNS.ARTICLE_NO])] === 'pending');
"border rounded-lg overflow-hidden transition-all", return (
group.isInconsistent ? "border-amber-500/30 bg-amber-500/5" : "border-slate-700 bg-slate-800/30" <div key={group.key} className={cn(
)}> "border rounded-lg overflow-hidden transition-all",
hasPending ? "border-yellow-500/50 bg-yellow-500/5 ring-1 ring-yellow-500/20" :
group.isInconsistent ? "border-amber-500/30 bg-amber-500/5" : "border-slate-700 bg-slate-800/30"
)}>
<div className="flex items-center justify-between bg-slate-800/20 pr-4"> <div className="flex items-center justify-between bg-slate-800/20 pr-4">
<button <button
onClick={() => toggleGroup(group.key)} onClick={() => toggleGroup(group.key)}
@@ -526,17 +533,22 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
<span className="font-mono text-sm text-blue-400 bg-blue-400/10 px-2 py-0.5 rounded"> <span className="font-mono text-sm text-blue-400 bg-blue-400/10 px-2 py-0.5 rounded">
Inner: {group.innerDims} cm Inner: {group.innerDims} cm
</span> </span>
{hasPending && (
<span className="flex items-center gap-1 text-xs font-medium text-yellow-500 bg-yellow-500/10 px-2 py-0.5 rounded ring-1 ring-yellow-500/20">
Pending Validation
</span>
)}
{group.isInconsistent ? ( {group.isInconsistent ? (
<span className="flex items-center gap-1 text-xs font-medium text-amber-500 bg-amber-500/10 px-2 py-0.5 rounded ring-1 ring-amber-500/20"> <span className="flex items-center gap-1 text-xs font-medium text-amber-500 bg-amber-500/10 px-2 py-0.5 rounded ring-1 ring-amber-500/20">
<AlertTriangle className="w-3 h-3" /> <AlertTriangle className="w-3 h-3" />
Inconsistent Inconsistent
</span> </span>
) : ( ) : !hasPending ? (
<span className="flex items-center gap-1 text-xs font-medium text-emerald-500 bg-emerald-500/10 px-2 py-0.5 rounded ring-1 ring-emerald-500/20"> <span className="flex items-center gap-1 text-xs font-medium text-emerald-500 bg-emerald-500/10 px-2 py-0.5 rounded ring-1 ring-emerald-500/20">
<CheckCircle2 className="w-3 h-3" /> <CheckCircle2 className="w-3 h-3" />
Consistent Consistent
</span> </span>
)} ) : null}
</div> </div>
<div className="text-xs text-slate-500 mt-1"> <div className="text-xs text-slate-500 mt-1">
{group.rows.length} product{group.rows.length !== 1 ? 's' : ''} in this dimension group {group.rows.length} product{group.rows.length !== 1 ? 's' : ''} in this dimension group
@@ -677,7 +689,8 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
</div> </div>
)} )}
</div> </div>
))} );
})}
{filteredGroups.length === 0 && ( {filteredGroups.length === 0 && (
<div className="flex flex-col items-center justify-center py-20 bg-slate-800/20 border border-dashed border-slate-700 rounded-xl"> <div className="flex flex-col items-center justify-center py-20 bg-slate-800/20 border border-dashed border-slate-700 rounded-xl">
src/lib/supabase.ts
+10 -1
View File
@@ -21,6 +21,9 @@ export async function saveRowToSupabase(articleNo: string, rowData: ExcelRow) {
}); });
if (!response.ok) { if (!response.ok) {
const errorData = await response.json().catch(() => ({}));
console.error('Initial PATCH failed:', response.status, errorData);
// If PATCH didn't find the record, try UPSERT // If PATCH didn't find the record, try UPSERT
const upsertResponse = await fetch(`${SUPABASE_URL}/rest/v1/products_sync`, { const upsertResponse = await fetch(`${SUPABASE_URL}/rest/v1/products_sync`, {
method: 'POST', method: 'POST',
@@ -37,7 +40,13 @@ export async function saveRowToSupabase(articleNo: string, rowData: ExcelRow) {
updated_at: new Date().toISOString() updated_at: new Date().toISOString()
}) })
}); });
return upsertResponse.ok;
if (!upsertResponse.ok) {
const upsertError = await upsertResponse.json().catch(() => ({}));
console.error('UPSERT failed:', upsertResponse.status, upsertError);
return false;
}
return true;
} }
return true; return true;
} catch (error) { } catch (error) {