rajch_ales/product-import-ai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace variant table with responsive grid

Browse Source
This commit is contained in:
rajch_ales
2026-08-05 14:39:46 +02:00
parent f0bd62d93e
commit 902f1927a2
5 changed files with 86 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app.js
+25 -16
View File
@@ -7,8 +7,8 @@ const recordIdElement = document.querySelector("#recordId");
const loadProductButton = document.querySelector("#loadProductButton");
const previousProductButton = document.querySelector("#previousProductButton");
const nextProductButton = document.querySelector("#nextProductButton");
const tableBody = document.querySelector(".variant-table tbody");
const variantTable = document.querySelector(".variant-table");
const tableBody = document.querySelector("#variantRows");
const variantTable = document.querySelector(".variant-grid");
const pictureSlot = document.querySelector("#pictureSlot");
const scanInput = document.querySelector("#scanInput");
const suggestedModal = document.querySelector("#suggestedModal");
@@ -232,17 +232,19 @@ function renderFields() {
}
function renderTableHeader() {
variantHeader.replaceChildren(...variantColumns.map((column) => {
const th = document.createElement("th");
th.textContent = column.label;
th.dataset.column = column.key;
th.style.width = `${column.width}px`;
th.style.textAlign = column.align || "";
return th;
const cell = document.createElement("div");
cell.className = "variant-header-cell";
cell.setAttribute("role", "columnheader");
cell.textContent = column.label;
cell.dataset.column = column.key;
cell.style.textAlign = column.align || "";
return cell;
}));
}
function setTableWidth() {
const totalWidth = variantColumns.reduce((sum, column) => sum + column.width, 0);
variantTable.style.minWidth = `${Math.max(totalWidth, 820)}px`;
variantTable.style.setProperty("--variant-min-width", `${Math.max(totalWidth, 820)}px`);
variantTable.style.setProperty("--variant-columns", variantColumns.map((column) => `${column.width}px`).join(" "));
}
async function loadManufacturers() {
manufacturerSelect.replaceChildren(createOption("", "Select manufacturer"));
@@ -940,18 +942,22 @@ function renderCombinations(combinations) {
return;
}
tableBody.replaceChildren(...combinations.map((item) => {
const row = document.createElement("tr");
const row = document.createElement("div");
row.className = "variant-row";
row.setAttribute("role", "row");
row.append(...variantColumns.map((column) => {
const value = item[column.key];
const text = formatTableValue(value, column);
const cell = document.createElement("td");
const cell = document.createElement("div");
cell.className = "variant-cell";
cell.setAttribute("role", "cell");
cell.textContent = text;
cell.title = text;
cell.dataset.column = column.key;
cell.style.width = `${column.width}px`;
cell.dataset.label = column.label;
cell.style.textAlign = column.align || "";
if ((column.problem && item.hasProblem) || (column.key === "eanStatus" && text)) {
cell.className = "problem-ean";
cell.classList.add("problem-ean");
}
return cell;
}));
@@ -973,10 +979,13 @@ function clearProductState(message) {
updateNavigationState();
}
function setTableMessage(message) {
const row = document.createElement("tr");
const cell = document.createElement("td");
const row = document.createElement("div");
row.className = "variant-row variant-message-row";
row.setAttribute("role", "row");
const cell = document.createElement("div");
cell.className = "empty-row";
cell.colSpan = variantColumns.length;
cell.setAttribute("role", "cell");
cell.style.gridColumn = "1 / -1";
cell.textContent = message;
row.append(cell);
tableBody.replaceChildren(row);