src/Aqarmap/Bundle/ListingBundle/Resources/views/CompoundSearch/compoundSearchForm.html.twig line 1

  1. <div id="searchFormContainer" class="searchFormContainer">
  2. <div class="filterHeader visible-sm visible-xs">
  3. <div class="sectionContainer">
  4. <button type="button" class="btnReset {% if app.request.get('_locale') == 'ar' %}right{% else %}left{% endif %}" id="reset-compound-planner">
  5. {{ 'layout.compound_planner.filters'|trans }}
  6. </button>
  7. <button class="btnCancel
  8. {% if app.request.get('_locale') == 'ar' %}left{% else %}right{% endif %}" onclick="closeCompoundFilter('searchFormContainer')">
  9. {{ 'layout.compound_planner.cancel'|trans }}
  10. </button>
  11. </div>
  12. </div>
  13. <div class="searchBox" ng-cloak ng-controller="compoundPlannerController">
  14. {% set cachedCompoundsLocations = cachedCompoundsData['cachedCompoundsLocations'] %}
  15. {% set cachedPropertyTypes = cachedCompoundsData['cachedPropertyTypes'] %}
  17. {{ form_start(compoundSearchForm, {attr: {'ng-content-loaded': '', 'callback': 'init();setCheckedCompoundLocations('~checkedCompoundLocations | json_encode()~');setCheckedPropertyTypes('~checkedPropertyTypes | json_encode()~'); setCompoundLocations('~cachedCompoundsLocations~');setPropertyTypes('~cachedPropertyTypes~');', 'class': 'compound-planner-form'}}) }}
  19. {% set compoundLocationFilter = app.request.query.get("compoundLocations") %}
  20. {% set propertyTypesFilter = app.request.query.get("propertyTypes") %}
  21. {% set priceLevel = app.request.query.get("priceLevels") %}
  22. {% set compoundStatus = app.request.query.get("compoundStatus") %}
  23. {% set keywordFilter = app.request.query.get("keywords") %}
  24. {% set finishType = app.request.query.get("finishTypes") %}
  25. {% set paymentMethod = app.request.query.get("paymentMethods") %}
  26. {% set developerExperience = app.request.query.get("developerExperience") %}
  27. {% set deliveryYears = app.request.query.get("deliveryYears") %}
  30. {#Location#}
  31. <div class="search-form">
  32. <div class="form-section">
  33. <div class="page-header">
  34. <div class="panel">
  35. <a class="btn-collapse-container {% if compoundLocationFilter == null %}collapsed{% endif %}" data-toggle="collapse" data-target="#LocationsContainer" aria-expanded="true">
  36. <label>{{ 'layout.compound_planner.locations'|trans }}</label>
  37. <label class="btn_collapse btn_float">
  38. <span class="btn-minus"></span>
  39. </label>
  40. </a>
  41. <div id="LocationsContainer" class="panel-collapse collapse {% if compoundLocationFilter != null%}show{% endif %}" aria-expanded="true">
  42. <div class="panel-body marginTop15">
  43. {{ form_widget(compoundSearchForm.compoundLocation, {attr: {'value': 'ng::getCheckedCompoundLocations()::'}}) }}
  44. <tree-view class="w-100" depth="3" model="getCompoundLocations()" key="compoundLocation" callback-fn="toggleTick(item, key)"></tree-view>
  45. </div>
  46. </div>
  47. </div>
  48. </div>
  49. </div>
  50. </div>
  52. {#Property Types#}
  53. <div class="search-form">
  54. <div class="form-section">
  55. <div class="page-header">
  56. <div class="panel">
  57. <a class="btn-collapse-container {% if propertyTypesFilter == null %}collapsed{% endif %}" data-toggle="collapse" data-target="#PropertyTypesContainer" aria-expanded="true">
  58. <label>{{ 'layout.compound_planner.property_types'|trans }}</label>
  59. <label class="btn_collapse btn_float">
  60. <span class="btn-minus"></span>
  61. </label>
  62. </a>
  63. {% set propertyTypesHideFrom = 5 %}
  64. <div id="PropertyTypesContainer" class="panel-collapse collapse {% if propertyTypesFilter != null %}show{% endif %} nestedContainer" data-hidestartfrom="{{ propertyTypesHideFrom }}" aria-expanded="true">
  65. <div class="panel-body marginTop15">
  66. {{ form_widget(compoundSearchForm.propertyTypes, {attr: {'value': 'ng::getCheckedPropertyTypes()::'}}) }}
  67. <tree-view class="w-100" depth="3" model="getPropertyTypes()" key="propertyType" callback-fn="toggleTick(item, key)"></tree-view>
  68. </div>
  69. </div>
  70. </div>
  71. </div>
  72. </div>
  73. </div>
  75. {#Get range sliders values from url#}
  76. {% set areaRange = app.request.get('areaRange') | default("0,0") | split(',') %}
  77. {% set areaFrom = areaRange[0] %}
  78. {% set areaTo = areaRange[1] %}
  80. {% set priceRange = app.request.get('priceRange') | default("0,0") | split(',') %}
  81. {% set priceFrom = priceRange[0] %}
  82. {% set priceTo = priceRange[1] %}
  84. {% set priceMeterRange = app.request.get('priceMeterRange') | default("0,0") | split(',') %}
  85. {% set priceMeterFrom = priceMeterRange[0] %}
  86. {% set priceMeterTo = priceMeterRange[1] %}
  88. {#price Level#}
  89. <div class="search-form">
  90. <div class="form-section">
  91. <div class="page-header tab-content">
  92. <div class="panel tab-pane active show" id="price_level">
  93. <div class="btn-collapse-container {% if priceLevel == null %}collapsed{% endif %}" data-toggle="collapse" data-target="#PriceLevelContainer" aria-expanded="true">
  94. <label>{{ 'layout.compound_planner.price_level'|trans }}</label>
  95. <a class="btn_collapse btn_float">
  96. <span class="btn-minus"></span>
  97. </a>
  98. </div>
  99. <div id="PriceLevelContainer" class="panel-collapse collapse {% if priceLevel != null %}show{% endif %}" aria-expanded="true" ng-cloak>
  100. <div class="panel-body marginTop15">
  102. {% set selectedPriceLevels = app.request.get('priceLevels') | json_encode()%}
  104. <ul class="unstyled padding-0" ng-content-loaded callback="initFilter('priceLevel', {{selectedPriceLevels}})">
  105. {% for p in compoundSearchForm.priceLevel|keys %}
  107. {% set index = compoundSearchForm.priceLevel.vars.choices[p].value %}
  108. <li>
  110. {{form_widget(attribute(compoundSearchForm.priceLevel,p),
  111. {attr: {'class': 'styled-checkbox', 'ng-model': 'priceLevel[' ~ index ~ ']', 'ng-true-value': "'" ~ index ~ "'", 'ng-false-value': '0', 'ng-change': 'getCountFeedback();', 'ng-class': 'filtersFeedback.priceLevel[' ~ index ~ '] ? "" : "disabled" '}}
  112. ) }}
  113. {% if 'token' not in form_label(attribute(compoundSearchForm.priceLevel,p)) %}
  114. {{form_label(attribute(compoundSearchForm.priceLevel,p)) }}
  115. <span ng-class="filtersFeedback.priceLevel[{{index}}] ? '' : 'disabled'">{{ '(ng::filtersFeedback.priceLevel[' ~ index ~ '] || 0::)' }}</span>
  116. {% endif %}
  117. </li>
  118. {% endfor %}
  119. </ul>
  120. </div>
  121. </div>
  122. </div>
  123. </div>
  124. </div>
  125. </div>
  126. {#Status#}
  127. <div class="search-form moreFilter">
  128. <div class="form-section">
  129. <div class="page-header">
  130. <div class="panel">
  131. <a class="btn-collapse-container {% if compoundStatus == null %}collapsed{% endif %}" data-toggle="collapse" data-target="#StatusContainer" aria-expanded="true">
  132. <label>{{ 'layout.compound_planner.status'|trans }}</label>
  133. <label class="btn_collapse btn_float">
  134. <span class="btn-minus"></span>
  135. </label>
  136. </a>
  137. <div id="StatusContainer" class="panel-collapse collapse {% if compoundStatus != null%}show{% endif %}" aria-expanded="true" ng-cloak>
  138. <div class="panel-body marginTop15">
  140. {% set selectedCompoundStatus = app.request.get('compoundStatus') | json_encode() %}
  142. <ul class="unstyled padding-0" ng-content-loaded callback="initFilter('compoundStatus', {{selectedCompoundStatus}})">
  143. {% for c in compoundSearchForm.compoundStatus|keys %}
  144. {% set index = compoundSearchForm.compoundStatus.vars.choices[c].value %}
  145. <li>
  146. {{form_widget(attribute(compoundSearchForm.compoundStatus,c), {attr: {'class': 'styled-checkbox', 'ng-model': 'compoundStatus[' ~ index ~ ']', 'ng-true-value': "'" ~ index ~ "'", 'ng-false-value': '0', 'ng-change': 'getCountFeedback()', 'ng-class': 'filtersFeedback.compoundStatus[' ~ index ~ '] ? "" : "disabled" '}}) }}
  147. {% if 'token' not in form_label(attribute(compoundSearchForm.compoundStatus,c)) %}
  148. {{form_label(attribute(compoundSearchForm.compoundStatus,c)) }}
  149. <span ng-class="filtersFeedback.compoundStatus[{{index}}] ? '' : 'disabled'">{{ '(ng::filtersFeedback.compoundStatus[' ~ index ~ '] || 0::)' }}</span>
  150. {% endif %}
  151. </li>
  152. {% endfor %}
  153. </ul>
  154. </div>
  155. </div>
  156. </div>
  157. </div>
  158. </div>
  159. </div>
  160. {#finish type#}
  161. <div class="search-form moreFilter">
  162. <div class="form-section">
  163. <div class="page-header">
  164. <div class="panel">
  165. <a class="btn-collapse-container {% if finishType == null %}collapsed{% endif %}" data-toggle="collapse" data-target="#FinishTypeContainer" aria-expanded="true">
  166. <label>{{ 'layout.compound_planner.finish_type'|trans }}</label>
  167. <label class="btn_collapse btn_float">
  168. <span class="btn-minus"></span>
  169. </label>
  170. </a>
  171. <div id="FinishTypeContainer" class="panel-collapse collapse {% if finishType != null %}show{% endif %}" aria-expanded="true" ng-cloak>
  172. <div class="panel-body marginTop15">
  174. {% set selectedFinishType = app.request.get('finishTypes') | json_encode() %}
  176. <ul class="unstyled padding-0" ng-content-loaded callback="initFilter('finishType', {{selectedFinishType}})">
  177. {% for c in compoundSearchForm.finishType|keys %}
  178. {% set index = compoundSearchForm.finishType.vars.choices[c].value %}
  179. <li>
  180. {{form_widget(attribute(compoundSearchForm.finishType,c), {attr: {'class': 'styled-checkbox', 'ng-model': 'finishType.'~index, 'ng-true-value': "'" ~ index ~ "'" , 'ng-false-value': '0', 'ng-change': 'getCountFeedback();', 'ng-class': 'filtersFeedback.finishType.' ~ index ~ ' ? "" : "disabled" '}}) }}
  181. {% if 'token' not in form_label(attribute(compoundSearchForm.finishType,c)) %}
  182. {{form_label(attribute(compoundSearchForm.finishType,c), index|trans) }}
  183. <span ng-class="filtersFeedback.finishType.{{index}} ? '' : 'disabled'">
  184. {{ '(ng::filtersFeedback.finishType.' ~ index ~ ' || 0::)' }}
  185. </span>
  186. {% endif %}
  187. </li>
  188. {% endfor %}
  189. </ul>
  190. </div>
  191. </div>
  192. </div>
  193. </div>
  194. </div>
  195. </div>
  196. {#Payment Method#}
  197. <div class="search-form moreFilter">
  198. <div class="form-section">
  199. <div class="page-header">
  200. <div class="panel">
  201. <a class="btn-collapse-container {% if paymentMethod == null %}collapsed{% endif %}" data-toggle="collapse" data-target="#PaymentMethodContainer" aria-expanded="true">
  202. <label>{{ 'layout.compound_planner.payment_method'|trans }}</label>
  203. <label class="btn_collapse btn_float">
  204. <span class="btn-minus"></span>
  205. </label>
  206. </a>
  207. <div id="PaymentMethodContainer" class="panel-collapse collapse {% if paymentMethod != null %}show{% endif %}" aria-expanded="true" ng-cloak>
  208. <div class="panel-body marginTop15">
  210. {% set selectedPaymentMethod = app.request.get('paymentMethods') | json_encode() %}
  212. <ul class="unstyled padding-0" ng-content-loaded callback="initFilter('paymentMethod', {{selectedPaymentMethod}})">
  214. {% for method in compoundSearchForm.paymentMethod|keys %}
  215. {% set index = compoundSearchForm.paymentMethod.vars.choices[method].value %}
  216. <li>
  217. {{form_widget(attribute(compoundSearchForm.paymentMethod,method), {attr: {'class': 'styled-checkbox', 'ng-model': 'paymentMethod[' ~ index ~ ']', 'ng-true-value': "'" ~ index ~ "'", 'ng-false-value': '0', 'ng-change': 'getCountFeedback();', 'ng-class': 'filtersFeedback.paymentMethod[' ~ index ~ '] ? "" : "disabled" '}}) }}
  218. {% if 'token' not in form_label(attribute(compoundSearchForm.paymentMethod,method)) %}
  219. {{form_label(attribute(compoundSearchForm.paymentMethod,method)) }}
  220. <span ng-class="filtersFeedback.paymentMethod[{{index}}] ? '' : 'disabled'">
  221. {{ '(ng::filtersFeedback.paymentMethod[' ~ index ~ '] || 0::)' }}
  222. </span>
  223. {% endif %}
  224. </li>
  225. {% endfor %}
  226. </ul>
  227. </div>
  229. </div>
  230. </div>
  231. </div>
  232. </div>
  233. </div>
  234. {# Developer Experience #}
  235. <div class="search-form moreFilter">
  236. <div class="form-section">
  237. <div class="page-header">
  238. <div class="panel">
  239. <a class="btn-collapse-container {% if developerExperience == null %}collapsed{% endif %}" data-toggle="collapse" data-target="#DeveloperExperienceContainer" aria-expanded="true">
  240. <label>{{ 'layout.compound_planner.developer_experience'|trans }}</label>
  241. <label class="btn_collapse btn_float">
  242. <span class="btn-minus"></span>
  243. </label>
  244. </a>
  245. <div id="DeveloperExperienceContainer" class="panel-collapse collapse {% if developerExperience != null %}show{% endif %}" aria-expanded="true" ng-cloak>
  246. <div class="panel-body marginTop15">
  247. {% set selectedDeveloperExperience = app.request.get('developerExperience') | json_encode() %}
  248. <ul class="unstyled padding-0" ng-content-loaded callback="initFilter('developerExperiences', {{ selectedDeveloperExperience }})">
  249. {% for c in compoundSearchForm.developerExperience|keys %}
  250. {% set index = compoundSearchForm.developerExperience.vars.choices[c].value %}
  251. <li>
  252. {{ form_widget(attribute(compoundSearchForm.developerExperience,c), {attr: {'class': 'styled-checkbox', 'ng-model': 'developerExperiences.'~index, 'ng-true-value': "'" ~ index ~ "'" , 'ng-false-value': '0', 'ng-change': 'getCountFeedback();', 'ng-class': 'filtersFeedback.' ~ index ~ ' ? "" : "" '}}) }}
  253. {% if 'token' not in form_label(attribute(compoundSearchForm.developerExperience,c)) %}
  254. {{ form_label(attribute(compoundSearchForm.developerExperience,c)) }}
  255. <span ng-class="filtersFeedback.{{ index }} ? '' : 'disabled'">
  256. {{ '(ng::filtersFeedback.' ~ index ~ ' || 0::)' }}
  257. </span>
  258. {% endif %}
  259. </li>
  260. {% endfor %}
  261. </ul>
  262. </div>
  263. </div>
  264. </div>
  265. </div>
  266. </div>
  267. </div>
  269. {# Deleviery Year Experience #}
  270. <div class="search-form moreFilter">
  271. <div class="form-section">
  272. <div class="page-header">
  273. <div class="panel">
  274. <a class="btn-collapse-container {% if deliveryYears == null %}collapsed{% endif %}" data-toggle="collapse" data-target="#deliveryYearContainer" aria-expanded="true">
  275. <label>{{ 'layout.compound_planner.delivery_year'|trans }}</label>
  276. <label class="btn_collapse btn_float">
  277. <span class="btn-minus"></span>
  278. </label>
  279. </a>
  280. <div id="deliveryYearContainer" class="panel-collapse collapse {% if deliveryYears != null %}show{% endif %}" aria-expanded="true" ng-cloak>
  281. <div class="panel-body marginTop15">
  282. {% set selectedDeliveryYears = deliveryYears| json_encode() %}
  283. <ul class="unstyled padding-0" ng-content-loaded callback="initFilter('deliveryYears', {{ selectedDeliveryYears }})">
  284. {% for c in compoundSearchForm.deliveryYears|keys %}
  285. {% set index = compoundSearchForm.deliveryYears.vars.choices[c].value %}
  286. <li>
  287. {{ form_widget(attribute(compoundSearchForm.deliveryYears,c), {attr: {'class': 'styled-checkbox', 'ng-model': 'deliveryYears['~index~']', 'ng-true-value': "'" ~ index ~ "'" , 'ng-false-value': '0', 'ng-change': 'getCountFeedback();', 'ng-class': 'filtersFeedback.deliveryYears[' ~ index ~ '] ? "" : "" '}}) }}
  288. {% if 'token' not in form_label(attribute(compoundSearchForm.deliveryYears,c)) %}
  289. {{ form_label(attribute(compoundSearchForm.deliveryYears,c)) }}
  290. <span ng-class="filtersFeedback.deliveryYears[{{ index }}]? '' : 'disabled'">
  291. {{ '(ng::filtersFeedback.deliveryYears[' ~ index ~ '] || 0::)' }}
  292. </span>
  293. {% endif %}
  294. </li>
  295. {% endfor %}
  296. </ul>
  297. </div>
  298. </div>
  299. </div>
  300. </div>
  301. </div>
  302. </div>
  304. {#Keywords Search#}
  305. <div class="search-form moreFilter">
  306. <div class="form-section">
  307. <div class="page-header">
  308. <div class="panel">
  309. <a id="compoundNameCollapseBtn" class="btn-collapse-container {% if keywordFilter == null %}collapsed{% endif %}" data-toggle="collapse" data-target="#KeywordContainer" aria-expanded="true">
  310. <label>
  311. {{ get_setting('general', 'country') == 'SA' ? 'layout.compound_planner.search_for_ksa'|trans : 'layout.compound_planner.search_for'|trans }}
  312. </label>
  313. <label class="btn_collapse btn_float">
  314. <span class="btn-minus"></span>
  315. </label>
  316. </a>
  317. {% set selectedKeywords = app.request.get('keywords') | json_encode() %}
  318. <div id="KeywordContainer" class="panel-collapse collapse {% if keywordFilter != null %}show{% endif %}" aria-expanded="true">
  319. <div class="panel-body marginTop15 KeywordContainerContainer">
  320. <div class="mapBin" ng-content-loaded callback="initKeywordFilter({{ selectedKeywords }})">
  321. <i class="fa fa-search location-icon"></i>
  322. </div>
  323. <div class="drop-down-container">
  324. {% set keyword_placeholder = get_setting('general', 'country') == 'SA' ? 'layout.compound_planner.search_for_placeholder_ksa'|trans : 'layout.compound_planner.search_for_placeholder'|trans %}
  325. {{ form_widget(compoundSearchForm.keyword, {attr: {'class': 'select2-select', 'data-placeholder': keyword_placeholder, 'name': 'filters[]', 'ng-model': 'keyword', 'ng-change': 'getCountFeedback();'}}) }}
  326. </div>
  327. </div>
  328. </div>
  329. </div>
  330. </div>
  331. </div>
  332. </div>
  334. <div class="search-form last" ng-content-loaded callback="initFeedback();">
  335. <div class="form-section">
  336. <div class="page-header">
  337. <div class="panel">
  338. <div class="panel-collapse collapse show" aria-expanded="true" ng-cloak>
  339. <div class="panel-body KeywordContainerContainer">
  340. <div class="btnContainer">
  341. <div class="btnlarge">
  342. <button class="btn btn-blue-curved" type="submit">{{ 'layout.compound_planner.search'|trans }}&#160;<span>(ng::totalFeedback::)</span>
  343. </button>
  344. </div>
  345. <div class="btnSmall">
  346. {% if app.request.attributes.get('_route') == 'compound_search' or app.request.attributes.get('_route') == 'compound_search_with_location' %}
  347. <a class="btn btn-white text-blue rounded-pill" id="reset-compound-planner" href="{{ path('compound_search') }}">{{ 'layout.compound_planner.reset'|trans }}</a>
  348. {% else %}
  349. <span class="btn btn-white text-blue rounded-pill reset-compound-planner" ng-click="resetValues();getCountFeedback();">
  350. {{ 'layout.compound_planner.reset'|trans }}
  351. </span>
  352. {% endif %}
  353. </div>
  354. </div>
  355. </div>
  356. </div>
  357. </div>
  358. </div>
  359. </div>
  360. </div>
  362. {{ form_end(compoundSearchForm) }}
  363. </div>
  364. </div>