fix: add task description editing

doubtfire-lms · May 26, 2024 · ee0cfbf · ee0cfbf
1 parent 7f14735
commit ee0cfbf
Show file tree

Hide file tree

Showing 3 changed files with 176 additions and 132 deletions.
diff --git a/...directives/unit-tasks-editor/task-definition-editor/task-definition-editor.component.html b/...directives/unit-tasks-editor/task-definition-editor/task-definition-editor.component.html
@@ -1,138 +1,146 @@
-<div class="flex mt-10">
-  <div class="mr-6">
-    <div
-      class="font-bold text-formatif-blue text-3xl rounded-full bg-formatif-blue-lighter flex items-center justify-center w-16 h-16"
-    >
-      1
+<div class="flex-col pr-32">
+  <div class="flex mt-10">
+    <div class="mr-6">
+      <div
+        class="font-bold text-formatif-blue text-3xl rounded-full bg-formatif-blue-lighter flex items-center justify-center w-16 h-16"
+      >
+        1
+      </div>
     </div>
-  </div>
 
-  <div class="w-full">
-    <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900">Task details</h3>
-    <p class="font-normal text-gray-700">Name the task and set target grade</p>
-    <div class="bg-white border border-gray-200 rounded-xl shadow p-6">
-      <f-task-definition-general [taskDefinition]="taskDefinition"></f-task-definition-general>
+    <div class="w-full">
+      <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900">Task details</h3>
+      <p class="font-normal text-gray-700">Name the task and set target grade</p>
+      <div class="bg-white border border-gray-200 rounded-xl shadow p-6">
+        <f-task-definition-general [taskDefinition]="taskDefinition"></f-task-definition-general>
+      </div>
     </div>
   </div>
-</div>
 
-<div class="flex mt-10">
-  <div class="mr-6">
-    <div
-      class="font-bold text-formatif-blue text-3xl rounded-full bg-formatif-blue-lighter flex items-center justify-center w-16 h-16"
-    >
-      2
+  <div class="flex mt-10">
+    <div class="mr-6">
+      <div
+        class="font-bold text-formatif-blue text-3xl rounded-full bg-formatif-blue-lighter flex items-center justify-center w-16 h-16"
+      >
+        2
+      </div>
     </div>
-  </div>
 
-  <div class="w-full">
-    <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900">Inbox</h3>
-    <p class="font-normal text-gray-700">Who assesses {{ unit.hasGroupwork() ? 'and submits ' : '' }}this task?</p>
-    <div class="bg-white border border-gray-200 rounded-xl shadow p-6">
-      <f-task-definition-who [taskDefinition]="taskDefinition"></f-task-definition-who>
+    <div class="w-full">
+      <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900">Inbox</h3>
+      <p class="font-normal text-gray-700">
+        Who assesses {{ unit.hasGroupwork() ? 'and submits ' : '' }}this task?
+      </p>
+      <div class="bg-white border border-gray-200 rounded-xl shadow p-6">
+        <f-task-definition-who [taskDefinition]="taskDefinition"></f-task-definition-who>
+      </div>
     </div>
   </div>
-</div>
 
-<div class="flex mt-10">
-  <div class="mr-6">
-    <div
-      class="font-bold text-formatif-blue text-3xl rounded-full bg-formatif-blue-lighter flex items-center justify-center w-16 h-16"
-    >
-      3
+  <div class="flex mt-10">
+    <div class="mr-6">
+      <div
+        class="font-bold text-formatif-blue text-3xl rounded-full bg-formatif-blue-lighter flex items-center justify-center w-16 h-16"
+      >
+        3
+      </div>
     </div>
-  </div>
 
-  <div class="w-full">
-    <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900">Due dates</h3>
-    <p class="font-normal text-gray-700">When is this task due?</p>
-    <div class="bg-white border border-gray-200 rounded-xl shadow p-6">
-      <f-task-definition-dates [taskDefinition]="taskDefinition"></f-task-definition-dates>
+    <div class="w-full">
+      <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900">Due dates</h3>
+      <p class="font-normal text-gray-700">When is this task due?</p>
+      <div class="bg-white border border-gray-200 rounded-xl shadow p-6">
+        <f-task-definition-dates [taskDefinition]="taskDefinition"></f-task-definition-dates>
+      </div>
     </div>
   </div>
-</div>
 
-<div class="flex mt-10">
-  <div class="mr-6">
-    <div
-      class="font-bold text-formatif-blue text-3xl rounded-full bg-formatif-blue-lighter flex items-center justify-center w-16 h-16"
-    >
-      4
+  <div class="flex mt-10">
+    <div class="mr-6">
+      <div
+        class="font-bold text-formatif-blue text-3xl rounded-full bg-formatif-blue-lighter flex items-center justify-center w-16 h-16"
+      >
+        4
+      </div>
     </div>
-  </div>
 
-  <div class="w-full">
-    <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900">Upload requirements</h3>
-    <p class="font-normal text-gray-700">What do students need to upload?</p>
-    <div class="bg-white border border-gray-200 rounded-xl shadow p-6">
-      <f-task-definition-upload [taskDefinition]="taskDefinition"></f-task-definition-upload>
+    <div class="w-full">
+      <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900">Upload requirements</h3>
+      <p class="font-normal text-gray-700">What do students need to upload?</p>
+      <div class="bg-white border border-gray-200 rounded-xl shadow p-6">
+        <f-task-definition-upload [taskDefinition]="taskDefinition"></f-task-definition-upload>
+      </div>
     </div>
   </div>
-</div>
 
-<div class="flex mt-10">
-  <div class="mr-6">
-    <div
-      class="font-bold text-formatif-blue text-3xl rounded-full bg-formatif-blue-lighter flex items-center justify-center w-16 h-16"
-    >
-      5
+  <div class="flex mt-10">
+    <div class="mr-6">
+      <div
+        class="font-bold text-formatif-blue text-3xl rounded-full bg-formatif-blue-lighter flex items-center justify-center w-16 h-16"
+      >
+        5
+      </div>
     </div>
-  </div>
 
-  <div class="w-full">
-    <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900">Task description and resources</h3>
-    <p class="font-normal text-gray-700">Upload task descriptions and resources</p>
-    <div class="bg-white border border-gray-200 rounded-xl shadow p-6">
-      <f-task-definition-resources [taskDefinition]="taskDefinition"></f-task-definition-resources>
+    <div class="w-full">
+      <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900">
+        Task description and resources
+      </h3>
+      <p class="font-normal text-gray-700">Upload task descriptions and resources</p>
+      <div class="bg-white border border-gray-200 rounded-xl shadow p-6">
+        <f-task-definition-resources
+          [taskDefinition]="taskDefinition"
+        ></f-task-definition-resources>
+      </div>
     </div>
   </div>
-</div>
 
-<div class="flex mt-10">
-  <div class="mr-6">
-    <div
-      class="font-bold text-formatif-blue text-3xl rounded-full bg-formatif-blue-lighter flex items-center justify-center w-16 h-16"
-    >
-      6
+  <div class="flex mt-10">
+    <div class="mr-6">
+      <div
+        class="font-bold text-formatif-blue text-3xl rounded-full bg-formatif-blue-lighter flex items-center justify-center w-16 h-16"
+      >
+        6
+      </div>
     </div>
-  </div>
 
-  <div class="w-full">
-    <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900">Task assessment automation</h3>
-    <p class="font-normal text-gray-700" *ngIf="!overseerEnabled">Automation is not enabled</p>
-    <p class="font-normal text-gray-700" *ngIf="overseerEnabled">Configure automated assessment</p>
-    <div class="bg-white border border-gray-200 rounded-xl shadow p-6" *ngIf="overseerEnabled">
-      <f-task-definition-overseer [taskDefinition]="taskDefinition"></f-task-definition-overseer>
+    <div class="w-full">
+      <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900">
+        Task assessment automation
+      </h3>
+      <p class="font-normal text-gray-700" *ngIf="!overseerEnabled">Automation is not enabled</p>
+      <p class="font-normal text-gray-700" *ngIf="overseerEnabled">
+        Configure automated assessment
+      </p>
+      <div class="bg-white border border-gray-200 rounded-xl shadow p-6" *ngIf="overseerEnabled">
+        <f-task-definition-overseer [taskDefinition]="taskDefinition"></f-task-definition-overseer>
+      </div>
     </div>
   </div>
-</div>
 
-<div class="flex mt-10">
-  <div class="mr-6">
-    <div
-      class="font-bold text-formatif-blue text-3xl rounded-full bg-formatif-blue-lighter flex items-center justify-center w-16 h-16"
-    >
-      7
+  <div class="flex mt-10">
+    <div class="mr-6">
+      <div
+        class="font-bold text-formatif-blue text-3xl rounded-full bg-formatif-blue-lighter flex items-center justify-center w-16 h-16"
+      >
+        7
+      </div>
     </div>
-  </div>
 
-  <div class="w-full">
-    <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900">Optional settings</h3>
-    <p class="font-normal text-gray-700">Configure automated assessment</p>
-    <mat-accordion>
-      <mat-expansion-panel>
-        <mat-expansion-panel-header>
-          <mat-panel-title> Options </mat-panel-title>
-        </mat-expansion-panel-header>
-        <f-task-definition-options [taskDefinition]="taskDefinition"></f-task-definition-options>
-      </mat-expansion-panel>
-    </mat-accordion>
+    <div class="w-full">
+      <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900">Optional settings</h3>
+      <p class="font-normal text-gray-700">Configure automated assessment</p>
+      <mat-accordion>
+        <mat-expansion-panel>
+          <mat-expansion-panel-header>
+            <mat-panel-title> Options </mat-panel-title>
+          </mat-expansion-panel-header>
+          <f-task-definition-options [taskDefinition]="taskDefinition"></f-task-definition-options>
+        </mat-expansion-panel>
+      </mat-accordion>
+    </div>
   </div>
 </div>
-
-<mat-toolbar>
-  <mat-toolbar-row class="flex flex-row">
-    <span class="flex-grow"></span>
-    <button mat-button mat-raised-button color="primary" (click)="save()"><mat-icon>save</mat-icon>Save</button>
-  </mat-toolbar-row>
-</mat-toolbar>
+<div class="w-full flex flex-row place-content-end sticky bottom-16 z-10">
+  <button mat-fab color="primary" (click)="save()"><mat-icon>save</mat-icon></button>
+</div>
diff --git a/...tor/task-definition-editor/task-definition-general/task-definition-general.component.html b/...tor/task-definition-editor/task-definition-general/task-definition-general.component.html
@@ -3,8 +3,8 @@
     <mat-label>Grade where task appears</mat-label>
     <mat-select [(ngModel)]="taskDefinition.targetGrade" required>
       @for (grade of grades; track grade) {
-  <mat-option [value]="grade.value">{{ grade.viewValue }}</mat-option>
-}
+        <mat-option [value]="grade.value">{{ grade.viewValue }}</mat-option>
+      }
     </mat-select>
   </mat-form-field>
 
@@ -23,3 +23,8 @@
   <mat-label>Descriptive task name</mat-label>
   <input matInput [(ngModel)]="taskDefinition.name" required />
 </mat-form-field>
+
+<mat-form-field appearance="outline" class="flex flex-grow">
+  <mat-label>Task description</mat-label>
+  <textarea matInput [(ngModel)]="taskDefinition.description" required> </textarea>
+</mat-form-field>