Allow choosing which product to sync from in Dimensions view

This commit is contained in:
Christian Vidal Wolf
2026-03-29 17:41:03 +02:00
parent 8a4d0c5cfa
commit 65a847e789
+36 -28
View File
@@ -1,6 +1,6 @@
import React, { useState, useMemo } from 'react';
import { ExcelRow, COLUMNS } from '../types';
import { AlertTriangle, CheckCircle2, ChevronDown, ChevronRight, Edit2, Package, Boxes, Scale, Loader2, Languages } from 'lucide-react';
import { AlertTriangle, CheckCircle2, ChevronDown, ChevronRight, Edit2, Package, Boxes, Scale, Loader2, RefreshCw } from 'lucide-react';
import { cn } from '../lib/utils';
interface DimensionsViewProps {
@@ -45,7 +45,7 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
const result: DimensionGroup[] = [];
groupMap.forEach((rows, key) => {
if (key === '0x0x0' || key === 'xx') return; // Skip empty/placeholder groups
if (key === '0x0x0' || key === 'xx' || key === '0x0x0') return; // Skip empty/placeholder groups
const first = rows[0].row;
const firstOuter = `${first[COLUMNS.OUTER_L]}x${first[COLUMNS.OUTER_W]}x${first[COLUMNS.OUTER_H]}`;
@@ -96,22 +96,24 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
setExpandedGroups(next);
};
const syncGroup = async (group: DimensionGroup) => {
if (!window.confirm(`This will apply the Packaging & MOQ values of product ${group.rows[0].row[COLUMNS.ARTICLE_NO]} to all ${group.rows.length} products in this group. Continue?`)) {
const handleSyncFromRow = async (group: DimensionGroup, sourceRow: ExcelRow) => {
if (!window.confirm(`Apply measures of product ${sourceRow[COLUMNS.ARTICLE_NO]} to all ${group.rows.length} products in this group?`)) {
return;
}
onCaptureState(`Synced ${group.rows.length} products in ${group.innerDims} group`);
onCaptureState(`Synced ${group.rows.length} products to match ${sourceRow[COLUMNS.ARTICLE_NO]}`);
setSyncing(group.key);
try {
const first = group.rows[0].row;
const outerL = first[COLUMNS.OUTER_L];
const outerW = first[COLUMNS.OUTER_W];
const outerH = first[COLUMNS.OUTER_H];
const unitsOuter = first[COLUMNS.UNITS_OUTER];
const moq = first[COLUMNS.MOQ];
const outerL = sourceRow[COLUMNS.OUTER_L];
const outerW = sourceRow[COLUMNS.OUTER_W];
const outerH = sourceRow[COLUMNS.OUTER_H];
const unitsOuter = sourceRow[COLUMNS.UNITS_OUTER];
const moq = sourceRow[COLUMNS.MOQ];
for (const { row, index } of group.rows) {
// Skip updating the source row itself (though it doesn't hurt)
if (row === sourceRow) continue;
const updatedRow = [...row];
updatedRow[COLUMNS.OUTER_L] = outerL;
updatedRow[COLUMNS.OUTER_W] = outerW;
@@ -189,7 +191,7 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
</div>
</button>
<div className="flex items-center gap-4">
<div className="flex items-center gap-6">
<div className="flex items-center gap-4 text-[10px] hidden md:flex">
{group.discrepancies.outer && (
<span className="text-amber-400 flex items-center gap-1">
@@ -207,16 +209,11 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
</span>
)}
</div>
{group.isInconsistent && (
<button
onClick={() => syncGroup(group)}
disabled={syncing === group.key}
className="flex items-center gap-1.5 px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-[10px] font-bold rounded-md transition-all shadow-lg shadow-blue-900/40 disabled:opacity-50"
>
{syncing === group.key ? <Loader2 className="w-3 h-3 animate-spin" /> : <Languages className="w-3 h-3" />}
SYNC GROUP
</button>
{group.isInconsistent && !expandedGroups.has(group.key) && (
<div className="text-[10px] font-bold text-blue-400 bg-blue-400/5 px-2 py-1 rounded border border-blue-400/20">
OPEN TO SYNC
</div>
)}
</div>
</div>
@@ -263,12 +260,23 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
{row[COLUMNS.MOQ]}
</td>
<td className="px-4 py-3 text-right">
<button
onClick={() => onEdit(index)}
className="p-1.5 hover:bg-blue-600/20 text-slate-500 hover:text-blue-400 rounded transition-all opacity-0 group-hover:opacity-100"
>
<Edit2 className="w-4 h-4" />
</button>
<div className="flex items-center justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
<button
onClick={() => handleSyncFromRow(group, row)}
title="Set as master for this group"
disabled={syncing === group.key}
className="p-1.5 hover:bg-emerald-600/20 text-slate-500 hover:text-emerald-400 rounded transition-all"
>
{syncing === group.key ? <Loader2 className="w-4 h-4 animate-spin" /> : <RefreshCw className="w-4 h-4" />}
</button>
<button
onClick={() => onEdit(index)}
title="Edit product"
className="p-1.5 hover:bg-blue-600/20 text-slate-500 hover:text-blue-400 rounded transition-all"
>
<Edit2 className="w-4 h-4" />
</button>
</div>
</td>
</tr>
))}