From b2609a3919ac2f9f6f2327c19d948d7f4b5952d3 Mon Sep 17 00:00:00 2001
From: Catalin <catalinflorentinion@gmail.com>
Date: Thu, 11 Jul 2024 18:49:46 +0300
Subject: [PATCH] HDX-9969 improve HDX Signals signup form

---
 .../fanstatic/landing_pages/hdx_signals.js    | 94 +++++++++++++++++++
 .../ckanext/hdx_theme/fanstatic/webassets.yml |  6 ++
 .../templates/landing_pages/signals.html      | 35 +++++--
 3 files changed, 127 insertions(+), 8 deletions(-)
 create mode 100644 ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/landing_pages/hdx_signals.js

diff --git a/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/landing_pages/hdx_signals.js b/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/landing_pages/hdx_signals.js
new file mode 100644
index 0000000000..86075515b8
--- /dev/null
+++ b/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/landing_pages/hdx_signals.js
@@ -0,0 +1,94 @@
+$(document).ready(function () {
+  var $form = $('#mc_embed_signup form');
+  var DATASETS_GROUP = '[4389]';
+  var ALL_LOCATIONS = [
+    '[4397][16384]',
+    '[4405][8388608]',
+    '[4417][8589934592]',
+    '[4409][33554432]',
+    '[4401][65536]',
+    '[4421][549755813888]',
+    '[4425][16]',
+  ];
+  var HRP_LOCATIONS = [
+    '[4397][32768]',
+    '[4397][131072]',
+    '[4405][16777216]',
+    '[4417][17179869184]',
+    '[4417][34359738368]',
+    '[4417][68719476736]',
+    '[4417][137438953472]',
+    '[4417][274877906944]',
+    '[4417][4]',
+    '[4409][67108864]',
+    '[4409][134217728]',
+    '[4409][268435456]',
+    '[4401][524288]',
+    '[4401][2097152]',
+    '[4401][4194304]',
+    '[4401][1]',
+    '[4401][2]',
+    '[4421][1099511627776]',
+    '[4421][2199023255552]',
+    '[4421][4398046511104]',
+    '[4421][8796093022208]',
+    '[4421][17592186044416]',
+    '[4421][35184372088832]',
+    '[4421][70368744177664]',
+    '[4421][8]',
+  ];
+
+  function select_group(group) {
+    $form.find('input[name^="group' + group + '"]').prop('checked', true);
+  }
+
+  function unselect_group(group) {
+    $form.find('input[name^="group' + group + '"]').prop('checked', false);
+  }
+
+  function select_values(values) {
+    values.forEach(function (value) {
+      $form.find('input[name="group' + value + '"]').prop('checked', true);
+    });
+  }
+
+  function add_select_buttons(group_label, group) {
+    var select_btn = $('<button type="button" class="btn btn-link p-0 me-2"><small>Select all</small></button>');
+    var unselect_btn = $('<button type="button" class="btn btn-link p-0"><small>Select none</small></button>');
+
+    group_label.append(select_btn);
+    group_label.append(unselect_btn);
+
+    select_btn.click(function () {
+      select_group(group);
+    });
+    unselect_btn.click(function () {
+      unselect_group(group);
+    });
+  }
+
+  $form.find('#select-all').click(function () {
+    select_group(DATASETS_GROUP);
+    select_values(ALL_LOCATIONS);
+  });
+  $form.find('#select-all-datasets').on('click', function () {
+    select_group(DATASETS_GROUP);
+  });
+  $form.find('#select-all-locations').on('click', function () {
+    select_values(ALL_LOCATIONS);
+  });
+  $form.find('#select-all-hrp-locations').on('click', function () {
+    select_values(HRP_LOCATIONS);
+  });
+
+  $form.find('.mc-field-group').each(function () {
+    var group_label = $(this).find('p.action-buttons');
+    var group_name = $(this).find('input[type="checkbox"]').first().attr('name');
+
+    if (group_label.length && group_name) {
+      var group = group_name.split('[')[1].split(']')[0];
+      add_select_buttons(group_label, '[' + group + ']');
+    }
+  });
+
+});
diff --git a/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/webassets.yml b/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/webassets.yml
index 22346cdb08..564dfb3617 100644
--- a/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/webassets.yml
+++ b/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/webassets.yml
@@ -208,6 +208,12 @@ bem-blocks-scripts:
     - bem.blocks/select2_field.js
     - bem.blocks/textarea_field.js
 
+hdx-signals-scripts:
+  <<: *common-js
+  output: ckanext-hdx_theme/%(version)s_hdx-signals-scripts.js
+  contents:
+    - landing_pages/hdx_signals.js
+
 hdx-form-validator:
   <<: *common-js
   output: ckanext-hdx_theme/%(version)s_hdx-form-validator.js
diff --git a/ckanext-hdx_theme/ckanext/hdx_theme/templates/landing_pages/signals.html b/ckanext-hdx_theme/ckanext/hdx_theme/templates/landing_pages/signals.html
index 8c9b58122d..630aea5dff 100644
--- a/ckanext-hdx_theme/ckanext/hdx_theme/templates/landing_pages/signals.html
+++ b/ckanext-hdx_theme/ckanext/hdx_theme/templates/landing_pages/signals.html
@@ -1,5 +1,10 @@
 {% extends "landing_pages/page.html" %}
 
+{% block scripts %}
+  {{ super() }}
+  {% asset 'hdx_theme/hdx-signals-scripts' %}
+{% endblock %}
+
 {% set CONST = h.HDX_CONST('UI_CONSTANTS')['LANDING_PAGES']['SIGNALS_LANDING_PAGE'] %}
 
 {% block subtitle %}{{ _('HDX Signals') }}{% endblock %}
@@ -58,8 +63,15 @@
                                   <input type="text" name="ORG" class="required text form-control" id="mce-ORG"
                                          required="" value="">
                                 </div>
+                                <div>
+                                  <button type="button" class="btn btn-sm btn-outline-secondary mb-3 me-3" id="select-all">Give me everything</button>
+                                  <button type="button" class="btn btn-sm btn-outline-secondary mb-3 me-3" id="select-all-datasets">Select all datasets</button>
+                                  <button type="button" class="btn btn-sm btn-outline-secondary mb-3 me-3" id="select-all-locations">Select all locations</button>
+                                  <button type="button" class="btn btn-sm btn-outline-secondary mb-3" id="select-all-hrp-locations">Select all HRP locations</button>
+                                </div>
                                 <div class="mc-field-group mb-3">
-                                  <p class="fw-bold">Datasets of interest</p>
+                                  <p class="fw-bold mb-0">Datasets of interest</p>
+                                  <p class="action-buttons"></p>
                                   <ul class="list-unstyled">
                                     <li class="form-check">
                                       <input type="checkbox" name="group[4389][128]" class="form-check-input"
@@ -102,7 +114,8 @@
                               </div>
                               <div class="col-12 col-md-6">
                                 <div class="mc-field-group mb-3">
-                                  <p class="fw-bold">Asia and the Pacific</p>
+                                  <p class="fw-bold mb-0">Asia and the Pacific</p>
+                                  <p class="action-buttons"></p>
                                   <ul class="list-unstyled">
                                     <li class="form-check">
                                       <input type="checkbox" name="group[4397][16384]" class="form-check-input"
@@ -125,7 +138,8 @@
                               </div>
                               <div class="col-12 col-md-6">
                                 <div class="mc-field-group mb-3">
-                                  <p class="fw-bold">Europe</p>
+                                  <p class="fw-bold mb-0">Europe</p>
+                                  <p class="action-buttons"></p>
                                   <ul class="list-unstyled">
                                     <li class="form-check">
                                       <input type="checkbox" name="group[4405][8388608]" class="form-check-input"
@@ -143,7 +157,8 @@
                               </div>
                               <div class="col-12 col-md-6">
                                 <div class="mc-field-group mb-3">
-                                  <p class="fw-bold">Latin America and the Caribbean</p>
+                                  <p class="fw-bold mb-0">Latin America and the Caribbean</p>
+                                  <p class="action-buttons"></p>
                                   <ul class="list-unstyled">
                                     <li class="form-check">
                                       <input type="checkbox" name="group[4417][8589934592]" class="form-check-input"
@@ -187,7 +202,8 @@
                               </div>
                               <div class="col-12 col-md-6">
                                 <div class="mc-field-group mb-3">
-                                  <p class="fw-bold">Middle East and North Africa</p>
+                                  <p class="fw-bold mb-0">Middle East and North Africa</p>
+                                  <p class="action-buttons"></p>
                                   <ul class="list-unstyled">
                                     <li class="form-check">
                                       <input type="checkbox" name="group[4409][33554432]" class="form-check-input"
@@ -217,7 +233,8 @@
                               </div>
                               <div class="col-12 col-md-6">
                                 <div class="mc-field-group mb-3">
-                                  <p class="fw-bold">Southern and Eastern Africa</p>
+                                  <p class="fw-bold mb-0">Southern and Eastern Africa</p>
+                                  <p class="action-buttons"></p>
                                   <ul class="list-unstyled">
                                     <li class="form-check">
                                       <input type="checkbox" name="group[4401][65536]" class="form-check-input"
@@ -255,7 +272,8 @@
                               </div>
                               <div class="col-12 col-md-6">
                                 <div class="mc-field-group mb-3">
-                                  <p class="fw-bold">West and Central Africa</p>
+                                  <p class="fw-bold mb-0">West and Central Africa</p>
+                                  <p class="action-buttons"></p>
                                   <ul class="list-unstyled">
                                     <li class="form-check">
                                       <input type="checkbox" name="group[4421][549755813888]" class="form-check-input"
@@ -310,7 +328,8 @@
                               </div>
                               <div class="col-12 col-md-6">
                                 <div class="mc-field-group mb-3">
-                                  <p class="fw-bold">North America</p>
+                                  <p class="fw-bold mb-0">North America</p>
+                                  <p class="action-buttons"></p>
                                   <ul class="list-unstyled">
                                     <li class="form-check">
                                       <input type="checkbox" name="group[4425][16]" class="form-check-input"