feat: display submitted grade in portfolio view

Author: b0ink

src/app/projects/states/dashboard/directives/progress-dashboard/progress-dashboard.component.html

@@ -9,7 +9,14 @@ <h4 class="py-3.5 font-semibold text-gray-800">
   </div>
   <div class="grid grid-cols-1 items-stretch gap-3.5 p-3.5 xl:grid-cols-2">
     <!-- Task Planner Card -->
-    <div class="size-full xl:col-span-1">
+    <div
+      class="size-full"
+      [ngClass]="
+        showSubmittedGrade
+          ? 'xl:col-span-2 xl:mx-auto xl:w-[calc((100%-0.875rem)/2)]'
+          : 'xl:col-span-1'
+      "
+    >
       <f-task-planner-card class="block size-full" [project]="project"></f-task-planner-card>
     </div>
 
@@ -50,6 +57,35 @@ <h4 class="py-3.5 font-semibold text-gray-800">
       </mat-card>
     </div>
 
+    @if (showSubmittedGrade) {
+      <!-- Submitted Grade Card -->
+      <div class="h-full xl:col-span-1">
+        <mat-card appearance="outlined" class="flex h-full flex-col">
+          <mat-card-header>
+            <mat-card-title>Submitted Grade</mat-card-title>
+            <mat-card-subtitle class="mb-2.5">
+              <p>The grade you are submitting your portfolio for.</p>
+            </mat-card-subtitle>
+          </mat-card-header>
+
+          <mat-card-content class="flex flex-1 items-center">
+            <div class="w-full">
+              <mat-form-field appearance="fill" class="w-full">
+                <mat-label>Select Submitted Grade</mat-label>
+                <mat-select disabled [value]="project.submittedGrade">
+                  @for (grade of grades.values; track grade) {
+                    <mat-option [value]="grade">
+                      {{ grades.names[grade] }}
+                    </mat-option>
+                  }
+                </mat-select>
+              </mat-form-field>
+            </div>
+          </mat-card-content>
+        </mat-card>
+      </div>
+    }
+
     <!-- Unit learning outcomes -->
     <div class="xl:col-span-2">
       <f-task-ilos-card [iloContextType]="'Unit'" [unit]="project.unit"></f-task-ilos-card>

src/app/projects/states/dashboard/directives/progress-dashboard/progress-dashboard.component.ts

@@ -21,6 +21,7 @@ import {GradeService} from 'src/app/common/services/grade.service';
 })
 export class ProgressDashboardComponent implements OnInit {
   @Input() project: Project;
+  @Input() showSubmittedGrade?: boolean = false;
   @Output() doUpdateTargetGrade: EventEmitter<void> = new EventEmitter();
 
   grades: {names: Record<number, string>; values: number[]} = {

src/app/projects/states/dashboard/project-dashboard/project-dashboard.component.html

@@ -133,7 +133,11 @@
         </div>
       } @else {
         <div class="min-h-0 flex-1 overflow-y-auto p-1">
-          <f-progress-dashboard class="w-full" [project]="project"></f-progress-dashboard>
+          <f-progress-dashboard
+            class="w-full"
+            [project]="project"
+            [showSubmittedGrade]="showSubmittedGrade"
+          ></f-progress-dashboard>
         </div>
       }
     </div>

src/app/projects/states/dashboard/project-dashboard/project-dashboard.component.ts

@@ -21,6 +21,7 @@ export class ProjectDashboardComponent implements OnInit, OnDestroy {
   @Input() public project$: Observable<Project>;
   @Input() public defaultTaskListCollapsed = false;
   @Input() public taskSelectionUrlBase: unknown[] | null = null;
+  @Input() public showSubmittedGrade?: boolean = false;
 
   /**
    * The currently selected task definition - selected in the unit task list.

src/app/units/states/portfolios/directives/portfolios-project-progress/portfolios-project-progress.component.html

@@ -56,6 +56,7 @@ <h2>Review progress of {{ project.student.name }}</h2>
     class="block min-h-fit min-w-0"
     [defaultTaskListCollapsed]="true"
     [project$]="project$"
+    [showSubmittedGrade]="showSubmittedGrade"
     [taskSelectionUrlBase]="taskSelectionUrlBase"
   ></f-project-dashboard>
 

src/app/units/states/portfolios/directives/portfolios-project-progress/portfolios-project-progress.component.ts

@@ -25,6 +25,7 @@ export class PortfoliosProjectProgressComponent implements OnChanges {
   @Input() project: Project;
   @Input() unit: Unit;
   @Input() taskSelectionUrlBase: unknown[] | null = null;
+  @Input() showSubmittedGrade?: boolean = false;
 
   @Input()
   public project$: BehaviorSubject<Project> = new BehaviorSubject(null);

src/app/units/states/portfolios/portfolios.component.html

@@ -27,6 +27,7 @@
             <f-portfolios-project-progress
               [project]="selectedProject"
               [project$]="selectedProject$"
+              [showSubmittedGrade]="true"
               [taskSelectionUrlBase]="progressTaskSelectionUrlBase"
               [unit]="unit"
             ></f-portfolios-project-progress>