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

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