fix : wip

frontend/components/hours/HoursToolbar.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="py-6 flex flex-col gap-3">
-    <SiteFilterSelector v-if="sites.length > 0" v-model="selectedSiteIds" :sites="sites" />
+    <SiteFilterSelector v-if="sites.length > 0 && isAdmin" v-model="selectedSiteIds" :sites="sites" />
 
     <div class="flex justify-between items-center gap-4">
       <div class="flex gap-4 flex-wrap">
@@ -34,14 +34,46 @@
         </button>
       </div>
 
+      <div
+        v-else
+        class="inline-flex h-10 w-[320px] overflow-hidden rounded-md border border-primary-500 bg-white"
+      >
+        <button
+          type="button"
+          class="flex-1 px-4 py-2 text-sm font-semibold active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40"
+          :class="weekShortcutButtonClass('previousWeek')"
+          @click="emit('set-previous-week')"
+        >
+          {{ getWeekShortcutLabel('previousWeek') }}
+        </button>
+        <button
+          type="button"
+          class="flex-1 border-x border-primary-500 px-4 py-2 text-sm font-semibold active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40"
+          :class="weekShortcutButtonClass('thisWeek')"
+          @click="emit('set-this-week')"
+        >
+          {{ getWeekShortcutLabel('thisWeek') }}
+        </button>
+        <button
+          type="button"
+          class="flex-1 px-4 py-2 text-sm font-semibold active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40"
+          :class="weekShortcutButtonClass('nextWeek')"
+          @click="emit('set-next-week')"
+        >
+          {{ getWeekShortcutLabel('nextWeek') }}
+        </button>
+      </div>
+
       <div class="relative inline-flex h-10 w-[320px] items-center overflow-hidden rounded-md border border-primary-500 bg-white">
         <input
           ref="nativeDateInput"
-          v-model="selectedDate"
-          type="date"
+          :value="pickerValue"
+          :type="viewMode === 'week' ? 'week' : 'date'"
           class="pointer-events-none absolute inset-0 h-full w-full opacity-0"
           tabindex="-1"
           aria-hidden="true"
+          @input="onPickerInput"
+          @change="onPickerInput"
         />
         <button
           type="button"
@@ -91,7 +123,7 @@
       </div>
     </div>
 
-    <div class="w-80 max-w-full">
+    <div v-if="isAdmin" class="w-80 max-w-full">
       <EmployeeNameFilterInput v-model="employeeFilter" />
     </div>
   </div>
@@ -101,6 +133,7 @@
 import type { Site } from '~/services/dto/site'
 import EmployeeNameFilterInput from '~/components/EmployeeNameFilterInput.vue'
 import SiteFilterSelector from '~/components/SiteFilterSelector.vue'
+import { weekInputValueToYmd, ymdToWeekInputValue } from '~/utils/date'
 
 const selectedDate = defineModel<string>('selectedDate', { required: true })
 const viewMode = defineModel<'day' | 'week'>('viewMode', { required: true })
@@ -112,16 +145,25 @@ defineProps<{
   sites: Site[]
   formattedSelectedDate: string
   shortcutButtonClass: (target: 'yesterday' | 'today' | 'tomorrow') => string
+  weekShortcutButtonClass: (target: 'previousWeek' | 'thisWeek' | 'nextWeek') => string
+  getWeekShortcutLabel: (target: 'previousWeek' | 'thisWeek' | 'nextWeek') => string
 }>()
 
 const emit = defineEmits<{
   (e: 'set-yesterday'): void
   (e: 'set-today'): void
   (e: 'set-tomorrow'): void
+  (e: 'set-previous-week'): void
+  (e: 'set-this-week'): void
+  (e: 'set-next-week'): void
   (e: 'shift-date', value: number): void
 }>()
 
 const nativeDateInput = ref<HTMLInputElement | null>(null)
+const pickerValue = computed(() => {
+  if (viewMode.value === 'week') return ymdToWeekInputValue(selectedDate.value)
+  return selectedDate.value
+})
 
 const viewModeButtonClass = (mode: 'day' | 'week') => {
   if (viewMode.value === mode) {
@@ -141,4 +183,18 @@ const openDatePicker = () => {
   input.focus()
   input.click()
 }
+
+const onPickerInput = (event: Event) => {
+  const value = (event.target as HTMLInputElement).value
+  if (!value) return
+
+  if (viewMode.value === 'week') {
+    const ymd = weekInputValueToYmd(value)
+    if (!ymd) return
+    selectedDate.value = ymd
+    return
+  }
+
+  selectedDate.value = value
+}
 </script>