feats: ordenar tabela produtos clicando no cabeçalho | fundo red para quantidade menor de 20 na tabela produto

gestaoRaul/templates/static/products/css/products.css

@@ -50,6 +50,40 @@
      background-color: rgba(0, 0, 0, 0.6); 
   }
 
+  th {
+      background-color: #170e4f;
+      cursor: pointer;
+      position: relative;
+    }
+
+  th.sorted-asc::after {
+      content: " ▲";
+      font-size: 0.8em;
+      vertical-align: super;
+    }
+    th.sorted-desc::after {
+      content: " ▼";
+      font-size: 0.8em;
+      vertical-align: super;
+    }
+
+    #product-list {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+#product-list th,
+#product-list td {
+  padding: 8px;
+  text-align: left;
+}
+
+#product-list th {
+  position: sticky; 
+  top: 60px;          
+  z-index: 10;     
+  /* cursor: pointer;   */
+}
 
   @media (max-width: 768px) {
     .hide-on-mobile {

gestaoRaul/templates/static/products/js/products.js

@@ -93,4 +93,95 @@ function editProduct(id) {
     // closeModal();
 // }
 // );
- 
+ 
+function listerSortTeable(){
+    
+
+
+// document.addEventListener('DOMContentLoaded', function() {
+  const table = document.getElementById('product-list');
+  const headers = table.querySelectorAll('th');
+  const tbody = table.querySelector('tbody'); // Seleciona o corpo da tabela
+
+  let currentSortColumn = -1; // Armazena o índice da coluna atualmente ordenada
+  let sortDirection = 'asc'; // 'asc' para ascendente, 'desc' para descendente
+
+  // Adiciona um ouvinte de evento de clique a cada cabeçalho de coluna
+  headers.forEach((header, index) => {
+    if (header.textContent.trim() !== 'Ações') {
+      header.addEventListener('click', () => {
+        // Se a mesma coluna for clicada, inverte a direção da ordenação
+        if (currentSortColumn === index) {
+          sortDirection = (sortDirection === 'asc') ? 'desc' : 'asc';
+        } else {
+          // Se uma nova coluna for clicada, define como a coluna atual
+          // e inicia a ordenação ascendente
+          currentSortColumn = index;
+          sortDirection = 'asc';
+        }
+
+        // Remove as classes de ordenação de todos os cabeçalhos
+        headers.forEach(h => {
+          h.classList.remove('sorted-asc', 'sorted-desc');
+        });
+
+        // Adiciona a classe de ordenação ao cabeçalho clicado para visualização
+        header.classList.add(`sorted-${sortDirection}`);
+
+        // Chama a função de ordenação
+        sortColumn(index, sortDirection, header.dataset.colType);
+      });
+    }
+  })
+
+  function sortColumn(columnIndex, direction, columnType) {
+    // Converte os NodeList de linhas em um Array para poder usar sort()
+    const rows = Array.from(tbody.querySelectorAll('tr'));
+
+    rows.sort((rowA, rowB) => {
+      // Obtém o texto da célula na coluna clicada para ambas as linhas
+      let valueA = rowA.children[columnIndex].textContent.trim();
+      let valueB = rowB.children[columnIndex].textContent.trim();
+
+      // Trata valores específicos para colunas como "Preço" que têm "R$"
+      if (columnIndex === 1) { // Índice da coluna "Preço"
+        valueA = valueA.replace('R$', '').trim();
+        valueB = valueB.replace('R$', '').trim();
+      }
+
+      // Converte para número se o tipo da coluna for "number"
+      // ou se for a coluna de "Preço" após remover "R$"
+      if (columnType === 'number' || columnIndex === 1) {
+        valueA = parseFloat(valueA);
+        valueB = parseFloat(valueB);
+        // Garante que NaN (Not a Number) sejam tratados para evitar problemas de ordenação
+        valueA = isNaN(valueA) ? -Infinity : valueA;
+        valueB = isNaN(valueB) ? -Infinity : valueB;
+      } else {
+        // Para texto, use localeCompare para ordenação correta com caracteres acentuados
+        // e torna minúsculo para ordenação case-insensitive
+        valueA = valueA.toLowerCase();
+        valueB = valueB.toLowerCase();
+      }
+
+      let comparison = 0;
+      if (valueA > valueB) {
+        comparison = 1;
+      } else if (valueA < valueB) {
+        comparison = -1;
+      }
+
+      // Aplica a direção da ordenação
+      return (direction === 'asc') ? comparison : -comparison;
+    });
+
+    // Remove todas as linhas existentes e adiciona as linhas ordenadas de volta ao tbody
+    while (tbody.firstChild) {
+      tbody.removeChild(tbody.firstChild);
+    }
+    rows.forEach(row => tbody.appendChild(row));
+  }
+// });
+}
+
+listerSortTeable();