From f191b6a14b734805e2796e7cef2ff9eb538537f0 Mon Sep 17 00:00:00 2001 From: Welton Moura Date: Sat, 19 Jul 2025 13:29:55 -0300 Subject: [PATCH] =?UTF-8?q?feats:=20ordenar=20tabela=20produtos=20clicando?= =?UTF-8?q?=20no=20cabe=C3=A7alho=20|=20fundo=20red=20para=20quantidade=20?= =?UTF-8?q?menor=20de=2020=20na=20tabela=20produto?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- gestaoRaul/db.sqlite3 | Bin 364544 -> 364544 bytes gestaoRaul/products/templates/products.html | 114 +++++----- .../products/htmx_search_products.html | 198 +++++++++++++----- .../static/products/css/products.css | 34 +++ .../templates/static/products/js/products.js | 93 +++++++- 5 files changed, 331 insertions(+), 108 deletions(-) diff --git a/gestaoRaul/db.sqlite3 b/gestaoRaul/db.sqlite3 index 548a884f20cb385c9ce7bb587d3ef0f48ec1c5a4..820daa33ea516b3048ac9e29e700bdf6f873ee96 100644 GIT binary patch delta 762 zcmY+9Ur5tY6vyv9_uk*%{hX$Ab1K^`D=}GG#4HSdNi2H^%nYoDd@vMA5eiB$)S!B( zhs|Nvr!;~_Vc<*L9+Wm3^q_`4gw%|JULq*1w!*i5+t0-AfphqN&bjA)@91>t=yYkM z9DAb`E!aEOb+ZdU>w;My7;AioAC8MoKTH5PUGeW#AmNSp+FoFc5*14#QwJKZEJ6(B z^ub&@kV_5DYD5{q80vX>5Qgvoe9+$PT+x~aAFjAY+&Xd_SXIY*Fb^fk6|9JvB&m_8<-8(l zdc==cq?P&0>ortqEy9MPw3}h`OzSbTIbi<|tisQ~AWgUV5)pif_EpIcLv7HnaAloN zdbG=OuR1_#pr59;hj_kD)0oozXfW1RcuA07w9b-4sM?YN-jSiZC{1mu`x&~MvKx6- uMRwky{6dy`ILp%Ol)c^@if8E_s-8e6tp#CG_L~L?RX^Bw#J~m}zxNm5ue3z~ delta 965 zcmZvYO-K}B7{}lDdEa^0*>Q5sboww|r?!-IcRqJ^X0ed`s7p{`RF^zNMqm&HAy{fq z9omDs*c%tYvv&;|EvM`Kv!MjR5j+&>V9t1$jU1%_wGXX`-_Jq49RWFNZc3lq?YBPpp~s+0P-HVJi7 zv(znJlio?wrTzZVNq8#uGlIck?IGGiv04}QtJ2yav zl@~=}G=Rf8!Y*H&3E#qQI6#(pjE_yh4t$$`nSz^18cTDTy*jvN?(uA^+qiNz%d-}6_`(;A#mbMe2enjJTE&n~3U zl6EGOcJ!>mI~V9?D$Juqes8Rf-&mkq8q{3J-^P{rmZ!PNOvcu&ApWK+lpk57Yq_vU z&k;4}@>9#SQr11gN~R6d)`IKfi*##Y<`rk81-O%&g+~EYtkeKb^eO3;+NC 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