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 { fetchTodos, createTodo, updateTodo, deleteTodo, postponeTodo } from '../api/todos'
import SwipeableRow from '../components/todos/SwipeableRow' import SwipeableRow from '../components/todos/SwipeableRow'
import TodoForm from '../components/todos/TodoForm' import TodoForm from '../components/todos/TodoForm'
import Modal from '../components/Modal'
type EditingTodo = Todo | null type EditingTodo = Todo | null
@@ -151,22 +152,14 @@ export default function TodosPage() {
{/* Formulaire de création */} {/* Formulaire de création */}
{showForm && ( {showForm && (
<div className="glass" style={{ padding: 16, borderRadius: 10, marginBottom: 16 }}> <Modal title="Nouvelle tâche" onClose={() => setShowForm(false)}>
<div className="hidden lg:block"> <TodoForm onSubmit={handleCreate} onCancel={() => setShowForm(false)} extended />
<TodoForm onSubmit={handleCreate} onCancel={() => setShowForm(false)} extended /> </Modal>
</div>
<div className="block lg:hidden">
<TodoForm onSubmit={handleCreate} onCancel={() => setShowForm(false)} />
</div>
</div>
)} )}
{/* Formulaire d'édition */} {/* Formulaire d'édition */}
{editingTodo && ( {editingTodo && (
<div className="glass" style={{ padding: 16, borderRadius: 10, marginBottom: 16, borderLeft: '3px solid var(--accent)' }}> <Modal title="Modifier la tâche" onClose={() => setEditingTodo(null)}>
<p style={{ color: 'var(--ink-3)', fontSize: 11, fontFamily: 'var(--font-ui)', marginBottom: 8, textTransform: 'uppercase', letterSpacing: 1 }}>
Modifier la tâche
</p>
<TodoForm <TodoForm
onSubmit={data => handleUpdate(editingTodo.id, data)} onSubmit={data => handleUpdate(editingTodo.id, data)}
onCancel={() => setEditingTodo(null)} onCancel={() => setEditingTodo(null)}
@@ -182,7 +175,7 @@ export default function TodosPage() {
tags: editingTodo.tags, tags: editingTodo.tags,
}} }}
/> />
</div> </Modal>
)} )}
{loading && ( {loading && (
@@ -377,58 +370,54 @@ export default function TodosPage() {
</div> </div>
{/* FAB mobile (au-dessus de la barre de navigation) */} {/* FAB mobile (au-dessus de la barre de navigation) */}
{!showForm && ( <button
<button className="lg:hidden"
className="lg:hidden" onClick={() => setShowForm(true)}
onClick={() => setShowForm(true)} aria-label="Nouvelle tâche"
aria-label="Nouvelle tâche" style={{
style={{ position: 'fixed',
position: 'fixed', bottom: 72,
bottom: 72, right: 20,
right: 20, width: 56,
width: 56, height: 56,
height: 56, borderRadius: '50%',
borderRadius: '50%', background: 'var(--accent)',
background: 'var(--accent)', color: '#1d2021',
color: '#1d2021', border: 'none',
border: 'none', fontSize: 28,
fontSize: 28, cursor: 'pointer',
cursor: 'pointer', boxShadow: '0 4px 12px rgba(0,0,0,0.5)',
boxShadow: '0 4px 12px rgba(0,0,0,0.5)', display: 'flex',
display: 'flex', alignItems: 'center',
alignItems: 'center', justifyContent: 'center',
justifyContent: 'center', lineHeight: 1,
lineHeight: 1, }}
}} >+</button>
>+</button>
)}
{/* Bouton création laptop */} {/* Bouton création laptop */}
{!showForm && ( <button
<button className="hidden lg:flex"
className="hidden lg:flex" onClick={() => setShowForm(true)}
onClick={() => setShowForm(true)} style={{
style={{ position: 'fixed',
position: 'fixed', bottom: 24,
bottom: 24, right: 24,
right: 24, padding: '10px 20px',
padding: '10px 20px', borderRadius: 8,
borderRadius: 8, background: 'var(--accent)',
background: 'var(--accent)', color: '#1d2021',
color: '#1d2021', border: 'none',
border: 'none', cursor: 'pointer',
cursor: 'pointer', fontFamily: 'var(--font-ui)',
fontFamily: 'var(--font-ui)', fontWeight: 600,
fontWeight: 600, fontSize: 14,
fontSize: 14, boxShadow: '0 4px 12px rgba(0,0,0,0.4)',
boxShadow: '0 4px 12px rgba(0,0,0,0.4)', alignItems: 'center',
alignItems: 'center', gap: 6,
gap: 6, }}
}} >
> + Nouvelle tâche
+ Nouvelle tâche </button>
</button>
)}
</div> </div>
) )
} }