| {k} | {Array.isArray(val) ? (val.length ? val.join(" · ") : "—") : (val == null || val === "" ? "—" : String(val))} |
| {k} | {val} |
{JSON.stringify(variantRaw, null, 2)}
)}
)}
);
}
// Flatten a nested object into [path, value] rows for the raw-data table.
function flattenObject(obj, prefix = "") {
const rows = [];
if (obj == null || typeof obj !== "object") return [[prefix || "(valeur)", String(obj)]];
for (const [k, v] of Object.entries(obj)) {
const path = prefix ? `${prefix}.${k}` : k;
if (v && typeof v === "object" && !Array.isArray(v)) {
const sub = flattenObject(v, path);
if (sub.length === 0) rows.push([path, "{}"]);
else rows.push(...sub);
} else if (Array.isArray(v)) {
if (v.length === 0) rows.push([path, "[]"]);
else if (v.every((x) => x == null || typeof x !== "object")) rows.push([path, v.join(", ")]);
else rows.push([path, JSON.stringify(v)]);
} else {
rows.push([path, v == null || v === "" ? "—" : String(v)]);
}
}
return rows;
}
// ─── AXLU data tab (with diff panel) ───────────────────────────────────
function ProductDataTab({ product, edited, setEdited }) {
const v = useAxluStore();
const { CATEGORIES_AXLU } = window.AxluData;
const toast = useToast();
const [catSearch, setCatSearch] = useState('');
const [catPickerOpen, setCatPickerOpen] = useState(false);
const baseline = useMemo(() => ({
title: product.title || '',
description: product.description || '',
categoryIds: Array.isArray(product.categoryIds) && product.categoryIds.length
? product.categoryIds : (product.categoryId ? [product.categoryId] : []),
brand: product.brand || '',
material: product.material || '',
color: product.primaryColor || "Multi",
weight: product.weight || 0,
dimL: product.dimensions.l, dimW: product.dimensions.w,
dimH: product.dimensions.h, dimD: product.dimensions.d || 0,
}), [product.id]);
const isDirty = JSON.stringify(baseline) !== JSON.stringify(edited);
const set = (patch) => setEdited({ ...edited, ...patch });
const catIds = edited.categoryIds || [];
const handleSave = () => {
window.AxluStore.dispatch('product.update', {
id: product.id,
manual: true,
patch: {
title: edited.title,
description: edited.description,
categoryIds: catIds,
categoryId: catIds[0] || null,
categoryLabel: (CATEGORIES_AXLU.find((c) => c.id === catIds[0]) || {}).name || '—',
brand: edited.brand,
material: edited.material,
primaryColor: edited.color,
weight: parseFloat(edited.weight) || 0,
dimensions: {
l: parseFloat(edited.dimL) || 0,
w: parseFloat(edited.dimW) || 0,
h: parseFloat(edited.dimH) || 0,
d: parseFloat(edited.dimD) || 0,
},
},
});
toast('Modifications enregistrées — protégées des ré-imports', { tone: 'success' });
};
const handleCancel = () => setEdited(baseline);
// Categories available to add (not already assigned), with parent context
// so the searchable picker can show "Groupe › Sous-catégorie".
const catOptions = CATEGORIES_AXLU
.filter((c) => !catIds.includes(c.id))
.map((c) => {
const parent = c.parent ? CATEGORIES_AXLU.find((x) => x.id === c.parent) : null;
return {
id: c.id, name: c.name,
parentName: parent ? parent.name : null,
search: ((parent ? parent.name + ' ' : '') + c.name).toLowerCase(),
};
});
const catQuery = catSearch.trim().toLowerCase();
// The picker proposes every category; typing in the search box filters it.
const catList = catQuery ? catOptions.filter((o) => o.search.includes(catQuery)) : catOptions;
const addCategory = (id) => { if (id && !catIds.includes(id)) set({ categoryIds: [...catIds, id] }); };
const removeCategory = (id) => set({ categoryIds: catIds.filter((x) => x !== id) });
const hasDiameter = (product.dimensions && product.dimensions.d > 0) || (parseFloat(edited.dimD) || 0) > 0;
return (