Add a search function to projects page- Draft

[Thinking-Panda]

Fixes #4136

What changes did you make?

• Edited html and css files to insert a search bar. Imported the _search-bar.scss in main.scss
• Edited current-projects.js so the search function displays the desired result.

Why did you make the changes (we will use this info to test)?

• Html changes- added the search bar as a form
• CSS changes- added a new file with style properties for the search bar and imported it in main.scss
• JS changes- added functions for click events in the search bar. Edited the function updateProjectCardDisplayState(filterParams) to incorporate results from the search function

Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)

Visuals before changes are applied

Visuals after changes are applied

[github-actions]

Want to review this pull request? Take a look at this documentation for a step by step guide!

From your project repository, check out a new branch and test the changes.

git checkout -b Thinking-Panda-add-search-function-projects-page-4136 gh-pages
git pull https://github.com/Thinking-Panda/website.git add-search-function-projects-page-4136

[Thinking-Panda]

@kwangric - Let me know if you have any suggestion of code change to combine the filter and search results.

[kwangric]

Issue resolved over Slack.

[roslynwythe]

Hi @Thinking-Panda if you were able to get the help you needed, please remove the Help Wanted and Status Updated labels. Thank you @kwangric for assisting with the code.

[Thinking-Panda]

@merge Team- I have made the necessary code changes and this PR is ready to be reviewed and merged. Thanks!

[kwangric]

ETA: EOD 8/5
Availability: Most days after 3pm PT

[kwangric]

@Thinking-Panda, great job with this issue!

• The search bar and function works as expected. Projects are correctly filtered based on whether the search term is included in the description or not.
• The search works in conjunction with the filters.
• Boolean operators can be used to refine the search.
• Search bar is also displayed and works correctly in mobile view.

I just have two requests for changes to be made:

• You used NOT instead of the - symbol for the exclude operator. Given that the issue and the link to boolean operators included uses -, it might be best to use that instead.
• For the booleans operators, I noticed that the operators work even when not in uppercase. This might cause confusion fs the user is searching for terms that include the word 'and' & 'or', but aren't trying to use the operators. Can they be changed so they only work if they are in uppercase?

[Thinking-Panda]

@kwangric , the requested changes have been done. Please review. Thanks.

[LRenDO]

Hi @mademarc! Please add your ETA and Availablity when you have a minute. Thanks!

[kwangric]

Thanks for the a quick turnaround on the changes Niki!

• Boolean operators are now working only when in uppercase
• The operators use - instead of NOT

One last small request: at the moment in order to exclude a term, you will need a space between the - symbol and the search term (e.g. HTML - react). I believe there shouldn't be a space for the operator to work (HTML -react). Can you make this change? The other operators work as expected.

[Thinking-Panda]

@kwangric , @mademarc - Change requested has been implemented. Thank you for your patience. The PR is now ready to be re-reviewed.

[StephenTheDev1001]

The search bar looks great, pixel perfect implementation from the designs. The search bar works as intended. I'm not sure how to handle the event property here. Would it be better to do it the old deprecated way to be consistent or use the newer way to avoid errors in newer browsers? Also a small suggestion for searchEnterKeyHandler.

It's obvious you put a lot of time and effort into this. Thank you.

@jdingeman @roslynwythe How do you recommend the event property be handled?

[mademarc]

Review ETA: 8/11/2023
Availability: 5:24PM

[mademarc]

Hey @Thinking-Panda the html elements were added very well, same with the scss file and the js file with proper formatting as well and @LRenDO the ETA and Availability is done.

[kwangric]

Thanks for making the requested changes, the search bar is working as intended and everything looks good visually. Great work!

[Thinking-Panda]

@StephenTheDev1001, @kwangric @mademarc , suggested changes have been made and the function still works good. Please re-review

[StephenTheDev1001]

The search bar works as intended. Good job with the requested changes.

[kwangric]

The search function still functions as expected.

One thing I noticed in previous commits was that the text in the search bar wouldn't clear when you click the magnifying glass to search, while pressing enter would clear the text. The latest change seems to keep the text from clearing when hitting enter, which is good for consistency sake.

I'm not familiar with the Lint SCSS test, so I'm not sure what is causing it to fail the check. I will see if anyone else on the merge team can help resolve it.

[kwangric]

It looks like the failed check is an issue with the linter itself. Since everything else looks good, I will go ahead and merge the PR. Great job with the issue @Thinking-Panda!