[WEB] course creation and task assignment (#1558)

* add checkboxes to task details

* stuff

* fix merge conflicts
improve usability
add final save functions

modules/fbs-core/web/src/app/dialogs/task-new-dialog/task-new-dialog.component.html

@@ -1,23 +1,64 @@
-<div matDialogTitle *ngIf="!isUpdate">
+<div matDialogTitle *ngIf="updateCondition === allUpdateConditions.CREATE">
   {{ "dialog.task.new.title-create" | i18nextEager }}
 </div>
-<div matDialogTitle *ngIf="isUpdate">
+<div matDialogTitle *ngIf="updateCondition === allUpdateConditions.UPDATE">
   {{ "dialog.task.new.title-edit" | i18nextEager }}
 </div>
+<div
+  matDialogTitle
+  *ngIf="updateCondition === allUpdateConditions.UPDATE_MULTIPLE"
+>
+  {{ "dialog.task.new.title-edit-multiple" | i18nextEager }}
+</div>
+
+<div *ngIf="updateCondition === allUpdateConditions.UPDATE_MULTIPLE">
+  Ausgewählte Aufgaben:
+  <span *ngFor="let task of data.tasks">
+    <b>{{ task.name }}; </b>
+  </span>
+
+  <section
+    *ngIf="updateCondition === allUpdateConditions.UPDATE_MULTIPLE"
+    class="checkboxes"
+  >
+    <div>
+      {{ "dialog.task.new.placeholder-deadline" | i18nextEager }}
+      <mat-checkbox [(ngModel)]="selectedFormFields.datePicker"></mat-checkbox>
+    </div>
+    <div>
+      {{ "dialog.task.new.label-mediatype" | i18nextEager }}
+      <mat-checkbox [(ngModel)]="selectedFormFields.mediaType"></mat-checkbox>
+    </div>
+    <div>
+      {{ "dialog.task.new.label-requirement" | i18nextEager }}
+      <mat-checkbox
+        [(ngModel)]="selectedFormFields.requirementType"
+      ></mat-checkbox>
+    </div>
+    <div>
+      {{ "dialog.task.new.label-visibility" | i18nextEager }}
+      <mat-checkbox [(ngModel)]="selectedFormFields.isPrivate"></mat-checkbox>
+    </div>
+  </section>
+</div>
+
 <div class="newTask">
   <form [formGroup]="taskForm">
     <!-- Task name -->
-    <mat-form-field>
+    <mat-form-field
+      *ngIf="updateCondition !== allUpdateConditions.UPDATE_MULTIPLE"
+    >
       <input
         type="text"
         placeholder="{{ 'dialog.task.new.placeholder-name' | i18nextEager }}"
         matInput
         formControlName="name"
       />
     </mat-form-field>
-
     <!-- Task Description -->
-    <mat-form-field>
+    <mat-form-field
+      *ngIf="updateCondition !== allUpdateConditions.UPDATE_MULTIPLE"
+    >
       <mat-label>{{
         "dialog.task.new.label-description" | i18nextEager
       }}</mat-label>
@@ -46,17 +87,19 @@
         [readonly]="true"
         matInput
         [ngxMatDatetimePicker]="picker"
-        [disabled]="datePickerDisabled"
+        [disabled]="datePickerDisabled || !selectedFormFields.datePicker"
         placeholder="{{
           'dialog.task.new.placeholder-deadline' | i18nextEager
         }}"
         formControlName="deadline"
         (dateChange)="addDate($event)"
       />
+
       <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
       <ngx-mat-datetime-picker
         #picker
         [showSeconds]="true"
+        [disabled]="!selectedFormFields.datePicker"
       ></ngx-mat-datetime-picker>
     </mat-form-field>
 
@@ -65,6 +108,7 @@
       formControlName="expCheck"
       class="noDeadline"
       (change)="setMaxExpirationDate($event)"
+      [disabled]="!selectedFormFields.datePicker"
     >
       {{ "dialog.task.new.toggle-no-deadline" | i18nextEager }}
     </mat-slide-toggle>
@@ -76,7 +120,7 @@
       }}</mat-label>
       <mat-select
         formControlName="mediaType"
-        [disabled]="disableTypeChange"
+        [disabled]="disableTypeChange || !selectedFormFields.mediaType"
         (selectionChange)="changedMediaType()"
       >
         <mat-option value="text/plain">{{
@@ -91,12 +135,15 @@
       </mat-select>
     </mat-form-field>
 
-    <!-- Task Mediatype -->
+    <!-- Task Requirement -->
     <mat-form-field class="col pad">
       <mat-label>{{
         "dialog.task.new.label-requirement" | i18nextEager
       }}</mat-label>
-      <mat-select formControlName="requirementType">
+      <mat-select
+        formControlName="requirementType"
+        [disabled]="!selectedFormFields.requirementType"
+      >
         <mat-option value="mandatory">{{
           "dialog.task.new.option-compulsory" | i18nextEager
         }}</mat-option>
@@ -115,7 +162,10 @@
       <mat-label>{{
         "dialog.task.new.label-visibility" | i18nextEager
       }}</mat-label>
-      <mat-select formControlName="isPrivate">
+      <mat-select
+        formControlName="isPrivate"
+        [disabled]="!selectedFormFields.isPrivate"
+      >
         <mat-option value="Studenten">{{
           "dialog.task.new.option-students" | i18nextEager
         }}</mat-option>
@@ -227,7 +277,7 @@
       {{ "dialog.task.new.button-cancel" | i18nextEager }}
     </button>
     <button
-      *ngIf="!isUpdate"
+      *ngIf="updateCondition === allUpdateConditions.CREATE"
       mat-flat-button
       color="accent"
       [disabled]="!taskForm.valid"
@@ -236,13 +286,21 @@
       {{ "dialog.task.new.button-create" | i18nextEager }}
     </button>
     <button
-      *ngIf="isUpdate"
+      *ngIf="updateCondition === allUpdateConditions.UPDATE"
       mat-flat-button
       color="accent"
       [disabled]="!taskForm.valid"
       (click)="updateTask(taskForm.value)"
     >
       {{ "dialog.task.new.button-update" | i18nextEager }}
     </button>
+    <button
+      *ngIf="updateCondition === allUpdateConditions.UPDATE_MULTIPLE"
+      mat-flat-button
+      color="accent"
+      (click)="updateMultipleTaskDetails(data.tasks)"
+    >
+      Ausgewählte Aufgaben bearbeiten
+    </button>
   </mat-dialog-actions>
 </div>

modules/fbs-core/web/src/app/dialogs/task-new-dialog/task-new-dialog.component.scss

@@ -1,6 +1,6 @@
 .mat-form-field {
-  //display: flex;
-  //flex-direction: column;
+  // display: flex;
+  // flex-direction: column;
   width: 100%;
 }
 
@@ -32,9 +32,24 @@
 .clickable {
   cursor: pointer;
 }
+
 .checkboxSolution {
   margin: 20%;
 }
+
 .noDeadline {
   margin-left: 40px;
+}
+
+.checkboxes {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  justify-content: space-between;
+  margin: 20px 0px;
+
+  * {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    justify-content: space-between;
+  }
 }

modules/fbs-core/web/src/app/dialogs/task-new-dialog/task-new-dialog.component.ts

@@ -22,6 +22,8 @@ import { CheckerService } from "../../service/checker.service";
 import { CheckerConfig } from "../../model/CheckerConfig";
 import { CheckerFileType } from "src/app/enums/checkerFileType";
 import { MatSlideToggle } from "@angular/material/slide-toggle";
+import { TaskUpdateConditions } from "src/app/enums/taskUpdateConditions";
+import { SelectedFormFields } from "src/app/model/SelectedFormFields";
 
 const defaultMediaType = "text/plain";
 const defaultrequirement = "mandatory";
@@ -50,8 +52,18 @@ export class TaskNewDialogComponent implements OnInit {
     pointFields: new UntypedFormControl(""),
     decimals: new UntypedFormControl(2),
     expCheck: new FormControl<Boolean>(false),
+    // datePickerSelected: new FormControl<Boolean>(false),
   });
-  isUpdate: boolean;
+  updateCondition: TaskUpdateConditions = TaskUpdateConditions.CREATE;
+  allUpdateConditions = TaskUpdateConditions;
+
+  selectedFormFields: SelectedFormFields = {
+    datePicker: false,
+    mediaType: false,
+    requirementType: false,
+    isPrivate: false,
+  };
+
   courseId: number;
   datePickerDisabled: boolean = false;
   task: Task = {
@@ -110,9 +122,17 @@ export class TaskNewDialogComponent implements OnInit {
     this.courseId = this.data.courseId;
     //this.datePickerDisabled = true;
     if (this.data.task) {
-      this.isUpdate = true;
+      this.updateCondition = TaskUpdateConditions.UPDATE;
       this.task = this.data.task;
+
+      this.selectedFormFields.datePicker = true;
+      this.selectedFormFields.mediaType = true;
+      this.selectedFormFields.requirementType = true;
+      this.selectedFormFields.isPrivate = true;
+
       this.setValues();
+    } else if (this.data.tasks) {
+      this.updateCondition = TaskUpdateConditions.UPDATE_MULTIPLE;
     }
   }
 
@@ -344,4 +364,23 @@ export class TaskNewDialogComponent implements OnInit {
   setMaxExpirationDate(event: MatSlideToggle) {
     this.datePickerDisabled = event.checked;
   }
+
+  updateMultipleTaskDetails(tasks: Task[]) {
+    this.getValues();
+    this.taskService
+      .updateMultipleTasks(
+        this.courseId,
+        tasks,
+        this.task,
+        this.selectedFormFields
+      )
+      .subscribe((success) => {
+        if (success) {
+          this.dialogRef.close({ success: true });
+        } else {
+          this.dialogRef.close({ success: false });
+          this.snackBar.open("Error while updating tasks", "ok");
+        }
+      });
+  }
 }

modules/fbs-core/web/src/app/enums/taskUpdateConditions.ts

@@ -0,0 +1,5 @@
+export enum TaskUpdateConditions {
+  CREATE,
+  UPDATE,
+  UPDATE_MULTIPLE,
+}

modules/fbs-core/web/src/app/model/SelectedFormFields.ts

@@ -0,0 +1,6 @@
+export interface SelectedFormFields {
+  datePicker: boolean;
+  mediaType: boolean;
+  requirementType: boolean;
+  isPrivate: boolean;
+}

modules/fbs-core/web/src/app/page-components/course-detail/course-detail.component.html

@@ -76,6 +76,17 @@
     >
       <mat-icon>check</mat-icon>
     </button>
+
+    <button
+      mat-icon-button
+      *ngIf="isAuthorized()"
+      (click)="enableEditTasks()"
+      matTooltip="{{ 'course.edit-multiple-tasks' | i18nextEager }}"
+    >
+      <mat-icon *ngIf="!editTasks" class="icon-off">toggle_off</mat-icon>
+      <mat-icon *ngIf="editTasks" class="icon-on">toggle_on</mat-icon>
+    </button>
+
     <button
       mat-icon-button
       *ngIf="isAuthorized() || role"
@@ -133,7 +144,7 @@
 
   <div class="description">{{ (course | async)?.description }}</div>
 
-  <div class="create-task">
+  <div class="create-task" *ngIf="!editTasks">
     <button
       mat-raised-button
       color="accent"
@@ -145,10 +156,39 @@
     </button>
   </div>
 
+  <div class="select-all-container">
+    <section *ngIf="editTasks">
+      <mat-checkbox
+        [ngModel]="isAllSelected()"
+        (ngModelChange)="changeAllSelections()"
+      >
+        <span *ngIf="!isAllSelected()">{{
+          "course.edit-multiple-tasks-select-all" | i18nextEager
+        }}</span>
+        <span *ngIf="isAllSelected()">{{
+          "course.edit-multiple-tasks-de-select-all" | i18nextEager
+        }}</span>
+      </mat-checkbox>
+    </section>
+
+    <button
+      mat-raised-button
+      class="edit-multiple-tasks-btn"
+      color="accent"
+      *ngIf="editTasks"
+      (click)="updateMultipleTaskDetails(selectedTasks)"
+      matTooltip="{{ 'course.edit-multiple-tasks' | i18nextEager }}"
+    >
+      <mat-icon>edit_note</mat-icon>&nbsp;{{
+        "course.edit-multiple-tasks" | i18nextEager
+      }}
+    </button>
+  </div>
+
   <!-- Johannes approach for progres bar -->
   <mat-card class="progress-card">
     <mat-card-content>
-      <div class="title">
+      <div class="title" *ngIf="requirements">
         <h2>{{ "course.progress-title" | i18nextEager }}</h2>
         <!-- if coursePassed show badge -->
         <mat-chip-list *ngIf="(requirements | async).length === 0">
@@ -253,6 +293,9 @@ <h2>{{ "course.progress-title" | i18nextEager }}</h2>
         [courseId]="courseID"
         [task]="task"
         [taskResult]="taskResults[task.id]"
+        [isSelectable]="editTasks"
+        (selectionChanged)="toggleSelection($event, task)"
+        [isSelected]="isInSelectedTasks(task)"
       >
       </app-task-preview>
     </div>

modules/fbs-core/web/src/app/page-components/course-detail/course-detail.component.scss

@@ -100,7 +100,26 @@
     justify-content: center;
   }
 }
+.icon-off {
+  color: grey;
+}
+.icon-on {
+  color: #3fa73f;
+}
 
+.select-all-container {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin-bottom: 30px;
+  margin-top: 30px;
+  margin-left: 15px;
+
+  .edit-multiple-tasks-btn {
+    margin-left: 150px;
+    cursor: pointer;
+  }
+}
 .mat-progress-bar {
   height: 15px;
   border-radius: 5px;