Events header

[bakobagassas]

Issue Description

Fixes #1636

• When on the Events List page, some tabs do not display the same message when there are no upcoming events

Changes

• Standardized display message format when there are no events
• Added a new function for past events
• Added a new logic for past and upcoming events notifications on the accordions
• Corrected the number of events displayed on top of the tab. When the past toggle is not checked, we only see the number of upcoming events. However, when it is checked, we should see the number of upcoming AND past events.

Testing

• Go to events list
• You will be able to see the different tabs with no upcoming events and the display.
• You can create events in the tabs and play around to see what appears where.

[MImran2002]

Hello here are some of my reviews as I looked into the issue John mentioned how there are three different ways of showing events are not there. They want standardization so when it comes to Volunteer Opportunities there is one bug that you should look into and one more standardization.

As volunteer opportunities when it should shows this:

Is showing this instead:

The bug I see also is when the Volunteer Opportunities is showing (1) when there is no event coming, I think it is counting one because of the drop down opportunities instead of event:

[MImran2002]

1. this variable is not in used: const pastVolunteerCount :
   Number(eventsCount.countPastVolunteerOpportunitiesCount);
2. This display I think will be better if it only shows the past count when the past toggle is checked and when unchecked can show the upcoming:
   {{ upcoming }} upcoming event{% if upcoming != 1 %}s{% endif %} and {{ past }} past event{% if past != 1 %}s{% endif %}
3. This opening div tag needs correct indentation:

[MImran2002]

this variable in test_getPastVolunteerOpportunitiesCount() has not been used at all in the test but the peewee is being inserted so I think you should remove the variables.:
pastSameDayEvent = Event.create(
name="Test same-day past AGP event",
term=currentTestTerm,
description="Same day but earlier time.",
timeStart="04:00:00",
timeEnd="04:30:00",
location="Venus",
isTraining=False,
isService=True,
startDate="2021-08-01",
program=3
)
futureAgpEvent = Event.create(
name="Test future AGP event",
term=currentTestTerm,
description="Future volunteer opportunity.",
timeStart="06:00:00",
timeEnd="07:00:00",
location="Moon",
isTraining=False,
isService=True,
startDate="2021-08-02",
program=3
)

[MImran2002]

1. So in getPastVolunteerOpportunitiesCount( ) function, when you are extracting pastCount and you are comparing Event.startDate with currentTime there can be a potential type mismatch because Event.startDate's type is 2025-12-30 15:14:56.873933 <class 'datetime.datetime'> whereas currentTime is 2025-09-11 <class 'datetime.date'> I just want you to make sure to take care of the differences. So with other filtering as well ((Event.startDate == currentTime). Moreover, 16:00:00 <class 'datetime.time'> for Event.timeStart is also inconsistent with currentime type too.

2. "// use ternary operators to populate the tab with a number if there are events, and clear the count if there are none"
   this comment in line 99 of eventList.js is for the condition you have changed below so this comment should be updated

[github-actions]

View Code Coverage

[bakobagassas]

Solved all comments, ready for new review

[MImran2002]

Looks good