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

feat(fullstack): Replace TITLE_BODY element with rich text editor

Browse Source
This commit is contained in:
Denis Lugowski
2025-12-21 17:59:53 +01:00
parent 54570fae4f
commit 374c8d8905
11 changed files with 1838 additions and 1054 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
legalconsenthub/app/components/formelements/TheEditor.vue Normal file
View File

@@ -0,0 +1,106 @@
<template>
<div class="bg-white dark:bg-white rounded-md border border-gray-200 dark:border-gray-200 overflow-hidden">
<UEditor
v-slot="{ editor }"
v-model="htmlContent"
content-type="html"
:editable="!props.disabled"
:placeholder="t('applicationForms.formElements.richTextPlaceholder')"
:ui="{
content: 'bg-white dark:bg-white',
base: 'min-h-[200px] p-3 bg-white dark:bg-white'
}"
class="w-full"
>
<UEditorToolbar
:editor="editor"
:items="toolbarItems"
class="border-b border-muted sticky top-0 inset-x-0 px-3 py-2 z-50 bg-default overflow-x-auto"
/>
<UEditorSuggestionMenu :editor="editor" :items="suggestionItems" />
<UEditorMentionMenu :editor="editor" :items="mentionItems" />
<UEditorDragHandle :editor="editor" />
</UEditor>
</div>
</template>
<script setup lang="ts">
import { EmployeeDataCategory, ProcessingPurpose, type FormOptionDto } from '~~/.api-client'
const { t } = useI18n()
const props = defineProps<{
formOptions: FormOptionDto[]
disabled?: boolean
}>()
const emit = defineEmits<{
(e: 'update:formOptions', value: FormOptionDto[]): void
}>()
const htmlContent = computed({
get: () => props.formOptions[0]?.value ?? '',
set: (newValue: string) => {
const updatedOptions: FormOptionDto[] = [...props.formOptions]
if (updatedOptions.length === 0) {
const createdOption: FormOptionDto = {
value: newValue,
label: '',
processingPurpose: ProcessingPurpose.None,
employeeDataCategory: EmployeeDataCategory.None
}
updatedOptions.push(createdOption)
} else {
const firstOption = updatedOptions[0]!
updatedOptions[0] = { ...firstOption, value: newValue }
}
emit('update:formOptions', updatedOptions)
}
})
const toolbarItems = [
[
{ kind: 'undo', icon: 'i-lucide-undo' },
{ kind: 'redo', icon: 'i-lucide-redo' }
],
[
{ kind: 'heading', level: 1, icon: 'i-lucide-heading-1', label: 'H1' },
{ kind: 'heading', level: 2, icon: 'i-lucide-heading-2', label: 'H2' },
{ kind: 'heading', level: 3, icon: 'i-lucide-heading-3', label: 'H3' }
],
[
{ kind: 'mark', mark: 'bold', icon: 'i-lucide-bold' },
{ kind: 'mark', mark: 'italic', icon: 'i-lucide-italic' },
{ kind: 'mark', mark: 'underline', icon: 'i-lucide-underline' },
{ kind: 'mark', mark: 'strike', icon: 'i-lucide-strikethrough' }
],
[
{ kind: 'bulletList', icon: 'i-lucide-list' },
{ kind: 'orderedList', icon: 'i-lucide-list-ordered' }
],
[
{ kind: 'blockquote', icon: 'i-lucide-quote' },
{ kind: 'codeBlock', icon: 'i-lucide-code' }
],
[{ kind: 'link', icon: 'i-lucide-link' }]
]
const suggestionItems = [
[
{ kind: 'heading', level: 1, label: 'Überschrift 1', icon: 'i-lucide-heading-1' },
{ kind: 'heading', level: 2, label: 'Überschrift 2', icon: 'i-lucide-heading-2' },
{ kind: 'heading', level: 3, label: 'Überschrift 3', icon: 'i-lucide-heading-3' }
],
[
{ kind: 'bulletList', label: 'Aufzählung', icon: 'i-lucide-list' },
{ kind: 'orderedList', label: 'Nummerierung', icon: 'i-lucide-list-ordered' }
],
[
{ kind: 'blockquote', label: 'Zitat', icon: 'i-lucide-quote' },
{ kind: 'codeBlock', label: 'Code Block', icon: 'i-lucide-code' },
{ kind: 'horizontalRule', label: 'Trennlinie', icon: 'i-lucide-separator-horizontal' }
]
]
const mentionItems: Array<{ label: string; avatar?: { src: string } }> = []
</script>

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

@@ -1,72 +0,0 @@
<template>
<UFormField :label="$t('applicationForms.formElements.title')">
<UInput v-model="title" class="w-full" :disabled="props.disabled" />
</UFormField>
<UFormField :label="$t('applicationForms.formElements.text')">
<UTextarea v-model="body" class="w-full" autoresize :disabled="props.disabled" />
</UFormField>
</template>
<script setup lang="ts">
import type { FormOptionDto } from '~~/.api-client'
const props = defineProps<{
formOptions: FormOptionDto[]
disabled?: boolean
}>()
const emit = defineEmits<{
(e: 'update:formOptions', value: FormOptionDto[]): void
}>()
const SEPARATOR = '|||'
const title = computed({
get: () => {
const currentValue = props.formOptions[0]?.value ?? ''
return splitValue(currentValue).title
},
set: (newTitle: string) => {
const firstOption = props.formOptions[0]
if (firstOption) {
const currentValue = firstOption.value ?? ''
const { body: currentBody } = splitValue(currentValue)
const combinedValue = joinValue(newTitle, currentBody)
const updatedModelValue = [...props.formOptions]
updatedModelValue[0] = { ...firstOption, value: combinedValue }
emit('update:formOptions', updatedModelValue)
}
}
})
const body = computed({
get: () => {
const currentValue = props.formOptions[0]?.value ?? ''
return splitValue(currentValue).body
},
set: (newBody: string) => {
const firstOption = props.formOptions[0]
if (firstOption) {
const currentValue = firstOption.value ?? ''
const { title: currentTitle } = splitValue(currentValue)
const combinedValue = joinValue(currentTitle, newBody)
const updatedModelValue = [...props.formOptions]
updatedModelValue[0] = { ...firstOption, value: combinedValue }
emit('update:formOptions', updatedModelValue)
}
}
})
function splitValue(value: string): { title: string; body: string } {
const parts = value.split(SEPARATOR)
return {
title: parts[0] || '',
body: parts[1] || ''
}
}
function joinValue(title: string, body: string): string {
return `${title}${SEPARATOR}${body}`
}
</script>