Merge pull request #792 from City-of-Helsinki/UHF-10772

UHF-10772: Add events list to Helsinki near you
City-of-Helsinki · Dec 12, 2024 · 21f1fbd · 21f1fbd
2 parents bba3286 + 9523695
commit 21f1fbd
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 5 deletions.
diff --git a/public/modules/custom/helfi_etusivu/src/Controller/HelsinkiNearYouResultsController.php b/public/modules/custom/helfi_etusivu/src/Controller/HelsinkiNearYouResultsController.php
@@ -70,13 +70,22 @@ public function content(Request $request) : array|RedirectResponse {
     return [
       '#attached' => [
         'drupalSettings' => [
-          'helsinki_near_you' => [
-            'events_api_url' => $this->linkedEvents->getEventsRequest([
-              'dwithin_origin' => $addressData['coordinates'],
-              'dwithin_distance' => 1000,
-            ]),
+          'helfi_events' => [
+            'baseUrl' => LinkedEvents::BASE_URL,
+            'data' => [
+              'helfi-coordinates-based-event-list' => [
+                'events_api_url' => $this->linkedEvents->getEventsRequest([
+                  'dwithin_origin' => implode(',', $addressData['coordinates']),
+                  'dwithin_metres' => 2000,
+                ]),
+                'field_event_count' => 3,
+              ],
+            ],
+            'seeAllButtonOverride' => $this->t('See all events', [], ['context' => 'Helsinki near you']),
+            'useExperimentalGhosts' => TRUE,
           ],
         ],
+        'library' => ['hdbt/event-list'],
       ],
       '#back_link_label' => $this->t('Edit address', [], ['context' => 'Helsinki near you']),
       '#back_link_url' => $return_url,

diff --git a/public/modules/custom/helfi_etusivu/translations/fi.po b/public/modules/custom/helfi_etusivu/translations/fi.po
@@ -88,3 +88,15 @@ msgstr "Antamallasi osoitteella ei löytynyt tuloksia. Voit kokeilla muuttaa hak
 msgctxt "Helsinki near you"
 msgid "Search"
 msgstr "Hae"
+
+msgctxt "Helsinki near you"
+msgid "See all events"
+msgstr "Katso kaikki tapahtumat"
+
+msgctxt "Helsinki near you"
+msgid "Events near you"
+msgstr "Tapahtumat lähelläsi"
+
+msgctxt "Helsinki near you"
+msgid "Browse events near you, sorted by their start time"
+msgstr "Tutustu tapahtumiin tapahtumisajan mukaisessa järjestyksessä."
diff --git a/public/modules/custom/helfi_etusivu/translations/sv.po b/public/modules/custom/helfi_etusivu/translations/sv.po
@@ -77,3 +77,15 @@ msgstr "Adressen du angav gav inga resultat. Du kanske vill prova en annan adres
 msgctxt "Helsinki near you"
 msgid "Search"
 msgstr "Söka"
+
+msgctxt "Helsinki near you"
+msgid "See all events"
+msgstr "Se alla evenemang"
+
+msgctxt "Helsinki near you"
+msgid "Events near you"
+msgstr "Evenemang nära dig"
+
+msgctxt "Helsinki near you"
+msgid "Browse events near you, sorted by their start time"
+msgstr "Utforska evenemang i ordning efter deras starttid."
diff --git a/...tom/hdbt_subtheme/templates/module/helfi-etusivu/helsinki-near-you-results-page.html.twig b/...tom/hdbt_subtheme/templates/module/helfi-etusivu/helsinki-near-you-results-page.html.twig
@@ -16,5 +16,33 @@
         } %}
       {% endblock component_content %}
     {% endembed %}
+    {% embed "@hdbt/misc/component.twig" with
+      {
+        component_classes: [
+        'component--full-width',
+        'component--react-search',
+        'component--event-list',
+        'component--coordinates-based-event-list',
+        ],
+        component_title: 'Events near you'|trans({}, {'context': 'Helsinki near you'}),
+        component_description: 'Browse events near you, sorted by their start time'|trans({}, {'context': 'Helsinki near you'}),
+        component_content_class: 'event-list',
+      }
+    %}
+      {% block component_content %}
+        {# Hook React app to this div #}
+        <div
+          id="helfi-events-search"
+          data-paragraph-id="helfi-coordinates-based-event-list"
+        >
+        </div>
+        {# Indicate JS not enabled #}
+        <noscript>
+          <div class="event-list__javascript-disabled">
+            {{ 'You must enable JavaScript in your browser for event list to work'|t }}
+          </div>
+        </noscript>
+      {% endblock %}
+    {% endembed %}
   </div>
 </article>