feat: Permettre aux administrateurs de configurer les règles de devoirs
Les établissements ont besoin de protéger les élèves et familles des devoirs de dernière minute. Cette configuration au niveau tenant permet de définir des règles de timing (délai minimum, pas de devoir pour lundi après une heure limite) et un mode d'application (avertissement, blocage ou désactivé). Le service de validation est prêt pour être branché dans le flux de création de devoirs (Stories 5.4/5.5). L'historique des changements assure la traçabilité des modifications de configuration.
This commit is contained in:
190
frontend/e2e/homework-rules.spec.ts
Normal file
190
frontend/e2e/homework-rules.spec.ts
Normal file
@@ -0,0 +1,190 @@
|
||||
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 ADMIN_EMAIL = 'e2e-homework-rules-admin@example.com';
|
||||
const ADMIN_PASSWORD = 'HomeworkRulesAdmin123';
|
||||
const TENANT_ID = 'a1b2c3d4-e5f6-7890-abcd-ef1234567890';
|
||||
|
||||
test.describe('Homework Rules Configuration', () => {
|
||||
// Serial: les tests d'historique dépendent des entrées créées par les tests précédents
|
||||
test.describe.configure({ mode: 'serial' });
|
||||
|
||||
test.beforeAll(async () => {
|
||||
const projectRoot = join(__dirname, '../..');
|
||||
const composeFile = join(projectRoot, 'compose.yaml');
|
||||
|
||||
// Create admin user
|
||||
execSync(
|
||||
`docker compose -f "${composeFile}" exec -T php php bin/console app:dev:create-test-user --tenant=ecole-alpha --email=${ADMIN_EMAIL} --password=${ADMIN_PASSWORD} --role=ROLE_ADMIN 2>&1`,
|
||||
{ encoding: 'utf-8' }
|
||||
);
|
||||
|
||||
// Clean up homework rules from previous test runs
|
||||
execSync(
|
||||
`docker compose -f "${composeFile}" exec -T php php bin/console dbal:run-sql "DELETE FROM homework_rules_history WHERE tenant_id = '${TENANT_ID}'" 2>&1`,
|
||||
{ encoding: 'utf-8' }
|
||||
);
|
||||
execSync(
|
||||
`docker compose -f "${composeFile}" exec -T php php bin/console dbal:run-sql "DELETE FROM homework_rules WHERE tenant_id = '${TENANT_ID}'" 2>&1`,
|
||||
{ encoding: 'utf-8' }
|
||||
);
|
||||
|
||||
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
|
||||
}
|
||||
});
|
||||
|
||||
async function loginAsAdmin(page: import('@playwright/test').Page) {
|
||||
await page.goto(`${ALPHA_URL}/login`);
|
||||
await page.locator('#email').fill(ADMIN_EMAIL);
|
||||
await page.locator('#password').fill(ADMIN_PASSWORD);
|
||||
await Promise.all([
|
||||
page.waitForURL(/\/dashboard/, { timeout: 30000 }),
|
||||
page.getByRole('button', { name: /se connecter/i }).click()
|
||||
]);
|
||||
}
|
||||
|
||||
async function waitForPageLoaded(page: import('@playwright/test').Page) {
|
||||
await expect(
|
||||
page.getByRole('heading', { name: /règles de devoirs/i })
|
||||
).toBeVisible({ timeout: 15000 });
|
||||
|
||||
await expect(
|
||||
page.locator('.card').first()
|
||||
).toBeVisible({ timeout: 15000 });
|
||||
}
|
||||
|
||||
// AC1: Page configuration pédagogique → section "Règles de devoirs" accessible
|
||||
test('page affiche la configuration des règles de devoirs', async ({ page }) => {
|
||||
await loginAsAdmin(page);
|
||||
await page.goto(`${ALPHA_URL}/admin/homework-rules`);
|
||||
await waitForPageLoaded(page);
|
||||
|
||||
await expect(
|
||||
page.getByRole('heading', { name: /règles de devoirs/i })
|
||||
).toBeVisible();
|
||||
|
||||
// Mode selector visible
|
||||
await expect(page.getByRole('radio', { name: /avertissement/i })).toBeVisible();
|
||||
await expect(page.getByRole('radio', { name: /blocage/i })).toBeVisible();
|
||||
await expect(page.getByRole('radio', { name: /désactivé/i })).toBeVisible();
|
||||
});
|
||||
|
||||
// AC5: Mode par défaut = "Soft"
|
||||
test('mode par défaut est Avertissement (soft)', async ({ page }) => {
|
||||
await loginAsAdmin(page);
|
||||
await page.goto(`${ALPHA_URL}/admin/homework-rules`);
|
||||
await waitForPageLoaded(page);
|
||||
|
||||
const softRadio = page.getByRole('radio', { name: /avertissement/i });
|
||||
await expect(softRadio).toHaveAttribute('aria-checked', 'true');
|
||||
});
|
||||
|
||||
// AC2: Règle définissable : délai minimum
|
||||
test('configurer la règle de délai minimum', async ({ page }) => {
|
||||
await loginAsAdmin(page);
|
||||
await page.goto(`${ALPHA_URL}/admin/homework-rules`);
|
||||
await waitForPageLoaded(page);
|
||||
|
||||
// Enable minimum delay rule
|
||||
const delayCheckbox = page.getByRole('checkbox', { name: /délai minimum/i });
|
||||
await delayCheckbox.check();
|
||||
|
||||
// Set 3 days
|
||||
const daysInput = page.locator('input[type="number"]');
|
||||
await daysInput.fill('3');
|
||||
|
||||
// Save
|
||||
await page.getByRole('button', { name: /enregistrer/i }).click();
|
||||
|
||||
// Success message
|
||||
await expect(page.getByText(/mises à jour avec succès/i)).toBeVisible({ timeout: 10000 });
|
||||
});
|
||||
|
||||
// AC2: Règle définissable : jours concernés (pas de devoir pour lundi)
|
||||
test('configurer la règle pas de devoir pour lundi', async ({ page }) => {
|
||||
await loginAsAdmin(page);
|
||||
await page.goto(`${ALPHA_URL}/admin/homework-rules`);
|
||||
await waitForPageLoaded(page);
|
||||
|
||||
// Enable no-monday rule
|
||||
const mondayCheckbox = page.getByRole('checkbox', { name: /pas de devoir pour lundi/i });
|
||||
await mondayCheckbox.check();
|
||||
|
||||
// Save
|
||||
await page.getByRole('button', { name: /enregistrer/i }).click();
|
||||
|
||||
await expect(page.getByText(/mises à jour avec succès/i)).toBeVisible({ timeout: 10000 });
|
||||
});
|
||||
|
||||
// AC5: Choix mode Hard (blocage)
|
||||
test('changer le mode en Blocage', async ({ page }) => {
|
||||
await loginAsAdmin(page);
|
||||
await page.goto(`${ALPHA_URL}/admin/homework-rules`);
|
||||
await waitForPageLoaded(page);
|
||||
|
||||
// Select hard mode
|
||||
await page.getByRole('radio', { name: /blocage/i }).click();
|
||||
|
||||
// Save
|
||||
await page.getByRole('button', { name: /enregistrer/i }).click();
|
||||
|
||||
await expect(page.getByText(/mises à jour avec succès/i)).toBeVisible({ timeout: 10000 });
|
||||
});
|
||||
|
||||
// AC7: Règles désactivables complètement
|
||||
test('désactiver les règles complètement', async ({ page }) => {
|
||||
await loginAsAdmin(page);
|
||||
await page.goto(`${ALPHA_URL}/admin/homework-rules`);
|
||||
await waitForPageLoaded(page);
|
||||
|
||||
// Select disabled mode
|
||||
await page.getByRole('radio', { name: /désactivé/i }).click();
|
||||
|
||||
// Rules section should disappear
|
||||
await expect(page.getByText(/les enseignants peuvent créer des devoirs librement/i)).toBeVisible();
|
||||
|
||||
// Save
|
||||
await page.getByRole('button', { name: /enregistrer/i }).click();
|
||||
|
||||
await expect(page.getByText(/mises à jour avec succès/i)).toBeVisible({ timeout: 10000 });
|
||||
});
|
||||
|
||||
// AC6: Historique des changements conservé
|
||||
test('voir l\'historique des changements avec contenu', async ({ page }) => {
|
||||
await loginAsAdmin(page);
|
||||
await page.goto(`${ALPHA_URL}/admin/homework-rules`);
|
||||
await waitForPageLoaded(page);
|
||||
|
||||
// Click history button
|
||||
await page.getByRole('button', { name: /voir l'historique/i }).click();
|
||||
|
||||
// Modal should appear
|
||||
const dialog = page.getByRole('dialog', { name: /historique des changements/i });
|
||||
await expect(dialog).toBeVisible({ timeout: 10000 });
|
||||
|
||||
// Verify history is not empty (previous tests created entries)
|
||||
await expect(dialog.getByText(/aucun changement/i)).not.toBeVisible();
|
||||
|
||||
// Verify at least one history entry with mode and date
|
||||
const firstEntry = dialog.locator('.history-entry').first();
|
||||
await expect(firstEntry).toBeVisible();
|
||||
await expect(firstEntry.locator('.history-mode')).toBeVisible();
|
||||
await expect(firstEntry.locator('.history-date')).toBeVisible();
|
||||
});
|
||||
});
|
||||
@@ -91,6 +91,11 @@
|
||||
<span class="action-label">Identité visuelle</span>
|
||||
<span class="action-hint">Logo et couleurs</span>
|
||||
</a>
|
||||
<a class="action-card" href="/admin/homework-rules">
|
||||
<span class="action-icon">📏</span>
|
||||
<span class="action-label">Règles de devoirs</span>
|
||||
<span class="action-hint">Timing et contraintes</span>
|
||||
</a>
|
||||
<a class="action-card" href="/admin/import/students">
|
||||
<span class="action-icon">📤</span>
|
||||
<span class="action-label">Importer des élèves</span>
|
||||
|
||||
@@ -67,7 +67,8 @@
|
||||
links: [
|
||||
{ href: '/admin/image-rights', label: "Droit à l'image" },
|
||||
{ href: '/admin/pedagogy', label: 'Pédagogie' },
|
||||
{ href: '/admin/branding', label: 'Identité visuelle' }
|
||||
{ href: '/admin/branding', label: 'Identité visuelle' },
|
||||
{ href: '/admin/homework-rules', label: 'Règles de devoirs' }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
868
frontend/src/routes/admin/homework-rules/+page.svelte
Normal file
868
frontend/src/routes/admin/homework-rules/+page.svelte
Normal file
@@ -0,0 +1,868 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { authenticatedFetch } from '$lib/auth/auth.svelte';
|
||||
import { getApiBaseUrl } from '$lib/api/config';
|
||||
|
||||
type RuleDefinition = {
|
||||
type: string;
|
||||
params: Record<string, unknown>;
|
||||
};
|
||||
|
||||
type HomeworkRulesConfig = {
|
||||
id: string;
|
||||
rules: RuleDefinition[];
|
||||
enforcementMode: string;
|
||||
enabled: boolean;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
};
|
||||
|
||||
type HistoryEntry = {
|
||||
previousRules: string | null;
|
||||
newRules: string;
|
||||
enforcementMode: string;
|
||||
enabled: boolean;
|
||||
changedBy: string;
|
||||
changedAt: string;
|
||||
};
|
||||
|
||||
// State
|
||||
let config = $state<HomeworkRulesConfig | null>(null);
|
||||
let isLoading = $state(true);
|
||||
let error = $state<string | null>(null);
|
||||
let successMessage = $state<string | null>(null);
|
||||
let isSubmitting = $state(false);
|
||||
|
||||
// Form state
|
||||
let enforcementMode = $state<string>('soft');
|
||||
let enabled = $state(true);
|
||||
let minimumDelayDays = $state<number>(3);
|
||||
let minimumDelayEnabled = $state(false);
|
||||
let noMondayAfterEnabled = $state(false);
|
||||
let noMondayAfterDay = $state<string>('friday');
|
||||
let noMondayAfterTime = $state<string>('12:00');
|
||||
|
||||
// History
|
||||
let history = $state<HistoryEntry[]>([]);
|
||||
let showHistory = $state(false);
|
||||
|
||||
// Derived
|
||||
let hasChanges = $derived.by(() => {
|
||||
if (!config) return false;
|
||||
|
||||
const currentRules = buildRules();
|
||||
const configRulesJson = JSON.stringify(config.rules);
|
||||
const newRulesJson = JSON.stringify(currentRules);
|
||||
|
||||
return (
|
||||
configRulesJson !== newRulesJson ||
|
||||
enforcementMode !== config.enforcementMode ||
|
||||
enabled !== config.enabled
|
||||
);
|
||||
});
|
||||
|
||||
let modeLabel = $derived(
|
||||
enforcementMode === 'soft'
|
||||
? 'Avertissement'
|
||||
: enforcementMode === 'hard'
|
||||
? 'Blocage'
|
||||
: 'Désactivé'
|
||||
);
|
||||
|
||||
onMount(() => {
|
||||
loadConfig();
|
||||
});
|
||||
|
||||
function buildRules(): RuleDefinition[] {
|
||||
const rules: RuleDefinition[] = [];
|
||||
|
||||
if (minimumDelayEnabled) {
|
||||
rules.push({
|
||||
type: 'minimum_delay',
|
||||
params: { days: minimumDelayDays }
|
||||
});
|
||||
}
|
||||
|
||||
if (noMondayAfterEnabled) {
|
||||
rules.push({
|
||||
type: 'no_monday_after',
|
||||
params: { day: noMondayAfterDay, time: noMondayAfterTime }
|
||||
});
|
||||
}
|
||||
|
||||
return rules;
|
||||
}
|
||||
|
||||
function syncFormFromConfig(data: HomeworkRulesConfig) {
|
||||
enforcementMode = data.enforcementMode;
|
||||
enabled = data.enabled;
|
||||
|
||||
minimumDelayEnabled = false;
|
||||
noMondayAfterEnabled = false;
|
||||
|
||||
for (const rule of data.rules) {
|
||||
if (rule.type === 'minimum_delay') {
|
||||
minimumDelayEnabled = true;
|
||||
minimumDelayDays = (rule.params['days'] as number) ?? 3;
|
||||
}
|
||||
if (rule.type === 'no_monday_after') {
|
||||
noMondayAfterEnabled = true;
|
||||
noMondayAfterDay = (rule.params['day'] as string) ?? 'friday';
|
||||
noMondayAfterTime = (rule.params['time'] as string) ?? '12:00';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function loadConfig() {
|
||||
try {
|
||||
isLoading = true;
|
||||
error = null;
|
||||
const apiUrl = getApiBaseUrl();
|
||||
const response = await authenticatedFetch(`${apiUrl}/settings/homework-rules`);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Erreur lors du chargement de la configuration.');
|
||||
}
|
||||
|
||||
const data: HomeworkRulesConfig = await response.json();
|
||||
config = data;
|
||||
syncFormFromConfig(data);
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : 'Erreur inconnue';
|
||||
config = null;
|
||||
} finally {
|
||||
isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
if (!hasChanges) return;
|
||||
|
||||
try {
|
||||
isSubmitting = true;
|
||||
error = null;
|
||||
successMessage = null;
|
||||
|
||||
const apiUrl = getApiBaseUrl();
|
||||
const response = await authenticatedFetch(`${apiUrl}/settings/homework-rules`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
rules: buildRules(),
|
||||
enforcementMode,
|
||||
enabled
|
||||
})
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
throw new Error(
|
||||
errorData['hydra:description'] || errorData.message || 'Erreur lors de la sauvegarde.'
|
||||
);
|
||||
}
|
||||
|
||||
const data: HomeworkRulesConfig = await response.json();
|
||||
config = data;
|
||||
syncFormFromConfig(data);
|
||||
successMessage = 'Règles de devoirs mises à jour avec succès.';
|
||||
window.setTimeout(() => (successMessage = null), 4000);
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : 'Erreur inconnue';
|
||||
} finally {
|
||||
isSubmitting = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
if (config) {
|
||||
syncFormFromConfig(config);
|
||||
}
|
||||
error = null;
|
||||
successMessage = null;
|
||||
}
|
||||
|
||||
function handleModeChange(newMode: string) {
|
||||
enforcementMode = newMode;
|
||||
if (newMode === 'disabled') {
|
||||
enabled = false;
|
||||
} else {
|
||||
enabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadHistory() {
|
||||
try {
|
||||
const apiUrl = getApiBaseUrl();
|
||||
const response = await authenticatedFetch(`${apiUrl}/settings/homework-rules/history`);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Erreur lors du chargement de l\'historique.');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
history = (data['hydra:member'] ?? data['member'] ?? data) as HistoryEntry[];
|
||||
showHistory = true;
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : 'Erreur inconnue';
|
||||
}
|
||||
}
|
||||
|
||||
function ruleTypeLabel(type: string): string {
|
||||
return type === 'minimum_delay'
|
||||
? 'Délai minimum'
|
||||
: type === 'no_monday_after'
|
||||
? 'Pas de devoir pour lundi'
|
||||
: type;
|
||||
}
|
||||
|
||||
function formatDate(dateStr: string): string {
|
||||
const d = new Date(dateStr);
|
||||
return d.toLocaleDateString('fr-FR', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Règles de devoirs - Administration</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="page-header">
|
||||
<h1>Règles de devoirs</h1>
|
||||
<p class="page-description">
|
||||
Configurez les règles de timing pour protéger les élèves et familles des devoirs de dernière
|
||||
minute.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{#if error}
|
||||
<div class="alert alert-error" role="alert">
|
||||
<span>{error}</span>
|
||||
<button class="alert-close" onclick={() => (error = null)}>×</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if successMessage}
|
||||
<div class="alert alert-success" role="status">
|
||||
<span>{successMessage}</span>
|
||||
<button class="alert-close" onclick={() => (successMessage = null)}>×</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if isLoading}
|
||||
<div class="loading-state">
|
||||
<div class="spinner"></div>
|
||||
<p>Chargement de la configuration...</p>
|
||||
</div>
|
||||
{:else if config}
|
||||
<!-- Mode d'application -->
|
||||
<section class="card">
|
||||
<h2>Mode d'application</h2>
|
||||
<p class="section-description">
|
||||
Choisissez comment les règles sont appliquées lorsqu'un enseignant crée un devoir.
|
||||
</p>
|
||||
|
||||
<div class="mode-selector" role="radiogroup" aria-label="Mode d'application">
|
||||
<button
|
||||
class="mode-option"
|
||||
class:selected={enforcementMode === 'soft'}
|
||||
role="radio"
|
||||
aria-checked={enforcementMode === 'soft'}
|
||||
onclick={() => handleModeChange('soft')}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
<span class="mode-icon">⚠</span>
|
||||
<span class="mode-label">Avertissement</span>
|
||||
<span class="mode-description"
|
||||
>L'enseignant voit un avertissement mais peut créer le devoir.</span
|
||||
>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="mode-option"
|
||||
class:selected={enforcementMode === 'hard'}
|
||||
role="radio"
|
||||
aria-checked={enforcementMode === 'hard'}
|
||||
onclick={() => handleModeChange('hard')}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
<span class="mode-icon">🚫</span>
|
||||
<span class="mode-label">Blocage</span>
|
||||
<span class="mode-description"
|
||||
>L'enseignant ne peut pas créer le devoir si la règle est enfreinte.</span
|
||||
>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="mode-option"
|
||||
class:selected={enforcementMode === 'disabled'}
|
||||
role="radio"
|
||||
aria-checked={enforcementMode === 'disabled'}
|
||||
onclick={() => handleModeChange('disabled')}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
<span class="mode-icon">❌</span>
|
||||
<span class="mode-label">Désactivé</span>
|
||||
<span class="mode-description"
|
||||
>Aucune vérification. Les enseignants créent les devoirs librement.</span
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Règles -->
|
||||
{#if enforcementMode !== 'disabled'}
|
||||
<section class="card">
|
||||
<h2>Règles actives</h2>
|
||||
<p class="section-description">Définissez les règles de timing des devoirs.</p>
|
||||
|
||||
<!-- Délai minimum -->
|
||||
<div class="rule-block">
|
||||
<label class="rule-toggle">
|
||||
<input
|
||||
type="checkbox"
|
||||
bind:checked={minimumDelayEnabled}
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
<span class="rule-name">Délai minimum avant échéance</span>
|
||||
</label>
|
||||
|
||||
{#if minimumDelayEnabled}
|
||||
<div class="rule-params">
|
||||
<label class="param-label">
|
||||
Nombre de jours minimum :
|
||||
<input
|
||||
type="number"
|
||||
bind:value={minimumDelayDays}
|
||||
min="1"
|
||||
max="30"
|
||||
disabled={isSubmitting}
|
||||
class="param-input"
|
||||
/>
|
||||
</label>
|
||||
<p class="rule-example">
|
||||
Exemple : avec {minimumDelayDays} jours, un devoir pour vendredi ne peut pas être
|
||||
créé après {minimumDelayDays === 3 ? 'mardi' : `J-${minimumDelayDays}`}.
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Pas de devoir pour lundi -->
|
||||
<div class="rule-block">
|
||||
<label class="rule-toggle">
|
||||
<input
|
||||
type="checkbox"
|
||||
bind:checked={noMondayAfterEnabled}
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
<span class="rule-name">Pas de devoir pour lundi donné trop tard</span>
|
||||
</label>
|
||||
|
||||
{#if noMondayAfterEnabled}
|
||||
<div class="rule-params">
|
||||
<label class="param-label">
|
||||
Jour limite :
|
||||
<select bind:value={noMondayAfterDay} disabled={isSubmitting} class="param-select">
|
||||
<option value="thursday">Jeudi</option>
|
||||
<option value="friday">Vendredi</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="param-label">
|
||||
Heure limite :
|
||||
<input
|
||||
type="time"
|
||||
bind:value={noMondayAfterTime}
|
||||
disabled={isSubmitting}
|
||||
class="param-input"
|
||||
/>
|
||||
</label>
|
||||
<p class="rule-example">
|
||||
Exemple : un devoir pour lundi ne peut pas être créé après {noMondayAfterDay === 'friday' ? 'vendredi' : 'jeudi'}
|
||||
{noMondayAfterTime}.
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
<!-- Preview impact -->
|
||||
<section class="card">
|
||||
<h2>Résumé</h2>
|
||||
<div class="preview">
|
||||
<p>
|
||||
<strong>Mode :</strong>
|
||||
{modeLabel}
|
||||
</p>
|
||||
{#if enforcementMode !== 'disabled'}
|
||||
<p>
|
||||
<strong>Règles :</strong>
|
||||
{#if !minimumDelayEnabled && !noMondayAfterEnabled}
|
||||
Aucune règle configurée
|
||||
{:else}
|
||||
{#if minimumDelayEnabled}
|
||||
Délai minimum de {minimumDelayDays} jours.
|
||||
{/if}
|
||||
{#if noMondayAfterEnabled}
|
||||
Pas de devoir pour lundi après {noMondayAfterDay === 'friday' ? 'vendredi' : 'jeudi'}
|
||||
{noMondayAfterTime}.
|
||||
{/if}
|
||||
{/if}
|
||||
</p>
|
||||
{:else}
|
||||
<p class="preview-disabled">Les enseignants peuvent créer des devoirs librement.</p>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="form-actions">
|
||||
<button class="btn-secondary" onclick={loadHistory} disabled={isSubmitting}>
|
||||
Voir l'historique
|
||||
</button>
|
||||
<div class="action-group">
|
||||
<button class="btn-secondary" onclick={handleCancel} disabled={isSubmitting || !hasChanges}>
|
||||
Annuler
|
||||
</button>
|
||||
<button class="btn-primary" onclick={handleSave} disabled={isSubmitting || !hasChanges}>
|
||||
{#if isSubmitting}
|
||||
Enregistrement...
|
||||
{:else}
|
||||
Enregistrer
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- History modal -->
|
||||
{#if showHistory}
|
||||
<div
|
||||
class="modal-overlay"
|
||||
onclick={() => (showHistory = false)}
|
||||
onkeydown={(e) => e.key === 'Escape' && (showHistory = false)}
|
||||
role="presentation"
|
||||
>
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions a11y_no_noninteractive_element_interactions -->
|
||||
<div
|
||||
class="modal-content"
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Historique des changements"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div class="modal-header">
|
||||
<h2>Historique des changements</h2>
|
||||
<button class="modal-close" onclick={() => (showHistory = false)}>×</button>
|
||||
</div>
|
||||
|
||||
{#if history.length === 0}
|
||||
<p class="empty-history">Aucun changement enregistré.</p>
|
||||
{:else}
|
||||
<div class="history-list">
|
||||
{#each history as entry}
|
||||
<div class="history-entry">
|
||||
<div class="history-date">{formatDate(entry.changedAt)}</div>
|
||||
<div class="history-details">
|
||||
<span class="history-mode">{entry.enforcementMode}</span>
|
||||
{#if !entry.enabled}
|
||||
<span class="history-badge disabled">Désactivé</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.page-header {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.page-description {
|
||||
color: #6b7280;
|
||||
font-size: 0.875rem;
|
||||
margin: 0.25rem 0 0;
|
||||
}
|
||||
|
||||
/* Alerts */
|
||||
.alert {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
padding: 0.875rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background: #f0fdf4;
|
||||
border: 1px solid #bbf7d0;
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.alert-close {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 1.125rem;
|
||||
opacity: 0.6;
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
/* Loading */
|
||||
.loading-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: 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: #8b5cf6;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.card {
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin: 0 0 0.25rem;
|
||||
}
|
||||
|
||||
.section-description {
|
||||
color: #6b7280;
|
||||
font-size: 0.875rem;
|
||||
margin: 0 0 1.25rem;
|
||||
}
|
||||
|
||||
/* Mode selector */
|
||||
.mode-selector {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.mode-option {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 1.25rem;
|
||||
border: 2px solid #e5e7eb;
|
||||
border-radius: 0.75rem;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mode-option:hover:not(:disabled) {
|
||||
border-color: #a5b4fc;
|
||||
background: #f5f3ff;
|
||||
}
|
||||
|
||||
.mode-option.selected {
|
||||
border-color: #6366f1;
|
||||
background: #eef2ff;
|
||||
}
|
||||
|
||||
.mode-option:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.mode-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.mode-label {
|
||||
font-weight: 600;
|
||||
font-size: 0.9375rem;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.mode-description {
|
||||
font-size: 0.8125rem;
|
||||
color: #6b7280;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Rules */
|
||||
.rule-block {
|
||||
padding: 1rem 0;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.rule-block:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.rule-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.rule-toggle input[type='checkbox'] {
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
accent-color: #6366f1;
|
||||
}
|
||||
|
||||
.rule-name {
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.rule-params {
|
||||
margin-top: 0.75rem;
|
||||
margin-left: 1.875rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.param-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.param-input {
|
||||
padding: 0.375rem 0.5rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.param-select {
|
||||
padding: 0.375rem 0.5rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.rule-example {
|
||||
font-size: 0.8125rem;
|
||||
color: #9ca3af;
|
||||
font-style: italic;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Preview */
|
||||
.preview {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.875rem;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.preview p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.preview-disabled {
|
||||
color: #9ca3af;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Actions */
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.action-group {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
padding: 0.5rem 1.25rem;
|
||||
background: #6366f1;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background: #4f46e5;
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
padding: 0.5rem 1.25rem;
|
||||
background: white;
|
||||
color: #4b5563;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
background: #f9fafb;
|
||||
border-color: #9ca3af;
|
||||
}
|
||||
|
||||
.btn-secondary:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 300;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: white;
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
width: 100%;
|
||||
max-width: 560px;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
color: #6b7280;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.empty-history {
|
||||
color: #9ca3af;
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.history-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.history-entry {
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #f3f4f6;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.history-date {
|
||||
font-size: 0.8125rem;
|
||||
color: #6b7280;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.history-details {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.history-mode {
|
||||
font-weight: 500;
|
||||
color: #1f2937;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.history-badge.disabled {
|
||||
font-size: 0.75rem;
|
||||
background: #fef2f2;
|
||||
color: #dc2626;
|
||||
padding: 0.125rem 0.5rem;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user