From 7b27f0fc9d6ce3a7c504759fb26572c1352ed0dc Mon Sep 17 00:00:00 2001
From: Klaas van Schelven <klaas@vanschelven.com>
Date: Tue, 20 Feb 2024 19:23:03 +0100
Subject: [PATCH] match main checkbox to individual ones

---
 issues/templates/issues/issue_list.html |  6 +++---
 static/js/issue_list.js                 | 26 +++++++++++++++++++++++++
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/issues/templates/issues/issue_list.html b/issues/templates/issues/issue_list.html
index d1fd052..3c04d91 100644
--- a/issues/templates/issues/issue_list.html
+++ b/issues/templates/issues/issue_list.html
@@ -42,7 +42,7 @@ https://flowbite.com/docs/forms/floating-label/
             <tr class="bg-white border-slate-300 border-l-2 border-r-2">
             <td>
                 <div class="m-1 rounded-full hover:bg-slate-100 cursor-pointer" onclick="toggleContainedCheckbox(this); matchIssueCheckboxesStateToMain(this)">
-                    <input type="checkbox" class="bg-white border-cyan-800 text-cyan-500 focus:ring-cyan-200 m-4 cursor-pointer" onclick="event.stopPropagation(); matchIssueCheckboxesStateToMain(this.parentNode)"/>  {# TODO stopPropagation #}
+                    <input type="checkbox" class="bg-white border-cyan-800 text-cyan-500 focus:ring-cyan-200 m-4 cursor-pointer js-main-checkbox" onclick="event.stopPropagation(); matchIssueCheckboxesStateToMain(this.parentNode)"/>  {# TODO stopPropagation #}
                 </div>
             </td>
             <td class="w-full ml-0 pb-4 pt-4 pr-4">
@@ -66,8 +66,8 @@ https://flowbite.com/docs/forms/floating-label/
             {% for issue in issue_list %}
             <tr class="bg-slate-50 border-slate-300 border-2 ">
             <td>
-                <div class="m-1 rounded-full hover:bg-slate-100 cursor-pointer" onclick="toggleContainedCheckbox(this)">
-                    <input type="checkbox" class="bg-white border-cyan-800 text-cyan-500 focus:ring-cyan-200 m-4 cursor-pointer js-issue-checkbox" onclick="event.stopPropagation(){# prevent the container's handler from undoing the default action #}"/>
+                <div class="m-1 rounded-full hover:bg-slate-100 cursor-pointer" onclick="toggleContainedCheckbox(this); matchMainCheckboxStateToIssueCheckboxes()">
+                    <input type="checkbox" class="bg-white border-cyan-800 text-cyan-500 focus:ring-cyan-200 m-4 cursor-pointer js-issue-checkbox" onclick="event.stopPropagation(); {# prevent the container's handler from undoing the default action #} matchMainCheckboxStateToIssueCheckboxes()"/>
                 </div>
             </td>
             <td class="w-full ml-0 pb-4 pt-4 pr-4">
diff --git a/static/js/issue_list.js b/static/js/issue_list.js
index 7e8d1be..d9b99ae 100644
--- a/static/js/issue_list.js
+++ b/static/js/issue_list.js
@@ -12,3 +12,29 @@ function matchIssueCheckboxesStateToMain(elementContainingMainCheckbox) {
         checkboxes[i].checked = mainCheckbox.checked;
     }
 }
+
+function matchMainCheckboxStateToIssueCheckboxes() {
+    const checkboxes = document.querySelectorAll(".js-issue-checkbox");
+    let allChecked = true;
+    let allUnchecked = true;
+
+    for (let i = 0; i < checkboxes.length; i++) {
+        if (checkboxes[i].checked) {
+            allUnchecked = false;
+        }
+        if (!checkboxes[i].checked) {
+            allChecked = false;
+        }
+        if (!allChecked && !allUnchecked) {
+            break;
+        }
+    }
+
+    const mainCheckbox = document.querySelector(".js-main-checkbox");
+    if (allChecked) {
+        mainCheckbox.checked = true;
+    }
+    if (allUnchecked) {
+        mainCheckbox.checked = false;
+    }
+}