diff --git a/src/app/dashboard/dashboard-list-item.component.html b/src/app/dashboard/dashboard-list-item.component.html new file mode 100644 index 0000000000..f4d34fdccb --- /dev/null +++ b/src/app/dashboard/dashboard-list-item.component.html @@ -0,0 +1,13 @@ +
+
+
+

{{ task.title }}

+

{{ task.subtitle }}

+
+
+
+ {{ task.comments }} +
+ keyboard_arrow_down +
+
diff --git a/src/app/dashboard/dashboard-list-item.component.ts b/src/app/dashboard/dashboard-list-item.component.ts new file mode 100644 index 0000000000..b201cfcad0 --- /dev/null +++ b/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; +} diff --git a/src/app/dashboard/f-cross-dashboard.component.html b/src/app/dashboard/f-cross-dashboard.component.html index dc1a456d7a..978148aa11 100644 --- a/src/app/dashboard/f-cross-dashboard.component.html +++ b/src/app/dashboard/f-cross-dashboard.component.html @@ -1,7 +1,7 @@
-
-
+
+

{{ unit.code }}

{{ unit.code }} filter_list_alt
- +
+
+
+ +
+
+
diff --git a/src/app/dashboard/f-cross-dashboard.component.scss b/src/app/dashboard/f-cross-dashboard.component.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/app/dashboard/f-cross-dashboard.component.ts b/src/app/dashboard/f-cross-dashboard.component.ts index 2f1bfcdb6e..bd4bbc0721 100644 --- a/src/app/dashboard/f-cross-dashboard.component.ts +++ b/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, + }; + }); } } diff --git a/src/app/doubtfire-angular.module.ts b/src/app/doubtfire-angular.module.ts index be5d7eeb31..df568bdbe8 100644 --- a/src/app/doubtfire-angular.module.ts +++ b/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, diff --git a/src/app/projects/states/index/global-state.service.ts b/src/app/projects/states/index/global-state.service.ts index 6d3cdb12d2..1837e240ea 100644 --- a/src/app/projects/states/index/global-state.service.ts +++ b/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);