diff --git a/app/views/assignments/by_user.html.erb b/app/views/assignments/by_user.html.erb index 8d5dd6bdb38d8284a376ad4bde6592e9e4c75a63..05c1140c3cf2c671ea02c1af949c95e61a223d80 100644 --- a/app/views/assignments/by_user.html.erb +++ b/app/views/assignments/by_user.html.erb @@ -193,38 +193,89 @@ const tabContents = document.querySelectorAll('[role="tabpanel"]'); const showCandidatesCheckbox = document.getElementById('showCandidates'); + // Helper function to parse URL hash into an object + function getHashParams() { + const hash = window.location.hash.substring(1); + const params = {}; + if (hash) { + hash.split('&').forEach(part => { + const [key, value] = part.split('='); + if (key) { + params[key] = value === undefined ? true : decodeURIComponent(value); + } + }); + } + return params; + } + + // Helper function to update URL hash from an object + function updateUrlHash(newParams) { + const currentParams = getHashParams(); + const updatedParams = { ...currentParams, ...newParams }; + + const hashParts = []; + for (const key in updatedParams) { + if (updatedParams[key] !== undefined && updatedParams[key] !== null) { + hashParts.push(`${encodeURIComponent(key)}=${encodeURIComponent(updatedParams[key])}`); + } + } + const newHash = hashParts.join('&'); + window.history.replaceState(null, null, newHash ? `#${newHash}` : window.location.pathname + window.location.search); + } + // Function to switch tabs - function switchTab(targetId) { + function switchTab(targetId, preserveHash = false) { const target = document.querySelector(targetId); const button = document.querySelector(`[data-tabs-target="${targetId}"]`); if (!target || !button) return; - // Hide all tabs tabContents.forEach(content => { content.classList.add('hidden'); content.classList.remove('block'); }); - // Remove active state from all buttons tabButtons.forEach(btn => { btn.classList.remove('text-blue-600', 'dark:text-blue-500', 'border-blue-600', 'dark:border-blue-500', 'active'); btn.classList.add('text-gray-500', 'dark:text-gray-400', 'border-transparent'); btn.setAttribute('aria-selected', 'false'); }); - // Show the selected tab target.classList.remove('hidden'); target.classList.add('block'); - // Set active state on clicked button button.classList.remove('text-gray-500', 'dark:text-gray-400', 'border-transparent'); button.classList.add('text-blue-600', 'dark:text-blue-500', 'border-blue-600', 'dark:border-blue-500', 'active'); button.setAttribute('aria-selected', 'true'); - // Update URL hash - const viewName = targetId === '#listViewTab' ? 'list' : 'table'; - window.history.replaceState(null, null, `#${viewName}`); + if (!preserveHash) { + const viewName = targetId === '#listViewTab' ? 'list' : 'table'; + updateUrlHash({ view: viewName }); + } + } + + // Function to toggle candidate visibility + function toggleCandidatesVisibility(show) { + const candidateTableRows = document.querySelectorAll('tr.bg-yellow-50'); + candidateTableRows.forEach(row => { + row.style.display = show ? '' : 'none'; + }); + + const listItems = document.querySelectorAll('#listViewTab li'); + listItems.forEach(item => { + const hasCandidate = item.querySelector('.bg-yellow-100'); + if (hasCandidate) { + item.style.display = show ? '' : 'none'; + } + }); + + document.querySelectorAll('#listViewTab .mb-6').forEach(dateGroup => { + const groupListItems = dateGroup.querySelectorAll('li'); + if (groupListItems.length > 0) { + const visibleItems = Array.from(groupListItems).filter(item => item.style.display !== 'none'); + dateGroup.style.display = visibleItems.length === 0 ? 'none' : ''; + } + }); } // Handle tab clicks @@ -234,62 +285,29 @@ }); }); - // Handle initial load based on URL hash - const hash = window.location.hash; - if (hash === '#table') { - switchTab('#tableViewTab'); - } else if (hash === '#list' || !hash) { - switchTab('#listViewTab'); - } - // Handle candidate filter if (showCandidatesCheckbox) { - // Function to toggle candidate visibility - function toggleCandidates(show) { - // For table view - find rows with yellow background - const candidateTableRows = document.querySelectorAll('tr.bg-yellow-50'); - candidateTableRows.forEach(row => { - if (show) { - row.style.display = ''; - } else { - row.style.display = 'none'; - } - }); - - // For list view - find list items that contain the CANDIDATE badge - const listItems = document.querySelectorAll('#listViewTab li'); - listItems.forEach(item => { - const hasCandidate = item.querySelector('.bg-yellow-100'); - if (hasCandidate) { - if (show) { - item.style.display = ''; - } else { - item.style.display = 'none'; - } - } - }); - - // Also hide/show date headers if all items in that date are hidden - document.querySelectorAll('#listViewTab .mb-6').forEach(dateGroup => { - const listItems = dateGroup.querySelectorAll('li'); - if (listItems.length > 0) { - const visibleItems = Array.from(listItems).filter(item => item.style.display !== 'none'); - if (visibleItems.length === 0) { - dateGroup.style.display = 'none'; - } else { - dateGroup.style.display = ''; - } - } - }); - } - - // Initial state - toggleCandidates(showCandidatesCheckbox.checked); - - // Handle checkbox changes showCandidatesCheckbox.addEventListener('change', function() { - toggleCandidates(this.checked); + toggleCandidatesVisibility(this.checked); + updateUrlHash({ candidates: this.checked.toString() }); }); } + + // Initial load based on URL hash + const initialParams = getHashParams(); + + // Set initial tab view + if (initialParams.view === 'table') { + switchTab('#tableViewTab', true); // true to preserve other hash parts + } else { // Default to list view + switchTab('#listViewTab', true); + } + + // Set initial candidate visibility + if (showCandidatesCheckbox) { + const showCandidates = initialParams.candidates === 'true'; + showCandidatesCheckbox.checked = showCandidates; + toggleCandidatesVisibility(showCandidates); + } }); </script>