General: Add search and sort to course overview

[edkaya]

Checklist

General

• I tested all changes and their related features with all corresponding user types on a test server.
• This is a small issue that I tested locally and was confirmed by another developer 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 screenshots/screencasts of my UI changes.
• I translated all newly inserted strings into English and German.

Motivation and Context

Course cards are redesigned to have a more clear and user-friendly course overview page. However, course overview still lacks of basic functionilities such as search and sort.

Description

• Added searchbar component
• Added sort button to sort courses in alphatical order
• Added the number of courses

Steps for Testing

Prerequisites:

• 1 Student
• Some courses

1. Log in to Artemis
2. Navigate to Course Overview
3. Verify that search works as expected
4. Verify that sort button sorts the courses by their titles in ascending/descending order

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

Code Review

• Code Review 1
• Code Review 2

Manual Tests

• Test 1
• Test 2

Screenshots

Summary by CodeRabbit

Summary by CodeRabbit

• New Features

  • Enhanced course overview with dynamic title displaying total course counts.
  • Added sorting functionality for courses, allowing users to toggle between ascending and descending order.
  • Integrated a search filter component for improved user interaction.
  • Updated course card layout for better visual consistency.

• Bug Fixes

  • Improved conditional rendering for displaying messages when no courses are available.

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: ASSERTIVE

📥 Commits

Files that changed from the base of the PR and between 47bc419 and 8475d57.

📒 Files selected for processing (1)

• src/main/webapp/app/overview/courses.component.html (2 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

src/main/webapp/app/overview/courses.component.html (1)

Pattern src/main/webapp/**/*.html: @if and @for are new and valid Angular syntax replacing *ngIf and *ngFor. They should always be used over the old style.

🔇 Additional comments (1)

src/main/webapp/app/overview/courses.component.html (1)

Line range hint 22-82: Use of @if and @for directives adheres to coding guidelines

The template correctly uses the @if and @for directives instead of the old *ngIf and *ngFor syntax, in line with the provided coding guidelines.

[farisd16]

retested on ts6, works as expected

[asliayk]

reapprove

[BBesrour]

tested on ts5, lgtm

[SimonEntholzer]

Code Lgtm

[yassinsws]

reapprove