From a150cd15bd8db3e95feebd39018d15b7f969a00b Mon Sep 17 00:00:00 2001
From: Sunil Mohan Adapa <sunil@medhas.org>
Date: Tue, 28 Jun 2022 09:36:59 -0700
Subject: [PATCH] static: js: css: Make multiple select fields work with Django
 4.0

Closes: #2228.

- Django 4.0 changed to using <div> instead of using <ul> and <li> for multiple
choice select fields. Update code for the select-all button to work with the new
HTML structure.

- Add styling to ensure that multiple choice select field appears similar to
previous <ul> and <li> based style.

- This patch assumes that django-bootstrap-form has support for Django 4.0 as
seen in https://github.com/tzangms/django-bootstrap-form/pull/110 .

Tests:

- Radio select seem to have no issues. Checked in networks -> connection type
page.

- Open Backups -> Create backup page and ensure that select all button works
and appears same on testing (Django 3.2) and unstable (Django 4.0).

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
---
 static/themes/default/css/main.css |  4 ++++
 static/themes/default/js/main.js   | 13 +++++++++----
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/static/themes/default/css/main.css b/static/themes/default/css/main.css
index e607ea96c..c939d0363 100644
--- a/static/themes/default/css/main.css
+++ b/static/themes/default/css/main.css
@@ -202,6 +202,10 @@ body {
     list-style-type: none;
 }
 
+.multiple-checkbox > div {
+    padding-left: 40px;
+}
+
 .navbar .fa:not(.fa-bars) {
     margin-right: 0.25rem;
 }
diff --git a/static/themes/default/js/main.js b/static/themes/default/js/main.js
index 65c723f56..412ad493a 100644
--- a/static/themes/default/js/main.js
+++ b/static/themes/default/js/main.js
@@ -126,9 +126,14 @@ window.addEventListener('pageshow', function(event) {
  * Select all option for multiple checkboxes.
  */
 document.addEventListener('DOMContentLoaded', function(event) {
-    let parents = document.querySelectorAll('ul.has-select-all');
+    // Django < 4.0 generates <ul> and <li> where as Django >= 4.0 generates <div>s
+    let parents = document.querySelectorAll('ul.has-select-all,div.has-select-all');
     for (const parent of parents) {
-        let li = document.createElement('li');
+        let childElementType = 'div';
+        if (parent.tagName.toLowerCase() == 'ul')
+            childElementType = 'li';
+
+        let selectAllItem = document.createElement(childElementType);
 
         let label = document.createElement('label');
         label.for = "select_all";
@@ -139,9 +144,9 @@ document.addEventListener('DOMContentLoaded', function(event) {
         checkbox.setAttribute('class', 'select-all');
 
         label.appendChild(checkbox);
-        li.appendChild(label);
+        selectAllItem.appendChild(label);
 
-        parent.insertBefore(li, parent.childNodes[0]);
+        parent.insertBefore(selectAllItem, parent.childNodes[0]);
         setSelectAllValue(parent);
 
         checkbox.addEventListener('change', onSelectAllChanged);