diff --git a/gestaoRaul/db.sqlite3 b/gestaoRaul/db.sqlite3 index 548a884..820daa3 100644 Binary files a/gestaoRaul/db.sqlite3 and b/gestaoRaul/db.sqlite3 differ diff --git a/gestaoRaul/products/templates/products.html b/gestaoRaul/products/templates/products.html index faae47f..9873ab4 100644 --- a/gestaoRaul/products/templates/products.html +++ b/gestaoRaul/products/templates/products.html @@ -18,73 +18,75 @@ Produtos
- + Cardápio Digital
- - - - - - - - - - {% for product in products %} +
ProdutoPreçoQuantidadeCategoriaAções
+ + + + + + + + {% for product in products %} + + + - - - - - - - - + {% else %} + + {% endif %} + + + - - - {% endfor %} - -
ProdutoPreçoQuantidadeCategoriaAções
{{product.name}}R$ {{product.price}}
{{product.name}}R$ {{product.price}}{{product.quantity}}{{product.category.name}} -
- - + {% if product.quantity > 20 %} +
{{product.quantity}}{{product.quantity}}{{product.category.name}} +
+ + -
+ {% csrf_token %} - + - {% if product.active == True %} - - {% else %} - - - {% endif %} - -
-
-
+ {% if product.active == True %} + + {% else %} + + {% endif %} + + + + + {% endfor %} + + diff --git a/gestaoRaul/templates/htmx_components/products/htmx_search_products.html b/gestaoRaul/templates/htmx_components/products/htmx_search_products.html index 8fe4717..b94740d 100644 --- a/gestaoRaul/templates/htmx_components/products/htmx_search_products.html +++ b/gestaoRaul/templates/htmx_components/products/htmx_search_products.html @@ -1,64 +1,160 @@ {% load static %} - - Produto - Preço - Quantidade - Categoria - Ações - + + Produto + Preço + Quantidade + Categoria + Ações + + {% for product in products %} + + {{product.name}} + R$ {{product.price}} -{% for product in products %} + {% if product.quantity > 20 %} + {{product.quantity}} + {% else %} + {{product.quantity}} + {% endif %} + {{product.image}} + {{product.category.name}} + +
+ + - -{{product.name}} -R$ {{product.price}} -{{product.quantity}} -{{product.category.name}} -{{product.image}} + + + - -
- - - - +
+ {% csrf_token %} + + + {% if product.active == True %} + + {% else %} + + {% endif %} +
+
+ + + {% endfor %} + + + + \ No newline at end of file diff --git a/gestaoRaul/templates/static/products/css/products.css b/gestaoRaul/templates/static/products/css/products.css index 38dbe28..4c63b80 100644 --- a/gestaoRaul/templates/static/products/css/products.css +++ b/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 { diff --git a/gestaoRaul/templates/static/products/js/products.js b/gestaoRaul/templates/static/products/js/products.js index 0a18682..171d0d5 100644 --- a/gestaoRaul/templates/static/products/js/products.js +++ b/gestaoRaul/templates/static/products/js/products.js @@ -93,4 +93,95 @@ function editProduct(id) { // closeModal(); // } // ); - \ No newline at end of file + +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(); \ No newline at end of file