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 loadProductButton = document.querySelector("#loadProductButton");
const previousProductButton = document.querySelector("#previousProductButton"); const previousProductButton = document.querySelector("#previousProductButton");
const nextProductButton = document.querySelector("#nextProductButton"); const nextProductButton = document.querySelector("#nextProductButton");
const tableBody = document.querySelector(".variant-table tbody"); const tableBody = document.querySelector("#variantRows");
const variantTable = document.querySelector(".variant-table"); const variantTable = document.querySelector(".variant-grid");
const pictureSlot = document.querySelector("#pictureSlot"); const pictureSlot = document.querySelector("#pictureSlot");
const scanInput = document.querySelector("#scanInput"); const scanInput = document.querySelector("#scanInput");
const suggestedModal = document.querySelector("#suggestedModal"); const suggestedModal = document.querySelector("#suggestedModal");
@@ -232,17 +232,19 @@ function renderFields() {
} }
function renderTableHeader() { function renderTableHeader() {
variantHeader.replaceChildren(...variantColumns.map((column) => { variantHeader.replaceChildren(...variantColumns.map((column) => {
const th = document.createElement("th"); const cell = document.createElement("div");
th.textContent = column.label; cell.className = "variant-header-cell";
th.dataset.column = column.key; cell.setAttribute("role", "columnheader");
th.style.width = `${column.width}px`; cell.textContent = column.label;
th.style.textAlign = column.align || ""; cell.dataset.column = column.key;
return th; cell.style.textAlign = column.align || "";
return cell;
})); }));
} }
function setTableWidth() { function setTableWidth() {
const totalWidth = variantColumns.reduce((sum, column) => sum + column.width, 0); 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() { async function loadManufacturers() {
manufacturerSelect.replaceChildren(createOption("", "Select manufacturer")); manufacturerSelect.replaceChildren(createOption("", "Select manufacturer"));
@@ -940,18 +942,22 @@ function renderCombinations(combinations) {
return; return;
} }
tableBody.replaceChildren(...combinations.map((item) => { 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) => { row.append(...variantColumns.map((column) => {
const value = item[column.key]; const value = item[column.key];
const text = formatTableValue(value, column); 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.textContent = text;
cell.title = text; cell.title = text;
cell.dataset.column = column.key; cell.dataset.column = column.key;
cell.style.width = `${column.width}px`; cell.dataset.label = column.label;
cell.style.textAlign = column.align || ""; cell.style.textAlign = column.align || "";
if ((column.problem && item.hasProblem) || (column.key === "eanStatus" && text)) { if ((column.problem && item.hasProblem) || (column.key === "eanStatus" && text)) {
cell.className = "problem-ean"; cell.classList.add("problem-ean");
} }
return cell; return cell;
})); }));
@@ -973,10 +979,13 @@ function clearProductState(message) {
updateNavigationState(); updateNavigationState();
} }
function setTableMessage(message) { function setTableMessage(message) {
const row = document.createElement("tr"); const row = document.createElement("div");
const cell = document.createElement("td"); row.className = "variant-row variant-message-row";
row.setAttribute("role", "row");
const cell = document.createElement("div");
cell.className = "empty-row"; cell.className = "empty-row";
cell.colSpan = variantColumns.length; cell.setAttribute("role", "cell");
cell.style.gridColumn = "1 / -1";
cell.textContent = message; cell.textContent = message;
row.append(cell); row.append(cell);
tableBody.replaceChildren(row); tableBody.replaceChildren(row);
public/app.ts
+28 -16
View File
@@ -7,8 +7,8 @@ const recordIdElement = document.querySelector("#recordId");
const loadProductButton = document.querySelector("#loadProductButton"); const loadProductButton = document.querySelector("#loadProductButton");
const previousProductButton = document.querySelector("#previousProductButton"); const previousProductButton = document.querySelector("#previousProductButton");
const nextProductButton = document.querySelector("#nextProductButton"); const nextProductButton = document.querySelector("#nextProductButton");
const tableBody = document.querySelector(".variant-table tbody"); const tableBody = document.querySelector("#variantRows");
const variantTable = document.querySelector(".variant-table"); const variantTable = document.querySelector(".variant-grid");
const pictureSlot = document.querySelector("#pictureSlot"); const pictureSlot = document.querySelector("#pictureSlot");
const scanInput = document.querySelector("#scanInput"); const scanInput = document.querySelector("#scanInput");
const suggestedModal = document.querySelector("#suggestedModal"); const suggestedModal = document.querySelector("#suggestedModal");
@@ -241,19 +241,24 @@ function renderFields() {
function renderTableHeader() { function renderTableHeader() {
variantHeader.replaceChildren( variantHeader.replaceChildren(
...variantColumns.map((column) => { ...variantColumns.map((column) => {
const th = document.createElement("th"); const cell = document.createElement("div");
th.textContent = column.label; cell.className = "variant-header-cell";
th.dataset.column = column.key; cell.setAttribute("role", "columnheader");
th.style.width = `${column.width}px`; cell.textContent = column.label;
th.style.textAlign = column.align || ""; cell.dataset.column = column.key;
return th; cell.style.textAlign = column.align || "";
return cell;
}), }),
); );
} }
function setTableWidth() { function setTableWidth() {
const totalWidth = variantColumns.reduce((sum, column) => sum + column.width, 0); 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() { async function loadManufacturers() {
@@ -1029,20 +1034,24 @@ function renderCombinations(combinations) {
tableBody.replaceChildren( tableBody.replaceChildren(
...combinations.map((item) => { ...combinations.map((item) => {
const row = document.createElement("tr"); const row = document.createElement("div");
row.className = "variant-row";
row.setAttribute("role", "row");
row.append( row.append(
...variantColumns.map((column) => { ...variantColumns.map((column) => {
const value = item[column.key]; const value = item[column.key];
const text = formatTableValue(value, column); 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.textContent = text;
cell.title = text; cell.title = text;
cell.dataset.column = column.key; cell.dataset.column = column.key;
cell.style.width = `${column.width}px`; cell.dataset.label = column.label;
cell.style.textAlign = column.align || ""; cell.style.textAlign = column.align || "";
if ((column.problem && item.hasProblem) || (column.key === "eanStatus" && text)) { if ((column.problem && item.hasProblem) || (column.key === "eanStatus" && text)) {
cell.className = "problem-ean"; cell.classList.add("problem-ean");
} }
return cell; return cell;
}), }),
@@ -1068,10 +1077,13 @@ function clearProductState(message) {
} }
function setTableMessage(message) { function setTableMessage(message) {
const row = document.createElement("tr"); const row = document.createElement("div");
const cell = document.createElement("td"); row.className = "variant-row variant-message-row";
row.setAttribute("role", "row");
const cell = document.createElement("div");
cell.className = "empty-row"; cell.className = "empty-row";
cell.colSpan = variantColumns.length; cell.setAttribute("role", "cell");
cell.style.gridColumn = "1 / -1";
cell.textContent = message; cell.textContent = message;
row.append(cell); row.append(cell);
tableBody.replaceChildren(row); tableBody.replaceChildren(row);
public/index.html
+6 -10
View File
@@ -92,16 +92,12 @@
<section class="data-panel main-workspace" aria-label="Catalog workspace"> <section class="data-panel main-workspace" aria-label="Catalog workspace">
<div class="table-wrap"> <div class="table-wrap">
<table class="variant-table"> <div class="variant-grid" role="table" aria-label="Product combinations">
<thead> <div class="variant-header" id="variantHeader" role="row"></div>
<tr id="variantHeader"></tr> <div class="variant-rows" id="variantRows" role="rowgroup">
</thead> <div class="empty-row" id="emptyTableMessage" role="row">Select manufacturer to load data.</div>
<tbody> </div>
<tr> </div>
<td class="empty-row" id="emptyTableMessage" colspan="13">Select manufacturer to load data.</td>
</tr>
</tbody>
</table>
</div> </div>
</section> </section>
</main> </main>
public/styles.css
+1 -1
View File
File diff suppressed because one or more lines are too long
src/tailwind.css
+26 -12
View File
@@ -105,14 +105,17 @@
.main-workspace { @apply min-w-0 overflow-hidden bg-catalog-surface; } .main-workspace { @apply min-w-0 overflow-hidden bg-catalog-surface; }
.data-panel { @apply min-w-0 overflow-hidden bg-catalog-surface; } .data-panel { @apply min-w-0 overflow-hidden bg-catalog-surface; }
.table-wrap { @apply h-full overflow-auto; } .table-wrap { @apply h-full overflow-auto; }
.variant-table { @apply w-full border-collapse text-[11px]; } .variant-grid { @apply min-w-0 text-[11px]; min-width: var(--variant-min-width, 820px); }
.variant-table th, .variant-table td { @apply h-[22px] whitespace-nowrap border-b border-r border-slate-300 px-1 py-0.5 text-center; } .variant-header, .variant-row { @apply grid; grid-template-columns: var(--variant-columns); }
.variant-table th { @apply sticky top-0 z-10 bg-slate-200 font-medium text-slate-800; } .variant-header { @apply sticky top-0 z-10; }
.variant-table td { @apply bg-slate-50 text-slate-800; } .variant-header-cell { @apply h-[22px] whitespace-nowrap border-b border-r border-slate-300 bg-slate-200 px-1 py-0.5 font-medium text-slate-800; }
.variant-table tr:nth-child(even) td { @apply bg-slate-100; } .variant-row { @apply min-h-[22px] border-b border-slate-300; }
.variant-table tr:hover td { @apply bg-slate-200; } .variant-row:nth-child(even) { @apply bg-slate-100; }
.empty-row { @apply py-4 text-slate-500; } .variant-row:hover { @apply bg-slate-200; }
.variant-table .problem-ean { @apply bg-red-600 font-semibold text-white; } .variant-cell { @apply min-w-0 whitespace-nowrap border-r border-slate-300 px-1 py-0.5 text-center text-slate-800; }
.variant-cell[data-label=""] { @apply p-0; }
.empty-row { @apply py-4 text-center text-slate-500; }
.variant-cell.problem-ean { @apply bg-red-600 font-semibold text-white; }
.modal-backdrop { @apply fixed inset-0 z-50 flex items-center justify-center bg-slate-900/50 p-4; } .modal-backdrop { @apply fixed inset-0 z-50 flex items-center justify-center bg-slate-900/50 p-4; }
.modal-backdrop[hidden] { display: none; } .modal-backdrop[hidden] { display: none; }
.suggested-dialog, .source-dialog, .settings-dialog { @apply max-h-[90vh] w-full overflow-hidden rounded-lg border border-slate-300 bg-slate-50 shadow-2xl; } .suggested-dialog, .source-dialog, .settings-dialog { @apply max-h-[90vh] w-full overflow-hidden rounded-lg border border-slate-300 bg-slate-50 shadow-2xl; }
@@ -165,6 +168,16 @@
.secondary-panel { @apply order-1; } .secondary-panel { @apply order-1; }
.main-workspace { @apply order-2; } .main-workspace { @apply order-2; }
.table-wrap { @apply max-h-[70vh]; } .table-wrap { @apply max-h-[70vh]; }
.variant-grid { @apply min-w-0; }
.variant-header { @apply hidden; }
.variant-row { @apply grid grid-cols-2 gap-x-2 border-b border-slate-300 p-2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.variant-cell { @apply flex min-h-7 items-center justify-between gap-2 border-b border-slate-200 px-1 py-1 text-right; white-space: normal; }
.variant-cell::before { content: attr(data-label); @apply shrink-0 text-left text-[10px] font-medium text-slate-500; }
.variant-cell[data-label=""]::before { content: none; }
.variant-cell[data-label=""] { @apply col-span-2; }
.variant-message-row { @apply block; }
html.dark .variant-row { @apply border-slate-700; }
html.dark .variant-cell { @apply border-slate-700; }
} }
@media (min-width: 981px) { @media (min-width: 981px) {
@@ -177,10 +190,11 @@
html.dark .data-panel { @apply bg-slate-950; } html.dark .data-panel { @apply bg-slate-950; }
html.dark .field-label { @apply border-slate-700 bg-slate-800 text-slate-200; } html.dark .field-label { @apply border-slate-700 bg-slate-800 text-slate-200; }
html.dark .field-value { @apply border-slate-700 bg-slate-900 text-slate-100; } html.dark .field-value { @apply border-slate-700 bg-slate-900 text-slate-100; }
html.dark .variant-table th { @apply border-slate-700 bg-slate-800 text-slate-100; } html.dark .variant-header-cell { @apply border-slate-700 bg-slate-800 text-slate-100; }
html.dark .variant-table td { @apply border-slate-700 bg-slate-900 text-slate-200; } html.dark .variant-row { @apply border-slate-700; }
html.dark .variant-table tr:nth-child(even) td { @apply bg-slate-800; } html.dark .variant-row:nth-child(even) { @apply bg-slate-800; }
html.dark .variant-table tr:hover td { @apply bg-slate-700; } html.dark .variant-row:hover { @apply bg-slate-700; }
html.dark .variant-cell { @apply border-slate-700 text-slate-200; }
html.dark .arrow-button, html.dark .arrow-button,
html.dark .action-button, html.dark .action-button,
html.dark .input-like { @apply border-slate-600 bg-slate-800 text-slate-100; } html.dark .input-like { @apply border-slate-600 bg-slate-800 text-slate-100; }