refactor: (WIP) migrate unit task list

src/app/doubtfire-angular.module.ts

@@ -220,6 +220,7 @@ import {
 import { AcceptEulaComponent } from './eula/accept-eula/accept-eula.component';
 import { TiiActionLogComponent } from './admin/tii-action-log/tii-action-log.component';
 import { TiiActionService } from './api/services/tii-action.service';
+import { FUnitTaskListComponent } from './units/states/tasks/viewer/directives/f-unit-task-list/f-unit-task-list.component';
 
 @NgModule({
   // Components we declare
@@ -310,6 +311,7 @@ import { TiiActionService } from './api/services/tii-action.service';
     NewTeachingPeriodDialogComponent,
     FileViewerComponent,
     AlertComponent,
+    FUnitTaskListComponent,
   ],
   // Module Imports
   imports: [

src/app/doubtfire-angularjs.module.ts

@@ -238,6 +238,7 @@ import { TaskDefinitionEditorComponent } from './units/states/edit/directives/un
 import { UnitAnalyticsComponent } from './units/states/analytics/unit-analytics-route.component';
 import { UnitTaskEditorComponent } from './units/states/edit/directives/unit-tasks-editor/unit-task-editor.component';
 import { TeachingPeriodUnitImportService } from './admin/states/teaching-periods/teaching-period-unit-import/teaching-period-unit-import.dialog';
+import { FUnitTaskListComponent } from './units/states/tasks/viewer/directives/f-unit-task-list/f-unit-task-list.component';
 
 export const DoubtfireAngularJSModule = angular.module('doubtfire', [
   'doubtfire.config',
@@ -305,6 +306,7 @@ DoubtfireAngularJSModule.directive(
 );
 DoubtfireAngularJSModule.directive('fUnitAnalytics', downgradeComponent({ component: UnitAnalyticsComponent }));
 DoubtfireAngularJSModule.directive('extensionComment', downgradeComponent({ component: ExtensionCommentComponent }));
+DoubtfireAngularJSModule.directive('fUnitTaskList', downgradeComponent({ component: FUnitTaskListComponent }));
 DoubtfireAngularJSModule.directive('campusList', downgradeComponent({ component: CampusListComponent }));
 DoubtfireAngularJSModule.directive('activityTypeList', downgradeComponent({ component: ActivityTypeListComponent }));
 DoubtfireAngularJSModule.directive('fTaskStatusCard', downgradeComponent({ component: TaskStatusCardComponent }));

src/app/units/states/tasks/viewer/directives/f-unit-task-list/f-unit-task-list.component.html

@@ -0,0 +1,5 @@
+<mat-selection-list #tasks [multiple]="false">
+  <mat-list-option *ngFor="let task of unitTasks" [value]="task" (click)="setSelectedTask(task)">
+    {{ task.name }}
+  </mat-list-option>
+</mat-selection-list>

src/app/units/states/tasks/viewer/directives/f-unit-task-list/f-unit-task-list.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FUnitTaskListComponent } from './f-unit-task-list.component';
+
+describe('FUnitTaskListComponent', () => {
+  let component: FUnitTaskListComponent;
+  let fixture: ComponentFixture<FUnitTaskListComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [FUnitTaskListComponent]
+    });
+    fixture = TestBed.createComponent(FUnitTaskListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/units/states/tasks/viewer/directives/f-unit-task-list/f-unit-task-list.component.ts

@@ -0,0 +1,25 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Unit } from 'src/app/api/models/unit';
+
+@Component({
+  selector: 'f-unit-task-list',
+  templateUrl: './f-unit-task-list.component.html',
+  styleUrls: ['./f-unit-task-list.component.scss'],
+})
+export class FUnitTaskListComponent implements OnInit {
+  @Input() unit: Unit;
+  @Input() unitTasks: Task[];
+  @Input() selectedTaskDef: Task;
+
+  constructor() {}
+
+  ngOnInit(): void {
+    console.log(this.unit);
+    console.log(this.selectedTaskDef);
+  }
+
+  setSelectedTask(task: Task) {
+    console.log(task);
+    this.selectedTaskDef = task;
+  }
+}

src/app/units/states/tasks/viewer/viewer.tpl.html

@@ -2,18 +2,14 @@
   <unit-task-list
     filters="filters"
     unit-tasks="unitTasks"
-    unit='unit'
+    unit="unit"
     selected-task-def="selectedTaskDef"
-    class="col-xs-12 col-md-3"><!--/panel-1-->
+    class="col-xs-12 col-md-3"
+    ><!--/panel-1-->
   </unit-task-list>
-  <task-sheet-view
-    task-def="selectedTaskDef"
-    unit='unit'
-    class="col-xs-12 col-md-6">
-  </task-sheet-view><!--/panel-2-->
-  <task-details-view
-    task-def="selectedTaskDef"
-    unit="unit"
-    class="col-xs-12 col-md-3">
-  </task-details-view><!--/panel-3-->
-</div>
+  <f-unit-task-list [unit]="unit" [unit-tasks]="unitTasks" [selected-task-def]="selectedTaskDef"> </f-unit-task-list>
+  <task-sheet-view task-def="selectedTaskDef" unit="unit" class="col-xs-12 col-md-6"> </task-sheet-view
+  ><!--/panel-2-->
+  <task-details-view task-def="selectedTaskDef" unit="unit" class="col-xs-12 col-md-3"> </task-details-view
+  ><!--/panel-3-->
+</div>