Migrate student task list

src/app/common/entity-form/entity-form.component.ts

@@ -5,6 +5,8 @@ import { EntityService } from 'ngx-entity-service';
 import { Observable, tap } from 'rxjs';
 import { Sort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
+import { AppInjector } from 'src/app/app-injector';
+import { AlertService } from 'src/app/common/services/alert.service';
 
 export type OnSuccessMethod<T> = (object: T, isNew: boolean) => void;
 
@@ -58,6 +60,10 @@ export abstract class EntityFormComponent<T extends Entity> implements AfterView
 
   ngAfterViewInit() {}
 
+  protected get dfAlertService(): AlertService {
+    return AppInjector.get(AlertService);
+  }
+
   /**
    * Cancel edit of current selected value.
    */
@@ -138,14 +144,14 @@ export abstract class EntityFormComponent<T extends Entity> implements AfterView
         response = service.create(data, this.optionsOnRequest('create'));
       } else {
         // Nothing has changed if the selected value, so we want to inform the user
-        alertService.error( `${this.entityName} was not changed`, 6000);
+        this.dfAlertService.error(`${this.entityName} was not changed`, 6000);
         return;
       }
 
       // Handle the response
       response.subscribe({
         next: (result: T) => {
-          alertService.success( `${this.entityName} saved`, 2000);
+          this.dfAlertService.success(`${this.entityName} saved`, 2000);
           // Success is implemented on all inheriting instances and is used
           // to handle the response appropriately for the context of the form
           success(result, this.selected ? false : true);
@@ -163,7 +169,7 @@ export abstract class EntityFormComponent<T extends Entity> implements AfterView
           if (this.selected) {
             this.restoreFromBackup();
           }
-          alertService.error( `${this.entityName} save failed: ${error}`, 6000);
+          this.dfAlertService.error(`${this.entityName} save failed: ${error}`, 6000);
         },
       });
     } else {

src/app/doubtfire-angular.module.ts

@@ -135,6 +135,7 @@ import {environment} from 'src/environments/environment';
 import {PickerModule} from '@ctrl/ngx-emoji-mart';
 import {EmojiModule} from '@ctrl/ngx-emoji-mart/ngx-emoji';
 import {EmojiService} from './common/services/emoji.service';
+import {StudentTaskListComponent} from './projects/states/dashboard/directives/student-task-list/student-task-list.component';
 import {TaskListItemComponent} from './projects/states/dashboard/directives/student-task-list/task-list-item/task-list-item.component';
 import {CreatePortfolioTaskListItemComponent} from './projects/states/dashboard/directives/student-task-list/create-portfolio-task-list-item/create-portfolio-task-list-item.component';
 import {TaskDescriptionCardComponent} from './projects/states/dashboard/directives/task-dashboard/directives/task-description-card/task-description-card.component';
@@ -410,6 +411,7 @@ const GANTT_CHART_CONFIG = {
     UnitAnalyticsComponent,
     StudentTutorialSelectComponent,
     StudentCampusSelectComponent,
+    StudentTaskListComponent,
     TaskListItemComponent,
     CreatePortfolioTaskListItemComponent,
     TaskDescriptionCardComponent,

src/app/doubtfire-angularjs.module.ts

@@ -64,7 +64,6 @@ import 'build/src/app/projects/states/groups/groups.js';
 import 'build/src/app/projects/states/feedback/feedback.js';
 import 'build/src/app/projects/states/states.js';
 import 'build/src/app/projects/states/dashboard/directives/progress-dashboard/progress-dashboard.js';
-import 'build/src/app/projects/states/dashboard/directives/student-task-list/student-task-list.js';
 import 'build/src/app/projects/states/dashboard/directives/directives.js';
 import 'build/src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.js';
 import 'build/src/app/projects/states/dashboard/dashboard.js';
@@ -160,6 +159,7 @@ import {WebcalService} from './api/services/webcal.service';
 import {StudentTutorialSelectComponent} from './units/states/edit/directives/unit-students-editor/student-tutorial-select/student-tutorial-select.component';
 import {StudentCampusSelectComponent} from './units/states/edit/directives/unit-students-editor/student-campus-select/student-campus-select.component';
 import {EmojiService} from './common/services/emoji.service';
+import {StudentTaskListComponent} from './projects/states/dashboard/directives/student-task-list/student-task-list.component';
 import {TaskListItemComponent} from './projects/states/dashboard/directives/student-task-list/task-list-item/task-list-item.component';
 import {CreatePortfolioTaskListItemComponent} from './projects/states/dashboard/directives/student-task-list/create-portfolio-task-list-item/create-portfolio-task-list-item.component';
 import {TaskDescriptionCardComponent} from './projects/states/dashboard/directives/task-dashboard/directives/task-description-card/task-description-card.component';
@@ -466,6 +466,10 @@ DoubtfireAngularJSModule.directive(
   'taskListItem',
   downgradeComponent({component: TaskListItemComponent}),
 );
+DoubtfireAngularJSModule.directive(
+  'studentTaskList',
+  downgradeComponent({component: StudentTaskListComponent}),
+);
 DoubtfireAngularJSModule.directive(
   'createPortfolioTaskListItem',
   downgradeComponent({component: CreatePortfolioTaskListItemComponent}),

src/app/projects/states/dashboard/dashboard.coffee

@@ -31,6 +31,12 @@ angular.module('doubtfire.projects.states.dashboard', [
       setTaskAbbrAsUrlParams(task)
   }
 
+  # Ensure selection events from the Angular (downgraded) task list update the
+  # AngularJS scope, so `ng-if="taskData.selectedTask"` panels render.
+  listeners.push $scope.$on('StudentTaskSelected', (_event, task) ->
+    $scope.taskData.selectedTask = task
+  )
+
   # Sets URL parameters for the task key
   setTaskAbbrAsUrlParams = (task) ->
     taskAbbr = if _.isString(task) then task else task?.definition.abbreviation

src/app/projects/states/dashboard/dashboard.tpl.html

@@ -1,8 +1,8 @@
 <div class="panel-full-screen">
   <student-task-list
-    task-data="taskData"
-    project="project"
-    refresh-tasks="targetGradeUpdated"
+    [taskData]="taskData"
+    [project]="project"
+    [refreshTasks]="targetGradeUpdated"
     class="col-xs-12 col-md-3"
     style="padding: 0 8px 0 8px"
     ><!--/panel-1-->

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

@@ -1,5 +1,4 @@
 angular.module('doubtfire.projects.states.dashboard.directives', [
-  'doubtfire.projects.states.dashboard.directives.student-task-list'
   'doubtfire.projects.states.dashboard.directives.progress-dashboard'
   'doubtfire.projects.states.dashboard.directives.task-dashboard'
 ])

src/app/projects/states/dashboard/directives/student-task-list/student-task-list.component.html

@@ -0,0 +1,42 @@
+<div class="panel panel-primary">
+  <div class="panel-heading">
+    <input
+      type="text"
+      class="form-control"
+      [(ngModel)]="filters.taskName"
+      (ngModelChange)="taskNameChanged()"
+      placeholder="Search tasks..."
+    />
+  </div>
+  <ul class="list-group">
+    <li
+      class="list-group-item list-group-item-task clearfix {{project.portfolioTaskStatusClass()}}"
+      *ngIf="showCreatePortfolio && nearEnd()"
+    >
+      <create-portfolio-task-list-item [project]="project" [setSelectedTask]="setSelectedTask">
+      </create-portfolio-task-list-item>
+    </li>
+
+    <li
+      class="list-group-item list-group-item-task clearfix {{task.statusClass()}}"
+      [id]="task.taskKeyToIdString()"
+      (click)="setSelectedTask(task)"
+      [class.selected]="isSelectedTask(task)"
+      *ngFor="let task of filteredTasks; trackBy: trackByTaskId"
+    >
+      <task-list-item [task]="task" [setSelectedTask]="setSelectedTask" [isSelectedTask]="isSelectedTask">
+      </task-list-item>
+    </li>
+    <!--/task-->
+    <li
+      class="list-group-item list-group-item-task clearfix {{project.portfolioTaskStatusClass()}}"
+      *ngIf="showCreatePortfolio && !nearEnd()"
+    >
+      <create-portfolio-task-list-item [project]="project" [setSelectedTask]="setSelectedTask">
+      </create-portfolio-task-list-item>
+    </li>
+    <li *ngIf="filteredTasks.length == 0 && !showCreatePortfolio" class="list-group-item text-center text-muted">
+      No tasks to display.
+    </li>
+  </ul>
+</div>

src/app/projects/states/dashboard/directives/student-task-list/student-task-list.component.scss

@@ -0,0 +1,41 @@
+/* Task list component styles - inheriting from existing task-list styles */
+
+/* Task item hover effects */
+.list-group-item-task {
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  position: relative;
+}
+
+.list-group-item-task:hover {
+  background-color: #f5f5f5;
+}
+
+.list-group-item-task.selected {
+  background-color: #e6f3ff;
+  border-color: #9ec0ff;
+}
+
+/* Task data hover effects */
+.task-data h4:hover {
+  color: #337ab7;
+}
+
+/* Ensure task item is fully clickable */
+.list-group-item-task .task-data,
+.list-group-item-task .task-badges {
+  position: relative;
+  z-index: 1;
+}
+
+/* Make sure badges don't block clicks */
+.task-badges {
+  pointer-events: none;
+}
+
+/* Ensure entire task item can be clicked */
+.list-group-item-task {
+  min-height: 60px;
+  display: block;
+  width: 100%;
+}