feat: Add textarea form element

This commit is contained in:
2025-12-06 18:00:27 +01:00
parent f1b66c184b
commit 4b06f68265
5 changed files with 52 additions and 18 deletions

View File

@@ -99,7 +99,7 @@ Application Form
└── Form Elements (FormElement) └── Form Elements (FormElement)
├── id (UUID - generated by backend) ├── id (UUID - generated by backend)
├── reference (string - custom key like "art_der_massnahme") ├── reference (string - custom key like "art_der_massnahme")
├── type (SELECT, CHECKBOX, RADIOBUTTON, TEXTFIELD, SWITCH, TITLE_BODY_TEXTFIELDS) ├── type (SELECT, CHECKBOX, RADIOBUTTON, TEXTFIELD, TEXTAREA, SWITCH, TITLE_BODY_TEXTFIELDS, DATE)
├── title, description ├── title, description
├── options (FormOption[]) ├── options (FormOption[])
│ ├── value, label │ ├── value, label
@@ -227,7 +227,7 @@ Form elements can be conditionally shown or hidden based on the values of other
"reference": "testphase_zeitraum", "reference": "testphase_zeitraum",
"title": "Testphase Zeitraum", "title": "Testphase Zeitraum",
"description": "Zeitraum der Testphase", "description": "Zeitraum der Testphase",
"type": "TEXTFIELD", "type": "TEXTAREA",
"options": [ "options": [
{ {
"value": "", "value": "",

View File

@@ -1457,6 +1457,7 @@ components:
- CHECKBOX - CHECKBOX
- RADIOBUTTON - RADIOBUTTON
- TEXTFIELD - TEXTFIELD
- TEXTAREA
- SWITCH - SWITCH
- TITLE_BODY_TEXTFIELDS - TITLE_BODY_TEXTFIELDS
- DATE - DATE

View File

@@ -89,6 +89,8 @@ function getResolvedComponent(formElement: FormElementDto) {
return resolveComponent('TheSwitch') return resolveComponent('TheSwitch')
case 'TEXTFIELD': case 'TEXTFIELD':
return resolveComponent('TheInput') return resolveComponent('TheInput')
case 'TEXTAREA':
return resolveComponent('TheTextarea')
case 'TITLE_BODY_TEXTFIELDS': case 'TITLE_BODY_TEXTFIELDS':
return resolveComponent('TheTitleBodyInput') return resolveComponent('TheTitleBodyInput')
case 'DATE': case 'DATE':

View File

@@ -0,0 +1,31 @@
<template>
<UFormField :label="label">
<UTextarea v-model="modelValue" class="w-full" autoresize />
</UFormField>
</template>
<script setup lang="ts">
import type { FormOptionDto } from '~~/.api-client'
const props = defineProps<{
label?: string
formOptions: FormOptionDto[]
}>()
const emit = defineEmits<{
(e: 'update:formOptions', value: FormOptionDto[]): void
}>()
const modelValue = computed({
get: () => props.formOptions[0]?.value ?? '',
set: (val) => {
const firstOption = props.formOptions[0]
if (val && firstOption) {
const updatedModelValue = [...props.formOptions]
updatedModelValue[0] = { ...firstOption, value: val.toString() }
emit('update:formOptions', updatedModelValue)
}
}
})
</script>

View File

@@ -107,7 +107,7 @@
"employeeDataCategory": "NON_CRITICAL" "employeeDataCategory": "NON_CRITICAL"
} }
], ],
"type": "TEXTFIELD", "type": "TEXTAREA",
"visibilityCondition": { "visibilityCondition": {
"conditionType": "SHOW", "conditionType": "SHOW",
"sourceFormElementReference": "testphase_findet_statt", "sourceFormElementReference": "testphase_findet_statt",
@@ -153,7 +153,7 @@
"employeeDataCategory": "SENSITIVE" "employeeDataCategory": "SENSITIVE"
} }
], ],
"type": "TEXTFIELD", "type": "TEXTAREA",
"visibilityCondition": { "visibilityCondition": {
"conditionType": "SHOW", "conditionType": "SHOW",
"sourceFormElementReference": "verwendung_anonymisierter_daten", "sourceFormElementReference": "verwendung_anonymisierter_daten",
@@ -173,7 +173,7 @@
"employeeDataCategory": "REVIEW_REQUIRED" "employeeDataCategory": "REVIEW_REQUIRED"
} }
], ],
"type": "TEXTFIELD", "type": "TEXTAREA",
"visibilityCondition": { "visibilityCondition": {
"conditionType": "SHOW", "conditionType": "SHOW",
"sourceFormElementReference": "verwendung_anonymisierter_daten", "sourceFormElementReference": "verwendung_anonymisierter_daten",
@@ -193,7 +193,7 @@
"employeeDataCategory": "SENSITIVE" "employeeDataCategory": "SENSITIVE"
} }
], ],
"type": "TEXTFIELD", "type": "TEXTAREA",
"visibilityCondition": { "visibilityCondition": {
"conditionType": "SHOW", "conditionType": "SHOW",
"sourceFormElementReference": "verwendung_anonymisierter_daten", "sourceFormElementReference": "verwendung_anonymisierter_daten",
@@ -233,7 +233,7 @@
"employeeDataCategory": "NON_CRITICAL" "employeeDataCategory": "NON_CRITICAL"
} }
], ],
"type": "TEXTFIELD", "type": "TEXTAREA",
"visibilityCondition": { "visibilityCondition": {
"conditionType": "SHOW", "conditionType": "SHOW",
"sourceFormElementReference": "abgeloestes_system", "sourceFormElementReference": "abgeloestes_system",
@@ -273,7 +273,7 @@
"employeeDataCategory": "NON_CRITICAL" "employeeDataCategory": "NON_CRITICAL"
} }
], ],
"type": "TEXTFIELD", "type": "TEXTAREA",
"visibilityCondition": { "visibilityCondition": {
"conditionType": "SHOW", "conditionType": "SHOW",
"sourceFormElementReference": "geaendertes_system", "sourceFormElementReference": "geaendertes_system",
@@ -299,7 +299,7 @@
"employeeDataCategory": "NON_CRITICAL" "employeeDataCategory": "NON_CRITICAL"
} }
], ],
"type": "TEXTFIELD", "type": "TEXTAREA",
"visibilityCondition": { "visibilityCondition": {
"conditionType": "HIDE", "conditionType": "HIDE",
"sourceFormElementReference": "art_der_massnahme", "sourceFormElementReference": "art_der_massnahme",
@@ -319,7 +319,7 @@
"employeeDataCategory": "REVIEW_REQUIRED" "employeeDataCategory": "REVIEW_REQUIRED"
} }
], ],
"type": "TEXTFIELD", "type": "TEXTAREA",
"visibilityCondition": { "visibilityCondition": {
"conditionType": "HIDE", "conditionType": "HIDE",
"sourceFormElementReference": "art_der_massnahme", "sourceFormElementReference": "art_der_massnahme",
@@ -339,7 +339,7 @@
"employeeDataCategory": "REVIEW_REQUIRED" "employeeDataCategory": "REVIEW_REQUIRED"
} }
], ],
"type": "TEXTFIELD", "type": "TEXTAREA",
"visibilityCondition": { "visibilityCondition": {
"conditionType": "HIDE", "conditionType": "HIDE",
"sourceFormElementReference": "art_der_massnahme", "sourceFormElementReference": "art_der_massnahme",
@@ -365,7 +365,7 @@
"employeeDataCategory": "NON_CRITICAL" "employeeDataCategory": "NON_CRITICAL"
} }
], ],
"type": "TEXTFIELD", "type": "TEXTAREA",
"visibilityCondition": { "visibilityCondition": {
"conditionType": "HIDE", "conditionType": "HIDE",
"sourceFormElementReference": "art_der_massnahme", "sourceFormElementReference": "art_der_massnahme",
@@ -385,7 +385,7 @@
"employeeDataCategory": "NON_CRITICAL" "employeeDataCategory": "NON_CRITICAL"
} }
], ],
"type": "TEXTFIELD", "type": "TEXTAREA",
"visibilityCondition": { "visibilityCondition": {
"conditionType": "HIDE", "conditionType": "HIDE",
"sourceFormElementReference": "art_der_massnahme", "sourceFormElementReference": "art_der_massnahme",
@@ -405,7 +405,7 @@
"employeeDataCategory": "NON_CRITICAL" "employeeDataCategory": "NON_CRITICAL"
} }
], ],
"type": "TEXTFIELD", "type": "TEXTAREA",
"visibilityCondition": { "visibilityCondition": {
"conditionType": "HIDE", "conditionType": "HIDE",
"sourceFormElementReference": "art_der_massnahme", "sourceFormElementReference": "art_der_massnahme",
@@ -535,7 +535,7 @@
"employeeDataCategory": "NON_CRITICAL" "employeeDataCategory": "NON_CRITICAL"
} }
], ],
"type": "TEXTFIELD", "type": "TEXTAREA",
"visibilityCondition": { "visibilityCondition": {
"conditionType": "SHOW", "conditionType": "SHOW",
"sourceFormElementReference": "modulbasiertes_system", "sourceFormElementReference": "modulbasiertes_system",
@@ -555,7 +555,7 @@
"employeeDataCategory": "NON_CRITICAL" "employeeDataCategory": "NON_CRITICAL"
} }
], ],
"type": "TEXTFIELD", "type": "TEXTAREA",
"visibilityCondition": { "visibilityCondition": {
"conditionType": "SHOW", "conditionType": "SHOW",
"sourceFormElementReference": "modulbasiertes_system", "sourceFormElementReference": "modulbasiertes_system",
@@ -575,7 +575,7 @@
"employeeDataCategory": "NON_CRITICAL" "employeeDataCategory": "NON_CRITICAL"
} }
], ],
"type": "TEXTFIELD", "type": "TEXTAREA",
"visibilityCondition": { "visibilityCondition": {
"conditionType": "SHOW", "conditionType": "SHOW",
"sourceFormElementReference": "modulbasiertes_system", "sourceFormElementReference": "modulbasiertes_system",
@@ -647,7 +647,7 @@
"employeeDataCategory": "REVIEW_REQUIRED" "employeeDataCategory": "REVIEW_REQUIRED"
} }
], ],
"type": "TEXTFIELD", "type": "TEXTAREA",
"visibilityCondition": { "visibilityCondition": {
"conditionType": "SHOW", "conditionType": "SHOW",
"sourceFormElementReference": "wirtschaftliche_auswirkungen", "sourceFormElementReference": "wirtschaftliche_auswirkungen",