christianV/Craze-Data-check
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/Craze-Data-check.git synced 2026-08-03 15:15:24 +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 [clusterSyncTargets, setClusterSyncTargets] = useState<Record<number, string>>({});
const [pendingNearDupSync, setPendingNearDupSync] = useState<{
clusterIndex: number;
clusterKey: string;
targetGroupKey: string;
selectedIndices: number[];
} | null>(null);
@@ -120,7 +120,12 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
const filteredGroups = useMemo(() => {
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) {
const s = search.toLowerCase();
@@ -137,7 +142,7 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
}
return result;
}, [groups, showOnlyInconsistent, search, lineFilter, classFilter]);
}, [groups, showOnlyInconsistent, search, lineFilter, classFilter, rowStatuses]);
const uniqueLines = useMemo(() =>
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 () => {
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);
if (!targetGroup) return;
@@ -242,7 +248,7 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
setClusterSelections(prev => {
const next = { ...prev };
delete next[clusterIndex];
delete next[pendingNearDupSync.clusterKey];
return next;
});
};
@@ -395,11 +401,12 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
</div>
{nearDuplicateClusters.map((cluster, ci) => {
const allClusterRows = cluster.groups.flatMap(g => g.rows);
const selection = clusterSelections[ci] ?? new Set<number>();
const targetKey = clusterSyncTargets[ci] ?? cluster.groups[0].key;
const clusterKey = cluster.groups[0].key;
const selection = clusterSelections[clusterKey] ?? new Set<number>();
const targetKey = clusterSyncTargets[clusterKey] ?? cluster.groups[0].key;
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
onClick={() => {
const next = new Set(expandedNearDuplicates);
@@ -423,12 +430,11 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
{expandedNearDuplicates.has(ci) && (
<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">
<span className="text-xs text-slate-400">Sync selected to:</span>
<select
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"
>
{cluster.groups.map(g => {
@@ -442,21 +448,21 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
</select>
<button
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"
>
<Layers className="w-3 h-3" />
Sync {selection.size} selected
</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"
>
Select all
</button>
{selection.size > 0 && (
<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"
>
Clear
@@ -464,7 +470,6 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
)}
</div>
{/* Flat product list */}
<div className="divide-y divide-violet-500/10">
{allClusterRows.map(({ row, index }) => {
const isSelected = selection.has(index);
@@ -476,17 +481,16 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
isSelected && "bg-violet-500/10"
)}
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);
return { ...prev, [ci]: current };
return { ...prev, [clusterKey]: current };
})}
>
<input
type="checkbox"
checked={isSelected}
onChange={() => {}}
onClick={e => e.stopPropagation()}
className="rounded border-slate-600 bg-slate-700 text-violet-600 focus:ring-violet-500 shrink-0"
readOnly
className="rounded border-slate-600 bg-slate-700 text-violet-600 focus:ring-violet-500 shrink-0 pointer-events-none"
/>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2">
@@ -510,11 +514,14 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
)}
<div className="space-y-3">
{filteredGroups.map(group => (
<div key={group.key} className={cn(
"border rounded-lg overflow-hidden transition-all",
group.isInconsistent ? "border-amber-500/30 bg-amber-500/5" : "border-slate-700 bg-slate-800/30"
)}>
{filteredGroups.map(group => {
const hasPending = group.rows.some(({ row }) => rowStatuses[String(row[COLUMNS.ARTICLE_NO])] === 'pending');
return (
<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">
<button
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">
Inner: {group.innerDims} cm
</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 ? (
<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" />
Inconsistent
</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">
<CheckCircle2 className="w-3 h-3" />
Consistent
</span>
)}
) : null}
</div>
<div className="text-xs text-slate-500 mt-1">
{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>
))}
);
})}
{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">