Development: Update LTI components to use Angular 18 practices (#9908)

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
      */

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<string>();
     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
      */

src/main/webapp/app/admin/lti-configuration/lti-configuration.service.ts

@@ -1,12 +1,12 @@
-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';
 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

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
      */

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
      */

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,

src/main/webapp/app/lti/lti-course-card.component.html

@@ -1,21 +1,21 @@
 <div class="card" style="min-height: 80px !important">
     <div
-        id="course-{{ course.id }}-header"
+        id="course-{{ course().id }}-header"
         class="card-header text-white"
-        [routerLink]="['/lti/exercises', this.course.id]"
+        [routerLink]="['/lti/exercises', course().id]"
         [ngStyle]="{ '--background-color-for-hover': courseColor }"
     >
-        <a class="stretched-link" [routerLink]="['/lti/exercises', this.course.id]"></a>
+        <a class="stretched-link" [routerLink]="['/lti/exercises', course().id]"></a>
         <div class="container">
             <div class="row d-flex">
                 <div class="col-2 header-col image-col">
-                    @if (course.courseIcon) {
-                        <jhi-secured-image [cachingStrategy]="CachingStrategy.LOCAL_STORAGE" [src]="course.courseIcon" />
+                    @if (course().courseIcon) {
+                        <jhi-secured-image [cachingStrategy]="CachingStrategy.LOCAL_STORAGE" [src]="course().courseIcon || ''"></jhi-secured-image>
                     }
                 </div>
                 <div class="col-7 header-col title-col px-3">
                     <h5 class="card-title text-center">
-                        {{ course.title + ' (' + course.shortName + ')' }}
+                        {{ course().title + ' (' + course().shortName + ')' }}
                     </h5>
                 </div>
                 <div class="col-2 header-col course-info-col"></div>

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<Course>();
     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;
+        });
     }
 }

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,

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<number> = 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.

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
      */