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.ts
+28 -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");
@@ -241,19 +241,24 @@ 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() {
@@ -1029,20 +1034,24 @@ function renderCombinations(combinations) {
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;
}),
@@ -1068,10 +1077,13 @@ function clearProductState(message) {
}
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);