feat(todos): composant TodoForm (rapide mobile / étendu laptop)

2026-05-24 12:10:31 +02:00
parent 9e6e0902ab
commit 580aab822a
1 changed files with 147 additions and 0 deletions
@@ -0,0 +1,147 @@
+import { useState } from 'react'
+import type { TodoCreate } from '../../api/todos'
+
+const DOMAINS = [
+  'informatique', 'diy', 'electronique', 'domotique',
+  'bricolage', 'jardin', 'cuisine', 'voyage', 'animaux',
+]
+
+interface TodoFormProps {
+  onSubmit: (data: TodoCreate) => Promise<void>
+  onCancel: () => void
+  extended?: boolean  // true = tous les champs (vue laptop)
+}
+
+const inputStyle: React.CSSProperties = {
+  width: '100%',
+  background: 'var(--bg-4)',
+  border: '1px solid var(--bg-5)',
+  borderRadius: 8,
+  padding: '10px 12px',
+  color: 'var(--ink-1)',
+  fontFamily: 'var(--font-ui)',
+  fontSize: 14,
+  boxSizing: 'border-box',
+}
+
+export default function TodoForm({ onSubmit, onCancel, extended = false }: TodoFormProps) {
+  const [title, setTitle] = useState('')
+  const [domain, setDomain] = useState('')
+  const [priority, setPriority] = useState('medium')
+  const [dueDate, setDueDate] = useState('')
+  const [body, setBody] = useState('')
+  const [url, setUrl] = useState('')
+  const [tags, setTags] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    if (!title.trim()) return
+    setLoading(true)
+    try {
+      await onSubmit({
+        title: title.trim(),
+        domain: domain || undefined,
+        priority,
+        due_date: dueDate ? new Date(dueDate).toISOString() : undefined,
+        body: body.trim() || undefined,
+        url: url.trim() || undefined,
+        tags: tags ? tags.split(',').map(t => t.trim()).filter(Boolean) : [],
+      })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <input
+        style={inputStyle}
+        placeholder="Titre de la tâche *"
+        value={title}
+        onChange={e => setTitle(e.target.value)}
+        autoFocus
+        required
+      />
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
+        <select style={inputStyle} value={domain} onChange={e => setDomain(e.target.value)}>
+          <option value="">Domaine</option>
+          {DOMAINS.map(d => <option key={d} value={d}>{d}</option>)}
+        </select>
+        <select style={inputStyle} value={priority} onChange={e => setPriority(e.target.value)}>
+          <option value="low">Priorité basse</option>
+          <option value="medium">Priorité moyenne</option>
+          <option value="high">Priorité haute</option>
+        </select>
+      </div>
+
+      <input
+        style={inputStyle}
+        type="date"
+        value={dueDate}
+        onChange={e => setDueDate(e.target.value)}
+        placeholder="Date objectif"
+      />
+
+      {extended && (
+        <>
+          <textarea
+            style={{ ...inputStyle, minHeight: 80, resize: 'vertical' }}
+            placeholder="Description"
+            value={body}
+            onChange={e => setBody(e.target.value)}
+          />
+          <input
+            style={inputStyle}
+            placeholder="URL (lien externe optionnel)"
+            value={url}
+            onChange={e => setUrl(e.target.value)}
+          />
+          <input
+            style={inputStyle}
+            placeholder="Tags (séparés par virgule)"
+            value={tags}
+            onChange={e => setTags(e.target.value)}
+          />
+        </>
+      )}
+
+      <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
+        <button
+          type="button"
+          onClick={onCancel}
+          style={{
+            padding: '10px 16px',
+            borderRadius: 8,
+            border: '1px solid var(--bg-5)',
+            background: 'transparent',
+            color: 'var(--ink-2)',
+            cursor: 'pointer',
+            fontFamily: 'var(--font-ui)',
+            minHeight: 48,
+          }}
+        >
+          Annuler
+        </button>
+        <button
+          type="submit"
+          disabled={loading}
+          style={{
+            padding: '10px 20px',
+            borderRadius: 8,
+            border: 'none',
+            background: 'var(--accent)',
+            color: '#1d2021',
+            cursor: 'pointer',
+            fontFamily: 'var(--font-ui)',
+            fontWeight: 600,
+            minHeight: 48,
+          }}
+        >
+          {loading ? '…' : 'Créer'}
+        </button>
+      </div>
+    </form>
+  )
+}