Merge pull request #381 from fujaba/fix/assignments

Assignment Bugfixes
fujaba · Nov 8, 2023 · aecd137 · aecd137
2 parents 18b18ae + 0849112
commit aecd137
Show file tree

Hide file tree

Showing 23 changed files with 120 additions and 147 deletions.
diff --git a/frontend/src/app/assignment/model/assignee.ts b/frontend/src/app/assignment/model/assignee.ts
@@ -67,7 +67,7 @@ export class Feedback {
   @Presentation({
     control: 'radio',
     rows: 1,
-    label: 'Wie leicht fällt es dir, Ablenkungen zu ignorieren?',
+    label: 'Wie leicht fällt es dir aktuell, Ablenkungen zu ignorieren?',
     optionLabels: {
       1: 'Gar nicht leicht',
       2: 'Eher nicht leicht',

diff --git a/frontend/src/app/assignment/model/course.ts b/frontend/src/app/assignment/model/course.ts
@@ -12,7 +12,7 @@ export type CreateCourseDto = Omit<Course, '_id' | 'createdBy'>;
 export type UpdateCourseDto = Partial<CreateCourseDto>;
 
 export interface SolutionInfo extends Required<Pick<Solution, '_id' | 'points'>> {
-  assignee: string;
+  assignee?: string;
 }
 
 export interface CourseStudent {

diff --git a/frontend/src/app/assignment/modules/assignment/solution-table/solution-table.component.html b/frontend/src/app/assignment/modules/assignment/solution-table/solution-table.component.html
@@ -146,14 +146,13 @@
         {{ solution.points ?? '?' }} / {{ totalPoints }}
       </span>
     </td>
-    <td>
-      <app-assignee-input
+    <td [style.background-color]="assignees[solution._id!] | assigneeColor">
+      <app-assignee-dropdown
         [assignment]="assignment?._id!"
         [solution]="solution._id!"
         [assignees]="assigneeNames"
-        [assignee]="assignees[solution._id!]?.assignee || ''"
-        (saved)="assignees[solution._id!] = $event"
-      ></app-assignee-input>
+        [(assignee)]="assignees[solution._id!]"
+      ></app-assignee-dropdown>
     </td>
     <td>
       <a

diff --git a/frontend/src/app/assignment/modules/assignment/solution-table/solution-table.component.ts b/frontend/src/app/assignment/modules/assignment/solution-table/solution-table.component.ts
@@ -36,7 +36,7 @@ export class SolutionTableComponent implements OnInit {
   assignment?: Assignment | ReadAssignmentDto;
   totalPoints?: number;
   solutions: Solution[] = [];
-  assignees: Partial<Record<string, Assignee | undefined>> = {};
+  assignees: Partial<Record<string, string | undefined>> = {};
   assigneeNames: string[] = [];
   evaluated: Partial<Record<string, boolean>> = {};
   selected: Partial<Record<string, boolean>> = {};
@@ -79,7 +79,7 @@ export class SolutionTableComponent implements OnInit {
       const names = new Set<string>();
       for (let assignee of assignees) {
         names.add(assignee.assignee);
-        this.assignees[assignee.solution] = assignee;
+        this.assignees[assignee.solution] = assignee.assignee;
       }
       this.assigneeNames = [...names].sort();
     });

diff --git a/frontend/src/app/assignment/modules/course/course.module.ts b/frontend/src/app/assignment/modules/course/course.module.ts
@@ -15,7 +15,6 @@ import {MyCoursesComponent} from './my-courses/my-courses.component';
 import { CourseComponent } from './course/course.component';
 import { ShareComponent } from './share/share.component';
 import { StudentsComponent } from './students/students.component';
-import { AssigneeColorPipe } from './assignee-color.pipe';
 
 
 @NgModule({
@@ -26,7 +25,6 @@ import { AssigneeColorPipe } from './assignee-color.pipe';
     CourseComponent,
     ShareComponent,
     StudentsComponent,
-    AssigneeColorPipe,
   ],
   imports: [
     CommonModule,

diff --git a/frontend/src/app/assignment/modules/course/create-course/create-course.component.html b/frontend/src/app/assignment/modules/course/create-course/create-course.component.html
@@ -20,7 +20,7 @@ <h2>General Info</h2>
                 [(ngModel)]="course.description" (change)="saveDraft()">
         </textarea>
       <div class="form-text">
-        <a href="https://commonmark.org/help/">Markdown syntax</a> is supported.
+        <a href="https://commonmark.org/help/" target="_blank">Markdown syntax</a> is supported.
       </div>
     </div>
   </div>

diff --git a/frontend/src/app/assignment/modules/course/students/students.component.html b/frontend/src/app/assignment/modules/course/students/students.component.html
@@ -4,8 +4,12 @@
     <th *ngFor="let prop of authorProperties">
       {{ prop[0] }}
     </th>
-    <th *ngFor="let name of assignmentNames" colspan="2">
-      {{ name }}
+    <th *ngFor="let assignment of assignments; let index = index" colspan="2"
+        [routerLink]="assignment && '/assignments/' + assignment._id + '/solutions'"
+        [ngbTooltip]="assignment && assignment.title" container="body"
+        class="bi-clipboard-check cursor-pointer"
+    >
+      {{ assignmentNames[index] }}
     </th>
     <th>
       <i class="bi-person-raised-hand" ngbTooltip="Number of complete Feedbacks submitted"></i>
@@ -24,52 +28,23 @@
       {{ student.author[prop[1]] }}
     </td>
     <ng-container *ngFor="let solution of student.solutions; let i = index">
-      <td class="text-end" [class.text-danger]="!solution" [class.text-muted]="solution && solution.points === undefined">
+      <td class="text-end"
+          [class.text-danger]="!solution"
+          [class.text-muted]="solution && solution.points === undefined"
+          [routerLink]="solution && ['/assignments', course?.assignments?.[i], 'solutions', solution._id]"
+          [ngbTooltip]="solution ? 'View Solution' : 'No Solution'" container="body"
+          [class.cursor-pointer]="solution"
+      >
         {{ solution?.points || 0 }}
       </td>
       <td [style.background-color]="solution?.assignee | assigneeColor">
-        <div ngbDropdown>
-          <button ngbDropdownToggle class="btn p-0 text-white text-shadow">{{ (solution?.assignee || '-') | initials }}</button>
-          <div ngbDropdownMenu>
-            <ng-container *ngIf="solution else noSolution">
-              <a
-                ngbDropdownItem
-                class="bi-list-check"
-                [routerLink]="['/assignments', course?.assignments?.[i], 'solutions', solution._id]"
-              >
-                View Solution
-              </a>
-              <div class="dropdown-item-text">
-                <label class="form-label bi-person-check">
-                  Assignee
-                </label>
-                <app-assignee-input
-                  #assigneeInput
-                  [assignment]="course?.assignments?.[i]!"
-                  [solution]="solution._id!"
-                  [assignees]="assignees"
-                  [(assignee)]="solution.assignee"
-                ></app-assignee-input>
-                <div class="btn-group">
-                  <button
-                    *ngFor="let assignee of assignees"
-                    class="btn btn-sm text-white text-shadow"
-                    [ngbTooltip]="assignee"
-                    [style.background-color]="assignee | assigneeColor"
-                    (click)="solution.assignee = assignee; assigneeInput.assignee = assignee; assigneeInput.save()"
-                  >
-                    {{ assignee | initials }}
-                  </button>
-                </div>
-              </div>
-            </ng-container>
-            <ng-template #noSolution>
-              <div class="dropdown-item-text text-muted">
-                No Solution
-              </div>
-            </ng-template>
-          </div>
-        </div>
+        <app-assignee-dropdown
+          *ngIf="solution && course"
+          [assignment]="course.assignments[i]"
+          [solution]="solution._id"
+          [assignees]="assignees"
+          [(assignee)]="solution.assignee"
+        ></app-assignee-dropdown>
       </td>
     </ng-container>
     <td>

diff --git a/frontend/src/app/assignment/modules/course/students/students.component.ts b/frontend/src/app/assignment/modules/course/students/students.component.ts
@@ -5,6 +5,7 @@ import {CourseService} from 'src/app/assignment/services/course.service';
 import Course, {CourseStudent} from '../../../model/course';
 import {authorInfoProperties} from '../../../model/solution';
 import {AssignmentService} from "../../../services/assignment.service";
+import Assignment, {ReadAssignmentDto} from "../../../model/assignment";
 
 @Component({
   selector: 'app-students',
@@ -14,6 +15,7 @@ import {AssignmentService} from "../../../services/assignment.service";
 export class StudentsComponent implements OnInit {
   course?: Course;
   students?: CourseStudent[];
+  assignments: (ReadAssignmentDto | undefined)[] = [];
   assignmentNames: string[] = [];
   assignees: string[] = [];
 
@@ -32,6 +34,7 @@ export class StudentsComponent implements OnInit {
       tap(course => this.course = course),
       switchMap(course => this.assignmentService.findIds(course.assignments)),
     ).subscribe(assignments => {
+      this.assignments = assignments;
       if (!assignments.length) {
         return;
       }
@@ -51,7 +54,12 @@ export class StudentsComponent implements OnInit {
       switchMap(({cid}) => this.courseService.getStudents(cid)),
     ).subscribe(students => {
       this.students = students;
-      this.assignees = [...new Set(students.flatMap(s => s.solutions.map(s => s?.assignee).filter(x => x)))].sort();
+      this.assignees = [...new Set(students
+        .flatMap(s => s.solutions
+          .map(s => s?.assignee)
+          .filter((x): x is string => !!x)
+        )
+      )].sort();
     });
   }
 }
diff --git a/frontend/src/app/assignment/modules/edit-assignment/info/info.component.html b/frontend/src/app/assignment/modules/edit-assignment/info/info.component.html
@@ -48,7 +48,7 @@
     <textarea id="descriptionInput" class="form-control" rows="6" [(ngModel)]="assignment.description"
               (change)="saveDraft()"></textarea>
     <div class="form-text">
-      <a href="https://commonmark.org/help/">Markdown syntax</a> is supported.
+      <a href="https://commonmark.org/help/" target="_blank">Markdown syntax</a> is supported.
     </div>
   </div>
 </div>
diff --git a/...tend/src/app/assignment/modules/shared/assignee-dropdown/assignee-dropdown.component.html b/...tend/src/app/assignment/modules/shared/assignee-dropdown/assignee-dropdown.component.html
@@ -0,0 +1,23 @@
+<div ngbDropdown>
+  <button ngbDropdownToggle class="btn p-0 text-white text-shadow"
+          [class.bi-person-plus]="!assignee"
+          [ngbTooltip]="assignee || 'Add Assignee'"
+  >
+    {{ (assignee || '') | initials }}
+  </button>
+  <div ngbDropdownMenu>
+    <button *ngFor="let suggestion of assignees" ngbDropdownItem (click)="assignee = suggestion; save()">
+      <span class="badge" [style.background-color]="suggestion | assigneeColor">{{ suggestion | initials }}</span>
+      {{ suggestion }}
+    </button>
+    <button ngbDropdownItem class="bi-person-x" (click)="this.assignee = ''; save()">
+      Unassign
+    </button>
+    <div class="dropdown-item-text">
+      <label class="form-label" for="custom-assignee">
+        Custom Assignee
+      </label>
+      <input type="text" class="form-control" id="custom-assignee" [(ngModel)]="assignee" (change)="save()">
+    </div>
+  </div>
+</div>
diff --git a/...ignee-input/assignee-input.component.scss → ...dropdown/assignee-dropdown.component.scss b/...ignee-input/assignee-input.component.scss → ...dropdown/assignee-dropdown.component.scss
diff --git a/frontend/src/app/assignment/modules/shared/assignee-dropdown/assignee-dropdown.component.ts b/frontend/src/app/assignment/modules/shared/assignee-dropdown/assignee-dropdown.component.ts
@@ -0,0 +1,32 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {AssigneeService} from "../../../services/assignee.service";
+import {ToastService} from "@mean-stream/ngbx";
+
+@Component({
+  selector: 'app-assignee-dropdown',
+  templateUrl: './assignee-dropdown.component.html',
+  styleUrls: ['./assignee-dropdown.component.scss']
+})
+export class AssigneeDropdownComponent {
+  @Input({required: true}) assignment: string;
+  @Input({required: true}) solution: string;
+  @Input() assignee?: string;
+  @Input() assignees: string[] = [];
+
+  @Output() assigneeChange = new EventEmitter<string | undefined>();
+
+  constructor(
+    private assigneeService: AssigneeService,
+    private toastService: ToastService,
+  ) {
+  }
+
+  save(): void {
+    this.assigneeService.setAssignee(this.assignment, this.solution, this.assignee).subscribe(result => {
+      this.assigneeChange.next(result?.assignee);
+      this.toastService.success('Assignee', result ? `Successfully assigned to ${result.assignee}` : 'Successfully de-assigned');
+    }, error => {
+      this.toastService.error('Assignee', 'Failed to assign', error);
+    });
+  }
+}
diff --git a/frontend/src/app/assignment/modules/shared/assignee-input/assignee-input.component.html b/frontend/src/app/assignment/modules/shared/assignee-input/assignee-input.component.html
diff --git a/frontend/src/app/assignment/modules/shared/assignee-input/assignee-input.component.ts b/frontend/src/app/assignment/modules/shared/assignee-input/assignee-input.component.ts
diff --git a/...ent/modules/course/assignee-color.pipe.ts → ...dules/shared/pipes/assignee-color.pipe.ts b/...ent/modules/course/assignee-color.pipe.ts → ...dules/shared/pipes/assignee-color.pipe.ts
diff --git a/frontend/src/app/assignment/modules/shared/shared.module.ts b/frontend/src/app/assignment/modules/shared/shared.module.ts
@@ -15,10 +15,11 @@ import {SolutionNamePipe} from './pipes/solution-name.pipe';
 import {GithubLinkPipe} from './pipes/github-link.pipe';
 import {CloneLinkPipe} from './pipes/clone-link.pipe';
 import {AssignmentActionsComponent} from './assignment-actions/assignment-actions.component';
-import {AssigneeInputComponent} from './assignee-input/assignee-input.component';
 import {EditMemberListComponent} from './edit-member-list/edit-member-list.component';
 import {UserModule} from "../../../user/user.module";
 import {InitialsPipe} from "./pipes/initials.pipe";
+import {AssigneeDropdownComponent} from './assignee-dropdown/assignee-dropdown.component';
+import {AssigneeColorPipe} from "./pipes/assignee-color.pipe";
 
 @NgModule({
   imports: [
@@ -43,9 +44,10 @@ import {InitialsPipe} from "./pipes/initials.pipe";
     GithubLinkPipe,
     CloneLinkPipe,
     AssignmentActionsComponent,
-    AssigneeInputComponent,
     EditMemberListComponent,
     InitialsPipe,
+    AssigneeDropdownComponent,
+    AssigneeColorPipe,
   ],
   exports: [
     AssignmentInfoComponent,
@@ -59,9 +61,10 @@ import {InitialsPipe} from "./pipes/initials.pipe";
     GithubLinkPipe,
     CloneLinkPipe,
     AssignmentActionsComponent,
-    AssigneeInputComponent,
     EditMemberListComponent,
     InitialsPipe,
+    AssigneeDropdownComponent,
+    AssigneeColorPipe,
   ],
 })
 export class AssignmentSharedModule {

diff --git a/frontend/src/app/assignment/modules/solution/comment-list/comment-list.component.html b/frontend/src/app/assignment/modules/solution/comment-list/comment-list.component.html
@@ -57,7 +57,7 @@
             (change)="saveCommentDraft()"
             (keyup.control.enter)="submitComment()"></textarea>
           <div class="form-text">
-            <a href="https://commonmark.org/help/">Markdown syntax</a> is supported.
+            <a href="https://commonmark.org/help/" target="_blank">Markdown syntax</a> is supported.
           </div>
         </div>
       </div>

diff --git a/frontend/src/app/assignment/modules/solution/evaluation-form/evaluation-form.component.html b/frontend/src/app/assignment/modules/solution/evaluation-form/evaluation-form.component.html
@@ -55,7 +55,7 @@
         [rows]="remarkLines"
       ></textarea>
       <div class="form-text">
-        <a href="https://commonmark.org/help/">Markdown Syntax</a> is supported.
+        <a href="https://commonmark.org/help/" target="_blank">Markdown Syntax</a> is supported.
       </div>
     </div>
     <div class="mb-3">