mirror/bugsink
1
0
Fork 0
mirror of https://github.com/bugsink/bugsink.git synced 2026-01-06 05:10:15 -06:00
Code Issues Packages Projects Releases Wiki Activity

match main checkbox to individual ones

Browse Source
This commit is contained in:
Klaas van Schelven
2024-02-20 19:23:03 +01:00
parent 7fc2e12143
commit 7b27f0fc9d
2 changed files with 29 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
issues/templates/issues/issue_list.html
View File

@@ -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">

26
static/js/issue_list.js
View File

@@ -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;
}
}