Merge pull request #633 from SELab-2/616-divide-group-fix

[Frontend] - Not all students need to be assigned to an assignment

Author: thomasdejaeghere

frontend/src/app/app.component.less

@@ -1,15 +1,10 @@
 main {
-    height: 100%;
-    width: 100%;
-    overflow-y: auto;
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
 }
 
 ::ng-deep .secondary-mat-card[class] {
   background-color: #ffffff;
   color: black;
-}
-
-::ng-deep .secondary-mat-card[class]:hover {
-  background-color: black;
-  cursor: pointer;
 }

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

@@ -112,7 +112,6 @@ export class AssignmentComponent implements OnInit {
     this.submissionStatsReady = false;
     this.currentLearningObjectId = node.value.metadata.hruid!;
     this.step = node.value.metadata.step!;
-    console.log(this.step, this.furthestStep);
     this.alreadySubmitted = this.step < this.furthestStep;
     this.fetchTaskAndSubmissions();
   }

frontend/src/app/components/class-pending-requests/class-pending-requests.component.ts

@@ -27,15 +27,15 @@ export class ClassPendingRequestsComponent implements OnInit {
   public joinRequests: JoinRequestWithUser[] = [];
 
   // Messages for the snackbar
-  private readonly acceptedMessage: string = $localize `:@@accepted:Accepted!`;
-  private readonly rejectedMessage: string = $localize `:@@rejected:Rejected!`;
+  private readonly acceptedMessage: string = $localize`:@@accepted:Accepted!`;
+  private readonly rejectedMessage: string = $localize`:@@rejected:Rejected!`;
 
   // Snackbar
   private readonly snackBar = inject(MatSnackBar);
 
   public constructor(
     private joinRequestService: JoinRequestService
-  ) {}
+  ) { }
 
   /**
    * Requests the join requests for this class 
@@ -44,7 +44,7 @@ export class ClassPendingRequestsComponent implements OnInit {
   public ngOnInit(): void {
     const classId: string | null = this._class?.id || null;
 
-    if(classId) {
+    if (classId) {
       // Get all join requests
       const joinRequests$ = this.joinRequestService.getJoinRequestsForClass(classId);
 
@@ -53,7 +53,6 @@ export class ClassPendingRequestsComponent implements OnInit {
         // Fill users of those join requests
         const joinRequestWithUser$ = this.joinRequestService.fillUsers(response);
         joinRequestWithUser$.subscribe(joinRequests => {
-          console.log(joinRequests);
           this.joinRequests = joinRequests;
         });
       });
@@ -68,7 +67,7 @@ export class ClassPendingRequestsComponent implements OnInit {
     const accepted$ = this.joinRequestService.acceptRequest(requestId);
 
     accepted$.subscribe((response) => {
-      if(response) this.openSnackBar(this.acceptedMessage);
+      if (response) this.openSnackBar(this.acceptedMessage);
       window.location.reload();
     });
   }
@@ -80,15 +79,15 @@ export class ClassPendingRequestsComponent implements OnInit {
   public rejectRequest(requestId: string): void {
     const rejected$ = this.joinRequestService.rejectRequest(requestId);
 
-      rejected$.subscribe((response) => {
-        if(response) this.openSnackBar(this.rejectedMessage);
-        window.location.reload();
-      });
+    rejected$.subscribe((response) => {
+      if (response) this.openSnackBar(this.rejectedMessage);
+      window.location.reload();
+    });
   }
 
-  private openSnackBar(message: string, action: string="Ok") {
+  private openSnackBar(message: string, action: string = "Ok") {
     this.snackBar.open(message, action, {
-        duration: 2500
+      duration: 2500
     });
   }
 

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

@@ -24,21 +24,27 @@
 
                 <mat-form-field>
                     <mat-label i18n>Class</mat-label>
-                    <mat-select formControlName="classId">
+                    <mat-select formControlName="classId" (selectionChange)="checkNonEmpty($event.value)">
                         @for (class of classes; track class.id) {
                         <mat-option [value]="class.id">
                             {{ class.name }}
                         </mat-option>
                         }
                     </mat-select>
+                    @if(!enableCreate){
+                    <mat-hint i18n style="color: red">
+                        You need students in your class!
+                    </mat-hint>
+                    }
+
                 </mat-form-field>
 
                 <mat-form-field>
                     <mat-label i18n>Extra instructions</mat-label>
                     <textarea matInput formControlName="extraInstructions" placeholder="Extra instructions"></textarea>
                 </mat-form-field>
 
-                <button mat-raised-button type="submit" [disabled]="createForm.invalid" i18n>
+                <button mat-raised-button type="submit" [disabled]="!enableCreate || createForm.invalid" i18n>
                     Create
                 </button>
             </form>
@@ -52,7 +58,7 @@
     }
 
     @if(initializeTasks) {
-    <mat-card class="row">
+    <mat-card class="row secondary-mat-card">
         <mat-card class="inline">
             <div>
                 <mat-card-title i18n>Create Tasks for your Assignment!</mat-card-title>

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

@@ -19,6 +19,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { AssignmentComponent } from '../assignment/assignment.component';
 import { MatIconModule } from '@angular/material/icon';
 import { TaskService } from '../../services/task.service';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-create-assignment',
@@ -37,7 +38,7 @@ import { TaskService } from '../../services/task.service';
     MatInputModule,
     MatDateRangeInput,
     MatNativeDateModule,
-    MatButtonModule
+    MatButtonModule,
   ],
   templateUrl: './create-assignment.component.html',
   styleUrl: './create-assignment.component.less',
@@ -48,6 +49,7 @@ export class CreateAssignmentComponent implements OnInit {
   @Output() showGroups: EventEmitter<void> = new EventEmitter<void>
 
   private readonly route = inject(ActivatedRoute);
+  private readonly snackBar = inject(MatSnackBar);
 
   public learningPathId: string = "";
   public language: string = "nl";
@@ -62,6 +64,8 @@ export class CreateAssignmentComponent implements OnInit {
   public assignmentId: string = '';
   public classMembers: User[] = [];
 
+  public enableCreate: boolean = true;
+
   constructor(
     private formBuilder: FormBuilder,
     private classesService: ClassesService,
@@ -84,6 +88,12 @@ export class CreateAssignmentComponent implements OnInit {
 
   }
 
+  checkNonEmpty(classId: string) {
+    this.classesService.usersInClass(classId).subscribe(
+      value => this.enableCreate = value.students.length > 0
+    )
+  }
+
   create(): void {
     const newAssignment: NewAssignment | null = this.extractFormValues();
     if (newAssignment) {
@@ -100,6 +110,7 @@ export class CreateAssignmentComponent implements OnInit {
     }
   }
 
+
   private getClasses(): void {
     this.classesService.classesOfUser().subscribe((response: Class[]) => {
       this.classes = response;
@@ -166,10 +177,10 @@ export class CreateAssignmentComponent implements OnInit {
     // Initialize all empty tasks with an 'other'-type task without details
     this.taskService.fillRestWithEmptyTasks(this.assignmentId).subscribe({
       next: () => {
-        console.log($localize`Assignment Created!`);
+        this.snackBar.open($localize`Assignment Created!`);
       },
-      error: (err) => {
-        console.error(err);
+      error: () => {
+        this.snackBar.open($localize`Something went wrong!`);
       }
     });
 
@@ -178,4 +189,5 @@ export class CreateAssignmentComponent implements OnInit {
     // we can redirect to assignments page
     this.router.navigate(['/teacher/assignments']);
   }
+
 }

frontend/src/app/components/create-group/create-group.component.html

@@ -5,12 +5,13 @@ <h1 i18n="@@createGroupsHeader">Create groups</h1>
         <p i18n="@@createGroupsDescription">
             Here you can divide the members of your class into groups.
             Drag a member into an existing group or onto the new group.
+            If you do not wish to assign a student to this assignment, you can keep them into the "Members" section.
         </p>
 
         <span style="display: flex; align-items: center;">
             <h2 i18n="@@createGroupMembers">Members</h2>
             <button mat-raised-button (click)="partitionMembers()" id="assign-all-button" style="margin-left: 75px;">
-                <p>Assign all</p>
+                <p i18n="@@assignAllGroupMembers">Assign all</p>
             </button>
         </span>
 

frontend/src/app/components/create-group/create-group.component.less

@@ -4,6 +4,7 @@
     align-items: center;
     justify-content: center;
 
+
     gap: 20px;
 }
 

frontend/src/app/components/create-group/create-group.component.ts

@@ -110,11 +110,11 @@ export class CreateGroupComponent {
    * Make a call to the API to create the made groups.
    */
   public createGroups(): void {
-    if (this.members.length > 0) {
-      this.openSnackBar($localize`There are still members not assigned to a group.`);
-    } else {
-      const nonEmptyGroups = this.groups.filter(group => group.length > 0);
+    const nonEmptyGroups = this.groups.filter(group => group.length > 0);
 
+    if (nonEmptyGroups.length === 0) {
+      this.openSnackBar($localize`You need to assign students!.`);
+    } else {
       this.groupService.createGroups(nonEmptyGroups, this.assignmentId!)
         .subscribe((response) => {
           if (response) {
@@ -123,8 +123,10 @@ export class CreateGroupComponent {
           } else {
             this.openSnackBar($localize`Failed to create groups.`);
           }
-        })
+        });
     }
+
+
   }
 
   /**

frontend/src/app/components/learning-path/learning-path.component.ts

@@ -148,7 +148,6 @@ export class LearningPathComponent implements OnInit {
         const resultNode = this.trajectoryGraph!.nodes[i];
         if (resultNode) {
             this.selectedNode = resultNode;
-            console.log("in learning path", this.step)
             this.selectedNodeChanged.emit(resultNode);
         } else {
             // First node, navigate back to assignments

frontend/src/app/components/manage-codes/manage-codes.component.ts

@@ -34,16 +34,14 @@ export class ManageCodesComponent implements OnInit {
   public constructor(
     private activeRoute: ActivatedRoute,
     private classCodeService: ClassCodeService
-  ) {}
+  ) { }
 
   public ngOnInit(): void {
     const id: string | null = this.activeRoute.snapshot.paramMap.get('id');
 
-    console.log(id);
+    if (id) this._classId = id;
 
-    if(id) this._classId = id;
-
-    if(this._classId) {
+    if (this._classId) {
       this.classCodeService.getClassCodes(this._classId)
         .subscribe((codes: Code[]) => {
           this._codes = codes;
@@ -64,7 +62,7 @@ export class ManageCodesComponent implements OnInit {
   public expireClassCode(code: Code): void {
     this.classCodeService.expireClassCode(code)
       .subscribe(response => {
-        if(!response) {
+        if (!response) {
           this.openSnackBar($localize`Could not expire code`);
         }
         else {
@@ -77,7 +75,7 @@ export class ManageCodesComponent implements OnInit {
   public deleteClassCode(code: Code): void {
     this.classCodeService.deleteClassCode(code)
       .subscribe(response => {
-        if(!response) {
+        if (!response) {
           this.openSnackBar($localize`Could not delete code`);
         }
         else {
@@ -88,15 +86,15 @@ export class ManageCodesComponent implements OnInit {
   }
 
   public createClassCode(): void {
-    if(this._classId) this.classCodeService.createClassCode(this._classId)
-        .subscribe(response => {
-          if(!response) {
-            this.openSnackBar($localize`Could not create code`);
-          }
-          else {
-            this.openSnackBar($localize`Code created successfully`);
-            location.reload();
-          };
+    if (this._classId) this.classCodeService.createClassCode(this._classId)
+      .subscribe(response => {
+        if (!response) {
+          this.openSnackBar($localize`Could not create code`);
+        }
+        else {
+          this.openSnackBar($localize`Code created successfully`);
+          location.reload();
+        };
       });
   }
 
@@ -112,9 +110,9 @@ export class ManageCodesComponent implements OnInit {
     this._codes = codes;
   }
 
-  private openSnackBar(message: string, action: string="Ok") {
+  private openSnackBar(message: string, action: string = "Ok") {
     this.snackBar.open(message, action, {
-        duration: 2500
+      duration: 2500
     });
   }