diff --git a/src/main/webapp/app/admin/lti-configuration/edit-lti-configuration.component.ts b/src/main/webapp/app/admin/lti-configuration/edit-lti-configuration.component.ts index b579f2fc822a..6f65f9c87969 100644 --- a/src/main/webapp/app/admin/lti-configuration/edit-lti-configuration.component.ts +++ b/src/main/webapp/app/admin/lti-configuration/edit-lti-configuration.component.ts @@ -1,5 +1,5 @@ import { AlertService } from 'app/core/util/alert.service'; -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, inject } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { finalize } from 'rxjs'; import { FormControl, FormGroup } from '@angular/forms'; @@ -12,6 +12,11 @@ import { LtiConfigurationService } from 'app/admin/lti-configuration/lti-configu templateUrl: './edit-lti-configuration.component.html', }) export class EditLtiConfigurationComponent implements OnInit { + private route = inject(ActivatedRoute); + private ltiConfigurationService = inject(LtiConfigurationService); + private router = inject(Router); + private alertService = inject(AlertService); + platform: LtiPlatformConfiguration; platformConfigurationForm: FormGroup; @@ -22,13 +27,6 @@ export class EditLtiConfigurationComponent implements OnInit { faSave = faSave; faPlus = faPlus; - constructor( - private route: ActivatedRoute, - private ltiConfigurationService: LtiConfigurationService, - private router: Router, - private alertService: AlertService, - ) {} - /** * Gets the configuration for the course encoded in the route and prepares the form */ diff --git a/src/main/webapp/app/admin/lti-configuration/lti-configuration.component.ts b/src/main/webapp/app/admin/lti-configuration/lti-configuration.component.ts index 2d978673adbc..a18fbb8f602c 100644 --- a/src/main/webapp/app/admin/lti-configuration/lti-configuration.component.ts +++ b/src/main/webapp/app/admin/lti-configuration/lti-configuration.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, inject } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { Course } from 'app/entities/course.model'; import { faExclamationTriangle, faPencilAlt, faPlus, faSort, faTrash, faWrench } from '@fortawesome/free-solid-svg-icons'; @@ -17,6 +17,12 @@ import { combineLatest } from 'rxjs'; templateUrl: './lti-configuration.component.html', }) export class LtiConfigurationComponent implements OnInit { + private router = inject(Router); + private ltiConfigurationService = inject(LtiConfigurationService); + private sortService = inject(SortService); + private alertService = inject(AlertService); + private activatedRoute = inject(ActivatedRoute); + course: Course; platforms: LtiPlatformConfiguration[]; ascending!: boolean; @@ -40,14 +46,6 @@ export class LtiConfigurationComponent implements OnInit { private dialogErrorSource = new Subject(); dialogError$ = this.dialogErrorSource.asObservable(); - constructor( - private router: Router, - private ltiConfigurationService: LtiConfigurationService, - private sortService: SortService, - private alertService: AlertService, - private activatedRoute: ActivatedRoute, - ) {} - /** * Gets the configuration for the course encoded in the route and fetches the exercises */ diff --git a/src/main/webapp/app/admin/lti-configuration/lti-configuration.service.ts b/src/main/webapp/app/admin/lti-configuration/lti-configuration.service.ts index c6484edd768f..277d2a6b7031 100644 --- a/src/main/webapp/app/admin/lti-configuration/lti-configuration.service.ts +++ b/src/main/webapp/app/admin/lti-configuration/lti-configuration.service.ts @@ -1,4 +1,4 @@ -import { Injectable } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; import { HttpClient, HttpParams, HttpResponse } from '@angular/common/http'; import { Observable } from 'rxjs'; import { LtiPlatformConfiguration } from 'app/admin/lti-configuration/lti-configuration.model'; @@ -6,7 +6,7 @@ import { createRequestOption } from 'app/shared/util/request.util'; @Injectable({ providedIn: 'root' }) export class LtiConfigurationService { - constructor(private http: HttpClient) {} + private http = inject(HttpClient); /** * Sends a GET request to retrieve all lti platform configurations diff --git a/src/main/webapp/app/course/manage/course-lti-configuration/course-lti-configuration.component.ts b/src/main/webapp/app/course/manage/course-lti-configuration/course-lti-configuration.component.ts index d92f4719d383..d91fcf8469b2 100644 --- a/src/main/webapp/app/course/manage/course-lti-configuration/course-lti-configuration.component.ts +++ b/src/main/webapp/app/course/manage/course-lti-configuration/course-lti-configuration.component.ts @@ -1,17 +1,45 @@ -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; +import { Component, OnInit, inject } from '@angular/core'; +import { ActivatedRoute, RouterLink } from '@angular/router'; import { Course } from 'app/entities/course.model'; import { OnlineCourseConfiguration } from 'app/entities/online-course-configuration.model'; import { CourseManagementService } from 'app/course/manage/course-management.service'; import { Exercise } from 'app/entities/exercise.model'; import { faExclamationTriangle, faSort, faWrench } from '@fortawesome/free-solid-svg-icons'; import { SortService } from 'app/shared/service/sort.service'; +import { FormsModule } from '@angular/forms'; +import { TranslateDirective } from '../../../shared/language/translate.directive'; +import { FaIconComponent } from '@fortawesome/angular-fontawesome'; +import { NgbNav, NgbNavContent, NgbNavItem, NgbNavLink, NgbNavLinkBase, NgbNavOutlet, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'; +import { ArtemisSharedComponentModule } from '../../../shared/components/shared-component.module'; +import { ArtemisSharedCommonModule } from '../../../shared/shared-common.module'; +import { ArtemisTranslatePipe } from '../../../shared/pipes/artemis-translate.pipe'; @Component({ selector: 'jhi-course-lti-configuration', templateUrl: './course-lti-configuration.component.html', + standalone: true, + imports: [ + FormsModule, + TranslateDirective, + RouterLink, + FaIconComponent, + NgbNav, + NgbNavItem, + NgbNavLink, + NgbNavLinkBase, + NgbNavContent, + NgbTooltip, + ArtemisSharedComponentModule, + ArtemisSharedCommonModule, + NgbNavOutlet, + ArtemisTranslatePipe, + ], }) export class CourseLtiConfigurationComponent implements OnInit { + private route = inject(ActivatedRoute); + private sortService = inject(SortService); + private courseManagementService = inject(CourseManagementService); + protected readonly Object = Object; course: Course; @@ -29,12 +57,6 @@ export class CourseLtiConfigurationComponent implements OnInit { faExclamationTriangle = faExclamationTriangle; faWrench = faWrench; - constructor( - private route: ActivatedRoute, - private sortService: SortService, - private courseManagementService: CourseManagementService, - ) {} - /** * Gets the configuration for the course encoded in the route and fetches the exercises */ diff --git a/src/main/webapp/app/course/manage/course-lti-configuration/edit-course-lti-configuration.component.ts b/src/main/webapp/app/course/manage/course-lti-configuration/edit-course-lti-configuration.component.ts index ed940d582462..78f46c1f410d 100644 --- a/src/main/webapp/app/course/manage/course-lti-configuration/edit-course-lti-configuration.component.ts +++ b/src/main/webapp/app/course/manage/course-lti-configuration/edit-course-lti-configuration.component.ts @@ -1,9 +1,9 @@ -import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'; +import { Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { Course } from 'app/entities/course.model'; import { finalize } from 'rxjs'; import { OnlineCourseConfiguration } from 'app/entities/online-course-configuration.model'; -import { FormControl, FormGroup } from '@angular/forms'; +import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { faBan, faSave } from '@fortawesome/free-solid-svg-icons'; import { regexValidator } from 'app/shared/form/shortname-validator.directive'; import { LOGIN_PATTERN } from 'app/shared/constants/input.constants'; @@ -13,12 +13,44 @@ import { LtiConfigurationService } from 'app/admin/lti-configuration/lti-configu import { ITEMS_PER_PAGE } from 'app/shared/constants/pagination.constants'; import { HttpHeaders, HttpResponse } from '@angular/common/http'; import { combineLatest } from 'rxjs'; +import { TranslateDirective } from '../../../shared/language/translate.directive'; +import { ArtemisSharedComponentModule } from '../../../shared/components/shared-component.module'; +import { ArtemisSharedModule } from 'app/shared/shared.module'; +import { NgbDropdown, NgbDropdownButtonItem, NgbDropdownItem, NgbDropdownMenu, NgbDropdownToggle, NgbPagination, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'; +import { FaIconComponent } from '@fortawesome/angular-fontawesome'; +import { KeyValuePipe } from '@angular/common'; +import { ArtemisTranslatePipe } from '../../../shared/pipes/artemis-translate.pipe'; +import { ArtemisSharedPipesModule } from '../../../shared/pipes/shared-pipes.module'; @Component({ selector: 'jhi-edit-course-lti-configuration', templateUrl: './edit-course-lti-configuration.component.html', + standalone: true, + imports: [ + FormsModule, + ReactiveFormsModule, + TranslateDirective, + ArtemisSharedComponentModule, + ArtemisSharedModule, + NgbDropdown, + NgbDropdownToggle, + NgbDropdownMenu, + NgbDropdownButtonItem, + NgbDropdownItem, + NgbTooltip, + NgbPagination, + FaIconComponent, + KeyValuePipe, + ArtemisTranslatePipe, + ArtemisSharedPipesModule, + ], }) export class EditCourseLtiConfigurationComponent implements OnInit { + private route = inject(ActivatedRoute); + private courseService = inject(CourseManagementService); + private router = inject(Router); + private ltiConfigurationService = inject(LtiConfigurationService); + @ViewChild('scrollableContent') scrollableContent: ElementRef; course: Course; @@ -37,13 +69,6 @@ export class EditCourseLtiConfigurationComponent implements OnInit { faBan = faBan; faSave = faSave; - constructor( - private route: ActivatedRoute, - private courseService: CourseManagementService, - private router: Router, - private ltiConfigurationService: LtiConfigurationService, - ) {} - /** * Gets the configuration for the course encoded in the route and prepares the form */ diff --git a/src/main/webapp/app/course/manage/course-management.module.ts b/src/main/webapp/app/course/manage/course-management.module.ts index 4788d338648d..12d386095e31 100644 --- a/src/main/webapp/app/course/manage/course-management.module.ts +++ b/src/main/webapp/app/course/manage/course-management.module.ts @@ -122,6 +122,8 @@ import { ArtemisMarkdownEditorModule } from 'app/shared/markdown-editor/markdown DetailModule, SubmissionResultStatusModule, ArtemisMarkdownEditorModule, + CourseLtiConfigurationComponent, + EditCourseLtiConfigurationComponent, ], declarations: [ CourseManagementComponent, @@ -138,8 +140,6 @@ import { ArtemisMarkdownEditorModule } from 'app/shared/markdown-editor/markdown CourseDetailLineChartComponent, CourseManagementExercisesSearchComponent, CourseGroupMembershipComponent, - CourseLtiConfigurationComponent, - EditCourseLtiConfigurationComponent, CourseManagementTabBarComponent, BuildQueueComponent, ImageCropperModalComponent, diff --git a/src/main/webapp/app/lti/lti-course-card.component.html b/src/main/webapp/app/lti/lti-course-card.component.html index 3171fef4176d..9fd232b510e5 100644 --- a/src/main/webapp/app/lti/lti-course-card.component.html +++ b/src/main/webapp/app/lti/lti-course-card.component.html @@ -1,21 +1,21 @@
- +
- @if (course.courseIcon) { - + @if (course().courseIcon) { + }
- {{ course.title + ' (' + course.shortName + ')' }} + {{ course().title + ' (' + course().shortName + ')' }}
diff --git a/src/main/webapp/app/lti/lti-course-card.component.ts b/src/main/webapp/app/lti/lti-course-card.component.ts index 1ccd137ebfd4..bb66951dfd2a 100644 --- a/src/main/webapp/app/lti/lti-course-card.component.ts +++ b/src/main/webapp/app/lti/lti-course-card.component.ts @@ -1,20 +1,28 @@ -import { Component, Input, OnChanges } from '@angular/core'; +import { Component, effect, input } from '@angular/core'; import { Course } from 'app/entities/course.model'; import { ARTEMIS_DEFAULT_COLOR } from 'app/app.constants'; import { CachingStrategy } from 'app/shared/image/secured-image.component'; +import { RouterLink } from '@angular/router'; +import { NgStyle } from '@angular/common'; +import { ArtemisSharedModule } from 'app/shared/shared.module'; @Component({ selector: 'jhi-overview-lti-course-card', templateUrl: './lti-course-card.component.html', styleUrls: ['../overview/course-card.scss'], + standalone: true, + imports: [RouterLink, NgStyle, ArtemisSharedModule], }) -export class LtiCourseCardComponent implements OnChanges { +export class LtiCourseCardComponent { readonly ARTEMIS_DEFAULT_COLOR = ARTEMIS_DEFAULT_COLOR; - @Input() course: Course; + course = input.required(); CachingStrategy = CachingStrategy; courseColor: string; - ngOnChanges() { - this.courseColor = this.course.color || this.ARTEMIS_DEFAULT_COLOR; + constructor() { + effect(() => { + const courseValue = this.course(); + this.courseColor = courseValue?.color || this.ARTEMIS_DEFAULT_COLOR; + }); } } diff --git a/src/main/webapp/app/lti/lti.module.ts b/src/main/webapp/app/lti/lti.module.ts index f9463398c64f..aa71f406cbaa 100644 --- a/src/main/webapp/app/lti/lti.module.ts +++ b/src/main/webapp/app/lti/lti.module.ts @@ -16,8 +16,13 @@ import { LtiCourseCardComponent } from 'app/lti/lti-course-card.component'; const LTI_LAUNCH_ROUTES = [...ltiLaunchState]; @NgModule({ - imports: [RouterModule.forChild(LTI_LAUNCH_ROUTES), ArtemisCoreModule, ArtemisSharedModule, FormsModule, ArtemisSharedComponentModule, ArtemisSharedLibsModule], - declarations: [ + imports: [ + RouterModule.forChild(LTI_LAUNCH_ROUTES), + ArtemisCoreModule, + ArtemisSharedModule, + FormsModule, + ArtemisSharedComponentModule, + ArtemisSharedLibsModule, Lti13ExerciseLaunchComponent, Lti13DynamicRegistrationComponent, Lti13DeepLinkingComponent, diff --git a/src/main/webapp/app/lti/lti13-deep-linking.component.ts b/src/main/webapp/app/lti/lti13-deep-linking.component.ts index 55be442a98f5..2ac4c0aa9098 100644 --- a/src/main/webapp/app/lti/lti13-deep-linking.component.ts +++ b/src/main/webapp/app/lti/lti13-deep-linking.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, inject } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { CourseManagementService } from 'app/course/manage/course-management.service'; import { Exercise } from 'app/entities/exercise.model'; @@ -10,12 +10,29 @@ import { Course } from 'app/entities/course.model'; import { AlertService } from 'app/core/util/alert.service'; import { onError } from 'app/shared/util/global.utils'; import { SessionStorageService } from 'ngx-webstorage'; +import { ArtemisSharedModule } from 'app/shared/shared.module'; +import { TranslateDirective } from '../shared/language/translate.directive'; +import { ArtemisSharedComponentModule } from '../shared/components/shared-component.module'; +import { ArtemisSharedCommonModule } from '../shared/shared-common.module'; +import { FaIconComponent } from '@fortawesome/angular-fontawesome'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'jhi-deep-linking', templateUrl: './lti13-deep-linking.component.html', + standalone: true, + imports: [ArtemisSharedModule, TranslateDirective, ArtemisSharedComponentModule, ArtemisSharedCommonModule, FaIconComponent, FormsModule], }) export class Lti13DeepLinkingComponent implements OnInit { + route = inject(ActivatedRoute); + private sortService = inject(SortService); + private courseManagementService = inject(CourseManagementService); + private http = inject(HttpClient); + private accountService = inject(AccountService); + private router = inject(Router); + private alertService = inject(AlertService); + private sessionStorageService = inject(SessionStorageService); + courseId: number; exercises: Exercise[]; selectedExercises?: Set = new Set(); @@ -29,16 +46,6 @@ export class Lti13DeepLinkingComponent implements OnInit { faSort = faSort; faExclamationTriangle = faExclamationTriangle; faWrench = faWrench; - constructor( - public route: ActivatedRoute, - private sortService: SortService, - private courseManagementService: CourseManagementService, - private http: HttpClient, - private accountService: AccountService, - private router: Router, - private alertService: AlertService, - private sessionStorageService: SessionStorageService, - ) {} /** * Initializes the component. diff --git a/src/main/webapp/app/lti/lti13-dynamic-registration.component.ts b/src/main/webapp/app/lti/lti13-dynamic-registration.component.ts index 7cc0091618bc..11fc898d8b96 100644 --- a/src/main/webapp/app/lti/lti13-dynamic-registration.component.ts +++ b/src/main/webapp/app/lti/lti13-dynamic-registration.component.ts @@ -1,21 +1,22 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, inject } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { HttpClient, HttpParams } from '@angular/common/http'; +import { TranslateDirective } from '../shared/language/translate.directive'; @Component({ selector: 'jhi-dynamic-registration', templateUrl: './lti13-dynamic-registration.component.html', + standalone: true, + imports: [TranslateDirective], }) export class Lti13DynamicRegistrationComponent implements OnInit { + private route = inject(ActivatedRoute); + private http = inject(HttpClient); + courseId: number; isRegistering = true; registeredSuccessfully: boolean; - constructor( - private route: ActivatedRoute, - private http: HttpClient, - ) {} - /** * perform LTI 13 dynamic registration */ diff --git a/src/main/webapp/app/lti/lti13-exercise-launch.component.ts b/src/main/webapp/app/lti/lti13-exercise-launch.component.ts index 8a70a92af447..9f0c9826e333 100644 --- a/src/main/webapp/app/lti/lti13-exercise-launch.component.ts +++ b/src/main/webapp/app/lti/lti13-exercise-launch.component.ts @@ -1,11 +1,13 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, inject } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; +import { CommonModule } from '@angular/common'; import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'; import { AccountService } from 'app/core/auth/account.service'; import { captureException } from '@sentry/angular'; import { SessionStorageService } from 'ngx-webstorage'; import { LtiService } from 'app/shared/service/lti.service'; import { Theme, ThemeService } from 'app/core/theme/theme.service'; +import { TranslateDirective } from '../shared/language/translate.directive'; type LtiLaunchResponse = { targetLinkUri: string; @@ -16,19 +18,21 @@ type LtiLaunchResponse = { @Component({ selector: 'jhi-lti-exercise-launch', templateUrl: './lti13-exercise-launch.component.html', + standalone: true, + imports: [TranslateDirective, CommonModule], }) export class Lti13ExerciseLaunchComponent implements OnInit { + private route = inject(ActivatedRoute); + private http = inject(HttpClient); + private accountService = inject(AccountService); + private router = inject(Router); + private sessionStorageService = inject(SessionStorageService); + private ltiService = inject(LtiService); + private themeService = inject(ThemeService); + isLaunching: boolean; - constructor( - private route: ActivatedRoute, - private http: HttpClient, - private accountService: AccountService, - private router: Router, - private sessionStorageService: SessionStorageService, - private ltiService: LtiService, - private themeService: ThemeService, - ) { + constructor() { this.isLaunching = true; } diff --git a/src/main/webapp/app/lti/lti13-select-content.component.ts b/src/main/webapp/app/lti/lti13-select-content.component.ts index f4afb5cca6b8..d2a68ccf61ba 100644 --- a/src/main/webapp/app/lti/lti13-select-content.component.ts +++ b/src/main/webapp/app/lti/lti13-select-content.component.ts @@ -1,6 +1,9 @@ -import { Component, ElementRef, NgZone, OnInit, SecurityContext, ViewChild } from '@angular/core'; +import { Component, ElementRef, NgZone, OnInit, SecurityContext, ViewChild, inject } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { DomSanitizer } from '@angular/platform-browser'; +import { TranslateDirective } from '../shared/language/translate.directive'; +import { FormsModule } from '@angular/forms'; +import { ArtemisSharedPipesModule } from '../shared/pipes/shared-pipes.module'; /** * Component responsible for sending deep linking content. @@ -8,11 +11,18 @@ import { DomSanitizer } from '@angular/platform-browser'; * and automatically submits a form with the relevant data. * According to LTI documentation auto submit form must be used. */ + @Component({ selector: 'jhi-select-exercise', templateUrl: './lti13-select-content.component.html', + standalone: true, + imports: [TranslateDirective, FormsModule, ArtemisSharedPipesModule], }) export class Lti13SelectContentComponent implements OnInit { + private route = inject(ActivatedRoute); + private sanitizer = inject(DomSanitizer); + private zone = inject(NgZone); + jwt: string; id: string; actionLink: string; @@ -21,12 +31,6 @@ export class Lti13SelectContentComponent implements OnInit { @ViewChild('deepLinkingForm', { static: false }) deepLinkingForm?: ElementRef; - constructor( - private route: ActivatedRoute, - private sanitizer: DomSanitizer, - private zone: NgZone, - ) {} - /** * Initializes the component. * - Retrieves query parameters from the route snapshot. diff --git a/src/main/webapp/app/lti/lti13-select-course.component.ts b/src/main/webapp/app/lti/lti13-select-course.component.ts index 1032bde2f15f..f9633a91315f 100644 --- a/src/main/webapp/app/lti/lti13-select-course.component.ts +++ b/src/main/webapp/app/lti/lti13-select-course.component.ts @@ -1,20 +1,23 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, inject } from '@angular/core'; import { CourseManagementService } from '../course/manage/course-management.service'; import { SessionStorageService } from 'ngx-webstorage'; import { OnlineCourseDtoModel } from 'app/lti/online-course-dto.model'; import { AlertService } from 'app/core/util/alert.service'; +import { LtiCourseCardComponent } from './lti-course-card.component'; +import { TranslateDirective } from '../shared/language/translate.directive'; @Component({ selector: 'jhi-lti-courses-overview', templateUrl: './lti13-select-course.component.html', + standalone: true, + imports: [LtiCourseCardComponent, TranslateDirective], }) export class LtiCoursesComponent implements OnInit { + private courseService = inject(CourseManagementService); + private sessionStorageService = inject(SessionStorageService); + private alertService = inject(AlertService); + public courses: OnlineCourseDtoModel[]; - constructor( - private courseService: CourseManagementService, - private sessionStorageService: SessionStorageService, - private alertService: AlertService, - ) {} async ngOnInit() { this.loadAndFilterCourses(); diff --git a/src/main/webapp/app/overview/exercise-details/lti-initializer-modal.component.ts b/src/main/webapp/app/overview/exercise-details/lti-initializer-modal.component.ts index 009f1fe00e23..0bb7a8b46d5a 100644 --- a/src/main/webapp/app/overview/exercise-details/lti-initializer-modal.component.ts +++ b/src/main/webapp/app/overview/exercise-details/lti-initializer-modal.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; import { AlertService } from 'app/core/util/alert.service'; @@ -8,19 +8,17 @@ import { AlertService } from 'app/core/util/alert.service'; templateUrl: './lti-initializer-modal.component.html', }) export class LtiInitializerModalComponent { + private activeModal = inject(NgbActiveModal); + private alertService = inject(AlertService); + private router = inject(Router); + private activatedRoute = inject(ActivatedRoute); + password: string; loginName: string; passwordResetLocation = ['account', 'reset', 'request']; readAndUnderstood = false; - constructor( - private activeModal: NgbActiveModal, - private alertService: AlertService, - private router: Router, - private activatedRoute: ActivatedRoute, - ) {} - /** * Closes the dialog, removes the query parameter and shows a helper message */ diff --git a/src/main/webapp/app/overview/exercise-details/lti-initializer.component.ts b/src/main/webapp/app/overview/exercise-details/lti-initializer.component.ts index 01f6eb257308..fbd21be21bb9 100644 --- a/src/main/webapp/app/overview/exercise-details/lti-initializer.component.ts +++ b/src/main/webapp/app/overview/exercise-details/lti-initializer.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, inject } from '@angular/core'; import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'; import { LtiInitializerModalComponent } from 'app/overview/exercise-details/lti-initializer-modal.component'; import { UserService } from 'app/core/user/user.service'; @@ -11,16 +11,14 @@ import { AccountService } from 'app/core/auth/account.service'; template: '', }) export class LtiInitializerComponent implements OnInit { - modalRef: NgbModalRef | undefined; + private modalService = inject(NgbModal); + private userService = inject(UserService); + private alertService = inject(AlertService); + private router = inject(Router); + private activatedRoute = inject(ActivatedRoute); + private accountService = inject(AccountService); - constructor( - private modalService: NgbModal, - private userService: UserService, - private alertService: AlertService, - private router: Router, - private activatedRoute: ActivatedRoute, - private accountService: AccountService, - ) {} + modalRef: NgbModalRef | undefined; ngOnInit() { this.activatedRoute.queryParams.subscribe((queryParams) => { diff --git a/src/test/javascript/spec/component/course/course-lti-configuration.component.spec.ts b/src/test/javascript/spec/component/course/course-lti-configuration.component.spec.ts index 2912262c8621..e38941cdfdf9 100644 --- a/src/test/javascript/spec/component/course/course-lti-configuration.component.spec.ts +++ b/src/test/javascript/spec/component/course/course-lti-configuration.component.spec.ts @@ -1,12 +1,10 @@ import { HttpResponse } from '@angular/common/http'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import { CourseManagementService } from 'app/course/manage/course-management.service'; -import { CopyIconButtonComponent } from 'app/shared/components/copy-icon-button/copy-icon-button.component'; -import { HelpIconComponent } from 'app/shared/components/help-icon.component'; import { of } from 'rxjs'; import { By } from '@angular/platform-browser'; import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap'; -import { MockComponent, MockDirective, MockModule, MockPipe, MockProvider } from 'ng-mocks'; +import { MockDirective, MockModule, MockPipe, MockProvider } from 'ng-mocks'; import { TranslateDirective } from 'app/shared/language/translate.directive'; import { CourseLtiConfigurationComponent } from 'app/course/manage/course-lti-configuration/course-lti-configuration.component'; import { SortService } from 'app/shared/service/sort.service'; @@ -18,18 +16,14 @@ import { ModelingExercise } from 'app/entities/modeling-exercise.model'; import { OnlineCourseConfiguration } from 'app/entities/online-course-configuration.model'; import { mockedActivatedRoute } from '../../helpers/mocks/activated-route/mock-activated-route-query-param-map'; import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe'; -import { SortDirective } from 'app/shared/sort/sort.directive'; -import { SortByDirective } from 'app/shared/sort/sort-by.directive'; import { MockRouterLinkDirective } from '../../helpers/mocks/directive/mock-router-link.directive'; import { ArtemisTestModule } from '../../test.module'; import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'; import { UMLDiagramType } from '@ls1intum/apollon'; -import { NgModel } from '@angular/forms'; describe('Course LTI Configuration Component', () => { let comp: CourseLtiConfigurationComponent; let fixture: ComponentFixture; - let courseService: CourseManagementService; let sortService: SortService; let findWithExercisesStub: jest.SpyInstance; @@ -52,20 +46,10 @@ describe('Course LTI Configuration Component', () => { const courseWithExercises = new Course(); courseWithExercises.exercises = [programmingExercise, quizExercise, fileUploadExercise, modelingExercise]; - beforeEach(() => { - TestBed.configureTestingModule({ + beforeEach(async () => { + await TestBed.configureTestingModule({ imports: [ArtemisTestModule, NgbNavModule, MockModule(NgbTooltipModule)], - declarations: [ - CourseLtiConfigurationComponent, - MockDirective(TranslateDirective), - MockPipe(ArtemisTranslatePipe), - MockDirective(SortDirective), - MockDirective(SortByDirective), - MockComponent(HelpIconComponent), - MockComponent(CopyIconButtonComponent), - MockDirective(NgModel), - MockRouterLinkDirective, - ], + declarations: [CourseLtiConfigurationComponent, MockDirective(TranslateDirective), MockPipe(ArtemisTranslatePipe), MockRouterLinkDirective], providers: [ MockProvider(CourseManagementService), MockProvider(SortService), @@ -78,15 +62,14 @@ describe('Course LTI Configuration Component', () => { {}, ), ], - }) - .compileComponents() - .then(() => { - fixture = TestBed.createComponent(CourseLtiConfigurationComponent); - comp = fixture.componentInstance; - courseService = TestBed.inject(CourseManagementService); - sortService = TestBed.inject(SortService); - findWithExercisesStub = jest.spyOn(courseService, 'findWithExercises'); - }); + }).compileComponents(); + + fixture = TestBed.createComponent(CourseLtiConfigurationComponent); + comp = fixture.componentInstance; + TestBed.inject(CourseManagementService); + sortService = TestBed.inject(SortService); + + findWithExercisesStub = jest.spyOn(TestBed.inject(CourseManagementService), 'findWithExercises'); }); afterEach(() => { diff --git a/src/test/javascript/spec/component/course/edit-course-lti-configuration.component.spec.ts b/src/test/javascript/spec/component/course/edit-course-lti-configuration.component.spec.ts index 1247723d25fa..57809a64b4a3 100644 --- a/src/test/javascript/spec/component/course/edit-course-lti-configuration.component.spec.ts +++ b/src/test/javascript/spec/component/course/edit-course-lti-configuration.component.spec.ts @@ -1,10 +1,9 @@ -import { HttpHeaders, HttpResponse } from '@angular/common/http'; +import { HttpResponse } from '@angular/common/http'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import { CourseManagementService } from 'app/course/manage/course-management.service'; -import { HelpIconComponent } from 'app/shared/components/help-icon.component'; import { of } from 'rxjs'; import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap'; -import { MockComponent, MockDirective, MockModule, MockPipe, MockProvider } from 'ng-mocks'; +import { MockDirective, MockModule, MockPipe, MockProvider } from 'ng-mocks'; import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; import { TranslateDirective } from 'app/shared/language/translate.directive'; import { EditCourseLtiConfigurationComponent } from 'app/course/manage/course-lti-configuration/edit-course-lti-configuration.component'; @@ -14,8 +13,6 @@ import { mockedActivatedRoute } from '../../helpers/mocks/activated-route/mock-a import { MockRouter } from '../../helpers/mocks/mock-router'; import { Router } from '@angular/router'; import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe'; -import { SortDirective } from 'app/shared/sort/sort.directive'; -import { SortByDirective } from 'app/shared/sort/sort-by.directive'; import { ArtemisTestModule } from '../../test.module'; import { regexValidator } from 'app/shared/form/shortname-validator.directive'; import { LOGIN_PATTERN } from 'app/shared/constants/input.constants'; @@ -42,29 +39,10 @@ describe('Edit Course LTI Configuration Component', () => { onlineCourseConfiguration, } as Course; - beforeEach(() => { - ltiConfigService = { - query: jest.fn().mockReturnValue( - of( - new HttpResponse({ - body: [], - headers: new HttpHeaders({ 'X-Total-Count': '0' }), - }), - ), - ), - }; - - TestBed.configureTestingModule({ + beforeEach(async () => { + await TestBed.configureTestingModule({ imports: [ArtemisTestModule, NgbNavModule, MockModule(ReactiveFormsModule)], - declarations: [ - EditCourseLtiConfigurationComponent, - MockDirective(TranslateDirective), - MockPipe(ArtemisTranslatePipe), - MockDirective(SortDirective), - MockDirective(SortByDirective), - MockComponent(HelpIconComponent), - MockDirective(MockHasAnyAuthorityDirective), - ], + declarations: [EditCourseLtiConfigurationComponent, MockDirective(TranslateDirective), MockPipe(ArtemisTranslatePipe), MockDirective(MockHasAnyAuthorityDirective)], providers: [ MockProvider(CourseManagementService), { provide: Router, useValue: router }, @@ -78,13 +56,11 @@ describe('Edit Course LTI Configuration Component', () => { ), { provide: LtiConfigurationService, useValue: ltiConfigService }, ], - }) - .compileComponents() - .then(() => { - fixture = TestBed.createComponent(EditCourseLtiConfigurationComponent); - comp = fixture.componentInstance; - courseService = TestBed.inject(CourseManagementService); - }); + }).compileComponents(); + + fixture = TestBed.createComponent(EditCourseLtiConfigurationComponent); + comp = fixture.componentInstance; + courseService = TestBed.inject(CourseManagementService); }); afterEach(() => { diff --git a/src/test/javascript/spec/component/lti/lti-course-card.component.spec.ts b/src/test/javascript/spec/component/lti/lti-course-card.component.spec.ts index 8bc2ffb37147..320b1a3f86ca 100644 --- a/src/test/javascript/spec/component/lti/lti-course-card.component.spec.ts +++ b/src/test/javascript/spec/component/lti/lti-course-card.component.spec.ts @@ -1,5 +1,8 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { LtiCourseCardComponent } from 'app/lti/lti-course-card.component'; +import { ARTEMIS_DEFAULT_COLOR } from 'app/app.constants'; +import { ActivatedRoute } from '@angular/router'; +import { of } from 'rxjs'; describe('LtiCourseCardComponent', () => { let component: LtiCourseCardComponent; @@ -7,27 +10,36 @@ describe('LtiCourseCardComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [LtiCourseCardComponent], + imports: [LtiCourseCardComponent], + providers: [ + { + provide: ActivatedRoute, + useValue: { + params: of({}), + }, + }, + ], }).compileComponents(); fixture = TestBed.createComponent(LtiCourseCardComponent); + fixture.componentRef.setInput('course', { id: 1, shortName: 'lti-course', title: 'LTI COURSE' }); component = fixture.componentInstance; }); it('should create', () => { + fixture.detectChanges(); expect(component).toBeTruthy(); }); it('should set default color if no color is specified in course', () => { - component.course = { id: 1, shortName: 'lti-course', title: 'LTI COURSE' }; - component.ngOnChanges(); - expect(component.courseColor).toBe(component.ARTEMIS_DEFAULT_COLOR); + fixture.detectChanges(); + expect(component.courseColor).toBe(ARTEMIS_DEFAULT_COLOR); }); it('should use course color if specified', () => { const testColor = '#123456'; - component.course = { id: 1, shortName: 'lti-course', title: 'LTI COURSE', color: testColor }; - component.ngOnChanges(); + fixture.componentRef.setInput('course', { id: 1, shortName: 'lti-course', title: 'LTI COURSE', color: testColor }); + fixture.detectChanges(); expect(component.courseColor).toBe(testColor); }); }); diff --git a/src/test/javascript/spec/component/lti/lti13-deep-linking.component.spec.ts b/src/test/javascript/spec/component/lti/lti13-deep-linking.component.spec.ts index 69e22cff2c96..ba86523db1ac 100644 --- a/src/test/javascript/spec/component/lti/lti13-deep-linking.component.spec.ts +++ b/src/test/javascript/spec/component/lti/lti13-deep-linking.component.spec.ts @@ -6,16 +6,18 @@ import { CourseManagementService } from 'app/course/manage/course-management.ser import { AccountService } from 'app/core/auth/account.service'; import { SortService } from 'app/shared/service/sort.service'; import { of, throwError } from 'rxjs'; -import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe'; -import { MockPipe } from 'ng-mocks'; -import { User } from 'app/core/user/user.model'; -import { Course } from 'app/entities/course.model'; -import { Exercise, ExerciseType } from 'app/entities/exercise.model'; -import { HelpIconComponent } from 'app/shared/components/help-icon.component'; -import { ArtemisDatePipe } from 'app/shared/pipes/artemis-date.pipe'; import { AlertService } from 'app/core/util/alert.service'; import { MockSyncStorage } from '../../helpers/mocks/service/mock-sync-storage.service'; import { SessionStorageService } from 'ngx-webstorage'; +import { Exercise, ExerciseType } from 'app/entities/exercise.model'; +import { Course } from 'app/entities/course.model'; +import { User } from 'app/core/user/user.model'; +import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core'; +import { TranslateHttpLoader } from '@ngx-translate/http-loader'; + +function HttpLoaderFactory(http: HttpClient) { + return new TranslateHttpLoader(http); +} describe('Lti13DeepLinkingComponent', () => { let component: Lti13DeepLinkingComponent; @@ -38,7 +40,16 @@ describe('Lti13DeepLinkingComponent', () => { activatedRouteMock = { params: of({ courseId: '123' }) }; TestBed.configureTestingModule({ - declarations: [Lti13DeepLinkingComponent, MockPipe(ArtemisTranslatePipe), HelpIconComponent, MockPipe(ArtemisDatePipe)], + imports: [ + Lti13DeepLinkingComponent, + TranslateModule.forRoot({ + loader: { + provide: TranslateLoader, + useFactory: HttpLoaderFactory, + deps: [HttpClient], + }, + }), + ], providers: [ { provide: ActivatedRoute, useValue: activatedRouteMock }, { provide: Router, useValue: routerMock }, @@ -48,6 +59,7 @@ describe('Lti13DeepLinkingComponent', () => { { provide: SortService, useValue: sortServiceMock }, { provide: SessionStorageService, useClass: MockSyncStorage }, { provide: AlertService, useValue: alertServiceMock }, + TranslateService, ], }).compileComponents(); jest.spyOn(console, 'error').mockImplementation(() => {}); diff --git a/src/test/javascript/spec/component/lti/lti13-select-content.component.spec.ts b/src/test/javascript/spec/component/lti/lti13-select-content.component.spec.ts index f4715f47f7b3..63ce8e93700e 100644 --- a/src/test/javascript/spec/component/lti/lti13-select-content.component.spec.ts +++ b/src/test/javascript/spec/component/lti/lti13-select-content.component.spec.ts @@ -3,9 +3,14 @@ import { ComponentFixture, TestBed, fakeAsync, tick, waitForAsync } from '@angul import { ActivatedRoute } from '@angular/router'; import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { of } from 'rxjs'; -import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe'; -import { SafeResourceUrlPipe } from 'app/shared/pipes/safe-resource-url.pipe'; -import { MockPipe } from 'ng-mocks'; +import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core'; +import { provideHttpClient } from '@angular/common/http'; +import { TranslateHttpLoader } from '@ngx-translate/http-loader'; +import { HttpClient } from '@angular/common/http'; + +function HttpLoaderFactory(http: HttpClient) { + return new TranslateHttpLoader(http); +} describe('Lti13SelectContentComponent', () => { let component: Lti13SelectContentComponent; @@ -23,9 +28,19 @@ describe('Lti13SelectContentComponent', () => { }; TestBed.configureTestingModule({ - imports: [ReactiveFormsModule, FormsModule], - declarations: [Lti13SelectContentComponent, MockPipe(ArtemisTranslatePipe), MockPipe(SafeResourceUrlPipe)], - providers: [FormBuilder, { provide: ActivatedRoute, useValue: routeMock }], + imports: [ + ReactiveFormsModule, + FormsModule, + Lti13SelectContentComponent, + TranslateModule.forRoot({ + loader: { + provide: TranslateLoader, + useFactory: HttpLoaderFactory, + deps: [HttpClient], + }, + }), + ], + providers: [FormBuilder, { provide: ActivatedRoute, useValue: routeMock }, TranslateService, provideHttpClient()], }).compileComponents(); }));