diff --git a/__tests__/standup/standup.test.js b/__tests__/standup/standup.test.js index 1695af3b..02fadd43 100644 --- a/__tests__/standup/standup.test.js +++ b/__tests__/standup/standup.test.js @@ -19,6 +19,35 @@ function isSunday(date) { return date.getDay() === 0; } +function countSundays(startDate, endDate) { + let start = new Date(startDate); + let end = new Date(endDate); + + let sundayCount = 0; + while (start.getDay() !== 0) { + start.setDate(start.getDate() + 1); + } + + while (start <= end) { + sundayCount++; + start.setDate(start.getDate() + 7); + } + + return sundayCount; +} + +function calculateScrollPosition(date, width) { + const selectedDate = new Date(date); + const endDate = new Date(); + selectedDate.setHours(0, 0, 0, 0); + + const dateDifference = endDate.getTime() - selectedDate.getTime(); + const numberOfSundays = countSundays(selectedDate, endDate); + const oneDay = 24 * 60 * 60 * 1000; + const days = Math.floor(dateDifference / oneDay) - numberOfSundays; + return days * width; +} + function generateExpectedDateValues() { const expectedDateValues = []; for ( @@ -155,4 +184,74 @@ describe('Standup Page', () => { const expectedDateValues = generateExpectedDateValues(); expect(dateCellValues.length).toEqual(expectedDateValues.length); }); + + it('should scroll to the correct date column when a date is selected', async () => { + const dateInput = await page.$('#date'); + const testDate = '2024-09-25'; + + await page.evaluate(() => { + const datePicker = document.getElementById('date'); + datePicker.value = '2024-09-25'; + const event = new Event('change'); + datePicker.dispatchEvent(event); + }); + + await page.waitForTimeout(1000); + + let scrollPosition = await page.evaluate(() => { + return document.getElementById('table-container').scrollLeft; + }); + + const width = await page.evaluate(() => { + return document.getElementsByClassName('dates')[0].offsetWidth; + }); + + scrollPosition = Math.ceil(scrollPosition); + + const expectedScrollPosition = calculateScrollPosition(testDate, width); + + expect(scrollPosition).toEqual(expectedScrollPosition); + + await page.evaluate(() => { + const datePicker = document.getElementById('date'); + datePicker.value = new Date().toLocaleDateString('en-CA'); + const event = new Event('change'); + datePicker.dispatchEvent(event); + }); + }); + + it('shouldnot scroll if the date selected is not in range', async () => { + const dateInput = await page.$('#date'); + const testDate = '2025-09-26'; + + await page.evaluate(() => { + const datePicker = document.getElementById('date'); + datePicker.value = '2025-09-26'; + const event = new Event('change'); + datePicker.dispatchEvent(event); + }); + + await page.waitForTimeout(1000); + + let scrollPosition = await page.evaluate(() => { + return document.getElementById('table-container').scrollLeft; + }); + + const width = await page.evaluate(() => { + return document.getElementsByClassName('dates')[0].offsetWidth; + }); + + scrollPosition = Math.ceil(scrollPosition); + + const expectedScrollPosition = calculateScrollPosition(testDate, width); + + expect(scrollPosition).toEqual(0); + + await page.evaluate(() => { + const datePicker = document.getElementById('date'); + datePicker.value = new Date().toLocaleDateString('en-CA'); + const event = new Event('change'); + datePicker.dispatchEvent(event); + }); + }); }); diff --git a/standup/script.js b/standup/script.js index 61973702..4f6a841f 100644 --- a/standup/script.js +++ b/standup/script.js @@ -121,8 +121,33 @@ function createTableHeaderElement() { type: 'th', classList: ['user', 'date', 'table-head'], }); - headerCellElement.innerHTML = 'DATES ➡️
USERS ⬇️'; + + const dateTextNode = document.createElement('p'); + dateTextNode.style.marginTop = '0px'; + dateTextNode.innerText = 'DATES➡️'; + + const hrTag = document.createElement('hr'); + const datePicker = document.createElement('input'); + const usersTextNode = document.createTextNode('USERS ⬇️'); + + datePicker.type = 'date'; + datePicker.id = 'date'; + datePicker.name = 'DATES'; + datePicker.max = endDate.toLocaleDateString('en-CA'); + datePicker.min = startDate.toLocaleDateString('en-CA'); + + headerCellElement.appendChild(dateTextNode); + headerCellElement.appendChild(datePicker); + headerCellElement.appendChild(hrTag); + headerCellElement.appendChild(usersTextNode); + headerRowElement.appendChild(headerCellElement); + + const dateInput = headerCellElement.querySelector('input'); + dateInput.addEventListener('change', (event) => { + scrollToSelectedDate(event.target.value); + }); + for ( let date = new Date(endDate); date >= startDate; @@ -356,3 +381,40 @@ document.addEventListener('click', (event) => { if (getUsernames().length > 0) { searchButtonHandler(); } + +function countSundays(startDate, endDate) { + let start = new Date(startDate); + let end = new Date(endDate); + + let sundayCount = 0; + while (start.getDay() !== 0) { + start.setDate(start.getDate() + 1); + } + + while (start <= end) { + sundayCount++; + start.setDate(start.getDate() + 7); + } + + return sundayCount; +} + +function scrollToSelectedDate(date) { + const selectedDate = new Date(date); + selectedDate.setHours(0, 0, 0, 0); + + if (selectedDate < startDate || selectedDate > endDate) { + return; + } + const dates = document.querySelectorAll('.dates'); + const columnWidth = dates[0].offsetWidth; + const dateDifference = endDate.getTime() - selectedDate.getTime(); + const numberOfSundays = countSundays(selectedDate, endDate); + const numberOfDays = Math.floor(dateDifference / oneDay) - numberOfSundays; + + let scrollPosition = numberOfDays * columnWidth; + tableContainerElement.scrollTo({ + left: scrollPosition, + behavior: 'smooth', + }); +} diff --git a/standup/style.css b/standup/style.css index f2f20ed6..01476479 100644 --- a/standup/style.css +++ b/standup/style.css @@ -153,9 +153,11 @@ tr:nth-child(even) { } tr:hover { - background-color: var(--dark-gray-color); cursor: pointer; } +td:hover { + background-color: var(--dark-gray-color); +} .table-container { overflow-x: auto;