feat: added target grade change history feature

src/app/doubtfire-angular.module.ts

@@ -230,6 +230,7 @@ import {FTaskSheetViewComponent} from './units/states/tasks/viewer/directives/f-
 import {TasksViewerComponent} from './units/states/tasks/tasks-viewer/tasks-viewer.component';
 import {UnitCodeComponent} from './common/unit-code/unit-code.component';
 import {GradeService} from './common/services/grade.service';
+import { TargetGradeHistoryComponent } from './projects/states/dashboard/directives/progress-dashboard/target-grade-history/target-grade-history.component';
 import {ScormPlayerComponent} from './common/scorm-player/scorm-player.component';
 import {ScormAdapterService} from './api/services/scorm-adapter.service';
 import {ScormCommentComponent} from './tasks/task-comments-viewer/scorm-comment/scorm-comment.component';
@@ -352,6 +353,7 @@ const MY_DATE_FORMAT = {
     FUsersComponent,
     FTaskBadgeComponent,
     FUnitsComponent,
+    TargetGradeHistoryComponent,
     ScormPlayerComponent,
     ScormCommentComponent,
     TaskScormCardComponent,

src/app/doubtfire-angularjs.module.ts

@@ -224,6 +224,8 @@ import {FUnitsComponent} from './admin/states/f-units/f-units.component';
 import {MarkedPipe} from './common/pipes/marked.pipe';
 import {AlertService} from './common/services/alert.service';
 import {GradeService} from './common/services/grade.service';
+
+import {TargetGradeHistoryComponent} from './projects/states/dashboard/directives/progress-dashboard/target-grade-history/target-grade-history.component';
 import {TaskScormCardComponent} from './projects/states/dashboard/directives/task-dashboard/directives/task-scorm-card/task-scorm-card.component';
 
 export const DoubtfireAngularJSModule = angular.module('doubtfire', [
@@ -465,6 +467,12 @@ DoubtfireAngularJSModule.directive(
 );
 DoubtfireAngularJSModule.directive('newFUnits', downgradeComponent({component: FUnitsComponent}));
 
+DoubtfireAngularJSModule.directive(
+  'targetGradeHistory',
+  downgradeComponent({
+    component: TargetGradeHistoryComponent
+  })
+);
 // Global configuration
 
 // If the user enters a URL that doesn't match any known URL (state), send them to `/home`

src/app/projects/states/dashboard/directives/progress-dashboard/progress-dashboard.coffee

@@ -1,19 +1,17 @@
 angular.module('doubtfire.projects.states.dashboard.directives.progress-dashboard', [])
-#
-# Summary dashboard showing some graphs and way to change the
-# current target grade
-#
-.directive('progressDashboard', ->
+.directive 'progressDashboard', ->
   restrict: 'E'
   templateUrl: 'projects/states/dashboard/directives/progress-dashboard/progress-dashboard.tpl.html'
   scope:
     project: '='
     onUpdateTargetGrade: '='
-  controller: ($scope, $stateParams, newProjectService, gradeService, analyticsService, alertService) ->
+  controller: ($scope, $stateParams, newProjectService, gradeService, analyticsService, alertService, $http, DoubtfireConstants) ->
+
     # Is the current user a tutor?
     $scope.tutor = $stateParams.tutor
+
     # Number of tasks completed and remaining
-    updateTaskCompletionValues  = ->
+    updateTaskCompletionValues = ->
       completedTasks = $scope.project.numberTasks("complete")
       $scope.numberOfTasks =
         completed: completedTasks
@@ -25,6 +23,15 @@ angular.module('doubtfire.projects.states.dashboard.directives.progress-dashboar
       names: gradeService.grades
       values: gradeService.gradeValues
 
+    # Fetch Target Grade History
+    $scope.targetGradeHistory = []
+
+    $http.get("#{DoubtfireConstants.API_URL}/projects/#{$scope.project.id}")
+      .then (response) ->
+        $scope.targetGradeHistory = response.data.target_grade_histories
+      .catch (error) ->
+        alertService.error("Failed to load target grade history", 4000)
+
     $scope.updateTargetGrade = (newGrade) ->
       $scope.project.targetGrade = newGrade
       newProjectService.update($scope.project).subscribe(
@@ -35,10 +42,21 @@ angular.module('doubtfire.projects.states.dashboard.directives.progress-dashboar
           updateTaskCompletionValues()
           $scope.renderTaskStatusPieChart?()
           $scope.onUpdateTargetGrade?()
-          analyticsService.event("Student Project View - Progress Dashboard", "Grade Changed", $scope.grades.names[newGrade])
-          alertService.success( "Updated target grade successfully", 2000)
+          analyticsService.event(
+            "Student Project View - Progress Dashboard",
+            "Grade Changed",
+            $scope.grades.names[newGrade]
+          )
+
+          # Fetch updated target grade history
+          $http.get("#{DoubtfireConstants.API_URL}/projects/#{$scope.project.id}")
+            .then (response) ->
+              $scope.targetGradeHistory = response.data.target_grade_histories
+            .catch (error) ->
+              alertService.error("Failed to reload target grade history", 4000)
+
+          alertService.success("Updated target grade successfully", 2000)
 
-        (failure) ->
-          alertService.error( "Failed to update target grade", 4000)
+        , (failure) ->
+          alertService.error("Failed to update target grade", 4000)
       )
-)

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

@@ -5,54 +5,68 @@ <h4 class="panel-title">
     </h4>
   </div><!--/panel-heading-->
   <div class="panel-body">
-    <div class="col-sm-12 col-xl-6">
-      <div class="card card-default card-sm card-target-grade">
-        <div class="card-heading">
-          <h4>Target Grade</h4>
-        </div><!--/target-grade-heading-->
-        <div class="card-body">
-          <select
-            class="form-control input-lg"
-            ng-model="project.targetGrade"
-            ng-options="grade as grades.names[grade] for grade in grades.values"
-            ng-if="$index != 4"
-            ng-change="updateTargetGrade(project.targetGrade)"></select>
-        </div><!--/target-grade-body-->
-      </div><!--/target-grade-card-->
-      <div class="card card-default card-lg card-burndown">
-        <div class="card-heading">
-          <h4>Progress Burndown</h4>
-          <div class="text-muted">
-            The burndown chart shows how much work remains for you to achieve your target grade.
-          </div>
-        </div><!--/burndown-heading-->
-        <div class="card-body">
-          <progress-burndown-chart project="project" unit="project.unit"></progress-burndown-chart>
-        </div><!--/burndown-body-->
-        <div class="card-footer">
-          Aim to keep your
-          <strong style="color: #e01b5d">Complete</strong>
-          line close to or ahead of the
-          <strong class="text-muted">Target</strong>
-          line to keep on track.
-        </div><!--/burndown-footer-->
-      </div><!--/burndown-card-->
-    </div><!--/burndown-column-->
-    <div class="col-sm-12 col-xl-6">
-      <div class="card card-default card-lg card-pie-chart">
-        <div class="card-heading">
-          <h4>Task Statuses</h4>
-          <div class="text-muted">
-            Breakdown summary of each of your task statuses.
-          </div>
-        </div><!--/pie-chart-heading-->
-        <div class="card-body">
-          <student-task-status-pie-chart
-            project="project"
-            update-data="renderTaskStatusPieChart">
-          </student-task-status-pie-chart>
-        </div><!--/pie-chart-body-->
-      </div><!--/pie-chart-card-->
-    </div><!--/pie-chart-column-->
+    <div class="row">
+      <!-- Left Column -->
+      <div class="col-sm-12 col-xl-6">
+        <!-- Target Grade Card -->
+        <div class="card card-default card-sm card-target-grade">
+          <div class="card-heading">
+            <h4>Target Grade</h4>
+          </div><!--/target-grade-heading-->
+          <div class="card-body">
+            <select
+              class="form-control input-lg"
+              ng-model="project.targetGrade"
+              ng-options="grade as grades.names[grade] for grade in grades.values"
+              ng-change="updateTargetGrade(project.targetGrade)">
+            </select>
+          </div><!--/target-grade-body-->
+        </div><!--/target-grade-card-->
+
+        <!-- Progress Burndown Card -->
+        <div class="card card-default card-lg card-burndown">
+          <div class="card-heading">
+            <h4>Progress Burndown</h4>
+            <div class="text-muted">
+              The burndown chart shows how much work remains for you to achieve your target grade.
+            </div>
+          </div><!--/burndown-heading-->
+          <div class="card-body">
+            <progress-burndown-chart project="project" unit="project.unit"></progress-burndown-chart>
+          </div><!--/burndown-body-->
+          <div class="card-footer">
+            Aim to keep your
+            <strong style="color: #e01b5d">Complete</strong>
+            line close to or ahead of the
+            <strong class="text-muted">Target</strong>
+            line to keep on track.
+          </div><!--/burndown-footer-->
+        </div><!--/burndown-card-->
+      </div><!--/left-column-->
+
+      <!-- Right Column -->
+      <div class="col-sm-12 col-xl-6">
+        <!-- Task Statuses Pie Chart Card -->
+        <div class="card card-default card-lg card-pie-chart">
+          <div class="card-heading">
+            <h4>Task Statuses</h4>
+            <div class="text-muted">
+              Breakdown summary of each of your task statuses.
+            </div>
+          </div><!--/pie-chart-heading-->
+          <div class="card-body">
+            <student-task-status-pie-chart
+              project="project"
+              update-data="renderTaskStatusPieChart">
+            </student-task-status-pie-chart>
+          </div><!--/pie-chart-body-->
+        </div><!--/pie-chart-card-->
+
+        <!-- Target Grade Change History Card -->
+        <target-grade-history [project-id]="project.id">
+
+        </target-grade-history>
+    </div><!--/right-column-->
+    </div><!--/row-->
   </div><!--/panel-body-->
 </div>

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

@@ -0,0 +1,59 @@
+<div class="card card-default card-sm card-target-grade-history">
+  <div class="card-heading">
+    <h4>Target Grade Change History</h4>
+  </div>
+  <div class="card-body">
+    <div *ngIf="loading" class="text-center">Loading history...</div>
+    <div *ngIf="error" class="alert alert-danger">
+      {{ error }}
+    </div>
+    <div *ngIf="!loading && !error && !paginatedGradeHistory?.length" class="text-muted">
+      No grade history available
+    </div>
+    <table
+      class="table table-striped"
+      *ngIf="!loading && !error && paginatedGradeHistory?.length > 0"
+    >
+      <thead>
+        <tr>
+          <th>Changed At</th>
+          <th>Previous Grade</th>
+          <th>New Grade</th>
+          <th>Changed By</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let history of paginatedGradeHistory">
+          <td>{{ history.changed_at | date: 'medium' }}</td>
+          <td>{{ history.previous_grade }}</td>
+          <td>{{ history.new_grade }}</td>
+          <td>{{ history.changed_by?.first_name }} {{ history.changed_by?.last_name }}</td>
+        </tr>
+      </tbody>
+    </table>
+    <div *ngIf="!loading && !error && totalPages > 1" class="pagination-controls mt-3">
+      <button
+        class="btn btn-primary btn-sm me-2"
+        (click)="goToPage(currentPage - 1)"
+        [disabled]="currentPage === 1"
+      >
+        Previous
+      </button>
+      <button
+        class="btn btn-secondary btn-sm me-1"
+        *ngFor="let page of [].constructor(totalPages); let i = index"
+        [class.active]="i + 1 === currentPage"
+        (click)="goToPage(i + 1)"
+      >
+        {{ i + 1 }}
+      </button>
+      <button
+        class="btn btn-primary btn-sm ms-2"
+        (click)="goToPage(currentPage + 1)"
+        [disabled]="currentPage === totalPages"
+      >
+        Next
+      </button>
+    </div>
+  </div>
+</div>

src/app/projects/states/dashboard/directives/progress-dashboard/target-grade-history/target-grade-history.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TargetGradeHistoryComponent } from './target-grade-history.component';
+
+describe('TargetGradeHistoryComponent', () => {
+  let component: TargetGradeHistoryComponent;
+  let fixture: ComponentFixture<TargetGradeHistoryComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TargetGradeHistoryComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TargetGradeHistoryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});