General: Display recently accessed courses on top

jest.config.js

@@ -102,7 +102,7 @@ module.exports = {
             // TODO: in the future, the following values should increase to at least 90%
             statements: 86.7,
             branches: 73.7,
-            functions: 80.8,
+            functions: 80.7,
             lines: 86.7,
         },
     },

src/main/webapp/app/course/course-access-storage.service.ts

@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import { LocalStorageService } from 'ngx-webstorage';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class CourseAccessStorageService {
+    private static readonly STORAGE_KEY = 'artemis.courseAccess';
+
+    constructor(private localStorage: LocalStorageService) {}
+
+    onCourseAccessed(courseId: number): void {
+        const courseAccessMap: { [key: number]: number } = this.localStorage.retrieve(CourseAccessStorageService.STORAGE_KEY) || {};
+
+        courseAccessMap[courseId] = Date.now();
+
+        if (Object.keys(courseAccessMap).length > 3) {
+            const oldestEntry = Object.entries(courseAccessMap).reduce((prev, curr) => (prev[1] < curr[1] ? prev : curr));
+            delete courseAccessMap[oldestEntry[0]];
+        }
+
+        this.localStorage.store(CourseAccessStorageService.STORAGE_KEY, courseAccessMap);
+    }
+
+    getLastAccessedCourses(): number[] {
+        const courseAccessMap: { [key: number]: number } = this.localStorage.retrieve(CourseAccessStorageService.STORAGE_KEY) || {};
+
+        return Object.entries(courseAccessMap)
+            .sort((a, b) => b[1] - a[1])
+            .map((entry) => Number(entry[0]));
+    }
+}

src/main/webapp/app/course/manage/course-management-tab-bar/course-management-tab-bar.component.ts

@@ -31,6 +31,7 @@ import { CourseAdminService } from 'app/course/manage/course-admin.service';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { ProfileService } from 'app/shared/layouts/profiles/profile.service';
 import { PROFILE_LOCALCI } from 'app/app.constants';
+import { CourseAccessStorageService } from 'app/course/course-access-storage.service';
 
 @Component({
     selector: 'jhi-course-management-tab-bar',
@@ -85,6 +86,7 @@ export class CourseManagementTabBarComponent implements OnInit, OnDestroy {
         private router: Router,
         private modalService: NgbModal,
         private profileService: ProfileService,
+        private courseAccessStorageService: CourseAccessStorageService,
     ) {}
 
     /**
@@ -108,6 +110,9 @@ export class CourseManagementTabBarComponent implements OnInit, OnDestroy {
                 this.localCIActive = profileInfo?.activeProfiles.includes(PROFILE_LOCALCI);
             }
         });
+
+        // Notify the course access storage service that the course has been accessed
+        this.courseAccessStorageService.onCourseAccessed(courseId);
     }
 
     /**

src/main/webapp/app/course/manage/course-management.component.html

@@ -30,7 +30,7 @@ <h4 class="fw-medium" id="course-page-heading" jhiTranslate="artemisApp.course.h
                 <div class="course-table-container mb-3">
                     <div class="control-label my-3" (click)="semesterCollapsed[semester] = !semesterCollapsed[semester]">
                         <fa-icon size="2x" class="pe-3" [icon]="semesterCollapsed[semester] ? faAngleDown : faAngleUp"></fa-icon>
-                        @if (semester !== '' && semester !== 'test') {
+                        @if (semester !== '' && semester !== 'test' && semester !== 'recent') {
                             <span style="font-size: 24px"> {{ 'artemisApp.course.semester' | artemisTranslate }}: {{ semester }} </span>
                         }
                         @if (semester === '') {
@@ -41,6 +41,11 @@ <h4 class="fw-medium" id="course-page-heading" jhiTranslate="artemisApp.course.h
                                 {{ 'artemisApp.course.testCourse.plural' | artemisTranslate }}
                             </span>
                         }
+                        @if (semester === 'recent') {
+                            <span style="font-size: 24px">
+                                {{ 'artemisApp.course.recentlyAccessed' | artemisTranslate }}
+                            </span>
+                        }
                     </div>
                     @if (!semesterCollapsed[semester]) {
                         <div>

src/main/webapp/app/course/manage/course-management.component.ts

@@ -11,6 +11,7 @@ import { CourseManagementOverviewStatisticsDto } from 'app/course/manage/overvie
 import { EventManager } from 'app/core/util/event-manager.service';
 import { faAngleDown, faAngleUp, faPlus } from '@fortawesome/free-solid-svg-icons';
 import { DocumentationType } from 'app/shared/components/documentation-button/documentation-button.component';
+import { CourseAccessStorageService } from 'app/course/course-access-storage.service';
 
 @Component({
     selector: 'jhi-course',
@@ -46,6 +47,7 @@ export class CourseManagementComponent implements OnInit, OnDestroy, AfterViewIn
         private alertService: AlertService,
         private eventManager: EventManager,
         private guidedTourService: GuidedTourService,
+        private courseAccessStorageService: CourseAccessStorageService,
     ) {}
 
     /**
@@ -136,26 +138,40 @@ export class CourseManagementComponent implements OnInit, OnDestroy, AfterViewIn
     /**
      * Sorts the courses into the coursesBySemester map.
      * Fills the semesterCollapsed map depending on if the semester should be expanded by default.
-     * The first semester is always expanded. The test course group is also expanded.
+     * The first semester group, the test courses and the recently accessed courses are expanded by default.
      */
     private sortCoursesIntoSemesters(): void {
         this.semesterCollapsed = {};
         this.coursesBySemester = {};
 
+        // Get last accessed courses
+        const lastAccessedCourseIds = this.courseAccessStorageService.getLastAccessedCourses();
+        const recentlyAccessedCourses = this.courses.filter((course) => lastAccessedCourseIds.includes(course.id!));
+
         let firstExpanded = false;
         for (const semester of this.courseSemesters) {
             this.semesterCollapsed[semester] = firstExpanded;
             firstExpanded = true;
-            this.coursesBySemester[semester] = this.courses.filter((course) => !course.testCourse && (course.semester ?? '') === semester);
+            this.coursesBySemester[semester] = this.courses.filter(
+                (course) => !course.testCourse && !lastAccessedCourseIds.includes(course.id!) && (course.semester ?? '') === semester,
+            );
         }
 
+        // Add a new category "recent"
+        this.courseSemesters.unshift('recent');
+        this.semesterCollapsed['recent'] = false;
+        this.coursesBySemester['recent'] = recentlyAccessedCourses;
+
         // Add an extra category for test courses
-        const testCourses = this.courses.filter((course) => course.testCourse);
+        const testCourses = this.courses.filter((course) => course.testCourse && !lastAccessedCourseIds.includes(course.id!));
         if (testCourses.length > 0) {
             this.courseSemesters[this.courseSemesters.length] = 'test';
             this.semesterCollapsed['test'] = false;
             this.coursesBySemester['test'] = testCourses;
         }
+
+        // Remove all semesters that have no courses
+        this.courseSemesters = this.courseSemesters.filter((semester) => this.coursesBySemester[semester].length > 0);
     }
 
     /**

src/main/webapp/app/overview/course-overview.component.ts

@@ -34,6 +34,7 @@ import { CourseExerciseService } from 'app/exercises/shared/course-exercises/cou
 import { BarControlConfiguration, BarControlConfigurationProvider } from 'app/shared/tab-bar/tab-bar';
 import { FeatureToggle } from 'app/shared/feature-toggle/feature-toggle.service';
 import { CourseStorageService } from 'app/course/manage/course-storage.service';
+import { CourseAccessStorageService } from 'app/course/course-access-storage.service';
 
 @Component({
     selector: 'jhi-course-overview',
@@ -110,6 +111,7 @@ export class CourseOverviewComponent implements OnInit, OnDestroy, AfterViewInit
         private changeDetectorRef: ChangeDetectorRef,
         private metisConversationService: MetisConversationService,
         private router: Router,
+        private courseAccessStorageService: CourseAccessStorageService,
     ) {}
 
     async ngOnInit() {
@@ -119,6 +121,9 @@ export class CourseOverviewComponent implements OnInit, OnDestroy, AfterViewInit
 
         this.course = this.courseStorageService.getCourse(this.courseId);
 
+        // Notify the course access storage service that the course has been accessed
+        this.courseAccessStorageService.onCourseAccessed(this.courseId);
+
         await firstValueFrom(this.loadCourse());
         await this.initAfterCourseLoad();
     }

src/main/webapp/app/overview/courses.component.html

@@ -49,8 +49,24 @@ <h3 class="fw-medium" jhiTranslate="artemisApp.studentDashboard.title">Your curr
         <a class="btn btn-primary" [routerLink]="['/courses/enroll']">{{ 'artemisApp.studentDashboard.enroll.title' | artemisTranslate }}</a>
     </div>
 </div>
+@if (recentlyAccessedCourses.length > 0) {
+    <div class="row">
+        <h4 class="col mb-3 fw-medium" jhiTranslate="artemisApp.studentDashboard.recentlyAccessed">Recently Accessed Courses</h4>
+    </div>
+    <div class="row">
+        @for (course of recentlyAccessedCourses; track course) {
+            <jhi-overview-course-card class="col-12 col-lg-6 col-xl-4 pe-2 ps-2 mb-3" [course]="course" [hasGuidedTour]="course === courseForGuidedTour">
+            </jhi-overview-course-card>
+        }
+    </div>
+    @if (regularCourses.length > 0) {
+        <div class="row">
+            <h4 class="col mb-3 fw-medium" jhiTranslate="artemisApp.studentDashboard.otherCourses">Other Courses</h4>
+        </div>
+    }
+}
 <div class="row">
-    @for (course of courses; track course) {
+    @for (course of regularCourses; track course) {
         <jhi-overview-course-card class="col-12 col-lg-6 col-xl-4 pe-2 ps-2 mb-3" [course]="course" [hasGuidedTour]="course === courseForGuidedTour"> </jhi-overview-course-card>
     }
 </div>

src/main/webapp/app/overview/courses.component.ts

@@ -14,18 +14,23 @@ import dayjs from 'dayjs/esm';
 import { Exam } from 'app/entities/exam.model';
 import { Router } from '@angular/router';
 import { faPenAlt } from '@fortawesome/free-solid-svg-icons';
+import { CourseAccessStorageService } from 'app/course/course-access-storage.service';
+import { CourseForDashboardDTO } from 'app/course/manage/course-for-dashboard-dto';
 
 @Component({
     selector: 'jhi-overview',
     templateUrl: './courses.component.html',
     styleUrls: ['./courses.component.scss'],
 })
 export class CoursesComponent implements OnInit, OnChanges, OnDestroy {
-    public courses: Course[];
+    courses: Course[];
     public nextRelevantCourse?: Course;
     nextRelevantCourseForExam?: Course;
     nextRelevantExams?: Exam[];
 
+    public recentlyAccessedCourses: Course[] = [];
+    public regularCourses: Course[] = [];
+
     courseForGuidedTour?: Course;
     quizExercisesChannels: string[] = [];
 
@@ -41,6 +46,7 @@ export class CoursesComponent implements OnInit, OnChanges, OnDestroy {
         private teamService: TeamService,
         private jhiWebsocketService: JhiWebsocketService,
         private router: Router,
+        private courseAccessStorageService: CourseAccessStorageService,
     ) {}
 
     async ngOnInit() {
@@ -66,14 +72,15 @@ export class CoursesComponent implements OnInit, OnChanges, OnDestroy {
             next: (res: HttpResponse<CoursesForDashboardDTO>) => {
                 if (res.body) {
                     const courses: Course[] = [];
-                    res.body.courses.forEach((courseDto) => {
+                    res.body.courses.forEach((courseDto: CourseForDashboardDTO) => {
                         courses.push(courseDto.course);
                     });
                     this.courses = courses.sort((a, b) => (a.title ?? '').localeCompare(b.title ?? ''));
                     this.courseForGuidedTour = this.guidedTourService.enableTourForCourseOverview(this.courses, courseOverviewTour, true);
 
                     this.nextRelevantExams = res.body.activeExams ?? [];
                     this.nextRelevantExercise = this.findNextRelevantExercise();
+                    this.sortCoursesInRecentlyAccessedAndRegularCourses();
                 }
             },
         });
@@ -113,6 +120,20 @@ export class CoursesComponent implements OnInit, OnChanges, OnDestroy {
         }
     }
 
+    /**
+     * Sorts the courses into recently accessed and regular courses.
+     * If there are less than 5 courses, all courses are displayed in the regular courses section.
+     */
+    sortCoursesInRecentlyAccessedAndRegularCourses() {
+        if (this.courses.length <= 5) {
+            this.regularCourses = this.courses;
+        } else {
+            const lastAccessedCourseIds = this.courseAccessStorageService.getLastAccessedCourses();
+            this.recentlyAccessedCourses = this.courses.filter((course) => lastAccessedCourseIds.includes(course.id!));
+            this.regularCourses = this.courses.filter((course) => !lastAccessedCourseIds.includes(course.id!));
+        }
+    }
+
     /**
      * Sets the course for the next upcoming exam and returns the next upcoming exam or undefined
      */

src/main/webapp/i18n/de/course.json

@@ -65,6 +65,7 @@
             "startDate": "Start",
             "endDate": "Ende",
             "semester": "Semester",
+            "recentlyAccessed": "Zuletzt verwendet",
             "maxPoints": {
                 "title": "Maximale Punktzahl",
                 "info": "Dieser Wert wird für die Berechnung von Beispielen (z.B. im Notenschlüssel) verwendet und hat keinen Einfluss auf die Noten der Studierenden. Die Noten werden mit Hilfe der im Kurs erreichbaren Punkte berechnet."

src/main/webapp/i18n/de/student-dashboard.json

@@ -2,6 +2,8 @@
     "artemisApp": {
         "studentDashboard": {
             "title": "Deine aktuellen Kurse",
+            "recentlyAccessed": "Zuletzt besuchte Kurse",
+            "otherCourses": "Andere Kurse",
             "exerciseTitle": "Aktuelle aktive Übung von \"{{ course }}\"",
             "exerciseTitleWithoutDueDate": "Aktuelle Übung von \"{{ course }}\":",
             "examTitle": "Aktuelle Prüfung von \"{{ course }}\":",

src/main/webapp/i18n/en/course.json

@@ -65,6 +65,7 @@
             "startDate": "Start",
             "endDate": "End",
             "semester": "Semester",
+            "recentlyAccessed": "Recently accessed",
             "maxPoints": {
                 "title": "Maximum number of points for course",
                 "info": "This value is used for example calculations (e.g. in the grading key) and does not influence the students' grades. The grades are calculated based on the points achievable in the course."

src/main/webapp/i18n/en/student-dashboard.json

@@ -2,6 +2,8 @@
     "artemisApp": {
         "studentDashboard": {
             "title": "Your current courses",
+            "recentlyAccessed": "Recently accessed courses",
+            "otherCourses": "Other courses",
             "exerciseTitle": "Current active exercise in \"{{ course }}\"",
             "exerciseTitleWithoutDueDate": "Current exercise in \"{{ course }}\":",
             "examTitle": "Current exam in \"{{ course }}\":",

src/test/javascript/spec/component/course/course-management-tab-bar.component.spec.ts

@@ -17,6 +17,7 @@ import { HasAnyAuthorityDirective } from 'app/shared/auth/has-any-authority.dire
 import { FeatureToggleLinkDirective } from 'app/shared/feature-toggle/feature-toggle-link.directive';
 import { FeatureToggleHideDirective } from 'app/shared/feature-toggle/feature-toggle-hide.directive';
 import { MockRouter } from '../../helpers/mocks/mock-router';
+import { CourseAccessStorageService } from 'app/course/course-access-storage.service';
 
 describe('Course Management Tab Bar Component', () => {
     let component: CourseManagementTabBarComponent;
@@ -25,6 +26,7 @@ describe('Course Management Tab Bar Component', () => {
     let courseManagementService: CourseManagementService;
     let courseAdminService: CourseAdminService;
     let eventManager: EventManager;
+    let courseAccessStorageService: CourseAccessStorageService;
 
     const router = new MockRouter();
     router.setUrl('');
@@ -60,6 +62,7 @@ describe('Course Management Tab Bar Component', () => {
                 },
                 { provide: Router, useValue: router },
                 MockProvider(CourseManagementService),
+                MockProvider(CourseAccessStorageService),
             ],
         })
             .compileComponents()
@@ -69,6 +72,7 @@ describe('Course Management Tab Bar Component', () => {
                 courseManagementService = TestBed.inject(CourseManagementService);
                 courseAdminService = TestBed.inject(CourseAdminService);
                 eventManager = TestBed.inject(EventManager);
+                courseAccessStorageService = TestBed.inject(CourseAccessStorageService);
             });
     });
 
@@ -81,11 +85,14 @@ describe('Course Management Tab Bar Component', () => {
         jest.restoreAllMocks();
     });
 
-    it('should register changes in course on init', () => {
+    it('should register changes in course and notify courseAccessStorageService on init', () => {
+        const spy = jest.spyOn(courseAccessStorageService, 'onCourseAccessed');
+
         componentFixture.detectChanges();
         component.ngOnInit();
 
         expect(component.course).toEqual(course);
+        expect(spy).toHaveBeenCalledWith(course.id);
     });
 
     it('should destroy event subscriber onDestroy', () => {