mirror of
https://github.com/christianvidalwolf-prog/Craze-Data-check.git
synced 2026-08-03 14:45:24 +02:00
Implement granular synchronization for Outer Box, Units, and MOQ separately
This commit is contained in:
Christian Vidal Wolf
@@ -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, RefreshCw } from 'lucide-react';
|
||||
import { AlertTriangle, CheckCircle2, ChevronDown, ChevronRight, Edit2, Package, Boxes, Scale, Loader2, RefreshCw, Layers } from 'lucide-react';
|
||||
import { cn } from '../lib/utils';
|
||||
|
||||
interface DimensionsViewProps {
|
||||
@@ -26,7 +26,7 @@ interface DimensionGroup {
|
||||
export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureState }: DimensionsViewProps) {
|
||||
const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set());
|
||||
const [showOnlyInconsistent, setShowOnlyInconsistent] = useState(true);
|
||||
const [syncing, setSyncing] = useState<string | null>(null);
|
||||
const [syncing, setSyncing] = useState<{ key: string, field: string } | null>(null);
|
||||
|
||||
const groups = useMemo(() => {
|
||||
const groupMap = new Map<string, { row: ExcelRow; index: number }[]>();
|
||||
@@ -45,7 +45,8 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
|
||||
|
||||
const result: DimensionGroup[] = [];
|
||||
groupMap.forEach((rows, key) => {
|
||||
if (key === '0x0x0' || key === 'xx' || key === '0x0x0') return; // Skip empty/placeholder groups
|
||||
// Skip empty/placeholder groups (0x0x0 or empty fields)
|
||||
if (key === '0x0x0' || key === 'xx' || key === 'x x') return;
|
||||
|
||||
const first = rows[0].row;
|
||||
const firstOuter = `${first[COLUMNS.OUTER_L]}x${first[COLUMNS.OUTER_W]}x${first[COLUMNS.OUTER_H]}`;
|
||||
@@ -96,13 +97,15 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
|
||||
setExpandedGroups(next);
|
||||
};
|
||||
|
||||
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?`)) {
|
||||
const handleSyncField = async (group: DimensionGroup, sourceRow: ExcelRow, fieldType: 'outer' | 'units' | 'moq') => {
|
||||
const fieldLabel = fieldType === 'outer' ? 'Outer Box Dimensions' : fieldType === 'units' ? 'Units per Outer' : 'MOQ';
|
||||
if (!window.confirm(`Sync ALL products in this group to match "${fieldLabel}" from product ${sourceRow[COLUMNS.ARTICLE_NO]}?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
onCaptureState(`Synced ${group.rows.length} products to match ${sourceRow[COLUMNS.ARTICLE_NO]}`);
|
||||
setSyncing(group.key);
|
||||
onCaptureState(`Bulk synced ${fieldLabel} in group ${group.innerDims}`);
|
||||
setSyncing({ key: group.key, field: fieldType });
|
||||
|
||||
try {
|
||||
const outerL = sourceRow[COLUMNS.OUTER_L];
|
||||
const outerW = sourceRow[COLUMNS.OUTER_W];
|
||||
@@ -111,16 +114,49 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
|
||||
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];
|
||||
|
||||
if (fieldType === 'outer') {
|
||||
updatedRow[COLUMNS.OUTER_L] = outerL;
|
||||
updatedRow[COLUMNS.OUTER_W] = outerW;
|
||||
updatedRow[COLUMNS.OUTER_H] = outerH;
|
||||
} else if (fieldType === 'units') {
|
||||
updatedRow[COLUMNS.UNITS_OUTER] = unitsOuter;
|
||||
} else if (fieldType === 'moq') {
|
||||
updatedRow[COLUMNS.MOQ] = moq;
|
||||
}
|
||||
|
||||
await onSaveRow(index, updatedRow);
|
||||
}
|
||||
} finally {
|
||||
setSyncing(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFullSync = async (group: DimensionGroup, sourceRow: ExcelRow) => {
|
||||
if (!window.confirm(`Sync ALL Packaging & MOQ data in this group to match product ${sourceRow[COLUMNS.ARTICLE_NO]}?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
onCaptureState(`Full sync of packaging data in group ${group.innerDims}`);
|
||||
setSyncing({ key: group.key, field: 'all' });
|
||||
|
||||
try {
|
||||
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) {
|
||||
if (row === sourceRow) continue;
|
||||
const updatedRow = [...row];
|
||||
updatedRow[COLUMNS.OUTER_L] = outerL;
|
||||
updatedRow[COLUMNS.OUTER_W] = outerW;
|
||||
updatedRow[COLUMNS.OUTER_H] = outerH;
|
||||
updatedRow[COLUMNS.UNITS_OUTER] = unitsOuter;
|
||||
updatedRow[COLUMNS.MOQ] = moq;
|
||||
|
||||
await onSaveRow(index, updatedRow);
|
||||
}
|
||||
} finally {
|
||||
@@ -212,7 +248,7 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
|
||||
|
||||
{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
|
||||
OPEN TO SYNC FIELDS
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -239,40 +275,64 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
|
||||
<div className="text-[10px] text-slate-500 truncate max-w-[200px]">{row[COLUMNS.ARTICLE_NAME]}</div>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-slate-400 font-mono">
|
||||
{row[COLUMNS.INNER_L]} × {row[COLUMNS.INNER_W]} × {row[COLUMNS.INNER_H]}
|
||||
{row[COLUMNS.INNER_L] || '-'} × {row[COLUMNS.INNER_W] || '-'} × {row[COLUMNS.INNER_H] || '-'}
|
||||
</td>
|
||||
<td className={cn(
|
||||
"px-4 py-3 font-mono",
|
||||
"px-4 py-3 font-mono relative",
|
||||
group.discrepancies.outer ? "text-amber-300" : "text-slate-400"
|
||||
)}>
|
||||
{row[COLUMNS.OUTER_L]} × {row[COLUMNS.OUTER_W]} × {row[COLUMNS.OUTER_H]}
|
||||
<span>{row[COLUMNS.OUTER_L] || '-'} × {row[COLUMNS.OUTER_W] || '-'} × {row[COLUMNS.OUTER_H] || '-'}</span>
|
||||
<button
|
||||
onClick={() => handleSyncField(group, row, 'outer')}
|
||||
disabled={syncing?.key === group.key}
|
||||
title="Apply these Outer Dims to all in group"
|
||||
className="absolute right-1 top-1/2 -translate-y-1/2 p-1 hover:bg-emerald-600/20 text-slate-600 hover:text-emerald-400 rounded opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
>
|
||||
{syncing?.key === group.key && syncing?.field === 'outer' ? <Loader2 className="w-3 h-3 animate-spin" /> : <Layers className="w-3 h-3" />}
|
||||
</button>
|
||||
</td>
|
||||
<td className={cn(
|
||||
"px-4 py-3",
|
||||
"px-4 py-3 relative",
|
||||
group.discrepancies.units ? "text-amber-300 font-bold" : "text-slate-400"
|
||||
)}>
|
||||
{row[COLUMNS.UNITS_OUTER]}
|
||||
<span>{row[COLUMNS.UNITS_OUTER] || '-'}</span>
|
||||
<button
|
||||
onClick={() => handleSyncField(group, row, 'units')}
|
||||
disabled={syncing?.key === group.key}
|
||||
title="Apply this Units/Outer to all in group"
|
||||
className="absolute right-1 top-1/2 -translate-y-1/2 p-1 hover:bg-emerald-600/20 text-slate-600 hover:text-emerald-400 rounded opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
>
|
||||
{syncing?.key === group.key && syncing?.field === 'units' ? <Loader2 className="w-3 h-3 animate-spin" /> : <Layers className="w-3 h-3" />}
|
||||
</button>
|
||||
</td>
|
||||
<td className={cn(
|
||||
"px-4 py-3",
|
||||
"px-4 py-3 relative",
|
||||
group.discrepancies.moq ? "text-amber-300 font-bold" : "text-slate-400"
|
||||
)}>
|
||||
{row[COLUMNS.MOQ]}
|
||||
<span>{row[COLUMNS.MOQ] || '-'}</span>
|
||||
<button
|
||||
onClick={() => handleSyncField(group, row, 'moq')}
|
||||
disabled={syncing?.key === group.key}
|
||||
title="Apply this MOQ to all in group"
|
||||
className="absolute right-1 top-1/2 -translate-y-1/2 p-1 hover:bg-emerald-600/20 text-slate-600 hover:text-emerald-400 rounded opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
>
|
||||
{syncing?.key === group.key && syncing?.field === 'moq' ? <Loader2 className="w-3 h-3 animate-spin" /> : <Layers className="w-3 h-3" />}
|
||||
</button>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right">
|
||||
<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"
|
||||
onClick={() => handleFullSync(group, row)}
|
||||
title="FULL SYNC: Apply ALL packaging measures labels to all in group"
|
||||
disabled={syncing?.key === group.key}
|
||||
className="p-1.5 hover:bg-blue-600/20 text-slate-500 hover:text-blue-400 rounded transition-all"
|
||||
>
|
||||
{syncing === group.key ? <Loader2 className="w-4 h-4 animate-spin" /> : <RefreshCw className="w-4 h-4" />}
|
||||
{syncing?.key === group.key && syncing?.field === 'all' ? <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"
|
||||
className="p-1.5 hover:bg-slate-600/20 text-slate-500 hover:text-slate-300 rounded transition-all"
|
||||
>
|
||||
<Edit2 className="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user