Merge pull request #637 from SELab-2/567-frontend---question-components-tests-and-integrations

[Frontend] - Question components tests and integrations

Author: thomasdejaeghere

backend/extra/seedDatabase.ts

@@ -80,7 +80,7 @@ export async function seedDatabase(): Promise<void> {
       const teacherInput: Teacher = new Teacher(
         email,
         firstName,
-        lastName,
+        'T. '+lastName,
         passwordHash,
         schoolName,
       )
@@ -113,7 +113,7 @@ export async function seedDatabase(): Promise<void> {
       const studentInput: Student = new Student(
         email,
         firstName,
-        lastName,
+        'S. '+lastName,
         passwordHash,
         schoolName,
       )
@@ -231,12 +231,11 @@ export async function seedDatabase(): Promise<void> {
     const visibilityOptions = [
       VisibilityType.PRIVATE,
       VisibilityType.GROUP,
-      VisibilityType.PUBLIC
     ];
 
     for (const { id: assignmentId, classId } of assignments) {
-      const students = await userRep.getByClassId(classId);
-      const teachers = await userRep.getByClassId(classId);
+      const students = await userRep.getStudentsByClassId(classId);
+      const teachers = await userRep.getTeachersByClassId(classId);
       const teacherIds = teachers.map(t => t.id);
 
       // Select 5–6 students for threads
@@ -258,7 +257,6 @@ export async function seedDatabase(): Promise<void> {
 
           const visibility = faker.helpers.arrayElement(visibilityOptions);
 
-
           const thread = new QuestionThread(
             student.id!,
             assignmentId,
@@ -288,27 +286,6 @@ export async function seedDatabase(): Promise<void> {
           await messageRep.create(teacherMessage);
         }
       }
-
-      // Bonus: Add 2 public/global threads for this assignment
-      for (let k = 0; k < 2; k++) {
-        const globalThread = new QuestionThread(
-          faker.helpers.arrayElement(students).id!,
-          assignmentId,
-          `step-${faker.number.int({ min: 1, max: 5 })}`,
-          false,
-          VisibilityType.PUBLIC,
-          []
-        );
-        const savedThread = await threadRep.create(globalThread) as { id: string };
-
-        const msg = new Message(
-          faker.helpers.arrayElement(teacherIds)!,
-          new Date(),
-          savedThread.id!,
-          faker.lorem.sentence()
-        );
-        await messageRep.create(msg);
-      }
     }
   } catch (err) {
     console.error('Error during DB seeding:', err);

frontend/src/app/components/assignment/assignment.component.html

@@ -9,29 +9,36 @@
     [progress]="progress" [step]="furthestStep" (selectedNodeChanged)="onSelectedNodeChanged($event)"
     (emitGraph)="retrieveGraph($event)">
   </app-learning-path>
-  @if(!alreadySubmitted && isStudent){
-  @if (taskFetched ){
-  <app-create-submission [assignmentId]="assignmentId" [taskObject]="taskObject" [type]="taskType" [taskId]="taskId!"
-    [learningObjectId]="currentLearningObjectId" (submissionCreated)="onSubmissionCreated()"></app-create-submission>
-  }
-  @if (noTask ){
-  <app-create-submission [assignmentId]="assignmentId" [taskObject]="taskObject"
-    [learningObjectId]="currentLearningObjectId" (submissionCreated)="onSubmissionCreated()"></app-create-submission>
-  }
-  }@else if(isStudent) {
-  @if(submissionType === 'accepted') {
-  <h2 i18n>Your submission is marked Correct!</h2>
-  }
-  @else if(submissionType === 'rejected'){
-  <h2 i18n>Your submission has been marked as Incorrect!</h2>
-  }
-  @else {
-  <h2 i18n>Already submitted!</h2>
-  }
-  } @else if(!isStudent && !initializeTasks && submissionStatsReady) {
-  <app-assignment-stats class="stats" [submissions]="submissionsForStep" [task]="task!"
-    (patched)="reloadStats()"></app-assignment-stats>
-  }
+  <div class="inline">
+    @if(!alreadySubmitted && isStudent){
+    @if (taskFetched ){
+    <app-create-submission [assignmentId]="assignmentId" [taskObject]="taskObject" [type]="taskType" [taskId]="taskId!"
+      [learningObjectId]="currentLearningObjectId" (submissionCreated)="onSubmissionCreated()"></app-create-submission>
+    }
+    @if (noTask ){
+    <app-create-submission [assignmentId]="assignmentId" [taskObject]="taskObject"
+      [learningObjectId]="currentLearningObjectId" (submissionCreated)="onSubmissionCreated()"></app-create-submission>
+    }
+    }@else if(isStudent) {
+    @if(submissionType === 'accepted') {
+    <h2 i18n>Your submission is marked Correct!</h2>
+    }
+    @else if(submissionType === 'rejected'){
+    <h2 i18n>Your submission has been marked as Incorrect!</h2>
+    }
+    @else {
+    <h2 i18n>Already submitted!</h2>
+    }
+    } @else if(!isStudent && !initializeTasks && submissionStatsReady) {
+    <app-assignment-stats class="stats" [submissions]="submissionsForStep" [task]="task!"
+      (patched)="reloadStats()"></app-assignment-stats>
+    }
+
+    @if (isStudent){
+    <app-chat-popup [assignmentId]="assignmentId" [currentLearningObjectId]="currentLearningObjectId">
+    </app-chat-popup>
+    }
+  </div>
 
   <div class="arrows">
     <button mat-icon-button color="warn" [disabled]="step === 0" (click)="navigateBack()" i18n-matTooltip
@@ -53,7 +60,6 @@ <h2 i18n>Already submitted!</h2>
       <mat-card-title>{{step + 1}}/{{maxStep}}</mat-card-title>
 
     </mat-card>
-
   </div>
 
   }

frontend/src/app/components/assignment/assignment.component.less

@@ -55,4 +55,11 @@
 
 .stats {
   width: 80%;
+}
+
+.inline {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  justify-content: center;
 }

frontend/src/app/components/assignment/assignment.component.ts

@@ -28,13 +28,27 @@ import { SubmissionService } from '../../services/submission.service';
 import { UserService } from '../../services/user.service';
 import { forkJoin, of, switchMap } from 'rxjs';
 import { Submission } from '../../interfaces/submissions';
+import { ChatPopupComponent } from '../chat-popup/chat-popup.component';
 import { MatIcon, MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({
   selector: 'app-assignment',
-  imports: [LearningPathComponent, MatSelectModule, MatIcon, MatIconModule, MatTooltipModule, MatButtonModule, MatFormFieldModule, MatOptionModule, CreateSubmissionComponent, MatProgressBar, MatCardModule, LoadingComponent, CreateTaskComponent, AssignmentStatsComponent],
+  imports: [
+    LearningPathComponent,
+    MatSelectModule,
+    MatIcon, MatIconModule, MatTooltipModule, MatButtonModule,
+    MatFormFieldModule,
+    MatOptionModule,
+    CreateSubmissionComponent,
+    MatProgressBar,
+    MatCardModule,
+    LoadingComponent,
+    CreateTaskComponent,
+    AssignmentStatsComponent,
+    ChatPopupComponent,
+  ],
   templateUrl: './assignment.component.html',
   styleUrl: './assignment.component.less'
 })
@@ -177,11 +191,12 @@ export class AssignmentComponent implements OnInit {
     progressObservable.subscribe(
       (res) => {
         this.progress = res;
-        this.step = this.progress.step;
+        this.step = this.progress.step - 1;
         this.furthestStep = this.progress.step; // furthest step is always returned by progress
         this.alreadySubmitted = this.step < this.furthestStep
         this.maxStep = this.progress.maxStep;
         this.loading = false;
+        console.log(this.step, this.furthestStep, this.maxStep)
       }
     )
   }

frontend/src/app/components/authenticated-menu/authenticated-menu.component.html

@@ -4,10 +4,12 @@
         <button mat-menu-item routerLink="/student/dashboard" i18n="@@authenticatedDashboardStudent">Dashboard</button>
         <button mat-menu-item routerLink="/student/classes" i18n="@@authenticatedClassesStudent">Classes</button>
         <button mat-menu-item routerLink="/student/assignments" i18n="@@authenticatedAssignmentsStudent">Assignments</button>
+        <button mat-menu-item routerLink="/student/chat/0" i18n="@@authenticatedChatsStudent">Chats</button>
     } @else {
         <button mat-menu-item routerLink="/teacher/dashboard" i18n="@@authenticatedDashboardTeacher">Dashboard</button>
         <button mat-menu-item routerLink="/teacher/classes" i18n="@@authenticatedClassesTeacher">Classes</button>
         <button mat-menu-item routerLink="/teacher/assignments" i18n="@@authenticatedAssignmentsTeacher">Assignments</button>
+        <button mat-menu-item routerLink="/teacher/chat/0" i18n="@@authenticatedChatsTeacher">Chats</button>
     }
 
     <button mat-menu-item routerLink="/explore" i18n="@@authenticatedExplore">Explore</button>

frontend/src/app/components/chat-popup/chat-popup.component.html

@@ -0,0 +1,26 @@
+<button mat-fab class="chat-fab" color="primary" (click)="open()">
+  <mat-icon>chat</mat-icon>
+</button>
+
+<ng-template #chatDialog>
+  <div class="chat-dialog">
+    <div class="chat-header">
+      <mat-toolbar color="primary" class="chat-custom-toolbar">
+        <span>Chat</span>
+        <span class="spacer"></span>
+        <button mat-icon-button (click)="navigateToFullChat()" matTooltip="Open full chat">
+          <mat-icon style="color: black;">open_in_new</mat-icon>
+        </button>
+        <button mat-icon-button (click)="close()">
+          <mat-icon style="color: black;">close</mat-icon>
+        </button>
+      </mat-toolbar>
+    </div>
+    <app-chat 
+      [questionThreadId]="currentThreadId" 
+      [showHeader]="false" 
+      [assignmentId]="assignmentId" 
+      [learningObjectId]="currentLearningObjectId">
+    </app-chat>
+  </div>
+</ng-template>

frontend/src/app/components/chat-popup/chat-popup.component.less

@@ -0,0 +1,55 @@
+.chat-fab {
+  margin-left: 3rem;
+}
+
+.chat-dialog-container {
+  .mat-mdc-dialog-container {
+    height: 100% !important;
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    overflow: hidden;
+
+    .mdc-dialog__surface {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+}
+
+.chat-dialog {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+
+  app-chat {
+    flex: 1;
+    overflow-y: auto;
+  }
+}
+
+.chat-custom-toolbar {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  height: 64px;
+  flex-shrink: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .spacer {
+    flex: 1;
+  }
+
+  .mat-icon-button {
+    background: transparent !important;
+    border: none !important;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.1) !important;
+    }
+  }
+}