gilles/home_hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(todos): formulaires création et édition migrés vers Modal

Browse Source
This commit is contained in:
gilles soulier
2026-05-24 15:47:48 +02:00
parent 490d0d774f
commit 43736709a9
1 changed files with 52 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/TodosPage.tsx
+52 -63
View File
@@ -4,6 +4,7 @@ import type { Todo, TodoCreate, TodoFilters } from '../api/todos'
import { fetchTodos, createTodo, updateTodo, deleteTodo, postponeTodo } from '../api/todos'
import SwipeableRow from '../components/todos/SwipeableRow'
import TodoForm from '../components/todos/TodoForm'
import Modal from '../components/Modal'
type EditingTodo = Todo | null
@@ -151,22 +152,14 @@ export default function TodosPage() {
{/* Formulaire de création */}
{showForm && (
<div className="glass" style={{ padding: 16, borderRadius: 10, marginBottom: 16 }}>
<div className="hidden lg:block">
<TodoForm onSubmit={handleCreate} onCancel={() => setShowForm(false)} extended />
</div>
<div className="block lg:hidden">
<TodoForm onSubmit={handleCreate} onCancel={() => setShowForm(false)} />
</div>
</div>
<Modal title="Nouvelle tâche" onClose={() => setShowForm(false)}>
<TodoForm onSubmit={handleCreate} onCancel={() => setShowForm(false)} extended />
</Modal>
)}
{/* Formulaire d'édition */}
{editingTodo && (
<div className="glass" style={{ padding: 16, borderRadius: 10, marginBottom: 16, borderLeft: '3px solid var(--accent)' }}>
<p style={{ color: 'var(--ink-3)', fontSize: 11, fontFamily: 'var(--font-ui)', marginBottom: 8, textTransform: 'uppercase', letterSpacing: 1 }}>
Modifier la tâche
</p>
<Modal title="Modifier la tâche" onClose={() => setEditingTodo(null)}>
<TodoForm
onSubmit={data => handleUpdate(editingTodo.id, data)}
onCancel={() => setEditingTodo(null)}
@@ -182,7 +175,7 @@ export default function TodosPage() {
tags: editingTodo.tags,
}}
/>
</div>
</Modal>
)}
{loading && (
@@ -377,58 +370,54 @@ export default function TodosPage() {
</div>
{/* FAB mobile (au-dessus de la barre de navigation) */}
{!showForm && (
<button
className="lg:hidden"
onClick={() => setShowForm(true)}
aria-label="Nouvelle tâche"
style={{
position: 'fixed',
bottom: 72,
right: 20,
width: 56,
height: 56,
borderRadius: '50%',
background: 'var(--accent)',
color: '#1d2021',
border: 'none',
fontSize: 28,
cursor: 'pointer',
boxShadow: '0 4px 12px rgba(0,0,0,0.5)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
lineHeight: 1,
}}
>+</button>
)}
<button
className="lg:hidden"
onClick={() => setShowForm(true)}
aria-label="Nouvelle tâche"
style={{
position: 'fixed',
bottom: 72,
right: 20,
width: 56,
height: 56,
borderRadius: '50%',
background: 'var(--accent)',
color: '#1d2021',
border: 'none',
fontSize: 28,
cursor: 'pointer',
boxShadow: '0 4px 12px rgba(0,0,0,0.5)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
lineHeight: 1,
}}
>+</button>
{/* Bouton création laptop */}
{!showForm && (
<button
className="hidden lg:flex"
onClick={() => setShowForm(true)}
style={{
position: 'fixed',
bottom: 24,
right: 24,
padding: '10px 20px',
borderRadius: 8,
background: 'var(--accent)',
color: '#1d2021',
border: 'none',
cursor: 'pointer',
fontFamily: 'var(--font-ui)',
fontWeight: 600,
fontSize: 14,
boxShadow: '0 4px 12px rgba(0,0,0,0.4)',
alignItems: 'center',
gap: 6,
}}
>
+ Nouvelle tâche
</button>
)}
<button
className="hidden lg:flex"
onClick={() => setShowForm(true)}
style={{
position: 'fixed',
bottom: 24,
right: 24,
padding: '10px 20px',
borderRadius: 8,
background: 'var(--accent)',
color: '#1d2021',
border: 'none',
cursor: 'pointer',
fontFamily: 'var(--font-ui)',
fontWeight: 600,
fontSize: 14,
boxShadow: '0 4px 12px rgba(0,0,0,0.4)',
alignItems: 'center',
gap: 6,
}}
>
+ Nouvelle tâche
</button>
</div>
)
}