General: Add filter for exercises

[florian-glombik]

Checklist

General

• I tested all changes and their related features with all corresponding user types on a test server.
• Language: I followed the guidelines for inclusive, diversity-sensitive, and appreciative language.
• I chose a title conforming to the naming conventions for pull requests.

Client

• I strictly followed the client coding and design guidelines.
• Following the theming guidelines, I specified colors only in the theming variable files and checked that the changes look consistent in both the light and the dark theme.
• I added multiple integration tests (Jest) related to the features (with a high test coverage), while following the test guidelines.
• I documented the TypeScript code using JSDoc style.
• I added multiple screenshots/screencasts of my UI changes.
• I translated all newly inserted strings into English and German.

Motivation and Context

• Give students the option to filter exercises (e.g. for exam preparation)

Description

• Added filter options for exercises:
  • exercise categories
  • exercise type
  • difficulty
  • achieved score
  • achievable points
• The filters are considering general present values (e.g. if there was no Quiz exercise in a course, the exercise type quiz will not be an available filter option; the same applies to the general filter option - if there is only one exercise type in the course the filter option will not be displayed)
• Introduced a shared component for the CustomExerciseCategoryBadgeComponent
• Adjusted the usage of ExerciseCategory -> now really using the class object (and using equals and compare function) instead of actually having a string object in the background
• Added a RangeSlider component as the ngBootstrap does not seem to offer such a functionality (https://getbootstrap.com/docs/5.0/forms/range/)

Steps for Testing

Prerequisites:

• 1 Student (participating in a course with many exercises)

1. Navigate to a course with many exercises
2. Open the filter Modal and apply the filters in different combinations (state the combinations in your review comment)
3. Verify that the filter works according to your expectations
4. Verify that only filter options are displayed that differentiate the exercises

Testserver States

Note

These badges show the state of the test servers.
Green = Currently available, Red = Currently locked
Click on the badges to get to the test servers.

Review Progress

Performance Review

• I (as a reviewer) confirm that the client changes (in particular related to REST calls and UI responsiveness) are implemented with a very good performance

Code Review

• Code Review 1
• Code Review 2

Manual Tests

• Test 1
• Test 2

Test Coverage

Client

Class/File	Line Coverage	Confirmation (assert/expect)
exercise-category.model.ts	100%	✅
custom-exercise-category-badge.component.ts	55.55%	❌ no reasonable logic, introduced for reusability of badges
exercise-filter-modal.component.ts	88%	✅
exercise-filter-modal.helper.ts	88.88%	✅
range-slider.component.ts	71.87%	✅
sidebar.component.ts	87.69%	✅
sidebar.helper.ts	100%	✅
utils.ts	96.61%	✅

Screenshots

Summary by CodeRabbit

• New Features

  • Added a modal for filtering exercises based on categories, types, difficulty levels, achieved scores, and points in the student dashboard.
  • Introduced a badge component for visually representing exercise categories and enhancing user interaction.
  • Updated the student dashboard with new messages in German for clearer feedback on exercise filtering.
  • Streamlined exercise category display by implementing a custom badge component.

• Enhancements

  • Improved sidebar to dynamically display filter options based on the context.
  • Enhanced the appearance and functionality of dropdown menus in the filter modal.
  • Implemented better user interaction for the range slider with visual progress indicators.
  • Added a filter feature to the sidebar for exercise-related navigation.

• Bug Fixes

  • Ensured proper initialization and teardown of filter components to avoid memory leaks.

• Tests

  • Added unit tests for the range slider and exercise filter components to validate their behavior and event handling.
  • Enhanced testing framework integration for the sidebar component to thoroughly validate filtering functionality.

[pzdr7]

Very good job. Reapprove after merge conflict 👍 🇹🇭

[az108]

Reapprove after merge conflict

[SimonEntholzer]

re-approve