diff --git a/src/main/webapp/app/course/course-access-storage.service.ts b/src/main/webapp/app/course/course-access-storage.service.ts index 0c20d56f651c..b0660d7f748b 100644 --- a/src/main/webapp/app/course/course-access-storage.service.ts +++ b/src/main/webapp/app/course/course-access-storage.service.ts @@ -5,25 +5,29 @@ import { LocalStorageService } from 'ngx-webstorage'; providedIn: 'root', }) export class CourseAccessStorageService { - private static readonly STORAGE_KEY = 'artemis.courseAccess'; + public static readonly STORAGE_KEY = 'artemis.courseAccess'; + public static readonly STORAGE_KEY_DROPDOWN = 'artemis.courseAccessDropdown'; + public static readonly MAX_DISPLAYED_RECENTLY_ACCESSED_COURSES_OVERVIEW = 3; + // Maximum number of recently accessed courses displayed in the dropdown, including the current course. The current course will be removed before displaying the dropdown so only 6 - 1 courses will be displayed in the dropdown. + public static readonly MAX_DISPLAYED_RECENTLY_ACCESSED_COURSES_DROPDOWN = 6; constructor(private localStorage: LocalStorageService) {} - onCourseAccessed(courseId: number): void { - const courseAccessMap: { [key: number]: number } = this.localStorage.retrieve(CourseAccessStorageService.STORAGE_KEY) || {}; + onCourseAccessed(courseId: number, storageKey: string, maxAccessedCourses: number): void { + const courseAccessMap: { [key: number]: number } = this.localStorage.retrieve(storageKey) || {}; courseAccessMap[courseId] = Date.now(); - if (Object.keys(courseAccessMap).length > 3) { + if (Object.keys(courseAccessMap).length > maxAccessedCourses) { 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); + this.localStorage.store(storageKey, courseAccessMap); } - getLastAccessedCourses(): number[] { - const courseAccessMap: { [key: number]: number } = this.localStorage.retrieve(CourseAccessStorageService.STORAGE_KEY) || {}; + getLastAccessedCourses(storageKey: string): number[] { + const courseAccessMap: { [key: number]: number } = this.localStorage.retrieve(storageKey) || {}; return Object.entries(courseAccessMap) .sort((a, b) => b[1] - a[1]) diff --git a/src/main/webapp/app/course/manage/course-management-tab-bar/course-management-tab-bar.component.ts b/src/main/webapp/app/course/manage/course-management-tab-bar/course-management-tab-bar.component.ts index c2a0e96da3fa..b87587fa8503 100644 --- a/src/main/webapp/app/course/manage/course-management-tab-bar/course-management-tab-bar.component.ts +++ b/src/main/webapp/app/course/manage/course-management-tab-bar/course-management-tab-bar.component.ts @@ -117,7 +117,16 @@ export class CourseManagementTabBarComponent implements OnInit, OnDestroy, After }); // Notify the course access storage service that the course has been accessed - this.courseAccessStorageService.onCourseAccessed(courseId); + this.courseAccessStorageService.onCourseAccessed( + courseId, + CourseAccessStorageService.STORAGE_KEY, + CourseAccessStorageService.MAX_DISPLAYED_RECENTLY_ACCESSED_COURSES_OVERVIEW, + ); + this.courseAccessStorageService.onCourseAccessed( + courseId, + CourseAccessStorageService.STORAGE_KEY_DROPDOWN, + CourseAccessStorageService.MAX_DISPLAYED_RECENTLY_ACCESSED_COURSES_DROPDOWN, + ); } ngAfterViewInit() { diff --git a/src/main/webapp/app/course/manage/course-management.component.ts b/src/main/webapp/app/course/manage/course-management.component.ts index b9d525c5ae86..7d7b0d9b9604 100644 --- a/src/main/webapp/app/course/manage/course-management.component.ts +++ b/src/main/webapp/app/course/manage/course-management.component.ts @@ -145,7 +145,7 @@ export class CourseManagementComponent implements OnInit, OnDestroy, AfterViewIn this.coursesBySemester = {}; // Get last accessed courses - const lastAccessedCourseIds = this.courseAccessStorageService.getLastAccessedCourses(); + const lastAccessedCourseIds = this.courseAccessStorageService.getLastAccessedCourses(CourseAccessStorageService.STORAGE_KEY); const recentlyAccessedCourses = this.courses.filter((course) => lastAccessedCourseIds.includes(course.id!)); let firstExpanded = false; diff --git a/src/main/webapp/app/overview/course-overview.component.html b/src/main/webapp/app/overview/course-overview.component.html index 527b8ad82659..2ae30a6960cd 100644 --- a/src/main/webapp/app/overview/course-overview.component.html +++ b/src/main/webapp/app/overview/course-overview.component.html @@ -1,55 +1,80 @@
- +
-
- @if (course && course.courseIcon) { -
- -
- } @else { -
- {{ course?.title | slice: 0 : 1 }} +
+
+ @if (course && course.courseIcon) { + @if (courses?.length) { +
+ +
+ } @else { +
+ +
+ } + } @else { + @if (courses?.length) { +
+ {{ course?.title | slice: 0 : 1 }} +
+ } @else { +
+ {{ course?.title | slice: 0 : 1 }} +
+ } + } +
+ @for (course of courses; track course) { + + }
- } +
@if (!isNavbarCollapsed) { -
{{ course?.title }}
+
{{ course?.title }}
}
-
-
    - @for (sidebarItem of sidebarItems; track sidebarItem) { -
  • - @if (sidebarItem.hasInOrionProperty && sidebarItem.showInOrionWindow !== undefined) { - - } @else { - - } +
    +
    +
      + @for (sidebarItem of sidebarItems; track sidebarItem) { +
    • + @if (sidebarItem.hasInOrionProperty && sidebarItem.showInOrionWindow !== undefined) { + + } @else { + + } +
      • + } +
    • +
      + + +
      • - } -
    • -
      - - -
      -
      • -
    +
+
diff --git a/src/main/webapp/app/overview/course-overview.component.scss b/src/main/webapp/app/overview/course-overview.component.scss index 8715d526342c..a6a793a42269 100644 --- a/src/main/webapp/app/overview/course-overview.component.scss +++ b/src/main/webapp/app/overview/course-overview.component.scss @@ -165,7 +165,6 @@ jhi-secured-image { border-radius: 50%; height: 36px; width: auto; - margin-right: 0.75rem; } } @@ -197,7 +196,11 @@ jhi-secured-image { background-color: var(--course-image-bg); border-radius: 50%; display: inline-block; - margin-right: 0.75rem; + color: var(--bs-body-color); +} + +.course-title { + margin-left: 0.75rem; } .max-width-collapsed { @@ -253,3 +256,16 @@ jhi-secured-image { max-height: 91px; // To avoid cut offs in the dropdown menu content } } + +.dropdown-menu { + min-width: 204px; + max-width: 294px; +} + +.dropdown-courses.active { + display: block; +} + +.dropdown-toggle::after { + display: none; +} diff --git a/src/main/webapp/app/overview/course-overview.component.ts b/src/main/webapp/app/overview/course-overview.component.ts index 3f391eeb6691..a18fd0de39b4 100644 --- a/src/main/webapp/app/overview/course-overview.component.ts +++ b/src/main/webapp/app/overview/course-overview.component.ts @@ -62,6 +62,8 @@ import { CourseExercisesComponent } from './course-exercises/course-exercises.co import { CourseLecturesComponent } from './course-lectures/course-lectures.component'; import { facSidebar } from '../../content/icons/icons'; import { CourseTutorialGroupsComponent } from './course-tutorial-groups/course-tutorial-groups.component'; +import { CoursesForDashboardDTO } from 'app/course/manage/courses-for-dashboard-dto'; +import { sortCourses } from 'app/shared/util/course.util'; interface CourseActionItem { title: string; @@ -94,7 +96,9 @@ export class CourseOverviewComponent implements OnInit, OnDestroy, AfterViewInit private courseId: number; private subscription: Subscription; + dashboardSubscription: Subscription; course?: Course; + courses?: Course[]; refreshingCourse = false; private teamAssignmentUpdateListener: Subscription; private quizExercisesChannel: string; @@ -110,9 +114,9 @@ export class CourseOverviewComponent implements OnInit, OnDestroy, AfterViewInit isNotManagementView: boolean; canUnenroll: boolean; isNavbarCollapsed = false; - isSidebarCollapsed = false; profileSubscription?: Subscription; showRefreshButton: boolean = false; + readonly MIN_DISPLAYED_COURSES: number = 6; // Properties to track hidden items for dropdown menu dropdownOpen: boolean = false; @@ -162,11 +166,7 @@ export class CourseOverviewComponent implements OnInit, OnDestroy, AfterViewInit faGraduationCap = faGraduationCap; faSync = faSync; faCircleNotch = faCircleNotch; - faNetworkWired = faNetworkWired; - faChalkboardUser = faChalkboardUser; faChevronRight = faChevronRight; - faListCheck = faListCheck; - faDoorOpen = faDoorOpen; facSidebar = facSidebar; faEllipsis = faEllipsis; @@ -203,9 +203,19 @@ export class CourseOverviewComponent implements OnInit, OnDestroy, AfterViewInit }); this.getCollapseStateFromStorage(); this.course = this.courseStorageService.getCourse(this.courseId); + this.updateRecentlyAccessedCourses(); this.isNotManagementView = !this.router.url.startsWith('/course-management'); // Notify the course access storage service that the course has been accessed - this.courseAccessStorageService.onCourseAccessed(this.courseId); + this.courseAccessStorageService.onCourseAccessed( + this.courseId, + CourseAccessStorageService.STORAGE_KEY, + CourseAccessStorageService.MAX_DISPLAYED_RECENTLY_ACCESSED_COURSES_OVERVIEW, + ); + this.courseAccessStorageService.onCourseAccessed( + this.courseId, + CourseAccessStorageService.STORAGE_KEY_DROPDOWN, + CourseAccessStorageService.MAX_DISPLAYED_RECENTLY_ACCESSED_COURSES_DROPDOWN, + ); await firstValueFrom(this.loadCourse()); await this.initAfterCourseLoad(); @@ -277,6 +287,31 @@ export class CourseOverviewComponent implements OnInit, OnDestroy, AfterViewInit } } + /** initialize courses attribute by retrieving recently accessed courses from the server */ + updateRecentlyAccessedCourses() { + this.dashboardSubscription = this.courseService.findAllForDashboard().subscribe({ + next: (res: HttpResponse) => { + if (res.body) { + const { courses: courseDtos } = res.body; + const courses = courseDtos.map((courseDto) => courseDto.course); + this.courses = sortCourses(courses); + if (this.courses.length > this.MIN_DISPLAYED_COURSES) { + const lastAccessedCourseIds = this.courseAccessStorageService.getLastAccessedCourses(CourseAccessStorageService.STORAGE_KEY_DROPDOWN); + this.courses = this.courses.filter((course) => lastAccessedCourseIds.includes(course.id!)); + } + this.courses = this.courses.filter((course) => course.id !== this.courseId); + } + }, + }); + } + + /** Navigate to a new Course */ + switchCourse(course: Course) { + this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => { + this.router.navigate(['courses', course.id]); + }); + } + getCourseActionItems(): CourseActionItem[] { const courseActionItems = []; this.canUnenroll = this.canStudentUnenroll() && !this.course?.isAtLeastTutor; @@ -708,6 +743,7 @@ export class CourseOverviewComponent implements OnInit, OnDestroy, AfterViewInit this.vcSubscription?.unsubscribe(); this.subscription?.unsubscribe(); this.profileSubscription?.unsubscribe(); + this.dashboardSubscription?.unsubscribe(); this.ngUnsubscribe.next(); this.ngUnsubscribe.complete(); } diff --git a/src/main/webapp/app/overview/courses.component.ts b/src/main/webapp/app/overview/courses.component.ts index 7b50f810a547..73ce68512b8c 100644 --- a/src/main/webapp/app/overview/courses.component.ts +++ b/src/main/webapp/app/overview/courses.component.ts @@ -13,6 +13,7 @@ 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'; +import { sortCourses } from 'app/shared/util/course.util'; @Component({ selector: 'jhi-overview', @@ -71,7 +72,7 @@ export class CoursesComponent implements OnInit, OnDestroy { res.body.courses.forEach((courseDto: CourseForDashboardDTO) => { courses.push(courseDto.course); }); - this.courses = courses.sort((a, b) => (a.title ?? '').localeCompare(b.title ?? '')); + this.courses = sortCourses(courses); this.courseForGuidedTour = this.guidedTourService.enableTourForCourseOverview(this.courses, courseOverviewTour, true); this.nextRelevantExams = res.body.activeExams ?? []; @@ -89,7 +90,7 @@ export class CoursesComponent implements OnInit, OnDestroy { if (this.courses.length <= 5) { this.regularCourses = this.courses; } else { - const lastAccessedCourseIds = this.courseAccessStorageService.getLastAccessedCourses(); + const lastAccessedCourseIds = this.courseAccessStorageService.getLastAccessedCourses(CourseAccessStorageService.STORAGE_KEY); this.recentlyAccessedCourses = this.courses.filter((course) => lastAccessedCourseIds.includes(course.id!)); this.regularCourses = this.courses.filter((course) => !lastAccessedCourseIds.includes(course.id!)); } diff --git a/src/main/webapp/app/shared/util/course.util.ts b/src/main/webapp/app/shared/util/course.util.ts new file mode 100644 index 000000000000..ae49c6318b8c --- /dev/null +++ b/src/main/webapp/app/shared/util/course.util.ts @@ -0,0 +1,11 @@ +import { Course } from 'app/entities/course.model'; + +/** + * Sorts an array of Course objects alphabetically by their title. + * + * @param {Course[]} courses - The array of Course objects to be sorted. + * @returns {Course[]} The sorted array of Course objects. + */ +export function sortCourses(courses: Course[]): Course[] { + return courses.sort((courseA, courseB) => (courseA.title ?? '').localeCompare(courseB.title ?? '')); +} diff --git a/src/test/javascript/spec/component/course/course-management-tab-bar.component.spec.ts b/src/test/javascript/spec/component/course/course-management-tab-bar.component.spec.ts index 954729f5fe78..035b50fc9ad1 100644 --- a/src/test/javascript/spec/component/course/course-management-tab-bar.component.spec.ts +++ b/src/test/javascript/spec/component/course/course-management-tab-bar.component.spec.ts @@ -92,7 +92,7 @@ describe('Course Management Tab Bar Component', () => { component.ngOnInit(); expect(component.course).toEqual(course); - expect(spy).toHaveBeenCalledWith(course.id); + expect(spy).toHaveBeenCalledWith(course.id, CourseAccessStorageService.STORAGE_KEY, CourseAccessStorageService.MAX_DISPLAYED_RECENTLY_ACCESSED_COURSES_OVERVIEW); }); it('should destroy event subscriber onDestroy', () => { diff --git a/src/test/javascript/spec/component/course/course-overview.component.spec.ts b/src/test/javascript/spec/component/course/course-overview.component.spec.ts index daebeb211e5e..b6575eaad038 100644 --- a/src/test/javascript/spec/component/course/course-overview.component.spec.ts +++ b/src/test/javascript/spec/component/course/course-overview.component.spec.ts @@ -53,6 +53,8 @@ import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatSidenavModule } from '@angular/material/sidenav'; import { TranslateDirective } from 'app/shared/language/translate.directive'; +import { CourseForDashboardDTO } from 'app/course/manage/course-for-dashboard-dto'; +import { CoursesForDashboardDTO } from 'app/course/manage/courses-for-dashboard-dto'; const endDate1 = dayjs().add(1, 'days'); const visibleDate1 = dayjs().subtract(1, 'days'); @@ -108,6 +110,11 @@ const course2: Course = { numberOfPrerequisites: 1, numberOfTutorialGroups: 1, }; +const course1Dashboard = { course: course1 } as CourseForDashboardDTO; +const course2Dashboard = { course: course2 } as CourseForDashboardDTO; +const coursesInDashboard: CourseForDashboardDTO[] = [course1Dashboard, course2Dashboard]; +const courses: Course[] = [course2]; +const coursesDashboard = { courses: coursesInDashboard } as CoursesForDashboardDTO; @Component({ template: '', @@ -139,6 +146,7 @@ describe('CourseOverviewComponent', () => { let findOneForDashboardStub: jest.SpyInstance; let route: ActivatedRoute; let findOneForRegistrationStub: jest.SpyInstance; + let findAllForDashboardSpy: jest.SpyInstance; let metisConversationService: MetisConversationService; @@ -222,6 +230,9 @@ describe('CourseOverviewComponent', () => { .spyOn(courseService, 'findOneForRegistration') .mockReturnValue(of(new HttpResponse({ body: course1, headers: new HttpHeaders() }))); jest.spyOn(metisConversationService, 'course', 'get').mockReturnValue(course); + findAllForDashboardSpy = jest + .spyOn(courseService, 'findAllForDashboard') + .mockReturnValue(of(new HttpResponse({ body: coursesDashboard, headers: new HttpHeaders() }))); }); })); @@ -251,7 +262,16 @@ describe('CourseOverviewComponent', () => { expect(subscribeToTeamAssignmentUpdatesStub).toHaveBeenCalledOnce(); expect(getSidebarItems).toHaveBeenCalledOnce(); expect(getCourseActionItems).toHaveBeenCalledOnce(); - expect(notifyAboutCourseAccessStub).toHaveBeenCalledExactlyOnceWith(course1.id); + expect(notifyAboutCourseAccessStub).toHaveBeenCalledWith( + course1.id, + CourseAccessStorageService.STORAGE_KEY, + CourseAccessStorageService.MAX_DISPLAYED_RECENTLY_ACCESSED_COURSES_OVERVIEW, + ); + expect(notifyAboutCourseAccessStub).toHaveBeenCalledWith( + course1.id, + CourseAccessStorageService.STORAGE_KEY_DROPDOWN, + CourseAccessStorageService.MAX_DISPLAYED_RECENTLY_ACCESSED_COURSES_DROPDOWN, + ); expect(getUpdateVisibility).toHaveBeenCalledOnce(); expect(getUpdateMenuPosition).toHaveBeenCalledOnce(); }); @@ -654,4 +674,34 @@ describe('CourseOverviewComponent', () => { expect(component.dropdownOpen).toBeTrue(); }); + + it('should initialize courses attribute when page is loaded', () => { + component.ngOnInit(); + + expect(component.courses).toEqual(courses); + expect(component.courses?.length).toBe(1); + }); + + it('should not initialize courses attribute when page has error while loading', () => { + findAllForDashboardSpy.mockReturnValue(throwError(() => new HttpResponse({ status: 404 }))); + + component.ngOnInit(); + expect(component.courses?.length).toBeUndefined(); + }); + + it('should not display current course in dropdown', () => { + component.ngOnInit(); + + expect(component.courses).toEqual(courses); + expect(component.courses?.pop()).toBe(course2); + }); + + it('should unsubscribe from dashboardSubscription on ngOnDestroy', () => { + component.updateRecentlyAccessedCourses(); + fixture.detectChanges(); + component.ngOnDestroy(); + + expect(courseService.findAllForDashboard).toHaveBeenCalled(); + expect(component.dashboardSubscription.closed).toBeTrue(); + }); }); diff --git a/src/test/javascript/spec/service/course-access-storage.service.spec.ts b/src/test/javascript/spec/service/course-access-storage.service.spec.ts index 74a8b765f454..9eadeff6346e 100644 --- a/src/test/javascript/spec/service/course-access-storage.service.spec.ts +++ b/src/test/javascript/spec/service/course-access-storage.service.spec.ts @@ -24,7 +24,7 @@ describe('CourseAccessStorageService', () => { it('should store accessed course', () => { const courseId = 123; - service.onCourseAccessed(courseId); + service.onCourseAccessed(courseId, CourseAccessStorageService.STORAGE_KEY, CourseAccessStorageService.MAX_DISPLAYED_RECENTLY_ACCESSED_COURSES_OVERVIEW); const courseAccessMap = localStorage.retrieve('artemis.courseAccess'); expect(courseAccessMap).toHaveProperty(courseId.toString()); }); @@ -32,10 +32,10 @@ describe('CourseAccessStorageService', () => { it('should retrieve last accessed courses and remove older courses', fakeAsync(() => { const courseIds = [123, 456, 789, 101112, 7494]; courseIds.forEach((courseId) => { - service.onCourseAccessed(courseId); + service.onCourseAccessed(courseId, CourseAccessStorageService.STORAGE_KEY, CourseAccessStorageService.MAX_DISPLAYED_RECENTLY_ACCESSED_COURSES_OVERVIEW); tick(10); // Wait 10ms to ensure that the timestamp is different for each course }); - const lastAccessedCourses = service.getLastAccessedCourses(); + const lastAccessedCourses = service.getLastAccessedCourses(CourseAccessStorageService.STORAGE_KEY); expect(lastAccessedCourses).toEqual(courseIds.reverse().slice(0, 3)); })); });