From d15d54283e92b2d578429bef19dc45d1b8db0a67 Mon Sep 17 00:00:00 2001
From: Jean-Marie Favreau <j-marie.favreau@uca.fr>
Date: Thu, 9 Nov 2023 11:50:28 +0100
Subject: [PATCH] =?UTF-8?q?les=20filtres=20sont=20maintenant=20adapt=C3=A9?=
 =?UTF-8?q?s=20suivant=20la=20s=C3=A9lection?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/agenda_culturel/static/js/filters.js      | 91 +++++++++++++++++++
 src/agenda_culturel/static/style.scss         | 13 ++-
 .../forms/category-checkbox.html              | 10 +-
 .../forms/checkbox-option.html                |  2 +-
 .../agenda_culturel/forms/tag-checkbox.html   | 10 +-
 5 files changed, 113 insertions(+), 13 deletions(-)
 create mode 100644 src/agenda_culturel/static/js/filters.js

diff --git a/src/agenda_culturel/static/js/filters.js b/src/agenda_culturel/static/js/filters.js
new file mode 100644
index 0000000..fa8ddda
--- /dev/null
+++ b/src/agenda_culturel/static/js/filters.js
@@ -0,0 +1,91 @@
+let underToggle = false;
+
+const toggleElement = (event) => {
+    console.log(event.currentTarget.getAttribute("data-target"));
+    container = document.getElementById(event.currentTarget.getAttribute("data-target"));
+    setFilterClasses(container);
+};
+
+
+// Toggle select all elements
+const toggleSelectAllFilterElements = (event) => {
+    event.preventDefault();
+
+    selectAllFilterElementsFromCheckbox(event.currentTarget);
+};
+
+const selectAllFilterElementsFromCheckbox = (checkbox) => {
+    const container = document.getElementById(checkbox.getAttribute("data-target"));
+    active = checkbox.checked;
+    
+    Array.prototype.forEach.call(container.children, function(child) {
+        Array.prototype.forEach.call(child.getElementsByTagName("input"), function(elem) {
+            elem.checked = active;
+        }); 
+    });
+    setFilterClasses(container);
+};
+
+const setFilterClasses = (container) => {
+    console.log("set filter");
+    if (!underToggle) {
+        underToggle = true;
+        selectionButtom = document.getElementById(container.getAttribute("data-button"));
+        checkboxes = container.getElementsByTagName("input");
+        // count the number of selected elements
+        nbElemsChecked = 0;
+        for (i = 0; i < checkboxes.length; i++) {
+            if (checkboxes[i].checked) {
+                nbElemsChecked++;
+            }
+        }
+
+        // count the number of elements
+        nbElems = checkboxes.length;
+
+        // if all elements are deselected, the class "no-selected" is removed and the all selection button is deselected
+        if (nbElemsChecked == 0) {
+            Array.prototype.forEach.call(checkboxes, function(checkbox) {
+                checkbox.parentNode.parentNode.classList.remove("no-selected");
+            });
+            selectionButtom.checked = false;
+            selectionButtom.indeterminate = false;
+        }
+        else {
+            // otherwise, for each filter element, set "no-selected" class if required
+            Array.prototype.forEach.call(checkboxes, function(checkbox) {
+                if (checkbox.checked)
+                    checkbox.parentNode.parentNode.classList.remove("no-selected");
+                else
+                    checkbox.parentNode.parentNode.classList.add("no-selected");
+            });
+
+            // if all elements are selected, the all selection button is selected, otherwise its set to "indeterminate"
+            if (nbElems == nbElemsChecked) {
+                selectionButtom.checked = true;
+                selectionButtom.indeterminate = false;
+            } else {
+                selectionButtom.indeterminate = true;
+                selectionButtom.checked = false;
+            }
+        }
+
+        underToggle = false;
+    }
+}
+
+document.addEventListener("DOMContentLoaded", function(e) {
+    Array.prototype.forEach.call(document.getElementsByClassName("buttons-filter"), function(buttongroup) {
+        buttongroup.style.display = "inline-block";
+    });
+
+    const buttonsAll = document.getElementsByClassName("all-elements");
+
+    Array.prototype.forEach.call(buttonsAll, function(button) {
+        const container = document.getElementById(button.getAttribute("data-target"));
+        setFilterClasses(container);
+    });
+
+
+});
+  
\ No newline at end of file
diff --git a/src/agenda_culturel/static/style.scss b/src/agenda_culturel/static/style.scss
index f1c2c9c..da38545 100644
--- a/src/agenda_culturel/static/style.scss
+++ b/src/agenda_culturel/static/style.scss
@@ -267,14 +267,19 @@ article#filters {
             .cat {
                 border: 0;
             }
+    
+            &.no-selected {
+                @extend .secondary, .outline;
+
+                label {
+                    color: var(--secondary);
+                }
+            }
         }
         [role="button"] input {
             margin-left: 0.3em;
         }
+
     }
 }
 
-.disabled {
-    pointer-events: none;
-    opacity: 0.4;
-}
\ No newline at end of file
diff --git a/src/agenda_culturel/templates/agenda_culturel/forms/category-checkbox.html b/src/agenda_culturel/templates/agenda_culturel/forms/category-checkbox.html
index d6140a3..08c33fb 100644
--- a/src/agenda_culturel/templates/agenda_culturel/forms/category-checkbox.html
+++ b/src/agenda_culturel/templates/agenda_culturel/forms/category-checkbox.html
@@ -1,12 +1,14 @@
 {% load cat_extra %}
-<div class="buttons-filter" data-target="{{ widget.attrs.id }}">
+<div class="buttons-filter">
       <label for="all-categories">
         toutes
-        <input class="all-elements" type="checkbox" id="all-categories" name="all-categories" onChange="toggleSelectAllFilterElements(event)">
+        <input class="all-elements" type="checkbox" id="{{ widget.attrs.id }}-button" name="all-categories" onChange="toggleSelectAllFilterElements(event)" data-target="{{ widget.attrs.id }}">
     </label>
 </div>
-<div class="options-filter" id="{{ widget.attrs.id }}"{% if widget.attrs.class %} class="{{ widget.attrs.class }}"{% endif %}>{% for group, options, index in widget.optgroups %}{% if group %}
+{% with container_id=widget.attrs.id %}
+<div class="options-filter" id="{{ widget.attrs.id }}"{% if widget.attrs.class %} class="{{ widget.attrs.class }}"{% endif %} data-button="{{ widget.attrs.id }}-button">{% for group, options, index in widget.optgroups %}{% if group %}
   <div><label>{{ group }}</label>{% endif %}{% for widget in options %}<div role="button" class="small-cat contrast">
     {{ widget.value.instance | circle_cat }}{% include widget.template_name %}</div>{% endfor %}{% if group %}
   </div>{% endif %}{% endfor %}
-</div>
\ No newline at end of file
+</div>
+{% endwith %}
\ No newline at end of file
diff --git a/src/agenda_culturel/templates/agenda_culturel/forms/checkbox-option.html b/src/agenda_culturel/templates/agenda_culturel/forms/checkbox-option.html
index 088d1c4..4d4260c 100644
--- a/src/agenda_culturel/templates/agenda_culturel/forms/checkbox-option.html
+++ b/src/agenda_culturel/templates/agenda_culturel/forms/checkbox-option.html
@@ -1,4 +1,4 @@
 <label for="{{ widget.attrs.id }}">
     {{ widget.label }}
-    {% include "django/forms/widgets/input.html" %}
+    <input type="{{ widget.type }}" name="{{ widget.name }}"{% if widget.value != None %} value="{{ widget.value }}"{% endif %}{% include "django/forms/widgets/attrs.html" %} onChange="toggleElement(event)" data-target="{{ container_id }}">
 </label>
diff --git a/src/agenda_culturel/templates/agenda_culturel/forms/tag-checkbox.html b/src/agenda_culturel/templates/agenda_culturel/forms/tag-checkbox.html
index 636551d..c5d631a 100644
--- a/src/agenda_culturel/templates/agenda_culturel/forms/tag-checkbox.html
+++ b/src/agenda_culturel/templates/agenda_culturel/forms/tag-checkbox.html
@@ -1,12 +1,14 @@
 {% load cat_extra %}
-<div class="buttons-filter" data-target="{{ widget.attrs.id }}">
+<div class="buttons-filter">
   <label for="all-tags">
     toutes
-    <input class="all-elements" type="checkbox" id="all-tags" name="all-tags" onChange="toggleSelectAllFilterElements(event)">
+    <input class="all-elements" type="checkbox" id="{{ widget.attrs.id }}-button" name="all-tags" onChange="toggleSelectAllFilterElements(event)" data-target="{{ widget.attrs.id }}">
 </label>
 </div>
-<div class="options-filter" id="{{ widget.attrs.id }}"{% if widget.attrs.class %} class="{{ widget.attrs.class }}"{% endif %}>{% for group, options, index in widget.optgroups %}{% if group %}
+{% with container_id=widget.attrs.id %}
+<div class="options-filter" id="{{ widget.attrs.id }}"{% if widget.attrs.class %} class="{{ widget.attrs.class }}"{% endif %} data-button="{{ widget.attrs.id }}-button">{% for group, options, index in widget.optgroups %}{% if group %}
     <div><label>{{ group }}</label>{% endif %}{% for widget in options %}<div role="button" class="small-cat">
       {% include widget.template_name %}</div>{% endfor %}{% if group %}
     </div>{% endif %}{% endfor %}
-</div>
\ No newline at end of file
+</div>
+{% endwith %}