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.
2025-10-04 10:47:27 +02:00
parent 35bda37599
commit 34f1a62435
5 changed files with 78 additions and 63 deletions
--- 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) <!-- Clock pour échéance, Settings pour filtres, Search visuelle -->
 - [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
--- 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
          </label>
          <div className="flex gap-2">
-            <Button
-              type="button"
-              onClick={() => setType('task')}
-              variant="ghost"
-              size="sm"
-              className={`flex items-center gap-2 border-l-4 ${
-                type === 'task' 
-                  ? 'border-l-green-500 bg-green-500/30 text-white font-medium' 
-                  : 'border-l-green-300 hover:border-l-green-400 opacity-70 hover:opacity-90'
-              }`}
-            >
-              ✅ Tâche
-            </Button>
-            <Button
-              type="button"
+            <ToggleButton
              onClick={() => setType('meeting')}
-              variant="ghost"
+              variant="primary"
              size="sm"
-              className={`flex items-center gap-2 border-l-4 ${
-                type === 'meeting' 
-                  ? 'border-l-blue-500 bg-blue-500/30 text-white font-medium' 
-                  : 'border-l-blue-300 hover:border-l-blue-400 opacity-70 hover:opacity-90'
-              }`}
+              isActive={type === 'meeting'}
+              icon={<Calendar size={14} />}
            >
-              🗓️ Réunion
-            </Button>
+              <span className="text-sm">Réunion</span>
+            </ToggleButton>
+            <ToggleButton
+              onClick={() => setType('task')}
+              variant="primary"
+              size="sm"
+              isActive={type === 'task'}
+              icon={<CheckSquare2 size={14} />}
+            >
+              <span className="text-sm">Tâche</span>
+            </ToggleButton>
          </div>
        </div>

        {/* Date/Heure */}
-        <Input
-          label="Date/Heure"
-          type="datetime-local"
-          value={formatDateForDateTimeInput(date)}
-          onChange={(e) => setDate(parseDateTimeInput(e.target.value))}
+        <div>
+          <label className="block text-sm font-medium text-[var(--foreground)] mb-2">
+            Date/Heure
+          </label>
+          <DateTimeInput
+            value={date}
+            onChange={(newDate) => newDate && setDate(newDate)}
            disabled={saving}
          />
+        </div>

        {/* Liaison tâche (pour tous les types) */}
        <div>
--- 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
        </div>

        {/* Date d'échéance */}
-        <Input
-          label="Date d'échéance"
-          type="datetime-local"
-          value={formData.dueDate ? formatDateForDateTimeInput(formData.dueDate) : ''}
-          onChange={(e) => setFormData((prev: CreateTaskData) => ({ 
+        <div>
+          <label className="block text-sm font-medium text-[var(--foreground)] mb-2">
+            Date d&apos;échéance
+          </label>
+          <DateTimeInput
+            value={formData.dueDate}
+            onChange={(newDate) => setFormData((prev: CreateTaskData) => ({ 
              ...prev, 
-            dueDate: e.target.value ? parseDateTimeInput(e.target.value) : undefined 
+              dueDate: newDate
            }))}
            disabled={loading}
+            placeholder="Sélectionner une date d'échéance..."
          />
+        </div>

        {/* Tags */}
        <div className="space-y-3">
--- 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({
      </div>

      {/* Date d'échéance */}
-      <Input
-        label="Date d'échéance"
-        type="datetime-local"
-        value={(() => {
-          const date = ensureDate(dueDate);
-          return date ? formatDateForDateTimeInput(date) : '';
-        })()}
-        onChange={(e) => onDueDateChange(e.target.value ? new Date(e.target.value) : undefined)}
+      <div>
+        <label className="block text-sm font-medium text-[var(--foreground)] mb-2">
+          Date d&apos;échéance
+        </label>
+        <DateTimeInput
+          value={ensureDate(dueDate) ?? undefined}
+          onChange={(newDate) => onDueDateChange(newDate)}
          disabled={loading}
+          placeholder="Sélectionner une date d'échéance..."
        />
+      </div>
    </>
  );
 }
--- 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,6 +26,11 @@ export function DateTimeInput({
  };

  return (
+    <div className={`relative flex items-center ${className}`}>
+      <Calendar 
+        size={16} 
+        className="absolute left-3 text-[var(--muted-foreground)] pointer-events-none z-10" 
+      />
      <input
        type="datetime-local"
        value={value ? formatDateForDateTimeInput(value) : ''}
@@ -32,7 +38,13 @@ export function DateTimeInput({
        onFocus={onFocus}
        disabled={disabled}
        placeholder={placeholder}
-      className={`bg-transparent border-none outline-none text-[var(--muted-foreground)] font-mono text-xs flex-shrink min-w-0 ${className}`}
+        className="w-full pl-10 pr-3 py-2 border border-[var(--border)] rounded-md bg-[var(--input)] text-[var(--foreground)] placeholder-[var(--muted-foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--primary)] focus:border-[var(--primary)] disabled:opacity-50 disabled:cursor-not-allowed font-mono text-sm [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-datetime-edit-ampm-field]:hidden [&::-webkit-inner-spin-button]:hidden [&::-webkit-outer-spin-button]:hidden"
+        style={{
+          colorScheme: 'light',
+          WebkitAppearance: 'none',
+          MozAppearance: 'textfield'
+        }}
      />
+    </div>
  );
 }