feat(dashboard): add dashboard list item component

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

@@ -0,0 +1,13 @@
+<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">{{ 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="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>
+    <mat-icon>keyboard_arrow_down</mat-icon>
+  </div>
+</div>

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

@@ -0,0 +1,17 @@
+import {Component, Input} from '@angular/core';
+
+export type DashboardTask = {
+  title: string;
+  subtitle: string;
+  abbreviation: string;
+  color: string;
+  comments: number;
+};
+
+@Component({
+  selector: 'f-dashboard-list-item',
+  templateUrl: './dashboard-list-item.component.html',
+})
+export class DashboardListItemComponent {
+  @Input() task: DashboardTask;
+}

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

@@ -1,7 +1,7 @@
 <div class="panel-full-screen flex flex-row gap-8 px-16 overflow-x-auto">
   <div *ngFor="let unit of units">
-    <div class="flex flex-col w-[34rem] shadow">
-      <div class="flex flex-row items-center gap-4 w-full bg-formatif-blue p-4 rounded-md">
+    <div class="flex flex-col h-full w-[34rem] shadow">
+      <div class="shrink-0 flex flex-row gap-4 w-full bg-formatif-blue p-4 rounded-t-lg">
         <h3 class="m-0 flex-grow text-white truncate min-w-0">{{ unit.code }}</h3>
         <input
           type="text"
@@ -12,8 +12,17 @@ <h3 class="m-0 flex-grow text-white truncate min-w-0">{{ unit.code }}</h3>
         <mat-icon style="color: white">filter_list_alt</mat-icon>
       </div>
 
-      <!-- <div *ngFor="let task of unit.tasks">
-      </div> -->
+      <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}"
+          >
+            <f-dashboard-list-item [task]="task"></f-dashboard-list-item>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>

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

@@ -1,41 +1,57 @@
 import {Component, OnInit} from '@angular/core';
-import {Unit} from 'src/app/api/models/unit';
 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 {Task} from '../api/models/task';
+import {TaskDefinition} from '../api/models/task-definition';
 
-type IUnits = {
-  id: number;
+type DashboardUnit = {
+  projectId: number;
   code: string;
   name: string;
-  // tasks: ITask[];
+  tasks: DashboardTask[];
 };
 
 @Component({
   selector: 'f-cross-dashboard',
   templateUrl: './f-cross-dashboard.component.html',
-  styleUrls: ['./f-cross-dashboard.component.scss'],
 })
 export class CrossDashboardComponent implements OnInit {
   constructor(private globalStateService: GlobalStateService) {}
 
-  units: IUnits[] = [];
+  units: DashboardUnit[] = [];
 
   ngOnInit(): void {
     this.globalStateService.onLoad(() => {
-      this.globalStateService.loadedUnits.values.subscribe((units) => {
-        this.units = this.mapUnits(units);
+      this.globalStateService.currentUserProjects.values.subscribe((projects) => {
+        this.units = this.mapProjects(projects);
       });
     });
   }
 
-  mapUnit(unit: Unit): IUnits {
-    return {
-      id: unit.id,
-      code: unit.code,
-      name: unit.name,
-    };
+  mapProjects(projects: readonly Project[]): DashboardUnit[] {
+    return projects.map((project) => {
+      const unit = project.unit;
+      return {
+        projectId: project.id,
+        code: unit.code,
+        name: unit.name,
+        tasks: this.mapTasks(project.tasks, unit.taskDefinitions),
+      };
+    });
   }
 
-  mapUnits(units: readonly Unit[]) {
-    return units.map((unit) => this.mapUnit(unit));
+  mapTasks(tasks: readonly Task[], taskDefs: readonly TaskDefinition[]): DashboardTask[] {
+    return taskDefs.map((def) => {
+      const task = tasks.find((t) => t.taskDefId == def.id);
+      return {
+        title: def.name,
+        subtitle: `${def.abbreviation} - ${def.targetGradeText} Task`,
+        abbreviation: def.abbreviation,
+        color: TaskStatus.STATUS_COLORS.get(task?.status ?? 'not_started'),
+        comments: task?.numNewComments ?? 0,
+      };
+    });
   }
 }

src/app/doubtfire-angular.module.ts

@@ -44,7 +44,7 @@ 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 {setTheme} from 'ngx-bootstrap/utils';
 
 import {CodeEditorModule} from '@ngstack/code-editor';
@@ -367,6 +367,7 @@ const GANTT_CHART_CONFIG = {
 @NgModule({
   // Components we declare
   declarations: [
+    DashboardListItemComponent,
     AlertComponent,
     AboutDoubtfireModalContent,
     D2lUnitDetailsFormComponent,

src/app/projects/states/index/global-state.service.ts

@@ -292,18 +292,24 @@ export class GlobalStateService implements OnDestroy {
       next: (_unitRoles: UnitRole[]) => {
         // unit roles are now in the cache
 
-        this.projectService.query(undefined, {params: {include_in_active: false}}).subscribe({
-          next: (_projects: Project[]) => {
-            // projects updated in cache
-
-            setTimeout(() => {
-              this.isLoadingSubject.next(false);
-            }, 800);
-          },
-          error: (_response) => {
-            this.alerts.error('Unable to access the units you study.', 6000);
-          },
-        });
+        this.projectService
+          .query(undefined, {
+            params: {
+              include_inactive: false,
+              include_task_definitions: true,
+            },
+          })
+          .subscribe({
+            next: (_projects: Project[]) => {
+              // projects updated in cache
+              setTimeout(() => {
+                this.isLoadingSubject.next(false);
+              }, 800);
+            },
+            error: (_response) => {
+              this.alerts.error('Unable to access the units you study.', 6000);
+            },
+          });
       },
       error: (_response) => {
         this.alerts.error('Unable to access your units.', 6000);