denis/gremiumhub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(#22): Use translation keys in files

Browse Source
This commit is contained in:
Denis Lugowski
2025-11-21 19:20:19 +01:00
parent 63023f4f9f
commit 81b1227e82
28 changed files with 497 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
legalconsenthub/app/components/DeleteModal.vue
View File

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

5
legalconsenthub/app/components/FormEngine.vue
View File

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

8
legalconsenthub/app/components/FormStepperWithNavigation.vue
View File

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

57
legalconsenthub/app/components/FormValidationIndicator.vue
View File

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

4
legalconsenthub/app/components/NotificationsSlideover.vue
View File

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

11
legalconsenthub/app/components/RestoreVersionModal.vue
View File

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

11
legalconsenthub/app/components/TheComment.vue
View File

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

22
legalconsenthub/app/components/UserMenu.vue
View File

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

34
legalconsenthub/app/components/VersionComparisonModal.vue
View File

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

35
legalconsenthub/app/components/VersionHistory.vue
View File

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

2
legalconsenthub/app/components/formelements/TheSelect.vue
View File

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

4
legalconsenthub/app/components/formelements/TheTitleBodyInput.vue
View File

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

2
legalconsenthub/app/components/formelements/Unimplemented.vue
View File

@@ -1,3 +1,3 @@
<template>
<div>Element unimplemented:</div>
<div>{{ $t('applicationForms.formElements.unimplemented') }}</div>
</template>

7
legalconsenthub/app/composables/useFormElementManagement.ts
View File

@@ -25,7 +25,12 @@ export function useFormElementManagement() {
if (applicationFormId) {
try {
return await applicationForm.addFormElementToSubSection(applicationFormId, subsectionId, inputFormElement, position + 1)
return await applicationForm.addFormElementToSubSection(
applicationFormId,
subsectionId,
inputFormElement,
position + 1
)
} catch (error) {
console.error('Failed to add form element:', error)
throw error

1
legalconsenthub/app/composables/usePermissions.ts
View File

@@ -149,4 +149,3 @@ export const usePermissions = () => {
canDeleteComment
}
}

6
legalconsenthub/app/error.vue
View File

@@ -11,9 +11,11 @@ defineProps<{
error: NuxtError
}>()
const { t: $t } = useI18n()
useSeoMeta({
title: 'Page not found',
description: 'We are sorry but this page could not be found.'
title: $t('error.pageNotFound'),
description: $t('error.pageNotFoundDescription')
})
useHead({

6
legalconsenthub/app/layouts/default.vue
View File

@@ -36,10 +36,12 @@
</template>
<script setup lang="ts">
const { t: $t } = useI18n()
const links = [
[
{
label: 'General',
label: $t('common.general'),
icon: 'i-lucide-user',
to: '/settings',
exact: true
@@ -47,7 +49,7 @@ const links = [
],
[
{
label: 'General2',
label: $t('common.general'),
icon: 'i-lucide-user',
to: '/settings',
exact: true

1
legalconsenthub/app/middleware/permissions.global.ts
View File

@@ -5,4 +5,3 @@ export default defineNuxtRouteMiddleware((to) => {
return navigateTo('/', { replace: true })
}
})

37
legalconsenthub/app/pages/administration.vue
View File

@@ -1,7 +1,7 @@
<template>
<UDashboardPanel id="administration">
<template #header>
<UDashboardNavbar title="Administration - JSON Template Editor" :ui="{ right: 'gap-3' }">
<UDashboardNavbar :title="$t('templates.editorTitle')" :ui="{ right: 'gap-3' }">
<template #leading>
<UDashboardSidebarCollapse />
</template>
@@ -10,21 +10,21 @@
<UButton
v-if="hasUnsavedChanges"
icon="i-lucide-rotate-ccw"
label="Zurücksetzen"
:label="$t('templates.reset')"
color="neutral"
variant="outline"
@click="resetEditor"
/>
<UButton
icon="i-lucide-file-plus"
label="Neue Vorlage"
:label="$t('templates.newTemplate')"
color="neutral"
variant="outline"
@click="createNewTemplate"
/>
<UButton
icon="i-lucide-save"
label="Speichern"
:label="$t('common.save')"
:disabled="!hasUnsavedChanges || !isValidJson"
:loading="isSaving"
@click="saveTemplate"
@@ -40,17 +40,17 @@
<div>
<h3 class="font-semibold text-lg">{{ currentTemplate.name }}</h3>
<p class="text-sm text-muted mt-1">
Zuletzt bearbeitet am {{ formatDate(new Date(currentTemplate.modifiedAt)) }}
{{ $t('templates.lastModified') }} {{ formatDate(new Date(currentTemplate.modifiedAt)) }}
</p>
</div>
<UBadge v-if="hasUnsavedChanges" label="Ungespeicherte Änderungen" color="warning" variant="subtle" />
<UBadge v-if="hasUnsavedChanges" :label="$t('templates.unsavedChanges')" color="warning" variant="subtle" />
</div>
</UCard>
<UCard v-else class="mb-4">
<div class="text-center py-4">
<UIcon name="i-lucide-info" class="size-8 text-muted mx-auto mb-2" />
<p class="text-muted">Keine Vorlage gefunden. Erstellen Sie eine neue Vorlage.</p>
<p class="text-muted">{{ $t('templates.noTemplateFound') }}</p>
</div>
</UCard>
@@ -70,8 +70,8 @@
v-if="!isValidJson"
color="error"
icon="i-lucide-alert-circle"
title="Ungültiges JSON"
description="Das JSON-Format ist ungültig. Bitte korrigieren Sie die Syntax."
:title="$t('templates.invalidJson')"
:description="$t('templates.invalidJsonDescription')"
/>
</div>
</template>
@@ -92,6 +92,7 @@ const colorMode = useColorMode()
const { hasRole } = usePermissions()
const { getAllApplicationFormTemplates, updateApplicationFormTemplate, createApplicationFormTemplate } =
await useApplicationFormTemplate()
const { t: $t } = useI18n()
if (!hasRole('CHIEF_EXECUTIVE_OFFICER') && !hasRole('IT_DEPARTMENT')) {
await navigateTo('/')
@@ -194,8 +195,8 @@ function createNewTemplate() {
async function saveTemplate() {
if (!isValidJson.value) {
toast.add({
title: 'Fehler',
description: 'Das JSON-Format ist ungültig.',
title: $t('common.error'),
description: $t('templates.invalidJsonDescription'),
color: 'error'
})
return
@@ -210,15 +211,15 @@ async function saveTemplate() {
if (currentTemplate.value?.id) {
currentTemplate.value = await updateApplicationFormTemplate(currentTemplate.value.id, dataWithDates)
toast.add({
title: 'Erfolg',
description: 'Vorlage erfolgreich aktualisiert.',
title: $t('common.success'),
description: $t('templates.updated'),
color: 'success'
})
} else {
currentTemplate.value = await createApplicationFormTemplate(dataWithDates)
toast.add({
title: 'Erfolg',
description: 'Vorlage erfolgreich erstellt.',
title: $t('common.success'),
description: $t('templates.created'),
color: 'success'
})
}
@@ -230,8 +231,8 @@ async function saveTemplate() {
await refreshNuxtData('applicationFormTemplates')
} catch (error) {
toast.add({
title: 'Fehler',
description: 'Fehler beim Speichern der Vorlage.',
title: $t('common.error'),
description: $t('templates.saveError'),
color: 'error'
})
console.error('Error saving template:', error)
@@ -242,7 +243,7 @@ async function saveTemplate() {
onBeforeRouteLeave((to, from, next) => {
if (hasUnsavedChanges.value) {
const answer = window.confirm('Sie haben ungespeicherte Änderungen. Möchten Sie die Seite wirklich verlassen?')
const answer = window.confirm($t('templates.unsavedWarning'))
if (answer) {
next()
} else {

9
legalconsenthub/app/pages/application-forms/[id]/[sectionIndex].vue
View File

@@ -1,7 +1,7 @@
<template>
<UDashboardPanel id="home">
<template #header>
<UDashboardNavbar title="Home" :ui="{ right: 'gap-3' }">
<UDashboardNavbar :title="$t('common.home')" :ui="{ right: 'gap-3' }">
<template #leading>
<UDashboardSidebarCollapse />
</template>
@@ -9,7 +9,7 @@
<template #right>
<UButton
icon="i-lucide-circle-plus"
label="Neuer Mitbestimmungsantrag"
:label="$t('applicationForms.createNew')"
to="/create"
:disabled="!canWriteApplicationForms"
size="xl"
@@ -59,6 +59,7 @@ import { useUserStore } from '~~/stores/useUserStore'
const route = useRoute()
const toast = useToast()
const { t: $t } = useI18n()
definePageMeta({
// Prevent whole page from re-rendering when navigating between sections to keep state
@@ -113,7 +114,7 @@ async function onSave() {
const updated = await updateForm(applicationForm.value.id, applicationForm.value)
if (updated) {
updateApplicationForm(updated)
toast.add({ title: 'Success', description: 'Application form saved', color: 'success' })
toast.add({ title: $t('common.success'), description: $t('applicationForms.saved'), color: 'success' })
}
}
}
@@ -122,7 +123,7 @@ async function onSubmit() {
if (applicationForm.value) {
await submitApplicationForm(applicationForm.value.id)
await navigateTo('/')
toast.add({ title: 'Success', description: 'Application form submitted', color: 'success' })
toast.add({ title: $t('common.success'), description: $t('applicationForms.submitted'), color: 'success' })
}
}

14
legalconsenthub/app/pages/application-forms/[id]/versions.vue
View File

@@ -2,7 +2,7 @@
<template>
<UDashboardPanel id="versions">
<template #header>
<UDashboardNavbar :title="`Versionen: ${applicationForm?.name}`">
<UDashboardNavbar :title="$t('versions.pageTitle', { name: applicationForm?.name })">
<template #leading>
<UDashboardSidebarCollapse />
</template>
@@ -15,7 +15,12 @@
<template #body>
<div class="p-6">
<VersionHistory v-if="applicationForm" :application-form-id="applicationForm.id" :current-form="applicationForm" @restored="handleRestored" />
<VersionHistory
v-if="applicationForm"
:application-form-id="applicationForm.id"
:current-form="applicationForm"
@restored="handleRestored"
/>
</div>
</template>
</UDashboardPanel>
@@ -25,6 +30,7 @@
const route = useRoute()
const router = useRouter()
const toast = useToast()
const { t: $t } = useI18n()
definePageMeta({
key: (route) => `${route.params.id}-versions`
@@ -36,8 +42,8 @@ const { applicationForm, navigationLinks: links, refresh } = await useApplicatio
async function handleRestored() {
await refresh()
toast.add({
title: 'Version wiederhergestellt',
description: 'Das Formular wurde auf die ausgewählte Version zurückgesetzt.',
title: $t('versions.restored'),
description: $t('versions.restoredDescription'),
color: 'success'
})
router.push(`/application-forms/${applicationForm.value.id}/0`)

15
legalconsenthub/app/pages/create.vue
View File

@@ -1,7 +1,7 @@
<template>
<UDashboardPanel id="home">
<template #header>
<UDashboardNavbar title="Home" :ui="{ right: 'gap-3' }">
<UDashboardNavbar :title="$t('common.home')" :ui="{ right: 'gap-3' }">
<template #leading>
<UDashboardSidebarCollapse />
</template>
@@ -18,9 +18,9 @@
<div class="flex flex-col gap-4 sm:gap-6 lg:gap-12 w-full lg:max-w-4xl mx-auto">
<div v-if="!canWriteApplicationForms" class="text-center py-12">
<UIcon name="i-lucide-shield-x" class="w-16 h-16 mx-auto text-red-400 mb-4" />
<h2 class="text-2xl font-semibold text-gray-700 mb-2">Keine Berechtigung</h2>
<p class="text-gray-500 mb-4">Sie haben keine Berechtigung zum Erstellen von Anträgen.</p>
<UButton to="/" class="mt-4"> Zurück zur Übersicht </UButton>
<h2 class="text-2xl font-semibold text-gray-700 mb-2">{{ $t('applicationForms.noPermission') }}</h2>
<p class="text-gray-500 mb-4">{{ $t('applicationForms.noPermissionDescription') }}</p>
<UButton to="/" class="mt-4"> {{ $t('applicationForms.backToOverview') }} </UButton>
</div>
<div v-else-if="applicationFormTemplate">
<FormStepperWithNavigation
@@ -29,7 +29,7 @@
@submit="onSubmit"
@add-input-form="handleAddInputForm"
>
<UFormField label="Name" class="mb-4">
<UFormField :label="$t('common.name')" class="mb-4">
<UInput v-model="applicationFormTemplate.name" class="w-full" />
</UFormField>
</FormStepperWithNavigation>
@@ -57,6 +57,7 @@ const { canWriteApplicationForms } = usePermissions()
const userStore = useUserStore()
const { selectedOrganization } = storeToRefs(userStore)
const toast = useToast()
const { t: $t } = useI18n()
const { data, error } = await useAsyncData<PagedApplicationFormDto>(
'create-application-form',
@@ -98,7 +99,7 @@ watch(
async function onSave() {
const applicationForm = await prepareAndCreateApplicationForm()
if (applicationForm) {
toast.add({ title: 'Success', description: 'Application form saved', color: 'success' })
toast.add({ title: $t('common.success'), description: $t('applicationForms.saved'), color: 'success' })
}
}
@@ -107,7 +108,7 @@ async function onSubmit() {
if (applicationForm) {
await submitApplicationForm(applicationForm.id)
await navigateTo('/')
toast.add({ title: 'Success', description: 'Application form submitted', color: 'success' })
toast.add({ title: $t('common.success'), description: $t('applicationForms.submitted'), color: 'success' })
}
}

19
legalconsenthub/app/pages/index.vue
View File

@@ -1,13 +1,13 @@
<template>
<UDashboardPanel id="home">
<template #header>
<UDashboardNavbar title="Home" :ui="{ right: 'gap-3' }">
<UDashboardNavbar :title="$t('common.home')" :ui="{ right: 'gap-3' }">
<template #leading>
<UDashboardSidebarCollapse />
</template>
<template #right>
Aktuelle Organisation
{{ $t('organization.current') }}
<USelect
v-model="selectedOrganizationId"
:items="organizations"
@@ -20,7 +20,7 @@
class="w-48"
/>
<UTooltip text="Notifications" :shortcuts="['N']">
<UTooltip :text="$t('notifications.tooltip')" :shortcuts="['N']">
<UButton color="neutral" variant="ghost" square @click="isNotificationsSlideoverOpen = true">
<UChip :show="unreadCount > 0" color="error" inset>
<UIcon name="i-lucide-bell" class="size-5 shrink-0" />
@@ -31,7 +31,7 @@
<UButton
icon="i-lucide-circle-plus"
label="Neuer Mitbestimmungsantrag"
:label="$t('applicationForms.createNew')"
to="/create"
:disabled="!canWriteApplicationForms"
size="xl"
@@ -86,18 +86,18 @@
<div class="flex items-center gap-2 text-sm">
<UIcon name="i-lucide-pencil" class="size-4 text-muted shrink-0" />
<span class="text-muted">
Zuletzt bearbeitet von
{{ $t('applicationForms.lastEditedBy') }}
<span class="font-medium text-highlighted">{{ applicationFormElem.lastModifiedBy.name }}</span>
am {{ formatDate(applicationFormElem.modifiedAt) }}
{{ $t('common.on') }} {{ formatDate(applicationFormElem.modifiedAt) }}
</span>
</div>
<div class="flex items-center gap-2 text-sm">
<UIcon name="i-lucide-user-plus" class="size-4 text-muted shrink-0" />
<span class="text-muted">
Erstellt von
{{ $t('applicationForms.createdBy') }}
<span class="font-medium text-highlighted">{{ applicationFormElem.createdBy.name }}</span>
am {{ formatDate(applicationFormElem.createdAt) }}
{{ $t('common.on') }} {{ formatDate(applicationFormElem.createdAt) }}
</span>
</div>
</div>
@@ -122,6 +122,7 @@ const { getAllApplicationForms, deleteApplicationFormById } = useApplicationForm
const route = useRoute()
const userStore = useUserStore()
const { organizations, selectedOrganization } = storeToRefs(userStore)
const { t: $t } = useI18n()
// Inject notification state from layout
const { isNotificationsSlideoverOpen, unreadCount } = inject('notificationState', {
@@ -178,7 +179,7 @@ const applicationForms = computed({
function getLinksForApplicationForm(applicationForm: ApplicationFormDto) {
return [
{
label: 'Löschen',
label: $t('common.delete'),
icon: 'i-lucide-trash',
to: `?delete&id=${applicationForm.id}`,
disabled: !canWriteApplicationForms.value

53
legalconsenthub/app/pages/login.vue
View File

@@ -1,40 +1,37 @@
<template>
<UCard variant="subtle">
<template #header>
<div class="text-center">
<UIcon name="i-lucide-lock" class="mx-auto h-16 w-16 text-primary-500 mb-6" />
<h1 class="text-3xl font-bold text-gray-900 mb-2">
Welcome
</h1>
<p class="text-gray-600">
You will be redirected to Keycloak to authenticate
</p>
</div>
</template>
<UCard variant="subtle">
<template #header>
<div class="text-center">
<UButton
color="primary"
size="xl"
icon="i-lucide-log-in"
@click="handleSignIn"
>
Sign in with Keycloak
</UButton>
<UIcon name="i-lucide-lock" class="mx-auto h-16 w-16 text-primary-500 mb-6" />
<h1 class="text-3xl font-bold text-gray-900 mb-2">
{{ $t('auth.welcome') }}
</h1>
<p class="text-gray-600">
{{ $t('auth.redirectMessage') }}
</p>
</div>
</template>
<template #footer>
<div class="text-center text-xs text-gray-500">
By signing in, you agree to our terms of service
</div>
</template>
</UCard>
<div class="text-center">
<UButton color="primary" size="xl" icon="i-lucide-log-in" @click="handleSignIn">
{{ $t('auth.signIn') }}
</UButton>
</div>
<template #footer>
<div class="text-center text-xs text-gray-500">
{{ $t('auth.termsAgreement') }}
</div>
</template>
</UCard>
</template>
<script setup lang="ts">
definePageMeta({ auth: false, layout: 'auth' })
useSeoMeta({ title: 'Login' })
const { t: $t } = useI18n()
useSeoMeta({ title: $t('auth.login') })
function handleSignIn() {
navigateTo('/auth/keycloak', { external: true })

6
legalconsenthub/app/utils/formDiff.ts
View File

@@ -74,7 +74,7 @@ function flattenFormElements(form: ApplicationFormDto): Array<{ element: FormEle
for (const section of form.formElementSections) {
for (const subsection of section.formElementSubSections) {
for (const element of subsection.formElements) {
elements.push({ element, sectionTitle: section.title })
elements.push({ element, sectionTitle: section.title })
}
}
}
@@ -88,7 +88,7 @@ function flattenSnapshotElements(
for (const section of snapshot.sections) {
for (const subsection of section.subsections) {
for (const element of subsection.elements) {
elements.push({ element, sectionTitle: section.title })
elements.push({ element, sectionTitle: section.title })
}
}
}
@@ -110,7 +110,7 @@ function compareElements(
position: number
): ElementModification | null {
const optionsDiff = compareOptions(current.options, version.options)
if (optionsDiff.added.length > 0 || optionsDiff.removed.length > 0 || optionsDiff.modified.length > 0) {
return {
sectionTitle,