Base page filters component

[andrewtavis]

Terms

• [X] I have searched open and closed feature requests
• [X] I agree to follow activist's Code of Conduct

Description

Although not a part of the MVP, we could start making the component for the frontend that houses the filters for the various organization and event pages. Designs for this component can be seen on Figma in the Organizations and Events pages, with an example being below:

We'd want a filter directory within components/page that has PageFilter.vue that defines the basic styles including some slots and conditions based on which type of page it's on. From there we'd have PageFilterEvents.vue and other versions of it that add all the functionality and texts needed for the given page. This issue would be to make PageFilter.vue, and then further issues would make the sub-components.

Contribution

Happy to support someone or get to this myself! 😊 This base component is a good first issue that would be great for someone who wants to contribute for the first time. Also of course available to those already in the community :)

[hariFED]

Hello @andrewtavis I am happy to work on this issue.

[andrewtavis]

Awesome, @hariFED! Assigning you now :) Please let me know if there's anything I can do to assist!

[hariFED]

@andrewtavis We need to create a PageFilter.vue component. Could you explain the functionalities that need to be added to this component?

[andrewtavis]

Thanks for checking in @hariFED :) I'd envision PageFilter.vue to function in a similar manner to CardSearchResult.vue in that we'd be passing a pageFilterType to it that would then trigger one of the subclasses. Basically the functionality of PageFilter.vue is common styling so that we don't need to copy it into the other ones.

I need to think a bit more on what the other properties would be 🤔 For the sub-components we'd have different tag/category filters and a radio group at the top right. I'd say the radio group is determined by the pageFilterType, but then the filters would be determined by the given event/organization based on a call to the backend. If we wanted to similarly pass organization and event that might make sense? What do you think?

[hariFED]

@andrewtavis I think we should first create the PageFilter.vue component. After that, we could consider creating a separate filter function for the radio buttons, as you mentioned we are using that in the CardSearchResult component. So, for now, I will complete the first task of creating a PageFilter component. So that everything falls in place.

[andrewtavis]

This sounds good, @hariFED :) Let's get the base component done with the template parts in there. Also am just remembering, you can also use GridFilterTags for the tags part of it!

[hariFED]

Hello @andrewtavis , I regret to inform you that due to unforeseen personal circumstances, I will be unavailable for the next few days. If there is anyone else interested in this issue, please feel free to assign it to them. Rest assured, should the issue remain open upon my return, I would be more than happy to resume my work on it. Thank You.

[andrewtavis]

Hey @hariFED. Really sorry to hear of the unforeseen circumstances, and hope all's ok! Thank you for communicating with us on this. This issue can wait a while, so not a problem. Let me know when you're able to start working on it again, and I'd be happy to support at that time if needed!

[hariFED]

Hello, @andrewtavis I am happy to be back here. Can I continue the issue?

[andrewtavis]

Happy to have you back, @hariFED! By all means continue where you left off :) :)

[andrewtavis]

Hey @hariFED 👋 Hope you're well! Let me know if there's anything we can do to support on this!

[sara-mat100]

Hello @andrewtavis I am happy to work on this issue.

[andrewtavis]

Nice @sara-mat100! Would be great to get this done :) Please let us know if there's anything we can do to help!