feat : ajout des commentaires à la semaine

frontend/components/hours/WeekCommentDrawer.vue

@@ -0,0 +1,67 @@
+<template>
+  <AppDrawer v-model="drawerOpen" :title="`Commentaire — ${formatWeekRange}`">
+    <form class="space-y-4" @submit.prevent="onSave">
+      <div v-if="employeeLabel" class="text-md font-semibold text-neutral-700">{{ employeeLabel }}</div>
+      <div>
+        <label class="text-md font-semibold text-neutral-700" for="week-comment-content">Commentaire</label>
+        <textarea id="week-comment-content" v-model="content" rows="8" maxlength="5000" class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20" placeholder="Ex. Arrêt maladie lundi, reprise jeudi..." />
+        <p class="mt-1 text-xs text-neutral-400">{{ content.length }} / 5000</p>
+      </div>
+      <div class="sticky bottom-0 -mx-[20px] bg-white px-[20px] py-3 flex justify-between gap-3">
+        <button v-if="commentId" type="button" class="rounded-lg bg-red-500 px-4 py-2 text-md font-semibold text-white hover:bg-red-600 disabled:opacity-50" :disabled="isSubmitting" @click="onDelete">Supprimer</button>
+        <div class="flex gap-3 ml-auto">
+          <button type="button" class="rounded-lg border border-neutral-200 px-4 py-2 text-md font-semibold text-neutral-700 hover:bg-neutral-100" @click="drawerOpen = false">Annuler</button>
+          <button type="submit" class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500 disabled:opacity-50" :disabled="isSubmitting || !canSubmit">Enregistrer</button>
+        </div>
+      </div>
+    </form>
+  </AppDrawer>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import AppDrawer from '~/components/AppDrawer.vue'
+import { createWeekComment, deleteWeekComment, updateWeekComment } from '~/services/employee-week-comments'
+
+const props = defineProps<{
+  modelValue: boolean
+  employeeId: number | null
+  weekStart: string
+  weekEnd: string
+  initialContent: string
+  commentId: number | null
+  employeeLabel?: string
+}>()
+const emit = defineEmits<{ (e: 'update:modelValue', v: boolean): void; (e: 'saved'): void }>()
+
+const drawerOpen = computed({ get: () => props.modelValue, set: (v) => emit('update:modelValue', v) })
+const content = ref('')
+const isSubmitting = ref(false)
+
+watch(() => [props.modelValue, props.initialContent] as const, ([open, init]) => { if (open) content.value = init ?? '' }, { immediate: true })
+
+const formatWeekRange = computed(() => {
+  const fmt = (ymd: string) => { const p = ymd.split('-'); return p.length === 3 ? `${p[2]}/${p[1]}/${p[0]}` : ymd }
+  return `${fmt(props.weekStart)} → ${fmt(props.weekEnd)}`
+})
+
+const canSubmit = computed(() => content.value.trim().length > 0 || props.commentId !== null)
+
+const onSave = async () => {
+  if (!props.employeeId || isSubmitting.value) return
+  const trimmed = content.value.trim()
+  isSubmitting.value = true
+  try {
+    if (trimmed === '' && props.commentId) await deleteWeekComment(props.commentId)
+    else if (trimmed !== '' && props.commentId) await updateWeekComment(props.commentId, trimmed)
+    else if (trimmed !== '') await createWeekComment({ employeeId: props.employeeId, weekStartDate: props.weekStart, content: trimmed })
+    emit('saved'); drawerOpen.value = false
+  } finally { isSubmitting.value = false }
+}
+
+const onDelete = async () => {
+  if (!props.commentId || isSubmitting.value) return
+  isSubmitting.value = true
+  try { await deleteWeekComment(props.commentId); emit('saved'); drawerOpen.value = false } finally { isSubmitting.value = false }
+}
+</script>