From 4d0c4d9a2326803693e8bdc5339c7167ac94d5f4 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Wed, 27 May 2026 10:27:05 +0200
Subject: [PATCH] fix : DateTime embarque le champ MalioTimePicker au lieu du
 bloc molette brut (MUI-39)

---
 app/components/malio/date/DateTime.test.ts | 15 ++++++++-------
 app/components/malio/date/DateTime.vue     | 10 ++++++----
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/app/components/malio/date/DateTime.test.ts b/app/components/malio/date/DateTime.test.ts
index 750d831..ccb7409 100644
--- a/app/components/malio/date/DateTime.test.ts
+++ b/app/components/malio/date/DateTime.test.ts
@@ -2,7 +2,7 @@ import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
 import {mount} from '@vue/test-utils'
 import type {DefineComponent} from 'vue'
 import DateTime_ from './DateTime.vue'
-import TimeWheels from '../time/internal/TimeWheels.vue'
+import MalioTimePicker from '../time/TimePicker.vue'
 
 type DateTimeProps = {
   id?: string
@@ -50,11 +50,12 @@ describe('MalioDateTime', () => {
   })
 
   describe('popover', () => {
-    it('ouvre la grille et les molettes au clic', async () => {
+    it('ouvre la grille et le champ sélecteur d\'heure au clic', async () => {
       const wrapper = mountDateTime()
       await wrapper.get('[data-test="date-input"]').trigger('click')
       expect(wrapper.find('[data-test="month-grid"]').exists()).toBe(true)
-      expect(wrapper.find('[data-test="time-wheels"]').exists()).toBe(true)
+      expect(wrapper.findComponent(MalioTimePicker).exists()).toBe(true)
+      expect(wrapper.find('[data-test="time-field"]').exists()).toBe(true)
     })
   })
 
@@ -70,7 +71,7 @@ describe('MalioDateTime', () => {
     it('applique l\'heure réglée avant le clic du jour', async () => {
       const wrapper = mountDateTime()
       await wrapper.get('[data-test="date-input"]').trigger('click')
-      wrapper.findComponent(TimeWheels).vm.$emit('update:modelValue', '09:15')
+      wrapper.findComponent(MalioTimePicker).vm.$emit('update:modelValue', '09:15')
       await wrapper.vm.$nextTick()
       expect(wrapper.emitted('update:modelValue')).toBeUndefined()
       await wrapper.get('[data-test="day"][data-iso="2026-05-19"]').trigger('click')
@@ -80,15 +81,15 @@ describe('MalioDateTime', () => {
     it('met à jour l\'heure quand une date est déjà choisie', async () => {
       const wrapper = mountDateTime({modelValue: '2026-05-20T14:30:00'})
       await wrapper.get('[data-test="date-input"]').trigger('click')
-      wrapper.findComponent(TimeWheels).vm.$emit('update:modelValue', '08:45')
+      wrapper.findComponent(MalioTimePicker).vm.$emit('update:modelValue', '08:45')
       await wrapper.vm.$nextTick()
       expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-20T08:45:00'])
     })
 
-    it('initialise les molettes depuis la valeur', async () => {
+    it('initialise le champ heure depuis la valeur', async () => {
       const wrapper = mountDateTime({modelValue: '2026-05-20T14:30:00'})
       await wrapper.get('[data-test="date-input"]').trigger('click')
-      expect(wrapper.findComponent(TimeWheels).props('modelValue')).toBe('14:30')
+      expect(wrapper.findComponent(MalioTimePicker).props('modelValue')).toBe('14:30')
     })
   })
 
diff --git a/app/components/malio/date/DateTime.vue b/app/components/malio/date/DateTime.vue
index 28459bd..345fc02 100644
--- a/app/components/malio/date/DateTime.vue
+++ b/app/components/malio/date/DateTime.vue
@@ -29,8 +29,9 @@
         @select="onSelectDay"
       />
       <div class="mt-[26px]">
-        <TimeWheels
-          :model-value="timeValue || '00:00'"
+        <MalioTimePicker
+          :model-value="timeValue || null"
+          :clearable="false"
           @update:model-value="onTimeChange"
         />
       </div>
@@ -42,7 +43,7 @@
 import {computed, ref, watch} from 'vue'
 import CalendarField from './internal/CalendarField.vue'
 import MonthGrid from './internal/MonthGrid.vue'
-import TimeWheels from '../time/internal/TimeWheels.vue'
+import MalioTimePicker from '../time/TimePicker.vue'
 import {composeDateTime, formatIsoDateTimeToDisplay, isValidIsoDateTime, splitDateTime} from './composables/datetimeFormat'
 
 defineOptions({name: 'MalioDateTime', inheritAttrs: false})
@@ -103,7 +104,8 @@ function onSelectDay(iso: string) {
   emit('update:modelValue', composeDateTime(iso, time))
 }
 
-function onTimeChange(value: string) {
+function onTimeChange(value: string | null) {
+  if (!value) return
   if (datePart.value) {
     emit('update:modelValue', composeDateTime(datePart.value, value))
   }