fix(portfolios): restore legacy progress dashboard and lazy-load select tab

Author: MillicentAmolo

src/app/doubtfire-angular.module.ts

@@ -214,6 +214,7 @@ import {TaskSubmissionCardComponent} from './projects/states/dashboard/directive
 import {TaskDashboardComponent} from './projects/states/dashboard/directives/task-dashboard/task-dashboard.component';
 import {InboxComponent} from './units/states/tasks/inbox/inbox.component';
 import {PortfoliosComponent} from './units/states/portfolios/portfolios.component';
+import {AjsProjectProgressDashboardComponent} from './units/states/portfolios/ajs-project-progress-dashboard.component';
 import {ProjectProgressBarComponent} from './common/project-progress-bar/project-progress-bar.component';
 import {TeachingPeriodListComponent} from './admin/states/teaching-periods/teaching-period-list/teaching-period-list.component';
 import {FChipComponent} from './common/f-chip/f-chip.component';
@@ -456,6 +457,7 @@ const GANTT_CHART_CONFIG = {
     TaskDashboardComponent,
     InboxComponent,
     PortfoliosComponent,
+    AjsProjectProgressDashboardComponent,
     ProjectProgressBarComponent,
     TeachingPeriodListComponent,
     CreateNewUnitModal,

src/app/projects/project-progress-dashboard/project-progress-dashboard.coffee

@@ -10,17 +10,31 @@ angular.module('doubtfire.projects.project-progress-dashboard',[])
 .directive('projectProgressDashboard', ->
   restrict: 'E'
   templateUrl: 'projects/project-progress-dashboard/project-progress-dashboard.tpl.html'
+  # Explicit bindings for use inside upgraded Angular hosts (f-portfolios). Link copies from
+  # $parent when attributes are omitted so legacy templates without project="..." still work.
+  scope:
+    project: '<'
+    unit: '<'
   controller: ($scope, $state, $rootScope, $stateParams, newProjectService, alertService, gradeService, newTaskService, listenerService) ->
-    if $stateParams.projectId?
-      $scope.studentProjectId = $stateParams.projectId
-    else if $scope.project?
-      $scope.studentProjectId = $scope.project.id
-
     $scope.grades = gradeService.grades
 
     $scope.currentVisualisation = 'burndown'
 
+    $scope.taskStats = {}
+
+    updateTaskCompletionStats = ->
+      return unless $scope.project?
+      $scope.taskStats.numberOfTasksCompleted = $scope.project.tasksByStatus(newTaskService.completeStatus).length
+      $scope.taskStats.numberOfTasksRemaining = $scope.project.activeTasks().length - $scope.taskStats.numberOfTasksCompleted
+
+    syncStudentProjectId = ->
+      if $stateParams.projectId?
+        $scope.studentProjectId = $stateParams.projectId
+      else if $scope.project?
+        $scope.studentProjectId = $scope.project.id
+
     $scope.chooseGrade = (idx) ->
+      return unless $scope.project?
       $scope.project.targetGrade = idx
       newProjectService.update($scope.project).subscribe(
         (response) ->
@@ -29,18 +43,19 @@ angular.module('doubtfire.projects.project-progress-dashboard',[])
       updateTaskCompletionStats()
 
     $scope.taskCount = ->
-      $scope.unit.taskDefinitionCount
-
-    $scope.taskStats = {}
-
-    # Update move to task and project...
-    updateTaskCompletionStats = ->
-      $scope.taskStats.numberOfTasksCompleted = $scope.project.tasksByStatus(newTaskService.completeStatus).length
-      $scope.taskStats.numberOfTasksRemaining = $scope.project.activeTasks().length - $scope.taskStats.numberOfTasksCompleted
+      $scope.unit?.taskDefinitionCount
 
     $scope.$on 'TaskStatusUpdated', ->
       updateTaskCompletionStats()
 
+    $scope.$watch 'project', (project) ->
+      return unless project?
+      syncStudentProjectId()
+      updateTaskCompletionStats()
 
-    updateTaskCompletionStats()
+  link: (scope, _el, _attrs) ->
+    unless scope.project?
+      scope.project = scope.$parent.project if scope.$parent?
+    unless scope.unit?
+      scope.unit = scope.$parent.unit if scope.$parent?
 )

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

@@ -0,0 +1,32 @@
+import { Component, ElementRef, Inject, Input, Injector, OnInit, Optional } from '@angular/core';
+import { UpgradeComponent } from '@angular/upgrade/static';
+import { Project } from 'src/app/api/models/project';
+import { Unit } from 'src/app/api/models/unit';
+import { visualisations } from 'src/app/ajs-upgraded-providers';
+
+/**
+ * Hosts the AngularJS `projectProgressDashboard` directive inside Angular templates
+ * (same charts and target-grade UI as the legacy portfolios “View Progress” tab).
+ */
+@Component({
+  selector: 'f-ajs-project-progress-dashboard',
+  template: '',
+})
+export class AjsProjectProgressDashboardComponent extends UpgradeComponent implements OnInit {
+  @Input() project: Project;
+  @Input() unit: Unit;
+
+  constructor(
+    elementRef: ElementRef,
+    injector: Injector,
+    @Optional() @Inject(visualisations) private readonly visualisationApi: { refreshAll?: () => void } | null,
+  ) {
+    super('projectProgressDashboard', elementRef, injector);
+  }
+
+  override ngOnInit(): void {
+    super.ngOnInit();
+    // Burndown / pie use legacy visualisation lifecycle; match UnitPortfoliosStateCtrl.refreshCharts.
+    setTimeout(() => this.visualisationApi?.refreshAll?.(), 0);
+  }
+}

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

@@ -8,6 +8,7 @@
         <div class="tab-title">{{ tabs.selectStudent.title }}</div>
       </ng-template>
 
+      <ng-template matTabContent>
       <!-- Select Student Tab -->
       <div class="select-student-wrap">
         <div class="toolbar">
@@ -196,6 +197,7 @@
           ></mat-paginator>
         </div>
       </div>
+      </ng-template>
     </mat-tab>
 
     <mat-tab [disabled]="!selectedStudent" label="View Progress">
@@ -205,47 +207,18 @@
           <p class="mt-3">Loading student project…</p>
         </div>
 
-        <div *ngIf="project && !loadingProject" class="panel">
-        <div class="panel-header">
-          <h3 class="panel-title">Review Progress of {{ selectedStudent?.student.name }}</h3>
-          <p class="panel-subtitle">Progress through the unit's tasks.</p>
-        </div>
-
-        <div class="panel-body">
-          <div class="target-grade">
-            <div class="target-grade-title">Target Grade</div>
-            <div class="target-grade-options">
-              <button
-                mat-stroked-button
-                *ngFor="let grade of gradeService.allGradeValues"
-                [color]="grade === project.targetGrade ? 'primary' : 'accent'"
-                (click)="setTargetGrade(grade)"
-              >
-                <span class="grade-icon-circle small" [style.background-color]="gradeColor(grade)">{{
-                  gradeAcronym(grade)
-                }}</span>
-                <span class="ml-2">{{ gradeService.grades[String(grade)] }}</span>
-              </button>
-            </div>
+        <div *ngIf="project && !loadingProject" class="panel progress-panel">
+          <div class="panel-header">
+            <h3 class="panel-title">Review Progress of {{ selectedStudent?.student.name }}</h3>
+            <p class="panel-subtitle">Progress through the unit's tasks.</p>
           </div>
-
-          <div class="progress-summary">
-            <div class="progress-summary-title">Task Status Summary</div>
-            <div class="progress-summary-grid">
-              <div class="progress-summary-item" *ngFor="let bar of project.taskStats">
-                <div class="progress-summary-item-head">
-                  <span class="status-dot" [style.background-color]="taskSegmentColor(bar.key)"></span>
-                  <span class="status-label">{{ bar.key }}</span>
-                  <span class="status-value">{{ bar.value }}%</span>
-                </div>
-                <div class="progress-line">
-                  <div class="progress-line-fill" [style.width.%]="bar.value"></div>
-                </div>
-              </div>
-            </div>
+          <div class="panel-body progress-panel-body">
+            <f-ajs-project-progress-dashboard
+              [project]="project"
+              [unit]="unit"
+            ></f-ajs-project-progress-dashboard>
           </div>
         </div>
-      </div>
       </ng-template>
     </mat-tab>
 

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

@@ -131,61 +131,9 @@
     padding: 0.25rem 1rem 1rem;
   }
 
-  .target-grade-title,
-  .progress-summary-title {
-    font-weight: 800;
-    margin-bottom: 0.5rem;
-  }
-
-  .target-grade-options {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-    margin-top: 0.25rem;
-  }
-
-  .progress-summary-grid {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-  }
-
-  .progress-summary-item {
-    padding: 0.25rem 0;
-  }
-
-  .progress-summary-item-head {
-    display: flex;
-    align-items: center;
-    gap: 0.6rem;
-  }
-
-  .status-dot {
-    width: 0.9rem;
-    height: 0.9rem;
-    border-radius: 999px;
-  }
-
-  .status-label {
-    flex: 1;
-    text-transform: capitalize;
-    opacity: 0.85;
-  }
-
-  .status-value {
-    font-variant-numeric: tabular-nums;
-  }
-
-  .progress-line {
-    margin-top: 0.35rem;
-    height: 10px;
-    border-radius: 999px;
-    background-color: #f0f0f0;
-    overflow: hidden;
-  }
-
-  .progress-line-fill {
-    height: 100%;
+  .progress-panel-body {
+    overflow-x: auto;
+    padding-top: 0.5rem;
   }
 
   // Assess panel

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

@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild } from '@angular/core';
+import { Component, Inject, Input, OnChanges, OnDestroy, OnInit, Optional, SimpleChanges, ViewChild } from '@angular/core';
 import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { MatTableDataSource } from '@angular/material/table';
 import { GradeService } from 'src/app/common/services/grade.service';
@@ -12,6 +12,7 @@ import { FileDownloaderService } from 'src/app/common/file-downloader/file-downl
 import { AlertService } from 'src/app/common/services/alert.service';
 import { TaskService } from 'src/app/api/services/task.service';
 import { Subscription } from 'rxjs';
+import { visualisations } from 'src/app/ajs-upgraded-providers';
 
 type StudentTabKey = 'selectStudent' | 'viewProgress' | 'viewPortfolio' | 'assessPortfolio';
 
@@ -97,6 +98,7 @@ export class PortfoliosComponent implements OnInit, OnChanges, OnDestroy {
     private fileDownloader: FileDownloaderService,
     private alerts: AlertService,
     private taskService: TaskService,
+    @Optional() @Inject(visualisations) private readonly visualisationApi: { refreshAll?: () => void } | null,
   ) {}
 
   ngOnInit(): void {
@@ -161,8 +163,9 @@ export class PortfoliosComponent implements OnInit, OnChanges, OnDestroy {
   public onTabChange(tabKey: StudentTabKey): void {
     this.activeTab = tabKey;
     if (tabKey === 'viewProgress' && this.project) {
-      // Ensure project stats are up-to-date when opening the progress panel.
       this.project.refreshBurndownChartData();
+      // Legacy charts (nv/d3) need a refresh after the tab body is shown.
+      setTimeout(() => this.visualisationApi?.refreshAll?.(), 0);
     }
   }
 
@@ -342,32 +345,10 @@ export class PortfoliosComponent implements OnInit, OnChanges, OnDestroy {
     return this.taskService.statusColors.get(taskStatusKey as any) ?? '#CCCCCC';
   }
 
-  public taskProgressSegments(taskStats: { key: string; value: number }[] | undefined): { key: string; value: number }[] {
-    if (!taskStats) return [];
-    // Keep legacy behaviour: hide tiny segments when rendering labels.
-    return taskStats.filter((bar) => bar.value !== undefined);
-  }
-
   public downloadPortfolios(): void {
     // Intentionally left out: legacy button was commented out.
   }
 
-  public setTargetGrade(grade: number): void {
-    if (!this.project) return;
-    const next = grade;
-    if (this.project.targetGrade === next) return;
-
-    this.project.targetGrade = next;
-    this.projectService.update(this.project).subscribe({
-      next: () => {
-        this.project.refreshBurndownChartData();
-      },
-      error: (message) => {
-        this.alerts.error(message, 6000);
-      },
-    });
-  }
-
   public saveGrade(): void {
     if (!this.project) return;
     const score = this.project.grade;