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:
2026-04-20 12:09:26 +02:00
parent 269f660ddf
commit 08d05a9a52
6 changed files with 346 additions and 16 deletions

View File

@@ -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)
}