Completed the datepicker feature in user standup updates and fixed the hover issue on dates

__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,78 @@ 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';
+      console.log('Date Value: ' + datePicker.value);
+      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().toISOString().slice(0, 10);
+      console.log('Date Value: ' + datePicker.value);
+      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';
+      console.log('Date Value: ' + datePicker.value);
+      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().toISOString().slice(0, 10);
+      console.log('Date Value: ' + datePicker.value);
+      const event = new Event('change');
+      datePicker.dispatchEvent(event);
+    });
+  });
 });

standup/script.js

@@ -121,8 +121,34 @@ function createTableHeaderElement() {
     type: 'th',
     classList: ['user', 'date', 'table-head'],
   });
-  headerCellElement.innerHTML = 'DATES ➡️<hr />USERS ⬇️';
+
+  const dateTextNode = document.createTextNode('DATES➡️');
+  const breakTag = document.createElement('br');
+  const breakTag2 = document.createElement('br');
+  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(breakTag);
+  headerCellElement.appendChild(breakTag2);
+  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 +382,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',
+  });
+}

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;