From 9cf746e016e1fe73738721f567e087bfb3afc877 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Sat, 21 Aug 2021 17:30:06 +0200
Subject: [PATCH] WIP Migrate to stimulus.js and tailwind

---
 .../Assets/scss/components/_datepicker.scss   | 15 ++-----
 .../Private/Partials/Search/FilterPanel.html  | 36 +++++++----------
 .../Private/Partials/Search/Main.html         |  2 +-
 .../Private/Partials/Search/Result.html       |  3 +-
 .../Templates/Search/Searchresult.html        | 39 ++++++++-----------
 .../Private/Templates/Searchbar/Index.html    |  4 +-
 .../typo3conf/ext/ep_theme/ext_localconf.php  |  2 +
 7 files changed, 40 insertions(+), 61 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_datepicker.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_datepicker.scss
index 7abc8b1f..f7d7fc04 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_datepicker.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_datepicker.scss
@@ -5,7 +5,7 @@
 }
 
 .flatpickr-calendar {
-    box-shadow: none;
+    @apply shadow-none;
 
     &.inline {
         border: none !important;
@@ -15,22 +15,15 @@
 .flatpickr-calendar {
 
     &.inline {
-        border: 1px solid theme('colors.gray.400');
+        @apply border border-gray-400;
     }
-
-    &.centered {
-        margin: 0 auto 16px;
-    }
-
 }
 
 .flatpickr-day {
-    border-radius: 4px;
-    margin: 3px 0;
+    @apply rounded my-2 mx-0;
 
     &.available:not(.inRange) {
-        color: white;
-        background-color: theme('colors.green.500');
+        @apply text-white bg-green-500;
     }
 }
 
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/FilterPanel.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/FilterPanel.html
index ce67cd88..b4d503da 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/FilterPanel.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/FilterPanel.html
@@ -9,19 +9,14 @@
             data="{'search-target': 'form'}">
         <div class="border rounded p-4">
 
-            <div class="mb-2 pb-2 border-b"
+            <div class="relative mb-2 pb-2 border-b"
                  data-controller="collapse"
-                 data-collapse-collapsed-value="{f:if(condition: '{filterSettings.dateFrom} || {filterSettings.dateTo}', then: 'false', else: 'true')}">
-                <label class="cursor-pointer"
-                       data-action="click->collapse#toggle">
-                    Zeitraum
-                </label>
-                <div data-collapse-target="container">
-                    <input type="text"
-                           data-search-target="dateRangeLabel"
-                           class="cursor-pointer focus:outline-none"
-                           value="{ep:dateRange(dateFrom: filterSettings.dateFrom, dateTo: filterSettings.dateTo, includeLabel: 0)}"
-                           placeholder="von... bis">
+                 data-collapse-collapsed-value="true">
+                <button data-action="click->collapse#toggle">
+                    Zeitraum {ep:dateRange(dateFrom: filterSettings.dateFrom, dateTo: filterSettings.dateTo, includeLabel: 0)}
+                </button>
+                <div class="hidden absolute z-20 top-100 mt-2 left-0 min-w-full bg-white p-4 shadow-md rounded"
+                     data-collapse-target="container">
                     <f:form.hidden property="dateFrom"
                                    data="{'search-target': 'dateFrom'}"/>
                     <f:form.hidden property="dateTo"
@@ -63,10 +58,9 @@
         <div class="mb-2 pb-2 border-b"
              data-controller="collapse"
              data-collapse-collapsed-value="{f:if(condition: '{filterSettings.countryUids} || {filterSettings.regionUids}', then: 'false', else: 'true')}">
-            <label class="cursor-pointer"
-                   data-action="click->collapse#toggle">
+            <button data-action="click->collapse#toggle">
                 Reiseziel
-            </label>
+            </button>
             <div data-collapse-target="container">
                 <ul class="mb-0 p-0">
                     <f:for each="{filterOptions.destinations}" as="destination">
@@ -98,9 +92,9 @@
         <div class="mb-2 pb-2 border-b"
              data-controller="collapse"
              data-collapse-collapsed-value="{f:if(condition: '{filterSettings.conceptUids}', then: 'false', else: 'true')}">
-            <label data-action="click->collapse#toggle">
+            <button data-action="click->collapse#toggle">
                 Reisekonzepte
-            </label>
+            </button>
             <div data-collapse-target="container">
                 <ul class="mb-0 p-0">
                     <f:for each="{filterOptions.concepts}" as="concept">
@@ -119,9 +113,9 @@
         <div class="mb-2 pb-2 border-b"
              data-controller="collapse"
              data-collapse-collapsed-value="{f:if(condition: '{filterSettings.priceRanges}', then: 'false', else: 'true')}">
-            <label data-action="click->collapse#toggle">
+            <button data-action="click->collapse#toggle">
                 Preis
-            </label>
+            </button>
             <div data-collapse-target="container">
                 <ul class="mb-0 p-0">
                     <f:for each="{filterOptions.priceRanges}" as="range">
@@ -142,9 +136,9 @@
         <div class="mb-2 pb-2 border-b"
              data-controller="collapse"
              data-collapse-collapsed-value="{f:if(condition: '{filterSettings.pax} > 1', then: 'false', else: 'true')}">
-            <label data-action="click->collapse#toggle">
+            <button data-action="click->collapse#toggle">
                 Personen
-            </label>
+            </button>
             <div data-collapse-target="container">
                 <div class="border rounded">
                     <select name="pax"
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/Main.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/Main.html
index 00a59354..2b7524c7 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/Main.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/Main.html
@@ -15,7 +15,7 @@
             <div class="lg:block"
                  data-collapse-target="container">
                 <h3>Filter</h3>
-                <button class="button button--small w-full"
+                <button class="button button--small w-full my-4"
                         data-action="search#reset">
                     Filter zurücksetzen
                 </button>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/Result.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/Result.html
index b8922ce7..f22542eb 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/Result.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/Result.html
@@ -1,9 +1,8 @@
 <html data-namespace-typo3-fluid="true" lang="en"
       xmlns="http://www.w3.org/1999/xhtml"
-      xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
       xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
 
-    <div class="searchresult__info alert alert-info">
+    <div class="bg-ep-primary text-white p-4 mb-4">
         Deine Suche
         <f:if condition="{meta.organic}">
             <f:then>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchresult.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchresult.html
index afef8324..a8be9b95 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchresult.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchresult.html
@@ -1,30 +1,23 @@
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en"
-      xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
-      xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
 
     <f:layout name="Default"/>
 
     <f:section name="Main">
-        <div id="search">
-            <div class="searchresult-wrapper">
-                <div class="pagehead pagehead--searchresult">
-                    <div class="pagehead__image"
-                         style="background-image: url({f:uri.image(src: settings.searchPageHeaderImage, width: '1366', height: '160c+100')})"></div>
-                </div>
-                <div class="container relative"
-                     data-controller="search"
-                     data-search-uri-value="{ep:uri.ajax(controller: 'AjaxSearch', action: 'searchresult', pageUid: settings.defaultAjaxUid, format: 'html')}"
-                     data-action="datepicker:range-select->search#selectDateRange">
-                    <div data-search-target="resultsContainer">
-                        <f:render partial="Search/Main" arguments="{_all}"/>
-                    </div>
-                    <div class="absolute z-20 inset-0 w-full h-fill bg-overlay-white hidden"
-                         data-search-target="loadingIndicator">
-                        <div class="absolute mt-16 top-0 left-1/2 transform -translate-x-1/2 flex items-center space-x-4 alert alert-info">
-                            <f:image src="EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif" alt="Loading" />
-                            <span>Suchergebnis wird geladen...</span>
-                        </div>
-                    </div>
+        <f:image src="{settings.searchPageHeaderImage}"
+                 width="1366" height="160c+100"
+                 class="block w-full h-auto -mt-16 mb-8"/>
+        <div class="container relative"
+             data-controller="search"
+             data-search-uri-value="{ep:uri.ajax(controller: 'AjaxSearch', action: 'searchresult', pageUid: settings.defaultAjaxUid, format: 'html')}"
+             data-action="datepicker:range-select->search#selectDateRange">
+            <div data-search-target="resultsContainer">
+                <f:render partial="Search/Main" arguments="{_all}"/>
+            </div>
+            <div class="absolute z-20 inset-0 w-full h-fill bg-overlay-white hidden"
+                 data-search-target="loadingIndicator">
+                <div class="absolute mt-16 top-0 left-1/2 transform -translate-x-1/2 flex items-center space-x-4 alert alert-info">
+                    <f:image src="EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif" alt="Loading" />
+                    <span>Suchergebnis wird geladen...</span>
                 </div>
             </div>
         </div>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html
index 2497cfd6..d8b6a6e8 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html
@@ -1,6 +1,4 @@
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en"
-      xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
-      xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
 
     <f:layout name="Default"/>
 
diff --git a/public/typo3conf/ext/ep_theme/ext_localconf.php b/public/typo3conf/ext/ep_theme/ext_localconf.php
index 348ee34a..8a406393 100644
--- a/public/typo3conf/ext/ep_theme/ext_localconf.php
+++ b/public/typo3conf/ext/ep_theme/ext_localconf.php
@@ -22,6 +22,8 @@ $GLOBALS['TYPO3_CONF_VARS']['FE']['addRootLineFields'] = 'tx_eptheme_slides';
 $GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['default'] = 'EXT:ep_theme/Configuration/RTE/Default.yaml';
 $GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['ep-reisen'] = 'EXT:ep_theme/Configuration/RTE/Default.yaml';
 
+$GLOBALS['TYPO3_CONF_VARS']['SYS']['fluid']['namespaces']['ep'] = ['EP\\EpTheme\\ViewHelpers'];
+
 $metaTagManagerRegistry = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\TYPO3\CMS\Core\MetaTag\MetaTagManagerRegistry::class);
 $metaTagManagerRegistry->registerManager(
     'ep_opengraph',