From b935820e1694901897f1943044c3b34d6fdf5021 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Thu, 16 Sep 2021 17:53:08 +0200
Subject: [PATCH] WIP Migrate searchbox

---
 .../Configuration/TypoScript/setup.typoscript |  4 +-
 .../Resources/Private/Partials/Mobilenav.html |  2 +-
 .../Private/Templates/Search/Searchbox.html   | 81 ++++++++-----------
 3 files changed, 37 insertions(+), 50 deletions(-)

diff --git a/public/typo3conf/ext/ep_products/Configuration/TypoScript/setup.typoscript b/public/typo3conf/ext/ep_products/Configuration/TypoScript/setup.typoscript
index 0ae7f0cc..311aec7f 100644
--- a/public/typo3conf/ext/ep_products/Configuration/TypoScript/setup.typoscript
+++ b/public/typo3conf/ext/ep_products/Configuration/TypoScript/setup.typoscript
@@ -47,6 +47,7 @@ plugin.tx_epproducts {
         groupsPricePopupPageUid = {$plugin.tx_eptheme.settings.groupsPricePopupPageUid}
         groupsPriceToEmail = {$plugin.tx_epproducts.settings.groupsPriceToEmail}
         groupsPriceToName = {$plugin.tx_epproducts.settings.groupsPriceToName}
+        logoImage = {$plugin.tx_eptheme.settings.logoImage}
         datePickerPresets {
             1 {
                label = Silvester
@@ -103,9 +104,6 @@ plugin.tx_epproducts {
             }
         }
     }
-    features {
-        requireCHashArgumentForActionArguments = 0
-    }
 }
 
 config.tx_extbase.persistence.classes {
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mobilenav.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mobilenav.html
index 4f051d55..8213b896 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mobilenav.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mobilenav.html
@@ -4,7 +4,7 @@
       xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
 
     <f:section name="Main">
-        <div class="fixed lg:hidden top-0 left-0 inset-0 w-screen h-screen pt-14 pb-10 z-50 bg-gray-700 transform hidden"
+        <div class="fixed lg:hidden top-0 left-0 inset-0 w-screen h-screen pt-14 pb-10 z-50 bg-gray-700 hidden"
              data-controller="overlay-toggle"
              data-overlay-toggle-id-value="mobilenav"
              data-overlay-toggle-target="overlay"
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchbox.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchbox.html
index 8381889b..0b703973 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchbox.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchbox.html
@@ -5,69 +5,58 @@
     <f:layout name="Default"/>
 
     <f:section name="Main">
-        <div class="fixed lg:hidden top-0 left-0 inset-0 w-screen h-screen z-100 overflow-y-scroll bg-cover bg-gray-700 transform hidden-lg hidden"
+        <div class="fixed lg:hidden top-0 left-0 inset-0 w-screen h-screen pt-14 pb-10 z-50 bg-gray-700 hidden"
              data-controller="overlay-toggle"
              data-overlay-toggle-id-value="search"
              data-overlay-toggle-target="overlay"
              data-action="overlay-toggle:toggle@window->overlay-toggle#toggle">
-            <div class="relative bg-ep-primary">
-                <div class="fixed top-0 left-0 inset-x-0 px-8 py-2 flex justify-end bg-ep-primary">
-                    <button class="focus:outline-none" data-action="overlay-toggle#invokeToggle">
-                        <svg class="w-10 h-10 text-white">
-                            <use href="#icon-close"></use>
-                        </svg>
-                    </button>
-                </div>
+            <div class="fixed top-0 left-0 z-100 inset-x-0 px-4 py-2 flex justify-between bg-white shadow-md">
+                <a href="{f:uri.typolink(parameter: settings.defaultHomeUid)}"
+                   class="block lg:pb-4"
+                   title="{settings.defaultTitle}">
+                    <img class="block h-10 lg:h-12 w-auto" src="{f:uri.image(src: settings.logoImage)}" alt="{settings.defaultTitle}">
+                </a>
+                <button class="focus:outline-none" data-action="overlay-toggle#invokeToggle">
+                    <svg class="w-8 h-8">
+                        <use href="#icon-close"></use>
+                    </svg>
+                </button>
+            </div>
+            <div class="h-full w-full overflow-y-scroll p-4">
                 <f:form action="processSearch" controller="Search" method="post" name="searchParams"
                         object="{searchParams}" pluginName="searchresult" extensionName="epproducts"
-                        pageUid="{settings.defaultSearchPageUid}" class="form-horizontal">
-                    <f:form.hidden property="destinationUid" additionalAttributes="{x-model: 'searchParams.destinationUid'}"/>
-                    <f:form.hidden property="destinationType" additionalAttributes="{x-model: 'searchParams.destinationType'}"/>
-                    <f:form.hidden property="dateFrom" value="" additionalAttributes="{x-model: 'searchParams.dateFrom'}"/>
-                    <f:form.hidden property="dateTo" value="" additionalAttributes="{x-model: 'searchParams.dateTo'}"/>
-                    <f:form.hidden property="nights" additionalAttributes="{x-model: 'searchParams.nights'}"/>
-                    <f:form.hidden property="pax" additionalAttributes="{x-model: 'searchParams.pax'}"/>
-                    <f:form.hidden property="conceptUid" additionalAttributes="{x-model: 'searchParams.conceptUid'}"/>
-                    <f:form.hidden property="pageUid" additionalAttributes="{x-model: 'searchParams.pageUid'}"/>
-                    <div class="form-group">
+                        pageUid="{settings.defaultSearchPageUid}">
+                    <f:form.hidden property="dateFrom" data="{'searchbar-target': 'dateFrom'}"/>
+                    <f:form.hidden property="dateTo" data="{'searchbar-target': 'dateTo'}"/>
+                    <f:form.hidden property="pax" data="{'searchbar-target': 'pax'}"/>
+                    <f:form.hidden property="destinationUid" data="{'searchbar-target': 'destinationUid'}"/>
+                    <f:form.hidden property="destinationType" data="{'searchbar-target': 'destinationType'}"/>
+                    <f:form.hidden property="priceRange" data="{'searchbar-target': 'priceRange'}"/>
+
                         <label>Früheste Anreise</label>
                         <input
                             type="date"
-                            x-model="searchParams.dateFrom"
-                            x-bind:min="filterOptions.dateFrom"
-                            x-bind:max="filterOptions.dateTo"
-                            x-on:change="load()"
-                            x-bind:disabled="loading"
-                            class="border-gray-400 focus:border-gray-800"
-                        >
-                    </div>
-                    <div class="form-group">
+                            class="border-gray-400 focus:border-gray-800">
+
                         <label>Späteste Abreise</label>
                         <input
                             type="date"
-                            x-model="searchParams.dateTo"
-                            x-bind:min="filterOptions.dateFrom"
-                            x-bind:max="filterOptions.dateTo"
-                            x-on:change="load()"
-                            x-bind:disabled="loading"
-                            class="border-gray-400 focus:border-gray-800"
-                        >
-                    </div>
-                    <div class="form-group">
+                            class="border-gray-400 focus:border-gray-800">
+
                         <label>Personen</label>
                         <input
                             type="number"
                             min="1"
                             max="20"
-                            x-model="searchParams.pax"
-                            x-on:change="load()"
-                            x-bind:disabled="loading"
-                            class="border-gray-400 focus:border-gray-800"
-                        >
-                    </div>
-                    <div class="form-group">
-                        <button type="submit" class="btn btn-warning">Suchen <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></button>
-                        <button type="submit" class="searchbox__link">Detailsuche</button>
+                            class="border-gray-400 focus:border-gray-800">
+
+                    <div class="grid grid-cols-2 gap-4">
+                        <button type="submit" class="button">
+                            Suchen
+                        </button>
+                        <button type="submit" class="button button--secondary">
+                            Detailsuche
+                        </button>
                     </div>
                 </f:form>
             </div>