Added a bunch of translations on calendar components

2024-09-03 22:19:07 +02:00
parent 6fee4c7158
commit 6cfcde3b58
11 changed files with 155 additions and 52 deletions
--- a/components/calendar/CalendarEventDetails.vue
+++ b/components/calendar/CalendarEventDetails.vue
@@ -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>
--- a/components/calendar/CalendarMenu.vue
+++ b/components/calendar/CalendarMenu.vue
@@ -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>
--- a/components/calendar/CalendarMenuToday.vue
+++ b/components/calendar/CalendarMenuToday.vue
@@ -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>
--- a/components/calendar/form/UpdateEvent.vue
+++ b/components/calendar/form/UpdateEvent.vue
@@ -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>
--- a/components/calendar/input/EventCategories.vue
+++ b/components/calendar/input/EventCategories.vue
@@ -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
--- a/components/calendar/input/EventCategory.vue
+++ b/components/calendar/input/EventCategory.vue
@@ -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
--- a/components/calendar/search/CalendarSearch.vue
+++ b/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>
--- a/components/calendar/search/lists/EventCallout.vue
+++ b/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>
--- a/i18n.config.ts
+++ b/i18n.config.ts
@@ -11,7 +11,9 @@ export default defineI18nConfig(() => ({
        action: {
          back: "Back",
          cancel: "Cancel",
-          save: "Save"
+          save: "Save",
+          delete: "Delete",
+          edit: "Edit",
        },
        greeting: "Connected as {user}",
        sidebarMenu: {
@@ -30,7 +32,17 @@ export default defineI18nConfig(() => ({
        title: "Title"
      },
      entity: {
+        searchCategories: "Search categories",
+        noCategoriesFound: "No categories found.",
+        addDescription: "Add a description",
        deleteOne: "Delete \"{entity}\"",
+        advancedSearch: {
+          title: "Advanced search",
+          subtitle: "Search through calendar and world data",
+          older: "Older",
+          newer: "Newer",
+          ctaPlaceholder: "Search an event, characters…"
+        },
        world: {
          nameSingular: "World",
          namePlural: "Worlds",
@@ -40,6 +52,33 @@ export default defineI18nConfig(() => ({
          namePlural: "Calendars",
          addSingle: "Add a calendar",
          notFoundForWorld: "No calendar for this world… yet !",
+          isLoading: "Calendar is loading…",
+          date: {
+            start: "Start date",
+            end: "End date",
+            today: "Today",
+            fromTo: "From {startDate} to {endDate}",
+            while: "During {duration}",
+          },
+          event: {
+            nameSingular: "Event",
+            namePlural: "Events",
+            title: "Event title",
+            isStart: "Start",
+            isEnd: "End",
+            isHidden: "Hidden event",
+            isPublic: "Public event",
+            hiddenTooltip: "This event is visible only to game masters.",
+            addLocation: "Add a place",
+            editDialog: {
+              title: "Edit event",
+              subtitle: "Update event data",
+            },
+            deleteDialog: {
+              title: "Delete this event",
+              subtitle: "Data associated with this event will be lost and you won't be able to retrieve it !",
+            }
+          },
          createDialog: {
            title: "New calendar",
            tabs: {
@@ -73,6 +112,10 @@ export default defineI18nConfig(() => ({
            chooseOne: "Choose a month",
            deleteOne: "Remove {month} from this calendar"
          }
+        },
+        character: {
+          nameSingular: "Character",
+          namePlural: "Characters",
        }
      }
    },
@@ -85,7 +128,9 @@ export default defineI18nConfig(() => ({
        action: {
          back: "Retour",
          cancel: "Annuler",
-          save: "Sauvegarder"
+          save: "Sauvegarder",
+          delete: "Supprimer",
+          edit: "Modifier",
        },
        greeting: "Connecté en tant que {user}",
        sidebarMenu: {
@@ -104,7 +149,17 @@ export default defineI18nConfig(() => ({
        title: "Titre"
      },
      entity: {
+        searchCategories: "Rechercher les catégories",
+        noCategoriesFound: "Aucune catégorie trouvée.",
+        addDescription: "Ajouter une description",
        deleteOne: "Supprimer \"{entity}\"",
+        advancedSearch: {
+          title: "Recherche avancée",
+          subtitle: "Rechercher les données disponibles sur le calendrier",
+          older: "Plus ancien",
+          newer: "Plus récent",
+          ctaPlaceholder: "Rechercher un évènement, personnage…"
+        },
        world: {
          nameSingular: "Monde",
          namePlural: "Mondes",
@@ -114,6 +169,33 @@ export default defineI18nConfig(() => ({
          namePlural: "Calendrier",
          addSingle: "Ajouter un calendrier",
          notFoundForWorld: "Aucun calendrier pour ce monde… pour l'instant !",
+          isLoading: "Chargement du calendrier…",
+          date: {
+            start: "Date de début",
+            end: "Date de fin",
+            today: "Aujourd'hui",
+            fromTo: "Du {startDate} au {endDate}",
+            while: "Pendant {duration}",
+          },
+          event: {
+            nameSingular: "Évènement",
+            namePlural: "Évènements",
+            title: "Titre de l'évènement",
+            isStart: "Début",
+            isEnd: "Fin",
+            isHidden: "Évènement privé",
+            isPublic: "Évènement public",
+            hiddenTooltip: "Cet évènement est uniquement visible pour les maîtres du jeu.",
+            addLocation: "Ajouter un endroit",
+            editDialog: {
+              title: "Modifier l'évènement",
+              subtitle: "Mettre à jour les données de l'évènement",
+            },
+            deleteDialog: {
+              title: "Supprimer l'évènement",
+              subtitle: "Les données associés à cet évènement seront supprimées et vous ne pourrez plus les récupérer !",
+            }
+          },
          createDialog: {
            title: "Nouveau calendrier",
            tabs: {
@@ -148,6 +230,10 @@ export default defineI18nConfig(() => ({
            chooseOne: "Choisir un mois",
            deleteOne: "Supprimer {month} du calendrier"
          }
+        },
+        character: {
+          nameSingular: "Personnage",
+          namePlural: "Personnages",
        }
      }
    }
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -15,7 +15,11 @@ export default defineNuxtConfig({
  css: ["~/assets/main.css"],

  i18n: {
-    vueI18n: "./i18n.config.ts"
+    vueI18n: "./i18n.config.ts",
+    detectBrowserLanguage: {
+      useCookie: true,
+      cookieKey: "tttools_lang"
+    },
  },

  supabase: {
--- a/pages/my/calendars/[id].vue
+++ b/pages/my/calendars/[id].vue
@@ -32,7 +32,9 @@ const categories = computed<Category[]>(() => catData?.value?.data as Category[]
    </Head>

    <div class="grid gap-2 justify-items-center opacity-50">
-      <p>Chargement du calendrier</p>
+      <p>
+        {{ $t('entity.calendar.isLoading') }}
+      </p>
      <PhCircleNotch size="50" class="animate-spin"/>
    </div>
  </div>