From 71b429eb6109160418e5b5cb84bd0c9893701e7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Wed, 20 Oct 2021 18:46:55 +0200
Subject: [PATCH] WIP Migrate filterpanel

---
 .../Private/Partials/Search/FilterPanel.html  | 182 +++++++++++-------
 .../Private/Partials/Search/Main.html         |   2 +-
 2 files changed, 114 insertions(+), 70 deletions(-)

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 2c29dcde..8abe4c8e 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
@@ -10,54 +10,78 @@
 
         <div class="mb-4 p-4 bg-ep-primary text-white"
              data-controller="collapse"
-             data-collapse-collapsed-value="true">
+             data-collapse-collapsed-value="{f:if(condition: '{filterSettings.dateFrom} || {filterSettings.dateTo}', then: 'false', else: 'true')}">
             <button data-action="click->collapse#toggle"
                     class="flex items-center justify-between w-full">
                 <span class="uppercase font-bold">
-                    Reisezeitraum {ep:dateRange(dateFrom: filterSettings.dateFrom, dateTo: filterSettings.dateTo, includeLabel: 0)}
+                    Reisezeitraum
                 </span>
                 <svg class="w-6 h-6 text-white transform"
                      data-collapse-target="icon">
                     <use href="#icon-arrow-right"></use>
                 </svg>
             </button>
-            <div data-collapse-target="container"
-                 class="pt-2">
+            <div data-collapse-target="container">
                 <f:form.hidden property="dateFrom"
                                data="{'search-target': 'dateFrom'}"/>
                 <f:form.hidden property="dateTo"
                                data="{'search-target': 'dateTo'}"/>
-                <div data-controller="datepicker"
-                    <f:if condition="{filterSettings.dateFrom} && {filterSettings.dateTo}">
-                        data-datepicker-date-from-value="{filterSettings.dateFrom}"
-                        data-datepicker-date-to-value="{filterSettings.dateTo}"
-                    </f:if>
-                    data-datepicker-min-date-value="{f:format.date(date: 'now', format: 'Y-m-d')}">
-                    <f:if condition="{settings.datePickerPresets}">
-                        <div class="flex items-center justify-between pb-2">
-                            <f:for each="{settings.datePickerPresets}" as="preset">
-                                <button class="daterange__preset"
-                                        data-preset='{preset -> f:format.json()}'
-                                        data-action="datepicker#selectPreset">
-                                    <span>
-                                        {preset.label}
-                                    </span>
-                                </button>
-                            </f:for>
+
+                <div data-controller="collapse datepicker"
+                     data-datepicker-date-from-value="{filterSettings.dateFrom}"
+                     data-datepicker-date-to-value="{filterSettings.dateTo}"
+                     data-datepicker-min-date-value="{f:format.date(date: 'now', format: 'Y-m-d')}"
+                     data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
+                     data-collapse-collapsed-value="true">
+                    <div class="relative">
+                        <input type="text"
+                               data-action="click->collapse#toggle"
+                               class="w-full px-0 bg-transparent border-0 ring-0 focus:ring-0 text-white uppercase cursor-pointer placeholder-white"
+                               placeholder="Zeitraum"
+                               value="{ep:dateRange(dateFrom: filterSettings.dateFrom, dateTo: filterSettings.dateTo, includeLabel: 0)}"
+                               data-searchbar-target="dateRangeLabel"/>
+                        <svg class="w-6 h-6 text-white absolute right-0 top-0 mt-2 cursor-pointer"
+                             data-action="click->collapse#toggle">
+                            <use href="#icon-calendar"></use>
+                        </svg>
+                        <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">
+                            <div class="flex justify-between divide-x divide-gray-200">
+                                <div class="pr-2">
+                                    <input type="hidden"
+                                           data-datepicker-target="field">
+                                </div>
+                                <div class="flex-1 flex flex-col justify-between pl-2">
+                                    <f:if condition="{settings.datePickerPresets}">
+                                        <div class="flex flex-col space-y-4">
+                                            <f:for each="{settings.datePickerPresets}" as="preset">
+                                                <button class="button button--small button--light w-full"
+                                                        data-preset='{preset -> f:format.json() -> f:format.raw()}'
+                                                        data-action="datepicker#selectPreset">
+                                                                        <span>
+                                                                            {preset.label}
+                                                                        </span>
+                                                </button>
+                                            </f:for>
+                                        </div>
+                                    </f:if>
+                                    <div class="flex flex-col space-y-4">
+                                        <button class="button button--small button--light w-full"
+                                                data-action="collapse#close">
+                                            schließen
+                                        </button>
+                                        <button class="button button--small button--light w-full"
+                                                data-action="datepicker#reset">
+                                            zurücksetzen
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
-                    </f:if>
-                    <input type="hidden"
-                           data-datepicker-target="field">
-                    <div class="flex items-center justify-between pt-2">
-                        <button class="daterange__button focus:outline-none">
-                            schließen
-                        </button>
-                        <button class="daterange__button focus:outline-none"
-                                data-action="datepicker#reset">
-                            zurücksetzen
-                        </button>
                     </div>
                 </div>
+
+
             </div>
         </div>
 
@@ -108,23 +132,34 @@
                     </svg>
                 </button>
                 <div data-collapse-target="container">
-                    <ul class="mb-0 p-0">
+                    <ul class="mb-0 p-0 pt-2 space-y-1">
                         <f:for each="{filterOptions.destinations}" as="destination">
                             <li>
-                                <f:form.checkbox class="mr-2"
-                                                 property="countryUids"
-                                                 data="{action: 'search#filter'}"
-                                                 value="{destination.country.uid}"/>
-                                {destination.country.label}
+                                <label class="flex items-start">
+                                    <f:form.checkbox class="w-5 h-5 border-ep-primary ring-0 bg-transparent focus:ring-0 focus:border-none text-ep-primary"
+                                                     property="countryUids"
+                                                     data="{action: 'search#filter'}"
+                                                     value="{destination.country.uid}"/>
+                                    <svg class="ml-2 w-6 h-4">
+                                        <use href="#icon-flag-{destination.country.code -> f:format.case(mode: 'lower')}"/>
+                                    </svg>
+                                    <span class="pl-2 leading-none">
+                                        {destination.country.label}
+                                    </span>
+                                </label>
                                 <f:if condition="{destination.regions}">
-                                    <ul class="pl-4 pt-1">
+                                    <ul class="py-2 space-y-1">
                                         <f:for each="{destination.regions}" as="region">
                                             <li>
-                                                <f:form.checkbox class="mr-2"
-                                                                 property="regionUids"
-                                                                 data="{action: 'search#filter'}"
-                                                                 value="{region.uid}"/>
-                                                {region.label}
+                                                <label class="flex items-start">
+                                                    <f:form.checkbox class="w-5 h-5 border-ep-primary ring-0 bg-transparent focus:ring-0 focus:border-none text-ep-primary"
+                                                                     property="regionUids"
+                                                                     data="{action: 'search#filter'}"
+                                                                     value="{region.uid}"/>
+                                                    <span class="leading-none pl-4">
+                                                        {region.label}
+                                                    </span>
+                                                </label>
                                             </li>
                                         </f:for>
                                     </ul>
@@ -149,15 +184,17 @@
                     </svg>
                 </button>
                 <div data-collapse-target="container">
-                    <ul class="mb-0 p-0">
+                    <ul class="mb-0 p-0 pt-2 space-y-1">
                         <f:for each="{filterOptions.priceRanges}" as="range">
                             <li>
-                                <label>
-                                    <f:form.checkbox class="mr-2"
+                                <label class="flex items-start">
+                                    <f:form.checkbox class="w-5 h-5 border-ep-primary ring-0 bg-transparent focus:ring-0 focus:border-none text-ep-primary"
                                                      property="priceRanges"
                                                      data="{action: 'search#filter'}"
                                                      value="{range.uid}"/>
-                                    {ep:priceRange(min: range.min, max: range.max)}
+                                    <span class="leading-none pl-2">
+                                        {ep:priceRange(min: range.min, max: range.max)}
+                                    </span>
                                 </label>
                             </li>
                         </f:for>
@@ -179,11 +216,10 @@
                     </svg>
                 </button>
                 <div data-collapse-target="container">
-                    <div class="border rounded">
-                        <f:form.select property="pax"
-                                       options="{filterOptions.pax}"
-                                       data="{action: 'search#filter'}"/>
-                    </div>
+                    <f:form.select class="w-full border-0 focus:ring-0 bg-right mt-2 p-0"
+                                   property="pax"
+                                   options="{filterOptions.pax}"
+                                   data="{action: 'search#filter'}"/>
                 </div>
             </div>
 
@@ -208,15 +244,17 @@
                     </svg>
                 </button>
                 <div data-collapse-target="container">
-                    <ul class="mb-0 p-0">
+                    <ul class="mb-0 p-0 pt-2 space-y-1">
                         <f:for each="{filterOptions.hotelTypes}" as="type">
                             <li>
-                                <label>
-                                    <f:form.checkbox class="mr-2"
+                                <label class="flex items-start">
+                                    <f:form.checkbox class="w-5 h-5 border-ep-primary ring-0 bg-transparent focus:ring-0 focus:border-none text-ep-primary"
                                                      property="hotelTypes"
                                                      data="{action: 'search#filter'}"
                                                      value="{type}"/>
-                                    {hotelTypes.{type}}
+                                    <span class="leading-none pl-2">
+                                        {hotelTypes.{type}}
+                                    </span>
                                 </label>
                             </li>
                         </f:for>
@@ -238,16 +276,18 @@
                     </svg>
                 </button>
                 <div data-collapse-target="container">
-                    <ul class="mb-0 p-0">
+                    <ul class="mb-0 p-0 pt-2 space-y-1">
                         <f:for each="{filterOptions.boardTypes}" as="type">
                             <f:if condition="{type.label}">
                                 <li>
-                                    <label>
-                                        <f:form.checkbox class="mr-2"
+                                    <label class="flex items-start">
+                                        <f:form.checkbox class="w-5 h-5 border-ep-primary ring-0 bg-transparent focus:ring-0 focus:border-none text-ep-primary"
                                                          property="boardTypes"
                                                          data="{action: 'search#filter'}"
                                                          value="{type.uid}"/>
-                                        {type.label}
+                                        <span class="pl-2 leading-none">
+                                            {type.label}
+                                        </span>
                                     </label>
                                 </li>
                             </f:if>
@@ -278,15 +318,17 @@
                     </svg>
                 </button>
                 <div data-collapse-target="container">
-                    <ul class="mb-0 p-0 p-0">
+                    <ul class="mb-0 p-0 p-0 pt-2 space-y-1">
                         <f:for each="{filterOptions.roomTypes}" as="type">
                             <li>
-                                <label>
-                                    <f:form.checkbox class="mr-2"
+                                <label class="flex items-start">
+                                    <f:form.checkbox class="w-5 h-5 border-ep-primary ring-0 bg-transparent focus:ring-0 focus:border-none text-ep-primary"
                                                      property="roomTypes"
                                                      data="{action: 'search#filter'}"
                                                      value="{type}"/>
-                                    {roomTypes.{type}}
+                                    <span class="leading-none pl-2">
+                                        {roomTypes.{type}}
+                                    </span>
                                 </label>
                             </li>
                         </f:for>
@@ -309,14 +351,16 @@
                         </svg>
                     </button>
                     <div data-collapse-target="container">
-                        <ul class="mb-0 p-0">
+                        <ul class="mb-0 p-0 pt-2 space-y-1">
                             <li>
-                                <label>
-                                    <f:form.checkbox class="mr-2"
+                                <label class="flex items-start">
+                                    <f:form.checkbox class="w-5 h-5 border-ep-primary ring-0 bg-transparent focus:ring-0 focus:border-none text-ep-primary"
                                                      property="bus"
                                                      data="{action: 'search#filter'}"
                                                      value="1"/>
-                                    Busanreise
+                                    <span class="leading-none pl-2">
+                                        Busanreise
+                                    </span>
                                 </label>
                             </li>
                         </ul>
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 0d296331..26d3e901 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
@@ -5,7 +5,7 @@
     <div class="grid grid-cols-3 gap-8">
         <div class="col-span-3 lg:col-span-1 relative"
              data-controller="collapse"
-             data-collapse-until-value="991">
+             data-collapse-until-value="1024">
             <div class="lg:block bg-white p-4"
                  data-collapse-target="container">
                 <h3 class="headline headline--underlined mb-4">