templates/journal_officiel/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Journal Officiel - Archives des numéros{% endblock %}
  5. {% block meta %}
  6. <meta name="description" content="Consultez l'ensemble des archives du Journal Officiel : numéros publiés, actes officiels, textes de loi et décrets. Recherche par année, numéro, mot-clé.">
  7. <meta name="robots" content="index, follow">
  8. {% endblock %}
  10. {% block body %}
  11. <div class="container mx-auto px-4 py-8">
  12. <div class="max-w-7xl mx-auto">
  13. <!-- Fil d'Ariane -->
  14. <nav class="text-sm mb-6" aria-label="Breadcrumb">
  15. <ol class="flex flex-wrap items-center space-x-2 text-gray-600">
  16. <li><a href="{{ path('app_home') }}" class="hover:text-[#006633]">Accueil</a></li>
  17. <li><span class="mx-2">/</span></li>
  18. <li class="text-gray-900 font-medium" aria-current="page">Archives du Journal Officiel</li>
  19. </ol>
  20. </nav>
  22. <!-- Hero -->
  23. <div class="bg-gradient-to-r from-[#006633] to-[#008844] rounded-lg shadow-lg p-8 mb-8 text-white">
  24. <h1 class="text-3xl font-bold">Journal Officiel</h1>
  25. <p class="text-white/80 mt-2">Consultez les archives des numéros publiés – textes officiels, décrets, arrêtés et annonces légales</p>
  26. <div class="mt-4 text-sm text-white/70">
  27. Dernière mise à jour : {{ "now"|date("d/m/Y") }}
  28. </div>
  29. </div>
  31. <!-- Filtres + Tri -->
  32. <div class="bg-white rounded-lg shadow-md p-6 mb-8">
  33. <form method="GET" id="filterForm" class="space-y-4">
  34. <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
  35. <div>
  36. <label for="year" class="block text-sm font-medium text-gray-700 mb-1">Année</label>
  37. <select name="year" id="year" class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[#006633]">
  38. <option value="">Toutes les années</option>
  39. {% for year in years|default([]) %}
  40. <option value="{{ year }}" {% if selectedYear|default('') == year %}selected{% endif %}>{{ year }}</option>
  41. {% endfor %}
  42. </select>
  43. </div>
  44. <div>
  45. <label for="month" class="block text-sm font-medium text-gray-700 mb-1">Mois</label>
  46. <select name="month" id="month" class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[#006633]">
  47. <option value="">Tous les mois</option>
  48. {% for m in 1..12 %}
  49. {% set monthName = ('01-' ~ m ~ '-2000')|date('F')|capitalize %}
  50. <option value="{{ m }}" {% if selectedMonth|default('') == m %}selected{% endif %}>{{ monthName }}</option>
  51. {% endfor %}
  52. </select>
  53. </div>
  54. <div>
  55. <label for="numero" class="block text-sm font-medium text-gray-700 mb-1">Numéro</label>
  56. <input type="text" name="numero" id="numero" value="{{ selectedNumero|default('') }}" placeholder="ex: 1234" class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[#006633]">
  57. </div>
  58. <div>
  59. <label for="keyword" class="block text-sm font-medium text-gray-700 mb-1">Mot‑clé (titre / contenu)</label>
  60. <input type="text" name="keyword" id="keyword" value="{{ keyword|default('') }}" placeholder="Recherche dans les actes" class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[#006633]">
  61. </div>
  62. </div>
  63. <div class="flex flex-wrap justify-between items-center gap-3">
  64. <div class="flex flex-wrap gap-3">
  65. <button type="submit" class="bg-[#006633] text-white px-5 py-2 rounded-lg hover:bg-[#005528] transition shadow-sm flex items-center gap-1">
  66. <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"></path></svg>
  67. Filtrer
  68. </button>
  69. <a href="{{ path('app_journal_officiel') }}" class="bg-gray-200 text-gray-800 px-5 py-2 rounded-lg hover:bg-gray-300 transition">Réinitialiser</a>
  70. <select id="sortSelect" class="border rounded-lg px-3 py-2 bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-[#006633]">
  71. <option value="date_desc">Date récente → ancienne</option>
  72. <option value="date_asc">Date ancienne → récente</option>
  73. <option value="numero_asc">Numéro croissant</option>
  74. <option value="numero_desc">Numéro décroissant</option>
  75. </select>
  76. </div>
  77. <div class="text-sm text-gray-500" id="resultCount">
  78. <strong>{{ numeros|default([])|length }}</strong> numéro(s) affiché(s)
  79. </div>
  80. </div>
  81. </form>
  82. </div>
  84. <!-- Grille des numéros -->
  85. <div id="numerosGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  86. {% for numero in numeros|default([]) %}
  87. <div class="bg-white rounded-lg shadow-md hover:shadow-lg transition overflow-hidden flex flex-col h-full"
  88. data-id="{{ numero.id }}"
  89. data-numero="{{ numero.numero }}"
  90. data-date="{{ numero.datePublication|date('Y-m-d') }}"
  91. data-description="{{ numero.description|default('')|e('html_attr') }}"
  92. data-categories="{{ numero.categories|default([])|join(',')|e('html_attr') }}"
  93. data-nb-actes="{{ numero.nbActes|default(0) }}">
  94. <div class="bg-gradient-to-r from-[#006633] to-[#008844] p-4">
  95. <div class="text-white">
  96. <div class="text-2xl font-bold flex items-center justify-between">
  97. <span>JO n°{{ numero.numero }}</span>
  98. {% if numero.estSpeciale|default(false) %}
  99. <span class="text-xs bg-yellow-200 text-yellow-800 px-2 py-1 rounded-full">Spécial</span>
  100. {% endif %}
  101. </div>
  102. <div class="text-sm text-white/80 mt-1">
  103. Publié le {{ numero.datePublication|date('d/m/Y') }}
  104. </div>
  105. </div>
  106. </div>
  107. <div class="p-4 flex-grow">
  108. <div class="text-sm text-gray-600 mb-2">
  109. 📄 {{ numero.nbActes|default(0) }} acte{% if numero.nbActes|default(0) > 1 %}s{% endif %} publié(s)
  110. </div>
  111. {% if numero.description|default(false) %}
  112. <p class="text-gray-700 text-sm mb-4 line-clamp-3">{{ numero.description }}</p>
  113. {% else %}
  114. <p class="text-gray-400 text-sm italic mb-4">Aucun résumé disponible</p>
  115. {% endif %}
  116. {% if numero.categories|default([])|length > 0 %}
  117. <div class="flex flex-wrap gap-1 mb-4">
  118. {% for cat in numero.categories|slice(0,2) %}
  119. <span class="inline-block bg-gray-100 text-gray-700 text-xs px-2 py-1 rounded">{{ cat }}</span>
  120. {% endfor %}
  121. {% if numero.categories|length > 2 %}
  122. <span class="text-xs text-gray-500">+{{ numero.categories|length - 2 }}</span>
  123. {% endif %}
  124. </div>
  125. {% endif %}
  126. </div>
  127. <div class="p-4 pt-0 border-t border-gray-100 mt-2">
  128. <div class="flex space-x-3">
  129. {# REMPLACEMENT : bouton au lieu de lien pour éviter la redirection #}
  130. <button type="button" class="consult-btn flex-1 text-center bg-[#006633]/10 text-[#006633] px-3 py-2 rounded hover:bg-[#006633]/20 transition text-sm font-medium">
  131. Consulter
  132. </button>
  133. <button type="button" class="pdf-btn flex-1 text-center bg-gray-50 text-gray-600 px-3 py-2 rounded hover:bg-gray-100 transition text-sm flex items-center justify-center gap-1">
  134. <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3M4 4v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6H6a2 2 0 00-2 2z"></path></svg>
  135. PDF
  136. </button>
  137. </div>
  138. </div>
  139. </div>
  140. {% else %}
  141. <div class="col-span-full text-center text-gray-500 py-12">
  142. <div class="text-6xl mb-4">📄</div>
  143. <p>Aucun numéro du Journal Officiel ne correspond à vos critères</p>
  144. <a href="{{ path('app_journal_officiel') }}" class="inline-block mt-4 text-[#006633] hover:underline">Voir tous les numéros</a>
  145. </div>
  146. {% endfor %}
  147. </div>
  149. <!-- Pagination (inchangée) -->
  150. {% set totalPages = totalPages|default(1) %}
  151. {% set currentPage = currentPage|default(1) %}
  152. {% if totalPages > 1 %}
  153. <div class="flex flex-wrap justify-center items-center space-x-1 mt-10">
  154. {# ... la pagination existante ... #}
  155. </div>
  156. {% endif %}
  158. <!-- Section aide -->
  159. <div class="mt-12 bg-gray-50 rounded-lg p-6 text-sm text-gray-700 border">
  160. <h2 class="text-lg font-semibold text-gray-800 mb-2">À propos des archives</h2>
  161. <p>Le Journal Officiel contient l’ensemble des textes législatifs, réglementaires et administratifs. Vous pouvez rechercher par numéro, année ou mot‑clé. Les PDF sont téléchargeables librement.</p>
  162. <div class="mt-3 flex flex-wrap gap-4">
  163. <a href="#" class="text-[#006633] hover:underline">🔍 Guide de recherche avancée</a>
  164. <a href="#" class="text-[#006633] hover:underline">📧 S’abonner aux alertes</a>
  165. <a href="#" class="text-[#006633] hover:underline">ℹ️ Aide & contact</a>
  166. </div>
  167. </div>
  168. </div>
  169. </div>
  171. <!-- Modale -->
  172. <div id="consultModal" class="modal" style="display: none;">
  173. <div class="modal-content bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4 relative">
  174. <div class="bg-gradient-to-r from-[#006633] to-[#008844] p-4 rounded-t-lg text-white flex justify-between items-center">
  175. <h3 class="text-xl font-bold">Consultation du Journal Officiel</h3>
  176. <button id="closeModalBtn" class="text-white hover:text-gray-200 text-2xl leading-none">&times;</button>
  177. </div>
  178. <div id="modalBody" class="p-6">
  179. <!-- contenu dynamique -->
  180. </div>
  181. <div class="border-t p-4 flex justify-end">
  182. <button id="modalPdfBtn" class="bg-[#006633] text-white px-4 py-2 rounded-lg hover:bg-[#005528] transition flex items-center gap-2">
  183. <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3M4 4v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6H6a2 2 0 00-2 2z"></path></svg>
  184. Télécharger ce PDF
  185. </button>
  186. </div>
  187. </div>
  188. </div>
  190. <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  191. <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
  193. <script>
  194. document.addEventListener('DOMContentLoaded', function() {
  195. // Éléments
  196. const grid = document.getElementById('numerosGrid');
  197. const filterForm = document.getElementById('filterForm');
  198. const yearSelect = document.getElementById('year');
  199. const monthSelect = document.getElementById('month');
  200. const numeroInput = document.getElementById('numero');
  201. const keywordInput = document.getElementById('keyword');
  202. const sortSelect = document.getElementById('sortSelect');
  203. const resultCountSpan = document.getElementById('resultCount');
  204. const modal = document.getElementById('consultModal');
  205. const modalBody = document.getElementById('modalBody');
  206. const closeModalBtn = document.getElementById('closeModalBtn');
  207. const modalPdfBtn = document.getElementById('modalPdfBtn');
  208. let currentModalData = null;
  210. // Fermeture modale
  211. function closeModal() {
  212. modal.style.display = 'none';
  213. currentModalData = null;
  214. }
  215. closeModalBtn.addEventListener('click', closeModal);
  216. window.addEventListener('click', (e) => { if(e.target === modal) closeModal(); });
  218. // Affichage modale
  219. function showModal(card) {
  220. const numero = card.dataset.numero;
  221. const date = card.dataset.date;
  222. const description = card.dataset.description || 'Aucune description';
  223. const nbActes = card.dataset.nbActes;
  224. const categories = card.dataset.categories ? card.dataset.categories.split(',') : [];
  225. const formattedDate = new Date(date).toLocaleDateString('fr-FR');
  226. let categoriesHtml = '';
  227. if(categories.length) {
  228. categoriesHtml = '<div class="mt-2 flex flex-wrap gap-1">' + categories.map(c => `<span class="bg-gray-100 text-gray-700 text-xs px-2 py-1 rounded">${c.trim()}</span>`).join('') + '</div>';
  229. }
  230. modalBody.innerHTML = `
  231. <h4 class="text-2xl font-bold text-[#006633]">JO n°${numero}</h4>
  232. <p class="text-gray-600 mt-1">Publié le ${formattedDate}</p>
  233. <div class="mt-4 text-sm text-gray-700">📄 ${nbActes} acte(s) publié(s)</div>
  234. <div class="mt-4"><h5 class="font-semibold text-gray-800">Résumé</h5><p class="text-gray-600">${description}</p></div>
  235. ${categoriesHtml}
  236. `;
  237. currentModalData = { numero, date: formattedDate, description, nbActes, categories };
  238. modal.style.display = 'flex';
  239. }
  241. // Génération PDF
  242. async function generatePDF(data) {
  243. const { jsPDF } = window.jspdf;
  244. const doc = new jsPDF();
  245. doc.setFontSize(18);
  246. doc.setTextColor(0, 102, 51);
  247. doc.text(`Journal Officiel n°${data.numero}`, 20, 30);
  248. doc.setFontSize(12);
  249. doc.setTextColor(0,0,0);
  250. doc.text(`Publié le ${data.date}`, 20, 45);
  251. doc.text(`Nombre d'actes : ${data.nbActes}`, 20, 60);
  252. doc.text("Résumé :", 20, 75);
  253. const splitDesc = doc.splitTextToSize(data.description || "Aucun résumé", 170);
  254. doc.text(splitDesc, 20, 85);
  255. if(data.categories && data.categories.length) {
  256. doc.text("Catégories : " + data.categories.join(', '), 20, 85 + splitDesc.length * 7);
  257. }
  258. doc.save(`JO_${data.numero}.pdf`);
  259. }
  261. // Filtrage + tri
  262. function filterAndSort() {
  263. const cards = Array.from(grid.querySelectorAll('.bg-white.rounded-lg.shadow-md'));
  264. const yearVal = yearSelect.value;
  265. const monthVal = monthSelect.value;
  266. const numeroVal = numeroInput.value.trim();
  267. const keywordVal = keywordInput.value.trim().toLowerCase();
  268. const sortVal = sortSelect.value;
  270. let visibleCards = cards.filter(card => {
  271. const cardNumero = card.dataset.numero;
  272. const cardDate = new Date(card.dataset.date);
  273. const cardYear = cardDate.getFullYear().toString();
  274. const cardMonth = (cardDate.getMonth() + 1).toString();
  275. const cardDescription = (card.dataset.description || '').toLowerCase();
  276. const cardCategories = (card.dataset.categories || '').toLowerCase();
  277. const searchableText = `${cardNumero} ${cardDescription} ${cardCategories}`;
  278. let match = true;
  279. if(yearVal && cardYear !== yearVal) match = false;
  280. if(match && monthVal && cardMonth !== monthVal) match = false;
  281. if(match && numeroVal && !cardNumero.includes(numeroVal)) match = false;
  282. if(match && keywordVal && !searchableText.includes(keywordVal)) match = false;
  283. return match;
  284. });
  286. // Tri
  287. if(sortVal === 'date_asc') visibleCards.sort((a,b) => new Date(a.dataset.date) - new Date(b.dataset.date));
  288. else if(sortVal === 'date_desc') visibleCards.sort((a,b) => new Date(b.dataset.date) - new Date(a.dataset.date));
  289. else if(sortVal === 'numero_asc') visibleCards.sort((a,b) => parseInt(a.dataset.numero) - parseInt(b.dataset.numero));
  290. else if(sortVal === 'numero_desc') visibleCards.sort((a,b) => parseInt(b.dataset.numero) - parseInt(a.dataset.numero));
  292. // Mise à jour DOM
  293. cards.forEach(card => card.style.display = 'none');
  294. visibleCards.forEach(card => { card.style.display = ''; grid.appendChild(card); });
  295. resultCountSpan.innerHTML = `<strong>${visibleCards.length}</strong> numéro(s) affiché(s)`;
  296. }
  298. // Écouteurs filtres
  299. yearSelect.addEventListener('change', filterAndSort);
  300. monthSelect.addEventListener('change', filterAndSort);
  301. numeroInput.addEventListener('input', filterAndSort);
  302. keywordInput.addEventListener('input', filterAndSort);
  303. sortSelect.addEventListener('change', filterAndSort);
  304. filterForm.addEventListener('submit', (e) => { e.preventDefault(); filterAndSort(); });
  306. // Délégation d'événements pour les boutons (y compris ceux ajoutés dynamiquement)
  307. grid.addEventListener('click', (e) => {
  308. const btn = e.target.closest('.consult-btn');
  309. if(btn) {
  310. e.preventDefault();
  311. const card = btn.closest('.bg-white.rounded-lg.shadow-md');
  312. if(card) showModal(card);
  313. return;
  314. }
  315. const pdfBtn = e.target.closest('.pdf-btn');
  316. if(pdfBtn) {
  317. e.preventDefault();
  318. const card = pdfBtn.closest('.bg-white.rounded-lg.shadow-md');
  319. if(card) {
  320. const data = {
  321. numero: card.dataset.numero,
  322. date: new Date(card.dataset.date).toLocaleDateString('fr-FR'),
  323. description: card.dataset.description,
  324. nbActes: card.dataset.nbActes,
  325. categories: card.dataset.categories ? card.dataset.categories.split(',') : []
  326. };
  327. generatePDF(data);
  328. }
  329. }
  330. });
  332. // PDF depuis la modale
  333. modalPdfBtn.addEventListener('click', () => { if(currentModalData) generatePDF(currentModalData); });
  335. // Initialisation
  336. filterAndSort();
  337. });
  338. </script>
  340. <style>
  341. .modal {
  342. display: none;
  343. position: fixed;
  344. top: 0;
  345. left: 0;
  346. width: 100%;
  347. height: 100%;
  348. background-color: rgba(0,0,0,0.5);
  349. z-index: 1000;
  350. justify-content: center;
  351. align-items: center;
  352. }
  353. .line-clamp-3 {
  354. display: -webkit-box;
  355. -webkit-line-clamp: 3;
  356. -webkit-box-orient: vertical;
  357. overflow: hidden;
  358. }
  359. </style>
  360. {% endblock %}