From 1ddc90355e4086ede2c649d1ab1f484dac32d7c2 Mon Sep 17 00:00:00 2001
From: tdruez <tdruez@nexb.com>
Date: Tue, 21 Jan 2025 12:51:10 +0900
Subject: [PATCH] Add the JS code to handle the "Include all projects" #1524

Signed-off-by: tdruez <tdruez@nexb.com>
---
 scancodeio/static/main.js                      |  3 ++-
 .../modals/projects_archive_modal.html         | 16 +++++++++-------
 .../modals/projects_download_modal.html        | 16 +++++++++-------
 .../scanpipe/modals/projects_report_modal.html | 16 +++++++++-------
 scanpipe/templates/scanpipe/project_list.html  | 18 ++++++++++++++++++
 5 files changed, 47 insertions(+), 22 deletions(-)

diff --git a/scancodeio/static/main.js b/scancodeio/static/main.js
index 04b74db51..0be80c02d 100644
--- a/scancodeio/static/main.js
+++ b/scancodeio/static/main.js
@@ -232,7 +232,8 @@ function setupSelectCheckbox() {
       updateButtonAndDropdownState();
 
       // Check if all row checkboxes are checked and update the "Select All" checkbox accordingly
-      selectAllCheckbox.checked = Array.from(rowCheckboxes).every((cb) => cb.checked);
+      const allRowCheckboxesChecked = Array.from(rowCheckboxes).every((cb) => cb.checked);
+      selectAllCheckbox.checked = allRowCheckboxesChecked;
     });
   });
 
diff --git a/scanpipe/templates/scanpipe/modals/projects_archive_modal.html b/scanpipe/templates/scanpipe/modals/projects_archive_modal.html
index d34f01a2c..1fee867cc 100644
--- a/scanpipe/templates/scanpipe/modals/projects_archive_modal.html
+++ b/scanpipe/templates/scanpipe/modals/projects_archive_modal.html
@@ -34,13 +34,15 @@
           </label>
         </div>
         {% if page_obj.paginator.num_pages > 1 %}
-          <hr>
-          <div class="field">
-            <label class="checkbox" for="{{ archive_form.select_across.id_for_label }}">
-              <input type="checkbox" name="{{ archive_form.select_across.name }}" id="{{ archive_form.select_across.id_for_label }}">
-              Include all {{ paginator.count|intcomma }} projects
-            </label>
-            <p class="help">{{ outputs_download_form.select_across.help_text }}</p>
+          <div class="show-on-all-checked">
+            <hr>
+            <div class="field include-all-field">
+              <label class="checkbox" for="{{ archive_form.select_across.id_for_label }}">
+                <input type="checkbox" name="{{ archive_form.select_across.name }}" id="{{ archive_form.select_across.id_for_label }}">
+                Include all {{ paginator.count|intcomma }} projects
+              </label>
+              <p class="help">{{ outputs_download_form.select_across.help_text }}</p>
+            </div>
           </div>
         {% endif %}
       </section>
diff --git a/scanpipe/templates/scanpipe/modals/projects_download_modal.html b/scanpipe/templates/scanpipe/modals/projects_download_modal.html
index 1fe68555b..d2d6b4e9a 100644
--- a/scanpipe/templates/scanpipe/modals/projects_download_modal.html
+++ b/scanpipe/templates/scanpipe/modals/projects_download_modal.html
@@ -15,13 +15,15 @@
           </div>
         </div>
         {% if page_obj.paginator.num_pages > 1 %}
-          <hr>
-          <div class="field">
-            <label class="checkbox" for="{{ outputs_download_form.select_across.id_for_label }}">
-              <input type="checkbox" name="{{ outputs_download_form.select_across.name }}" id="{{ outputs_download_form.select_across.id_for_label }}">
-              Include all {{ paginator.count|intcomma }} projects
-            </label>
-            <p class="help">{{ outputs_download_form.select_across.help_text }}</p>
+          <div class="show-on-all-checked">
+            <hr>
+            <div class="field">
+              <label class="checkbox" for="{{ outputs_download_form.select_across.id_for_label }}">
+                <input type="checkbox" name="{{ outputs_download_form.select_across.name }}" id="{{ outputs_download_form.select_across.id_for_label }}">
+                Include all {{ paginator.count|intcomma }} projects
+              </label>
+              <p class="help">{{ outputs_download_form.select_across.help_text }}</p>
+            </div>
           </div>
         {% endif %}
       </section>
diff --git a/scanpipe/templates/scanpipe/modals/projects_report_modal.html b/scanpipe/templates/scanpipe/modals/projects_report_modal.html
index 5a25d0586..19fc2153a 100644
--- a/scanpipe/templates/scanpipe/modals/projects_report_modal.html
+++ b/scanpipe/templates/scanpipe/modals/projects_report_modal.html
@@ -15,13 +15,15 @@
           </div>
         </div>
         {% if page_obj.paginator.num_pages > 1 %}
-          <hr>
-          <div class="field">
-            <label class="checkbox" for="{{ report_form.select_across.id_for_label }}">
-              <input type="checkbox" name="{{ report_form.select_across.name }}" id="{{ report_form.select_across.id_for_label }}">
-              Include all {{ paginator.count|intcomma }} projects
-            </label>
-            <p class="help">{{ report_form.select_across.help_text }}</p>
+          <div class="show-on-all-checked">
+            <hr>
+            <div class="field include-all-field">
+              <label class="checkbox" for="{{ report_form.select_across.id_for_label }}">
+                <input type="checkbox" name="{{ report_form.select_across.name }}" id="{{ report_form.select_across.id_for_label }}">
+                Include all {{ paginator.count|intcomma }} projects
+              </label>
+              <p class="help">{{ report_form.select_across.help_text }}</p>
+            </div>
           </div>
         {% endif %}
       </section>
diff --git a/scanpipe/templates/scanpipe/project_list.html b/scanpipe/templates/scanpipe/project_list.html
index bf592827d..ae46b8c5c 100644
--- a/scanpipe/templates/scanpipe/project_list.html
+++ b/scanpipe/templates/scanpipe/project_list.html
@@ -98,6 +98,24 @@
           }
         });
       });
+
+      document.addEventListener("openModal", function(event) {
+        // Get all elements that should be shown or hidden based on the state of the checkboxes
+        const elementsForAllRowsChecked = getAll(".show-on-all-checked");
+        const selectAllCheckbox = document.getElementById("select-all");
+        const displayValue = selectAllCheckbox.checked ? "block" : "none";
+
+        // Iterate through all elements that need to be shown or hidden and apply the display style
+        elementsForAllRowsChecked.forEach((field) => {
+          field.style.display = displayValue;
+        });
+      });
+
     });
   </script>
+
+
+<script>
+
+</script>
 {% endblock %}
\ No newline at end of file