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:
@@ -0,0 +1,292 @@
|
||||
<script lang="ts">
|
||||
interface RuleWarning {
|
||||
ruleType: string;
|
||||
message: string;
|
||||
params: Record<string, unknown>;
|
||||
}
|
||||
|
||||
let {
|
||||
warnings,
|
||||
onSubmit,
|
||||
onClose,
|
||||
isSubmitting = false,
|
||||
}: {
|
||||
warnings: RuleWarning[];
|
||||
onSubmit: (justification: string, ruleTypes: string[]) => void;
|
||||
onClose: () => void;
|
||||
isSubmitting?: boolean;
|
||||
} = $props();
|
||||
|
||||
let justification = $state('');
|
||||
let charCount = $derived(justification.length);
|
||||
let isValid = $derived(charCount >= 20);
|
||||
|
||||
let modalElement = $state<HTMLDivElement | null>(null);
|
||||
|
||||
$effect(() => {
|
||||
if (modalElement) {
|
||||
modalElement.focus();
|
||||
}
|
||||
});
|
||||
|
||||
function handleSubmit() {
|
||||
if (!isValid || isSubmitting) return;
|
||||
const ruleTypes = warnings.map((w) => w.ruleType);
|
||||
onSubmit(justification, ruleTypes);
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="modal-overlay" onclick={onClose} role="presentation">
|
||||
<div
|
||||
bind:this={modalElement}
|
||||
class="modal"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="exception-request-title"
|
||||
aria-describedby="exception-request-description"
|
||||
tabindex="-1"
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
onkeydown={(e) => {
|
||||
if (e.key === 'Escape') onClose();
|
||||
}}
|
||||
>
|
||||
<header class="modal-header modal-header-exception">
|
||||
<h2 id="exception-request-title">Demander une exception</h2>
|
||||
<button class="modal-close" onclick={onClose} aria-label="Fermer">×</button>
|
||||
</header>
|
||||
|
||||
<form
|
||||
class="modal-body"
|
||||
onsubmit={(e) => {
|
||||
e.preventDefault();
|
||||
handleSubmit();
|
||||
}}
|
||||
>
|
||||
<p id="exception-request-description">
|
||||
Ce devoir enfreint les règles suivantes. Veuillez justifier votre demande d'exception :
|
||||
</p>
|
||||
|
||||
<ul class="rule-list">
|
||||
{#each warnings as warning}
|
||||
<li class="rule-item">
|
||||
<span class="rule-icon">🚫</span>
|
||||
<span>{warning.message}</span>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="exception-justification">
|
||||
Justification <span class="required">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="exception-justification"
|
||||
bind:value={justification}
|
||||
placeholder="Expliquez pourquoi ce devoir nécessite une exception aux règles..."
|
||||
rows="4"
|
||||
minlength="20"
|
||||
required
|
||||
></textarea>
|
||||
<div class="char-counter" class:char-counter-valid={isValid} class:char-counter-invalid={charCount > 0 && !isValid}>
|
||||
{charCount}/20 caractères minimum
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="exception-notice">
|
||||
Le devoir sera créé immédiatement. La direction sera notifiée de cette exception.
|
||||
</p>
|
||||
|
||||
<div class="modal-actions">
|
||||
<button type="button" class="btn-secondary" onclick={onClose} disabled={isSubmitting}>
|
||||
Annuler
|
||||
</button>
|
||||
<button type="submit" class="btn-primary" disabled={!isValid || isSubmitting}>
|
||||
{#if isSubmitting}
|
||||
Création...
|
||||
{:else}
|
||||
Créer avec exception
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: white;
|
||||
border-radius: 0.75rem;
|
||||
width: 100%;
|
||||
max-width: 32rem;
|
||||
max-height: 90vh;
|
||||
overflow: auto;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.modal-header-exception {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 1.5rem;
|
||||
background: #f59e0b;
|
||||
color: white;
|
||||
border-radius: 0.75rem 0.75rem 0 0;
|
||||
}
|
||||
|
||||
.modal-header-exception h2 {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
padding: 0.25rem 0.5rem;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.rule-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.rule-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
background: #fef2f2;
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
border: 1px solid #fecaca;
|
||||
}
|
||||
|
||||
.rule-icon {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.required {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 1rem;
|
||||
resize: vertical;
|
||||
min-height: 80px;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: #f59e0b;
|
||||
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
|
||||
}
|
||||
|
||||
.char-counter {
|
||||
margin-top: 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.char-counter-valid {
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.char-counter-invalid {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.exception-notice {
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
font-style: italic;
|
||||
margin: 1rem 0 0;
|
||||
padding: 0.75rem;
|
||||
background: #fffbeb;
|
||||
border: 1px solid #fde68a;
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.75rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
padding: 0.625rem 1.25rem;
|
||||
background: #f59e0b;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 0.375rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background: #d97706;
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
padding: 0.625rem 1.25rem;
|
||||
background: white;
|
||||
color: #374151;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.375rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
background: #f3f4f6;
|
||||
}
|
||||
</style>
|
||||
@@ -10,11 +10,13 @@
|
||||
suggestedDates = [],
|
||||
onSelectDate,
|
||||
onClose,
|
||||
onRequestException,
|
||||
}: {
|
||||
warnings: RuleWarning[];
|
||||
suggestedDates: string[];
|
||||
onSelectDate: (date: string) => void;
|
||||
onClose: () => void;
|
||||
onRequestException?: () => void;
|
||||
} = $props();
|
||||
|
||||
let modalElement = $state<HTMLDivElement | null>(null);
|
||||
@@ -86,11 +88,13 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<p class="rule-blocked-exception">
|
||||
<span class="exception-link-placeholder">
|
||||
Besoin d'une exception ? Contactez votre administration.
|
||||
</span>
|
||||
</p>
|
||||
{#if onRequestException}
|
||||
<div class="rule-blocked-exception">
|
||||
<button type="button" class="btn-exception" onclick={onRequestException}>
|
||||
Demander une exception
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="modal-actions">
|
||||
@@ -202,10 +206,39 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.exception-link-placeholder {
|
||||
color: #6b7280;
|
||||
.btn-exception {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: #fffbeb;
|
||||
color: #92400e;
|
||||
border: 1px solid #fde68a;
|
||||
border-radius: 0.375rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
font-style: italic;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-exception:hover {
|
||||
background: #fef3c7;
|
||||
border-color: #f59e0b;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
padding: 0.625rem 1.25rem;
|
||||
background: white;
|
||||
color: #374151;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.375rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
|
||||
@@ -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