mass-graduation usability improvements

* Only allow one graduation per student
* Check if all mandatory graduations are made
* Disable the submit button to prevent double submits

1 files changed, 59 insertions, 32 deletions

diff --git a/src/mass-graduation.js b/src/mass-graduation.js
index 22a5940..6d53e55 100644
--- a/src/mass-graduation.js
+++ b/src/mass-graduation.js
@@ -5,14 +5,19 @@ import { getName } from "./utils-ENV.js";
 
 let name;
 
-function toggle(btn) {
+function toggle(btn, others) {
 	if (btn.innerHTML === "X") {
 		btn.innerHTML = "o";
 	} else {
 		btn.innerHTML = "X";
+		for (const o of others) {
+			o.innerHTML = "o";
+		}
 	}
 
-	document.getElementById("submit-mass-graduation").style.display = "inline";
+	const submitBtn = document.getElementById("submit-mass-graduation");
+	submitBtn.style.display = "inline";
+	submitBtn.disabled = false;
 	document.getElementById("submit-mass-graduation-state").innerHTML = "";
 }
 
@@ -93,14 +98,24 @@ async function loadGroup() {
 		n.innerHTML = `${student.name}`;
 		li.appendChild(n);
 
+		const btns = [];
 		for (const col of ["green", "orange", "red"]) {
 			const b = document.createElement("button");
+			btns.push(b);
 			b.classList.add(`group-member-${col}`);
 			b.innerHTML = "o";
-			b.addEventListener("click", () => toggle(b));
 			li.appendChild(b);
 		}
 
+		for (const b of btns) {
+			b.addEventListener("click", () =>
+				toggle(
+					b,
+					btns.filter((o) => o !== b),
+				),
+			);
+		}
+
 		if (chosen.includes(student.graduation)) {
 			li.classList.add("group-mandatory-member");
 			mul.appendChild(li);
@@ -111,42 +126,52 @@ async function loadGroup() {
 	}
 }
 
+function graduationChangeForGroupMember(li) {
+	const student = li.student;
+	const mandatory = li.classList.contains("group-mandatory-member");
+	let change = null;
+	if (li.querySelector(".group-member-green").innerHTML === "X") {
+		change = GraduationChange.newGreenPointChange(mandatory, "", name);
+	} else if (li.querySelector(".group-member-orange").innerHTML === "X") {
+		change = GraduationChange.newOrangePointChange(mandatory, "", name);
+	} else if (li.querySelector(".group-member-red").innerHTML === "X") {
+		change = GraduationChange.newRedPointChange(mandatory, "", name);
+	}
+
+	return [change, student];
+}
+
 function submitMassGraduation() {
 	const state = document.getElementById("submit-mass-graduation-state");
 	state.innerHTML = "";
-	state.classList.add("submit-mass-graduation-inprogress");
-	state.style.display = "unset";
+	document.getElementById("submit-mass-graduation").disabled = true;
 
 	// TODO(muhq): await graduation promises
 
+	const mandatoryChanges = [];
+	for (const li of document.querySelectorAll("li.group-mandatory-member")) {
+		const [ch, s] = graduationChangeForGroupMember(li);
+		if (ch !== null) mandatoryChanges.push([ch, s]);
+	}
+
+	if (mandatoryChanges.length !== 5) {
+		// not all mandatory graduations are selected
+		state.style.display = "inline";
+		state.innerHTML = "Bitte bewerte alle als erforderlich angezeigten Schülys.";
+		return;
+	}
+
+	state.classList.add("submit-mass-graduation-inprogress");
+	state.style.display = "unset";
+
 	const promises = [];
-	for (const li of document.querySelectorAll("li.group-member, li.group-mandatory-member")) {
-		const student = li.student;
-		const mandatory = li.classList.contains("group-mandatory-member");
-		if (li.querySelector(".group-member-green").innerHTML === "X") {
-			promises.push(
-				submitGraduationChange(
-					GraduationChange.newGreenPointChange(mandatory, "", name),
-					student.graduation,
-				),
-			);
-		}
-		if (li.querySelector(".group-member-orange").innerHTML === "X") {
-			promises.push(
-				submitGraduationChange(
-					GraduationChange.newOrangePointChange(mandatory, "", name),
-					student.graduation,
-				),
-			);
-		}
-		if (li.querySelector(".group-member-red").innerHTML === "X") {
-			promises.push(
-				submitGraduationChange(
-					GraduationChange.newRedPointChange(mandatory, "", name),
-					student.graduation,
-				),
-			);
-		}
+	for (const [ch, s] of mandatoryChanges) {
+		promises.push(submitGraduationChange(ch, s.graduation));
+	}
+
+	for (const li of document.querySelectorAll("li.group-member")) {
+		const [ch, s] = graduationChangeForGroupMember(li);
+		if (ch !== null) promises.push(submitGraduationChange(ch, s.graduation));
 	}
 
 	Promise.all(promises)
@@ -159,6 +184,8 @@ function submitMassGraduation() {
 			state.style.display = "inline";
 			state.innerHTML = "X";
 			state.style.color = "red";
+			// re-enable submit button
+			document.getElementById("submit-mass-graduation").disabled = false;
 			console.log(error);
 		})
 		.finally(() => {