MALIO-DEV/SIRH
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 67 Wiki Activity

feat : ajout des commentaires à la semaine

Browse Source
This commit is contained in:
Autin
2026-04-17 09:53:09 +02:00
parent 51bf155b0e
commit ccd8e66dcd
19 changed files with 595 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/components/driver-hours/DriverHoursWeekView.vue
View File

@@ -33,8 +33,11 @@
{{ row.firstName }} {{ row.lastName }}
<span class="font-normal text-neutral-600">({{ row.contractName ?? '-' }})</span>
</p>
<p class="text-[11px] text-neutral-500 truncate">
{{ row.siteName ?? 'Sans site' }}<span v-if="row.contractNature"> — {{ contractNatureLabel(row.contractNature) }}</span>
<p class="text-[11px] text-neutral-500 truncate inline-flex items-center gap-2">
<span>{{ row.siteName ?? 'Sans site' }}<span v-if="row.contractNature"> — {{ contractNatureLabel(row.contractNature) }}</span></span>
<button v-if="isAdmin" type="button" class="inline-flex items-center justify-center rounded-md p-1 text-white transition-colors" :class="row.comment ? 'bg-red-500 hover:bg-red-600' : 'bg-primary-500 hover:bg-secondary-500'" :title="row.comment ?? 'Ajouter un commentaire'" @click="$emit('open-comment', row)">
<Icon name="mdi:comment-text-outline" size="12"/>
</button>
</p>
</div>
@@ -103,9 +106,12 @@ const getDailyCellStyle = (daily: {
defineProps<{
isWeekLoading: boolean
isAdmin: boolean
weekGridCols: string
weeklySummary: WeeklyWorkHourSummary | null
weekDayHeaders: Array<{ date: string; weekday: string; dayDate: string }>
formatMinutes: (minutes: number) => string
}>()
defineEmits<{ (e: 'open-comment', row: WeeklyWorkHourSummary['rows'][number]): void }>()
</script>

10
frontend/components/hours/HoursWeekView.vue
View File

@@ -29,8 +29,11 @@
{{ row.firstName }} {{ row.lastName }}
<span class="font-normal text-neutral-600">({{ row.contractName ?? '-' }})</span>
</p>
<p class="text-[11px] text-neutral-500 truncate">
{{ row.siteName ?? 'Sans site' }}<span v-if="row.contractNature"> — {{ contractNatureLabel(row.contractNature) }}</span>
<p class="text-[11px] text-neutral-500 truncate inline-flex items-center gap-2">
<span>{{ row.siteName ?? 'Sans site' }}<span v-if="row.contractNature"> — {{ contractNatureLabel(row.contractNature) }}</span></span>
<button v-if="isAdmin" type="button" class="inline-flex items-center justify-center rounded-md p-1 text-white transition-colors" :class="row.comment ? 'bg-red-500 hover:bg-red-600' : 'bg-primary-500 hover:bg-secondary-500'" :title="row.comment ?? 'Ajouter un commentaire'" @click="$emit('open-comment', row)">
<Icon name="mdi:comment-text-outline" size="12"/>
</button>
</p>
</div>
@@ -99,9 +102,12 @@ const getDailyCellStyle = (daily: {
defineProps<{
isWeekLoading: boolean
isAdmin: boolean
weekGridCols: string
weeklySummary: WeeklyWorkHourSummary | null
weekDayHeaders: Array<{ date: string; label: string }>
formatMinutes: (minutes: number) => string
}>()
defineEmits<{ (e: 'open-comment', row: WeeklyWorkHourSummary['rows'][number]): void }>()
</script>

67
frontend/components/hours/WeekCommentDrawer.vue Normal file
View File

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

15
frontend/composables/useDriverHoursPage.ts
View File

@@ -922,6 +922,15 @@ export const useDriverHoursPage = () => {
}
}
const isWeekCommentDrawerOpen = ref(false)
const weekCommentContext = ref<{ employeeId: number; employeeLabel: string; weekStart: string; weekEnd: string; content: string; commentId: number | null } | null>(null)
const openWeekCommentDrawer = (row: { employeeId: number; firstName: string; lastName: string; comment?: string | null; commentId?: number | null }) => {
if (!weeklySummary.value) return
weekCommentContext.value = { employeeId: row.employeeId, employeeLabel: `${row.firstName} ${row.lastName}`.trim(), weekStart: weeklySummary.value.weekStart, weekEnd: weeklySummary.value.weekEnd, content: row.comment ?? '', commentId: row.commentId ?? null }
isWeekCommentDrawerOpen.value = true
}
const reloadWeeklySummary = async () => { await loadWeeklySummary() }
return {
isAdmin,
isSelfUser,
@@ -988,6 +997,10 @@ export const useDriverHoursPage = () => {
deleteAbsenceFromDrawer,
closeAbsenceDrawer,
formatMinutes,
handleSave
handleSave,
isWeekCommentDrawerOpen,
weekCommentContext,
openWeekCommentDrawer,
reloadWeeklySummary
}
}

15
frontend/composables/useHoursPage.ts
View File

@@ -1108,6 +1108,15 @@ export const useHoursPage = () => {
}
}
const isWeekCommentDrawerOpen = ref(false)
const weekCommentContext = ref<{ employeeId: number; employeeLabel: string; weekStart: string; weekEnd: string; content: string; commentId: number | null } | null>(null)
const openWeekCommentDrawer = (row: { employeeId: number; firstName: string; lastName: string; comment?: string | null; commentId?: number | null }) => {
if (!weeklySummary.value) return
weekCommentContext.value = { employeeId: row.employeeId, employeeLabel: `${row.firstName} ${row.lastName}`.trim(), weekStart: weeklySummary.value.weekStart, weekEnd: weeklySummary.value.weekEnd, content: row.comment ?? '', commentId: row.commentId ?? null }
isWeekCommentDrawerOpen.value = true
}
const reloadWeeklySummary = async () => { await loadWeeklySummary() }
return {
isAdmin,
isSelfUser,
@@ -1181,6 +1190,10 @@ export const useHoursPage = () => {
deleteAbsenceFromDrawer,
closeAbsenceDrawer,
formatMinutes,
handleSave
handleSave,
isWeekCommentDrawerOpen,
weekCommentContext,
openWeekCommentDrawer,
reloadWeeklySummary
}
}

10
frontend/data/documentation-content.ts
View File

@@ -79,6 +79,16 @@ export const documentationSections: DocSection[] = [
{ type: 'list', content: 'Jour : total des heures dans la plage 06:00–21:00\nNuit : total des heures dans les plages 00:00–06:00 et 21:00–24:00\nTotal : somme des heures de jour et de nuit' },
],
},
{
id: 'commentaire-semaine',
title: 'Commentaires de semaine (admin)',
requiredLevel: 'admin',
blocks: [
{ type: 'paragraph', content: 'Sur la vue semaine, un picto bulle permet d\'attacher un commentaire libre sur la semaine d\'un employé.' },
{ type: 'list', content: 'Bulle bleue : pas de commentaire\nBulle rouge : un commentaire existe\nClic : ouvre le drawer avec textarea' },
{ type: 'note', content: 'Les commentaires n\'affectent aucun calcul. Pour supprimer, videz la textarea puis Enregistrer, ou bouton Supprimer.' },
],
},
],
},
{

19
frontend/pages/driver-hours.vue
View File

@@ -73,11 +73,13 @@
<DriverHoursWeekView
v-else-if="isAdmin && viewMode === 'week'"
:is-week-loading="isWeekLoading"
:is-admin="isAdmin"
:week-grid-cols="weekGridCols"
:weekly-summary="filteredWeeklySummary"
:week-day-headers="weekDayHeaders"
:format-minutes="formatMinutes"
class="max-h-[calc(100vh-300px)]"
@open-comment="openWeekCommentDrawer"
/>
</div>
@@ -109,6 +111,17 @@
@cancel="closeAbsenceDrawer"
/>
<HoursWeekCommentDrawer
v-if="weekCommentContext"
v-model="isWeekCommentDrawerOpen"
:employee-id="weekCommentContext.employeeId"
:employee-label="weekCommentContext.employeeLabel"
:week-start="weekCommentContext.weekStart"
:week-end="weekCommentContext.weekEnd"
:initial-content="weekCommentContext.content"
:comment-id="weekCommentContext.commentId"
@saved="reloadWeeklySummary"
/>
</div>
</template>
@@ -177,7 +190,11 @@ const {
formatMinutes,
isSelectedDateHoliday,
selectedHolidayLabel,
handleSave
handleSave,
isWeekCommentDrawerOpen,
weekCommentContext,
openWeekCommentDrawer,
reloadWeeklySummary
} = useDriverHoursPage()
useHead({

19
frontend/pages/hours.vue
View File

@@ -80,11 +80,13 @@
<HoursWeekView
v-else-if="isAdmin && viewMode === 'week'"
:is-week-loading="isWeekLoading"
:is-admin="isAdmin"
:week-grid-cols="weekGridCols"
:weekly-summary="filteredWeeklySummary"
:week-day-headers="weekDayHeaders"
:format-minutes="formatMinutes"
class="max-h-[calc(100vh-300px)]"
@open-comment="openWeekCommentDrawer"
/>
</div>
@@ -116,6 +118,17 @@
@cancel="closeAbsenceDrawer"
/>
<HoursWeekCommentDrawer
v-if="weekCommentContext"
v-model="isWeekCommentDrawerOpen"
:employee-id="weekCommentContext.employeeId"
:employee-label="weekCommentContext.employeeLabel"
:week-start="weekCommentContext.weekStart"
:week-end="weekCommentContext.weekEnd"
:initial-content="weekCommentContext.content"
:comment-id="weekCommentContext.commentId"
@saved="reloadWeeklySummary"
/>
</div>
</template>
@@ -191,7 +204,11 @@ const {
deleteAbsenceFromDrawer,
closeAbsenceDrawer,
formatMinutes,
handleSave
handleSave,
isWeekCommentDrawerOpen,
weekCommentContext,
openWeekCommentDrawer,
reloadWeeklySummary
} = useHoursPage()
useHead({

2
frontend/services/dto/work-hour.ts
View File

@@ -88,6 +88,8 @@ export type WeeklyWorkHourRowSummary = {
weeklyOvernightCount?: number
hasContractForWeek?: boolean
contractNature?: 'CDI' | 'CDD' | 'INTERIM' | null
comment?: string | null
commentId?: number | null
}
export type WeeklyWorkHourSummary = {

24
frontend/services/employee-week-comments.ts Normal file
View File

@@ -0,0 +1,24 @@
export type EmployeeWeekComment = {
id: number
weekStartDate: string
content: string
}
export const createWeekComment = async (payload: { employeeId: number; weekStartDate: string; content: string }) => {
const api = useApi()
return api.post<EmployeeWeekComment>('/employee_week_comments', {
employee: `/api/employees/${payload.employeeId}`,
weekStartDate: payload.weekStartDate,
content: payload.content
}, { toastSuccessKey: 'success.week-comment.save', toastErrorKey: 'errors.week-comment.save' })
}
export const updateWeekComment = async (id: number, content: string) => {
const api = useApi()
return api.patch<EmployeeWeekComment>(`/employee_week_comments/${id}`, { content }, { toastSuccessKey: 'success.week-comment.save', toastErrorKey: 'errors.week-comment.save' })
}
export const deleteWeekComment = async (id: number) => {
const api = useApi()
await api.delete(`/employee_week_comments/${id}`, {}, { toastSuccessKey: 'success.week-comment.delete', toastErrorKey: 'errors.week-comment.delete' })
}