feat : version mobile écran Heures (jour + semaine)
- HoursDayView : cards empilées en mobile avec inputs par paire, pills absence/férié/formation, statut validation explicite - HoursWeekView : cards par employé avec jours verticaux et totaux - HoursToolbar : recherche + bouton filtre drawer en mobile, navigation date pleine largeur, filtres sites/vue dans drawer - AppDrawer : ajout bouton fermer (croix) sur tous les drawers - TimeSelect mobile : pas de dropdown, clavier numérique direct, arrondi au quart d'heure, clamp à 23:45 max Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -23,7 +23,7 @@
|
||||
<button
|
||||
type="button"
|
||||
tabindex="-1"
|
||||
class="inline-flex h-8 w-8 items-center justify-center rounded text-neutral-600 hover:bg-tertiary-500 disabled:cursor-not-allowed disabled:bg-neutral-200 disabled:text-neutral-500"
|
||||
class="hidden lg:inline-flex h-8 w-8 items-center justify-center rounded text-neutral-600 hover:bg-tertiary-500 disabled:cursor-not-allowed disabled:bg-neutral-200 disabled:text-neutral-500"
|
||||
:disabled="props.disabled"
|
||||
@mousedown.prevent
|
||||
@click="toggleOpen"
|
||||
@@ -149,8 +149,11 @@ const toggleOpen = () => {
|
||||
}
|
||||
}
|
||||
|
||||
const isMobile = () => window.innerWidth < 1024
|
||||
|
||||
const openMenu = () => {
|
||||
if (props.disabled) return
|
||||
if (isMobile()) return
|
||||
if (!isOpen.value) {
|
||||
isOpen.value = true
|
||||
nextTick(updateMenuPosition)
|
||||
@@ -165,8 +168,28 @@ const closeMenu = () => {
|
||||
isOpen.value = false
|
||||
}
|
||||
|
||||
const snapToNearest15 = (time: string): string => {
|
||||
const [h, m] = time.split(':').map(Number)
|
||||
const snapped = Math.round(m / 15) * 15
|
||||
if (snapped === 60) {
|
||||
const newH = h + 1
|
||||
if (newH > 23) return '23:45'
|
||||
return `${String(newH).padStart(2, '0')}:00`
|
||||
}
|
||||
return `${String(h).padStart(2, '0')}:${String(snapped).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
const commitInput = () => {
|
||||
const normalized = normalizeTypedTime(inputValue.value)
|
||||
let value = inputValue.value
|
||||
if (isMobile()) {
|
||||
value = clampTime(value)
|
||||
const normalized = normalizeTypedTime(value)
|
||||
if (normalized !== null && normalized !== '') {
|
||||
value = snapToNearest15(normalized)
|
||||
}
|
||||
inputValue.value = value
|
||||
}
|
||||
const normalized = normalizeTypedTime(value)
|
||||
if (normalized === null || (normalized !== '' && !timeSlots.value.includes(normalized))) {
|
||||
emit('update:modelValue', '')
|
||||
inputValue.value = ''
|
||||
@@ -184,13 +207,26 @@ const onInput = (event: Event) => {
|
||||
if (masked !== inputValue.value) {
|
||||
inputValue.value = masked
|
||||
}
|
||||
openMenu()
|
||||
if (!isMobile()) {
|
||||
openMenu()
|
||||
}
|
||||
}
|
||||
|
||||
const clampTime = (value: string): string => {
|
||||
const normalized = normalizeTypedTime(value)
|
||||
if (normalized === null || normalized === '') return value
|
||||
const [h, m] = normalized.split(':').map(Number)
|
||||
if (h > 23 || (h === 23 && m > 45)) return '23:45'
|
||||
return normalized
|
||||
}
|
||||
|
||||
const onInputBlur = () => {
|
||||
// Laisse le temps au click menu de passer avant fermeture.
|
||||
setTimeout(() => {
|
||||
if (menu.value?.contains(document.activeElement)) return
|
||||
if (isMobile()) {
|
||||
inputValue.value = clampTime(inputValue.value)
|
||||
}
|
||||
commitInput()
|
||||
}, 50)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user