Share planned projects between blocks

angular/src/app/path/block/block.component.ts

@@ -10,6 +10,8 @@ export class BlockComponent implements OnInit {
 	@Input() block!: Block;
 	@Input() projects?: ProjectUser[];
 	@Output() completionStatus: EventEmitter<boolean> = new EventEmitter<boolean>();
+	// mark is null when the project is unplanned
+	@Output() plannedChange = new EventEmitter<{ project: Project; mark: number | null }>();
 	activeProjectIndex: number | null = null;
 	xp: number = 0;
 	completed_projects: ProjectUser[] = [];
@@ -72,6 +74,7 @@ export class BlockComponent implements OnInit {
 				project: project,
 				cursus_ids: [21],
 			} as ProjectUser);
+			this.plannedChange.emit({ project, mark: 100 });
 		} else if (this.isPlanned(project)) {
 			const proj = this.planned_projects.find((projectUser: ProjectUser) => {
 				return projectUser.project.id == project.id;
@@ -80,6 +83,7 @@ export class BlockComponent implements OnInit {
 				this.planned_projects = this.planned_projects.filter((projectUser: ProjectUser) => {
 					return projectUser.project.id != project.id;
 				});
+			this.plannedChange.emit({ project, mark: null });
 		}
 		this.isBlockCompleted();
 		this.show_slider = false;
@@ -134,6 +138,24 @@ export class BlockComponent implements OnInit {
 			return;
 		}
 		const mark = parseInt((target as HTMLInputElement).value);
+		this.slider_mark = mark;
+		this.setMark(project, mark);
+		this.plannedChange.emit({ project, mark });
+	}
+
+	// Mirror a plan made in another block, when this block has the same project.
+	syncPlanned(project: Project, mark: number | null) {
+		const local = this.block.projects.find(p => p.id == project.id);
+		if (!local || this.isCompleted(local)) return;
+		if (mark === null) {
+			this.planned_projects = this.planned_projects.filter(p => p.project.id != local.id);
+			this.calculateXP();
+		} else {
+			this.setMark(local, mark);
+		}
+	}
+
+	private setMark(project: Project, mark: number) {
 		const new_xp = Math.round((project.xp * mark) / 100);
 		const found: ProjectUser | undefined = this.planned_projects.find(
 			(projectUser: ProjectUser) => {
@@ -146,8 +168,6 @@ export class BlockComponent implements OnInit {
 			}
 		);
 
-		this.slider_mark = mark;
-
 		if (!found) {
 			this.planned_projects.push({
 				id: project.id,

angular/src/app/path/path.component.html

@@ -127,7 +127,7 @@ <h3>{{ 'select_grade' | translate }}: {{ selectedInternship.name }}</h3>
 <div class="row d-flex align-items-stretch">
 <div *ngFor="let block of blocks" class="col-md-6 col-lg-4 col-xl-3">
 <div class="m-2 h-100 pb-4">
-<app-block [block]="block" [projects]="projects"></app-block>
+<app-block #blockRef [block]="block" [projects]="projects" (plannedChange)="syncPlanned(blockRef, $event)"></app-block>
 </div>
 </div>
 </div>

angular/src/app/path/path.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { AuthService } from '../services/auth.service';
 import { Router } from '@angular/router';
-import { Block, CursusEvent, ProjectUser } from '../models/me';
+import { Block, CursusEvent, Project, ProjectUser } from '../models/me';
 import { HttpClient } from '@angular/common/http';
 import { TranslateService } from '@ngx-translate/core';
 import { ViewChildren, QueryList } from '@angular/core';
@@ -137,6 +137,12 @@ export class PathComponent implements OnInit {
     this.loadData();
   }
 
+  syncPlanned(origin: BlockComponent, change: { project: Project; mark: number | null }) {
+    this.blockComponents.forEach(b => {
+      if (b !== origin) b.syncPlanned(change.project, change.mark);
+    });
+  }
+
   getLevel() {
     return this.authService.getLevel();
   }