Chirag - Add Capacity-Based Event Filters in the event Database Design Page

[ChiragBellara]

Description

Related PRS (if any):

This is NOT related to any other PRs.

Main changes explained:

• Added Availability Filter for Events.
• Added new logic to make the filtering client side in order to avoid repeated DB calls.
• Added Dark Mode support for the new filter.
• Fixed alignment to better accommodate all filters and the Clear Filter button.

How to test:

1. check into current branch
2. do npm install and npm run start:local to run this PR locally
3. Clear site data/cache
4. log as any user
5. navigate to /communityportal/database/design
6. verify that the availability filter when active shows only events which have seats available.
7. verify that the other filters work in conjunction with the availability filter.

Screenshots or videos of changes:

Capacity.Filters.Fix.mov

Note

The availability filter hides events that have a negative capacity count and that is by design. A negative capacity count should not occur in the database.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	6ce0335
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69824a2d3cd662000874fa4c
😎 Deploy Preview	https://deploy-preview-4687--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud