WIP - start javascript for domain filter widget

Domain will have top level and subdomain selections, and work similarly
to "Topic/Sub-Topic" on GOV.UK search.

static/assets/js/enhanced-search.js

@@ -0,0 +1,54 @@
+const ALL_DOMAINS = "";
+
+/**
+ * Enhance the domain filter to include a subdomain input in addition
+ * to the domain filter. When a domain is selected, the widget should
+ * dynamically populate the subdomain options, and when a domain is
+ * cleared, the subdomain should be cleared too.
+ *
+ * Note: This widget does not automatically refresh the results - the user
+ * has to hit "Apply filters" first.
+ */
+export const initDomainFilter = function () {
+  const subdomainFilter = document.querySelector("#subdomains-filter");
+  const domainFilter = document.querySelector("#domains-filter");
+
+  if (subdomainFilter === null || domainFilter === null) {
+    return;
+  }
+
+  // TODO interact with selected filters widget
+  // we need to be able to add and remove entries from this dynamically
+
+  const checkDomainSelected = function () {
+    const selectedOptions = Array.from(domainFilter.selectedOptions);
+
+    if (
+      selectedOptions.length === 0 ||
+      selectedOptions.some((el) => el.value != ALL_DOMAINS)
+    ) {
+      onSelectParentDomain();
+    } else {
+      onClearDomain();
+    }
+  };
+
+  const onSelectParentDomain = function () {
+    console.log("Selected domain");
+
+    subdomainFilter.setAttribute("disabled", false);
+
+    // TODO populate subdomain options based on selected parent domain
+  };
+
+  const onClearDomain = function () {
+    console.log("Cleared domain");
+
+    subdomainFilter.setAttribute("disabled", true);
+
+    // TODO remove subdomain options
+  };
+
+  checkDomainSelected();
+  // TODO: Set up event handlers
+};

templates/base/base.html

@@ -41,9 +41,11 @@
   crossorigin="anonymous"
 ></script>
 <script type="module">
-  import {initAll} from "{% static 'assets/js/govuk-frontend-5.0.0.min.js' %}"
+  import {initAll} from "{% static 'assets/js/govuk-frontend.min.js' %}"
   initAll();
   window.MOJFrontend.initAll();
 </script>
+{% block scripts %}
+{% endblock scripts %}
 </body>
 </html>

templates/partial/filter.html

@@ -44,13 +44,22 @@ <h3 class="govuk-heading-s govuk-!-margin-bottom-0">Domain</h3>
             <div class="govuk-form-group">
               <fieldset class="govuk-fieldset">
                 <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">Domain</legend>
-                <div class="govuk-checkboxes govuk-checkboxes--small" data-module="govuk-checkboxes">
-                  {% for domain_option in form.domains %}
-                      <div class="govuk-checkboxes__item">
-                        {{ domain_option.tag}}
-                        <label class="govuk-label govuk-checkboxes__label" for="{{ domain_option.id_for_label }}">{{domain_option.choice_label}}</label>
-                      </div>
-                  {% endfor %}
+                <div class="govuk-form-group">
+                  <label class="govuk-label" for="domains">
+                    Top-level
+                  </label>
+                  <select class="govuk-select" id="domains-filter" name="domains">
+                    <option value="">All domains</option>
+                    <option value="some-value">Some value</option>
+                  </select>
+                </div>
+                <div class="govuk-form-group">
+                  <label class="govuk-label" for="subdomains">
+                    Subdomain
+                  </label>
+                  <select class="govuk-select" id="subdomains-filter" name="subdomains" disabled>
+                    <option value="">All subdomains</option>
+                  </select>
                 </div>
               </fieldset>
             </div>

templates/search.html

@@ -33,3 +33,9 @@ <h2 class="govuk-heading-l govuk-!-display-inline-block" id="result-count">{{tot
     </div>
 </div>
 {% endblock content %}
+{% block scripts %}
+<script type="module">
+  import {initDomainFilter} from "{% static 'assets/js/enhanced-search.js' %}"
+  initDomainFilter();
+</script>
+{% endblock scripts %}