UI change

content_quality_tool_public/static/js/attr-extraction.js

@@ -881,7 +881,7 @@ function renderProductsTable(items = getCurrentSlice()) {
     trh.appendChild(thSelect);
 
     // Other headers
-    ['Image', 'Product', 'SKU', 'Type', 'Short Description'].forEach(h => {
+    ['Image', 'Product', 'SKU', 'Type', 'Description'].forEach(h => {
         const th = document.createElement('th');
         th.textContent = h;
         trh.appendChild(th);
@@ -930,10 +930,53 @@ function renderProductsTable(items = getCurrentSlice()) {
             tdType.appendChild(b);
             tr.appendChild(tdType);
 
+            // const tdDesc = document.createElement('td');
+            // tdDesc.innerHTML = p.product_short_description || '';
+            // tr.appendChild(tdDesc);
+
             const tdDesc = document.createElement('td');
-            tdDesc.innerHTML = p.product_short_description || '';
+
+            // Create a container for descriptions
+            const descContainer = document.createElement('div');
+            descContainer.classList.add('description-cell');
+
+            // Short description (always visible)
+            const shortDesc = document.createElement('div');
+            shortDesc.classList.add('short-desc');
+            shortDesc.innerHTML = `<strong>Short Description:</strong> ${p.product_short_description || 'N/A'}`;
+
+            // Long description (hidden initially)
+            const longDesc = document.createElement('div');
+            longDesc.classList.add('long-desc');
+            longDesc.innerHTML = `<strong>Long Description:</strong> ${p.product_long_description || 'N/A'}`;
+            longDesc.style.display = 'none';
+
+            // Button to toggle long description
+            const toggleBtn = document.createElement('button');
+            toggleBtn.textContent = 'Show Long Description';
+            toggleBtn.classList.add('btn');
+            toggleBtn.classList.add('btn-primary');
+            toggleBtn.classList.add('btn-sm');
+            toggleBtn.classList.add('btn-toggle-desc');
+            toggleBtn.style.fontSize = 'smaller';
+            toggleBtn.style.margin = '5px';
+
+
+            // Toggle logic
+            toggleBtn.addEventListener('click', () => {
+            const isVisible = longDesc.style.display === 'block';
+            longDesc.style.display = isVisible ? 'none' : 'block';
+            toggleBtn.textContent = isVisible ? 'Show Long Description' : 'Hide Long Description';
+            });
+
+            // Append elements in order
+            descContainer.appendChild(shortDesc);
+            descContainer.appendChild(toggleBtn);
+            descContainer.appendChild(longDesc);
+            tdDesc.appendChild(descContainer);
             tr.appendChild(tdDesc);
 
+
             // Handle attribute rows (kept your same logic)
             const detailRow = document.createElement('tr');
             detailRow.classList.add('attribute-detail-row');