Event date facet (DDFFORM-67)

composer.json

@@ -95,6 +95,7 @@
         "drupal/entity_clone_template": "^2.0",
         "drupal/enum_field": "^1.0",
         "drupal/facets": "^2.0",
+        "drupal/facets_date_range": "^1.0@beta",
         "drupal/field_group": "^3.4",
         "drupal/field_inheritance": "^2.0",
         "drupal/focal_point": "^2.0",
@@ -268,6 +269,13 @@
             "drupal/entity_clone_template": {
                 "3424597: Fix error when creating entity of type without templates": "https://git.drupalcode.org/project/entity_clone_template/-/merge_requests/3.patch"
             },
+            "drupal/facets": {
+                "3390386: Make helper functions globally usable": "https://git.drupalcode.org/project/facets/-/commit/5f9ce05ffa3390a279a5c78534213c7e710f577e.patch"
+            },
+            "drupal/facets_date_range": {
+                "3273136: Selecting date clears other facet values when using AJAX" : "https://git.drupalcode.org/project/facets_date_range/-/commit/de9dca31c2e43c845d2ac4691b5917445792b980.patch",
+                "3273551: Selecting date causes page reload when AJAX is enabled": "https://www.drupal.org/files/issues/2023-09-28/3273551_selecting_causes_page_reload_ajax_enabled_3.patch"
+            },
             "drupal/focal_point": {
                 "3162210: Preview link accidentally closes the media library": "https://www.drupal.org/files/issues/2020-10-11/preview_link_accidentally_closes_the_media_library-3162210-19.patch"
             },

config/sync/core.extension.yml

@@ -60,6 +60,7 @@ module:
   entity_reference_revisions: 0
   enum_field: 0
   facets: 0
+  facets_date_range: 0
   field: 0
   field_group: 0
   field_inheritance: 0

config/sync/facets.facet.date.yml

@@ -0,0 +1,76 @@
+uuid: c0c8ad17-78b9-46b8-8130-2ddb73e206bf
+langcode: en
+status: true
+dependencies:
+  config:
+    - search_api.index.events
+    - views.view.events
+  module:
+    - search_api
+id: date
+name: Date
+weight: 0
+min_count: 1
+missing: false
+missing_label: others
+url_alias: date
+facet_source_id: 'search_api:views_page__events__all'
+field_identifier: date
+query_operator: or
+hard_limit: 0
+exclude: false
+use_hierarchy: false
+keep_hierarchy_parents_active: false
+hierarchy:
+  type: taxonomy
+  config: {  }
+expand_hierarchy: false
+enable_parent_when_child_gets_disabled: true
+widget:
+  type: date_range
+  config:
+    show_numbers: false
+    min_label: 'Date from'
+    max_label: 'Date to'
+empty_behavior:
+  behavior: none
+only_visible_when_facet_source_is_visible: false
+show_only_one_result: false
+show_title: false
+processor_configs:
+  active_widget_order:
+    processor_id: active_widget_order
+    weights:
+      sort: 20
+    settings:
+      sort: DESC
+  count_widget_order:
+    processor_id: count_widget_order
+    weights:
+      sort: 30
+    settings:
+      sort: DESC
+  date_range:
+    processor_id: date_range
+    weights:
+      pre_query: 60
+      build: 20
+    settings:
+      max_inclusive: false
+  display_value_widget_order:
+    processor_id: display_value_widget_order
+    weights:
+      sort: 40
+    settings:
+      sort: ASC
+  hierarchy_processor:
+    processor_id: hierarchy_processor
+    weights:
+      build: 100
+    settings: {  }
+  url_processor_handler:
+    processor_id: url_processor_handler
+    weights:
+      pre_query: 50
+      build: 15
+    settings: {  }

web/themes/custom/novel/js/date-range.js

@@ -0,0 +1,15 @@
+// Allow anonymous functions here as this construct is in accordance with
+// how other JavaScript behavior code looks.
+// eslint-disable-next-line func-names
+(function (Drupal) {
+  Drupal.behaviors.dateRange = {
+    attach(context, settings) {
+      window.DateRange.init(context, {
+        locale: settings.dateRange.language,
+        altInput: true,
+        // A rather compact format that mimics what we use elsewhere.
+        altFormat: "j. M Y",
+      });
+    },
+  };
+})(Drupal);

web/themes/custom/novel/novel.libraries.yml

@@ -10,6 +10,10 @@ base:
   dependencies:
     - core/drupal
 
+footer-accordions:
+  js:
+    assets/dpl-design-system/js/footer-accordions.js: {}
+
 nav-grid:
   js:
     assets/dpl-design-system/js/init-nav-grid.js: {}
@@ -20,6 +24,31 @@ slider:
   dependencies:
     - novel/swiper
 
+date-range:
+  js:
+    assets/dpl-design-system/js/date-range.js: {}
+    js/date-range.js: {}
+  dependencies:
+    - core/drupal
+    - core/drupalSettings
+    - novel/flatpickr
+
+flatpickr:
+  remote: "https://github.com/flatpickr/flatpickr"
+  license:
+    name: MIT
+    url: https://github.com/flatpickr/flatpickr/blob/master/LICENSE.md
+    gpl-compatible: true
+  js:
+    "https://cdn.jsdelivr.net/npm/flatpickr@4/dist/flatpickr.min.js":
+      { type: external }
+    "https://cdn.jsdelivr.net/npm/flatpickr@4/dist/l10n/da.js":
+      { type: external }
+  css:
+    theme:
+      "https://cdn.jsdelivr.net/npm/flatpickr@4/dist/flatpickr.min.css":
+        { type: external }
+
 swiper:
   remote: "https://github.com/nolimits4web/swiper.git"
   license:
@@ -33,6 +62,3 @@ swiper:
     theme:
       "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css":
         { type: external }
-footer-accordions:
-  js:
-    assets/dpl-design-system/js/footer-accordions.js: {}

web/themes/custom/novel/novel.theme

@@ -326,3 +326,14 @@ function novel_preprocess_views_view_unformatted(&$variables): void {
     }
   }
 }
+
+/**
+ * Implements hook_preprocess().
+ */
+function novel_preprocess_facets_item_list__date_range(array &$variables): void {
+  $variables['items']['min']['value']['#attributes']['class'][] = "date-range__from";
+  $variables['items']['max']['value']['#attributes']['class'][] = "date-range__to";
+
+  $language = \Drupal::languageManager()->getCurrentLanguage()->getId();
+  $variables['#attached']['drupalSettings']['dateRange']['language'] = $language;
+}

web/themes/custom/novel/templates/views/facets-item-list--date-range.html.twig

@@ -0,0 +1,38 @@
+{# Cache logic that we duplicate from the parent template
+   cms/web/modules/contrib/facets/templates/facets-item-list.html.twig #}
+{% if cache_hash %}
+  <!-- facets cacheable metadata
+    hash: {{ cache_hash }}
+  {% if cache_contexts %}
+    contexts: {{ cache_contexts }}
+  {%- endif %}
+  {% if cache_tags %}
+    tags: {{ cache_tags }}
+  {%- endif %}
+  {% if cache_max_age %}
+    max age: {{ cache_max_age }}
+  {%- endif %}
+  -->
+{%- endif %}
+
+{{ attach_library("novel/date-range") }}
+
+<label class="input-label" id="facet_{{ facet.id }}_label">{{ facet.label }}</label>
+<div class="date-range date-range--filter">
+  <input type="text" class="date-range__input"/>
+  {# We need the facets-widget-date_range class to be available as it is
+     required in cms/web/modules/contrib/facets_date_range/js/date-range.js #}
+  <div class="date-range__values facets-widget-date_range">
+    {% if items or empty %}
+    {%- if items -%}
+    <{{ list_type }}{{ attributes }}>
+    {%- for item in items -%}
+      <li{{ item.attributes }}>{{ item.value }}</li>
+    {%- endfor -%}
+    </{{ list_type }}>
+    {%- else -%}
+      {{- empty -}}
+      {%- endif -%}
+    {%- endif %}
+  </div>
+</div>

web/themes/custom/novel/templates/views/views-view--events.html.twig

@@ -7,4 +7,7 @@
   <div class="content-list-page__filter">
     {{ drupal_block("facet_block:branch") }}
   </div>
+  <div class="content-list-page__filter content-list-page__filter--date content-list-page__filter--right">
+    {{ drupal_block("facet_block:date") }}
+  </div>
 {% endblock %}