Refactor "No Results" Message from the Toolkit Filter and Reuse it for the Projects Filter

[chrismenke45]

Overview

The Projects Filter shifts to the center when no results are found by the filter. We need to add a "No Results" message so this shift does not occur.

Details

The Toolkit page filter displays a "no results" message when no results are found by the filter. The code from toolkit.js will need to be

• extracted into a new component/ element file
• refactored so that it can be reused on the projects and toolkit filters (or any future filter)

Once the above is performed, the code can then be imported into the projects filter file (or any future filter file).

Current Functionality

Desired Functionality

Action Items

• Extract the HTML code from toolkit.js into a new file. Create the new file in the _includes directory.
  • Style the HTML as needed to match the design in Figma. The "no results" message should look the same on any page.
• Extract the "no results" JS code from toolkit.js into a new file. Create the new file in the elements directory (path: /assets/js/elements).
• Refactor the "no results" code so that it
  • functions similarly to the filter on the toolkit page when no results are found
  • can be reused on the home, projects, and toolkit pages
• Refactor the filter code on the home, projects, and toolkit pages as needed to get the "no results" code to work
• Import/ include the code in the relevant filter files for the home, projects, and toolkit pages.

Resources/Instructions

• This issue was created for ER ER: Filters Sidebar shifts to the Center When there are No Project Cards on "Projects" and "Homepage" #4769. Reference the ER for more background and information.
• Write up of how to implement the 'no results" message on another page
• Write up of how to implement the projects filter on another page
• Files to reference:
  • Toolkit Page Filter JS Code
  • Projects Page Filter JS Code
  • Home Page HTML Code
  • Projects Page HTML Code
  • Toolkits Page HTML
• Figma Design of "No Results" Message

[ExperimentsInHonesty]

@chrismenke45 It seems like this issue is to copy the code from the toolkit page and make some changes to it.

What we should be doing is making an issue to refactor the code so that it can work for the toolkit page (and any other page) by calling a file that has the specific page variables in it. (filter names, messages, etc.).

Once this refactor is done, then this issue can be revised to setup the file for this page with its variables in it. And then call the script with the variable file to deliver a customized result to this page.

[chrismenke45]

I am taking a break from HFLA and will not be able to complete writing this issue.

[Adastros]

Reopening this issue for ER #4769 and moving it back into the new issue approval column

[github-actions]

Hi @bphan002, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:-
i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?)
ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

[bphan002]

Availability: August 15th Tuesday
ETA: August 19th Saturday

[bphan002]

Updated ETA: August 23rd

Underestimated complexity