From 34f1a62435cf6ff284641f5af328f4be2e397b9a Mon Sep 17 00:00:00 2001 From: Julien Froidefond Date: Sat, 4 Oct 2025 10:47:27 +0200 Subject: [PATCH] feat: replace Input with DateTimeInput component in forms and modals - Updated CreateTaskForm, TaskBasicFields, and EditCheckboxModal to use DateTimeInput for date selection, enhancing consistency and user experience. - Improved UI by integrating lucide-react Calendar icon in DateTimeInput for better visual feedback. - Marked EditModal task color issue as complete in TODO.md. --- TODO.md | 2 +- src/components/daily/EditCheckboxModal.tsx | 59 +++++++++---------- src/components/forms/CreateTaskForm.tsx | 26 ++++---- src/components/forms/task/TaskBasicFields.tsx | 24 ++++---- src/components/ui/DateTimeInput.tsx | 30 +++++++--- 5 files changed, 78 insertions(+), 63 deletions(-) diff --git a/TODO.md b/TODO.md index 3922e6d..23da514 100644 --- a/TODO.md +++ b/TODO.md @@ -18,7 +18,7 @@ - [x] **Icônes agenda et filtres** - Améliorer les icônes de l'agenda et des filtres dans desktop controls (utiliser une lib) - [x] **Réunion/tâche design** - Revoir le design des bouton dans dailySectrion : les toggles avoir un compposant ui - [x] **Légende calendrier et padding** - Corriger l'espacement et la légende du calendrier dans daily -- [ ] **EditModal task couleur calendrier** - Problème de couleur en ajout de taches dans tous les icones calendriers; colmler au thème +- [x] **EditModal task couleur calendrier** - Problème de couleur en ajout de taches dans tous les icones calendriers; colmler au thème - [ ] **Weekly deux boutons actualiser** - Corriger la duplication des boutons d'actualisation - [ ] **Settings : tag icônes actions** - Icônes trop petites dans les actions des tags - [ ] **Settings intégration : icônes** - Problème avec les icônes "Arrêté" et "Actif" : doivent etre les memes diff --git a/src/components/daily/EditCheckboxModal.tsx b/src/components/daily/EditCheckboxModal.tsx index c6ea3ab..5511456 100644 --- a/src/components/daily/EditCheckboxModal.tsx +++ b/src/components/daily/EditCheckboxModal.tsx @@ -1,6 +1,7 @@ 'use client'; import { useState, useEffect } from 'react'; +import { CheckSquare2, Calendar } from 'lucide-react'; import { DailyCheckbox, DailyCheckboxType, Task } from '@/lib/types'; import { Button } from '@/components/ui/Button'; import { Input } from '@/components/ui/Input'; @@ -9,8 +10,9 @@ import { TagDisplay } from '@/components/ui/TagDisplay'; import { Card } from '@/components/ui/Card'; import { SearchInput } from '@/components/ui/SearchInput'; import { StatusBadge } from '@/components/ui/StatusBadge'; +import { ToggleButton } from '@/components/ui/ToggleButton'; +import { DateTimeInput } from '@/components/ui/DateTimeInput'; import { tasksClient } from '@/clients/tasks-client'; -import { formatDateForDateTimeInput, parseDateTimeInput } from '@/lib/date-utils'; interface EditCheckboxModalProps { checkbox: DailyCheckbox; @@ -135,43 +137,38 @@ export function EditCheckboxModal({ Type
- - + Réunion + + setType('task')} + variant="primary" + size="sm" + isActive={type === 'task'} + icon={} + > + Tâche +
{/* Date/Heure */} - setDate(parseDateTimeInput(e.target.value))} - disabled={saving} - /> +
+ + newDate && setDate(newDate)} + disabled={saving} + /> +
{/* Liaison tâche (pour tous les types) */}
diff --git a/src/components/forms/CreateTaskForm.tsx b/src/components/forms/CreateTaskForm.tsx index fda1c94..9baf645 100644 --- a/src/components/forms/CreateTaskForm.tsx +++ b/src/components/forms/CreateTaskForm.tsx @@ -5,10 +5,10 @@ import { Modal } from '@/components/ui/Modal'; import { Button } from '@/components/ui/Button'; import { Input } from '@/components/ui/Input'; import { TagInput } from '@/components/ui/TagInput'; +import { DateTimeInput } from '@/components/ui/DateTimeInput'; import { TaskPriority, TaskStatus } from '@/lib/types'; import { CreateTaskData } from '@/clients/tasks-client'; import { getAllStatuses, getAllPriorities } from '@/lib/status-config'; -import { formatDateForDateTimeInput, parseDateTimeInput } from '@/lib/date-utils'; interface CreateTaskFormProps { isOpen: boolean; @@ -149,16 +149,20 @@ export function CreateTaskForm({ isOpen, onClose, onSubmit, loading = false }: C
{/* Date d'échéance */} - setFormData((prev: CreateTaskData) => ({ - ...prev, - dueDate: e.target.value ? parseDateTimeInput(e.target.value) : undefined - }))} - disabled={loading} - /> +
+ + setFormData((prev: CreateTaskData) => ({ + ...prev, + dueDate: newDate + }))} + disabled={loading} + placeholder="Sélectionner une date d'échéance..." + /> +
{/* Tags */}
diff --git a/src/components/forms/task/TaskBasicFields.tsx b/src/components/forms/task/TaskBasicFields.tsx index ecab819..68799fe 100644 --- a/src/components/forms/task/TaskBasicFields.tsx +++ b/src/components/forms/task/TaskBasicFields.tsx @@ -1,9 +1,10 @@ 'use client'; import { Input } from '@/components/ui/Input'; +import { DateTimeInput } from '@/components/ui/DateTimeInput'; import { TaskPriority, TaskStatus } from '@/lib/types'; import { getAllStatuses, getAllPriorities } from '@/lib/status-config'; -import { ensureDate, formatDateForDateTimeInput } from '@/lib/date-utils'; +import { ensureDate } from '@/lib/date-utils'; interface TaskBasicFieldsProps { title: string; @@ -107,16 +108,17 @@ export function TaskBasicFields({
{/* Date d'échéance */} - { - const date = ensureDate(dueDate); - return date ? formatDateForDateTimeInput(date) : ''; - })()} - onChange={(e) => onDueDateChange(e.target.value ? new Date(e.target.value) : undefined)} - disabled={loading} - /> +
+ + onDueDateChange(newDate)} + disabled={loading} + placeholder="Sélectionner une date d'échéance..." + /> +
); } diff --git a/src/components/ui/DateTimeInput.tsx b/src/components/ui/DateTimeInput.tsx index 057964a..a9a1c55 100644 --- a/src/components/ui/DateTimeInput.tsx +++ b/src/components/ui/DateTimeInput.tsx @@ -1,5 +1,6 @@ 'use client'; +import { Calendar } from 'lucide-react'; import { formatDateForDateTimeInput, parseDateTimeInput } from '@/lib/date-utils'; interface DateTimeInputProps { @@ -25,14 +26,25 @@ export function DateTimeInput({ }; return ( - +
+ + +
); }