feat: Bloquer la création de devoirs non conformes en mode hard
Some checks failed
CI / Backend Tests (push) Has been cancelled
CI / Frontend Tests (push) Has been cancelled
CI / E2E Tests (push) Has been cancelled
CI / Naming Conventions (push) Has been cancelled
CI / Build Check (push) Has been cancelled

Les établissements utilisant le mode "Hard" des règles de devoirs
empêchent désormais les enseignants de créer des devoirs hors règles.
Contrairement au mode "Soft" (avertissement avec possibilité de passer
outre), le mode "Hard" est un blocage strict : même acknowledgeWarning
ne permet pas de contourner.

L'API retourne 422 (au lieu de 409 pour le soft) avec des dates
conformes suggérées calculées via le calendrier scolaire (weekends,
fériés, vacances exclus). Le frontend affiche un modal de blocage
avec les raisons, des dates cliquables, et une validation client
inline qui empêche la soumission de dates non conformes.
This commit is contained in:
2026-03-19 00:35:20 +01:00
parent c46d053db7
commit 40b646a5de
15 changed files with 1496 additions and 8 deletions

View File

@@ -0,0 +1,347 @@
import { test, expect } from '@playwright/test';
import { execSync } from 'child_process';
import { join, dirname } from 'path';
import { fileURLToPath } from 'url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const baseUrl = process.env.PLAYWRIGHT_BASE_URL || 'http://localhost:4173';
const urlMatch = baseUrl.match(/:(\d+)$/);
const PORT = urlMatch ? urlMatch[1] : '4173';
const ALPHA_URL = `http://ecole-alpha.classeo.local:${PORT}`;
const TEACHER_EMAIL = 'e2e-rules-hard-teacher@example.com';
const TEACHER_PASSWORD = 'RulesHard123';
const TENANT_ID = 'a1b2c3d4-e5f6-7890-abcd-ef1234567890';
const projectRoot = join(__dirname, '../..');
const composeFile = join(projectRoot, 'compose.yaml');
function runSql(sql: string) {
execSync(
`docker compose -f "${composeFile}" exec -T php php bin/console dbal:run-sql "${sql}" 2>&1`,
{ encoding: 'utf-8' },
);
}
function clearCache() {
try {
execSync(
`docker compose -f "${composeFile}" exec -T php php bin/console cache:pool:clear paginated_queries.cache 2>&1`,
{ encoding: 'utf-8' },
);
} catch {
// Cache pool may not exist
}
}
function resolveDeterministicIds(): { schoolId: string; academicYearId: string } {
const output = execSync(
`docker compose -f "${composeFile}" exec -T php php -r '` +
`require "/app/vendor/autoload.php"; ` +
`$t="${TENANT_ID}"; $ns="6ba7b814-9dad-11d1-80b4-00c04fd430c8"; ` +
`echo Ramsey\\Uuid\\Uuid::uuid5($ns,"school-$t")->toString()."\\n"; ` +
`$m=(int)date("n"); $s=$m>=9?(int)date("Y"):(int)date("Y")-1; $e=$s+1; ` +
`echo Ramsey\\Uuid\\Uuid::uuid5($ns,"$t:$s-$e")->toString();` +
`' 2>&1`,
{ encoding: 'utf-8' },
).trim();
const [schoolId, academicYearId] = output.split('\n');
return { schoolId: schoolId!, academicYearId: academicYearId! };
}
/**
* Returns a weekday date string (YYYY-MM-DD), N days from now.
* Skips weekends.
*/
function getNextWeekday(daysFromNow: number): string {
const date = new Date();
date.setDate(date.getDate() + daysFromNow);
const day = date.getDay();
if (day === 0) date.setDate(date.getDate() + 1);
if (day === 6) date.setDate(date.getDate() + 2);
const y = date.getFullYear();
const m = String(date.getMonth() + 1).padStart(2, '0');
const d = String(date.getDate()).padStart(2, '0');
return `${y}-${m}-${d}`;
}
async function loginAsTeacher(page: import('@playwright/test').Page) {
await page.goto(`${ALPHA_URL}/login`);
await page.locator('#email').fill(TEACHER_EMAIL);
await page.locator('#password').fill(TEACHER_PASSWORD);
await Promise.all([
page.waitForURL(/\/dashboard/, { timeout: 30000 }),
page.getByRole('button', { name: /se connecter/i }).click(),
]);
}
async function navigateToHomework(page: import('@playwright/test').Page) {
await page.goto(`${ALPHA_URL}/dashboard/teacher/homework`);
await expect(page.getByRole('heading', { name: /mes devoirs/i })).toBeVisible({ timeout: 15000 });
}
function seedTeacherAssignments() {
const { academicYearId } = resolveDeterministicIds();
try {
runSql(
`INSERT INTO teacher_assignments (id, tenant_id, teacher_id, school_class_id, subject_id, academic_year_id, status, start_date, created_at, updated_at) ` +
`SELECT gen_random_uuid(), '${TENANT_ID}', u.id, c.id, s.id, '${academicYearId}', 'active', NOW(), NOW(), NOW() ` +
`FROM users u CROSS JOIN school_classes c CROSS JOIN subjects s ` +
`WHERE u.email = '${TEACHER_EMAIL}' AND u.tenant_id = '${TENANT_ID}' ` +
`AND c.tenant_id = '${TENANT_ID}' ` +
`AND s.tenant_id = '${TENANT_ID}' ` +
`ON CONFLICT DO NOTHING`,
);
} catch {
// Table may not exist
}
}
/**
* Configure homework rules with minimum_delay of 7 days in hard mode
* so that a homework due in 1-2 days triggers a blocking error.
*/
function seedHardRules() {
const rulesJson = '[{\\"type\\":\\"minimum_delay\\",\\"params\\":{\\"days\\":7}}]';
runSql(
`INSERT INTO homework_rules (id, tenant_id, rules, enforcement_mode, enabled, created_at, updated_at) ` +
`VALUES (gen_random_uuid(), '${TENANT_ID}', '${rulesJson}'::jsonb, 'hard', true, NOW(), NOW()) ` +
`ON CONFLICT (tenant_id) DO UPDATE SET rules = '${rulesJson}'::jsonb, enforcement_mode = 'hard', enabled = true, updated_at = NOW()`,
);
}
function clearRules() {
try {
runSql(`DELETE FROM homework_rules WHERE tenant_id = '${TENANT_ID}'`);
} catch {
// Table may not exist
}
}
async function openCreateAndFillForm(page: import('@playwright/test').Page, title: string, daysFromNow: number) {
await page.getByRole('button', { name: /nouveau devoir/i }).click();
await expect(page.getByRole('dialog')).toBeVisible({ timeout: 5000 });
const nearDate = getNextWeekday(daysFromNow);
await page.locator('#hw-class').selectOption({ index: 1 });
await expect(page.locator('#hw-subject')).toBeEnabled({ timeout: 5000 });
await page.locator('#hw-subject').selectOption({ index: 1 });
await page.locator('#hw-title').fill(title);
await page.locator('#hw-due-date').fill(nearDate);
await page.getByRole('button', { name: /créer le devoir/i }).click();
}
test.describe('Homework Rules - Hard Mode Blocking (Story 5.5)', () => {
test.beforeAll(async () => {
// Create teacher user
execSync(
`docker compose -f "${composeFile}" exec -T php php bin/console app:dev:create-test-user --tenant=ecole-alpha --email=${TEACHER_EMAIL} --password=${TEACHER_PASSWORD} --role=ROLE_PROF 2>&1`,
{ encoding: 'utf-8' },
);
const { schoolId, academicYearId } = resolveDeterministicIds();
try {
runSql(
`INSERT INTO school_classes (id, tenant_id, school_id, academic_year_id, name, level, status, created_at, updated_at) ` +
`VALUES (gen_random_uuid(), '${TENANT_ID}', '${schoolId}', '${academicYearId}', 'E2E-RH-6A', '6ème', 'active', NOW(), NOW()) ON CONFLICT DO NOTHING`,
);
runSql(
`INSERT INTO subjects (id, tenant_id, school_id, name, code, status, created_at, updated_at) ` +
`VALUES (gen_random_uuid(), '${TENANT_ID}', '${schoolId}', 'E2E-RH-Maths', 'E2ERHM', 'active', NOW(), NOW()) ON CONFLICT DO NOTHING`,
);
} catch {
// May already exist
}
seedTeacherAssignments();
});
test.beforeEach(async () => {
try {
runSql(
`DELETE FROM homework WHERE tenant_id = '${TENANT_ID}' AND teacher_id IN (SELECT id FROM users WHERE email = '${TEACHER_EMAIL}' AND tenant_id = '${TENANT_ID}')`,
);
} catch {
// Table may not exist
}
clearRules();
clearCache();
});
// ============================================================================
// AC1: Blocking when hard mode is active
// ============================================================================
test.describe('AC1: Hard mode blocks creation', () => {
test('shows blocking modal instead of warning when hard mode is active', async ({ page }) => {
seedHardRules();
clearCache();
await loginAsTeacher(page);
await navigateToHomework(page);
await openCreateAndFillForm(page, 'Devoir hard block', 2);
// Blocking modal appears (not warning)
const blockedDialog = page.getByRole('alertdialog');
await expect(blockedDialog).toBeVisible({ timeout: 10000 });
await expect(blockedDialog.getByText(/impossible de créer ce devoir/i)).toBeVisible();
// No "Continuer malgré tout" button
await expect(blockedDialog.getByRole('button', { name: /continuer malgré tout/i })).not.toBeVisible();
});
test('cannot bypass hard mode with acknowledgment', async ({ page }) => {
seedHardRules();
clearCache();
await loginAsTeacher(page);
await navigateToHomework(page);
await openCreateAndFillForm(page, 'Devoir bypass test', 2);
const blockedDialog = page.getByRole('alertdialog');
await expect(blockedDialog).toBeVisible({ timeout: 10000 });
// Only "Modifier la date" button, no bypass option
await expect(blockedDialog.getByRole('button', { name: /modifier la date/i })).toBeVisible();
await expect(blockedDialog.getByRole('button', { name: /continuer/i })).not.toBeVisible();
});
});
// ============================================================================
// AC2: Blocking message with reason and suggestions
// ============================================================================
test.describe('AC2: Blocking message with suggestions', () => {
test('shows violation reason in blocking modal', async ({ page }) => {
seedHardRules();
clearCache();
await loginAsTeacher(page);
await navigateToHomework(page);
await openCreateAndFillForm(page, 'Devoir raison blocage', 2);
const blockedDialog = page.getByRole('alertdialog');
await expect(blockedDialog).toBeVisible({ timeout: 10000 });
// Shows the reason
await expect(blockedDialog.getByText(/au moins/i)).toBeVisible();
await expect(blockedDialog.getByText(/interdisent la création/i)).toBeVisible();
});
test('shows suggested conforming dates', async ({ page }) => {
seedHardRules();
clearCache();
await loginAsTeacher(page);
await navigateToHomework(page);
await openCreateAndFillForm(page, 'Devoir suggestions', 2);
const blockedDialog = page.getByRole('alertdialog');
await expect(blockedDialog).toBeVisible({ timeout: 10000 });
// Suggested dates section visible
await expect(blockedDialog.getByText(/dates conformes suggérées/i)).toBeVisible();
// At least one suggested date button
const suggestedGroup = blockedDialog.getByRole('group', { name: /dates conformes suggérées/i });
await expect(suggestedGroup.getByRole('button').first()).toBeVisible();
});
test('clicking suggested date reopens form with that date', async ({ page }) => {
seedHardRules();
clearCache();
await loginAsTeacher(page);
await navigateToHomework(page);
await openCreateAndFillForm(page, 'Devoir select date', 2);
const blockedDialog = page.getByRole('alertdialog');
await expect(blockedDialog).toBeVisible({ timeout: 10000 });
// Click first suggested date
const firstSuggested = blockedDialog.getByRole('group', { name: /dates conformes suggérées/i }).getByRole('button').first();
await firstSuggested.click();
// Blocked modal closes, create form reopens
await expect(blockedDialog).not.toBeVisible({ timeout: 3000 });
const createDialog = page.getByRole('dialog');
await expect(createDialog).toBeVisible();
await expect(createDialog.locator('#hw-due-date')).toBeVisible();
});
});
// ============================================================================
// AC3: Exception request information
// ============================================================================
test.describe('AC3: Exception request information', () => {
test('shows exception contact information in blocking modal', async ({ page }) => {
seedHardRules();
clearCache();
await loginAsTeacher(page);
await navigateToHomework(page);
await openCreateAndFillForm(page, 'Devoir exception link', 2);
const blockedDialog = page.getByRole('alertdialog');
await expect(blockedDialog).toBeVisible({ timeout: 10000 });
// Exception information visible
await expect(blockedDialog.getByText(/exception.*contactez/i)).toBeVisible();
});
});
// ============================================================================
// AC4: Calendar with conforming dates
// ============================================================================
test.describe('AC4: Calendar enforces conforming dates', () => {
test('modify date reopens form with conforming minimum date', async ({ page }) => {
seedHardRules();
clearCache();
await loginAsTeacher(page);
await navigateToHomework(page);
await openCreateAndFillForm(page, 'Devoir modify date hard', 2);
const blockedDialog = page.getByRole('alertdialog');
await expect(blockedDialog).toBeVisible({ timeout: 10000 });
// Click "Modifier la date"
await blockedDialog.getByRole('button', { name: /modifier la date/i }).click();
// Form reopens
await expect(blockedDialog).not.toBeVisible({ timeout: 3000 });
const createDialog = page.getByRole('dialog');
await expect(createDialog).toBeVisible();
// Date input should have min attribute enforcing conforming dates
const dateInput = createDialog.locator('#hw-due-date');
await expect(dateInput).toBeVisible();
const minValue = await dateInput.getAttribute('min');
expect(minValue).toBeTruthy();
});
test('homework can be created with compliant date after modification', async ({ page }) => {
seedHardRules();
clearCache();
await loginAsTeacher(page);
await navigateToHomework(page);
await openCreateAndFillForm(page, 'Devoir compliant hard', 2);
const blockedDialog = page.getByRole('alertdialog');
await expect(blockedDialog).toBeVisible({ timeout: 10000 });
// Click first suggested date
const firstSuggested = blockedDialog.getByRole('group', { name: /dates conformes suggérées/i }).getByRole('button').first();
await firstSuggested.click();
// Submit with the compliant date
await page.getByRole('button', { name: /créer le devoir/i }).click();
// Homework created successfully
await expect(page.getByText('Devoir compliant hard')).toBeVisible({ timeout: 10000 });
});
});
});

View File

@@ -0,0 +1,218 @@
<script lang="ts">
interface RuleWarning {
ruleType: string;
message: string;
params: Record<string, unknown>;
}
let {
warnings,
suggestedDates = [],
onSelectDate,
onClose,
}: {
warnings: RuleWarning[];
suggestedDates: string[];
onSelectDate: (date: string) => void;
onClose: () => void;
} = $props();
let modalElement = $state<HTMLDivElement | null>(null);
$effect(() => {
if (modalElement) {
modalElement.focus();
}
});
function formatDate(dateStr: string): string {
const date = new Date(dateStr + 'T00:00:00');
return date.toLocaleDateString('fr-FR', {
weekday: 'long',
day: 'numeric',
month: 'long',
year: 'numeric',
});
}
</script>
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="modal-overlay" role="presentation">
<div
bind:this={modalElement}
class="modal modal-confirm"
role="alertdialog"
aria-modal="true"
aria-labelledby="rule-blocked-title"
aria-describedby="rule-blocked-description"
tabindex="-1"
onclick={(e) => e.stopPropagation()}
onkeydown={(e) => {
if (e.key === 'Escape') onClose();
}}
>
<header class="modal-header modal-header-blocked">
<h2 id="rule-blocked-title">Impossible de créer ce devoir</h2>
</header>
<div class="modal-body">
<p id="rule-blocked-description">
Les règles de votre établissement interdisent la création de ce devoir :
</p>
<ul class="rule-blocked-list">
{#each warnings as warning}
<li class="rule-blocked-item">
<span class="rule-blocked-icon">&#128683;</span>
<span>{warning.message}</span>
</li>
{/each}
</ul>
{#if suggestedDates.length > 0}
<div class="suggested-dates" role="group" aria-label="Dates conformes suggérées">
<p class="suggested-dates-label">Dates conformes suggérées :</p>
<div class="suggested-dates-list">
{#each suggestedDates as date}
<button
type="button"
class="suggested-date-btn"
aria-label="Sélectionner {formatDate(date)}"
onclick={() => onSelectDate(date)}
>
{formatDate(date)}
</button>
{/each}
</div>
</div>
{/if}
<p class="rule-blocked-exception">
<span class="exception-link-placeholder">
Besoin d'une exception ? Contactez votre administration.
</span>
</p>
</div>
<div class="modal-actions">
<button type="button" class="btn-secondary" onclick={onClose}>
Modifier la date
</button>
</div>
</div>
</div>
<style>
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
}
.modal {
background: white;
border-radius: 0.75rem;
max-width: 500px;
width: 95%;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.modal-header-blocked {
background: #dc2626;
color: white;
padding: 1rem 1.5rem;
border-radius: 0.75rem 0.75rem 0 0;
}
.modal-header-blocked h2 {
margin: 0;
font-size: 1.1rem;
}
.modal-body {
padding: 1.5rem;
}
.rule-blocked-list {
list-style: none;
padding: 0;
margin: 1rem 0;
}
.rule-blocked-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-blocked-icon {
flex-shrink: 0;
}
.suggested-dates {
margin: 1rem 0;
padding: 1rem;
background: #f0fdf4;
border-radius: 0.5rem;
border: 1px solid #bbf7d0;
}
.suggested-dates-label {
font-weight: 600;
margin: 0 0 0.5rem;
color: #166534;
}
.suggested-dates-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.suggested-date-btn {
display: block;
width: 100%;
padding: 0.5rem 1rem;
background: white;
border: 1px solid #86efac;
border-radius: 0.375rem;
cursor: pointer;
text-align: left;
font-size: 0.9rem;
transition:
background-color 0.15s,
border-color 0.15s;
}
.suggested-date-btn:hover {
background: #dcfce7;
border-color: #22c55e;
}
.rule-blocked-exception {
margin: 1rem 0 0;
text-align: center;
}
.exception-link-placeholder {
color: #6b7280;
font-size: 0.875rem;
font-style: italic;
}
.modal-actions {
display: flex;
justify-content: flex-end;
gap: 0.75rem;
padding: 1rem 1.5rem;
border-top: 1px solid #e5e7eb;
}
</style>

View File

@@ -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 RuleBlockedModal from '$lib/components/molecules/RuleBlockedModal/RuleBlockedModal.svelte';
import SearchInput from '$lib/components/molecules/SearchInput/SearchInput.svelte';
import { untrack } from 'svelte';
@@ -94,11 +95,19 @@
let duplicateValidationResults = $state<Array<{ classId: string; valid: boolean; error: string | null }>>([]);
let duplicateWarnings = $state<Array<{ classId: string; warning: string }>>([]);
// Rule warning modal
// Rule warning modal (soft mode)
let showRuleWarningModal = $state(false);
let ruleWarnings = $state<RuleWarning[]>([]);
let ruleConformMinDate = $state('');
// Rule blocked modal (hard mode)
let showRuleBlockedModal = $state(false);
let ruleBlockedWarnings = $state<RuleWarning[]>([]);
let ruleBlockedSuggestedDates = $state<string[]>([]);
// Inline date validation for hard mode
let dueDateError = $state<string | null>(null);
// Class filter
let filterClassId = $state(page.url.searchParams.get('classId') ?? '');
@@ -300,6 +309,7 @@
newDescription = '';
newDueDate = '';
ruleConformMinDate = '';
dueDateError = null;
}
function closeCreateModal() {
@@ -308,6 +318,8 @@
async function handleCreate(acknowledgeWarning = false) {
if (!newClassId || !newSubjectId || !newTitle.trim() || !newDueDate) return;
dueDateError = validateDueDateLocally(newDueDate);
if (dueDateError) return;
try {
isSubmitting = true;
@@ -326,6 +338,17 @@
}),
});
if (response.status === 422) {
const data = await response.json().catch(() => null);
if (data?.type === 'homework_rules_blocked' && Array.isArray(data.warnings)) {
ruleBlockedWarnings = data.warnings;
ruleBlockedSuggestedDates = Array.isArray(data.suggestedDates) ? data.suggestedDates : [];
showCreateModal = false;
showRuleBlockedModal = true;
return;
}
}
if (response.status === 409) {
const data = await response.json().catch(() => null);
if (data?.type === 'homework_rules_warning' && Array.isArray(data.warnings)) {
@@ -349,6 +372,9 @@
closeCreateModal();
showRuleWarningModal = false;
ruleWarnings = [];
showRuleBlockedModal = false;
ruleBlockedWarnings = [];
ruleBlockedSuggestedDates = [];
await loadHomeworks();
} catch (e) {
error = e instanceof Error ? e.message : 'Erreur lors de la création';
@@ -399,6 +425,44 @@
newDueDate = ruleConformMinDate;
}
function validateDueDateLocally(dateStr: string): string | null {
if (!dateStr) return null;
const date = new Date(dateStr + 'T00:00:00');
const day = date.getDay();
if (day === 0 || day === 6) {
return 'Les devoirs ne peuvent pas être fixés un weekend.';
}
if (ruleConformMinDate && dateStr < ruleConformMinDate) {
return 'Cette date ne respecte pas les règles de l\'établissement. Choisissez une date ultérieure.';
}
return null;
}
function handleDueDateChange(dateStr: string) {
newDueDate = dateStr;
dueDateError = validateDueDateLocally(dateStr);
}
function handleBlockedSelectDate(date: string) {
showRuleBlockedModal = false;
ruleBlockedWarnings = [];
ruleBlockedSuggestedDates = [];
ruleConformMinDate = date;
newDueDate = date;
showCreateModal = true;
}
function handleBlockedClose() {
const firstSuggested = ruleBlockedSuggestedDates[0];
const conformDate = firstSuggested ?? computeConformMinDate(ruleBlockedWarnings);
showRuleBlockedModal = false;
ruleBlockedWarnings = [];
ruleBlockedSuggestedDates = [];
ruleConformMinDate = conformDate;
newDueDate = conformDate;
showCreateModal = true;
}
// --- Edit ---
function openEditModal(hw: Homework) {
editHomework = hw;
@@ -779,8 +843,17 @@
<div class="form-group">
<label for="hw-due-date">Date d'échéance *</label>
<input type="date" id="hw-due-date" bind:value={newDueDate} required min={ruleConformMinDate || minDueDate} />
{#if ruleConformMinDate}
<input
type="date"
id="hw-due-date"
value={newDueDate}
oninput={(e) => handleDueDateChange((e.target as HTMLInputElement).value)}
required
min={ruleConformMinDate || minDueDate}
/>
{#if dueDateError}
<small class="form-hint form-hint-error">{dueDateError}</small>
{:else if ruleConformMinDate}
<small class="form-hint form-hint-rule">
Date minimale conforme aux règles : {new Date(ruleConformMinDate + 'T00:00:00').toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' })}
</small>
@@ -1078,6 +1151,16 @@
</div>
{/if}
<!-- Rule Blocked Modal (Hard Mode) -->
{#if showRuleBlockedModal && ruleBlockedWarnings.length > 0}
<RuleBlockedModal
warnings={ruleBlockedWarnings}
suggestedDates={ruleBlockedSuggestedDates}
onSelectDate={handleBlockedSelectDate}
onClose={handleBlockedClose}
/>
{/if}
<style>
.homework-page {
padding: 1.5rem;
@@ -1611,6 +1694,11 @@
font-weight: 500;
}
.form-hint-error {
color: #dc2626;
font-weight: 500;
}
/* Rule override badge */
.homework-badges {
display: flex;