Added a bunch of translations on calendar components

This commit is contained in:
Alexis
2024-09-03 22:19:07 +02:00
parent 6fee4c7158
commit 6cfcde3b58
11 changed files with 155 additions and 52 deletions

View File

@@ -87,8 +87,14 @@ function deployDeleteModal() {
</template>
<template v-else>
<p class="font-semibold">
Du {{ getFormattedDateTitle(event.startDate, true) }} au
{{ getFormattedDateTitle(event.endDate, true) }}
{{
$t('entity.calendar.date.fromTo',
{
startDate: getFormattedDateTitle(event.startDate, true),
endDate: getFormattedDateTitle(event.endDate, true)
}
)
}}
</p>
</template>
</div>
@@ -105,7 +111,8 @@ function deployDeleteModal() {
</p>
<template v-if="dateDuration">
<p class="text-sm italic dark:opacity-75 flex items-center gap-1">
<PhHourglassMedium size="16" weight="fill" /> Pendant {{ dateDuration }}
<PhHourglassMedium size="16" weight="fill" />
{{ $t('entity.calendar.date.while', { duration: dateDuration } )}}
</p>
</template>
</div>
@@ -146,8 +153,8 @@ function deployDeleteModal() {
<UiCommand>
<UiCommandList>
<UiCommandGroup>
<UiCommandItem value="edit-event" @select="deployEditModal"> Modifier </UiCommandItem>
<UiCommandItem value="delete-event" @select="deployDeleteModal"> Supprimer </UiCommandItem>
<UiCommandItem value="edit-event" @select="deployEditModal"> {{ $t('ui.action.edit') }} </UiCommandItem>
<UiCommandItem value="delete-event" @select="deployDeleteModal"> {{ $t('ui.action.delete') }} </UiCommandItem>
</UiCommandGroup>
</UiCommandList>
</UiCommand>
@@ -162,7 +169,7 @@ function deployDeleteModal() {
title="Naviguer au début"
@click="handleJumpToDate(event.startDate!)"
>
<PhHourglassHigh size="16" weight="fill" /> Début
<PhHourglassHigh size="16" weight="fill" /> {{ $t('entity.calendar.event.isStart') }}
</button>
</UiBadge>
<UiBadge class="hover:bg-indigo-400 dark:hover:bg-slate-300" as-child title="Naviguer à la fin">
@@ -171,7 +178,7 @@ function deployDeleteModal() {
title="Naviguer à la fin"
@click="handleJumpToDate(event.endDate!)"
>
<PhHourglassLow size="16" weight="fill" /> Fin
<PhHourglassLow size="16" weight="fill" /> {{ $t('entity.calendar.event.isEnd') }}
</button>
</UiBadge>
</nav>
@@ -180,11 +187,13 @@ function deployDeleteModal() {
<UiTooltip>
<UiTooltipTrigger as-child>
<UiBadge class="absolute -top-2 right-2 flex gap-1">
<PhEye size="16" weight="fill" /> Évènement privé
<PhEye size="16" weight="fill" /> {{ $t('entity.calendar.event.isHidden') }}
</UiBadge>
</UiTooltipTrigger>
<UiTooltipContent>
<p>Cet évènement est uniquement visible pour vous</p>
<p>
{{ $t('entity.calendar.event.hiddenTooltip') }}
</p>
</UiTooltipContent>
</UiTooltip>
</UiTooltipProvider>

View File

@@ -25,7 +25,7 @@ const { revealAdvancedSearch } = useCalendar()
<li>
<UiButton search-slash @click="revealAdvancedSearch()">
<PhMagnifyingGlass size="20" weight="light" />
Recherche avancée
{{ $t('entity.advancedSearch.title') }}
</UiButton>
</li>
<li>

View File

@@ -14,17 +14,9 @@ const isDefaultDate: ComputedRef<boolean> = computed<boolean>(() => areDatesIden
<UiTooltipProvider :delay-duration="250">
<UiTooltip>
<UiTooltipTrigger as-child>
<ClientOnly>
<UiButton size="sm" :disabled="isDefaultDate" @click="jumpToDefaultDate">
Aujourd'hui
</UiButton>
<template #fallback>
<UiButton size="sm">
Aujourd'hui
</UiButton>
</template>
</ClientOnly>
<UiButton size="sm" :disabled="isDefaultDate" @click="jumpToDefaultDate">
{{ $t('entity.calendar.date.today') }}
</UiButton>
</UiTooltipTrigger>
<UiTooltipContent>
<p>{{ defaultDateFormatted }}</p>

View File

@@ -70,10 +70,12 @@ function handleCancel() {
@pointer-down-outside="(e) => e.preventDefault()"
>
<header class="pl-8 grid gap-y-2">
<UiDialogTitle> Modifier l'évènement</UiDialogTitle>
<UiDialogTitle>
{{ $t('entity.calendar.event.editDialog.title') }}
</UiDialogTitle>
<UiDialogDescription>
Mettre à jour les données de l'évènement
{{ $t('entity.calendar.event.editDialog.subtitle') }}
</UiDialogDescription>
</header>
@@ -89,7 +91,7 @@ function handleCancel() {
type="text"
name="new-event-title"
required
placeholder="Titre de l'évènement"
:placeholder="$t('entity.calendar.event.title')"
class="w-full -my-1 py-1 -mx-1 px-1 text-lg border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
>
</div>
@@ -100,7 +102,7 @@ function handleCancel() {
id="new-event-description"
v-model="eventSkeleton.description"
name="new-event-description"
placeholder="Ajouter une description"
:placeholder="$t('entity.addDescription')"
class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
/>
</div>
@@ -111,7 +113,7 @@ function handleCancel() {
<CalendarInputRPGDate
v-model:model-value="eventSkeleton.startDate"
placeholder="Date de début"
:placeholder="$t('entity.calendar.date.start')"
:initial-date="lastActiveEvent?.startDate"
:required="true"
/>
@@ -120,7 +122,7 @@ function handleCancel() {
<CalendarInputRPGDate
v-model:model-value="eventSkeleton.endDate"
placeholder="Date de fin"
:placeholder="$t('entity.calendar.date.end')"
:initial-date="lastActiveEvent?.endDate"
/>
</div>
@@ -155,7 +157,7 @@ function handleCancel() {
v-model="eventSkeleton.location"
type="text"
name="new-event-location"
placeholder="Ajouter un endroit"
:placeholder="$t('entity.calendar.event.addLocation')"
class="w-full -my-1 py-2 px-2 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600">
</div>
</div>
@@ -169,10 +171,10 @@ function handleCancel() {
<UiSwitch id="new-event-visibility" v-model:checked="eventSkeleton.hidden" />
<UiLabel for="new-event-visibility">
<template v-if="!eventSkeleton.hidden">
Évènement visible par tous
{{ $t('entity.calendar.event.isPublic') }}
</template>
<template v-else>
Évènement caché
{{ $t('entity.calendar.event.isHidden') }}
</template>
</UiLabel>
</div>
@@ -189,7 +191,7 @@ function handleCancel() {
<footer class="flex gap-2 justify-end">
<Transition name="fade-delay">
<UiButton v-if="isLoading" type="button" size="sm" variant="destructive" @click.prevent="handleCancel">
Annuler
{{ $t('ui.action.cancel') }}
</UiButton>
</Transition>
@@ -198,7 +200,7 @@ function handleCancel() {
<PhCircleNotch v-if="isLoading" size="20" class="animate-spin"/>
</Transition>
Enregistrer
{{ $t('ui.action.save') }}
</UiButton>
</footer>
</form>

View File

@@ -60,8 +60,8 @@ const filteredCategories = computed(() =>
class="w-fit h-[33vh] p-0"
>
<UiCommand v-model="modelBuffer" v-model:searchTerm="searchTerm" :multiple="true">
<UiCommandInput placeholder="Rechercher les catégories" />
<UiCommandEmpty>Aucune catégorie trouvée.</UiCommandEmpty>
<UiCommandInput :placeholder="$t('entity.searchCategories')" />
<UiCommandEmpty>{{ $t('entity.noCategoriesFound') }}</UiCommandEmpty>
<UiCommandList>
<UiCommandGroup>
<UiCommandItem

View File

@@ -52,8 +52,8 @@ const filteredCategories = computed(() =>
class="w-fit h-[33vh] p-0"
>
<UiCommand v-model="model" v-model:searchTerm="searchTerm">
<UiCommandInput placeholder="Rechercher les catégories" />
<UiCommandEmpty>Aucune catégorie trouvée.</UiCommandEmpty>
<UiCommandInput :placeholder="$t('entity.searchCategories')" />
<UiCommandEmpty>{{ $t('entity.noCategoriesFound') }}</UiCommandEmpty>
<UiCommandList>
<UiCommandGroup>
<UiCommandItem

View File

@@ -241,11 +241,11 @@ function handleCategorySelect(e: (Category)) {
}"
>
<VisuallyHidden>
<UiDialogTitle> Recherche avancée </UiDialogTitle>
<UiDialogTitle> {{ $t('entity.advancedSearch.title') }} </UiDialogTitle>
</VisuallyHidden>
<VisuallyHidden>
<UiDialogDescription>
Rechercher les données disponibles sur le calendrier
{{ $t('entity.advancedSearch.title') }}
</UiDialogDescription>
</VisuallyHidden>
@@ -256,7 +256,7 @@ function handleCategorySelect(e: (Category)) {
id="search"
v-model:model-value="searchQuery"
type="text"
placeholder="Rechercher le calendrier"
:placeholder="$t('entity.advancedSearch.ctaPlaceholder')"
class="pl-10 py-6 text-lg"
autocomplete="off"
/>
@@ -274,10 +274,10 @@ function handleCategorySelect(e: (Category)) {
@update:model-value="handleEntitySwitch()"
>
<UiToggleGroupItem value="events" aria-label="Uniquement les évènements">
Évènements
{{ $t('entity.calendar.event.namePlural') }}
</UiToggleGroupItem>
<UiToggleGroupItem value="characters" aria-label="Uniquement les personnages">
Personnages
{{ $t('entity.character.namePlural') }}
</UiToggleGroupItem>
</UiToggleGroup>
</div>
@@ -341,7 +341,7 @@ function handleCategorySelect(e: (Category)) {
</UiButton>
</UiTooltipTrigger>
<UiTooltipContent>
<p>Plus ancien</p>
<p>{{ $t('entity.advancedSearch.older') }}</p>
</UiTooltipContent>
</UiTooltip>
</UiTooltipProvider>
@@ -358,7 +358,7 @@ function handleCategorySelect(e: (Category)) {
</UiButton>
</UiTooltipTrigger>
<UiTooltipContent>
<p>Plus récent</p>
<p>{{ $t('entity.advancedSearch.newer') }}</p>
</UiTooltipContent>
</UiTooltip>
</UiTooltipProvider>

View File

@@ -53,8 +53,14 @@ const dateDuration: string | null = props.event.endDate
</template>
<template v-else>
<p class="font-semibold text-sm opacity-75">
Du {{ getFormattedDateTitle(event.startDate, true) }} au
{{ getFormattedDateTitle(event.endDate, true) }}
{{
$t('entity.calendar.date.fromTo',
{
startDate: getFormattedDateTitle(event.startDate, true),
endDate: getFormattedDateTitle(event.endDate, true)
}
)
}}
</p>
</template>
<div v-if="event.hidden" class="flex justify-end">
@@ -62,11 +68,13 @@ const dateDuration: string | null = props.event.endDate
<UiTooltip>
<UiTooltipTrigger as-child>
<UiBadge class="flex gap-1">
<PhEye size="16" weight="fill" /> Évènement privé
<PhEye size="16" weight="fill" /> {{ $t('entity.calendar.event.isHidden') }}
</UiBadge>
</UiTooltipTrigger>
<UiTooltipContent>
<p>Cet évènement est uniquement visible pour vous</p>
<p>
{{ $t('entity.calendar.event.hiddenTooltip') }}
</p>
</UiTooltipContent>
</UiTooltip>
</UiTooltipProvider>
@@ -84,7 +92,7 @@ const dateDuration: string | null = props.event.endDate
</p>
<template v-if="dateDuration">
<p class="w-fit text-sm italic opacity-75 flex items-center gap-1">
<PhHourglassMedium size="16" weight="fill" /> Pendant {{ dateDuration }}
<PhHourglassMedium size="16" weight="fill" /> {{ $t('entity.calendar.date.while', { duration: dateDuration } )}}
</p>
</template>
</div>