tristan
d595d323b3
- Ajoute les clés i18n manquantes (success/errors weekComment.save/delete) qui faisaient afficher la clé brute dans le toast.
- Titre du drawer simplifié à "Commentaire" ; semaine (S{n}) et plage de dates affichées sous le nom de l'employé.
- Drawer, textarea et boutons migrés vers les composants Malio UI ; bouton Annuler supprimé.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
82 lines
3.1 KiB
Vue
82 lines
3.1 KiB
Vue
<template>
|
|
<MalioDrawer v-model="drawerOpen" title="Commentaire">
|
|
<form class="space-y-4" @submit.prevent="onSave">
|
|
<div v-if="employeeLabel" class="text-md font-semibold text-neutral-700">{{ employeeLabel }}</div>
|
|
<div class="text-md font-semibold text-neutral-700">{{ formatWeekRange }}</div>
|
|
<MalioInputTextArea
|
|
v-model="content"
|
|
label="Commentaire"
|
|
:size="8"
|
|
:max-length="5000"
|
|
:show-counter="true"
|
|
resize="vertical"
|
|
/>
|
|
<div class="sticky bottom-0 -mx-[20px] bg-white px-[20px] py-3 flex justify-between gap-3">
|
|
<MalioButton
|
|
v-if="commentId"
|
|
label="Supprimer"
|
|
variant="danger"
|
|
:disabled="isSubmitting"
|
|
@click="onDelete"
|
|
/>
|
|
<MalioButton
|
|
label="Enregistrer"
|
|
button-class="ml-auto"
|
|
:disabled="isSubmitting || !canSubmit"
|
|
@click="onSave"
|
|
/>
|
|
</div>
|
|
</form>
|
|
</MalioDrawer>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref, watch } from 'vue'
|
|
import { createWeekComment, deleteWeekComment, updateWeekComment } from '~/services/employee-week-comments'
|
|
import { getIsoWeekNumber, parseYmd } from '~/utils/date'
|
|
|
|
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 }
|
|
const start = parseYmd(props.weekStart)
|
|
const weekLabel = start ? `S${getIsoWeekNumber(start)}` : ''
|
|
return weekLabel ? `${weekLabel} du ${fmt(props.weekStart)} au ${fmt(props.weekEnd)}` : `${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>
|