Refactor/rework recipe list filter

[seyfeb]

Topic and Scope

Considering issues like #253, which request more options for filtering recipes by different properties, the large keyword cloud does not seem to provide the best UI when mixed with additional ways to filter along different vectors. To create a more unified and extensible filter experience I reworked the current UX.

The new UI

• allows filtering by recipe name, category, and keywords
• allows selecting if the resulting recipes should match all or any of the selected categories or keywords
  • default is to show recipes "matching any category" and "matching all keywords"
• allows applying all filters at the same time
• allows sorting the results
• allows clearing the filters
• instantly updates results on desktop and updates results after confirming the selected filters in a full-screen modal on mobile devices

The categories filter is only shown, when no category is selected.

Caveats, features and other noteworthy changes

• for name, keywords, and recipeCategory both single string and an array of strings is supported, even though the cookbook app currently only supports a single name and category.
  • The ORfiltering for categories therefore currently makes not too much sense
• Filtering is still done in the frontend on the recipe list obtained from the backend
• The recipe name is filtered via a fuzzy search using the fuse.js library
• Jest is added for testing JS code, but there it is not included in the CI pipeline yet
• The keyword-cloud setting has been replaced by a setting for displaying sorting and filters

Impressions

Mobile devices

Desktop

cookbook_new_filter.mov

Formal requirements

There are some formal requirements that should be satisfied. Please mark those by checking the corresponding box.

• I did check that the app can still be opened and does not throw any browser logs
• I created tests for newly added PHP code (check this if no PHP changes were made)
• I updated the OpenAPI specs and added an entry to the API changelog (check if API was not modified)
• I notified the matrix channel if I introduced an API change

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (c55a175) 80.07% compared to head (7ea8520) 80.07%.
Report is 1 commits behind head on master.

❗ Current head 7ea8520 differs from pull request most recent head 3d73d73. Consider uploading reports for the commit 3d73d73 to get more accurate results

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #2037   +/-   ##
=======================================
  Coverage   80.07%   80.07%           
=======================================
  Files          92       92           
  Lines        2650     2650           
=======================================
  Hits         2122     2122           
  Misses        528      528           

Flag	Coverage Δ
integration	21.43% <ø> (ø)
migration	5.69% <ø> (ø)
unittests	57.09% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

[github-actions]

Test Results

   12 files    572 suites   1m 31s ⏱️
  552 tests   552 ✅ 0 💤 0 ❌
2 208 runs  2 207 ✅ 1 💤 0 ❌

Results for commit 7ea8520.

♻️ This comment has been updated with latest results.