Expanded list items

src/app/dashboard/f-cross-dashboard.component.html

@@ -14,11 +14,7 @@ <h3 class="m-0 flex-grow text-white truncate min-w-0">{{ unit.code }}</h3>
 
       <div class="flex flex-col overflow-y-auto">
         <div *ngFor="let task of unit.tasks">
-          <div
-            class="border-b-[1px] border-gray-300"
-            uiSref="projects/dashboard"
-            [uiParams]="{projectId: unit.projectId, taskAbbr: task.abbreviation}"
-          >
+          <div class="border-b-[1px] border-gray-300">
             <f-dashboard-list-item [task]="task"></f-dashboard-list-item>
           </div>
         </div>

src/app/dashboard/f-cross-dashboard.component.ts

@@ -2,7 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {GlobalStateService} from 'src/app/projects/states/index/global-state.service';
 import {Project} from '../api/models/project';
 import {TaskStatus} from '../api/models/task-status';
-import {DashboardTask} from './dashboard-list-item.component';
+import {DashboardTask} from './list-item/dashboard-list-item.component';
 import {Task} from '../api/models/task';
 import {TaskDefinition} from '../api/models/task-definition';
 
@@ -18,7 +18,7 @@ type DashboardUnit = {
   templateUrl: './f-cross-dashboard.component.html',
 })
 export class CrossDashboardComponent implements OnInit {
-  constructor(private globalStateService: GlobalStateService) {}
+  constructor(private globalStateService: GlobalStateService,) {}
 
   units: DashboardUnit[] = [];
 
@@ -37,12 +37,12 @@ export class CrossDashboardComponent implements OnInit {
         projectId: project.id,
         code: unit.code,
         name: unit.name,
-        tasks: this.mapTasks(project.tasks, unit.taskDefinitions),
+        tasks: this.mapTasks(project.tasks, unit.taskDefinitions, project.id, unit.code),
       };
     });
   }
 
-  mapTasks(tasks: readonly Task[], taskDefs: readonly TaskDefinition[]): DashboardTask[] {
+  mapTasks(tasks: readonly Task[], taskDefs: readonly TaskDefinition[], projectId: number, unitCode: string): DashboardTask[] {
     return taskDefs.map((def) => {
       const task = tasks.find((t) => t.taskDefId == def.id);
       return {
@@ -51,6 +51,12 @@ export class CrossDashboardComponent implements OnInit {
         abbreviation: def.abbreviation,
         color: TaskStatus.STATUS_COLORS.get(task?.status ?? 'not_started'),
         comments: task?.numNewComments ?? 0,
+        projectId: projectId,
+        statusLabel: TaskStatus.STATUS_LABELS.get(task?.status ?? 'not_started'),
+        description: def.description,
+        unitCode: unitCode,
+        dueDate: def.targetDate,
+        taskDef: def,
       };
     });
   }

src/app/dashboard/list-item/dashboard-list-item.component.html

@@ -0,0 +1,28 @@
+<div class="flex flex-row">
+  <div class="w-4 mr-6 shrink-0" [style.background-color]="task.color"></div>
+  <div class="py-4 flex flex-col flex-grow shrink min-w-0">
+    <h4
+      class="mb-1 truncate flex-grow min-w-0"
+      uiSref="projects/dashboard"
+      [uiParams]="{projectId: task.projectId, taskAbbr: task.abbreviation}"
+    >
+      {{ task.title }}
+    </h4>
+    <p class="mb-0">{{ task.subtitle }}</p>
+  </div>
+  <div class="flex flex-row ml-2 mr-6 items-center justify-end gap-4">
+    <div *ngIf="!isExpanded">
+      <div *ngIf="task.comments > 0" class="flex h-8 w-8 bg-red-500 rounded-full">
+        <span class="text-white text-xl font-medium m-auto">{{ task.comments }}</span>
+      </div>
+    </div>
+    <mat-icon (click)="isExpanded = !isExpanded" class="cursor-pointer">
+      {{ isExpanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}
+    </mat-icon>
+  </div>
+</div>
+<div class="flex flex-row">
+  <div *ngIf="isExpanded">
+    <f-expanded-list-item [task]="task"></f-expanded-list-item>
+  </div>
+</div>

src/app/dashboard/dashboard-list-item.component.ts → src/app/dashboard/list-item/dashboard-list-item.component.ts

@@ -1,11 +1,18 @@
 import {Component, Input} from '@angular/core';
+import {TaskDefinition} from '../../api/models/task-definition';
 
 export type DashboardTask = {
   title: string;
   subtitle: string;
+  statusLabel: string;
   abbreviation: string;
   color: string;
   comments: number;
+  projectId: number;
+  description: string;
+  taskDef: TaskDefinition;
+  unitCode: string;
+  dueDate: Date;
 };
 
 @Component({
@@ -14,4 +21,6 @@ export type DashboardTask = {
 })
 export class DashboardListItemComponent {
   @Input() task: DashboardTask;
+
+  isExpanded = false;
 }

src/app/dashboard/list-item/expanded-list-item/expanded-list-item.component.html

@@ -0,0 +1,44 @@
+<div class="flex flex-row">
+  <div class="w-4 mr-6 shrink-0" [style.background-color]="task.color"></div>
+  <div class="pb-4 flex flex-col flex-grow shrink min-w-0">
+    <p class="font-bold">{{ task.statusLabel }}</p>
+    <p class="pt-2">{{ task.description }}</p>
+    <p style="font-size: 13px">
+      Complete by
+      <span class="font-bold">{{ task.dueDate | date: 'EEEE d MMMM' }}</span>
+    </p>
+    <div class="flex flex-row gap-2 pt-2">
+      <button
+        mat-stroked-button
+        [hidden]="!task?.taskDef?.hasTaskSheet"
+        (click)="downloadTaskSheet()"
+        class="truncate"
+      >
+        <mat-icon style="width: 15px; height: 15px; font-size: 15px" aria-label="Download">
+          description
+        </mat-icon>
+        Task
+      </button>
+      <button
+        mat-stroked-button
+        [hidden]="!task?.taskDef?.hasTaskResources"
+        (click)="downloadResources()"
+        class="truncate"
+      >
+        <mat-icon style="width: 15px; height: 15px; font-size: 15px">download</mat-icon>
+        Resources
+      </button>
+      <button
+        mat-stroked-button
+        uiSref="projects/dashboard"
+        [uiParams]="{projectId: task.projectId, taskAbbr: task.abbreviation}"
+        [matBadge]="task.comments > 0 ? task.comments : null"
+        matBadgeColor="warn"
+        matBadgePosition="after"
+      >
+        <mat-icon style="width: 15px; height: 15px; font-size: 15px">open_in_new</mat-icon>
+        More
+      </button>
+    </div>
+  </div>
+</div>

src/app/dashboard/list-item/expanded-list-item/expanded-list-item.component.scss

@@ -0,0 +1,3 @@
+.mat-badge-warn {
+  --mat-badge-text-color: white;
+}

src/app/dashboard/list-item/expanded-list-item/expanded-list-item.component.ts

@@ -0,0 +1,28 @@
+import {Component, Input} from '@angular/core';
+import {DashboardTask} from '../dashboard-list-item.component';
+import {FileDownloaderService} from 'src/app/common/file-downloader/file-downloader.service';
+
+@Component({
+  selector: 'f-expanded-list-item',
+  templateUrl: './expanded-list-item.component.html',
+  styleUrls: ['./expanded-list-item.component.scss'],
+})
+export class DashboardExpandedListItemComponent {
+  @Input() task: DashboardTask;
+
+  constructor(private fileDownloader: FileDownloaderService) {}
+
+  downloadTaskSheet() {
+    this.fileDownloader.downloadFile(
+      this.task.taskDef.getTaskPDFUrl(true),
+      `${this.task.unitCode}-${this.task.abbreviation}-TaskSheet.pdf`
+    );
+  }
+
+  downloadResources() {
+    this.fileDownloader.downloadFile(
+      this.task.taskDef.getTaskResourcesUrl(true),
+      `${this.task.unitCode}-${this.task.abbreviation}-TaskResources.zip`
+    );
+  }
+}

src/app/doubtfire-angular.module.ts

@@ -44,7 +44,8 @@ import {MatDialogModule as MatDialogModuleNew} from '@angular/material/dialog';
 import {AlertService} from 'src/app/common/services/alert.service';
 import {AlertComponent} from 'src/app/common/services/alert.service';
 import {MatSidenavModule} from '@angular/material/sidenav';
-import { DashboardListItemComponent } from './dashboard/dashboard-list-item.component';
+import {DashboardListItemComponent} from './dashboard/list-item/dashboard-list-item.component';
+import {DashboardExpandedListItemComponent} from './dashboard/list-item/expanded-list-item/expanded-list-item.component';
 import {setTheme} from 'ngx-bootstrap/utils';
 
 import {CodeEditorModule} from '@ngstack/code-editor';
@@ -368,6 +369,7 @@ const GANTT_CHART_CONFIG = {
   // Components we declare
   declarations: [
     DashboardListItemComponent,
+    DashboardExpandedListItemComponent,
     AlertComponent,
     AboutDoubtfireModalContent,
     D2lUnitDetailsFormComponent,