From c6bb54e8de2857446ef4920b58f595568d2f642c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Tue, 12 Oct 2021 16:03:52 +0200
Subject: [PATCH] WIP Migrate filter panel

---
 .../Private/Partials/Search/FilterPanel.html  | 512 ++++++++++--------
 .../Private/Partials/Search/Main.html         |   6 +-
 2 files changed, 289 insertions(+), 229 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 30c6c257..2c29dcde 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
@@ -8,263 +8,323 @@
             pluginName="Ajax"
             data="{'search-target': 'form'}">
 
-        <div class="p-8 bg-cover text-white"
-             style="background-image: url( {f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/winter.jpg')} )">
-
-            <div class="mb-4"
-                 data-controller="collapse"
-                 data-collapse-collapsed-value="true">
-                <button data-action="click->collapse#toggle"
-                        class="flex items-center justify-between w-full">
-                    <span class="uppercase font-bold text-lg">
-                        Reisezeitraum {ep:dateRange(dateFrom: filterSettings.dateFrom, dateTo: filterSettings.dateTo, includeLabel: 0)}
-                    </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">
-                    <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>
-                        </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 class="mb-4 p-4 bg-ep-primary text-white"
+             data-controller="collapse"
+             data-collapse-collapsed-value="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)}
+                </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">
+                <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>
+                    </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>
 
-            <div data-controller="collapse"
-                 data-collapse-collapsed-value="{f:if(condition: '{filterSettings.conceptUids}', then: 'false', else: 'true')}">
+        <div class="mb-4 p-4 bg-ep-primary text-white"
+             data-controller="collapse"
+             data-collapse-collapsed-value="{f:if(condition: '{filterSettings.conceptUids}', then: 'false', else: 'true')}">
+            <button data-action="click->collapse#toggle"
+                    class="flex items-center justify-between w-full">
+                <span class="uppercase font-bold">
+                    Reisekonzepte
+                </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">
+                <ul class="mb-0 p-0 space-y-2">
+                    <f:for each="{filterOptions.concepts}" as="concept">
+                        <li>
+                            <label>
+                                <f:form.checkbox class="mr-2 rounded-full w-5 h-5 border-white ring-0 bg-transparent focus:ring-0 focus:border-none text-ep-primary"
+                                                 property="conceptUids"
+                                                 data="{action: 'search#filter'}"
+                                                 value="{concept.uid}"/>
+                                {concept.name}
+                            </label>
+                        </li>
+                    </f:for>
+                </ul>
+            </div>
+        </div>
+
+        <div class="px-4 divide-y">
+
+            <div class="py-2"
+                 data-controller="collapse"
+                 data-collapse-collapsed-value="{f:if(condition: '{filterSettings.countryUids} || {filterSettings.regionUids}', then: 'false', else: 'true')}">
                 <button data-action="click->collapse#toggle"
                         class="flex items-center justify-between w-full">
-                    <span class="uppercase font-bold text-lg">
-                        Reisekonzepte
+                    <span class="uppercase font-bold">
+                        Reiseziel
                     </span>
-                    <svg class="w-6 h-6 text-white transform"
+                    <svg class="w-6 h-6 transform"
                          data-collapse-target="icon">
                         <use href="#icon-arrow-right"></use>
                     </svg>
                 </button>
                 <div data-collapse-target="container">
                     <ul class="mb-0 p-0">
-                        <f:for each="{filterOptions.concepts}" as="concept">
+                        <f:for each="{filterOptions.destinations}" as="destination">
                             <li>
-                                <f:form.checkbox class="mr-2 rounded-full w-6 h-6 border-0 ring-0 focus:border-0 focus:ring-0"
-                                                 property="conceptUids"
+                                <f:form.checkbox class="mr-2"
+                                                 property="countryUids"
                                                  data="{action: 'search#filter'}"
-                                                 value="{concept.uid}"/>
-                                {concept.name}
+                                                 value="{destination.country.uid}"/>
+                                {destination.country.label}
+                                <f:if condition="{destination.regions}">
+                                    <ul class="pl-4 pt-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}
+                                            </li>
+                                        </f:for>
+                                    </ul>
+                                </f:if>
                             </li>
                         </f:for>
                     </ul>
                 </div>
             </div>
 
-        </div>
-
-        <div data-controller="collapse"
-             data-collapse-collapsed-value="{f:if(condition: '{filterSettings.countryUids} || {filterSettings.regionUids}', then: 'false', else: 'true')}">
-            <button data-action="click->collapse#toggle">
-                Reiseziel
-            </button>
-            <div data-collapse-target="container">
-                <ul class="mb-0 p-0">
-                    <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}
-                            <f:if condition="{destination.regions}">
-                                <ul class="pl-4 pt-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}
-                                        </li>
-                                    </f:for>
-                                </ul>
-                            </f:if>
-                        </li>
-                    </f:for>
-                </ul>
-            </div>
-        </div>
-
-        <div data-controller="collapse"
-             data-collapse-collapsed-value="{f:if(condition: '{filterSettings.priceRanges}', then: 'false', else: 'true')}">
-            <button data-action="click->collapse#toggle">
-                Preis
-            </button>
-            <div data-collapse-target="container">
-                <ul class="mb-0 p-0">
-                    <f:for each="{filterOptions.priceRanges}" as="range">
-                        <li>
-                            <label>
-                                <f:form.checkbox class="mr-2"
-                                                 property="priceRanges"
-                                                 data="{action: 'search#filter'}"
-                                                 value="{range.uid}"/>
-                                {ep:priceRange(min: range.min, max: range.max)}
-                            </label>
-                        </li>
-                    </f:for>
-                </ul>
-            </div>
-        </div>
-
-        <div data-controller="collapse"
-             data-collapse-collapsed-value="{f:if(condition: '{filterSettings.pax} > 1', then: 'false', else: 'true')}">
-            <button data-action="click->collapse#toggle">
-                Personen
-            </button>
-            <div data-collapse-target="container">
-                <div class="border rounded">
-                    <f:form.select property="pax"
-                                   options="{filterOptions.pax}"
-                                   data="{action: 'search#filter'}"/>
-                </div>
-            </div>
-        </div>
-
-        <f:variable name="hotelTypes" value="{
-                        1: 'Ferienwohnung',
-                        2: 'Sportclub',
-                        3: 'Appartment',
-                        4: 'Gästehaus',
-                        5: 'Pension'
-                    }"/>
-        <div data-controller="collapse"
-             data-collapse-collapsed-value="{f:if(condition: '{filterSettings.hotelTypes}', then: 'false', else: 'true')}">
-            <label data-action="click->collapse#toggle">
-                Unterkunft
-            </label>
-            <div data-collapse-target="container">
-                <ul class="mb-0 p-0">
-                    <f:for each="{filterOptions.hotelTypes}" as="type">
-                        <li>
-                            <label>
-                                <f:form.checkbox class="mr-2"
-                                                 property="hotelTypes"
-                                                 data="{action: 'search#filter'}"
-                                                 value="{type}"/>
-                                {hotelTypes.{type}}
-                            </label>
-                        </li>
-                    </f:for>
-                </ul>
-            </div>
-        </div>
-
-        <div data-controller="collapse"
-             data-collapse-collapsed-value="{f:if(condition: '{filterSettings.boardTypes}', then: 'false', else: 'true')}">
-            <label data-action="click->collapse#toggle">
-                Verpflegung
-            </label>
-            <div data-collapse-target="container">
-                <ul class="mb-0 p-0">
-                    <f:for each="{filterOptions.boardTypes}" as="type">
-                        <f:if condition="{type.label}">
+            <div class="py-2"
+                 data-controller="collapse"
+                 data-collapse-collapsed-value="{f:if(condition: '{filterSettings.priceRanges}', then: 'false', else: 'true')}">
+                <button data-action="click->collapse#toggle"
+                        class="flex items-center justify-between w-full">
+                    <span class="uppercase font-bold">
+                        Preis
+                    </span>
+                    <svg class="w-6 h-6 transform"
+                         data-collapse-target="icon">
+                        <use href="#icon-arrow-right"></use>
+                    </svg>
+                </button>
+                <div data-collapse-target="container">
+                    <ul class="mb-0 p-0">
+                        <f:for each="{filterOptions.priceRanges}" as="range">
                             <li>
                                 <label>
                                     <f:form.checkbox class="mr-2"
-                                                     property="boardTypes"
+                                                     property="priceRanges"
                                                      data="{action: 'search#filter'}"
-                                                     value="{type.uid}"/>
-                                    {type.label}
+                                                     value="{range.uid}"/>
+                                    {ep:priceRange(min: range.min, max: range.max)}
                                 </label>
                             </li>
-                        </f:if>
-                    </f:for>
-                </ul>
-            </div>
-        </div>
-
-        <f:variable name="roomTypes" value="{
-                        1: 'EZ',
-                        2: 'DZ / 2er',
-                        3: '3er',
-                        4: '4er',
-                        5: 'ab 5 Pers.',
-                        6: 'mit anderen'
-                    }"/>
-        <div data-controller="collapse"
-             data-collapse-collapsed-value="{f:if(condition: '{filterSettings.roomTypes}', then: 'false', else: 'true')}">
-            <label data-action="click->collapse#toggle">
-                Zimmerarten/Apart.
-            </label>
-            <div data-collapse-target="container">
-                <ul class="mb-0 p-0 p-0">
-                    <f:for each="{filterOptions.roomTypes}" as="type">
-                        <li>
-                            <label>
-                                <f:form.checkbox class="mr-2"
-                                                 property="roomTypes"
-                                                 data="{action: 'search#filter'}"
-                                                 value="{type}"/>
-                                {roomTypes.{type}}
-                            </label>
-                        </li>
-                    </f:for>
-                </ul>
-            </div>
-        </div>
-
-        <f:if condition="{filterOptions.busAvailable}">
-            <div data-controller="collapse"
-                 data-collapse-collapsed-value="{f:if(condition: filterSettings.bus, then: 'false', else: 'true')}">
-                <label data-action="click->collapse#toggle">
-                    Anreise
-                </label>
-                <div data-collapse-target="container">
-                    <ul class="mb-0 p-0">
-                        <li>
-                            <label>
-                                <f:form.checkbox class="mr-2"
-                                                 property="bus"
-                                                 data="{action: 'search#filter'}"
-                                                 value="1"/>
-                                Busanreise
-                            </label>
-                        </li>
+                        </f:for>
                     </ul>
                 </div>
             </div>
-        </f:if>
+
+            <div class="py-2"
+                 data-controller="collapse"
+                 data-collapse-collapsed-value="{f:if(condition: '{filterSettings.pax} > 1', then: 'false', else: 'true')}">
+                <button data-action="click->collapse#toggle"
+                        class="flex items-center justify-between w-full">
+                    <span class="uppercase font-bold">
+                        Personen
+                    </span>
+                    <svg class="w-6 h-6 transform"
+                         data-collapse-target="icon">
+                        <use href="#icon-arrow-right"></use>
+                    </svg>
+                </button>
+                <div data-collapse-target="container">
+                    <div class="border rounded">
+                        <f:form.select property="pax"
+                                       options="{filterOptions.pax}"
+                                       data="{action: 'search#filter'}"/>
+                    </div>
+                </div>
+            </div>
+
+            <f:variable name="hotelTypes" value="{
+                            1: 'Ferienwohnung',
+                            2: 'Sportclub',
+                            3: 'Appartment',
+                            4: 'Gästehaus',
+                            5: 'Pension'
+                        }"/>
+            <div class="py-2"
+                 data-controller="collapse"
+                 data-collapse-collapsed-value="{f:if(condition: '{filterSettings.hotelTypes}', then: 'false', else: 'true')}">
+                <button data-action="click->collapse#toggle"
+                        class="flex items-center justify-between w-full">
+                    <span class="uppercase font-bold">
+                        Unterkunft
+                    </span>
+                    <svg class="w-6 h-6 transform"
+                         data-collapse-target="icon">
+                        <use href="#icon-arrow-right"></use>
+                    </svg>
+                </button>
+                <div data-collapse-target="container">
+                    <ul class="mb-0 p-0">
+                        <f:for each="{filterOptions.hotelTypes}" as="type">
+                            <li>
+                                <label>
+                                    <f:form.checkbox class="mr-2"
+                                                     property="hotelTypes"
+                                                     data="{action: 'search#filter'}"
+                                                     value="{type}"/>
+                                    {hotelTypes.{type}}
+                                </label>
+                            </li>
+                        </f:for>
+                    </ul>
+                </div>
+            </div>
+
+            <div class="py-2"
+                 data-controller="collapse"
+                 data-collapse-collapsed-value="{f:if(condition: '{filterSettings.boardTypes}', then: 'false', else: 'true')}">
+                <button data-action="click->collapse#toggle"
+                        class="flex items-center justify-between w-full">
+                    <span class="uppercase font-bold">
+                        Verpflegung
+                    </span>
+                    <svg class="w-6 h-6 transform"
+                         data-collapse-target="icon">
+                        <use href="#icon-arrow-right"></use>
+                    </svg>
+                </button>
+                <div data-collapse-target="container">
+                    <ul class="mb-0 p-0">
+                        <f:for each="{filterOptions.boardTypes}" as="type">
+                            <f:if condition="{type.label}">
+                                <li>
+                                    <label>
+                                        <f:form.checkbox class="mr-2"
+                                                         property="boardTypes"
+                                                         data="{action: 'search#filter'}"
+                                                         value="{type.uid}"/>
+                                        {type.label}
+                                    </label>
+                                </li>
+                            </f:if>
+                        </f:for>
+                    </ul>
+                </div>
+            </div>
+
+            <f:variable name="roomTypes" value="{
+                            1: 'EZ',
+                            2: 'DZ / 2er',
+                            3: '3er',
+                            4: '4er',
+                            5: 'ab 5 Pers.',
+                            6: 'mit anderen'
+                        }"/>
+            <div class="py-2"
+                 data-controller="collapse"
+                 data-collapse-collapsed-value="{f:if(condition: '{filterSettings.roomTypes}', then: 'false', else: 'true')}">
+                <button data-action="click->collapse#toggle"
+                        class="flex items-center justify-between w-full">
+                    <span class="uppercase font-bold">
+                        Zimmerarten/Apart.
+                    </span>
+                    <svg class="w-6 h-6 transform"
+                         data-collapse-target="icon">
+                        <use href="#icon-arrow-right"></use>
+                    </svg>
+                </button>
+                <div data-collapse-target="container">
+                    <ul class="mb-0 p-0 p-0">
+                        <f:for each="{filterOptions.roomTypes}" as="type">
+                            <li>
+                                <label>
+                                    <f:form.checkbox class="mr-2"
+                                                     property="roomTypes"
+                                                     data="{action: 'search#filter'}"
+                                                     value="{type}"/>
+                                    {roomTypes.{type}}
+                                </label>
+                            </li>
+                        </f:for>
+                    </ul>
+                </div>
+            </div>
+
+            <f:if condition="{filterOptions.busAvailable}">
+                <div class="py-2"
+                     data-controller="collapse"
+                     data-collapse-collapsed-value="{f:if(condition: filterSettings.bus, then: 'false', else: 'true')}">
+                    <button data-action="click->collapse#toggle"
+                            class="flex items-center justify-between w-full">
+                    <span class="uppercase font-bold">
+                        Anreise
+                    </span>
+                        <svg class="w-6 h-6 transform"
+                             data-collapse-target="icon">
+                            <use href="#icon-arrow-right"></use>
+                        </svg>
+                    </button>
+                    <div data-collapse-target="container">
+                        <ul class="mb-0 p-0">
+                            <li>
+                                <label>
+                                    <f:form.checkbox class="mr-2"
+                                                     property="bus"
+                                                     data="{action: 'search#filter'}"
+                                                     value="1"/>
+                                    Busanreise
+                                </label>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </f:if>
+
+        </div>
 
     </f:form>
 
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 838fdd07..0d296331 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
@@ -6,13 +6,13 @@
         <div class="col-span-3 lg:col-span-1 relative"
              data-controller="collapse"
              data-collapse-until-value="991">
-            <div class="lg:block bg-white"
+            <div class="lg:block bg-white p-4"
                  data-collapse-target="container">
-                <h3 class="headline headline--underlined px-8 py-4">
+                <h3 class="headline headline--underlined mb-4">
                     Filter
                 </h3>
                 <f:render partial="Search/FilterPanel" arguments="{_all}"/>
-                <div class="px-8 py-4">
+                <div class="mt-4">
                     <button class="button button--secondary w-full"
                             data-action="search#reset">
                         Filter zurücksetzen