templates/component/header/filter_bar.html.twig line 1

Open in your IDE?
  1. {# 
  2.     component: filter bar
  4.     research: { (Présente à la page recherche)
  5.         searchItem {string}: Intitulé de l'élément recherché (Hôtel seul, Thalasso avec hébergement, Thalasso & SPA ou Idées cadeaux)
  6.         searchResults {string}: Nombre d'éléments trouvés pendant la recherche
  7.     }
  9. #}
  12. {% set jsComponentId = "filter-bar" %}
  14. {% if selected_params is defined %}
  15.     {% if selected_params.date_start is defined %}
  16.         {% set selected_date = selected_params.date_start|replace({'/': '-'})|date("m/d/Y") %}
  17.     {% else %}
  18.         {% set selected_date = "now"|date("m/d/Y") %}
  19.     {% endif %}
  21.     {% set data = getFilterBarParams(app.request.getLocale() ,selected_params) %}
  22. {% else %}
  23.     {% set data = getFilterBarParams( app.request.getLocale() ) %}
  24.     {% set selected_date =  "now"|date("m/d/Y") %}
  25. {% endif %}
  27. {% set props = {
  28.         bookingtitle:null,
  29.         research:{
  30.             searchItem: null,
  31.             searchItemId: null,
  32.             searchResults: null,
  33.             selected_date: selected_date,
  34.         }
  35. }|merge(props|default({}))  %}
  37. {% if app.request.getLocale() == "en" %}
  38.     {% set route_search = "render_mlc_recherche_en" %}
  39. {% else %}
  40.     {% set route_search = "render_mlc_recherche" %}
  41. {% endif %}
  44. <form action="{{ path('' ~ route_search ,{_locale:app.request.getLocale()}) }}" method="POST" class="l-container FilterBar-component FilterBar" data-component="{{ jsComponentId }}" data-lang="{{ app.request.getLocale() }}" data-research="{{ props.research|json_encode() }}" data-selected="{{ data.selected|json_encode() }}" data-setsitems="{{ data.setsitems|json_encode() }}" data-bookingtitle="{{ props.bookingtitle|json_encode() }}">
  45.     <div class="FilterBar-searchResults" v-if="research.searchResults">
  46.         <p v-html="research.searchResults"></p>
  47.     </div>
  48.     <div class="FilterBar-container">
  49.         <div class="FilterBar-items">
  50.             <div class="FilterBar-selected" :class="{research: research.searchResults}">
  51.                 <v-select :options="options" value='id' label="label" item-value="id" item-text="label" v-model="selected_option" class="FilterBar-select" :searchable="false" :clearable="false" @input="onChange"></v-select>
  52.                 <input type="hidden" :value="selected_option.id" name="type_bar"/>
  53.             </div>
  54.             <div class="FilterBar-ItemContainer" v-for="setItem in set">
  55.                 <div class="FilterBar-Item">
  56.                     <div class="FilterBar-CalendarItem" v-if="setItem.item === 'calendar'">
  57.                         <div data-component="svg" class="Svg-component" v-bind:class="setItem.icon">
  58.                             <svg>
  59.                                 <use v-bind="{ 'xlink:href':  '#' + setItem.icon }"/>
  60.                             </svg>
  61.                         </div>
  62.                         <div class="FilterBar-SelectItem-details">
  63.                             <span class="FilterBar-ItemTitle" v-if="setItem">${ setItem.text }</span>
  64.                             <datepicker name="date_start" class="FilterBar-datepicker" :monday-first="true" :disabled-dates="disabledDates" :format="customFormatter" :language="datePickerLang" ref="datepicker" v-model="datepicker_value"></datepicker>
  65.                             <div class="vs__actions">
  66.                                 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" role="presentation" class="vs__open-indicator">
  67.                                     <path d="M9.211364 7.59931l4.48338-4.867229c.407008-.441854.407008-1.158247 0-1.60046l-.73712-.80023c-.407008-.441854-1.066904-.441854-1.474243 0L7 5.198617 2.51662.33139c-.407008-.441853-1.066904-.441853-1.474243 0l-.737121.80023c-.407008.441854-.407008 1.158248 0 1.600461l4.48338 4.867228L7 10l2.211364-2.40069z"></path>
  68.                                 </svg>
  69.                             </div>
  70.                         </div>
  71.                     </div>
  72.                     <div class="FilterBar-SelectItem" v-else>
  73.                         <div data-component="svg" class="Svg-component" v-bind:class="setItem.icon">
  74.                             <svg>
  75.                                 <use v-bind="{ 'xlink:href':  '#' + setItem.icon }"/>
  76.                             </svg>
  77.                         </div>
  78.                         <div class="FilterBar-SelectItem-details">
  79.                             <span class="FilterBar-ItemTitle" v-if="setItem">${ setItem.text }</span>
  80.                             <v-select :options="setItem.values" value='id' label="text" item-value="id" item-text="text" v-model="setItem.value" class="FilterBar-select" :searchable="false" :clearable="false"></v-select>
  81.                             <input type="hidden" :value="setItem.value.id" :name="setItem.item"/>
  82.                         </div>
  83.                     </div>
  84.                 </div>
  85.             </div>
  86.         </div>
  87.         {# Submit button #}
  88.         {% include "component/button.html.twig" with {
  89.             class: 'BookingSearch-submitButton',
  90.             props: {
  91.                 text: "filtre_bar.search.libelle"|trans,
  92.                 title: '',
  93.                 type:"sumbit"
  94.             }
  95.         } %}
  96.     </div>
  99.     <div class="FilterBarMobile-container">
  100.         <div class="FilterBarMobile-openContainer">
  101.             <div class="FilterBarMobile-open" @click="openSlide(0)">
  102.                 <p>${ bookingtitle }</p>
  103.                 {% include "component/svg.html.twig" with {
  104.                         props: {
  105.                             name: 'arrow-simple-right'
  106.                         }
  107.                     } %}
  108.             </div>
  109.         </div>
  110.         <div class="FilterBarMobile-slideContainer">
  111.             <div class="FilterBarMobileheader">
  112.                 <div class="FilterBarMobile-closeContainer" @click="closeSlide(0)">
  113.                     <span class="FilterMobile-closeContainer-cross"></span>
  114.                 </div>
  116.                 <p>${ bookingtitle }</p>
  117.             </div>
  118.             <div class="FilterBarMobile-slides">
  119.                 <div class="FilterBarMobile-slide">
  120.                     <div class="FilterBarMobile-items">
  121.                         <div class="FilterBarMobile-selected" :class="{research: research.searchResults}">
  122.                             <v-select disable :options="options" value='id' label="label" item-value="id" item-text="label" v-model="selected_option" class="FilterBar-select" :searchable="false" :clearable="false" @input="onChange"></v-select>
  123.                             <input type="hidden" :value="selected_option.id" name="type_bar"/>
  124.                         </div>
  125.                         <div class="FilterBarMobile-ItemContainer" v-for="setItem in set">
  126.                             <div class="FilterBarMobile-Item">
  127.                                 <div class="FilterBarMobile-CalendarItem" v-if="setItem.item === 'calendar'">
  128.                                     <div class="FilterBarMobile-SelectItem-details" @click="openSlide(1, setItem)">
  129.                                         <div data-component="svg" class="Svg-component" v-bind:class="setItem.icon">
  130.                                             <svg>
  131.                                                 <use v-bind="{ 'xlink:href':  '#' + setItem.icon }"/>
  132.                                             </svg>
  133.                                         </div>
  134.                                         <span class="FilterBarMobile-ItemTitle" v-if="setItem">${ setItem.text }</span>
  135.                                         <datepicker name="date_start" disabled class="FilterBar-datepicker" :monday-first="true" :disabled-dates="disabledDates" :format="customFormatter" :language="datePickerLang" ref="datepicker" v-model="datepicker_value"></datepicker>
  136.                                         <div class="BaseIcon-container">
  137.                                             {% include "component/svg.html.twig" with {
  138.                                                 props: {
  139.                                                     name: 'arrow-simple-right'
  140.                                                 }
  141.                                             } %}
  142.                                         </div>
  143.                                     </div>
  144.                                 </div>
  145.                                 <div class="FilterBarMobile-SelectItem" v-else>
  146.                                     <div class="FilterBarMobile-SelectItem-details" @click="openSlide(1, setItem)">
  147.                                         <div data-component="svg" class="Svg-component" v-bind:class="setItem.icon">
  148.                                             <svg>
  149.                                                 <use v-bind="{ 'xlink:href':  '#' + setItem.icon }"/>
  150.                                             </svg>
  151.                                         </div>
  152.                                         <span class="FilterBarMobile-ItemTitle" v-if="setItem">${ setItem.text }</span>
  153.                                         <v-select disable :options="setItem.values" value='id' label="text" item-value="id" item-text="text" v-model="setItem.value" class="FilterBar-select" :searchable="false" :clearable="false"></v-select>
  154.                                         <input type="hidden" :value="setItem.value.id" :name="setItem.item"/>
  155.                                         <div class="BaseIcon-container">
  156.                                             {% include "component/svg.html.twig" with {
  157.                                                 props: {
  158.                                                     name: 'arrow-simple-right'
  159.                                                 }
  160.                                             } %}
  161.                                         </div>
  162.                                     </div>
  163.                                 </div>
  164.                             </div>
  165.                         </div>
  166.                     </div>
  167.                 </div>
  168.                 <div class="FilterBarMobile-slide">
  169.                     <div class="FilterBarMobile-SelectItem">
  170.                         <div class="FilterBarMobile-SelectItemHeader" @click="closeSlide(1)">
  171.                             {% include "component/svg.html.twig" with {
  172.                                     props: {
  173.                                         name: 'arrow-simple-right'
  174.                                     }
  175.                                 } %}
  176.                             <div data-component="svg" class="Svg-component" v-if="selectedItem" v-bind:class="selectedItem.icon">
  177.                                 <svg>
  178.                                     <use v-bind="{ 'xlink:href':  '#' + selectedItem.icon }"/>
  179.                                 </svg>
  180.                             </div>
  181.                             <p class="FilterBarMobile-ItemTitle" v-if="selectedItem">${ selectedItem.text }</p>
  182.                         </div>
  183.                         <div v-if="selectedItem">
  184.                             <div class="FilterBarMobile-CalendarItem" v-if="selectedItem.item === 'calendar'">
  185.                                 <datepicker class="FilterBar-datepicker" :monday-first="true" :disabled-dates="disabledDates" :format="customFormatter" @selected="closeSlide(1)" :inline="true" :language="datePickerLang" ref="datepicker" v-model="datepicker_value"></datepicker>
  186.                             </div>
  187.                             <div class="FilterBarMobile-SelectItemOptionsContainer" v-else>
  188.                                 <div class="FilterBarMobile-SelectItemOptions" :class="{'selected': selectedItem.value == selectedItemOption }" v-for="selectedItemOption in selectedItem.values" @click="selectOption(selectedItemOption, 1)">
  189.                                     <p class="FilterBarMobile-SelectItemOption">${ selectedItemOption.text }</p>
  190.                                 </div>
  191.                                 <input type="hidden" :value="selectedItem.value.id" :name="selectedItem.item"/>
  192.                             </div>
  193.                         </div>
  194.                     </div>
  195.                 </div>
  196.             </div>
  198.             {# Submit button #}
  199.             {% include "component/button.html.twig" with {
  200.             class: 'BookingSearch-submitButton',
  201.             props: {
  202.                 text: "filtre_bar.search.libelle"|trans,
  203.                 title: '',
  204.                 type:"sumbit"
  205.             }
  206.         } %}
  207.         </div>
  208.     </div>
  209. </form>