Learning path: Add discussion section to lecture unit and exercises (#…

…9264)
ls1intum · Sep 23, 2024 · dd7388d · dd7388d
1 parent bee4801
commit dd7388d
Show file tree

Hide file tree

Showing 17 changed files with 340 additions and 255 deletions.
diff --git a/...ing-paths/components/learning-path-lecture-unit/learning-path-lecture-unit.component.html b/...ing-paths/components/learning-path-lecture-unit/learning-path-lecture-unit.component.html
@@ -6,21 +6,30 @@
     </div>
 }
 @if (lectureUnit(); as lectureUnit) {
-    @switch (lectureUnit.type) {
-        @case (LectureUnitType.VIDEO) {
-            <jhi-video-unit [lectureUnit]="lectureUnit" (onCompletion)="setLearningObjectCompletion($event)" />
-        }
-        @case (LectureUnitType.TEXT) {
-            <jhi-text-unit [lectureUnit]="lectureUnit" (onCompletion)="setLearningObjectCompletion($event)" />
-        }
-        @case (LectureUnitType.ATTACHMENT) {
-            <jhi-attachment-unit [lectureUnit]="lectureUnit" (onCompletion)="setLearningObjectCompletion($event)" />
-        }
-        @case (LectureUnitType.EXERCISE) {
-            <jhi-exercise-unit [exerciseUnit]="lectureUnit" />
-        }
-        @case (LectureUnitType.ONLINE) {
-            <jhi-online-unit [lectureUnit]="lectureUnit" (onCompletion)="setLearningObjectCompletion($event)" />
+    <div class="row m-0">
+        <div class="col p-0">
+            @switch (lectureUnit.type) {
+                @case (LectureUnitType.VIDEO) {
+                    <jhi-video-unit [lectureUnit]="lectureUnit" (onCompletion)="setLearningObjectCompletion($event)" />
+                }
+                @case (LectureUnitType.TEXT) {
+                    <jhi-text-unit [lectureUnit]="lectureUnit" (onCompletion)="setLearningObjectCompletion($event)" />
+                }
+                @case (LectureUnitType.ATTACHMENT) {
+                    <jhi-attachment-unit [lectureUnit]="lectureUnit" (onCompletion)="setLearningObjectCompletion($event)" />
+                }
+                @case (LectureUnitType.EXERCISE) {
+                    <jhi-exercise-unit [exerciseUnit]="lectureUnit" />
+                }
+                @case (LectureUnitType.ONLINE) {
+                    <jhi-online-unit [lectureUnit]="lectureUnit" (onCompletion)="setLearningObjectCompletion($event)" />
+                }
+            }
+        </div>
+        @if (isCommunicationEnabled()) {
+            <div class="col-md-auto p-0 ms-2">
+                <jhi-discussion-section [lecture]="this.lecture()" />
+            </div>
         }
-    }
+    </div>
 }
diff --git a/...rning-paths/components/learning-path-lecture-unit/learning-path-lecture-unit.component.ts b/...rning-paths/components/learning-path-lecture-unit/learning-path-lecture-unit.component.ts
@@ -1,4 +1,4 @@
-import { Component, InputSignal, WritableSignal, effect, inject, input, signal } from '@angular/core';
+import { Component, computed, effect, inject, input, signal } from '@angular/core';
 import { LectureUnitService } from 'app/lecture/lecture-unit/lecture-unit-management/lectureUnit.service';
 import { AlertService } from 'app/core/util/alert.service';
 import { LectureUnit, LectureUnitType } from 'app/entities/lecture-unit/lectureUnit.model';
@@ -11,24 +11,30 @@ import { VideoUnitComponent } from 'app/overview/course-lectures/video-unit/vide
 import { TextUnitComponent } from 'app/overview/course-lectures/text-unit/text-unit.component';
 import { AttachmentUnitComponent } from 'app/overview/course-lectures/attachment-unit/attachment-unit.component';
 import { OnlineUnitComponent } from 'app/overview/course-lectures/online-unit/online-unit.component';
+import { isCommunicationEnabled } from 'app/entities/course.model';
+import { DiscussionSectionComponent } from 'app/overview/discussion-section/discussion-section.component';
 
 @Component({
     selector: 'jhi-learning-path-lecture-unit',
     standalone: true,
-    imports: [ArtemisLectureUnitsModule, ArtemisSharedModule, VideoUnitComponent, TextUnitComponent, AttachmentUnitComponent, OnlineUnitComponent],
+    imports: [ArtemisLectureUnitsModule, ArtemisSharedModule, VideoUnitComponent, TextUnitComponent, AttachmentUnitComponent, OnlineUnitComponent, DiscussionSectionComponent],
     templateUrl: './learning-path-lecture-unit.component.html',
 })
 export class LearningPathLectureUnitComponent {
     protected readonly LectureUnitType = LectureUnitType;
 
-    private readonly lectureUnitService: LectureUnitService = inject(LectureUnitService);
+    private readonly lectureUnitService = inject(LectureUnitService);
     private readonly learningPathNavigationService = inject(LearningPathNavigationService);
-    private readonly alertService: AlertService = inject(AlertService);
+    private readonly alertService = inject(AlertService);
 
-    readonly lectureUnitId: InputSignal<number> = input.required<number>();
-    readonly isLoading: WritableSignal<boolean> = signal(false);
+    readonly lectureUnitId = input.required<number>();
+    readonly isLoading = signal<boolean>(false);
     readonly lectureUnit = signal<LectureUnit | undefined>(undefined);
 
+    readonly lecture = computed(() => this.lectureUnit()?.lecture);
+
+    readonly isCommunicationEnabled = computed(() => isCommunicationEnabled(this.lecture()?.course));
+
     constructor() {
         effect(() => this.loadLectureUnit(this.lectureUnitId()), { allowSignalWrites: true });
     }
@@ -46,11 +52,9 @@ export class LearningPathLectureUnitComponent {
     }
 
     setLearningObjectCompletion(completionEvent: LectureUnitCompletionEvent): void {
-        try {
-            this.lectureUnitService.completeLectureUnit(this.lectureUnit()!.lecture!, completionEvent);
+        this.lectureUnitService.completeLectureUnit(this.lectureUnit()!.lecture!, completionEvent);
+        if (this.lectureUnit()?.completed === completionEvent.completed) {
             this.learningPathNavigationService.setCurrentLearningObjectCompletion(completionEvent.completed);
-        } catch (error) {
-            this.alertService.error(error);
         }
     }
 }
diff --git a/...urse/learning-paths/participate/lecture-unit/learning-path-lecture-unit-view.component.ts b/...urse/learning-paths/participate/lecture-unit/learning-path-lecture-unit-view.component.ts
@@ -38,8 +38,5 @@ export class LearningPathLectureUnitViewComponent {
      */
     onChildActivate(instance: DiscussionSectionComponent) {
         this.discussionComponent = instance; // save the reference to the component instance
-        if (this.lecture) {
-            instance.lecture = this.lecture;
-        }
     }
 }
diff --git a/.../course/learning-paths/participate/lecture-unit/learning-path-lecture-unit-view.module.ts b/.../course/learning-paths/participate/lecture-unit/learning-path-lecture-unit-view.module.ts
@@ -19,13 +19,6 @@ const routes: Routes = [
             pageTitle: 'overview.learningPath',
         },
         canActivate: [UserRouteAccessService],
-        children: [
-            {
-                path: '',
-                pathMatch: 'full',
-                loadChildren: () => import('app/overview/discussion-section/discussion-section.module').then((m) => m.DiscussionSectionModule),
-            },
-        ],
     },
 ];
 

diff --git a/src/main/webapp/app/overview/course-lectures/course-lecture-details.component.html b/src/main/webapp/app/overview/course-lectures/course-lecture-details.component.html
@@ -142,7 +142,7 @@ <h6 class="text-secondary mb-0 lecture-attachment-details">
                 <!-- LECTURE END -->
                 <div class="col d-flex flex-grow-1 justify-end" style="max-width: min-content">
                     @if (lecture && (isCommunicationEnabled(lecture.course) || isMessagingEnabled(lecture.course))) {
-                        <router-outlet class="ms-3" (activate)="onChildActivate($event)" />
+                        <jhi-discussion-section [lecture]="lecture" />
                     }
                 </div>
             </div>

diff --git a/src/main/webapp/app/overview/course-lectures/course-lecture-details.component.ts b/src/main/webapp/app/overview/course-lectures/course-lecture-details.component.ts
@@ -9,7 +9,6 @@ import { Attachment } from 'app/entities/attachment.model';
 import { LectureService } from 'app/lecture/lecture.service';
 import { LectureUnit, LectureUnitType } from 'app/entities/lecture-unit/lectureUnit.model';
 import { AttachmentUnit } from 'app/entities/lecture-unit/attachmentUnit.model';
-import { DiscussionSectionComponent } from 'app/overview/discussion-section/discussion-section.component';
 import { onError } from 'app/shared/util/global.utils';
 import { finalize, tap } from 'rxjs/operators';
 import { AlertService } from 'app/core/util/alert.service';
@@ -39,7 +38,6 @@ export class CourseLectureDetailsComponent extends AbstractScienceComponent impl
     lecture?: Lecture;
     isDownloadingLink?: string;
     lectureUnits: LectureUnit[] = [];
-    discussionComponent?: DiscussionSectionComponent;
     hasPdfLectureUnit: boolean;
 
     paramsSubscription: Subscription;
@@ -107,10 +105,6 @@ export class CourseLectureDetailsComponent extends AbstractScienceComponent impl
                                     (unit) => unit.attachment?.link?.split('.').pop()!.toLocaleLowerCase() === 'pdf',
                                 ).length > 0;
                         }
-                        if (this.discussionComponent) {
-                            // We need to manually update the lecture property of the student questions component
-                            this.discussionComponent.lecture = this.lecture;
-                        }
                         this.endsSameDay = !!this.lecture?.startDate && !!this.lecture.endDate && dayjs(this.lecture.startDate).isSame(this.lecture.endDate, 'day');
                     },
                     error: (errorResponse: HttpErrorResponse) => onError(this.alertService, errorResponse),
@@ -160,18 +154,6 @@ export class CourseLectureDetailsComponent extends AbstractScienceComponent impl
         this.lectureUnitService.completeLectureUnit(this.lecture!, event);
     }
 
-    /**
-     * This function gets called if the router outlet gets activated. This is
-     * used only for the DiscussionComponent
-     * @param instance The component instance
-     */
-    onChildActivate(instance: DiscussionSectionComponent) {
-        this.discussionComponent = instance; // save the reference to the component instance
-        if (this.lecture) {
-            instance.lecture = this.lecture;
-        }
-    }
-
     ngOnDestroy() {
         this.paramsSubscription?.unsubscribe();
         this.profileSubscription?.unsubscribe();

diff --git a/src/main/webapp/app/overview/course-lectures/course-lecture-details.module.ts b/src/main/webapp/app/overview/course-lectures/course-lecture-details.module.ts
@@ -13,6 +13,7 @@ import { VideoUnitComponent } from 'app/overview/course-lectures/video-unit/vide
 import { TextUnitComponent } from 'app/overview/course-lectures/text-unit/text-unit.component';
 import { OnlineUnitComponent } from 'app/overview/course-lectures/online-unit/online-unit.component';
 import { AttachmentUnitComponent } from 'app/overview/course-lectures/attachment-unit/attachment-unit.component';
+import { DiscussionSectionComponent } from 'app/overview/discussion-section/discussion-section.component';
 
 const routes: Routes = [
     {
@@ -23,13 +24,6 @@ const routes: Routes = [
             pageTitle: 'overview.lectures',
         },
         canActivate: [UserRouteAccessService],
-        children: [
-            {
-                path: '',
-                pathMatch: 'full',
-                loadChildren: () => import('../discussion-section/discussion-section.module').then((m) => m.DiscussionSectionModule),
-            },
-        ],
     },
 ];
 @NgModule({
@@ -45,6 +39,7 @@ const routes: Routes = [
         TextUnitComponent,
         OnlineUnitComponent,
         AttachmentUnitComponent,
+        DiscussionSectionComponent,
     ],
     declarations: [CourseLectureDetailsComponent],
     exports: [CourseLectureDetailsComponent],

diff --git a/src/main/webapp/app/overview/discussion-section/discussion-section.component.ts b/src/main/webapp/app/overview/discussion-section/discussion-section.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, OnDestroy, QueryList, ViewChild, ViewChildren, effect, input } from '@angular/core';
 import interact from 'interactjs';
 import { Exercise } from 'app/entities/exercise.model';
 import { Lecture } from 'app/entities/lecture.model';
@@ -14,17 +14,22 @@ import { CourseDiscussionDirective } from 'app/shared/metis/course-discussion.di
 import { FormBuilder } from '@angular/forms';
 import { Channel, ChannelDTO } from 'app/entities/metis/conversation/channel.model';
 import { ChannelService } from 'app/shared/metis/conversations/channel.service';
-import { MetisConversationService } from 'app/shared/metis/metis-conversation.service';
+import { ArtemisSharedModule } from 'app/shared/shared.module';
+import { ArtemisPlagiarismCasesSharedModule } from 'app/course/plagiarism-cases/shared/plagiarism-cases-shared.module';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 
 @Component({
     selector: 'jhi-discussion-section',
     templateUrl: './discussion-section.component.html',
     styleUrls: ['./discussion-section.component.scss'],
+    imports: [FontAwesomeModule, ArtemisSharedModule, ArtemisPlagiarismCasesSharedModule, InfiniteScrollModule],
+    standalone: true,
     providers: [MetisService],
 })
-export class DiscussionSectionComponent extends CourseDiscussionDirective implements OnInit, AfterViewInit, OnDestroy {
-    @Input() exercise?: Exercise;
-    @Input() lecture?: Lecture;
+export class DiscussionSectionComponent extends CourseDiscussionDirective implements AfterViewInit, OnDestroy {
+    exercise = input<Exercise>();
+    lecture = input<Lecture>();
 
     @ViewChild(PostCreateEditModalComponent) postCreateEditModal?: PostCreateEditModalComponent;
     @ViewChildren('postingThread') messages: QueryList<any>;
@@ -60,22 +65,18 @@ export class DiscussionSectionComponent extends CourseDiscussionDirective implem
         private activatedRoute: ActivatedRoute,
         private router: Router,
         private formBuilder: FormBuilder,
-        private metisConversationService: MetisConversationService,
     ) {
         super(metisService);
+        effect(() => this.loadData(this.exercise(), this.lecture()));
     }
 
-    /**
-     * on initialization: initializes the metis service, fetches the posts for the exercise or lecture the discussion section is placed at,
-     * creates the subscription to posts to stay updated on any changes of posts in this course
-     */
-    ngOnInit(): void {
+    loadData(exercise?: Exercise, lecture?: Lecture): void {
         this.paramSubscription = combineLatest({
             params: this.activatedRoute.params,
             queryParams: this.activatedRoute.queryParams,
         }).subscribe((routeParams: { params: Params; queryParams: Params }) => {
             this.currentPostId = +routeParams.queryParams.postId;
-            this.course = this.exercise?.course ?? this.lecture?.course;
+            this.course = exercise?.course ?? lecture?.course;
             this.metisService.setCourse(this.course);
             this.metisService.setPageType(this.PAGE_TYPE);
             if (routeParams.params.courseId) {
@@ -146,14 +147,14 @@ export class DiscussionSectionComponent extends CourseDiscussionDirective implem
 
         // Currently, an additional REST call is made to retrieve the channel associated with the lecture/exercise
         // TODO: Add the channel to the response for loading the lecture/exercise
-        if (this.lecture?.id) {
+        if (this.lecture()) {
             this.channelService
-                .getChannelOfLecture(courseId, this.lecture.id)
+                .getChannelOfLecture(courseId, this.lecture()!.id!)
                 .pipe(map((res: HttpResponse<ChannelDTO>) => res.body))
                 .subscribe(getChannel());
-        } else if (this.exercise?.id) {
+        } else if (this.exercise()) {
             this.channelService
-                .getChannelOfExercise(courseId, this.exercise.id)
+                .getChannelOfExercise(courseId, this.exercise()!.id!)
                 .pipe(map((res: HttpResponse<ChannelDTO>) => res.body))
                 .subscribe(getChannel());
         }
@@ -271,8 +272,8 @@ export class DiscussionSectionComponent extends CourseDiscussionDirective implem
     resetFormGroup(): void {
         this.formGroup = this.formBuilder.group({
             conversationId: this.channel?.id,
-            exerciseId: this.exercise?.id,
-            lectureId: this.lecture?.id,
+            exerciseId: this.exercise()?.id,
+            lectureId: this.lecture()?.id,
             filterToUnresolved: false,
             filterToOwn: false,
             filterToAnsweredOrReacted: false,

diff --git a/src/main/webapp/app/overview/discussion-section/discussion-section.module.ts b/src/main/webapp/app/overview/discussion-section/discussion-section.module.ts
diff --git a/src/main/webapp/app/overview/exercise-details/course-exercise-details.component.html b/src/main/webapp/app/overview/exercise-details/course-exercise-details.component.html
@@ -255,7 +255,7 @@ <h4 class="mt-2">
             </div>
             <div class="col d-flex flex-grow-1 justify-end" style="max-width: min-content">
                 @if (exercise.course && (isCommunicationEnabled(exercise.course) || isMessagingEnabled(exercise.course))) {
-                    <router-outlet (activate)="onChildActivate($event)" />
+                    <jhi-discussion-section [exercise]="exercise" />
                 }
             </div>
         </div>

diff --git a/src/main/webapp/app/overview/exercise-details/course-exercise-details.component.ts b/src/main/webapp/app/overview/exercise-details/course-exercise-details.component.ts
@@ -23,7 +23,6 @@ import { TeamAssignmentPayload } from 'app/entities/team.model';
 import { TeamService } from 'app/exercises/shared/team/team.service';
 import { QuizExercise, QuizStatus } from 'app/entities/quiz/quiz-exercise.model';
 import { QuizExerciseService } from 'app/exercises/quiz/manage/quiz-exercise.service';
-import { DiscussionSectionComponent } from 'app/overview/discussion-section/discussion-section.component';
 import { ExerciseCategory } from 'app/entities/exercise-category.model';
 import { getFirstResultWithComplaintFromResults } from 'app/entities/submission.model';
 import { ComplaintService } from 'app/complaints/complaint.service';
@@ -86,7 +85,6 @@ export class CourseExerciseDetailsComponent extends AbstractScienceComponent imp
     isAfterAssessmentDueDate: boolean;
     allowComplaintsForAutomaticAssessments: boolean;
     public gradingCriteria: GradingCriterion[];
-    private discussionComponent?: DiscussionSectionComponent;
     baseResource: string;
     isExamExercise: boolean;
     submissionPolicy?: SubmissionPolicy;
@@ -224,10 +222,6 @@ export class CourseExerciseDetailsComponent extends AbstractScienceComponent imp
         this.subscribeForNewResults();
         this.subscribeToTeamAssignmentUpdates();
 
-        if (this.discussionComponent && this.exercise) {
-            // We need to manually update the exercise property of the posts component
-            this.discussionComponent.exercise = this.exercise;
-        }
         this.baseResource = `/course-management/${this.courseId}/${this.exercise.type}-exercises/${this.exercise.id}/`;
     }
 
@@ -416,18 +410,6 @@ export class CourseExerciseDetailsComponent extends AbstractScienceComponent imp
         return undefined;
     }
 
-    /**
-     * This function gets called if the router outlet gets activated. This is
-     * used only for the DiscussionComponent
-     * @param instance The component instance
-     */
-    onChildActivate(instance: DiscussionSectionComponent) {
-        this.discussionComponent = instance; // save the reference to the component instance
-        if (this.exercise) {
-            instance.exercise = this.exercise;
-        }
-    }
-
     private onError(error: string) {
         this.alertService.error(error);
     }