templates/evaluation/index.html.twig line 1

Open in your IDE?
  1. {% extends 'layout/backEndLayout.html.twig' %}
  3. {% block stylesheets %}
  4. {{ parent() }}
  5. <style>
  6. :root {
  7. --ev-card : #ffffff;
  8. --ev-border : rgba(0,0,0,.08);
  9. --ev-border-hi: rgba(0,0,0,.15);
  10. --ev-ink : #111827;
  11. --ev-dim : #4b5563;
  12. --ev-muted : #9ca3af;
  13. --ev-blue : #1d4ed8;
  14. --ev-blue-lt : rgba(29,78,216,.1);
  15. --ev-teal : #0d9488;
  16. --ev-teal-lt : rgba(13,148,136,.1);
  17. --ev-amber : #b45309;
  18. --ev-amber-lt: rgba(180,83,9,.1);
  19. --ev-rose : #be123c;
  20. --ev-rose-lt : rgba(190,18,60,.1);
  21. --ev-green : #15803d;
  22. --ev-green-lt: rgba(21,128,61,.1);
  23. --ev-r : 12px;
  24. --ev-rs : 8px;
  25. --ev-shadow : 0 1px 4px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.07);
  26. }
  28. .ev-page { font-family:'DM Sans','Segoe UI',sans-serif; color:var(--ev-ink); }
  30. /* ── Topbar ────────────────────────────────────────────────── */
  31. .ev-topbar {
  32. display:flex; align-items:center; justify-content:space-between;
  33. flex-wrap:wrap; gap:12px; margin-bottom:20px;
  34. }
  35. .ev-topbar__title {
  36. font-size:20px; font-weight:700; display:flex; align-items:center; gap:10px;
  37. }
  38. .ev-topbar__title i { color:var(--ev-blue); }
  39. .ev-topbar__sub { font-size:13px; color:var(--ev-muted); margin-top:2px; }
  41. /* ── Barre de filtre ───────────────────────────────────────── */
  42. .ev-filter-card {
  43. background:var(--ev-card);
  44. border:1px solid var(--ev-border);
  45. border-radius:var(--ev-r);
  46. padding:16px 20px;
  47. margin-bottom:20px;
  48. box-shadow:var(--ev-shadow);
  49. }
  50. .ev-filter-card__title {
  51. font-size:13px; font-weight:600;
  52. color:var(--ev-dim); margin-bottom:12px;
  53. display:flex; align-items:center; gap:8px;
  54. }
  55. .ev-filter-row {
  56. display:grid;
  57. grid-template-columns:repeat(auto-fill, minmax(180px,1fr));
  58. gap:10px;
  59. align-items:flex-end;
  60. }
  61. .ev-filter-row select,
  62. .ev-filter-row input {
  63. width:100%;
  64. height:38px;
  65. padding:6px 12px;
  66. border:1px solid var(--ev-border);
  67. border-radius:var(--ev-rs);
  68. font-size:13px;
  69. font-family:inherit;
  70. color:var(--ev-ink);
  71. background:#fff;
  72. outline:none;
  73. transition:border-color .15s;
  74. }
  75. .ev-filter-row select:focus,
  76. .ev-filter-row input:focus { border-color:var(--ev-blue); box-shadow:0 0 0 3px rgba(29,78,216,.08); }
  78. .ev-filter-actions {
  79. display:flex; gap:8px; align-items:center;
  80. }
  81. .btn-filter {
  82. display:inline-flex; align-items:center; gap:6px;
  83. padding:8px 18px;
  84. background:var(--ev-blue);
  85. color:#fff;
  86. border-radius:var(--ev-rs);
  87. font-size:13px; font-weight:600;
  88. border:none; cursor:pointer;
  89. text-decoration:none;
  90. transition:background .18s;
  91. }
  92. .btn-filter:hover { background:#1e40af; color:#fff; }
  93. .btn-reset {
  94. display:inline-flex; align-items:center; gap:6px;
  95. padding:8px 14px;
  96. background:transparent;
  97. color:var(--ev-dim);
  98. border-radius:var(--ev-rs);
  99. font-size:13px; font-weight:500;
  100. border:1px solid var(--ev-border);
  101. cursor:pointer; text-decoration:none;
  102. transition:background .15s;
  103. }
  104. .btn-reset:hover { background:rgba(0,0,0,.04); color:var(--ev-ink); }
  106. /* ── KPIs ──────────────────────────────────────────────────── */
  107. .ev-kpis {
  108. display:grid;
  109. grid-template-columns:repeat(auto-fill, minmax(150px,1fr));
  110. gap:12px; margin-bottom:20px;
  111. }
  112. .ev-kpi {
  113. background:var(--ev-card);
  114. border:1px solid var(--ev-border);
  115. border-radius:var(--ev-r);
  116. padding:14px 16px;
  117. display:flex; align-items:center; gap:12px;
  118. box-shadow:var(--ev-shadow);
  119. transition:transform .2s;
  120. }
  121. .ev-kpi:hover { transform:translateY(-2px); }
  122. .ev-kpi__icon {
  123. width:38px; height:38px; border-radius:var(--ev-rs);
  124. display:flex; align-items:center; justify-content:center;
  125. font-size:15px; flex-shrink:0;
  126. }
  127. .ki-blue { background:var(--ev-blue-lt); color:var(--ev-blue); }
  128. .ki-teal { background:var(--ev-teal-lt); color:var(--ev-teal); }
  129. .ki-green { background:var(--ev-green-lt); color:var(--ev-green); }
  130. .ki-amber { background:var(--ev-amber-lt); color:var(--ev-amber); }
  131. .ev-kpi__val { font-size:20px; font-weight:700; color:var(--ev-ink); line-height:1; }
  132. .ev-kpi__lbl { font-size:11.5px; color:var(--ev-muted); margin-top:2px; }
  134. /* ── Table ─────────────────────────────────────────────────── */
  135. .ev-table-card {
  136. background:var(--ev-card);
  137. border:1px solid var(--ev-border);
  138. border-radius:var(--ev-r);
  139. overflow:hidden;
  140. box-shadow:var(--ev-shadow);
  141. }
  142. .ev-table-head {
  143. display:flex; align-items:center; justify-content:space-between;
  144. flex-wrap:wrap; gap:10px;
  145. padding:14px 20px;
  146. border-bottom:1px solid var(--ev-border);
  147. background:#fafbfc;
  148. }
  149. .ev-table-head__title {
  150. font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px;
  151. }
  152. .ev-table-head__dot {
  153. width:8px; height:8px; border-radius:50%;
  154. background:var(--ev-blue); box-shadow:0 0 6px var(--ev-blue);
  155. }
  157. table.ev-tbl { width:100%; border-collapse:collapse; font-size:13px; }
  158. table.ev-tbl thead th {
  159. padding:10px 14px; color:var(--ev-muted);
  160. font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  161. background:#fafbfc; border-bottom:1px solid var(--ev-border);
  162. white-space:nowrap;
  163. }
  164. table.ev-tbl tbody td {
  165. padding:11px 14px; border-bottom:1px solid rgba(0,0,0,.04);
  166. vertical-align:middle;
  167. }
  168. table.ev-tbl tbody tr:last-child td { border-bottom:none; }
  169. table.ev-tbl tbody tr:hover td { background:rgba(29,78,216,.025); }
  171. /* Chips dans les cellules */
  172. .course-chip {
  173. display:inline-block;
  174. padding:3px 10px; border-radius:20px;
  175. font-size:12px; font-weight:600;
  176. background:var(--ev-blue-lt); color:var(--ev-blue);
  177. border:1px solid rgba(29,78,216,.2);
  178. }
  179. .class-chip {
  180. display:inline-block;
  181. padding:3px 10px; border-radius:20px;
  182. font-size:12px; font-weight:600;
  183. background:var(--ev-teal-lt); color:var(--ev-teal);
  184. border:1px solid rgba(13,148,136,.2);
  185. }
  186. .seq-chip {
  187. display:inline-block;
  188. padding:2px 9px; border-radius:20px;
  189. font-size:11px; font-weight:500;
  190. background:var(--ev-amber-lt); color:var(--ev-amber);
  191. border:1px solid rgba(180,83,9,.2);
  192. }
  194. /* Score badge */
  195. .score-badge {
  196. display:inline-flex; align-items:center; justify-content:center;
  197. min-width:44px; padding:3px 8px;
  198. border-radius:8px; font-size:13px; font-weight:700;
  199. }
  200. .sc-good { background:var(--ev-green-lt); color:var(--ev-green); }
  201. .sc-mid { background:var(--ev-amber-lt); color:var(--ev-amber); }
  202. .sc-low { background:var(--ev-rose-lt); color:var(--ev-rose); }
  203. .sc-none { background:rgba(0,0,0,.05); color:var(--ev-muted); }
  205. /* Barres mini succès/échec */
  206. .mini-bar { width:80px; height:6px; background:rgba(0,0,0,.07); border-radius:3px; overflow:hidden; display:inline-block; vertical-align:middle; margin-left:4px; }
  207. .mini-bar__fill { height:100%; border-radius:3px; background:var(--ev-green); }
  209. /* Actions ligne */
  210. .ev-actions { display:flex; align-items:center; gap:4px; justify-content:flex-end; }
  211. .ev-btn {
  212. display:inline-flex; align-items:center; gap:5px;
  213. padding:5px 10px; border-radius:7px;
  214. font-size:11.5px; font-weight:500;
  215. text-decoration:none; border:1px solid var(--ev-border);
  216. cursor:pointer; background:#fff; color:var(--ev-dim);
  217. transition:background .15s, border-color .15s, color .15s;
  218. }
  219. .ev-btn:hover { border-color:var(--ev-border-hi); color:var(--ev-ink); }
  220. .ev-btn-primary { background:var(--ev-blue-lt); color:var(--ev-blue); border-color:rgba(29,78,216,.25); }
  221. .ev-btn-primary:hover { background:var(--ev-blue); color:#fff; }
  222. .ev-btn-warning { background:var(--ev-amber-lt); color:var(--ev-amber); border-color:rgba(180,83,9,.25); }
  223. .ev-btn-warning:hover { background:var(--ev-amber); color:#fff; }
  224. .ev-btn-danger { background:var(--ev-rose-lt); color:var(--ev-rose); border-color:rgba(190,18,60,.25); }
  225. .ev-btn-danger:hover { background:var(--ev-rose); color:#fff; }
  226. .ev-btn-teal { background:var(--ev-teal-lt); color:var(--ev-teal); border-color:rgba(13,148,136,.25); }
  227. .ev-btn-teal:hover { background:var(--ev-teal); color:#fff; }
  229. /* ── Pagination ────────────────────────────────────────────── */
  230. .ev-pag {
  231. display:flex; align-items:center; justify-content:space-between;
  232. flex-wrap:wrap; gap:10px;
  233. padding:14px 20px; border-top:1px solid var(--ev-border); background:#fafbfc;
  234. }
  235. .ev-pag__info { font-size:12.5px; color:var(--ev-muted); }
  236. .ev-pager {
  237. display:flex; align-items:center; gap:4px;
  238. list-style:none; margin:0; padding:0;
  239. }
  240. .ev-pager a, .ev-pager span {
  241. display:inline-flex; align-items:center; justify-content:center;
  242. min-width:34px; height:34px; padding:0 8px;
  243. border-radius:8px; border:1px solid var(--ev-border);
  244. font-size:13px; font-weight:500; color:var(--ev-dim);
  245. text-decoration:none; background:#fff;
  246. transition:background .15s, border-color .15s, color .15s;
  247. }
  248. .ev-pager a:hover { border-color:var(--ev-blue); color:var(--ev-blue); }
  249. .ev-pager .pg-active span {
  250. background:var(--ev-blue); color:#fff; border-color:var(--ev-blue); font-weight:700;
  251. }
  252. .ev-pager .pg-disabled span { opacity:.4; }
  254. /* ── Vide ──────────────────────────────────────────────────── */
  255. .ev-empty { text-align:center; padding:64px 24px; color:var(--ev-muted); }
  256. .ev-empty i { font-size:40px; margin-bottom:12px; display:block; }
  257. .ev-empty strong { display:block; font-size:15px; color:var(--ev-dim); margin-bottom:6px; }
  259. /* ── Anim ──────────────────────────────────────────────────── */
  260. @keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
  261. .ev-table-card, .ev-filter-card { animation:fadeUp .4s ease both; }
  262. .ev-filter-card { animation-delay:.06s; }
  263. </style>
  264. {% endblock %}
  266. {% block content %}
  267. <div class="ev-page">
  269. {# ── Topbar ──────────────────────────────────────────────────── #}
  270. <div class="ev-topbar">
  271. <div>
  272. <div class="ev-topbar__title">
  273. <i class="fa fa-file-text-o"></i> Évaluations
  274. </div>
  275. <div class="ev-topbar__sub">Suivi des évaluations séquentielles par classe et matière</div>
  276. </div>
  277. {% if is_granted('ROLE_PROF') or is_granted('ROLE_ADMIN') %}
  278. <a href="{{ path('admin_evaluations_new') }}" class="btn-filter">
  279. <i class="fa fa-plus"></i> Nouvelle évaluation
  280. </a>
  281. {% endif %}
  282. </div>
  284. {# ── Barre de filtre ─────────────────────────────────────────── #}
  285. <div class="ev-filter-card">
  286. <div class="ev-filter-card__title">
  287. <i class="fa fa-filter" style="color:var(--ev-blue)"></i>
  288. Filtrer les évaluations
  289. </div>
  290. {{ form_start(searchForm, {'method': 'GET', 'attr': {'class': ''}}) }}
  291. <div class="ev-filter-row">
  292. {{ form_widget(searchForm.room, {'attr': {'class': ''}}) }}
  293. {{ form_widget(searchForm.sequence, {'attr': {'class': ''}}) }}
  294. {{ form_widget(searchForm.course, {'attr': {'class': ''}}) }}
  295. <div class="ev-filter-actions">
  296. <button type="submit" class="btn-filter">
  297. <i class="fa fa-search"></i> Filtrer
  298. </button>
  299. <a href="{{ path('admin_evaluations') }}" class="btn-reset">
  300. <i class="fa fa-times"></i> Reset
  301. </a>
  302. </div>
  303. </div>
  304. {{ form_end(searchForm) }}
  305. </div>
  307. {# ── KPIs calculés depuis la pagination ─────────────────────── #}
  308. {% set total_evals = pagination.totalItemCount %}
  309. {% set total_success = 0 %}
  310. {% set total_failures = 0 %}
  311. {% set total_absents = 0 %}
  312. {% for eval in pagination %}
  313. {% set total_success = total_success + eval.successH + eval.successF %}
  314. {% set total_failures = total_failures + eval.failluresH + eval.failluresF %}
  315. {% set total_absents = total_absents + eval.abscent %}
  316. {% endfor %}
  318. <div class="ev-kpis">
  319. <div class="ev-kpi">
  320. <div class="ev-kpi__icon ki-blue"><i class="fa fa-file-text-o"></i></div>
  321. <div>
  322. <div class="ev-kpi__val">{{ total_evals }}</div>
  323. <div class="ev-kpi__lbl">Évaluations</div>
  324. </div>
  325. </div>
  326. <div class="ev-kpi">
  327. <div class="ev-kpi__icon ki-green"><i class="fa fa-check-circle"></i></div>
  328. <div>
  329. <div class="ev-kpi__val">{{ total_success }}</div>
  330. <div class="ev-kpi__lbl">Succès (page)</div>
  331. </div>
  332. </div>
  333. <div class="ev-kpi">
  334. <div class="ev-kpi__icon ki-amber"><i class="fa fa-times-circle"></i></div>
  335. <div>
  336. <div class="ev-kpi__val">{{ total_failures }}</div>
  337. <div class="ev-kpi__lbl">Échecs (page)</div>
  338. </div>
  339. </div>
  340. <div class="ev-kpi">
  341. <div class="ev-kpi__icon ki-teal"><i class="fa fa-user-times"></i></div>
  342. <div>
  343. <div class="ev-kpi__val">{{ total_absents }}</div>
  344. <div class="ev-kpi__lbl">Absents (page)</div>
  345. </div>
  346. </div>
  347. </div>
  349. {# ── Table des évaluations ───────────────────────────────────── #}
  350. <div class="ev-table-card">
  351. <div class="ev-table-head">
  352. <div class="ev-table-head__title">
  353. <span class="ev-table-head__dot"></span>
  354. Liste des évaluations
  355. <span style="font-size:11.5px;color:var(--ev-muted);font-weight:400;">
  356. ({{ pagination.totalItemCount }} résultat{{ pagination.totalItemCount > 1 ? 's' : '' }})
  357. </span>
  358. </div>
  359. <span style="font-size:12px;color:var(--ev-muted)">
  360. Page {{ pagination.currentPageNumber }} / {{ pagination.pageCount }}
  361. </span>
  362. </div>
  364. {% if pagination.totalItemCount == 0 %}
  365. <div class="ev-empty">
  366. <i class="fa fa-search"></i>
  367. <strong>Aucune évaluation trouvée</strong>
  368. Modifiez les critères de filtre ou ajoutez une nouvelle évaluation.
  369. </div>
  370. {% else %}
  371. <div style="overflow-x:auto">
  372. <table class="ev-tbl">
  373. <thead>
  374. <tr>
  375. <th style="width:4%">#</th>
  376. <th style="width:16%">Matière</th>
  377. <th style="width:14%">Classe</th>
  378. <th style="width:13%">Séquence</th>
  379. <th style="width:10%" class="text-center">Moy.</th>
  380. <th style="width:8%" class="text-center">Min</th>
  381. <th style="width:8%" class="text-center">Max</th>
  382. <th style="width:18%">Réussite / Échec</th>
  383. <th style="width:9%">Auteur</th>
  384. <th style="width:10%" class="text-right">Actions</th>
  385. </tr>
  386. </thead>
  387. <tbody>
  388. {% for eval in pagination %}
  389. {% set moy = eval.moyenne %}
  390. {% set success = eval.successH + eval.successF %}
  391. {% set failures = eval.failluresH + eval.failluresF %}
  392. {% set effectif = success + failures %}
  393. {% set pct = effectif > 0 ? (success / effectif * 100)|round : 0 %}
  394. <tr>
  395. <td style="color:var(--ev-muted);font-size:12px">
  396. {{ (pagination.currentPageNumber - 1) * pagination.itemNumberPerPage + loop.index }} </td>
  398. <td>
  399. <span class="course-chip">{{ eval.course.wording }}</span>
  400. </td>
  402. <td>
  403. <a href="{{ path('admin_classrooms_show', {id: eval.classRoom.id}) }}" style="text-decoration:none">
  404. <span class="class-chip">{{ eval.classRoom.name }}</span>
  405. </a>
  406. </td>
  408. <td>
  409. <span class="seq-chip">{{ eval.sequence.wording }}</span>
  410. </td>
  412. <td class="text-center">
  413. {% if moy > 0 %}
  414. <span class="score-badge {{ moy >= 14 ? 'sc-good' : (moy >= 10 ? 'sc-mid' : 'sc-low') }}">
  415. {{ moy|number_format(1) }}
  416. </span>
  417. {% else %}
  418. <span class="score-badge sc-none">—</span>
  419. {% endif %}
  420. </td>
  422. <td class="text-center" style="color:var(--ev-rose);font-weight:600;font-size:12.5px">
  423. {{ eval.mini > 0 ? eval.mini|number_format(1) : '—' }}
  424. </td>
  426. <td class="text-center" style="color:var(--ev-green);font-weight:600;font-size:12.5px">
  427. {{ eval.maxi > 0 ? eval.maxi|number_format(1) : '—' }}
  428. </td>
  430. <td>
  431. <div style="display:flex;align-items:center;gap:6px;font-size:11.5px">
  432. <span style="color:var(--ev-green);font-weight:600;">{{ success }}</span>
  433. <span style="color:var(--ev-muted)">/</span>
  434. <span style="color:var(--ev-rose);font-weight:600">{{ failures }}</span>
  435. <div class="mini-bar">
  436. <div class="mini-bar__fill" style="width:{{ pct }}%;background:{{ pct >= 60 ? 'var(--ev-green)' : (pct >= 40 ? 'var(--ev-amber)' : 'var(--ev-rose)') }}"></div>
  437. </div>
  438. <span style="color:var(--ev-muted)">{{ pct }}%</span>
  439. </div>
  440. </td>
  442. <td style="font-size:12px;color:var(--ev-dim)">
  443. {% if eval.author is defined and eval.author %}
  444. {{ eval.author.username|split('.')|first|capitalize }}
  445. {% else %}—{% endif %}
  446. </td>
  448. <td>
  449. <div class="ev-actions">
  450. <a class="ev-btn ev-btn-primary" href="{{ path('admin_evaluations_show', {id: eval.id}) }}" title="Voir">
  451. <i class="fa fa-eye"></i>
  452. </a>
  453. {% if is_granted('ROLE_ADMIN') or (eval.author is defined and eval.author == app.user) %}
  454. <a class="ev-btn ev-btn-warning" href="{{ path('admin_evaluations_edit', {id: eval.id}) }}" title="Modifier">
  455. <i class="fa fa-pencil"></i>
  456. </a>
  457. {% endif %}
  458. <a class="ev-btn ev-btn-teal" href="{{ path('admin_evaluations_pdf', {id: eval.id}) }}" title="PDF" target="_blank">
  459. <i class="fa fa-file-pdf-o"></i>
  460. </a>
  461. {% if is_granted('ROLE_ADMIN') %}
  462. <form method="post" action="{{ path('admin_evaluations_delete', {id: eval.id}) }}"
  463. onsubmit="return confirm('Supprimer cette évaluation ?')" style="display:inline">
  464. <input type="hidden" name="_method" value="DELETE">
  465. <input type="hidden" name="csrf_token" value="{{ csrf_token('evaluations_deletion' ~ eval.id) }}">
  466. <button class="ev-btn ev-btn-danger" type="submit" title="Supprimer">
  467. <i class="fa fa-trash"></i>
  468. </button>
  469. </form>
  470. {% endif %}
  471. </div>
  472. </td>
  473. </tr>
  474. {% endfor %}
  475. </tbody>
  476. </table>
  477. </div>
  479. {# ── Pagination KNP ──────────────────────────────────────────── #}
  480. <div class="ev-pag">
  481. <div class="ev-pag__info">
  482. Affichage {{ (pagination.currentPageNumber - 1) * pagination.itemNumberPerPage + 1 }}–{{ min(pagination.currentPageNumber * pagination.itemNumberPerPage, pagination.totalItemCount) }}
  483. sur {{ pagination.totalItemCount }} évaluation{{ pagination.totalItemCount > 1 ? 's' : '' }}
  484. </div>
  485. <ul class="ev-pager">
  486. {# Prev #}
  487. {% if pagination.currentPageNumber > 1 %}
  488. <li><a href="{{ path('admin_evaluations', app.request.query.all|merge({page: pagination.currentPageNumber - 1})) }}"><i class="fa fa-chevron-left"></i></a></li>
  489. {% else %}
  490. <li class="pg-disabled"><span><i class="fa fa-chevron-left"></i></span></li>
  491. {% endif %}
  493. {# Pages #}
  494. {% for p in 1..pagination.pageCount %}
  495. {% if p == pagination.currentPageNumber %}
  496. <li class="pg-active"><span>{{ p }}</span></li>
  497. {% elseif p == 1 or p == pagination.pageCount or (p >= pagination.currentPageNumber - 2 and p <= pagination.currentPageNumber + 2) %}
  498. <li><a href="{{ path('admin_evaluations', app.request.query.all|merge({page: p})) }}">{{ p }}</a></li>
  499. {% elseif p == pagination.currentPageNumber - 3 or p == pagination.currentPageNumber + 3 %}
  500. <li><span style="border:none;background:transparent;min-width:auto;padding:0 4px">…</span></li>
  501. {% endif %}
  502. {% endfor %}
  504. {# Next #}
  505. {% if pagination.currentPageNumber < pagination.pageCount %}
  506. <li><a href="{{ path('admin_evaluations', app.request.query.all|merge({page: pagination.currentPageNumber + 1})) }}"><i class="fa fa-chevron-right"></i></a></li>
  507. {% else %}
  508. <li class="pg-disabled"><span><i class="fa fa-chevron-right"></i></span></li>
  509. {% endif %}
  510. </ul>
  511. </div>
  512. {% endif %}
  514. </div>{# /.ev-table-card #}
  516. </div>{# /.ev-page #}
  517. {% endblock %}