templates/application/whileresume/application/jobs/dashboard.html.twig line 1

Open in your IDE?
  1. {% extends 'application/whileresume/application/jobs/layout-social.html.twig' %}
  3. {% trans_default_domain 'whr-public' %}
  5. {% import 'application/whileresume/_macros/promo_card.html.twig' as promo %}
  7. {% block title %}{% if currentSubKeyword is defined and currentSubKeyword is not null and currentCityFilter is defined and currentCityFilter is not null %}{{ currentSubKeyword }} {{ currentCityFilter.label }}{% elseif currentFilter is defined and currentFilter is not null %}{{ currentFilter.shortTitle|default(currentFilter.label) }} — WhileResume{% else %}{{ 'job.dashboard.title'|trans }}{% endif %}{% endblock title %}
  8. {% block description %}{% if currentSubKeyword is defined and currentSubKeyword is not null and currentCityFilter is defined and currentCityFilter is not null %}Découvrez les offres "{{ currentSubKeyword }}" à {{ currentCityFilter.label }}.{% elseif currentFilter is defined and currentFilter is not null and currentFilter.shortDescription is not empty %}{{ currentFilter.shortDescription }}{% else %}{{ 'job.dashboard.description'|trans }}{% endif %}{% endblock description %}
  9. {% block robots %}index,follow{% endblock robots %}
  11. {% block css %}
  12. <style>
  13. /* ─── Page dashboard /jobs ─── */
  14. .jobs-dash{max-width:880px;margin:0 auto}
  15. .jobs-dash-header{margin-bottom:18px}
  16. .jobs-dash-title{font-size:24px;font-weight:800;color:#1E1B2E;line-height:1.2;letter-spacing:-0.02em;margin:0 0 6px}
  17. @media(min-width:768px){.jobs-dash-title{font-size:28px}}
  18. .jobs-dash-subtitle{font-size:14px;color:#6B7280;margin:0 0 18px}
  20. /* ─── Bandeau contexte ville (badge + bouton ALL) ─── */
  21. .city-context-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 16px;padding:10px 14px;background:#F5F3FF;border:1px solid rgba(108,58,237,.15);border-radius:12px}
  22. .city-context-label{font-size:11px;font-weight:600;color:#6B7280;text-transform:uppercase;letter-spacing:.06em}
  23. .city-context-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:100px;background:#fff;color:var(--theme-color,#6C3AED);font-size:13px;font-weight:600;border:1px solid rgba(108,58,237,.2)}
  24. .city-context-badge-icon{font-size:14px;line-height:1}
  25. .city-context-clear-btn{margin-left:auto;display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:100px;background:transparent;color:var(--theme-color,#6C3AED);font-size:12px;font-weight:600;border:1px dashed rgba(108,58,237,.4);cursor:pointer;text-decoration:none;font-family:inherit;transition:background .15s,border-style .15s,border-color .15s}
  26. .city-context-clear-btn:hover{background:#fff;border-style:solid;border-color:var(--theme-color,#6C3AED);color:var(--theme-color,#6C3AED)}
  27. .city-context-clear-btn svg{width:11px;height:11px}
  29. /* Widget recherche */
  30. .wr-search-widget{background:#fff;border-radius:14px;box-shadow:0 0 20px 0 rgba(0,0,0,0.05);padding:10px;margin-bottom:14px;position:relative;z-index:50}
  31. .wr-search-input-wrap{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:10px;background:#F9FAFB;border:1px solid #E5E7EB;transition:border-color .2s,background .2s}
  32. .wr-search-input-wrap:focus-within{border-color:rgba(108,58,237,.3);background:#fff}
  33. .wr-search-icon{color:#9CA3AF;display:flex;flex-shrink:0}
  34. .wr-search-input{flex:1;border:none;outline:none;background:transparent;font-size:14px;color:#1E1B2E;padding:4px 0;font-family:inherit;min-width:0}
  35. .wr-search-input::placeholder{color:#9CA3AF}
  36. .wr-search-clear{background:none;border:none;color:#9CA3AF;cursor:pointer;padding:4px;display:none;font-family:inherit}
  37. .wr-search-clear.visible{display:flex;align-items:center}
  38. .wr-search-clear:hover{color:#6B7280}
  39. .wr-search-clear svg{width:14px;height:14px}
  40. .wr-search-kbd-hint{display:none;align-items:center;padding:3px 8px;background:#fff;border:1px solid #E5E7EB;border-radius:6px;font-size:10.5px;font-weight:600;color:#6B7280;font-family:inherit;letter-spacing:.02em;white-space:nowrap;flex-shrink:0}
  41. .wr-search-input-wrap:focus-within .wr-search-kbd-hint{display:inline-flex}
  43. /* Chips keywords */
  44. .search-keywords{display:flex;flex-wrap:wrap;gap:6px;margin:0 4px 18px}
  45. .search-keyword-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:100px;background:#F5F3FF;color:var(--theme-color,#6C3AED);font-size:12.5px;font-weight:500;cursor:pointer;border:1px solid transparent;transition:background .15s,border-color .15s,transform .15s;font-family:inherit}
  46. .search-keyword-chip:hover{background:#EDE9FE;border-color:rgba(108,58,237,.2);transform:translateY(-1px);color:var(--theme-color,#6C3AED)}
  47. .search-keyword-chip.active{background:var(--theme-color,#6C3AED);color:#fff;border-color:var(--theme-color,#6C3AED)}
  48. .search-keyword-chip-icon{font-size:13px;line-height:1}
  49. .search-keywords-label{font-size:11px;font-weight:600;color:#9CA3AF;text-transform:uppercase;letter-spacing:.06em;margin-right:4px;align-self:center}
  51. /* ─── Sections de filtres SEO (chips → liens directs vers /jobs/{slug}) ─── */
  52. .filter-section{margin:0 0 14px}
  53. .filter-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;padding:0 4px;flex-wrap:wrap}
  54. @media(max-width:540px){
  55. .dash-filter-search{max-width:100%;width:100%}
  56. }
  57. .filter-section-title{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:#6B7280;text-transform:uppercase;letter-spacing:.06em;margin:0}
  58. .filter-section-title-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;background:#F5F3FF;color:var(--theme-color,#6C3AED)}
  59. .filter-section-title-icon svg{width:11px;height:11px}
  60. .filter-section-toggle{background:none;border:none;font-size:11px;color:var(--theme-color,#6C3AED);font-weight:600;cursor:pointer;font-family:inherit;padding:4px 8px;border-radius:6px;transition:background .15s}
  61. .filter-section-toggle:hover{background:#F5F3FF}
  62. .filter-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 4px}
  63. .filter-chip{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:100px;background:#fff;color:#374151;font-size:12.5px;font-weight:500;cursor:pointer;border:1px solid #E5E7EB;text-decoration:none;transition:background .15s,border-color .15s,transform .15s,color .15s;font-family:inherit;white-space:nowrap}
  64. .filter-chip:hover{background:#F5F3FF;border-color:rgba(108,58,237,.3);color:var(--theme-color,#6C3AED);transform:translateY(-1px)}
  65. .filter-chip.active{background:var(--theme-color,#6C3AED);border-color:var(--theme-color,#6C3AED);color:#fff}
  66. .filter-chip.active:hover{background:#5B21B6;color:#fff}
  67. .filter-chip-icon{font-size:14px;line-height:1}
  68. .filter-chip-arrow{display:inline-flex;color:currentColor;opacity:.5;margin-left:2px}
  69. .filter-chip-arrow svg{width:10px;height:10px}
  71. /* Mode "compact" : sections initialement collapsées si > 6 items */
  72. .filter-chips.collapsed{max-height:80px;overflow:hidden;position:relative}
  73. .filter-chips.collapsed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30px;background:linear-gradient(to bottom,transparent,#FAFAFA);pointer-events:none}
  75. /* ─── Bouton "Voir plus" sous les chips villes/métiers ─── */
  76. .dash-filter-more-wrap{display:flex;justify-content:center;margin-top:10px;padding:0 4px}
  77. .dash-filter-more-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;background:transparent;color:var(--theme-color,#6C3AED);border:1px dashed rgba(108,58,237,.35);border-radius:100px;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;transition:background .15s,border-style .15s,border-color .15s}
  78. .dash-filter-more-btn:hover{background:#F5F3FF;border-style:solid;border-color:var(--theme-color,#6C3AED)}
  79. .dash-filter-more-icon{display:inline-flex;align-items:center;color:currentColor;transition:transform .2s}
  80. .dash-filter-more-icon svg{width:12px;height:12px}
  81. .dash-filter-more-btn.is-expanded .dash-filter-more-icon{transform:rotate(180deg)}
  83. /* ─── Input de recherche dans le header (toujours visible) ─── */
  84. .dash-filter-search{display:block;position:relative;flex:1;max-width:240px}
  85. @keyframes dashFilterFadeIn{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}
  86. .dash-filter-search-input{width:100%;padding:5px 10px 5px 28px;border:1px solid #E5E7EB;border-radius:100px;font-size:12px;color:#1E1B2E;background:#FAFAFA;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .15s,background .15s}
  87. .dash-filter-search-input:focus{border-color:rgba(108,58,237,.4);background:#fff}
  88. .dash-filter-search-input::placeholder{color:#9CA3AF}
  89. .dash-filter-search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#9CA3AF;pointer-events:none;display:flex}
  90. .dash-filter-search-icon svg{width:11px;height:11px}
  92. /* État "aucun résultat" sous le filtre live */
  93. .dash-filter-empty{display:none;padding:14px 12px;font-size:12.5px;color:#9CA3AF;font-style:italic;text-align:center;width:100%}
  94. .filter-chips.is-no-results .dash-filter-empty{display:block}
  96. /* Bandeau résultats */
  97. .jobs-results-info{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 4px 14px;font-size:12px;color:#6B7280}
  98. .jobs-results-info strong{color:#1E1B2E;font-weight:700}
  100. /* Liste cards (style "similar-card" comme dans show.html.twig) */
  101. .jobs-list{display:flex;flex-direction:column;gap:10px}
  102. .jobs-card{background:#fff;border-radius:14px;padding:14px;box-shadow:0 0 16px 0 rgba(0,0,0,0.04);display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .2s}
  103. .jobs-card:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(108,58,237,.1);color:inherit}
  104. .jobs-card-logo{width:50px;height:50px;border-radius:12px;background:linear-gradient(135deg,#EDE9FE,#DDD6FE);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;color:var(--theme-color,#6C3AED);flex-shrink:0;overflow:hidden}
  105. .jobs-card-logo img{width:100%;height:100%;object-fit:cover;border-radius:8px}
  106. .jobs-card-logo svg{width:24px;height:24px;opacity:.85}
  107. .jobs-card-info{flex:1;min-width:0}
  108. .jobs-card-title{font-size:14px;font-weight:700;color:#1E1B2E;line-height:1.3;margin:0 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  109. .jobs-card-meta{font-size:12px;color:#6B7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  110. .jobs-card-salary{font-size:11px;font-weight:600;color:var(--theme-color,#6C3AED);background:#F5F3FF;padding:3px 9px;border-radius:100px;white-space:nowrap;flex-shrink:0}
  111. .jobs-card-arrow{flex-shrink:0;color:#9CA3AF;transition:color .15s,transform .15s}
  112. .jobs-card:hover .jobs-card-arrow{color:var(--theme-color,#6C3AED);transform:translateX(2px)}
  113. .jobs-card-arrow svg{width:18px;height:18px}
  115. /* Skeleton (pendant chargement) */
  116. .jobs-skeleton{display:flex;flex-direction:column;gap:10px}
  117. .jobs-skel-card{background:#fff;border-radius:14px;padding:14px;display:flex;align-items:center;gap:14px;box-shadow:0 0 16px 0 rgba(0,0,0,0.04)}
  118. .jobs-skel-logo{width:50px;height:50px;border-radius:12px;background:linear-gradient(90deg,#F3F4F6 0%,#E5E7EB 50%,#F3F4F6 100%);background-size:200% 100%;animation:jobsSkelShim 1.4s ease-in-out infinite;flex-shrink:0}
  119. .jobs-skel-info{flex:1}
  120. .jobs-skel-line{height:14px;background:linear-gradient(90deg,#F3F4F6 0%,#E5E7EB 50%,#F3F4F6 100%);background-size:200% 100%;animation:jobsSkelShim 1.4s ease-in-out infinite;border-radius:4px;margin-bottom:6px}
  121. .jobs-skel-line.s1{width:60%}
  122. .jobs-skel-line.s2{width:40%;height:12px;margin-bottom:0}
  123. @keyframes jobsSkelShim{0%{background-position:200% 0}100%{background-position:-200% 0}}
  125. /* Bouton charger plus */
  126. .jobs-load-more{display:flex;width:100%;padding:14px;margin-top:16px;background:#fff;color:var(--theme-color,#6C3AED);border:1.5px dashed rgba(108,58,237,.35);border-radius:12px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;align-items:center;justify-content:center;gap:8px;transition:background .15s,border-color .15s}
  127. .jobs-load-more:hover{background:#F5F3FF;border-color:var(--theme-color,#6C3AED);border-style:solid;color:var(--theme-color,#6C3AED)}
  128. .jobs-load-more svg{width:14px;height:14px}
  129. .jobs-load-more:disabled{opacity:.6;cursor:not-allowed}
  130. .jobs-load-more.loading{cursor:wait}
  131. .jobs-load-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(108,58,237,.2);border-top-color:var(--theme-color,#6C3AED);border-radius:50%;animation:jobsLoadSpin .7s linear infinite}
  132. @keyframes jobsLoadSpin{to{transform:rotate(360deg)}}
  134. /* État vide */
  135. .jobs-empty{text-align:center;padding:40px 20px;background:#fff;border-radius:14px;box-shadow:0 0 16px 0 rgba(0,0,0,0.04)}
  136. .jobs-empty-icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:16px;background:#F5F3FF;color:var(--theme-color,#6C3AED);margin-bottom:14px}
  137. .jobs-empty-icon svg{width:24px;height:24px}
  138. .jobs-empty-title{font-size:16px;font-weight:700;color:#1E1B2E;margin:0 0 6px}
  139. .jobs-empty-text{font-size:13px;color:#6B7280;margin:0}
  140. </style>
  142. {# Styles partagés de la promo card (définis dans la macro) #}
  143. {{ promo.styles() }}
  144. {% endblock css %}
  146. {% block body %}
  147. <div class="jobs-dash">
  149. <div class="jobs-dash-header">
  150. {% if currentSubKeyword is defined and currentSubKeyword is not null and currentCityFilter is defined and currentCityFilter is not null %}
  151. {# Cas combiné : ville + keyword #}
  152. <h1 class="jobs-dash-title">
  153. {% if currentCityFilter.icon is not empty %}{{ currentCityFilter.icon }} {% endif %}{{ currentSubKeyword }} {{ 'job.dashboard.cityHeadingIn'|trans }} {{ currentCityFilter.label }}
  154. </h1>
  155. <p class="jobs-dash-subtitle">{{ 'job.dashboard.cityKeywordSubtitle'|trans({'%keyword%': currentSubKeyword, '%city%': currentCityFilter.label}) }}</p>
  156. {% elseif currentFilter is defined and currentFilter is not null %}
  157. <h1 class="jobs-dash-title">
  158. {% if currentFilter.icon is not empty %}{{ currentFilter.icon }} {% endif %}{{ currentFilter.shortTitle|default(currentFilter.label) }}
  159. </h1>
  160. {% if currentFilter.shortDescription is not empty %}
  161. <p class="jobs-dash-subtitle">{{ currentFilter.shortDescription }}</p>
  162. {% else %}
  163. <p class="jobs-dash-subtitle">{{ 'job.dashboard.subtitle'|trans }}</p>
  164. {% endif %}
  165. {% else %}
  166. <h1 class="jobs-dash-title">{{ 'job.dashboard.heading'|trans }}</h1>
  167. <p class="jobs-dash-subtitle">{{ 'job.dashboard.subtitle'|trans }}</p>
  168. {% endif %}
  170. {# Badge "Ville active" + bouton "Tout voir" / ALL pour reset #}
  171. {% if currentCityFilter is defined and currentCityFilter is not null %}
  172. <div class="city-context-bar">
  173. <span class="city-context-label">{{ 'job.dashboard.contextLabel'|trans }}</span>
  174. <span class="city-context-badge">
  175. {% if currentCityFilter.icon is not empty %}<span class="city-context-badge-icon">{{ currentCityFilter.icon }}</span>{% endif %}
  176. <span>{{ currentCityFilter.label }}</span>
  177. </span>
  178. <a href="{% if app.request.locale == 'en' %}{{ path('whileresume_jobs_list') }}{% else %}{{ path('locale_whileresume_jobs_list',{'_locale':app.request.locale}) }}{% endif %}"
  179. class="city-context-clear-btn"
  180. title="{{ 'job.dashboard.clearCity'|trans }}">
  181. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6" transform="rotate(180 12 12)"/></svg>
  182. {{ 'job.dashboard.allCities'|trans }}
  183. </a>
  184. </div>
  185. {% endif %}
  186. </div>
  188. {# ═══ Widget recherche ═══ #}
  189. <div class="wr-search-widget">
  190. <div class="wr-search-input-wrap">
  191. <span class="wr-search-icon">
  192. <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
  193. </span>
  194. <input type="text" id="dashSearchInput" class="wr-search-input"
  195. placeholder="{% if currentCityFilter is defined and currentCityFilter is not null %}{{ 'job.dashboard.searchInCity'|trans({'%city%': currentCityFilter.label}) }}{% else %}{{ 'job.show.searchPlaceholder'|trans }}{% endif %}"
  196. value="{{ initialQuery|default('') }}"
  197. autocomplete="off">
  198. <span class="wr-search-kbd-hint" id="dashSearchKbdHint">{{ 'job.dashboard.pressEnter'|trans }}</span>
  199. <button type="button" id="dashSearchClear" class="wr-search-clear" aria-label="Clear">
  200. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
  201. </button>
  202. </div>
  203. </div>
  205. {# Chips keywords cliquables #}
  206. {% if searchKeywords is defined and searchKeywords|length > 0 %}
  207. <div class="search-keywords">
  208. <span class="search-keywords-label">{{ 'job.show.keywordsLabel'|trans }}</span>
  209. {% for kw in searchKeywords %}
  210. {# Slug pour l'URL : translitération des accents FR + lowercase + remplacement caractères spéciaux #}
  211. {% set kwSlug = kw.label
  212. |replace({
  213. 'à':'a','â':'a','ä':'a','á':'a','ã':'a','å':'a',
  214. 'À':'a','Â':'a','Ä':'a','Á':'a','Ã':'a','Å':'a',
  215. 'é':'e','è':'e','ê':'e','ë':'e','ẽ':'e',
  216. 'É':'e','È':'e','Ê':'e','Ë':'e',
  217. 'î':'i','ï':'i','ì':'i','í':'i',
  218. 'Î':'i','Ï':'i','Ì':'i','Í':'i',
  219. 'ô':'o','ö':'o','ò':'o','ó':'o','õ':'o','ø':'o',
  220. 'Ô':'o','Ö':'o','Ò':'o','Ó':'o','Õ':'o','Ø':'o',
  221. 'û':'u','ü':'u','ù':'u','ú':'u',
  222. 'Û':'u','Ü':'u','Ù':'u','Ú':'u',
  223. 'ÿ':'y','ý':'y','Ÿ':'y','Ý':'y',
  224. 'ç':'c','Ç':'c',
  225. 'ñ':'n','Ñ':'n',
  226. 'œ':'oe','Œ':'oe','æ':'ae','Æ':'ae',
  227. "'":'-',' ':'-','/':'-','_':'-','.':'-',',':'-',
  228. '(':'','*':'',')':'','&':'-and-','+':'-plus-',
  229. '#':'','?':'','!':'','"':'','’':'-','`':'-'
  230. })
  231. |lower
  232. |replace({'--':'-','---':'-'})
  233. |trim('-') %}
  235. {% if currentCityFilter is defined and currentCityFilter is not null %}
  236. {# Contexte ville : chip = lien vers /jobs/ville/keyword #}
  237. <a href="{% if app.request.locale == 'en' %}{{ path('cvs_application_jobs_filter_keyword',{'slug':currentCityFilter.slug,'keyword':kwSlug}) }}{% else %}{{ path('locale_cvs_application_jobs_filter_keyword',{'_locale':app.request.locale,'slug':currentCityFilter.slug,'keyword':kwSlug}) }}{% endif %}"
  238. class="search-keyword-chip{% if currentSubKeywordSlug is defined and currentSubKeywordSlug == kwSlug %} active{% endif %}">
  239. {% if kw.icon is not empty %}<span class="search-keyword-chip-icon">{{ kw.icon }}</span>{% endif %}
  240. <span>{{ kw.label }}</span>
  241. </a>
  242. {% else %}
  243. {# Pas de contexte ville : chip pré-remplit la search (comportement existant) #}
  244. <button type="button"
  245. class="search-keyword-chip"
  246. data-keyword="{{ kw.searchKeyword|default(kw.label) }}">
  247. {% if kw.icon is not empty %}<span class="search-keyword-chip-icon">{{ kw.icon }}</span>{% endif %}
  248. <span>{{ kw.label }}</span>
  249. </button>
  250. {% endif %}
  251. {% endfor %}
  252. </div>
  253. {% endif %}
  255. {# ═══ Filtres SEO : Villes (chips → /jobs/{slug}) — 14 visibles + reste cliqué pour révéler ═══ #}
  256. {% if sidebarFiltersCities is defined and sidebarFiltersCities|length > 0 %}
  257. {% set citiesInitial = 14 %}
  258. <div class="filter-section" id="filterSectionCities">
  259. <div class="filter-section-head">
  260. <h3 class="filter-section-title">
  261. <span class="filter-section-title-icon">
  262. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
  263. </span>
  264. {{ 'job.dashboard.popularCities'|trans }}
  265. </h3>
  266. {# Input de recherche (visible uniquement quand expanded) #}
  267. {% if sidebarFiltersCities|length > citiesInitial %}
  268. <div class="dash-filter-search">
  269. <span class="dash-filter-search-icon">
  270. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
  271. </span>
  272. <input type="text"
  273. class="dash-filter-search-input"
  274. data-search-target="filterChipsCities"
  275. placeholder="{{ 'job.dashboard.filterSearchCity'|trans }}"
  276. autocomplete="off">
  277. </div>
  278. {% endif %}
  279. </div>
  280. <div class="filter-chips dash-filter-chips" id="filterChipsCities" data-initial="{{ citiesInitial }}">
  281. {% for f in sidebarFiltersCities %}
  282. <a href="{% if app.request.locale == 'en' %}{{ path('cvs_application_jobs_filter',{'slug':f.slug}) }}{% else %}{{ path('locale_cvs_application_jobs_filter',{'_locale':app.request.locale,'slug':f.slug}) }}{% endif %}"
  283. class="filter-chip dash-filter-item{% if currentFilter is defined and currentFilter is not null and currentFilter.slug == f.slug %} active{% endif %}"
  284. data-filter-slug="{{ f.slug }}"
  285. data-filter-label="{{ f.label }}"
  286. data-index="{{ loop.index0 }}"{% if loop.index0 >= citiesInitial %} style="display:none"{% endif %}>
  287. {% if f.icon is not empty %}<span class="filter-chip-icon">{{ f.icon }}</span>{% endif %}
  288. <span>{{ f.label }}</span>
  289. <span class="filter-chip-arrow">
  290. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg>
  291. </span>
  292. </a>
  293. {% endfor %}
  294. <div class="dash-filter-empty">{{ 'job.dashboard.filterNoResults'|trans }}</div>
  295. </div>
  296. {% if sidebarFiltersCities|length > citiesInitial %}
  297. <div class="dash-filter-more-wrap">
  298. <button type="button" class="dash-filter-more-btn" data-target="filterChipsCities" data-section="filterSectionCities">
  299. <span class="dash-filter-more-icon">
  300. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
  301. </span>
  302. <span class="dash-filter-more-label" data-more="{{ 'job.dashboard.showMoreCities'|trans({'%n%': sidebarFiltersCities|length - citiesInitial}) }}" data-less="{{ 'job.dashboard.showLessCities'|trans }}">{{ 'job.dashboard.showMoreCities'|trans({'%n%': sidebarFiltersCities|length - citiesInitial}) }}</span>
  303. </button>
  304. </div>
  305. {% endif %}
  306. </div>
  307. {% endif %}
  309. {# ═══ Filtres SEO : Métiers (chips → /jobs/{slug}) — 8 visibles + reste cliqué pour révéler ═══ #}
  310. {% if sidebarFiltersCategories is defined and sidebarFiltersCategories|length > 0 %}
  311. {% set categoriesInitial = 8 %}
  312. <div class="filter-section" id="filterSectionCategories">
  313. <div class="filter-section-head">
  314. <h3 class="filter-section-title">
  315. <span class="filter-section-title-icon">
  316. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a4 4 0 00-8 0v2"/></svg>
  317. </span>
  318. {{ 'job.dashboard.popularCategories'|trans }}
  319. </h3>
  320. {# Input de recherche (visible uniquement quand expanded) #}
  321. {% if sidebarFiltersCategories|length > categoriesInitial %}
  322. <div class="dash-filter-search">
  323. <span class="dash-filter-search-icon">
  324. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
  325. </span>
  326. <input type="text"
  327. class="dash-filter-search-input"
  328. data-search-target="filterChipsCategories"
  329. placeholder="{{ 'job.dashboard.filterSearchCategory'|trans }}"
  330. autocomplete="off">
  331. </div>
  332. {% endif %}
  333. </div>
  334. <div class="filter-chips dash-filter-chips" id="filterChipsCategories" data-initial="{{ categoriesInitial }}">
  335. {% for f in sidebarFiltersCategories %}
  336. <a href="{% if app.request.locale == 'en' %}{{ path('cvs_application_jobs_filter',{'slug':f.slug}) }}{% else %}{{ path('locale_cvs_application_jobs_filter',{'_locale':app.request.locale,'slug':f.slug}) }}{% endif %}"
  337. class="filter-chip dash-filter-item{% if currentFilter is defined and currentFilter is not null and currentFilter.slug == f.slug %} active{% endif %}"
  338. data-filter-slug="{{ f.slug }}"
  339. data-filter-label="{{ f.label }}"
  340. data-index="{{ loop.index0 }}"{% if loop.index0 >= categoriesInitial %} style="display:none"{% endif %}>
  341. {% if f.icon is not empty %}<span class="filter-chip-icon">{{ f.icon }}</span>{% endif %}
  342. <span>{{ f.label }}</span>
  343. <span class="filter-chip-arrow">
  344. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg>
  345. </span>
  346. </a>
  347. {% endfor %}
  348. <div class="dash-filter-empty">{{ 'job.dashboard.filterNoResults'|trans }}</div>
  349. </div>
  350. {% if sidebarFiltersCategories|length > categoriesInitial %}
  351. <div class="dash-filter-more-wrap">
  352. <button type="button" class="dash-filter-more-btn" data-target="filterChipsCategories" data-section="filterSectionCategories">
  353. <span class="dash-filter-more-icon">
  354. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
  355. </span>
  356. <span class="dash-filter-more-label" data-more="{{ 'job.dashboard.showMoreCategories'|trans({'%n%': sidebarFiltersCategories|length - categoriesInitial}) }}" data-less="{{ 'job.dashboard.showLessCategories'|trans }}">{{ 'job.dashboard.showMoreCategories'|trans({'%n%': sidebarFiltersCategories|length - categoriesInitial}) }}</span>
  357. </button>
  358. </div>
  359. {% endif %}
  360. </div>
  361. {% endif %}
  363. {# Bandeau d'info (compteur de résultats) #}
  364. <div class="jobs-results-info" id="jobsResultsInfo">
  365. <span id="jobsResultsCount">{{ 'job.dashboard.loading'|trans }}</span>
  366. </div>
  368. {# Liste des offres (peuplée en JS) #}
  369. <div class="jobs-list" id="jobsList">
  370. <div class="jobs-skeleton">
  371. {% for i in 1..5 %}
  372. <div class="jobs-skel-card">
  373. <div class="jobs-skel-logo"></div>
  374. <div class="jobs-skel-info">
  375. <div class="jobs-skel-line s1"></div>
  376. <div class="jobs-skel-line s2"></div>
  377. </div>
  378. </div>
  379. {% endfor %}
  380. </div>
  381. </div>
  383. {# Bouton "Charger plus" #}
  384. <button type="button" class="jobs-load-more" id="jobsLoadMore" style="display:none;">
  385. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
  386. <span id="jobsLoadMoreLabel">{{ 'job.dashboard.loadMore'|trans }}</span>
  387. </button>
  389. {# Template HTML invisible cloné par le JS pour intercaler la promo card.
  390. Affiché uniquement aux utilisateurs non connectés via la logique JS.
  391. Les textes/bullets viennent automatiquement des clés job.show.promo* du YAML. #}
  392. {% if app.user is null %}
  393. {{ promo.card_template({
  394. template_id: 'jobs-promo-card-template',
  395. login_url: app.request.locale == 'en'
  396. ? path('cvs_gestion_candidates_dashboard')
  397. : path('locale_cvs_gestion_candidates_dashboard',{'_locale':app.request.locale})
  398. }) }}
  399. {% endif %}
  401. </div>
  402. {% endblock body %}
  404. {% block footerjs %}
  405. <script>
  406. (function(){
  407. 'use strict';
  408. try {
  410. var LOCALE = '{{ app.request.locale }}';
  411. var IS_AUTHENTICATED = {{ app.user ? 'true' : 'false' }};
  413. var SEARCH_API_URL = '{{ app.request.locale == "en" ? path("cvs_application_jobs_api_search") : path("locale_cvs_application_jobs_api_search",{"_locale":app.request.locale}) }}';
  414. var JOB_SHOW_URL_TEMPLATE = '{{ app.request.locale == "en" ? path("cvs_application_jobs_api_search",{"slug":"__SLUG__"}) : path("locale_cvs_application_job_show",{"_locale":app.request.locale,"slug":"__SLUG__"}) }}';
  416. var PAGE_SIZE = 10;
  417. var currentQuery = {{ initialQuery|default('')|json_encode|raw }};
  418. var currentOffset = 0;
  419. var currentTotal = 0;
  420. var isFetching = false;
  422. // Contexte ville (vient du serveur si on est sur /jobs/paris/... sinon vide)
  423. var CITY_KEYWORD = {{ currentCityKeyword|default('')|json_encode|raw }};
  425. // Slug ville pour générer les URLs de redirection au submit
  426. var CITY_SLUG = {{ currentCityFilter is defined and currentCityFilter is not null ? currentCityFilter.slug|json_encode|raw : 'null' }};
  428. // URL pour le dashboard global (sans ville)
  429. var DASHBOARD_URL = '{{ app.request.locale == "en" ? path("whileresume_jobs_list") : path("locale_whileresume_jobs_list",{"_locale":app.request.locale}) }}';
  431. // Templates URL pour /jobs/{citySlug} et /jobs/{citySlug}/{keyword}
  432. var CITY_LANDING_URL_TEMPLATE = {{ currentCityFilter is defined and currentCityFilter is not null
  433. ? (app.request.locale == 'en'
  434. ? path('cvs_application_jobs_filter',{'slug':currentCityFilter.slug})
  435. : path('locale_cvs_application_jobs_filter',{'_locale':app.request.locale,'slug':currentCityFilter.slug}))|json_encode|raw
  436. : 'null' }};
  437. var CITY_KEYWORD_URL_TEMPLATE = {{ currentCityFilter is defined and currentCityFilter is not null
  438. ? (app.request.locale == 'en'
  439. ? path('cvs_application_jobs_filter_keyword',{'slug':currentCityFilter.slug,'keyword':'kwplaceholder'})
  440. : path('locale_cvs_application_jobs_filter_keyword',{'_locale':app.request.locale,'slug':currentCityFilter.slug,'keyword':'kwplaceholder'}))|json_encode|raw
  441. : 'null' }};
  443. // Liste des keywords BDD avec leur slug (pour le matching côté client au submit)
  444. var KEYWORDS_DATA = [
  445. {% for kw in searchKeywords|default([]) %}
  446. {% set kwSlugForJs = kw.label
  447. |replace({
  448. 'à':'a','â':'a','ä':'a','á':'a','ã':'a','å':'a',
  449. 'À':'a','Â':'a','Ä':'a','Á':'a','Ã':'a','Å':'a',
  450. 'é':'e','è':'e','ê':'e','ë':'e','ẽ':'e',
  451. 'É':'e','È':'e','Ê':'e','Ë':'e',
  452. 'î':'i','ï':'i','ì':'i','í':'i',
  453. 'Î':'i','Ï':'i','Ì':'i','Í':'i',
  454. 'ô':'o','ö':'o','ò':'o','ó':'o','õ':'o','ø':'o',
  455. 'Ô':'o','Ö':'o','Ò':'o','Ó':'o','Õ':'o','Ø':'o',
  456. 'û':'u','ü':'u','ù':'u','ú':'u',
  457. 'Û':'u','Ü':'u','Ù':'u','Ú':'u',
  458. 'ÿ':'y','ý':'y','Ÿ':'y','Ý':'y',
  459. 'ç':'c','Ç':'c','ñ':'n','Ñ':'n',
  460. 'œ':'oe','Œ':'oe','æ':'ae','Æ':'ae',
  461. "'":'-',' ':'-','/':'-','_':'-','.':'-',',':'-',
  462. '(':'','*':'',')':'','&':'-and-','+':'-plus-',
  463. '#':'','?':'','!':'','"':'','’':'-','`':'-'
  464. })
  465. |lower
  466. |replace({'--':'-','---':'-'})
  467. |trim('-') %}
  468. { label: {{ kw.label|json_encode|raw }}, searchKeyword: {{ (kw.searchKeyword ?: kw.label)|json_encode|raw }}, slug: {{ kwSlugForJs|json_encode|raw }} }{% if not loop.last %},{% endif %}
  469. {% endfor %}
  470. ];
  472. var input = document.getElementById('dashSearchInput');
  473. var clearBtn = document.getElementById('dashSearchClear');
  474. var listEl = document.getElementById('jobsList');
  475. var infoEl = document.getElementById('jobsResultsCount');
  476. var loadMoreBtn = document.getElementById('jobsLoadMore');
  477. var loadMoreLabel = document.getElementById('jobsLoadMoreLabel');
  479. function escapeHtml(s){
  480. if(s == null) return '';
  481. return String(s).replace(/[&<>"']/g, function(c){
  482. return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c];
  483. });
  484. }
  486. function buildJobCard(item){
  487. // Fallback logo : icône "immeuble" stylisée si pas de logo entreprise
  488. var fallbackLogo =
  489. '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
  490. '<path d="M3 21h18"/>' +
  491. '<path d="M5 21V7l8-4v18"/>' +
  492. '<path d="M19 21V11l-6-4"/>' +
  493. '<path d="M9 9h.01"/>' +
  494. '<path d="M9 13h.01"/>' +
  495. '<path d="M9 17h.01"/>' +
  496. '</svg>';
  497. var logoHtml = item.logo
  498. ? '<img src="' + escapeHtml(item.logo) + '" alt="" onerror="this.parentNode.innerHTML=\'' + fallbackLogo.replace(/'/g, "\\'") + '\';">'
  499. : fallbackLogo;
  500. var meta = [];
  501. if(item.companyName) meta.push(escapeHtml(item.companyName));
  502. if(item.city) meta.push(escapeHtml(item.city));
  503. if(item.employmentType) meta.push(escapeHtml(item.employmentType));
  505. var salaryHtml = (item.salaryMin && item.salaryMax)
  506. ? '<span class="jobs-card-salary">' + item.salaryMin + '–' + item.salaryMax + ' ' + escapeHtml(item.devise || '') + '</span>'
  507. : '';
  509. var url = item.url || JOB_SHOW_URL_TEMPLATE.replace('__SLUG__', encodeURIComponent(item.slug));
  511. var a = document.createElement('a');
  512. a.href = url;
  513. a.className = 'jobs-card';
  514. a.innerHTML =
  515. '<div class="jobs-card-logo">' + logoHtml + '</div>' +
  516. '<div class="jobs-card-info">' +
  517. '<div class="jobs-card-title">' + escapeHtml(item.title || '') + '</div>' +
  518. '<div class="jobs-card-meta">' + meta.join(' · ') + '</div>' +
  519. '</div>' +
  520. salaryHtml +
  521. '<span class="jobs-card-arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg></span>';
  522. return a;
  523. }
  525. /**
  526. * Clone la promo card depuis le <template> rendu par la macro Twig.
  527. * Le HTML est défini une seule fois dans _macros/promo_card.html.twig.
  528. * Retourne null si le template n'est pas présent (ex: user connecté).
  529. */
  530. function buildPromoCard(){
  531. var tpl = document.getElementById('jobs-promo-card-template');
  532. if(!tpl || !tpl.content) return null;
  533. var node = tpl.content.firstElementChild;
  534. return node ? node.cloneNode(true) : null;
  535. }
  537. function renderEmpty(){
  538. listEl.innerHTML =
  539. '<div class="jobs-empty">' +
  540. '<div class="jobs-empty-icon">' +
  541. '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>' +
  542. '</div>' +
  543. '<div class="jobs-empty-title">{{ 'job.dashboard.emptyTitle'|trans|escape('js') }}</div>' +
  544. '<div class="jobs-empty-text">{{ 'job.dashboard.emptyText'|trans|escape('js') }}</div>' +
  545. '</div>';
  546. }
  548. function setLoadMoreState(state){
  549. if(!loadMoreBtn) return;
  550. if(state === 'loading'){
  551. loadMoreBtn.classList.add('loading');
  552. loadMoreBtn.disabled = true;
  553. loadMoreLabel.innerHTML = '<span class="jobs-load-spinner"></span> {{ 'job.dashboard.loadingMore'|trans|escape('js') }}';
  554. } else {
  555. loadMoreBtn.classList.remove('loading');
  556. loadMoreBtn.disabled = false;
  557. loadMoreLabel.textContent = '{{ 'job.dashboard.loadMore'|trans|escape('js') }}';
  558. }
  559. }
  561. function fetchJobs(query, offset, append){
  562. if(isFetching) return;
  563. isFetching = true;
  565. if(!append){
  566. // Nouvelle recherche : on remet à zéro et affiche skeleton
  567. listEl.innerHTML =
  568. '<div class="jobs-skeleton">' +
  569. Array(5).fill(0).map(function(){
  570. return '<div class="jobs-skel-card"><div class="jobs-skel-logo"></div><div class="jobs-skel-info"><div class="jobs-skel-line s1"></div><div class="jobs-skel-line s2"></div></div></div>';
  571. }).join('') +
  572. '</div>';
  573. if(infoEl) infoEl.textContent = '{{ 'job.dashboard.loading'|trans|escape('js') }}';
  574. if(loadMoreBtn) loadMoreBtn.style.display = 'none';
  575. } else {
  576. setLoadMoreState('loading');
  577. }
  579. var url = SEARCH_API_URL + '?q=' + encodeURIComponent(query || '') + '&locale=' + LOCALE + '&limit=' + PAGE_SIZE + '&offset=' + offset;
  580. if(CITY_KEYWORD){ url += '&city=' + encodeURIComponent(CITY_KEYWORD); }
  581. // Dashboard sans filtre : on demande explicitement les dernières offres
  582. if(!query && !CITY_KEYWORD){ url += '&all=1'; }
  583. fetch(url, {headers:{'Accept':'application/json'}})
  584. .then(function(r){ return r.ok ? r.json() : null; })
  585. .then(function(data){
  586. isFetching = false;
  587. if(!data){
  588. if(!append) renderEmpty();
  589. setLoadMoreState('idle');
  590. return;
  591. }
  593. var items = data.items || [];
  594. currentTotal = data.total || 0;
  596. if(!append){
  597. listEl.innerHTML = '';
  598. if(items.length === 0){
  599. renderEmpty();
  600. if(infoEl) infoEl.innerHTML = '<strong>0</strong> {{ 'job.dashboard.resultsCount'|trans|escape('js') }}';
  601. if(loadMoreBtn) loadMoreBtn.style.display = 'none';
  602. return;
  603. }
  604. }
  606. // Insérer la promo card après la 5ème offre (uniquement au 1er chargement,
  607. // si user non connecté et qu'on a au moins 5 offres)
  608. var insertPromoAt = (!append && !IS_AUTHENTICATED && items.length >= 5) ? 5 : -1;
  610. items.forEach(function(item, idx){
  611. listEl.appendChild(buildJobCard(item));
  612. if(idx === insertPromoAt - 1){
  613. var promoNode = buildPromoCard();
  614. if(promoNode) listEl.appendChild(promoNode);
  615. }
  616. });
  618. currentOffset = offset + items.length;
  620. if(infoEl){
  621. infoEl.innerHTML = '<strong>' + currentTotal + '</strong> {{ 'job.dashboard.resultsCount'|trans|escape('js') }}';
  622. }
  624. // Afficher / cacher "Charger plus"
  625. if(loadMoreBtn){
  626. if(currentOffset < currentTotal){
  627. loadMoreBtn.style.display = 'flex';
  628. } else {
  629. loadMoreBtn.style.display = 'none';
  630. }
  631. setLoadMoreState('idle');
  632. }
  633. })
  634. .catch(function(err){
  635. isFetching = false;
  636. console.error('[whr-dash] fetch error', err);
  637. setLoadMoreState('idle');
  638. });
  639. }
  641. /**
  642. * Slugifie un texte côté client. DOIT produire EXACTEMENT le même slug
  643. * que la méthode PHP slugify() du JobsController et que le filtre Twig
  644. * utilisé pour rendre les chips.
  645. */
  646. function slugify(text){
  647. if(!text) return '';
  648. var t = String(text);
  649. // Pré-remplacements sémantiques
  650. t = t.replace(/&/g, '-and-').replace(/\+/g, '-plus-')
  651. .replace(/[œŒ]/g, 'oe').replace(/[æÆ]/g, 'ae');
  652. // Translitération accents → ASCII via NFD + strip diacritics
  653. t = t.normalize ? t.normalize('NFD').replace(/[\u0300-\u036f]/g, '') : t;
  654. t = t.toLowerCase();
  655. // Tout ce qui n'est pas a-z 0-9 → tiret
  656. t = t.replace(/[^a-z0-9]+/g, '-');
  657. return t.replace(/^-+|-+$/g, '');
  658. }
  660. /**
  661. * Tente de matcher un texte tapé avec un keyword en BDD (par slug ou label).
  662. * Retourne l'objet keyword si trouvé, null sinon.
  663. */
  664. function findMatchingKeyword(text){
  665. if(!text || !KEYWORDS_DATA || !KEYWORDS_DATA.length) return null;
  666. var slug = slugify(text);
  667. if(!slug) return null;
  668. for(var i = 0; i < KEYWORDS_DATA.length; i++){
  669. var kw = KEYWORDS_DATA[i];
  670. // Match sur slug exact OU label/searchKeyword exact (case insensitive)
  671. if(kw.slug === slug) return kw;
  672. if(slugify(kw.searchKeyword) === slug) return kw;
  673. }
  674. return null;
  675. }
  677. /**
  678. * Au submit : décide où rediriger l'utilisateur en fonction du contexte.
  679. * - Si on est sur une ville et le texte matche un keyword BDD → /jobs/{ville}/{slug-kw}
  680. * - Sinon si on est sur une ville → /jobs/{ville}?search={texte}
  681. * - Sinon (pas de ville) → /jobs?q={texte}
  682. * - Si texte vide ET ville définie → /jobs/{ville} (reset)
  683. * - Si texte vide ET pas de ville → /jobs (reset)
  684. */
  685. function submitSearch(query){
  686. query = (query || '').trim();
  688. // Reset (recherche vide)
  689. if(!query){
  690. if(CITY_SLUG && CITY_LANDING_URL_TEMPLATE){
  691. window.location.href = CITY_LANDING_URL_TEMPLATE;
  692. } else {
  693. window.location.href = DASHBOARD_URL;
  694. }
  695. return;
  696. }
  698. // Cas 1 : on est sur une ville
  699. if(CITY_SLUG && CITY_KEYWORD_URL_TEMPLATE){
  700. var matched = findMatchingKeyword(query);
  701. if(matched && matched.slug){
  702. // Match BDD → URL slug propre /jobs/paris/developpeur
  703. window.location.href = CITY_KEYWORD_URL_TEMPLATE.replace('kwplaceholder', encodeURIComponent(matched.slug));
  704. return;
  705. }
  706. // Pas de match → fallback ?search=texte
  707. window.location.href = CITY_LANDING_URL_TEMPLATE + '?search=' + encodeURIComponent(query);
  708. return;
  709. }
  711. // Cas 2 : pas de ville → dashboard global avec ?q=
  712. window.location.href = DASHBOARD_URL + '?q=' + encodeURIComponent(query);
  713. }
  715. /**
  716. * Lance la search côté UI (sans redirection — utilisée pour les chips et
  717. * pour la "Charger plus").
  718. */
  719. function startSearch(query){
  720. currentQuery = query;
  721. currentOffset = 0;
  722. currentTotal = 0;
  723. fetchJobs(query, 0, false);
  724. // Update clear button
  725. if(clearBtn){
  726. if(query) clearBtn.classList.add('visible');
  727. else clearBtn.classList.remove('visible');
  728. }
  729. // Update active chip (uniquement les chips qui sont des <button>, pas les <a>)
  730. document.querySelectorAll('button.search-keyword-chip').forEach(function(c){
  731. if(c.getAttribute('data-keyword') === query) c.classList.add('active');
  732. else c.classList.remove('active');
  733. });
  734. }
  736. // ═══ Submit-only : Entrée déclenche la search ET change l'URL ═══
  737. if(input){
  738. input.addEventListener('keydown', function(e){
  739. if(e.key === 'Enter' || e.keyCode === 13){
  740. e.preventDefault();
  741. submitSearch(input.value);
  742. }
  743. });
  744. // Affiche bouton clear si query initiale
  745. if(input.value.trim()){
  746. if(clearBtn) clearBtn.classList.add('visible');
  747. }
  748. }
  750. // Bouton clear : reset complet → redirection vers /jobs ou /jobs/{ville}
  751. if(clearBtn){
  752. clearBtn.addEventListener('click', function(){
  753. submitSearch('');
  754. });
  755. }
  757. // Chips keywords (cas dashboard global, sans contexte ville → comportement local)
  758. // En contexte ville, les chips sont des <a href> directs gérés par le navigateur.
  759. document.querySelectorAll('button.search-keyword-chip').forEach(function(chip){
  760. chip.addEventListener('click', function(){
  761. var kw = chip.getAttribute('data-keyword');
  762. if(!kw) return;
  763. // Sur dashboard global : on submit (redirige vers /jobs?q=kw)
  764. submitSearch(kw);
  765. });
  766. });
  768. // Bouton "Charger plus"
  769. if(loadMoreBtn){
  770. loadMoreBtn.addEventListener('click', function(){
  771. if(isFetching) return;
  772. fetchJobs(currentQuery, currentOffset, true);
  773. });
  774. }
  776. // ═══ Bouton "Voir plus" + Recherche live des chips ═══
  777. /**
  778. * Slugify simple côté UI pour matching tolérant aux accents
  779. * (ex: "developpeur" matche "Développeur")
  780. */
  781. function dashSlug(str){
  782. if(!str) return '';
  783. var t = String(str);
  784. t = t.normalize ? t.normalize('NFD').replace(/[\u0300-\u036f]/g, '') : t;
  785. return t.toLowerCase().trim();
  786. }
  788. document.querySelectorAll('.dash-filter-more-btn').forEach(function(btn){
  789. var targetId = btn.getAttribute('data-target');
  790. var sectionId = btn.getAttribute('data-section');
  791. var container = document.getElementById(targetId);
  792. var section = sectionId ? document.getElementById(sectionId) : null;
  793. if(!container) return;
  794. var label = btn.querySelector('.dash-filter-more-label');
  795. if(!label) return;
  797. var initial = parseInt(container.getAttribute('data-initial'), 10) || 14;
  798. var items = container.querySelectorAll('.dash-filter-item');
  799. var searchInput = section ? section.querySelector('.dash-filter-search-input') : null;
  801. // 2 états indépendants :
  802. // - userExpanded : l'utilisateur a cliqué sur "Voir plus"
  803. // - searchActive : l'input contient du texte (auto-expand temporaire)
  804. // Mode développé = userExpanded || searchActive
  805. var userExpanded = false;
  807. function isEffectivelyExpanded(){
  808. var hasSearch = searchInput && searchInput.value.trim().length > 0;
  809. return userExpanded || hasSearch;
  810. }
  812. function applyDisplay(){
  813. var filterText = searchInput ? searchInput.value : '';
  814. var query = dashSlug(filterText || '');
  815. var expanded = isEffectivelyExpanded();
  816. var visibleCount = 0;
  818. items.forEach(function(it, i){
  819. var label = it.getAttribute('data-filter-label') || '';
  820. var matches = !query || dashSlug(label).indexOf(query) !== -1;
  822. if(expanded){
  823. // Mode développé : on affiche tous les items qui matchent la recherche
  824. it.style.display = matches ? '' : 'none';
  825. if(matches) visibleCount++;
  826. } else {
  827. // Mode collapsé : on affiche les N premiers (pas de filtrage)
  828. it.style.display = (i < initial) ? '' : 'none';
  829. if(i < initial) visibleCount++;
  830. }
  831. });
  833. // Toggle "aucun résultat" (uniquement quand recherche active)
  834. if(query && visibleCount === 0){
  835. container.classList.add('is-no-results');
  836. } else {
  837. container.classList.remove('is-no-results');
  838. }
  840. // Synchroniser le bouton "Voir plus/moins" avec l'état effectif
  841. if(expanded){
  842. btn.classList.add('is-expanded');
  843. label.textContent = label.getAttribute('data-less');
  844. } else {
  845. btn.classList.remove('is-expanded');
  846. label.textContent = label.getAttribute('data-more');
  847. }
  848. }
  850. btn.addEventListener('click', function(){
  851. userExpanded = !userExpanded;
  852. if(!userExpanded){
  853. // Reset input quand l'utilisateur collapse manuellement
  854. if(searchInput){ searchInput.value = ''; }
  855. // Scroll vers le bouton
  856. btn.scrollIntoView({behavior:'smooth', block:'nearest'});
  857. }
  858. applyDisplay();
  859. });
  861. // Recherche live dans les chips quand on tape dans l'input
  862. // → auto-expand pendant la recherche, retour à l'état userExpanded quand on vide
  863. if(searchInput){
  864. searchInput.addEventListener('input', function(){
  865. applyDisplay();
  866. });
  867. }
  868. });
  870. // Premier chargement (vide ou avec query initiale)
  871. fetchJobs(currentQuery, 0, false);
  873. } catch(err){
  874. console.error('[whr-dash] init error', err);
  875. }
  876. })();
  877. </script>
  878. {% endblock footerjs %}