Added a bunch of translations on calendar components

components/calendar/search/CalendarSearch.vue

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

components/calendar/search/lists/EventCallout.vue

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