feat: small change to task view

src/app/common/filters/task-definition-name.pipe.ts

@@ -0,0 +1,19 @@
+
+import { Pipe, PipeTransform } from '@angular/core';
+import { Task, TaskDefinition } from '../../api/models/doubtfire-model';
+
+@Pipe({
+  name: 'taskDefinitionName',
+})
+export class TaskDefinitionNamePipe implements PipeTransform {
+  transform(taskDefinitions: TaskDefinition[], searchName: string): TaskDefinition[] {
+    searchName = searchName.toLowerCase();
+    return taskDefinitions.filter( // use lodash filter?
+      (td) => {
+        return td.name.toLowerCase().includes(searchName)  ||
+          td.abbreviation.toLowerCase().includes(searchName)  ||
+          td.targetGradeText.toLowerCase().includes(searchName)
+      }
+    )
+  }
+}

src/app/doubtfire-angular.module.ts

@@ -223,6 +223,11 @@ 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 { FUnitsComponent } from './admin/states/f-units/f-units.component';
+import { FUnitTaskListComponent } from './units/states/tasks/viewer/directives/f-unit-task-list/f-unit-task-list.component';
+import { FTaskDetailsViewComponent } from './units/states/tasks/viewer/directives/f-task-details-view/f-task-details-view.component';
+import { FTaskSheetViewComponent } from './units/states/tasks/viewer/directives/f-task-sheet-view/f-task-sheet-view.component';
+import { TasksViewerComponent } from './units/states/tasks/tasks-viewer/tasks-viewer.component';
+
 @NgModule({
   // Components we declare
   declarations: [
@@ -312,6 +317,10 @@ import { FUnitsComponent } from './admin/states/f-units/f-units.component';
     NewTeachingPeriodDialogComponent,
     FileViewerComponent,
     AlertComponent,
+    FUnitTaskListComponent,
+    FTaskDetailsViewComponent,
+    FTaskSheetViewComponent,
+    TasksViewerComponent,
     FUsersComponent,
     FUnitsComponent,
   ],

src/app/doubtfire-angularjs.module.ts

@@ -111,8 +111,8 @@ import 'build/src/app/units/units.js';
 import 'build/src/app/units/states/tasks/inbox/inbox.js';
 import 'build/src/app/units/states/tasks/tasks.js';
 import 'build/src/app/units/states/tasks/viewer/directives/task-sheet-view/task-sheet-view.js';
-import 'build/src/app/units/states/tasks/viewer/directives/task-details-view/task-details-view.js';
-import 'build/src/app/units/states/tasks/viewer/directives/unit-task-list/unit-task-list.js';
+// import 'build/src/app/units/states/tasks/viewer/directives/task-details-view/task-details-view.js';
+// import 'build/src/app/units/states/tasks/viewer/directives/unit-task-list/unit-task-list.js';
 import 'build/src/app/units/states/tasks/viewer/directives/directives.js';
 import 'build/src/app/units/states/tasks/viewer/viewer.js';
 import 'build/src/app/units/states/tasks/definition/definition.js';
@@ -239,6 +239,10 @@ import { UnitAnalyticsComponent } from './units/states/analytics/unit-analytics-
 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 { FUsersComponent } from './admin/states/f-users/f-users.component';
+import { FUnitTaskListComponent } from './units/states/tasks/viewer/directives/f-unit-task-list/f-unit-task-list.component';
+import { FTaskDetailsViewComponent } from './units/states/tasks/viewer/directives/f-task-details-view/f-task-details-view.component';
+import { FTaskSheetViewComponent } from './units/states/tasks/viewer/directives/f-task-sheet-view/f-task-sheet-view.component';
+import { TasksViewerComponent } from './units/states/tasks/tasks-viewer/tasks-viewer.component';
 
 import { FUnitsComponent } from './admin/states/f-units/f-units.component';
 export const DoubtfireAngularJSModule = angular.module('doubtfire', [
@@ -307,9 +311,13 @@ DoubtfireAngularJSModule.directive(
 );
 DoubtfireAngularJSModule.directive('fUnitAnalytics', downgradeComponent({ component: UnitAnalyticsComponent }));
 DoubtfireAngularJSModule.directive('extensionComment', downgradeComponent({ component: ExtensionCommentComponent }));
+DoubtfireAngularJSModule.directive('fUnitTaskList', downgradeComponent({ component: FUnitTaskListComponent }));
+DoubtfireAngularJSModule.directive('fTaskDetailsView', downgradeComponent({ component: FTaskDetailsViewComponent }));
+DoubtfireAngularJSModule.directive('fTaskSheetView', downgradeComponent({ component: FTaskSheetViewComponent }));
 DoubtfireAngularJSModule.directive('campusList', downgradeComponent({ component: CampusListComponent }));
 DoubtfireAngularJSModule.directive('activityTypeList', downgradeComponent({ component: ActivityTypeListComponent }));
 DoubtfireAngularJSModule.directive('fTaskStatusCard', downgradeComponent({ component: TaskStatusCardComponent }));
+DoubtfireAngularJSModule.directive('fTasksViewer', downgradeComponent({ component: TasksViewerComponent }));
 DoubtfireAngularJSModule.directive('fInbox', downgradeComponent({ component: InboxComponent }));
 DoubtfireAngularJSModule.directive('fTaskDueCard', downgradeComponent({ component: TaskDueCardComponent }));
 DoubtfireAngularJSModule.directive('fUsers', downgradeComponent({ component: FUsersComponent }));

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

@@ -53,6 +53,8 @@ export class TaskDashboardComponent implements OnInit, OnChanges {
       labels: this.taskService.statusLabels,
       class: this.taskService.statusClass,
     };
+
+    console.log("task dashboard url: ", this.pdfUrl)
   }
 
   ngOnChanges(changes: SimpleChanges) {

src/app/sessions/transition-hooks.service.ts

@@ -87,6 +87,7 @@ export class TransitionHooksService {
 
   // function to return true if navigating to inbox or task definition
   private isInboxState(toState: string): boolean {
-    return toState.startsWith('units/tasks/inbox') || toState.endsWith('tasks/definition');
+    // return toState.startsWith('units/tasks/inbox') || toState.endsWith('tasks/definition');
+    return toState.startsWith('units/tasks') || toState.endsWith('tasks/definition');
   }
 }

src/app/units/states/tasks/tasks-viewer.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { TasksViewerService } from './tasks-viewer.service';
+
+describe('TasksViewerService', () => {
+  let service: TasksViewerService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(TasksViewerService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/units/states/tasks/tasks-viewer.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+import { TaskDefinition } from 'src/app/api/models/task-definition';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TasksViewerService {
+  selectedTaskDef = new Subject<TaskDefinition>();
+  taskSelected = new Subject<boolean>();
+
+  public setSelectedTaskDef(taskDef: TaskDefinition) {
+    this.selectedTaskDef.next(taskDef);
+    this.taskSelected.next(true);
+  }
+
+  constructor() { }
+}

src/app/units/states/tasks/tasks-viewer/tasks-viewer.component.html

@@ -0,0 +1,42 @@
+<!-- Wide Window Display -->
+<div fxLayout="column" fxFill fxHide fxShow.gt-sm>
+  <div fxLayout="row" fxLayoutAlign="center stretch" fxFill>
+    <!-- Panel 1 -->
+    <div #tasklistpanel id="tasklistpanel" class="vertical-panel">
+      <f-unit-task-list [unitTasks]="taskDefs"></f-unit-task-list>
+    </div>
+
+    <div class="vertical-spacer"></div>
+
+    <!-- Panel 2 -->
+    <div fxFlex class="vertical-panel">
+      <f-task-sheet-view [taskDef]="selectedTaskDef"> </f-task-sheet-view>
+    </div>
+
+    <div class="vertical-spacer"></div>
+
+    <!-- Panel 3 -->
+    <div #taskdetailspanel class="vertical-panel" id="taskdetailspanel">
+      <f-task-details-view [taskDef]="selectedTaskDef" [unit]="unit"></f-task-details-view>
+    </div>
+  </div>
+</div>
+
+<!-- Narrow Window / Mobile Display -->
+<div #mobile fxLayout="row" fxFill fxHide fxShow.lt-md>
+  <div class="vertical-panel mobile" [hidden]="taskSelected">
+    <f-unit-task-list [unitTasks]="taskDefs"></f-unit-task-list>
+  </div>
+
+  <div [hidden]="!taskSelected" fxLayout="column" fxFill fxLayoutAlign="space-between stretch">
+    <div class="flex items-center">
+      <button mat-icon-button aria-label="Back to task list" matTooltip="Back to list" (click)="taskSelected = false">
+        <mat-icon>arrow_back_ios_new</mat-icon>
+      </button>
+    </div>
+
+    <div fxFlex class="vertical-panel mobile">
+      <f-task-details-view [taskDef]="selectedTaskDef" [unit]="unit"></f-task-details-view>
+    </div>
+  </div>
+</div>

src/app/units/states/tasks/tasks-viewer/tasks-viewer.component.scss

@@ -0,0 +1,20 @@
+.vertical-panel {
+  border-radius: 10px;
+  background-color: white;
+  padding: 8px;
+  min-width: 60px;
+  width: 350px;
+  height: 100%;
+
+  &.mobile {
+      max-width: 100%;
+      width: 100%;
+      padding: 0px;
+  }
+}
+
+.vertical-spacer {
+  background-color: #f5f5f5;
+  z-index: 200;
+  width: 10px
+}

src/app/units/states/tasks/tasks-viewer/tasks-viewer.component.spec.ts

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

src/app/units/states/tasks/tasks-viewer/tasks-viewer.component.ts

@@ -0,0 +1,28 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { TaskDefinition } from 'src/app/api/models/task-definition';
+import { TasksViewerService } from '../tasks-viewer.service';
+import { Unit } from 'src/app/api/models/unit';
+
+@Component({
+  selector: 'f-tasks-viewer',
+  templateUrl: './tasks-viewer.component.html',
+  styleUrls: ['./tasks-viewer.component.scss'],
+})
+export class TasksViewerComponent implements OnInit {
+  @Input() taskDefs: TaskDefinition[];
+  @Input() unit: Unit;
+  selectedTaskDef: TaskDefinition;
+  taskSelected: boolean;
+
+  constructor(private taskViewerService: TasksViewerService) {}
+
+  ngOnInit() {
+    this.taskViewerService.selectedTaskDef.subscribe((taskDef) => {
+      this.selectedTaskDef = taskDef;
+    });
+
+    this.taskViewerService.taskSelected.subscribe((taskSelected) => {
+      this.taskSelected = taskSelected;
+    });
+  }
+}

src/app/units/states/tasks/viewer/directives/directives.coffee

@@ -1,5 +1,5 @@
 angular.module('doubtfire.units.states.tasks.viewer.directives', [
-  'doubtfire.units.states.tasks.viewer.directives.unit-task-list'
+  # 'doubtfire.units.states.tasks.viewer.directives.unit-task-list'
   'doubtfire.units.states.tasks.viewer.directives.task-sheet-view'
-  'doubtfire.units.states.tasks.viewer.directives.task-details-view'
+  # 'doubtfire.units.states.tasks.viewer.directives.task-details-view'
 ])

src/app/units/states/tasks/viewer/directives/f-task-details-view/f-task-details-view.component.html

@@ -0,0 +1,9 @@
+<div class="w-full h-full overflow-auto">
+  <div [hidden]="!taskDef">
+    <f-task-description-card [taskDef]="taskDef" [unit]="unit" [task]=""></f-task-description-card>
+  </div>
+
+  <div [hidden]="taskDef" fxFlexFill fxLayout="column" fxLayoutAlign="center center">
+    <mat-icon>subtitles_off</mat-icon>
+  </div>
+</div>

src/app/units/states/tasks/viewer/directives/f-task-details-view/f-task-details-view.component.scss

@@ -0,0 +1,11 @@
+@use '@angular/material' as mat;
+
+@import '../../../../../../../theme.scss';
+
+$my-palette: mat.define-palette($md-formatif);
+
+.title {
+  font-size: 16px;
+  font-weight: bold;
+  padding-bottom: 15px;
+}

src/app/units/states/tasks/viewer/directives/f-task-details-view/f-task-details-view.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { TaskDefinition } from 'src/app/api/models/task-definition';
+import { Unit } from 'src/app/api/models/unit';
+import { TasksViewerService } from '../../../tasks-viewer.service';
+
+@Component({
+  selector: 'f-task-details-view',
+  templateUrl: './f-task-details-view.component.html',
+  styleUrls: ['./f-task-details-view.component.scss'],
+})
+export class FTaskDetailsViewComponent implements OnInit {
+  @Input() taskDef: TaskDefinition;
+  @Input() unit: Unit;
+
+  constructor(private tasksViewerService: TasksViewerService) {}
+
+  ngOnInit() {
+    this.tasksViewerService.selectedTaskDef.subscribe((taskDef) => {
+      this.taskDef = taskDef;
+    });
+  }
+}

src/app/units/states/tasks/viewer/directives/f-task-sheet-view/f-task-sheet-view.component.html

@@ -0,0 +1,19 @@
+<div class="w-full h-full overflow-auto">
+  <ng-container [ngSwitch]="taskDef">
+    <ng-template [ngSwitchCase]="taskDef">
+      <ng-container *ngIf="taskDef; then pdfViewer; else noPdfUrl"></ng-container>
+    </ng-template>
+  </ng-container>
+
+  <!-- The PDF Viewer -->
+  <ng-template #pdfViewer>
+    <f-pdf-viewer [pdfUrl]="taskDef.getTaskPDFUrl()"></f-pdf-viewer>
+  </ng-template>
+
+  <!-- Render if no PDF URL is available for the current view -->
+  <ng-template #noPdfUrl>
+    <div fxFlexFill fxLayout="column" fxLayoutAlign="center center">
+      <mat-icon>subtitles_off</mat-icon>
+    </div>
+  </ng-template>
+</div>

src/app/units/states/tasks/viewer/directives/f-task-sheet-view/f-task-sheet-view.component.ts

@@ -0,0 +1,20 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { TaskDefinition } from 'src/app/api/models/task-definition';
+import { TasksViewerService } from '../../../tasks-viewer.service';
+
+@Component({
+  selector: 'f-task-sheet-view',
+  templateUrl: './f-task-sheet-view.component.html',
+  styleUrls: ['./f-task-sheet-view.component.scss'],
+})
+export class FTaskSheetViewComponent implements OnInit {
+  @Input() taskDef: TaskDefinition;
+
+  constructor(private taskViewerService: TasksViewerService) {}
+
+  ngOnInit(): void {
+    this.taskViewerService.selectedTaskDef.subscribe((taskDef) => {
+      this.taskDef = taskDef;
+    });
+  }
+}

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

@@ -0,0 +1,51 @@
+<div class="task-list" div fxLayout="column" fxLayoutAlign="none">
+  <!-- Search Box -->
+  <div class="omnisearch rounded-t-2xl md:rounded-2xl">
+    <div class="flex items-center">
+      <button mat-icon-button aria-label="Search Icon" disabled class="flex-none flex items-center">
+        <mat-icon class="flex items-center" disabled>search</mat-icon>
+      </button>
+      <div class="grow">
+        <input
+          class="search"
+          autocomplete="off"
+          spellcheck="false"
+          type="text"
+          placeholder="Search Tasks"
+          [(ngModel)]="taskSearch"
+          (ngModelChange)="applyFilters()"
+        />
+      </div>
+    </div>
+  </div>
+
+  <!-- Scrollable Unit Task List -->
+  <div class="tasks-viewport scrollable" itemSize="60">
+    <mat-selection-list #tasks [multiple]="false">
+      <div class="text-center text-muted" *ngIf="filteredTasks.length === 0">No tasks to display</div>
+
+      <mat-list-item
+        class="clearfix"
+        *ngFor="let task of filteredTasks;"
+        [value]="task"
+        style="padding: 0; height: 60px"
+        [disableRipple]="true"
+      >
+        <div
+          class="w-full item-content"
+          *ngIf="task"
+          [ngClass]="{
+            selected: isSelectedTask(task)
+          }"
+        >
+          <div (click)="setSelectedTask(task)" class="task-entry flex items-center" [ngClass]="{ hover: task.hover }">
+            <div class="task-list-data" fxFlex>
+              <h4 class="task-title line-clamp-1">{{ task.name }}</h4>
+              <div class="task-details">{{ task.abbreviation }} - {{ gradeNames[task.targetGrade] }} Task</div>
+            </div>
+          </div>
+        </div>
+      </mat-list-item>
+    </mat-selection-list>
+  </div>
+</div>