changes for the UI

content_quality_tool_public/static/css/attr-extraction.css

@@ -74,7 +74,8 @@ h1 { font-size: 1.6rem; margin: 0; letter-spacing: .3px; }
 
 /* Cards layout */
 .list { display: grid; gap: 12px; }
-.product { display: grid; grid-template-columns: 64px 1fr 1fr auto; gap: 12px; align-items: start; padding: 10px; border-radius: 12px; background: #ffffff; border: 1px solid var(--border); cursor: pointer; }
+.product { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: start; padding: 10px; border-radius: 12px; background: #ffffff; border: 1px solid var(--border); cursor: pointer; }
+/* .product { display: grid; grid-template-columns: 64px 1fr 1fr auto; gap: 12px; align-items: start; padding: 10px; border-radius: 12px; background: #ffffff; border: 1px solid var(--border); cursor: pointer; } */
 .product:hover { border-color: var(--row-hover); }
 .product.selected { outline: 2px solid var(--brand-2); box-shadow: 0 0 0 3px rgba(20,184,166,.15); }
 

content_quality_tool_public/static/js/attr-extraction.js

@@ -42,7 +42,7 @@ document.addEventListener('DOMContentLoaded', () => {
         renderProducts();
         getAtributeList();
         document.getElementById('btnSubmit').addEventListener('click', submitAttributes);
-        document.getElementById('btnReset').addEventListener('click', resetAll);
+        // 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();
@@ -304,17 +304,17 @@ if(p.product_type_details.length > 0){
     });
     
     // --- Render Mandatory Attributes ---
-    if (mandatoryAttributes.length > 0) {
-        const manTitle = el('p', "pSelectRight mandatory-title");
-        manTitle.innerHTML = "Mandatory Attributes:";
-        attrContainer.appendChild(manTitle);
-
-        mandatoryAttributes.forEach(attr => {
-            const initialSelected = getSelectedAttributes(p.item_id)[attr.attribute_name] || attr.possible_values;
-            const chipGroup = createAttributeChips(p, attr, initialSelected, true, updateProductState);
-            attrContainer.appendChild(chipGroup);
-        });
-    }
+    // if (mandatoryAttributes.length > 0) {
+    //     const manTitle = el('p', "pSelectRight mandatory-title");
+    //     manTitle.innerHTML = "Mandatory Attributes:";
+    //     attrContainer.appendChild(manTitle);
+
+    //     mandatoryAttributes.forEach(attr => {
+    //         const initialSelected = getSelectedAttributes(p.item_id)[attr.attribute_name] || attr.possible_values;
+    //         const chipGroup = createAttributeChips(p, attr, initialSelected, true, updateProductState);
+    //         attrContainer.appendChild(chipGroup);
+    //     });
+    // }
 
     // --- Render Optional Attributes ---
     if (optionalAttributes.length > 0) {
@@ -348,7 +348,7 @@ if(p.product_type_details.length > 0){
     row.appendChild(container); row.appendChild(mid);
     if(p.product_type_details.length > 0){
         console.log("IN ");
-        row.appendChild(attrContainer); // Append the new attribute selectors container
+        // row.appendChild(attrContainer); // Append the new attribute selectors container
     }    
     row.appendChild(right);
     // if (p.mandatoryAttributes && p.mandatoryAttributes.length > 0) { 
@@ -724,7 +724,7 @@ function renderProductsTable(items = getCurrentSlice()) {
     const trh = document.createElement('tr');
     
     // Table Headers
-    ['Select', 'Image', 'Product', 'SKU', 'Type', 'Short Description', 'Attributes'].forEach(h => {
+    ['Select', 'Image', 'Product', 'SKU', 'Type', 'Short Description'].forEach(h => {
         const th = document.createElement('th'); th.textContent = h; trh.appendChild(th);
     });
     thead.appendChild(trh); table.appendChild(thead);
@@ -770,7 +770,7 @@ function renderProductsTable(items = getCurrentSlice()) {
             detailRow.id = `detail-row-${p.id}`;
             
             const detailCell = document.createElement('td');
-            detailCell.colSpan = 7; // Must span all columns
+            detailCell.colSpan = 6; // Must span all columns
             
             const attrContainer = document.createElement('div');
             attrContainer.id = `attr-container-${p.item_id}`; // Unique ID for targeting by updateProductState
@@ -792,7 +792,7 @@ function renderProductsTable(items = getCurrentSlice()) {
                 toggleButton.textContent = 'Configure';
                 toggleButton.classList.add('btn', 'btn-sm', 'btn-info', 'attribute-toggle-btn');
                 tdAttr.appendChild(toggleButton);
-                tr.appendChild(tdAttr);
+                // tr.appendChild(tdAttr);
             
 
 
@@ -850,7 +850,7 @@ function renderProductsTable(items = getCurrentSlice()) {
     } else {
         const tr = el('tr'); 
         const tdName = el('td');
-        tdName.colSpan = 7; 
+        tdName.colSpan = 6; 
         tdName.innerHTML = "No Products Found.";
         tr.appendChild(tdName);
         tbody.appendChild(tr);
@@ -1750,7 +1750,7 @@ function renderInlineForTable() {
         // --- Detail Row Construction ---
         const detail = el('tr', 'detail-row');
         // td.colSpan must match the number of columns in your main table
-        const td = el('td'); td.colSpan = 7; 
+        const td = el('td'); td.colSpan = 6; 
         const content = el('div', 'detail-content-tables');
 
         // 1. MANDATORY Attributes Table

content_quality_tool_public/templates/attr-extraction.html

@@ -87,15 +87,15 @@
                         </div>
                         <!-- <input type="checkbox" id="extract_additional" name="extract_additional"/>
                         <input type="checkbox" id="process_image" name="process_image"/> -->
-                        <button id="btnSubmit" class="btn btn-primary" title="AI Suggested">View Attributes</button>
-                        <button id="btnReset" class="btn btn-secondary">Reset</button>
+                        <button id="btnSubmit" class="btn btn-primary" title="AI Suggested">View AI Suggested Attributes</button>
+                        <!-- <button id="btnReset" class="btn btn-secondary">Reset</button> -->
                         <button id="btnSelectAll" class="btn btn-primary">Select all</button>
                         <!-- Upload trigger button -->
                         <button id="btnUpload" type="button"
                                 class="btn btn-info"
                                 data-bs-toggle="modal"
                                 data-bs-target="#uploadModal">
-                                Upload
+                                Upload Products
                         </button>
                     </div>
                     </header>