|
|
@@ -0,0 +1,296 @@
|
|
|
+// --- Data ---
|
|
|
+const mediaUrl = "./../";
|
|
|
+const PRODUCT_BASE = [
|
|
|
+ { id: 1, item_id: 'SKU001', product_name: "Levi's Jeans", product_long_description: 'Classic blue denim jeans with straight fit.', product_short_description: 'Blue denim jeans.', product_type: 'Clothing', image_path: 'media/products/jeans.jpg', image: 'http://127.0.0.1:8000/media/products/jeans.png' },
|
|
|
+ { id: 2, item_id: 'SKU002', product_name: 'Adidas Running Shoes', product_long_description: 'Lightweight running shoes with breathable mesh and cushioned sole.', product_short_description: "Men's running shoes.", product_type: 'Footwear', image_path: 'media/products/shoes.png', image: 'http://127.0.0.1:8000/media/products/shoes.png' },
|
|
|
+ { id: 3, item_id: 'SKU003', product_name: 'Nike Sports T-Shirt', product_long_description: 'Moisture-wicking sports tee ideal for training and outdoor activities.', product_short_description: 'Performance t-shirt.', product_type: 'Clothing', image_path: 'media/products/tshirt.png', image: 'http://127.0.0.1:8000/media/products/tshirt.png' },
|
|
|
+ { id: 4, item_id: 'SKU004', product_name: 'Puma Hoodie', product_long_description: 'Soft fleece hoodie with kangaroo pocket and adjustable drawstring.', product_short_description: 'Casual hoodie.', product_type: 'Clothing', image_path: 'media/products/hoodie.png', image: 'http://127.0.0.1:8000/media/products/hoodie.png' },
|
|
|
+ { id: 5, item_id: 'SKU005', product_name: 'Ray-Ban Sunglasses', product_long_description: 'Classic aviator sunglasses with UV protection lenses.', product_short_description: 'Aviator sunglasses.', product_type: 'Accessories', image_path: 'media/products/sunglasses.png', image: 'http://127.0.0.1:8000/media/products/sunglasses.png' }
|
|
|
+];
|
|
|
+
|
|
|
+const FAKE_API_RESPONSE = {
|
|
|
+ results: [
|
|
|
+ { product_id: 'SKU001', mandatory: { 'Clothing Neck Style': 'V-Neck', 'Clothing Top Style': 'Pullover', 'Condition': 'New', 'T-Shirt Type': 'Classic T-Shirt' }, additional: { 'Material': 'Turkish Pima Cotton', 'Size': 'Large', 'Color': 'Blue', 'Brand': 'Sierra', 'Fabric Type': 'Soft & Breathable', 'Fabric Composition': '95% Turkish Pima cotton', 'Care Instructions': 'Machine Washable', 'Sizes Available': 'S-XL' } },
|
|
|
+ { product_id: 'SKU002', mandatory: { 'Shoe Type': 'Running', 'Closure': 'Lace-Up', 'Condition': 'New', 'Gender': 'Men' }, additional: { 'Upper Material': 'Engineered Mesh', 'Midsole': 'EVA Foam', 'Outsole': 'Rubber', 'Color': 'Black/White', 'Brand': 'Adidas', 'Size': 'UK 9', 'Care Instructions': 'Surface Clean' } },
|
|
|
+ { product_id: 'SKU003', mandatory: { 'Clothing Neck Style': 'Crew Neck', 'Sleeve Length': 'Short Sleeve', 'Condition': 'New', 'T-Shirt Type': 'Performance' }, additional: { 'Material': 'Polyester Blend', 'Color': 'Red', 'Brand': 'Nike', 'Size': 'Medium', 'Fabric Technology': 'Dri-FIT', 'Care Instructions': 'Machine Wash Cold' } },
|
|
|
+ { product_id: 'SKU004', mandatory: { 'Clothing Top Style': 'Hoodie', 'Closure': 'Pullover', 'Condition': 'New', 'Fit': 'Relaxed' }, additional: { 'Material': 'Cotton Fleece', 'Color': 'Charcoal', 'Brand': 'Puma', 'Size': 'Large', 'Care Instructions': 'Machine Wash Warm' } },
|
|
|
+ { product_id: 'SKU005', mandatory: { 'Accessory Type': 'Sunglasses', 'Frame Style': 'Aviator', 'Condition': 'New', 'Lens Protection': 'UV 400' }, additional: { 'Frame Material': 'Metal', 'Lens Color': 'Green', 'Brand': 'Ray-Ban', 'Size': 'Standard', 'Case Included': 'Yes', 'Care Instructions': 'Clean with microfiber' } }
|
|
|
+ ],
|
|
|
+ total_products: 5,
|
|
|
+ successful: 5,
|
|
|
+ failed: 0
|
|
|
+};
|
|
|
+
|
|
|
+// --- State ---
|
|
|
+let selectedIds = new Set();
|
|
|
+const lastSeen = new Map(); // per-product memory for NEW highlighting (product_id -> maps)
|
|
|
+let layoutMode = 'cards'; // 'cards' | 'table'
|
|
|
+
|
|
|
+// --- Helpers ---
|
|
|
+const $ = (sel) => document.querySelector(sel);
|
|
|
+const el = (tag, cls) => { const e = document.createElement(tag); if (cls) e.className = cls; return e; }
|
|
|
+
|
|
|
+function updateSelectionInfo() {
|
|
|
+ const pill = $('#selectionInfo');
|
|
|
+ const total = PRODUCT_BASE.length;
|
|
|
+ const count = selectedIds.size;
|
|
|
+ pill.textContent = count === 0 ? 'No products selected' : `${count} of ${total} selected`;
|
|
|
+}
|
|
|
+
|
|
|
+function setChecked(id, checked) { if (checked) selectedIds.add(id); else selectedIds.delete(id); updateSelectionInfo(); }
|
|
|
+
|
|
|
+// --- Chips rendering ---
|
|
|
+function renderChips(container, obj, memoryMap) {
|
|
|
+ container.innerHTML = '';
|
|
|
+ let count = 0;
|
|
|
+ Object.entries(obj || {}).forEach(([k, v]) => {
|
|
|
+ const chip = el('span', 'chip');
|
|
|
+ const kEl = el('span', 'k'); kEl.textContent = k + ':';
|
|
|
+ const vEl = el('span', 'v'); vEl.textContent = ' ' + String(v);
|
|
|
+ chip.appendChild(kEl); chip.appendChild(vEl);
|
|
|
+ const was = memoryMap.get(k);
|
|
|
+ if (was === undefined || was !== v) chip.classList.add('new');
|
|
|
+ container.appendChild(chip);
|
|
|
+ memoryMap.set(k, v);
|
|
|
+ count++;
|
|
|
+ });
|
|
|
+ return count;
|
|
|
+}
|
|
|
+
|
|
|
+function findApiResultForProduct(p, index, api) { return api.results?.find(r => r.product_id === p.item_id) || api.results?.[index] || null; }
|
|
|
+
|
|
|
+// --- Cards layout ---
|
|
|
+function createProductCard(p) {
|
|
|
+ const row = el('div', 'product');
|
|
|
+ if (selectedIds.has(p.id)) row.classList.add('selected');
|
|
|
+
|
|
|
+ const left = el('div', 'thumb');
|
|
|
+ const img = new Image(); img.src = mediaUrl+p.image_path || p.image || '';
|
|
|
+ img.alt = `${p.product_name} image`;
|
|
|
+ console.log("img",img);
|
|
|
+ img.onerror = () => { img.remove(); const fb = el('div', 'fallback'); fb.textContent = (p.product_name || 'Product').split(' ').map(w => w[0]).slice(0,2).join('').toUpperCase(); left.appendChild(fb); };
|
|
|
+ left.appendChild(img);
|
|
|
+
|
|
|
+ const mid = el('div', 'meta');
|
|
|
+ const name = el('div', 'name'); name.textContent = p.product_name || '—';
|
|
|
+ const desc = el('div', 'desc'); desc.textContent = p.product_short_description || '';
|
|
|
+ const badges = el('div', 'badges');
|
|
|
+ const sku = el('span', 'pill'); sku.textContent = `SKU: ${p.item_id || '—'}`; badges.appendChild(sku);
|
|
|
+ const type = el('span', 'pill'); type.textContent = p.product_type || '—'; badges.appendChild(type);
|
|
|
+ const long = el('div', 'desc'); long.textContent = p.product_long_description || ''; long.style.marginTop = '4px';
|
|
|
+ mid.appendChild(name); mid.appendChild(desc); mid.appendChild(badges); mid.appendChild(long);
|
|
|
+
|
|
|
+ const right = el('label', 'select');
|
|
|
+ const cb = document.createElement('input'); cb.type = 'checkbox'; cb.checked = selectedIds.has(p.id);
|
|
|
+ cb.addEventListener('change', () => { setChecked(p.id, cb.checked); row.classList.toggle('selected', cb.checked); });
|
|
|
+ const lbl = el('span'); lbl.textContent = 'Select';
|
|
|
+ right.appendChild(cb); right.appendChild(lbl);
|
|
|
+
|
|
|
+ // Inline attributes container (rendered on Submit)
|
|
|
+ const inline = el('div', 'attr-inline');
|
|
|
+ inline.dataset.pid = p.item_id; // use item_id for mapping
|
|
|
+
|
|
|
+ row.addEventListener('click', (e) => { if (e.target.tagName.toLowerCase() !== 'input') { cb.checked = !cb.checked; cb.dispatchEvent(new Event('change')); } });
|
|
|
+
|
|
|
+ row.appendChild(left); row.appendChild(mid); row.appendChild(right);
|
|
|
+ row.appendChild(inline);
|
|
|
+ return row;
|
|
|
+}
|
|
|
+
|
|
|
+function renderProductsCards() {
|
|
|
+ const cards = $('#cardsContainer');
|
|
|
+ cards.innerHTML = '';
|
|
|
+ PRODUCT_BASE.forEach(p => cards.appendChild(createProductCard(p)));
|
|
|
+}
|
|
|
+
|
|
|
+// --- Table layout ---
|
|
|
+function createMiniThumb(p) {
|
|
|
+ const mt = el('div', 'mini-thumb');
|
|
|
+ const img = new Image(); img.src = mediaUrl+p.image_path || p.image || ''; img.alt = `${p.product_name} image`;
|
|
|
+ console.log("img",img);
|
|
|
+ img.onerror = () => { img.remove(); const fb = el('div', 'fallback'); fb.textContent = (p.product_name || 'Product').split(' ').map(w => w[0]).slice(0,2).join('').toUpperCase(); mt.appendChild(fb); };
|
|
|
+ mt.appendChild(img);
|
|
|
+ return mt;
|
|
|
+}
|
|
|
+
|
|
|
+function renderProductsTable() {
|
|
|
+ const wrap = $('#tableContainer');
|
|
|
+ wrap.innerHTML = '';
|
|
|
+ const table = el('table');
|
|
|
+ const thead = el('thead'); const trh = el('tr');
|
|
|
+ const headers = ['Select', 'Image', 'Product', 'SKU', 'Type', 'Short Description'];
|
|
|
+ headers.forEach(h => { const th = el('th'); th.textContent = h; trh.appendChild(th); });
|
|
|
+ thead.appendChild(trh); table.appendChild(thead);
|
|
|
+ const tbody = el('tbody');
|
|
|
+
|
|
|
+ PRODUCT_BASE.forEach(p => {
|
|
|
+ const tr = el('tr'); tr.id = `row-${p.id}`;
|
|
|
+ // Select cell
|
|
|
+ const tdSel = el('td', 'select-cell'); const cb = document.createElement('input'); cb.type = 'checkbox'; cb.checked = selectedIds.has(p.id);
|
|
|
+ cb.addEventListener('change', () => { setChecked(p.id, cb.checked); tr.classList.toggle('selected', cb.checked); }); tdSel.appendChild(cb); tr.appendChild(tdSel);
|
|
|
+ // Image
|
|
|
+ const tdImg = el('td', 'thumb-cell'); tdImg.appendChild(createMiniThumb(p)); tr.appendChild(tdImg);
|
|
|
+ // Product name
|
|
|
+ const tdName = el('td'); tdName.textContent = p.product_name || '—'; tr.appendChild(tdName);
|
|
|
+ // SKU
|
|
|
+ const tdSku = el('td'); tdSku.textContent = p.item_id || '—'; tr.appendChild(tdSku);
|
|
|
+ // Type
|
|
|
+ const tdType = el('td'); const b = el('span', 'badge'); b.textContent = p.product_type || '—'; tdType.appendChild(b); tr.appendChild(tdType);
|
|
|
+ // Short description
|
|
|
+ const tdDesc = el('td'); tdDesc.textContent = p.product_short_description || ''; tr.appendChild(tdDesc);
|
|
|
+
|
|
|
+ tr.addEventListener('click', (e) => { if (e.target.tagName.toLowerCase() !== 'input') { cb.checked = !cb.checked; cb.dispatchEvent(new Event('change')); } });
|
|
|
+ tbody.appendChild(tr);
|
|
|
+ });
|
|
|
+
|
|
|
+ table.appendChild(tbody);
|
|
|
+ wrap.appendChild(table);
|
|
|
+}
|
|
|
+
|
|
|
+// --- Inline attributes rendering ---
|
|
|
+function renderInlineForCards() {
|
|
|
+ const api = FAKE_API_RESPONSE;
|
|
|
+ // Clear all inline sections first
|
|
|
+ document.querySelectorAll('.attr-inline').forEach(div => div.innerHTML = '');
|
|
|
+
|
|
|
+ PRODUCT_BASE.forEach((p, idx) => {
|
|
|
+ const inline = document.querySelector(`.attr-inline[data-pid="${p.item_id}"]`);
|
|
|
+ if (!inline) return;
|
|
|
+ if (!selectedIds.has(p.id)) return; // only show for selected
|
|
|
+ const res = findApiResultForProduct(p, idx, api);
|
|
|
+ const pid = p.item_id;
|
|
|
+ if (!lastSeen.has(pid)) lastSeen.set(pid, { mandatory: new Map(), additional: new Map() });
|
|
|
+ const mem = lastSeen.get(pid);
|
|
|
+
|
|
|
+ // Build sections
|
|
|
+ const manTitle = el('div', 'section-title'); manTitle.innerHTML = '<strong>Mandatory</strong>';
|
|
|
+ const manChips = el('div', 'chips');
|
|
|
+ const addTitle = el('div', 'section-title'); addTitle.innerHTML = '<strong>Additional</strong>';
|
|
|
+ const addChips = el('div', 'chips');
|
|
|
+
|
|
|
+ const mandCount = renderChips(manChips, res?.mandatory || {}, mem.mandatory);
|
|
|
+ const addCount = renderChips(addChips, res?.additional || {}, mem.additional);
|
|
|
+
|
|
|
+ const counts = el('div'); counts.style.display = 'flex'; counts.style.gap = '8px'; counts.style.margin = '8px 0 0';
|
|
|
+ const c1 = el('span', 'pill'); c1.textContent = `Mandatory: ${mandCount}`;
|
|
|
+ const c2 = el('span', 'pill'); c2.textContent = `Additional: ${addCount}`;
|
|
|
+ counts.appendChild(c1); counts.appendChild(c2);
|
|
|
+
|
|
|
+ inline.appendChild(manTitle); inline.appendChild(manChips);
|
|
|
+ inline.appendChild(addTitle); inline.appendChild(addChips);
|
|
|
+ inline.appendChild(counts);
|
|
|
+ });
|
|
|
+
|
|
|
+ // Update summary
|
|
|
+ $('#statTotal').textContent = api.total_products ?? 0;
|
|
|
+ $('#statOk').textContent = api.successful ?? 0;
|
|
|
+ $('#statKo').textContent = api.failed ?? 0;
|
|
|
+}
|
|
|
+
|
|
|
+function renderInlineForTable() {
|
|
|
+ const api = FAKE_API_RESPONSE;
|
|
|
+ const table = $('#tableContainer');
|
|
|
+ if (!table) return;
|
|
|
+ // Remove existing detail rows
|
|
|
+ table.querySelectorAll('tr.detail-row').forEach(r => r.remove());
|
|
|
+
|
|
|
+ PRODUCT_BASE.forEach((p, idx) => {
|
|
|
+ if (!selectedIds.has(p.id)) return;
|
|
|
+ const res = findApiResultForProduct(p, idx, api);
|
|
|
+ const pid = p.item_id;
|
|
|
+ if (!lastSeen.has(pid)) lastSeen.set(pid, { mandatory: new Map(), additional: new Map() });
|
|
|
+ const mem = lastSeen.get(pid);
|
|
|
+
|
|
|
+ const tbody = table.querySelector('tbody');
|
|
|
+ const baseRow = tbody.querySelector(`#row-${p.id}`);
|
|
|
+ if (!baseRow) return;
|
|
|
+
|
|
|
+ const detail = el('tr', 'detail-row');
|
|
|
+ const td = el('td'); td.colSpan = 6; // number of columns
|
|
|
+ const content = el('div', 'detail-content');
|
|
|
+
|
|
|
+ const manTitle = el('div', 'section-title'); manTitle.innerHTML = '<strong>Mandatory</strong>';
|
|
|
+ const manChips = el('div', 'chips');
|
|
|
+ const addTitle = el('div', 'section-title'); addTitle.innerHTML = '<strong>Additional</strong>';
|
|
|
+ const addChips = el('div', 'chips');
|
|
|
+
|
|
|
+ const mandCount = renderChips(manChips, res?.mandatory || {}, mem.mandatory);
|
|
|
+ const addCount = renderChips(addChips, res?.additional || {}, mem.additional);
|
|
|
+
|
|
|
+ const counts = el('div'); counts.style.display = 'flex'; counts.style.gap = '8px'; counts.style.margin = '8px 0 0';
|
|
|
+ const c1 = el('span', 'pill'); c1.textContent = `Mandatory: ${mandCount}`;
|
|
|
+ const c2 = el('span', 'pill'); c2.textContent = `Additional: ${addCount}`;
|
|
|
+ counts.appendChild(c1); counts.appendChild(c2);
|
|
|
+
|
|
|
+ content.appendChild(manTitle); content.appendChild(manChips);
|
|
|
+ content.appendChild(addTitle); content.appendChild(addChips);
|
|
|
+ content.appendChild(counts);
|
|
|
+ td.appendChild(content); detail.appendChild(td);
|
|
|
+
|
|
|
+ // insert after base row
|
|
|
+ baseRow.insertAdjacentElement('afterend', detail);
|
|
|
+ });
|
|
|
+
|
|
|
+ // Update summary
|
|
|
+ $('#statTotal').textContent = api.total_products ?? 0;
|
|
|
+ $('#statOk').textContent = api.successful ?? 0;
|
|
|
+ $('#statKo').textContent = api.failed ?? 0;
|
|
|
+}
|
|
|
+
|
|
|
+function renderInlineAttributes() {
|
|
|
+ if (layoutMode === 'cards') renderInlineForCards(); else renderInlineForTable();
|
|
|
+}
|
|
|
+
|
|
|
+// --- Main rendering ---
|
|
|
+function renderProducts() {
|
|
|
+ if (layoutMode === 'cards') {
|
|
|
+ $('#cardsContainer').style.display = '';
|
|
|
+ $('#tableContainer').style.display = 'none';
|
|
|
+ renderProductsCards();
|
|
|
+ } else {
|
|
|
+ $('#cardsContainer').style.display = 'none';
|
|
|
+ $('#tableContainer').style.display = '';
|
|
|
+ renderProductsTable();
|
|
|
+ }
|
|
|
+ updateSelectionInfo();
|
|
|
+ // If there is a selection, re-render inline attributes (persist across toggle)
|
|
|
+ if (selectedIds.size > 0) renderInlineAttributes();
|
|
|
+}
|
|
|
+
|
|
|
+// --- Submit & Reset ---
|
|
|
+function submitAttributes() {
|
|
|
+ if (selectedIds.size === 0) { alert('Please select at least one product.'); return; }
|
|
|
+ renderInlineAttributes();
|
|
|
+}
|
|
|
+
|
|
|
+function resetAll() {
|
|
|
+ selectedIds.clear();
|
|
|
+ lastSeen.clear();
|
|
|
+ renderProducts();
|
|
|
+ // Clear summary
|
|
|
+ document.getElementById('statTotal').textContent = '0';
|
|
|
+ document.getElementById('statOk').textContent = '0';
|
|
|
+ document.getElementById('statKo').textContent = '0';
|
|
|
+}
|
|
|
+
|
|
|
+function setLayout(mode) {
|
|
|
+ layoutMode = mode;
|
|
|
+ const btnCards = document.getElementById('btnCards');
|
|
|
+ const btnTable = document.getElementById('btnTable');
|
|
|
+ if (mode === 'cards') { btnCards.classList.add('active'); btnCards.setAttribute('aria-selected', 'true'); btnTable.classList.remove('active'); btnTable.setAttribute('aria-selected', 'false'); }
|
|
|
+ else { btnTable.classList.add('active'); btnTable.setAttribute('aria-selected', 'true'); btnCards.classList.remove('active'); btnCards.setAttribute('aria-selected', 'false'); }
|
|
|
+ renderProducts();
|
|
|
+}
|
|
|
+
|
|
|
+// --- Wire up ---
|
|
|
+document.addEventListener('DOMContentLoaded', () => {
|
|
|
+ renderProducts();
|
|
|
+ document.getElementById('btnSubmit').addEventListener('click', submitAttributes);
|
|
|
+ document.getElementById('btnReset').addEventListener('click', resetAll);
|
|
|
+ document.getElementById('btnSelectAll').addEventListener('click', () => {
|
|
|
+ if (selectedIds.size === PRODUCT_BASE.length) { selectedIds.clear(); } else { selectedIds = new Set(PRODUCT_BASE.map(p => p.id)); }
|
|
|
+ renderProducts();
|
|
|
+ });
|
|
|
+ document.getElementById('btnCards').addEventListener('click', () => setLayout('cards'));
|
|
|
+ document.getElementById('btnTable').addEventListener('click', () => setLayout('table'));
|
|
|
+});
|
