diff --git a/app/static/js/contacts.js b/app/static/js/contacts.js index 734f066..a7354ee 100644 --- a/app/static/js/contacts.js +++ b/app/static/js/contacts.js @@ -855,18 +855,15 @@ function attachExistingEventListeners() { }); } - // Sort buttons - const sortByName = document.getElementById('sortByName'); - if (sortByName) { - sortByName.addEventListener('click', () => { - handleSortChange('name'); - }); - } - - const sortByLastAdvert = document.getElementById('sortByLastAdvert'); - if (sortByLastAdvert) { - sortByLastAdvert.addEventListener('click', () => { - handleSortChange('last_advert'); + // Sort dropdown + const sortSelect = document.getElementById('sortSelect'); + if (sortSelect) { + sortSelect.addEventListener('change', () => { + const lastUnderscore = sortSelect.value.lastIndexOf('_'); + sortBy = sortSelect.value.substring(0, lastUnderscore); + sortOrder = sortSelect.value.substring(lastUnderscore + 1); + updateURLWithSortParams(); + applySortAndFilters(); }); } @@ -1725,31 +1722,11 @@ function parseSortParamsFromURL() { console.log('Parsed sort params:', { sortBy, sortOrder }); - // Update UI to reflect current sort - updateSortUI(); -} - -function handleSortChange(newSortBy) { - if (sortBy === newSortBy) { - // Toggle order - sortOrder = sortOrder === 'asc' ? 'desc' : 'asc'; - } else { - // Change sort field - sortBy = newSortBy; - // Set default order for new field - sortOrder = newSortBy === 'name' ? 'asc' : 'desc'; + // Update sort dropdown to reflect current sort + const sortSelect = document.getElementById('sortSelect'); + if (sortSelect) { + sortSelect.value = `${sortBy}_${sortOrder}`; } - - console.log('Sort changed to:', { sortBy, sortOrder }); - - // Update URL parameters - updateURLWithSortParams(); - - // Update UI - updateSortUI(); - - // Re-apply filters and sort - applySortAndFilters(); } function updateURLWithSortParams() { @@ -1759,30 +1736,6 @@ function updateURLWithSortParams() { window.history.replaceState({}, '', url); } -function updateSortUI() { - // Update sort button active states and icons - const sortButtons = document.querySelectorAll('.sort-btn'); - - sortButtons.forEach(btn => { - const btnSort = btn.dataset.sort; - const icon = btn.querySelector('i'); - - if (btnSort === sortBy) { - // Active button - btn.classList.add('active'); - if (icon) { - icon.className = sortOrder === 'asc' ? 'bi bi-sort-up' : 'bi bi-sort-down'; - } - } else { - // Inactive button - btn.classList.remove('active'); - if (icon) { - icon.className = 'bi bi-sort-down'; // Default icon - } - } - }); -} - function applySortAndFilters() { const searchInput = document.getElementById('searchInput'); const typeFilter = document.getElementById('typeFilter'); diff --git a/app/templates/contacts-existing.html b/app/templates/contacts-existing.html index a5e3acb..eb17c77 100644 --- a/app/templates/contacts-existing.html +++ b/app/templates/contacts-existing.html @@ -45,17 +45,13 @@ - -
- - -
+ + diff --git a/app/templates/contacts_base.html b/app/templates/contacts_base.html index 7362010..239d80b 100644 --- a/app/templates/contacts_base.html +++ b/app/templates/contacts_base.html @@ -340,38 +340,6 @@ font-size: 0.85rem; } - .sort-buttons { - display: flex; - gap: 0.375rem; - } - - .sort-btn { - display: flex; - align-items: center; - gap: 0.2rem; - padding: 0.35rem 0.5rem; - background: #f8f9fa; - border: 1px solid #dee2e6; - border-radius: 0.375rem; - cursor: pointer; - font-size: 0.85rem; - transition: all 0.2s; - white-space: nowrap; - } - - .sort-btn:hover { - background: #e9ecef; - } - - .sort-btn.active { - background-color: #0d6efd; - color: white; - border-color: #0d6efd; - } - - .sort-btn i { - font-size: 0.85rem; - } /* NEW: Back buttons */ .back-buttons {