feat: Permettre aux enseignants de contourner les règles de devoirs avec justification
Akeneo permet de configurer des règles de devoirs en mode Hard qui bloquent totalement la création. Or certains cas légitimes (sorties scolaires, événements exceptionnels) nécessitent de passer outre ces règles. Sans mécanisme d'exception, l'enseignant est bloqué et doit contacter manuellement la direction. Cette implémentation ajoute un flux complet d'exception : l'enseignant justifie sa demande (min 20 caractères), le devoir est créé immédiatement, et la direction est notifiée par email. Le handler vérifie côté serveur que les règles sont réellement bloquantes avant d'accepter l'exception, empêchant toute fabrication de fausses exceptions via l'API. La direction dispose d'un rapport filtrable par période, enseignant et type de règle.
This commit is contained in:
@@ -68,7 +68,8 @@
|
||||
{ href: '/admin/image-rights', label: "Droit à l'image" },
|
||||
{ href: '/admin/pedagogy', label: 'Pédagogie' },
|
||||
{ href: '/admin/branding', label: 'Identité visuelle' },
|
||||
{ href: '/admin/homework-rules', label: 'Règles de devoirs' }
|
||||
{ href: '/admin/homework-rules', label: 'Règles de devoirs' },
|
||||
{ href: '/admin/homework-exceptions', label: 'Exceptions devoirs' }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
468
frontend/src/routes/admin/homework-exceptions/+page.svelte
Normal file
468
frontend/src/routes/admin/homework-exceptions/+page.svelte
Normal file
@@ -0,0 +1,468 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { page } from '$app/state';
|
||||
import { getApiBaseUrl } from '$lib/api/config';
|
||||
import { authenticatedFetch } from '$lib/auth';
|
||||
import { untrack } from 'svelte';
|
||||
|
||||
interface HomeworkException {
|
||||
id: string;
|
||||
homeworkId: string;
|
||||
homeworkTitle: string;
|
||||
ruleType: string;
|
||||
justification: string;
|
||||
teacherId: string;
|
||||
teacherName: string;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
let exceptions = $state<HomeworkException[]>([]);
|
||||
let isLoading = $state(true);
|
||||
let error = $state<string | null>(null);
|
||||
|
||||
let filterTeacherId = $state(page.url.searchParams.get('teacherId') ?? '');
|
||||
let filterRuleType = $state(page.url.searchParams.get('ruleType') ?? '');
|
||||
let filterStartDate = $state(page.url.searchParams.get('startDate') ?? '');
|
||||
let filterEndDate = $state(page.url.searchParams.get('endDate') ?? '');
|
||||
|
||||
$effect(() => {
|
||||
untrack(() => loadExceptions());
|
||||
});
|
||||
|
||||
function extractCollection<T>(data: Record<string, unknown>): T[] {
|
||||
const members = data['hydra:member'] ?? data['member'];
|
||||
if (Array.isArray(members)) return members as T[];
|
||||
if (Array.isArray(data)) return data as T[];
|
||||
return [];
|
||||
}
|
||||
|
||||
async function loadExceptions() {
|
||||
try {
|
||||
isLoading = true;
|
||||
error = null;
|
||||
const apiUrl = getApiBaseUrl();
|
||||
const params = new URLSearchParams();
|
||||
if (filterStartDate) params.set('startDate', filterStartDate);
|
||||
if (filterEndDate) params.set('endDate', filterEndDate);
|
||||
if (filterTeacherId) params.set('teacherId', filterTeacherId);
|
||||
if (filterRuleType) params.set('ruleType', filterRuleType);
|
||||
|
||||
const response = await authenticatedFetch(`${apiUrl}/admin/homework-exceptions?${params.toString()}`);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Erreur lors du chargement des exceptions');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
exceptions = extractCollection<HomeworkException>(data);
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : 'Erreur inconnue';
|
||||
} finally {
|
||||
isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function updateUrl() {
|
||||
const params = new URLSearchParams();
|
||||
if (filterStartDate) params.set('startDate', filterStartDate);
|
||||
if (filterEndDate) params.set('endDate', filterEndDate);
|
||||
if (filterTeacherId) params.set('teacherId', filterTeacherId);
|
||||
if (filterRuleType) params.set('ruleType', filterRuleType);
|
||||
const query = params.toString();
|
||||
goto(`?${query}`, { replaceState: true, noScroll: true, keepFocus: true });
|
||||
}
|
||||
|
||||
function handleFilter() {
|
||||
updateUrl();
|
||||
loadExceptions();
|
||||
}
|
||||
|
||||
function handleClearFilters() {
|
||||
filterStartDate = '';
|
||||
filterEndDate = '';
|
||||
filterTeacherId = '';
|
||||
filterRuleType = '';
|
||||
updateUrl();
|
||||
loadExceptions();
|
||||
}
|
||||
|
||||
function formatDate(dateStr: string): string {
|
||||
return new Date(dateStr).toLocaleDateString('fr-FR', {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
});
|
||||
}
|
||||
|
||||
function formatRuleType(ruleType: string): string {
|
||||
const labels: Record<string, string> = {
|
||||
minimum_delay: 'Délai minimum',
|
||||
no_monday_after: 'Pas de lundi après',
|
||||
};
|
||||
return ruleType
|
||||
.split(',')
|
||||
.map((t) => labels[t] ?? t)
|
||||
.join(', ');
|
||||
}
|
||||
|
||||
// Derive unique teachers from loaded exceptions for the filter dropdown
|
||||
let uniqueTeachers = $derived.by(() => {
|
||||
const seen = new Map<string, string>();
|
||||
for (const ex of exceptions) {
|
||||
if (!seen.has(ex.teacherId)) {
|
||||
seen.set(ex.teacherId, ex.teacherName);
|
||||
}
|
||||
}
|
||||
return [...seen.entries()].map(([id, name]) => ({ id, name }));
|
||||
});
|
||||
|
||||
let hasFilters = $derived(
|
||||
filterStartDate !== '' || filterEndDate !== '' || filterTeacherId !== '' || filterRuleType !== '',
|
||||
);
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Exceptions aux règles de devoirs - Classeo</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="exceptions-page">
|
||||
<header class="page-header">
|
||||
<div class="header-content">
|
||||
<h1>Exceptions aux règles de devoirs</h1>
|
||||
<p class="subtitle">Rapport des contournements de règles par les enseignants</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{#if error}
|
||||
<div class="alert alert-error">
|
||||
<span class="alert-icon">⚠</span>
|
||||
{error}
|
||||
<button class="alert-close" onclick={() => (error = null)}>×</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="filters-section">
|
||||
<div class="filters-row">
|
||||
<div class="filter-group">
|
||||
<label for="filter-start">Du</label>
|
||||
<input
|
||||
type="date"
|
||||
id="filter-start"
|
||||
bind:value={filterStartDate}
|
||||
onchange={handleFilter}
|
||||
/>
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<label for="filter-end">Au</label>
|
||||
<input
|
||||
type="date"
|
||||
id="filter-end"
|
||||
bind:value={filterEndDate}
|
||||
onchange={handleFilter}
|
||||
/>
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<label for="filter-teacher">Enseignant</label>
|
||||
<select id="filter-teacher" bind:value={filterTeacherId} onchange={handleFilter}>
|
||||
<option value="">Tous les enseignants</option>
|
||||
{#each uniqueTeachers as teacher (teacher.id)}
|
||||
<option value={teacher.id}>{teacher.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<label for="filter-rule">Règle</label>
|
||||
<select id="filter-rule" bind:value={filterRuleType} onchange={handleFilter}>
|
||||
<option value="">Toutes les règles</option>
|
||||
<option value="minimum_delay">Délai minimum</option>
|
||||
<option value="no_monday_after">Pas de lundi après</option>
|
||||
</select>
|
||||
</div>
|
||||
{#if hasFilters}
|
||||
<button class="btn-clear" onclick={handleClearFilters}>Effacer les filtres</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if isLoading}
|
||||
<div class="loading-state" aria-live="polite" role="status">
|
||||
<div class="spinner"></div>
|
||||
<p>Chargement des exceptions...</p>
|
||||
</div>
|
||||
{:else if exceptions.length === 0}
|
||||
<div class="empty-state">
|
||||
<span class="empty-icon">✅</span>
|
||||
<h2>Aucune exception</h2>
|
||||
<p>
|
||||
{#if hasFilters}
|
||||
Aucune exception ne correspond à vos critères de recherche.
|
||||
{:else}
|
||||
Aucun enseignant n'a demandé d'exception aux règles de devoirs.
|
||||
{/if}
|
||||
</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="results-summary">
|
||||
{exceptions.length} exception{exceptions.length > 1 ? 's' : ''} trouvée{exceptions.length > 1 ? 's' : ''}
|
||||
</div>
|
||||
<div class="exceptions-list">
|
||||
{#each exceptions as ex (ex.id)}
|
||||
<div class="exception-card">
|
||||
<div class="exception-header">
|
||||
<h3 class="exception-homework">{ex.homeworkTitle}</h3>
|
||||
<span class="exception-rule">{formatRuleType(ex.ruleType)}</span>
|
||||
</div>
|
||||
<div class="exception-meta">
|
||||
<span class="meta-item" title="Enseignant">
|
||||
<span class="meta-icon">👤</span>
|
||||
{ex.teacherName}
|
||||
</span>
|
||||
<span class="meta-item" title="Date de l'exception">
|
||||
<span class="meta-icon">📅</span>
|
||||
{formatDate(ex.createdAt)}
|
||||
</span>
|
||||
</div>
|
||||
<div class="exception-justification">
|
||||
<span class="justification-label">Justification :</span>
|
||||
<p class="justification-text">{ex.justification}</p>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.exceptions-page {
|
||||
padding: 1.5rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.header-content h1 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin: 0.25rem 0 0;
|
||||
color: #6b7280;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.alert {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.alert-icon {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.alert-close {
|
||||
margin-left: auto;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.25rem;
|
||||
cursor: pointer;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.filters-section {
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 0.75rem;
|
||||
padding: 1rem 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.filters-row {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: flex-end;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.filter-group label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #6b7280;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.filter-group input,
|
||||
.filter-group select {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.btn-clear {
|
||||
padding: 0.5rem 1rem;
|
||||
background: #f3f4f6;
|
||||
color: #374151;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-clear:hover {
|
||||
background: #e5e7eb;
|
||||
}
|
||||
|
||||
.loading-state,
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 3rem;
|
||||
text-align: center;
|
||||
background: white;
|
||||
border-radius: 0.75rem;
|
||||
border: 2px dashed #e5e7eb;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border: 3px solid #e5e7eb;
|
||||
border-top-color: #3b82f6;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.empty-state h2 {
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: 1.25rem;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
margin: 0;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.results-summary {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.exceptions-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.exception-card {
|
||||
padding: 1.25rem;
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 0.75rem;
|
||||
border-left: 4px solid #f59e0b;
|
||||
}
|
||||
|
||||
.exception-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.exception-homework {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.exception-rule {
|
||||
flex-shrink: 0;
|
||||
padding: 0.125rem 0.5rem;
|
||||
background: #fffbeb;
|
||||
color: #92400e;
|
||||
border: 1px solid #fde68a;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.exception-meta {
|
||||
display: flex;
|
||||
gap: 1.25rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.meta-icon {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.exception-justification {
|
||||
background: #f9fafb;
|
||||
border-radius: 0.375rem;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.justification-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #6b7280;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.justification-text {
|
||||
margin: 0.25rem 0 0;
|
||||
font-size: 0.875rem;
|
||||
color: #374151;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
@@ -4,6 +4,7 @@
|
||||
import { getApiBaseUrl } from '$lib/api/config';
|
||||
import { authenticatedFetch, getAuthenticatedUserId } from '$lib/auth';
|
||||
import Pagination from '$lib/components/molecules/Pagination/Pagination.svelte';
|
||||
import ExceptionRequestModal from '$lib/components/molecules/ExceptionRequestModal/ExceptionRequestModal.svelte';
|
||||
import RuleBlockedModal from '$lib/components/molecules/RuleBlockedModal/RuleBlockedModal.svelte';
|
||||
import SearchInput from '$lib/components/molecules/SearchInput/SearchInput.svelte';
|
||||
import { untrack } from 'svelte';
|
||||
@@ -20,6 +21,9 @@
|
||||
className: string | null;
|
||||
subjectName: string | null;
|
||||
hasRuleOverride: boolean;
|
||||
hasRuleException?: boolean;
|
||||
ruleExceptionJustification?: string | null;
|
||||
ruleExceptionRuleType?: string | null;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
@@ -105,6 +109,15 @@
|
||||
let ruleBlockedWarnings = $state<RuleWarning[]>([]);
|
||||
let ruleBlockedSuggestedDates = $state<string[]>([]);
|
||||
|
||||
// Exception justification viewing
|
||||
let showJustificationModal = $state(false);
|
||||
let justificationHomework = $state<Homework | null>(null);
|
||||
|
||||
// Exception request modal
|
||||
let showExceptionModal = $state(false);
|
||||
let exceptionWarnings = $state<RuleWarning[]>([]);
|
||||
let isSubmittingException = $state(false);
|
||||
|
||||
// Inline date validation for hard mode
|
||||
let dueDateError = $state<string | null>(null);
|
||||
|
||||
@@ -452,6 +465,55 @@
|
||||
showCreateModal = true;
|
||||
}
|
||||
|
||||
function handleRequestException() {
|
||||
exceptionWarnings = ruleBlockedWarnings;
|
||||
showRuleBlockedModal = false;
|
||||
showExceptionModal = true;
|
||||
}
|
||||
|
||||
async function handleExceptionSubmit(justification: string, ruleTypes: string[]) {
|
||||
if (!newClassId || !newSubjectId || !newTitle.trim() || !newDueDate) return;
|
||||
|
||||
try {
|
||||
isSubmittingException = true;
|
||||
error = null;
|
||||
const apiUrl = getApiBaseUrl();
|
||||
const response = await authenticatedFetch(`${apiUrl}/homework/with-exception`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
classId: newClassId,
|
||||
subjectId: newSubjectId,
|
||||
title: newTitle.trim(),
|
||||
description: newDescription.trim() || null,
|
||||
dueDate: newDueDate,
|
||||
justification,
|
||||
ruleTypes,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => null);
|
||||
const msg =
|
||||
errorData?.['hydra:description'] ??
|
||||
errorData?.message ??
|
||||
errorData?.detail ??
|
||||
`Erreur lors de la création avec exception (${response.status})`;
|
||||
throw new Error(msg);
|
||||
}
|
||||
|
||||
showExceptionModal = false;
|
||||
exceptionWarnings = [];
|
||||
ruleBlockedWarnings = [];
|
||||
ruleBlockedSuggestedDates = [];
|
||||
await loadHomeworks();
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : 'Erreur lors de la création avec exception';
|
||||
} finally {
|
||||
isSubmittingException = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleBlockedClose() {
|
||||
const firstSuggested = ruleBlockedSuggestedDates[0];
|
||||
const conformDate = firstSuggested ?? computeConformMinDate(ruleBlockedWarnings);
|
||||
@@ -717,7 +779,14 @@
|
||||
<div class="homework-header">
|
||||
<h3 class="homework-title">{hw.title}</h3>
|
||||
<div class="homework-badges">
|
||||
{#if hw.hasRuleOverride}
|
||||
{#if hw.hasRuleException}
|
||||
<button
|
||||
type="button"
|
||||
class="badge-rule-exception"
|
||||
title="Créé avec une exception aux règles — cliquer pour voir la justification"
|
||||
onclick={() => { justificationHomework = hw; showJustificationModal = true; }}
|
||||
>⚠ Exception</button>
|
||||
{:else if hw.hasRuleOverride}
|
||||
<span class="badge-rule-override" title="Créé malgré un avertissement de règle">⚠</span>
|
||||
{/if}
|
||||
<span class="homework-status" class:status-published={hw.status === 'published'} class:status-deleted={hw.status === 'deleted'}>
|
||||
@@ -1158,9 +1227,63 @@
|
||||
suggestedDates={ruleBlockedSuggestedDates}
|
||||
onSelectDate={handleBlockedSelectDate}
|
||||
onClose={handleBlockedClose}
|
||||
onRequestException={handleRequestException}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<!-- Exception Request Modal -->
|
||||
{#if showExceptionModal && exceptionWarnings.length > 0}
|
||||
<ExceptionRequestModal
|
||||
warnings={exceptionWarnings}
|
||||
onSubmit={handleExceptionSubmit}
|
||||
onClose={() => {
|
||||
showExceptionModal = false;
|
||||
exceptionWarnings = [];
|
||||
}}
|
||||
isSubmitting={isSubmittingException}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<!-- Justification Viewing Modal -->
|
||||
{#if showJustificationModal && justificationHomework}
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="modal-overlay" onclick={() => { showJustificationModal = false; justificationHomework = null; }} role="presentation">
|
||||
<div
|
||||
class="modal modal-confirm"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="justification-title"
|
||||
tabindex="-1"
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
onkeydown={(e) => { if (e.key === 'Escape') { showJustificationModal = false; justificationHomework = null; } }}
|
||||
>
|
||||
<header class="modal-header modal-header-exception-view">
|
||||
<h2 id="justification-title">Exception aux règles</h2>
|
||||
<button class="modal-close" onclick={() => { showJustificationModal = false; justificationHomework = null; }} aria-label="Fermer">×</button>
|
||||
</header>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="justification-info">
|
||||
<span class="justification-info-label">Devoir :</span>
|
||||
<span>{justificationHomework.title}</span>
|
||||
<span class="justification-info-label">Règle contournée :</span>
|
||||
<span>{justificationHomework.ruleExceptionRuleType ?? 'N/A'}</span>
|
||||
</div>
|
||||
<div class="justification-content">
|
||||
<span class="justification-content-label">Justification :</span>
|
||||
<p class="justification-content-text">{justificationHomework.ruleExceptionJustification ?? 'Non disponible'}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-actions">
|
||||
<button type="button" class="btn-secondary" onclick={() => { showJustificationModal = false; justificationHomework = null; }}>
|
||||
Fermer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.homework-page {
|
||||
padding: 1.5rem;
|
||||
@@ -1713,6 +1836,73 @@
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.badge-rule-exception {
|
||||
font-size: 0.7rem;
|
||||
color: #92400e;
|
||||
background: #fffbeb;
|
||||
border: 1px solid #fde68a;
|
||||
border-radius: 9999px;
|
||||
padding: 0.125rem 0.5rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.badge-rule-exception:hover {
|
||||
background: #fef3c7;
|
||||
border-color: #f59e0b;
|
||||
}
|
||||
|
||||
/* Justification viewing modal */
|
||||
.modal-header-exception-view {
|
||||
background: #f59e0b;
|
||||
color: white;
|
||||
border-radius: 0.75rem 0.75rem 0 0;
|
||||
}
|
||||
|
||||
.modal-header-exception-view h2 {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.justification-info {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0.25rem 0.75rem;
|
||||
padding: 0.75rem 1rem;
|
||||
margin-bottom: 1rem;
|
||||
background: #f9fafb;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.justification-info-label {
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.justification-content {
|
||||
padding: 0.75rem 1rem;
|
||||
background: #fffbeb;
|
||||
border: 1px solid #fde68a;
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.justification-content-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #92400e;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.justification-content-text {
|
||||
margin: 0.25rem 0 0;
|
||||
font-size: 0.875rem;
|
||||
color: #374151;
|
||||
line-height: 1.5;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Rule Warning Modal */
|
||||
.modal-header-warning {
|
||||
border-bottom: 3px solid #f59e0b;
|
||||
|
||||
Reference in New Issue
Block a user