feat(#22): Use translation keys in files

2025-11-21 19:20:19 +01:00
parent 63023f4f9f
commit 81b1227e82
28 changed files with 497 additions and 195 deletions
--- a/legalconsenthub/app/components/DeleteModal.vue
+++ b/legalconsenthub/app/components/DeleteModal.vue
@@ -1,11 +1,11 @@
 <template>
-  <UModal :open="isOpen" title="Mitbestimmungsantrag löschen" @update:open="$emit('update:isOpen', $event)">
+  <UModal :open="isOpen" :title="$t('applicationForms.deleteTitle')" @update:open="$emit('update:isOpen', $event)">
    <template #body>
-      Möchten Sie wirklich den Mitbestimmungsantrag <strong>{{ applicationFormToDelete.name }}</strong> löschen?
+      <span v-html="$t('applicationForms.deleteConfirm', { name: applicationFormToDelete.name })"></span>
    </template>
    <template #footer>
-      <UButton label="Abbrechen" color="neutral" variant="outline" @click="$emit('update:isOpen', false)" />
-      <UButton label="Löschen" color="neutral" @click="$emit('delete', applicationFormToDelete.id)" />
+      <UButton :label="$t('common.cancel')" color="neutral" variant="outline" @click="$emit('update:isOpen', false)" />
+      <UButton :label="$t('common.delete')" color="neutral" @click="$emit('delete', applicationFormToDelete.id)" />
    </template>
  </UModal>
 </template>
--- a/legalconsenthub/app/components/FormEngine.vue
+++ b/legalconsenthub/app/components/FormEngine.vue
@@ -92,18 +92,19 @@ function getResolvedComponent(formElement: FormElementDto) {
 }

 function getDropdownItems(formElementId: string, formElementPosition: number): DropdownMenuItem[] {
+  const { t: $t } = useI18n()
  const items = []

  if (route.path !== '/create') {
    items.push({
-      label: 'Comments',
+      label: $t('applicationForms.formElements.comments'),
      icon: 'i-lucide-message-square-more',
      onClick: () => toggleComments(formElementId)
    })
  }

  items.push({
-    label: 'Add input field below',
+    label: $t('applicationForms.formElements.addInputBelow'),
    icon: 'i-lucide-list-plus',
    onClick: () => emit('add:input-form', formElementPosition)
  })
--- a/legalconsenthub/app/components/FormStepperWithNavigation.vue
+++ b/legalconsenthub/app/components/FormStepperWithNavigation.vue
@@ -30,7 +30,7 @@

    <div class="flex gap-2 justify-between">
      <UButton leading-icon="i-lucide-arrow-left" :disabled="!stepper?.hasPrev" @click="handleNavigate('backward')">
-        Prev
+        {{ $t('applicationForms.navigation.previous') }}
      </UButton>

      <UButton
@@ -40,15 +40,15 @@
        size="lg"
        @click="handleNavigate('forward')"
      >
-        Next
+        {{ $t('applicationForms.navigation.next') }}
      </UButton>

      <div v-if="!stepper?.hasNext" class="flex flex-wrap items-center gap-1.5">
        <UButton trailing-icon="i-lucide-save" :disabled="disabled" variant="outline" size="lg" @click="emit('save')">
-          Save
+          {{ $t('applicationForms.navigation.save') }}
        </UButton>
        <UButton trailing-icon="i-lucide-send-horizontal" :disabled="disabled" size="lg" @click="emit('submit')">
-          Submit
+          {{ $t('applicationForms.navigation.submit') }}
        </UButton>
      </div>
    </div>
--- a/legalconsenthub/app/components/FormValidationIndicator.vue
+++ b/legalconsenthub/app/components/FormValidationIndicator.vue
@@ -1,13 +1,7 @@
 <template>
  <div class="flex items-center gap-2">
    <div class="relative flex items-center justify-center">
-      <svg
-        class="shield-ring"
-        :class="ringClass"
-        width="48"
-        height="48"
-        viewBox="0 0 48 48"
-      >
+      <svg class="shield-ring" :class="ringClass" width="48" height="48" viewBox="0 0 48 48">
        <circle
          class="ring-background"
          cx="24"
@@ -32,24 +26,13 @@
          transform="rotate(-90 24 24)"
        />
      </svg>
-      
+
      <Transition name="shield-pulse" mode="out-in">
-        <UIcon
-          :key="status"
-          :name="shieldIcon"
-          class="absolute shield-icon"
-          :class="iconClass"
-        />
+        <UIcon :key="status" :name="shieldIcon" class="absolute shield-icon" :class="iconClass" />
      </Transition>
    </div>
-    
-    <UBadge
-      :label="statusLabel"
-      :color="badgeColor"
-      size="md"
-      variant="subtle"
-      class="status-badge"
-    />
+
+    <UBadge :label="statusLabel" :color="badgeColor" size="md" variant="subtle" class="status-badge" />
  </div>
 </template>

@@ -75,16 +58,18 @@ const shieldIcon = computed(() => {
  }
 })

+const { t: $t } = useI18n()
+
 const statusLabel = computed(() => {
  switch (props.status) {
    case ComplianceStatus.Critical:
-      return 'Kritisch'
+      return $t('compliance.critical')
    case ComplianceStatus.Warning:
-      return 'Warnung'
+      return $t('compliance.warning')
    case ComplianceStatus.NonCritical:
-      return 'Unkritisch'
+      return $t('compliance.nonCritical')
    default:
-      return 'Unkritisch'
+      return $t('compliance.nonCritical')
  }
 })

@@ -144,15 +129,18 @@ const progressOffset = computed(() => {
  return circumference - (progressValue.value / 100) * circumference
 })

-watch(() => props.status, () => {
-  const element = document.querySelector('.shield-ring')
-  if (element) {
-    element.classList.add('status-change-pulse')
-    setTimeout(() => {
-      element.classList.remove('status-change-pulse')
-    }, 600)
+watch(
+  () => props.status,
+  () => {
+    const element = document.querySelector('.shield-ring')
+    if (element) {
+      element.classList.add('status-change-pulse')
+      setTimeout(() => {
+        element.classList.remove('status-change-pulse')
+      }, 600)
+    }
  }
-})
+)
 </script>

 <style scoped>
@@ -210,4 +198,3 @@ watch(() => props.status, () => {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
 }
 </style>
-
--- a/legalconsenthub/app/components/NotificationsSlideover.vue
+++ b/legalconsenthub/app/components/NotificationsSlideover.vue
@@ -1,9 +1,9 @@
 <template>
-  <USlideover v-model:open="isOpen" title="Benachrichtigungen">
+  <USlideover v-model:open="isOpen" :title="$t('notifications.title')">
    <template #body>
      <div v-if="notifications.length === 0" class="text-center py-8 text-muted">
        <UIcon name="i-heroicons-bell-slash" class="h-8 w-8 mx-auto mb-2" />
-        <p>Keine Benachrichtigungen</p>
+        <p>{{ $t('notifications.empty') }}</p>
      </div>

      <NuxtLink
--- a/legalconsenthub/app/components/RestoreVersionModal.vue
+++ b/legalconsenthub/app/components/RestoreVersionModal.vue
@@ -1,19 +1,18 @@
 <template>
-  <UModal :open="open" title="Version wiederherstellen" @update:open="$emit('update:open', $event)">
+  <UModal :open="open" :title="$t('versions.restoreTitle')" @update:open="$emit('update:open', $event)">
    <template #body>
      <div class="space-y-2">
        <p>
-          Möchten Sie Version <strong>v{{ versionNumber }}</strong> wirklich wiederherstellen?
+          {{ $t('versions.restoreConfirm', { number: versionNumber }) }}
        </p>
        <p class="text-sm text-gray-600">
-          Dies erstellt eine neue Version mit dem Inhalt der ausgewählten Version. Die aktuelle Version und alle
-          Änderungen bleiben in der Historie erhalten.
+          {{ $t('versions.restoreDescription') }}
        </p>
      </div>
    </template>
    <template #footer>
-      <UButton label="Abbrechen" color="neutral" variant="outline" @click="$emit('update:open', false)" />
-      <UButton label="Wiederherstellen" color="primary" :loading="loading" @click="$emit('confirm')" />
+      <UButton :label="$t('common.cancel')" color="neutral" variant="outline" @click="$emit('update:open', false)" />
+      <UButton :label="$t('versions.restore')" color="primary" :loading="loading" @click="$emit('confirm')" />
    </template>
  </UModal>
 </template>
--- a/legalconsenthub/app/components/TheComment.vue
+++ b/legalconsenthub/app/components/TheComment.vue
@@ -23,9 +23,11 @@
    </UChatMessages>
  </template>
  <UTextarea v-model="commentTextAreaValue" class="w-full" />
-  <UButton v-if="!isEditingComment" class="my-3 lg:my-4" @click="submitComment(formElementId)"> Submit </UButton>
-  <UButton v-if="isEditingComment" class="my-3 lg:my-4" @click="updateEditComment"> Edit comment </UButton>
-  <UButton v-if="isEditingComment" class="my-3 lg:my-4" @click="cancelEditComment"> Cancel </UButton>
+  <UButton v-if="!isEditingComment" class="my-3 lg:my-4" @click="submitComment(formElementId)">
+    {{ $t('comments.submit') }}
+  </UButton>
+  <UButton v-if="isEditingComment" class="my-3 lg:my-4" @click="updateEditComment"> {{ $t('comments.edit') }} </UButton>
+  <UButton v-if="isEditingComment" class="my-3 lg:my-4" @click="cancelEditComment"> {{ $t('common.cancel') }} </UButton>
 </template>

 <script setup lang="ts">
@@ -50,11 +52,12 @@ const {
 } = commentActions

 function createChatMessageActions(comment: CommentDto) {
+  const { t: $t } = useI18n()
  const chatMessageActions = []

  if (isCommentByUser(comment)) {
    chatMessageActions.push({
-      label: 'Edit',
+      label: $t('comments.editAction'),
      icon: 'i-lucide-pencil',
      onClick: () => editComment(comment)
    })
--- a/legalconsenthub/app/components/UserMenu.vue
+++ b/legalconsenthub/app/components/UserMenu.vue
@@ -71,6 +71,8 @@ const user = ref({
  }
 })

+const { t: $t } = useI18n()
+
 const items = computed<DropdownMenuItem[][]>(() => [
  [
    {
@@ -81,27 +83,27 @@ const items = computed<DropdownMenuItem[][]>(() => [
  ],
  [
    {
-      label: 'Profile',
+      label: $t('user.profile'),
      icon: 'i-lucide-user'
    },
    {
-      label: 'Administration',
+      label: $t('user.administration'),
      icon: 'i-lucide-shield',
      to: '/administration'
    },
    {
-      label: 'Settings',
+      label: $t('user.settings'),
      icon: 'i-lucide-settings',
      to: '/settings'
    }
  ],
  [
    {
-      label: 'Theme',
+      label: $t('user.theme'),
      icon: 'i-lucide-palette',
      children: [
        {
-          label: 'Primary',
+          label: $t('user.themePrimary'),
          slot: 'chip',
          chip: appConfig.ui.colors.primary,
          content: {
@@ -121,7 +123,7 @@ const items = computed<DropdownMenuItem[][]>(() => [
          }))
        },
        {
-          label: 'Neutral',
+          label: $t('user.themeNeutral'),
          slot: 'chip',
          chip: appConfig.ui.colors.neutral,
          content: {
@@ -143,11 +145,11 @@ const items = computed<DropdownMenuItem[][]>(() => [
      ]
    },
    {
-      label: 'Appearance',
+      label: $t('user.appearance'),
      icon: 'i-lucide-sun-moon',
      children: [
        {
-          label: 'Light',
+          label: $t('user.light'),
          icon: 'i-lucide-sun',
          type: 'checkbox',
          checked: colorMode.value === 'light',
@@ -157,7 +159,7 @@ const items = computed<DropdownMenuItem[][]>(() => [
          }
        },
        {
-          label: 'Dark',
+          label: $t('user.dark'),
          icon: 'i-lucide-moon',
          type: 'checkbox',
          checked: colorMode.value === 'dark',
@@ -175,7 +177,7 @@ const items = computed<DropdownMenuItem[][]>(() => [
  ],
  [
    {
-      label: 'Log out',
+      label: $t('user.logout'),
      icon: 'i-lucide-log-out',
      async onSelect(e: Event) {
        e.preventDefault()
--- a/legalconsenthub/app/components/VersionComparisonModal.vue
+++ b/legalconsenthub/app/components/VersionComparisonModal.vue
@@ -1,7 +1,7 @@
 <template>
-  <UModal :open="open" title="Vergleich mit Version" @update:open="$emit('update:open', $event)">
+  <UModal :open="open" :title="$t('versions.compare')" @update:open="$emit('update:open', $event)">
    <template #header>
-      <h3 class="text-lg font-semibold">Vergleich: Aktuelles Formular mit Version v{{ versionNumber }}</h3>
+      <h3 class="text-lg font-semibold">{{ $t('versions.comparisonTitle', { number: versionNumber }) }}</h3>
    </template>

    <template #body>
@@ -9,13 +9,13 @@
        <UIcon name="i-lucide-loader-circle" class="animate-spin h-8 w-8" />
      </div>

-      <div v-else-if="error" class="text-red-500">Fehler beim Laden der Version: {{ error }}</div>
+      <div v-else-if="error" class="text-red-500">{{ $t('versions.comparisonError') }}: {{ error }}</div>

      <div v-else-if="diff && hasChanges" class="space-y-6">
        <div v-if="diff.elementsAdded.length > 0" class="space-y-2">
          <h4 class="font-semibold text-success flex items-center gap-2">
            <UIcon name="i-lucide-plus-circle" />
-            Hinzugefügte Elemente ({{ diff.elementsAdded.length }})
+            {{ $t('versions.elementsAdded', { count: diff.elementsAdded.length }) }}
          </h4>
          <UCard v-for="(element, index) in diff.elementsAdded" :key="`added-${index}`" variant="subtle">
            <div class="flex items-start gap-2">
@@ -31,14 +31,17 @@
        <div v-if="diff.elementsRemoved.length > 0" class="space-y-2">
          <h4 class="font-semibold text-error flex items-center gap-2">
            <UIcon name="i-lucide-minus-circle" />
-            Entfernte Elemente ({{ diff.elementsRemoved.length }})
+            {{ $t('versions.elementsRemoved', { count: diff.elementsRemoved.length }) }}
          </h4>
          <UCard v-for="(element, index) in diff.elementsRemoved" :key="`removed-${index}`" variant="subtle">
            <div class="flex items-start gap-2">
              <UBadge color="error" variant="subtle">-</UBadge>
              <div class="flex-1">
-                <div class="font-medium">{{ element.title || 'Ohne Titel' }}</div>
-                <div class="text-sm text-gray-500">Typ: {{ element.type }} · Sektion: {{ element.sectionTitle }}</div>
+                <div class="font-medium">{{ element.title || $t('versions.elementWithoutTitle') }}</div>
+                <div class="text-sm text-gray-500">
+                  {{ $t('common.type') }}: {{ element.type }} · {{ $t('versions.elementIn') }}
+                  {{ element.sectionTitle }}
+                </div>
              </div>
            </div>
          </UCard>
@@ -47,14 +50,14 @@
        <div v-if="diff.elementsModified.length > 0" class="space-y-2">
          <h4 class="font-semibold text-warning flex items-center gap-2">
            <UIcon name="i-lucide-pencil" />
-            Geänderte Elemente ({{ diff.elementsModified.length }})
+            {{ $t('versions.elementsModified', { count: diff.elementsModified.length }) }}
          </h4>
          <UCard v-for="(element, index) in diff.elementsModified" :key="`modified-${index}`" variant="subtle">
            <div class="space-y-2">
              <div class="flex items-start gap-2">
                <UBadge color="warning" variant="subtle">~</UBadge>
                <div class="flex-1">
-                  <div class="font-medium">Element in {{ element.sectionTitle }}</div>
+                  <div class="font-medium">{{ $t('versions.elementIn') }} {{ element.sectionTitle }}</div>

                  <div
                    v-if="
@@ -66,7 +69,7 @@
                  >
                    <div v-if="element.optionsAdded.length > 0">
                      <div class="text-sm font-medium text-success">
-                        Optionen hinzugefügt ({{ element.optionsAdded.length }}):
+                        {{ $t('versions.optionsAdded', { count: element.optionsAdded.length }) }}:
                      </div>
                      <div
                        v-for="(option, optIdx) in element.optionsAdded"
@@ -80,7 +83,7 @@

                    <div v-if="element.optionsRemoved.length > 0">
                      <div class="text-sm font-medium text-error">
-                        Optionen entfernt ({{ element.optionsRemoved.length }}):
+                        {{ $t('versions.optionsRemoved', { count: element.optionsRemoved.length }) }}:
                      </div>
                      <div
                        v-for="(option, optIdx) in element.optionsRemoved"
@@ -94,7 +97,7 @@

                    <div v-if="element.optionsModified.length > 0">
                      <div class="text-sm font-medium text-warning">
-                        Optionen geändert ({{ element.optionsModified.length }}):
+                        {{ $t('versions.optionsModified', { count: element.optionsModified.length }) }}:
                      </div>
                      <div
                        v-for="(option, optIdx) in element.optionsModified"
@@ -117,12 +120,12 @@
        </div>
      </div>

-      <div v-else class="text-center py-8 text-gray-500">Keine Unterschiede gefunden</div>
+      <div v-else class="text-center py-8 text-gray-500">{{ $t('versions.noChanges') }}</div>
    </template>

    <template #footer>
      <div class="flex justify-end">
-        <UButton label="Schließen" color="neutral" variant="outline" @click="$emit('update:open', false)" />
+        <UButton :label="$t('common.close')" color="neutral" variant="outline" @click="$emit('update:open', false)" />
      </div>
    </template>
  </UModal>
@@ -145,6 +148,7 @@ defineEmits<{
 }>()

 const { getVersion } = useApplicationFormVersion()
+const { t: $t } = useI18n()

 const loading = ref(false)
 const error = ref<string | null>(null)
@@ -176,7 +180,7 @@ async function loadVersionAndCompare() {
    versionData.value = await getVersion(props.applicationFormId, props.versionNumber)
    diff.value = compareApplicationForms(props.currentForm, versionData.value.snapshot)
  } catch (e: unknown) {
-    error.value = e instanceof Error ? e.message : 'Unbekannter Fehler'
+    error.value = e instanceof Error ? e.message : $t('versions.unknownError')
  } finally {
    loading.value = false
  }
--- a/legalconsenthub/app/components/VersionHistory.vue
+++ b/legalconsenthub/app/components/VersionHistory.vue
@@ -4,9 +4,9 @@
      <UIcon name="i-lucide-loader-circle" class="animate-spin h-8 w-8" />
    </div>

-    <div v-else-if="error" class="text-red-500">Fehler beim Laden der Versionen: {{ error }}</div>
+    <div v-else-if="error" class="text-red-500">{{ $t('versions.loadError') }}: {{ error }}</div>

-    <div v-else-if="versions.length === 0" class="text-center py-8 text-gray-500">Keine Versionen verfügbar</div>
+    <div v-else-if="versions.length === 0" class="text-center py-8 text-gray-500">{{ $t('versions.empty') }}</div>

    <div v-else class="space-y-3">
      <UCard v-for="version in versions" :key="version.id" class="hover:shadow-md transition-shadow">
@@ -29,7 +29,7 @@
              size="sm"
              color="neutral"
              variant="outline"
-              label="Vergleichen"
+              :label="$t('versions.compare')"
              @click="openComparisonModal(version)"
            />
            <UButton
@@ -37,7 +37,7 @@
              size="sm"
              color="neutral"
              variant="outline"
-              label="Wiederherstellen"
+              :label="$t('versions.restore')"
              @click="openRestoreModal(version)"
            />
          </div>
@@ -76,6 +76,7 @@ const emit = defineEmits<{

 const { getVersions, restoreVersion } = useApplicationFormVersion()
 const toast = useToast()
+const { t: $t } = useI18n()

 const versions = ref<ApplicationFormVersionListItemDto[]>([])
 const loading = ref(false)
@@ -91,10 +92,10 @@ async function loadVersions() {
  try {
    versions.value = await getVersions(props.applicationFormId)
  } catch (e: unknown) {
-    error.value = e instanceof Error ? e.message : 'Unbekannter Fehler'
+    error.value = e instanceof Error ? e.message : $t('versions.unknownError')
    toast.add({
-      title: 'Fehler',
-      description: 'Versionen konnten nicht geladen werden',
+      title: $t('common.error'),
+      description: $t('versions.loadErrorDescription'),
      color: 'error'
    })
  } finally {
@@ -119,8 +120,8 @@ async function handleRestore() {
  try {
    await restoreVersion(props.applicationFormId, selectedVersion.value.versionNumber)
    toast.add({
-      title: 'Erfolg',
-      description: `Version v${selectedVersion.value.versionNumber} wurde wiederhergestellt`,
+      title: $t('common.success'),
+      description: $t('versions.restored', { number: selectedVersion.value.versionNumber }),
      color: 'success'
    })
    isRestoreModalOpen.value = false
@@ -128,8 +129,8 @@ async function handleRestore() {
    emit('restored')
  } catch {
    toast.add({
-      title: 'Fehler',
-      description: 'Version konnte nicht wiederhergestellt werden',
+      title: $t('common.error'),
+      description: $t('versions.restoreError'),
      color: 'error'
    })
  } finally {
@@ -154,18 +155,20 @@ function getStatusColor(status: ApplicationFormStatus) {
  }
 }

+const { t: $t } = useI18n()
+
 function getStatusLabel(status: ApplicationFormStatus): string {
  switch (status) {
    case 'DRAFT':
-      return 'Entwurf'
+      return $t('applicationForms.status.draft')
    case 'SUBMITTED':
-      return 'Eingereicht'
+      return $t('applicationForms.status.submitted')
    case 'APPROVED':
-      return 'Genehmigt'
+      return $t('applicationForms.status.approved')
    case 'REJECTED':
-      return 'Abgelehnt'
+      return $t('applicationForms.status.rejected')
    case 'SIGNED':
-      return 'Signiert'
+      return $t('applicationForms.status.signed')
    default:
      return status
  }
--- a/legalconsenthub/app/components/formelements/TheSelect.vue
+++ b/legalconsenthub/app/components/formelements/TheSelect.vue
@@ -1,5 +1,5 @@
 <template>
-  <USelect v-model="modelValue" placeholder="Select status" :items="items" />
+  <USelect v-model="modelValue" :placeholder="$t('applicationForms.formElements.selectPlaceholder')" :items="items" />
 </template>

 <script setup lang="ts">
--- a/legalconsenthub/app/components/formelements/TheTitleBodyInput.vue
+++ b/legalconsenthub/app/components/formelements/TheTitleBodyInput.vue
@@ -1,8 +1,8 @@
 <template>
-  <UFormField label="Titel">
+  <UFormField :label="$t('applicationForms.formElements.title')">
    <UInput v-model="title" class="w-full" :disabled="props.disabled" />
  </UFormField>
-  <UFormField label="Text">
+  <UFormField :label="$t('applicationForms.formElements.text')">
    <UTextarea v-model="body" class="w-full" autoresize :disabled="props.disabled" />
  </UFormField>
 </template>
--- a/legalconsenthub/app/components/formelements/Unimplemented.vue
+++ b/legalconsenthub/app/components/formelements/Unimplemented.vue
@@ -1,3 +1,3 @@
 <template>
-  <div>Element unimplemented:</div>
+  <div>{{ $t('applicationForms.formElements.unimplemented') }}</div>
 </template>